lido-player 0.0.2-alpha-52-dev → 0.0.2-alpha-55-dev
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/lido-avatar_22.cjs.entry.js +187 -59
- package/dist/cjs/lido-player.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{utils-ce99b0d0.js → utils-4b44610b.js} +111 -86
- package/dist/collection/components/calculator/lido-calculator.js +4 -2
- package/dist/collection/components/container/lido-container.js +24 -2
- package/dist/collection/components/home/lido-home.css +4 -0
- package/dist/collection/components/home/lido-home.js +27 -3
- package/dist/collection/components/trace/lido-trace.js +122 -47
- package/dist/collection/stories/Templates/Fill-Up/fill-up.stories.js +26 -25
- package/dist/collection/stories/Templates/LetterPairing/LetterPairing.stories.js +3 -1
- package/dist/collection/stories/Templates/RocketGame/rocketGame.stories.js +1 -1
- package/dist/collection/stories/Templates/arrangeLetters/arrangeLetters.stories.js +1 -1
- package/dist/collection/stories/Templates/balancing/balancing.stories.js +1 -1
- package/dist/collection/stories/Templates/blender/blender.stories.js +1 -1
- package/dist/collection/stories/Templates/bubbleType/bubbleType.stories.js +1 -1
- package/dist/collection/stories/Templates/calculator/calculator.stories.js +1 -1
- package/dist/collection/stories/Templates/checker-block/checkerBlock.stories.js +1 -1
- package/dist/collection/stories/Templates/checkerBlock/checkerBlock.stories.js +1 -1
- package/dist/collection/stories/Templates/create-sentence/createSentence.stories.js +1 -1
- package/dist/collection/stories/Templates/fillAnswer/fill-answer.stories.js +1 -1
- package/dist/collection/stories/Templates/fillBlank/fill-blank.stories.js +1 -1
- package/dist/collection/stories/Templates/foodJar/food-jar.stories.js +1 -1
- package/dist/collection/stories/Templates/grid/grid.stories.js +5 -1
- package/dist/collection/stories/Templates/gridGame/grid-game.stories.js +1 -1
- package/dist/collection/stories/Templates/jumpSentence/jumpSentence.stories.js +4 -2
- package/dist/collection/stories/Templates/letterboard/letterboard.stories.js +1 -1
- package/dist/collection/stories/Templates/matchingCard/matching-card.stories.js +1 -1
- package/dist/collection/stories/Templates/multipleOption/mcqWithQuestionImage.stories.js +4 -2
- package/dist/collection/stories/Templates/multipleOption/multiple-option.stories.js +1 -1
- package/dist/collection/stories/Templates/multiplyBeeds/multiplyBeeds.stories.js +1 -1
- package/dist/collection/stories/Templates/nimbleTable/nimbleTable.stories.js +1 -1
- package/dist/collection/stories/Templates/numberBoard/numberBoard.stories.js +1 -1
- package/dist/collection/stories/Templates/numberBoardTwo/numberBoardTwo.stories.js +1 -1
- package/dist/collection/stories/Templates/numberPair/numberPair.stories.js +1 -1
- package/dist/collection/stories/Templates/openwindow/openwindow.stories.js +2 -2
- package/dist/collection/stories/Templates/openwindow/openwindow2.stories.js +2 -2
- package/dist/collection/stories/Templates/order-tractor/order-tractor-ascending-order.stories.js +1 -1
- package/dist/collection/stories/Templates/order-tractor/order-tractor.stories.js +1 -1
- package/dist/collection/stories/Templates/phonic-tractor/phonic-tractor.stories.js +1 -1
- package/dist/collection/stories/Templates/picturemeaning/pictureMeaningCocos.stories.js +5 -1
- package/dist/collection/stories/Templates/questionBoard/questionBoard.stories.js +1 -1
- package/dist/collection/stories/Templates/quizLiteracy/quizLiteracy.stories.js +1 -1
- package/dist/collection/stories/Templates/quizLiteracy/quizLiteracyImageWithText.stories.js +1 -1
- package/dist/collection/stories/Templates/quizLiteracy/quizLiteracyImageWord.stories.js +1 -1
- package/dist/collection/stories/Templates/reorder/reorder.stories.js +3 -1
- package/dist/collection/stories/Templates/rowBlocks/rowBlocks.stories.js +2 -2
- package/dist/collection/stories/Templates/sequenceBox/sequenceBox1.stories.js +6 -6
- package/dist/collection/stories/Templates/sequenceBox/sequenceBox2.stories.js +7 -6
- package/dist/collection/stories/Templates/shapePair/shape-pair.stories.js +1 -1
- package/dist/collection/stories/Templates/shapeTractor/shape-tractor.stories.js +25 -21
- package/dist/collection/stories/Templates/spellDoor/spellDoor.stories.js +1 -1
- package/dist/collection/stories/Templates/sumTogether/sumTogether.stories.js +8 -6
- package/dist/collection/stories/Templates/total/total.stories.js +1 -1
- package/dist/collection/stories/Templates/writeCard/writeCard.stories.js +1 -1
- package/dist/collection/stories/Templates/writeLetter/writeLetter.stories.js +2 -2
- package/dist/collection/stories/Templates/writeNumber/writeNumber.stories.js +6 -6
- package/dist/collection/stories/Templates/writeSet/writeSet.stories.js +1 -1
- package/dist/collection/stories/Templates/writeWord/writeWord.stories.js +7 -6
- package/dist/collection/utils/customEvents.js +1 -0
- package/dist/collection/utils/utils.js +20 -17
- package/dist/collection/utils/utilsHandlers/animationHandler.js +58 -0
- package/dist/collection/utils/utilsHandlers/clickHandler.js +5 -1
- package/dist/collection/utils/utilsHandlers/dragDropHandler.js +19 -60
- package/dist/collection/utils/utilsHandlers/slideHandler.js +7 -6
- package/dist/collection/utils/utilsHandlers/sortHandler.js +3 -5
- package/dist/components/index.js +1 -1
- package/dist/components/lido-avatar.js +1 -1
- package/dist/components/lido-balance.js +1 -1
- package/dist/components/lido-calculator.js +1 -1
- package/dist/components/lido-canvas.js +1 -1
- package/dist/components/lido-cell.js +1 -1
- package/dist/components/lido-col.js +1 -1
- package/dist/components/lido-container.js +1 -1
- package/dist/components/lido-flash-card.js +1 -1
- package/dist/components/lido-float.js +1 -1
- package/dist/components/lido-home.js +1 -1
- package/dist/components/lido-image.js +1 -1
- package/dist/components/lido-keyboard.js +1 -1
- package/dist/components/lido-math-matrix.js +1 -1
- package/dist/components/lido-pos.js +1 -1
- package/dist/components/lido-random.js +1 -1
- package/dist/components/lido-root.js +23 -23
- package/dist/components/lido-row.js +1 -1
- package/dist/components/lido-shape.js +1 -1
- package/dist/components/lido-slide-fill.js +1 -1
- package/dist/components/lido-text.js +1 -1
- package/dist/components/lido-trace.js +1 -1
- package/dist/components/lido-wrap.js +1 -1
- package/dist/components/{p-39a2e638.js → p-0be6b5d5.js} +2 -2
- package/dist/components/{p-11bf64aa.js → p-2c518dbe.js} +1 -1
- package/dist/components/{p-c4abfd0f.js → p-2e023f67.js} +1 -1
- package/dist/components/{p-58c67252.js → p-36c2e21a.js} +110 -87
- package/dist/components/{p-52e77394.js → p-3fc01453.js} +1 -1
- package/dist/components/{p-06171259.js → p-43d79c61.js} +1 -1
- package/dist/components/{p-00777872.js → p-5078599e.js} +26 -4
- package/dist/components/{p-26df0769.js → p-590ce2c9.js} +1 -1
- package/dist/components/{p-5b5f59a8.js → p-67a24ad4.js} +2 -2
- package/dist/components/{p-68112f8c.js → p-72d6a594.js} +1 -1
- package/dist/components/{p-3ce3744c.js → p-73b2bd74.js} +6 -4
- package/dist/components/{p-0fbeb3a1.js → p-73e3f0f4.js} +12 -6
- package/dist/components/{p-0c2aebfb.js → p-9acf0fcc.js} +1 -1
- package/dist/components/{p-a2f96840.js → p-b095de27.js} +1 -1
- package/dist/components/{p-b2125fc9.js → p-b0dbee97.js} +48 -24
- package/dist/components/{p-a516a324.js → p-b847f269.js} +123 -48
- package/dist/components/{p-9d34d59d.js → p-bc5202db.js} +2 -2
- package/dist/components/{p-cb56a853.js → p-c296051d.js} +1 -1
- package/dist/components/{p-8a34b98b.js → p-c69ef266.js} +1 -1
- package/dist/components/{p-2d53e1a5.js → p-ca8aea4b.js} +1 -1
- package/dist/components/{p-3f4d4c0a.js → p-de2193c5.js} +1 -1
- package/dist/components/{p-09f1e2d2.js → p-e534ea52.js} +1 -1
- package/dist/components/{p-8f2ed62f.js → p-f8c00485.js} +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/lido-avatar_22.entry.js +187 -59
- package/dist/esm/lido-player.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{utils-107b15a7.js → utils-ae1eb036.js} +110 -87
- package/dist/lido-player/index.esm.js +1 -1
- package/dist/lido-player/lido-player.esm.js +1 -1
- package/dist/lido-player/{p-d1251482.js → p-a632e2ce.js} +2 -2
- package/dist/lido-player/p-f1b879f6.entry.js +1 -0
- package/dist/types/components/container/lido-container.d.ts +1 -0
- package/dist/types/components/home/lido-home.d.ts +1 -0
- package/dist/types/components/trace/lido-trace.d.ts +1 -0
- package/dist/types/utils/utils.d.ts +1 -1
- package/dist/types/utils/utilsHandlers/animationHandler.d.ts +1 -0
- package/package.json +1 -1
- package/dist/lido-player/p-606ea279.entry.js +0 -1
|
@@ -28,7 +28,7 @@ export const OrderTractor = {
|
|
|
28
28
|
function getContainerXml(args) {
|
|
29
29
|
return `
|
|
30
30
|
<main>
|
|
31
|
-
<lido-container id="lido-container" is-allow-only-correct="${args.isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/
|
|
31
|
+
<lido-container id="lido-container" is-allow-only-correct="${args.isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Fill%20answer.png" objective="${args.answer}" width="100%" bg-color="transparent" visible="true" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000'; " onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false">
|
|
32
32
|
<!-- Chimple Avatar -->
|
|
33
33
|
<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.448px,portrait.402px" width="landscape.350px,portrait.398px" x="landscape.1267px, portrait.541px" y="landscape.587px, portrait.1304px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
|
|
34
34
|
<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
|
|
@@ -40,7 +40,7 @@ function getContainerXml(args) {
|
|
|
40
40
|
height="100%"
|
|
41
41
|
width="100%"
|
|
42
42
|
bgColor="transparent"
|
|
43
|
-
bgImage="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/
|
|
43
|
+
bgImage="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Fill%20answer.png"
|
|
44
44
|
visible="true"
|
|
45
45
|
showCheck="false"
|
|
46
46
|
isContinueOnCorrect="true"
|
|
@@ -30,7 +30,7 @@ export const OrderTractor = {
|
|
|
30
30
|
function getContainerXml(args) {
|
|
31
31
|
return `
|
|
32
32
|
<main>
|
|
33
|
-
<lido-container id="lido-container" is-allow-only-correct="${args.isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/
|
|
33
|
+
<lido-container id="lido-container" is-allow-only-correct="${args.isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Food%20Jar.png" objective="${[args.firstNum, args.operator, args.secondNum, args.equator, args.answer].join(',')}" width="100%" bg-color="transparent" visible="true" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000'; " onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false" custom-style="#drop1, #drop2, #drop3, #drop4, #drop5{border: none !important;boxShadow: none !important;} ">
|
|
34
34
|
<!-- Chimple Avatar -->
|
|
35
35
|
<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.448px,portrait.402px" width="landscape.350px,portrait.398px" x="landscape.1px, portrait.20px" y="landscape.5px, portrait.100px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
|
|
36
36
|
<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import { html } from "lit";
|
|
2
2
|
const meta = {
|
|
3
3
|
title: 'Templates/Grid',
|
|
4
|
+
argTypes: {
|
|
5
|
+
PracticeMode: { control: 'boolean' },
|
|
6
|
+
}
|
|
4
7
|
};
|
|
5
8
|
export default meta;
|
|
6
9
|
export const Options = {
|
|
7
10
|
args: {
|
|
11
|
+
PracticeMode: false,
|
|
8
12
|
option1: 'chop',
|
|
9
13
|
option2: 'chug',
|
|
10
14
|
option3: 'chad',
|
|
@@ -31,7 +35,7 @@ export const Options = {
|
|
|
31
35
|
};
|
|
32
36
|
function getContainerXml(args) {
|
|
33
37
|
return `<main>
|
|
34
|
-
<lido-container id="lido-container" value="mainContainer1" drop-action="move" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4},${args.correct5},${args.correct6},${args.correct7},${args.correct8},${args.correct9}" height="100%" width="100%" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/Underwater.png" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; this.overflow='hidden';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="
|
|
38
|
+
<lido-container id="lido-container" value="mainContainer1" drop-action="move" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4},${args.correct5},${args.correct6},${args.correct7},${args.correct8},${args.correct9}" height="100%" width="100%" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/Underwater.png" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; this.overflow='hidden';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="false" after-drop="false" is-allow-only-correct="${args.PracticeMode}">
|
|
35
39
|
|
|
36
40
|
<!-- Chimple Avatar -->
|
|
37
41
|
<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="landscape.1274px, portrait.541px" y="landscape.0, portrait.1274px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
|
|
@@ -39,7 +39,7 @@ export const DefaultGame = {
|
|
|
39
39
|
};
|
|
40
40
|
function getContainerXml(args) {
|
|
41
41
|
return `<main>
|
|
42
|
-
<lido-container id="lido-container" tab-index="1" objective="${args.draggable1Word},${args.draggable2Word},${args.draggable3Word},${args.draggable4Word},${args.draggable5Word},${args.draggable6Word},${args.draggable7Word},${args.draggable8Word},${args.draggable9Word}" is-allow-only-correct="true" value="mainContainer1" height="100%" width="100%" bg-image="
|
|
42
|
+
<lido-container id="lido-container" tab-index="1" objective="${args.draggable1Word},${args.draggable2Word},${args.draggable3Word},${args.draggable4Word},${args.draggable5Word},${args.draggable6Word},${args.draggable7Word},${args.draggable8Word},${args.draggable9Word}" is-allow-only-correct="true" value="mainContainer1" height="100%" width="100%" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Grid.png" bg-color="transparent" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true">
|
|
43
43
|
|
|
44
44
|
<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="landscape.1274px, portrait.541px" y="landscape.591px, portrait.1274px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
|
|
45
45
|
<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="462px" width="356px" src="${args.avatarSrc}" alt-text="{chimpleCharacterRive}"></lido-avatar>
|
|
@@ -2,6 +2,7 @@ import { html } from "lit";
|
|
|
2
2
|
const meta = {
|
|
3
3
|
title: 'Templates/JumpSentence',
|
|
4
4
|
argTypes: {
|
|
5
|
+
PracticeMode: { control: 'boolean' },
|
|
5
6
|
cells: {
|
|
6
7
|
control: { type: 'object' },
|
|
7
8
|
},
|
|
@@ -11,6 +12,7 @@ const meta = {
|
|
|
11
12
|
export default meta;
|
|
12
13
|
export const QuestionAndOptions = {
|
|
13
14
|
args: {
|
|
15
|
+
PracticeMode: false,
|
|
14
16
|
cells: [
|
|
15
17
|
{ value: 'Y', type: 'drop' },
|
|
16
18
|
{ value: 'o', type: 'drop' },
|
|
@@ -48,9 +50,9 @@ function getContainerXml(args) {
|
|
|
48
50
|
<lido-container id="lido-container" visible="true" objective="${objective}"
|
|
49
51
|
onCorrect="lido-avatar.avatarAnimate='Success'; sentenceText.speak='true'; this.sleep='2000';"
|
|
50
52
|
onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="sentenceText.speak='true';"
|
|
51
|
-
is-continue-on-correct="
|
|
53
|
+
is-continue-on-correct="false" bg-color="transparent"
|
|
52
54
|
bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.png"
|
|
53
|
-
drop-action="infinite-drop" is-allow-only-correct="
|
|
55
|
+
drop-action="infinite-drop" is-allow-only-correct="${args.PracticeMode}">
|
|
54
56
|
|
|
55
57
|
<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2"
|
|
56
58
|
height="landscape.500px, portrait.600px" width="landscape.350px, portrait.450px"
|
|
@@ -17,7 +17,7 @@ export const letterBoard = {
|
|
|
17
17
|
};
|
|
18
18
|
function getContainerXml(args) {
|
|
19
19
|
return `<main>
|
|
20
|
-
<lido-container id="lido-container" show-drop-border="false" is-allow-only-correct="true" drop-action="move" tab-index="1" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/
|
|
20
|
+
<lido-container id="lido-container" show-drop-border="false" is-allow-only-correct="true" drop-action="move" tab-index="1" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Letter%20board.png" objective="A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z" height="100%" width="100%" bg-color="transparent" visible="true" onCorrect="this.sleep='1000';lido-avatar.avatarAnimate='Success';xx.animation='placeToLeft 2s linear';tyre.animation='placeToLeft 2s linear';this.sleep='2000'; " onEntry="this.justifyContent='space-around'; this.animation='rightToPlace 2.5 linear';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false">
|
|
21
21
|
<!-- Chimple Avatar -->
|
|
22
22
|
<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.417px,portrait.363px" width="landscape.280px,portrait.340px" x="landscape.1360px, portrait.597px" y="landscape.637px, portrait.1370px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
|
|
23
23
|
|
|
@@ -24,7 +24,7 @@ export const OrderTractor = {
|
|
|
24
24
|
function getContainerXml(args) {
|
|
25
25
|
return `
|
|
26
26
|
<main>
|
|
27
|
-
<lido-container id="lido-container" is-allow-only-correct="${args.isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/
|
|
27
|
+
<lido-container id="lido-container" is-allow-only-correct="${args.isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Matching%20card.png" objective="${args.answer}" width="100%" bg-color="transparent" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; truck.animation='placeToLeft 2.5s linear'; imgs.animation='placeToLeft 2.5s linear'; dragEle.animation='placeToLeft 2.5s linear'; this.sleep='2000'; " onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false" custom-style="#dropEle{border: none !important} #drag1,#drag2,#drag3{box-shadow: none !important}">
|
|
28
28
|
<!-- Chimple Avatar -->
|
|
29
29
|
<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.448px,portrait.402px" width="landscape.350px,portrait.398px" x="landscape.1px, portrait.20px" y="landscape.5px, portrait.318px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
|
|
30
30
|
<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
|
|
@@ -2,6 +2,7 @@ import { html } from "lit-html";
|
|
|
2
2
|
const meta = {
|
|
3
3
|
title: 'Templates/MCQWithQuestionImage',
|
|
4
4
|
argTypes: {
|
|
5
|
+
PracticeMode: { control: 'boolean' },
|
|
5
6
|
question: { control: 'text' },
|
|
6
7
|
questionImg: { control: 'file' },
|
|
7
8
|
questionAudio: { control: {
|
|
@@ -38,6 +39,7 @@ const meta = {
|
|
|
38
39
|
export default meta;
|
|
39
40
|
export const Default = {
|
|
40
41
|
args: {
|
|
42
|
+
PracticeMode: false,
|
|
41
43
|
question: 'I have less than double of 3 marbles. I have more than half of 8 marbles. How many marbles do I have?',
|
|
42
44
|
questionImg: "https://aeakbcdznktpsbrfsgys.storage.supabase.co/v1/object/public/template-assets/fill-in-the-blanks/image%201.png",
|
|
43
45
|
questionAudio: '',
|
|
@@ -70,11 +72,11 @@ function getContainerXml(args) {
|
|
|
70
72
|
<lido-container id="lido-container" value="maincontainer" objective="${args.correctAns}"
|
|
71
73
|
aria-label="This is a multiple-option question. Select one option from the list."
|
|
72
74
|
height="100vh" width="100vw" x="0" y="0" z="0" bg-color="transparent"
|
|
73
|
-
bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/
|
|
75
|
+
bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/MCQ.png"
|
|
74
76
|
visible="true" audio="background1.mp3" onTouch=""
|
|
75
77
|
onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';"
|
|
76
78
|
onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';"
|
|
77
|
-
show-check="false" is-continue-on-correct="
|
|
79
|
+
show-check="false" is-continue-on-correct="${args.PracticeMode}" onEntry="">
|
|
78
80
|
|
|
79
81
|
<!-- Chimple Avatar -->
|
|
80
82
|
<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1"
|
|
@@ -43,7 +43,7 @@ export const Default = {
|
|
|
43
43
|
};
|
|
44
44
|
function getContainerXml(args) {
|
|
45
45
|
return `<main>
|
|
46
|
-
<lido-container id="lido-container" value="maincontainer" objective="${args.correctAns}" aria-label="This is a multiple-option question. Select one option from the list." height="100vh" width="100vw" x="0" y="0" z="0" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/
|
|
46
|
+
<lido-container id="lido-container" value="maincontainer" objective="${args.correctAns}" aria-label="This is a multiple-option question. Select one option from the list." height="100vh" width="100vw" x="0" y="0" z="0" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/MCQ.png" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true">
|
|
47
47
|
|
|
48
48
|
<!-- Chimple Avatar -->
|
|
49
49
|
<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="350px" width="350px" x="landscape.-50px, portrait.273px" y="landscape.507px, portrait.1200px" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="" onEntry="this.animation='leftToPlace 1.5s linear';">
|
|
@@ -34,7 +34,7 @@ function getContainerXml(args) {
|
|
|
34
34
|
str_val = str_val.slice(0, -1) + '=';
|
|
35
35
|
return `
|
|
36
36
|
<main>
|
|
37
|
-
<lido-container id="multiply-beads" disableSpeak="true" show-drop-border="false" equationCheck="$#mat1,==,$#answer-multiply-beeds" objective="" tab-index="1" value="multiply-beads" bgImage="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/
|
|
37
|
+
<lido-container id="multiply-beads" disableSpeak="true" show-drop-border="false" equationCheck="$#mat1,==,$#answer-multiply-beeds" objective="" tab-index="1" value="multiply-beads" bgImage="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Multiply%20beads.png" height="100%" width="100%" bgColor="transparent" visible="true" onCorrect="answer-multiply-beeds.addText='${answer}'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}">
|
|
38
38
|
|
|
39
39
|
<!-- Chimple Avatar -->
|
|
40
40
|
<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.570px, portrait.700px" width="landscape.380px, portrait.485px" x="landscape.1045px, portrait.220px" y="landscape.525px, portrait.1075px" ariaHidden="true" bgColor="transparent" visible="true" onEntry="this.flex-shrink='0'; this.z-index='0';">
|
|
@@ -51,7 +51,7 @@ function getContainerXml(args) {
|
|
|
51
51
|
})
|
|
52
52
|
.join('');
|
|
53
53
|
return `<main>
|
|
54
|
-
<lido-container id="lido-container" is-allow-only-correct="${isAllowOnlyCorrect}" tab-index="1" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/
|
|
54
|
+
<lido-container id="lido-container" is-allow-only-correct="${isAllowOnlyCorrect}" tab-index="1" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Nimble%20table.png" objective="${answers.join(',')}" height="100%" width="100%" bg-color="transparent" visible="true" onCorrect="this.scrollCellAfterEquationSolved='true'; this.sleep='1000';lido-avatar.avatarAnimate='Success';this.sleep='2000'; " onEntry="this.justifyContent='space-around'; audio.speak='true';" onInCorrect="this.scrollCellAfterEquationSolved='true'; lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false"
|
|
55
55
|
is-continue-on-correct="${isContinueOnCorrect}">
|
|
56
56
|
|
|
57
57
|
<!-- Audio -->
|
|
@@ -92,7 +92,7 @@ function getContainerXml(args) {
|
|
|
92
92
|
})
|
|
93
93
|
.join('');
|
|
94
94
|
return `<main>
|
|
95
|
-
<lido-container id="lido-container" show-drop-border="false" is-allow-only-correct="${isAllowOnlyCorrect}" drop-action="move" tab-index="1" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/
|
|
95
|
+
<lido-container id="lido-container" show-drop-border="false" is-allow-only-correct="${isAllowOnlyCorrect}" drop-action="move" tab-index="1" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Number%20board.png" objective="${answers.join(',')}" height="100%" width="100%" bg-color="transparent" visible="true" onCorrect="this.sleep='1000';lido-avatar.avatarAnimate='Success';xx.animation='placeToLeft 2s linear';tyre.animation='placeToLeft 2s linear';trainAudio.speak='true';" onEntry="this.justifyContent='space-around'; this.animation='rightToPlace 2.5 linear'; audio.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="${isContinueOnCorrect}" after-drop="false">
|
|
96
96
|
|
|
97
97
|
<lido-text id="trainAudio" visible="false" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/train1.m4a" onEntry="this.speak='true';"></lido-text>
|
|
98
98
|
|
|
@@ -70,7 +70,7 @@ function getContainerXml(args) {
|
|
|
70
70
|
})
|
|
71
71
|
.join('');
|
|
72
72
|
return `<main>
|
|
73
|
-
<lido-container id="lido-container" show-drop-border="false" appendToDropOnCompletion="false" is-allow-only-correct="${isAllowOnlyCorrect}" drop-action="move" tab-index="1" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/
|
|
73
|
+
<lido-container id="lido-container" show-drop-border="false" appendToDropOnCompletion="false" is-allow-only-correct="${isAllowOnlyCorrect}" drop-action="move" tab-index="1" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Number%20board.png" objective="${answers.join(',')}" height="100%" width="100%" bg-color="transparent" visible="true" onCorrect="this.sleep='1000';lido-avatar.avatarAnimate='Success';xx.animation='placeToLeft 2s linear';tyre.animation='placeToLeft 2s linear';trainAudio.speak='true';" onEntry="this.justifyContent='space-around'; this.animation='rightToPlace 2.5 linear';this.overflow='hidden';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false">
|
|
74
74
|
<!-- Chimple Avatar -->
|
|
75
75
|
<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.417px,portrait.363px" width="landscape.280px,portrait.340px" x="landscape.1360px, portrait.597px" y="landscape.637px, portrait.1370px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
|
|
76
76
|
|
|
@@ -85,7 +85,7 @@ export const NumberPair = {
|
|
|
85
85
|
};
|
|
86
86
|
function getContainerXml(args) {
|
|
87
87
|
return `<main>
|
|
88
|
-
<lido-container id="lido-container" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" is-allow-only-correct="${args.isAllowOnlyCorrect}" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4},${args.correct5}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/
|
|
88
|
+
<lido-container id="lido-container" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" is-allow-only-correct="${args.isAllowOnlyCorrect}" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4},${args.correct5}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Number%20pair.png" dropAttr="EnableAnimation" custom-style="#heading,#drag1,#drag2,#drag3,#drag4,#drag5,#drag6,#drag7,#drop1,#drop2,#drop3,#drop4,#drop5,#drop6,#drop7{box-shadow: none !important;}" is-continue-on-correct="${args.isContinueOnCorrect}">
|
|
89
89
|
<!-- Chimple Avatar -->
|
|
90
90
|
<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="landscape.205px,portrait.195px" width="landscape.209px,portrait.209px" x="landscape.2%,portrait.80%" y="landscape.85px,portrait.146px" ariaHidden="true" bgColor="transparent" visible="true" onEntry="">
|
|
91
91
|
<lido-avatar id="lido-avatar" disableEdit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}">
|
|
@@ -75,7 +75,7 @@ function getOpenWindowXml(args) {
|
|
|
75
75
|
const speakSequence = `heading0.speak='true'; this.sleep='800'; ${speakLettersSequence}`;
|
|
76
76
|
return `
|
|
77
77
|
<main>
|
|
78
|
-
<lido-container id="lido-container" tab-index="1" bg-image="
|
|
78
|
+
<lido-container id="lido-container" tab-index="1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Open%20window.png" height="100%" width="100%" visible="true" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}" onCorrect="${speakSequence} lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="${speakSequence}" objective="${args.objective}" >
|
|
79
79
|
<lido-cell layout="row" visible="true" width="landscape.auto, portrait.80%" height="landscape.30%, portrait.10%" bg-color="transparent" margin="5%" onEntry="this.gap='45px';">
|
|
80
80
|
<lido-cell layout="row" visible="false">
|
|
81
81
|
<lido-text id="heading0" string="${args.objective}">
|
|
@@ -94,7 +94,7 @@ function getOpenWindowXml(args) {
|
|
|
94
94
|
</lido-cell>
|
|
95
95
|
</lido-container>
|
|
96
96
|
|
|
97
|
-
<lido-container id="lido-container" tab-index="1" bg-image="
|
|
97
|
+
<lido-container id="lido-container" tab-index="1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Open%20window.png" height="100%" width="100%" visible="true" is-continue-on-correct="true" onCorrect="${speakSequence} lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="${speakSequence}" objective="${args.objective}" >
|
|
98
98
|
<lido-cell layout="row" visible="true" width="landscape.auto, portrait.80%" height="landscape.30%, portrait.10%" bg-color="transparent" margin="5%" onEntry="this.gap='45px';">
|
|
99
99
|
<lido-cell layout="row" visible="false">
|
|
100
100
|
<lido-text id="heading0" string="${args.objective}">
|
|
@@ -61,7 +61,7 @@ function getOpenWindowXml(args) {
|
|
|
61
61
|
const speakSequence = `heading.speak='true'; this.sleep='800';`;
|
|
62
62
|
return `
|
|
63
63
|
<main>
|
|
64
|
-
<lido-container id="lido-container" tab-index="1" bg-image="
|
|
64
|
+
<lido-container id="lido-container" tab-index="1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Open%20window.png" height="100%" width="100%" visible="true" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}" onCorrect="${speakSequence} lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="${speakSequence}" objective="${args.objective}" >
|
|
65
65
|
<lido-cell layout="row" visible="true" width="landscape.auto, portrait.80%" height="landscape.30%, portrait.10%" bg-color="transparent" margin="5%" onEntry="">
|
|
66
66
|
<lido-text id="heading" tab-index="2" visible="true" border-image="" bg-color="transparent" width="350px" height="210px" string="${args.heading}" font-color="black" font-family="'Baloo 2', serif" font-size="146px" z="0"
|
|
67
67
|
onEntry="this.borderRadius='6px'; this.boxShadow='unset'; this.fontWeight='800';" audio="">
|
|
@@ -78,7 +78,7 @@ function getOpenWindowXml(args) {
|
|
|
78
78
|
</lido-cell>
|
|
79
79
|
</lido-container>
|
|
80
80
|
|
|
81
|
-
<lido-container id="lido-container" tab-index="1" bg-image="
|
|
81
|
+
<lido-container id="lido-container" tab-index="1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Open%20window.png" height="100%" width="100%" visible="true" is-continue-on-correct="true" onCorrect="${speakSequence} lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="${speakSequence}" objective="${args.objective}" >
|
|
82
82
|
<lido-cell layout="row" visible="true" width="landscape.auto, portrait.80%" height="landscape.30%, portrait.10%" bg-color="transparent" margin="5%" onEntry="">
|
|
83
83
|
<lido-text id="heading" tab-index="2" visible="true" border-image="" bg-color="transparent" width="350px" height="210px" string="${args.heading}" font-color="black" font-family="'Baloo 2', serif" font-size="146px" z="0"
|
|
84
84
|
onEntry="this.borderRadius='6px'; this.boxShadow='unset'; this.fontWeight='800';" audio="">
|
package/dist/collection/stories/Templates/order-tractor/order-tractor-ascending-order.stories.js
CHANGED
|
@@ -29,7 +29,7 @@ export const OrderTractorAscending = {
|
|
|
29
29
|
function getContainerXml(args) {
|
|
30
30
|
return `
|
|
31
31
|
<main>
|
|
32
|
-
<lido-container id="lido-container" is-allow-only-correct="${args.isAllowOnlyCorrect}" show-Check="false" is-Continue-On-Correct="true" after-Drop="false" objective="${[args.answer1, args.answer2, args.answer3, args.answer4, args.answer5].join(',')}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/
|
|
32
|
+
<lido-container id="lido-container" is-allow-only-correct="${args.isAllowOnlyCorrect}" show-Check="false" is-Continue-On-Correct="true" after-Drop="false" objective="${[args.answer1, args.answer2, args.answer3, args.answer4, args.answer5].join(',')}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Order%20tractor.png" custom-style="#drop1, #drop2,#drop3,#drop4,#drop5{border: none !important;}" onCorrect="drg1.disableType='true';drg2.disableType='true';drg3.disableType='true';drg4.disableType='true';drg5.disableType='true';lido-avatar.avatarAnimate='Success'; this.sleep='2000'; lido-avatar.animation='placeToLeft 2.5s linear'; answer.animation='placeToLeft 2.5s linear'; truck.animation='placeToLeft 2.5s linear'; trainAudio.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="">
|
|
33
33
|
|
|
34
34
|
<!-- Chimple Avatar -->
|
|
35
35
|
<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="300px" width="300px" x="landscape.110px,portrait.10px" y="landscape.80px,portrait.230px" ariaHidden="true" bgColor="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
|
|
@@ -29,7 +29,7 @@ export const OrderTractor = {
|
|
|
29
29
|
function getContainerXml(args) {
|
|
30
30
|
return `
|
|
31
31
|
<main>
|
|
32
|
-
<lido-container id="lido-container" is-allow-only-correct="${args.isAllowOnlyCorrect}" show-Check="false" is-Continue-On-Correct="true" after-Drop="false" objective="${[args.answer1, args.answer2, args.answer3, args.answer4, args.answer5].join(',')}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/
|
|
32
|
+
<lido-container id="lido-container" is-allow-only-correct="${args.isAllowOnlyCorrect}" show-Check="false" is-Continue-On-Correct="true" after-Drop="false" objective="${[args.answer1, args.answer2, args.answer3, args.answer4, args.answer5].join(',')}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Order%20tractor.png" custom-style="#drop1, #drop2,#drop3,#drop4,#drop5{border: none !important;}" onCorrect="drg1.disableType='true';drg2.disableType='true';drg3.disableType='true';drg4.disableType='true';drg5.disableType='true';lido-avatar.avatarAnimate='Success'; this.sleep='2000'; lido-avatar.animation='placeToLeft 2.5s linear'; answer.animation='placeToLeft 2.5s linear'; truck.animation='placeToLeft 2.5s linear'; trainAudio.speak='true'; this.sleep='1000';" onInCorrect="lido-avatar.avatarAnimate='Fail';" >
|
|
33
33
|
<!-- Chimple Avatar -->
|
|
34
34
|
<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="300px" width="300px" x="landscape.110px,portrait.10px" y="landscape.80px,portrait.230px" ariaHidden="true" bgColor="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
|
|
35
35
|
<lido-avatar id="lido-avatar" disableEdit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}">
|
|
@@ -47,7 +47,7 @@ function getContainerXml(args) {
|
|
|
47
47
|
.join('');
|
|
48
48
|
return `
|
|
49
49
|
<main>
|
|
50
|
-
<lido-container id="lido-container" appendToDropOnCompletion="true" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/
|
|
50
|
+
<lido-container id="lido-container" appendToDropOnCompletion="true" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Phonic%20tractor.png" bg-color="transparent" objective="${answers.join(',')}" height="100%" width="100%" visible="true" show-check="false" is-continue-on-correct="true" after-drop="false" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='1000'; b1.animation='placeToLeft 2s linear'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" is-allow-only-correct="${isAllowOnlyCorrect}">
|
|
51
51
|
|
|
52
52
|
<!-- Chimple Avatar -->
|
|
53
53
|
<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="landscape.1274px, portrait.576px" y="landscape.591px, portrait.236px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import { html } from "lit-html";
|
|
2
2
|
const meta = {
|
|
3
3
|
title: 'Templates/PictureMeaningCocos',
|
|
4
|
+
argTypes: {
|
|
5
|
+
PracticeMode: { control: 'boolean' },
|
|
6
|
+
}
|
|
4
7
|
};
|
|
5
8
|
export default meta;
|
|
6
9
|
export const Default = {
|
|
7
10
|
args: {
|
|
11
|
+
PracticeMode: false,
|
|
8
12
|
drag1: "Uma alimentação saudável é essencial.",
|
|
9
13
|
drag2: "Devemos evitar contato com vírus.",
|
|
10
14
|
drag3: "O carro da dona violeta é amarelo.",
|
|
@@ -19,7 +23,7 @@ export const Default = {
|
|
|
19
23
|
};
|
|
20
24
|
function getContainerXml(args) {
|
|
21
25
|
return `<main>
|
|
22
|
-
<lido-container id="lido-container" is-allow-only-correct="
|
|
26
|
+
<lido-container id="lido-container" is-allow-only-correct="${args.PracticeMode}" objective="${args.drop1},${args.drop2},${args.drop3}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" dropAttr="EnableAnimation" onCorrect="this.sleep='2000';" onInCorrect="this.sleep='2000';">
|
|
23
27
|
<!-- Chimple Avatar -->
|
|
24
28
|
<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="300px" width="300px" x="landscape.870px,portrait.300px" y="landscape.560px,portrait.1400px" ariaHidden="true" bgColor="transparent" visible="true" onEntry="">
|
|
25
29
|
<lido-avatar id="lido-avatar" disableEdit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}">
|
|
@@ -111,7 +111,7 @@ function getContainerXml(args) {
|
|
|
111
111
|
console.log('Expression Text: ', escapedExpressionText);
|
|
112
112
|
return `
|
|
113
113
|
<main>
|
|
114
|
-
<lido-container id="question-board-container" disable-speak="true" objective="${objective}" tab-index="1" value="questionBoard" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/
|
|
114
|
+
<lido-container id="question-board-container" disable-speak="true" objective="${objective}" tab-index="1" value="questionBoard" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Question%20board.png" height="100%" width="100%" bg-color="transparent" visible="true" onCorrect="question-board-image.transition='transform 1s ease'; question-board-image.transform='rotateY(180deg)'; question-board-text.transition='opacity 0.5s ease'; question-board-text.opacity='0'; option-row.opacity='0'; invisible-text.transition='opacity 0.5s ease'; invisible-text.opacity='1'; invisible-text.visibility='visible'; ${expressionAnimation} this.sleep='4000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}" >
|
|
115
115
|
|
|
116
116
|
<!-- Chimple Avatar -->
|
|
117
117
|
<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos1" height="landscape.570px, portrait.700px" width="landscape.380px, portrait.485px" x="landscape.110px, portrait.195px" y="landscape.160px, portrait.1050px" ariaHidden="true" bg-color="transparent" visible="true" onEntry="this.flex-shrink='0'; this.z-index='2';">
|
|
@@ -29,7 +29,7 @@ export const quizLiteracy = {
|
|
|
29
29
|
function getContainerXml(args) {
|
|
30
30
|
let tabCounter = 1;
|
|
31
31
|
return `<main>
|
|
32
|
-
<lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answers}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/
|
|
32
|
+
<lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answers}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Quiz%20literacy.png" onEntry="" is-Continue-On-Correct="true" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';">
|
|
33
33
|
<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.290px,portrait.364px" width="landscape.278px,portrait.386px" x="landscape.72%, portrait.31%" y="landscape.10%, portrait.80%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
|
|
34
34
|
<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" bg-color="transparent">
|
|
35
35
|
</lido-avatar>
|
|
@@ -23,7 +23,7 @@ export const quizLiteracyImageWithText = {
|
|
|
23
23
|
function getContainerXml(args) {
|
|
24
24
|
let tabCounter = 1;
|
|
25
25
|
return `<main>
|
|
26
|
-
<lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answer}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/
|
|
26
|
+
<lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answer}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Quiz%20literacy.png" onEntry="" is-Continue-On-Correct="true" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';">
|
|
27
27
|
<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.306px,portrait.401px" width="landscape.307px,portrait.401px" x="landscape.82%, portrait.24%" y="landscape.77%, portrait.83%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
|
|
28
28
|
<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" bg-color="transparent">
|
|
29
29
|
</lido-avatar>
|
|
@@ -23,7 +23,7 @@ export const quizLiteracyImageWord = {
|
|
|
23
23
|
function getContainerXml(args) {
|
|
24
24
|
let tabCounter = 1;
|
|
25
25
|
return `<main>
|
|
26
|
-
<lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answers}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/
|
|
26
|
+
<lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answers}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Quiz%20literacy.png" onEntry="" is-Continue-On-Correct="true" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';">
|
|
27
27
|
<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.290px,portrait.434px" width="landscape.278px,portrait.437px" x="landscape.78%, portrait.24%" y="landscape.228px, portrait.75%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
|
|
28
28
|
<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" bg-color="transparent">
|
|
29
29
|
</lido-avatar>
|
|
@@ -2,6 +2,7 @@ import { html } from "lit";
|
|
|
2
2
|
const meta = {
|
|
3
3
|
title: 'Templates/Reorder',
|
|
4
4
|
argTypes: {
|
|
5
|
+
PracticeMode: { control: 'boolean' },
|
|
5
6
|
question: { control: 'text' },
|
|
6
7
|
questionImg: { control: 'file' },
|
|
7
8
|
questionAudio: { control: {
|
|
@@ -38,6 +39,7 @@ const meta = {
|
|
|
38
39
|
export default meta;
|
|
39
40
|
export const QuestionAndOptions = {
|
|
40
41
|
args: {
|
|
42
|
+
PracticeMode: false,
|
|
41
43
|
question: 'Reorder the following shapes from the fewest flat faces to the most flat faces.',
|
|
42
44
|
questionImg: '',
|
|
43
45
|
questionAudio: '',
|
|
@@ -62,7 +64,7 @@ export const QuestionAndOptions = {
|
|
|
62
64
|
};
|
|
63
65
|
function getContainerXml(args) {
|
|
64
66
|
return `<main>
|
|
65
|
-
<lido-container visible="true" objective="${args.correctObjective.toLowerCase()}" is-continue-on-correct="
|
|
67
|
+
<lido-container visible="true" objective="${args.correctObjective.toLowerCase()}" is-continue-on-correct="${args.PracticeMode}" show-next-button="${!args.PracticeMode}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/bg-image.png" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="this.sleep='1000'; this.slideAnimation='true';">
|
|
66
68
|
|
|
67
69
|
<!-- Chimple Avatar -->
|
|
68
70
|
<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="250px" width="250px" x="landscape.0, portrait.670px" y="landscape.105px, portrait.1315px" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
|
|
@@ -36,7 +36,7 @@ function getContainerXml(args) {
|
|
|
36
36
|
const pickedColors = args.dragColors;
|
|
37
37
|
const color = pickedColors[Math.floor(Math.random() * pickedColors.length)];
|
|
38
38
|
return `
|
|
39
|
-
<lido-text visible="true" id="drag${tabCounter}" tab-index="${tabCounter++}" width="140px" height="86px" value="${option}" string="${option}" font-color="white" font-size="76px" font-family="Baloo Bhai 2" bg-color="${color}" border-radius="8px" onEntry="this.border='5px solid ${color}'; this.font-weight='500'; this.sleep='100';this.animation='rightToPlace 3s linear';" type="drag" margin="${index % 2 == 0 ? 'landscape.196px 0px 0px -52px' : 'landscape.-56px 28px 0px -60px'}, portrait.0px 0px 0px 0px"
|
|
39
|
+
<lido-text visible="true" id="drag${tabCounter}" tab-index="${tabCounter++}" width="140px" height="86px" value="${option}" string="${option}" font-color="white" font-size="76px" font-family="Baloo Bhai 2" bg-color="${color}" border-radius="8px" onEntry="this.border='5px solid ${color}'; this.font-weight='500'; this.sleep='100';this.animation='rightToPlace 3s linear';" type="drag" margin="${index % 2 == 0 ? 'landscape.196px 0px 0px -52px' : 'landscape.-56px 28px 0px -60px'}, portrait.0px 0px 0px 0px" isAllowOnlyCorrect="true" onTouch="this.speak='true';" onCorrect="this.speak='true';" ></lido-text>
|
|
40
40
|
`;
|
|
41
41
|
})
|
|
42
42
|
.join('');
|
|
@@ -44,7 +44,7 @@ function getContainerXml(args) {
|
|
|
44
44
|
<main>
|
|
45
45
|
|
|
46
46
|
<lido-container id="lido-container" visible="true" objective="${answers.join(',')}" onEntry="audio12.speak='true';"
|
|
47
|
-
onCorrect="lido-avatar.avatarAnimate='Success'; sentenceText.speak='true'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" is-continue-on-correct="${isContinueOnCorrect}" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/
|
|
47
|
+
onCorrect="lido-avatar.avatarAnimate='Success'; sentenceText.speak='true'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" is-continue-on-correct="${isContinueOnCorrect}" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Row%20blocks.png" custom-style= ".dropping {
|
|
48
48
|
border: 5px dashed #2C3836 !important;
|
|
49
49
|
background-color: #6D8C87 !important;
|
|
50
50
|
}" is-allow-only-correct="${isAllowOnlyCorrect}">
|
|
@@ -37,19 +37,19 @@ function getContainerXml(args) {
|
|
|
37
37
|
const objectiveArray = missingNumber.split('');
|
|
38
38
|
const dropCells = objectiveArray
|
|
39
39
|
.map((cell, i) => `
|
|
40
|
-
<lido-text id="
|
|
40
|
+
<lido-text id="drop-${cell}" tab-index="${i}" disable-edit="true" height="landscape.165px, portrait.125px" width="125px" visible="true" value="${cell}" string="?" font-family="'Baloo Bhai 2'" font-color="#FFC805" type="drop" font-size="landscape.130px, portrait.100px" bg-color="transparent" onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px';" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png">
|
|
41
41
|
</lido-text>
|
|
42
42
|
`)
|
|
43
43
|
.join('\n');
|
|
44
44
|
const dragCells = options
|
|
45
45
|
.map((digit, i) => `
|
|
46
|
-
<lido-text id="
|
|
46
|
+
<lido-text id="drag-${i}" tab-index="${50 + i}" height="landscape.170px, portrait.125px" width="landscape.125px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="drag" font-size="104px" bg-color="#FFF4CD" onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.flex-shrink='0';" border-image="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';">
|
|
47
47
|
</lido-text>
|
|
48
48
|
`)
|
|
49
49
|
.join('\n');
|
|
50
50
|
return `
|
|
51
51
|
<main>
|
|
52
|
-
<lido-container id="lido-container" objective="${objectiveString}" tab-index="1" show-drop-border="false" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/
|
|
52
|
+
<lido-container id="lido-container" objective="${objectiveString}" tab-index="1" show-drop-border="false" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Sequence%20box.png" height="100%" width="100%" bg-color="transparent" visible="true" onCorrect="this.questionBoxAnimate='true'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false">
|
|
53
53
|
|
|
54
54
|
<!-- Chimple Avatar -->
|
|
55
55
|
<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.600px, portrait.230px" y="landscape.45px, portrait.1010px" ariaHidden="true" z="1" bgColor="transparent" visible="true" onEntry="this.flex-shrink='0';">
|
|
@@ -66,7 +66,7 @@ function getContainerXml(args) {
|
|
|
66
66
|
<lido-image is-slice="true" bg-color="transparent" id="drop-image0" disable-edit="true" tab-index="20" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px">
|
|
67
67
|
</lido-image>
|
|
68
68
|
<lido-image is-slice="true" bg-color="transparent" id="drop-image0" disable-edit="true" tab-index="21" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
|
|
69
|
-
<lido-text id="
|
|
69
|
+
<lido-text id="drop-${number1}" tab-index="${number1}" disable-edit="true" height="landscape.130px portrait.100px" width="200px" visible="true" value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px" bg-color="transparent" onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
|
|
70
70
|
</lido-text>
|
|
71
71
|
</lido-image>
|
|
72
72
|
</lido-cell>
|
|
@@ -74,7 +74,7 @@ function getContainerXml(args) {
|
|
|
74
74
|
<lido-image is-slice="true" bg-color="transparent" id="drop-image1" disable-edit="true" tab-index="23" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
|
|
75
75
|
</lido-image>
|
|
76
76
|
<lido-image is-slice="true" bg-color="transparent" id="drop-image1" disable-edit="true" tab-index="24" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
|
|
77
|
-
<lido-text id="
|
|
77
|
+
<lido-text id="drop-${number2}" tab-index="${number2}" disable-edit="true" height="landscape.130px portrait.100px" width="125px" visible="true" value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px" bg-color="transparent" onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
|
|
78
78
|
</lido-text>
|
|
79
79
|
</lido-image>
|
|
80
80
|
</lido-cell>
|
|
@@ -89,7 +89,7 @@ function getContainerXml(args) {
|
|
|
89
89
|
<lido-image is-slice="true" bg-color="transparent" id="drop-image3" disable-edit="true" tab-index="30" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
|
|
90
90
|
</lido-image>
|
|
91
91
|
<lido-image is-slice="true" bg-color="transparent" id="drop-image3" disable-edit="true" tab-index="31" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
|
|
92
|
-
<lido-text id="
|
|
92
|
+
<lido-text id="drop-${number4}" tab-index="${number4}" disable-edit="true" height="landscape.130px portrait.100px" width="125px" visible="true" value="${number4}" string="${number4}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px" bg-color="transparent" onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
|
|
93
93
|
</lido-text>
|
|
94
94
|
</lido-image>
|
|
95
95
|
</lido-cell>
|