lido-player 0.0.2-alpha-55-dev → 0.0.2-alpha-56-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 +138 -22
- package/dist/cjs/lido-player.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{utils-4b44610b.js → utils-a61cfc6b.js} +18 -10
- package/dist/collection/components/home/lido-home.js +35 -6
- package/dist/collection/components/mathMatrix/lido-math-matrix.js +8 -6
- package/dist/collection/components/shape/lido-shape.css +90 -0
- package/dist/collection/components/shape/lido-shape.js +41 -6
- package/dist/collection/components/slideFill/lido-slide-fill.js +1 -1
- package/dist/collection/components/text/lido-text.js +26 -1
- package/dist/collection/components/trace/lido-trace.js +57 -4
- package/dist/collection/components/wrap/lido-wrap.js +1 -1
- package/dist/collection/stories/Templates/balancing/balancing.stories.js +1 -1
- package/dist/collection/stories/Templates/balloonPop/balloonPop.stories.js +2 -2
- package/dist/collection/stories/Templates/blender/blender.stories.js +3 -3
- package/dist/collection/stories/Templates/checker-block/checkerBlock.stories.js +6 -4
- package/dist/collection/stories/Templates/fillAnswer/fill-answer.stories.js +38 -32
- package/dist/collection/stories/Templates/multiplyBeeds/multiplyBeeds.stories.js +2 -2
- package/dist/collection/stories/Templates/numberBoardTwo/numberBoardTwo.stories.js +68 -60
- package/dist/collection/stories/Templates/questionBoard/questionBoard.stories.js +6 -5
- package/dist/collection/stories/Templates/quizMaths/quizMaths.stories.js +991 -0
- package/dist/collection/stories/Templates/sumTogether/sumTogether.stories.js +8 -8
- package/dist/collection/stories/Templates/tenBox/tenBox.stories.js +144 -0
- package/dist/collection/stories/Templates/writeNumber/writeNumber.stories.js +8 -4
- package/dist/collection/utils/constants.js +2 -0
- package/dist/collection/utils/utils.js +5 -1
- package/dist/collection/utils/utilsHandlers/clickHandler.js +1 -1
- package/dist/collection/utils/utilsHandlers/dragDropHandler.js +4 -1
- package/dist/collection/utils/utilsHandlers/lidoBalanceHandler.js +4 -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 +22 -22
- 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-36c2e21a.js → p-0712a27e.js} +17 -11
- package/dist/components/{p-2c518dbe.js → p-0a41b2f8.js} +1 -1
- package/dist/components/{p-ca8aea4b.js → p-17f84b2f.js} +1 -1
- package/dist/components/{p-590ce2c9.js → p-21852d55.js} +1 -1
- package/dist/components/{p-de2193c5.js → p-2829c82c.js} +1 -1
- package/dist/components/{p-bc5202db.js → p-330caab8.js} +2 -2
- package/dist/components/{p-9acf0fcc.js → p-480f708a.js} +1 -1
- package/dist/components/{p-3fc01453.js → p-4d332eab.js} +1 -1
- package/dist/components/{p-2e023f67.js → p-4e041807.js} +2 -2
- package/dist/components/{p-0be6b5d5.js → p-7ab0a273.js} +26 -2
- package/dist/components/{p-67a24ad4.js → p-882b291d.js} +2 -2
- package/dist/components/{p-43d79c61.js → p-9104d427.js} +1 -1
- package/dist/components/{p-b847f269.js → p-b9875116.js} +57 -4
- package/dist/components/{p-73b2bd74.js → p-c4739621.js} +3 -3
- package/dist/components/p-cca36777.js +128 -0
- package/dist/components/{p-5078599e.js → p-d1b5079b.js} +1 -1
- package/dist/components/{p-b0dbee97.js → p-e1ba0c44.js} +38 -26
- package/dist/components/{p-72d6a594.js → p-eab0ebb7.js} +1 -1
- package/dist/components/{p-b095de27.js → p-f2b53e8e.js} +2 -2
- package/dist/components/{p-c296051d.js → p-f3bc4577.js} +1 -1
- package/dist/components/{p-c69ef266.js → p-ff801ba1.js} +1 -1
- package/dist/components/{p-e534ea52.js → p-ffc40642.js} +7 -5
- package/dist/esm/index.js +1 -1
- package/dist/esm/lido-avatar_22.entry.js +138 -22
- package/dist/esm/lido-player.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{utils-ae1eb036.js → utils-7ed76799.js} +17 -11
- package/dist/lido-player/index.esm.js +1 -1
- package/dist/lido-player/lido-player.esm.js +1 -1
- package/dist/lido-player/{p-a632e2ce.js → p-17d93181.js} +2 -2
- package/dist/lido-player/p-fa9dfdf8.entry.js +1 -0
- package/dist/types/components/home/lido-home.d.ts +3 -0
- package/dist/types/components/shape/lido-shape.d.ts +8 -2
- package/dist/types/components/text/lido-text.d.ts +1 -0
- package/dist/types/components/trace/lido-trace.d.ts +2 -1
- package/dist/types/components.d.ts +2 -0
- package/dist/types/stories/Templates/fillAnswer/fill-answer.stories.d.ts +1 -1
- package/dist/types/stories/Templates/quizMaths/quizMaths.stories.d.ts +16 -0
- package/dist/types/stories/Templates/tenBox/tenBox.stories.d.ts +4 -0
- package/dist/types/utils/constants.d.ts +2 -0
- package/package.json +1 -1
- package/dist/components/p-f8c00485.js +0 -100
- package/dist/lido-player/p-f1b879f6.entry.js +0 -1
|
@@ -45,7 +45,7 @@ function getContainerXml(args) {
|
|
|
45
45
|
<lido-container id="lido-container" tab-index="1" visible="true" objective="${args.objective}"
|
|
46
46
|
onCorrect="lido-slide-fill.fill-slide='${args.Increment}'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';"
|
|
47
47
|
onInCorrect="lido-slide-fill.fill-slide='${args.Decrement}'; lido-avatar.avatarAnimate='Fail'; this.sleep='2000';"
|
|
48
|
-
is-continue-on-correct="true" show-check="true" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png">
|
|
48
|
+
is-continue-on-correct="true" show-check="true" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" disable-speak="true">
|
|
49
49
|
<lido-text tab-index="1" visible="false" string="Pop the ${args.objective} balloon"></lido-text>
|
|
50
50
|
<!-- Chimple Avatar -->
|
|
51
51
|
<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="-50px" y="landscape.560px, portrait.1220px" aria-hidden="true" z="1" bg-color="transparent" visible="true">
|
|
@@ -54,7 +54,7 @@ function getContainerXml(args) {
|
|
|
54
54
|
</lido-cell>
|
|
55
55
|
|
|
56
56
|
<!-- Content -->
|
|
57
|
-
<lido-cell visible="true" layout="row" width="landscape.100%, portrait.95%" height="100%" z="1" onEntry="this.alignItems='flex-start';">
|
|
57
|
+
<lido-cell visible="true" layout="row" width="landscape.100%, portrait.95%" height="100%" z="1" onEntry="this.alignItems='flex-start';" >
|
|
58
58
|
|
|
59
59
|
<lido-cell visible="true" layout="pos" x="landscape.70px, portrait.50px" y="landscape.360px, portrait.330px" bg-color="transparent">
|
|
60
60
|
<lido-text visible="true" string="${args.objective}" bg-color="transparent" font-family="'Baloo Bhai 2'" font-size="140px">
|
|
@@ -89,9 +89,9 @@ function getContainerXml(args) {
|
|
|
89
89
|
</lido-cell>
|
|
90
90
|
|
|
91
91
|
<lido-cell layout="row" bg-color="transparent" aria-hidden="true" visible="true" height="landscape.420px,portrait.30%" width="landscape.1451px,portrait.90%" onEntry="this.z-index='1';">
|
|
92
|
-
<lido-math-matrix id="hundredsDrag" value="100" tab-index="11" type="drag" rows="10" cols="10" defualtFill="100" leftIndex="false" topIndex="false" clickable="false" activeBgColor="#5D44BD" deactiveBgColor="#5D44BD" border="2px solid #4A3697" height="288px" width="
|
|
93
|
-
<lido-math-matrix id="tensDrag" value="10" type="drag" tab-index="12" rows="10" cols="1" defualtFill="10" leftIndex="false" topIndex="false" clickable="false" activeBgColor="#F57139" deactiveBgColor="#F57139" border="2px solid #F34D08" height="288px" width="
|
|
94
|
-
<lido-math-matrix id="unitsDrag" value="1" tab-index="13" type="drag" rows="1" cols="1" defualtFill="100" leftIndex="false" topIndex="false" clickable="false" activeBgColor="#F57139" deactiveBgColor="#F57139" border="2px solid #F34D08" height="288px" width="
|
|
92
|
+
<lido-math-matrix id="hundredsDrag" value="100" tab-index="11" type="drag" rows="10" cols="10" defualtFill="100" leftIndex="false" topIndex="false" clickable="false" activeBgColor="#5D44BD" deactiveBgColor="#5D44BD" border="2px solid #4A3697" height="288px" width="220px" visible="true"></lido-math-matrix>
|
|
93
|
+
<lido-math-matrix id="tensDrag" value="10" type="drag" tab-index="12" rows="10" cols="1" defualtFill="10" leftIndex="false" topIndex="false" clickable="false" activeBgColor="#F57139" deactiveBgColor="#F57139" border="2px solid #F34D08" height="288px" width="300px" visible="true"></lido-math-matrix>
|
|
94
|
+
<lido-math-matrix id="unitsDrag" value="1" tab-index="13" type="drag" rows="1" cols="1" defualtFill="100" leftIndex="false" topIndex="false" clickable="false" activeBgColor="#F57139" deactiveBgColor="#F57139" border="2px solid #F34D08" height="288px" width="80px" visible="true"></lido-math-matrix>
|
|
95
95
|
</lido-cell>
|
|
96
96
|
|
|
97
97
|
</lido-container>
|
|
@@ -24,7 +24,7 @@ function getContainerXml(args) {
|
|
|
24
24
|
.map(([key, { width, height }], index) => {
|
|
25
25
|
objective.push(`slot${index + 1}`);
|
|
26
26
|
return `
|
|
27
|
-
<lido-math-matrix id="drop-${index + 1}" visible="true" width="1600px" height="900px" rows="${width}" cols="${height}" top-index="false" left-index="false" bottom-index="false" active-only-visible="true" activeBgColor="#967ca6" defualtFill="${width * height}" tab-index="${tabIndex++}" type="drop" value="slot${index + 1}" clickable="false" border="2px solid black" font-color="white" onInCorrect="lido-avatar.avatarAnimate='Fail';"></lido-math-matrix>
|
|
27
|
+
<lido-math-matrix id="drop-${index + 1}" visible="true" width="1600px" height="900px" rows="${width}" cols="${height}" top-index="false" left-index="false" bottom-index="false" active-only-visible="true" activeBgColor="#967ca6" defualtFill="${width * height}" tab-index="${tabIndex++}" type="drop" value="slot${index + 1}" clickable="false" border="2px solid black" font-color="white" onInCorrect="lido-avatar.avatarAnimate='Fail';" onCorrect="lido-avatar.avatarAnimate='Success';"></lido-math-matrix>
|
|
28
28
|
`;
|
|
29
29
|
})
|
|
30
30
|
.join("\n");
|
|
@@ -33,11 +33,13 @@ function getContainerXml(args) {
|
|
|
33
33
|
const colors = ['#a657fa', '#fa7f98', '#dee60e', '#71f24e', '#55d9a4'];
|
|
34
34
|
const randomColor = colors[Math.floor(Math.random() * colors.length)];
|
|
35
35
|
return `
|
|
36
|
-
<lido-math-matrix id="drag-${index + 1}" visible="true" width="1600px" height="900px" rows="${width}" cols="${height}" top-index="false" left-index="false" bottom-index="false" active-only-visible="true" activeBgColor="${randomColor}" defualtFill="${width * height}"
|
|
36
|
+
<lido-math-matrix id="drag-${index + 1}" visible="true" width="1600px" height="900px" rows="${width}" cols="${height}" top-index="false" left-index="false" bottom-index="false" active-only-visible="true" activeBgColor="${randomColor}" defualtFill="${width * height}" type="drag" value="slot${index + 1}" clickable="false" border="2px solid black" font-color="white" onCorrect="lido-avatar.avatarAnimate='Success';"></lido-math-matrix>`;
|
|
37
37
|
})
|
|
38
38
|
.join("\n");
|
|
39
39
|
return `<main>
|
|
40
|
-
<lido-container
|
|
40
|
+
<lido-container id="lido-container" visible="true" dropAttr="math-matrix" objective="${objective}" onCorrect="this.sleep='2000'; all.animation='placeToLeft 1.5s linear'; this.sleep='1500';" is-continue-on-correct="true" is-allow-only-correct="true" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Checker%20blocks.png" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" disable-speak="true">
|
|
41
|
+
|
|
42
|
+
<lido-text visible="false" tab-index="1" string="drag the missing numbers from right to its correct place and complete the puzzle" onEntry="this.sleep='2000'; this.speak='true';"></lido-text>
|
|
41
43
|
|
|
42
44
|
<!-- Chimple Avatar -->
|
|
43
45
|
<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.448px,portrait.270px" width="landscape.350px,portrait.270px" x="landscape.500px, portrait.-9%" y="landscape.522px, portrait.36%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
|
|
@@ -53,7 +55,7 @@ function getContainerXml(args) {
|
|
|
53
55
|
</lido-cell>
|
|
54
56
|
<lido-cell id="truck" visible="true" layout="pos" x="0" y="0" z="1" onEntry="this.animation='rightToPlace 1.5s linear';">
|
|
55
57
|
<lido-image visible="true" width="landscape.1500px, portrait.1234px" height="landscape.900px, portrait.850px" x="landscape.185px, portrait.-350px" y='landscape.20px, portrait.60px' src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/CheckerBlock/checkerBlockTruck.svg"></lido-image>
|
|
56
|
-
<lido-math-matrix id="matrix" visible="true" width="landscape.
|
|
58
|
+
<lido-math-matrix id="matrix" visible="true" width="landscape.720px, portrait.660px" height="landscape.860px, portrait.400px" x="landscape.800px, portrait.135px" y="landscape.23px, portrait.75px" rows="10" cols="10" top-index="false" left-index="false" bottom-index="false" active-only-visible="false" defualtFill="100" text="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100" border="2px solid #736e6cff" border-radius="0" active-bg-color="#d7d5d9" clickable="false" type="checkerBlock" font-color="#4f2e35"></lido-math-matrix>
|
|
57
59
|
${dropMatrices}
|
|
58
60
|
|
|
59
61
|
</lido-cell>
|
|
@@ -15,7 +15,7 @@ const meta = {
|
|
|
15
15
|
},
|
|
16
16
|
};
|
|
17
17
|
export default meta;
|
|
18
|
-
export const
|
|
18
|
+
export const FillAnswer = {
|
|
19
19
|
args: {
|
|
20
20
|
firstNum: '3', operator: '+', secontNum: '4', equator: '=', answer: '7',
|
|
21
21
|
option1: '5', option2: '7', option3: '3', option4: '2', isAllowOnlyCorrect: 'true',
|
|
@@ -28,40 +28,46 @@ export const OrderTractor = {
|
|
|
28
28
|
function getContainerXml(args) {
|
|
29
29
|
return `
|
|
30
30
|
<main>
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
31
|
+
<lido-container id="lido-container" is-allow-only-correct="${args.isAllowOnlyCorrect}" value="mainContainer1" tab-index="1" 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
|
+
<!-- Chimple Avatar -->
|
|
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
|
+
<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}">
|
|
35
|
+
</lido-avatar>
|
|
36
|
+
</lido-cell>
|
|
37
37
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
<lido-text tab-index="2" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.operator}" bg-color="transparent" onEntry="this.position='relative';this.fontWeight='600';this.display='inline';this.boxShadow='0 0 0'; this.padding='0px 21px 0px 0px';"></lido-text>
|
|
46
|
-
<lido-text tab-index="3" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.secontNum}" bg-color="transparent" onEntry="this.position='relative';this.fontWeight='600';this.display='inline';this.boxShadow='0 0 0'; this.padding='0px 21px 0px 0px';"></lido-text>
|
|
47
|
-
<lido-text tab-index="4" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.equator}" bg-color="transparent" onEntry="this.position='relative';this.fontWeight='600';this.display='inline';this.boxShadow='0 0 0'; this.padding='0px 21px 0px 0px';"></lido-text>
|
|
48
|
-
<lido-text tab-index="5" id="drop1" disable-edit="true" visible="true" width="164px" height="landscape.73px,portrait.77px" value="${args.answer}" type="drop" is-allow-only-one-drop="true" drop-Attr="stretch" onEntry="this.border-radius='10px';this.box-shoadow=''; this.margin-right='35px';" ></lido-text>
|
|
49
|
-
|
|
38
|
+
<!--Parent cell -->
|
|
39
|
+
<lido-cell layout="col" visible="true" width="100%" height="100%" bg-color="transparent">
|
|
40
|
+
<!-- heading -->
|
|
41
|
+
<lido-cell layout="row" visible="true" width="landscape.45%, portrait.69%" height="landscape.15%, portrait.auto" bg-color="white" onEntry="this.borderRadius='10px'; this.padding='8px';this.animation='topToPlace 2.5s linear';" margin="landscape.110px 0px 0px 0px , portrait.400px 0px 0px 0px">
|
|
42
|
+
|
|
43
|
+
<lido-text id="question" audio="" tab-index="2" visible="false" string="solve the problem and select the correct answer from below" value="solve the problem and select the correct answer from below" onEntry="this.sleep='2000';this.speak='true';">
|
|
44
|
+
</lido-text>
|
|
50
45
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
46
|
+
<lido-text tab-index="3" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.firstNum}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='600';this.display='inline'; this.padding='0px 20px 0px 0px'; ">
|
|
47
|
+
</lido-text>
|
|
48
|
+
<lido-text tab-index="4" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.operator}" bg-color="transparent" onEntry="this.position='relative';this.fontWeight='600';this.display='inline';this.boxShadow='0 0 0'; this.padding='0px 21px 0px 0px';">
|
|
49
|
+
</lido-text>
|
|
50
|
+
<lido-text tab-index="5" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.secontNum}" bg-color="transparent" onEntry="this.position='relative';this.fontWeight='600';this.display='inline';this.boxShadow='0 0 0'; this.padding='0px 21px 0px 0px';">
|
|
51
|
+
</lido-text>
|
|
52
|
+
<lido-text tab-index="6" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.equator}" bg-color="transparent" onEntry="this.position='relative';this.fontWeight='600';this.display='inline';this.boxShadow='0 0 0'; this.padding='0px 21px 0px 0px';">
|
|
53
|
+
</lido-text>
|
|
54
|
+
<lido-text tab-index="7" id="drop1" disable-edit="true" visible="true" width="164px" height="landscape.73px,portrait.77px" value="${args.answer}" type="drop" is-allow-only-one-drop="true" drop-Attr="stretch" onEntry="this.border-radius='10px'; this.box-shoadow=''; this.margin-right='35px';" onTouch="this.speak='true';" onCorrect="this.speak='true';" >
|
|
55
|
+
</lido-text>
|
|
56
|
+
|
|
57
|
+
</lido-cell>
|
|
58
|
+
<lido-cell layout="row" childElementsLength="4" onEntry="this.gap='28px'; this.animation='rightToPlace 2.5s linear'; this.gridTemplateColumns = 'repeat(2, 1fr)'; this.gridTemplateRows = 'repeat(2, 1fr)';" visible="true" margin="landscape.6px 25px 74px 0px, portrait.-170px 128px 0px 117px">
|
|
59
|
+
<lido-text font-family="'Baloo Bhai 2'" audio="" id="option1" value="${args.option1}" tab-index="14" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px'; this.fontWeight='600';" width="auto" height="landscape.87px, portrait.91px" string="${args.option1}" fontColor="black" font-size="88px" onTouch="this.speak='true';" onCorrect="this.speak='true';" type="drag">
|
|
60
|
+
</lido-text>
|
|
61
|
+
<lido-text font-family="'Baloo Bhai 2'" audio="" id="option2" value="${args.option2}" tab-index="15" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px'; this.fontWeight='600'; " width="auto" height="landscape.87px, portrait.91px" string="${args.option2}" fontColor="black" font-size="88px" onTouch="this.speak='true';" onCorrect="this.speak='true';" type="drag">
|
|
62
|
+
</lido-text>
|
|
63
|
+
<lido-text font-family="'Baloo Bhai 2'" audio="" id="option3" value="${args.option3}" tab-index="16" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px'; this.fontWeight='600'; " width="auto" height="landscape.87px, portrait.91px" string="${args.option3}" fontColor="black" font-size="88px" onTouch="this.speak='true';" onCorrect="this.speak='true';" type="drag">
|
|
64
|
+
</lido-text>
|
|
65
|
+
<lido-text font-family="'Baloo Bhai 2'" audio="" id="option4" value="${args.option4}" tab-index="17" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px'; this.fontWeight='600';" width="auto" height="landscape.87px, portrait.91px" string="${args.option4}" fontColor="black" font-size="88px" onTouch="this.speak='true';" onCorrect="this.speak='true';" type="drag">
|
|
66
|
+
</lido-text>
|
|
67
|
+
</lido-cell>
|
|
62
68
|
|
|
63
|
-
|
|
64
|
-
|
|
69
|
+
</lido-cell>
|
|
70
|
+
</lido-container>
|
|
65
71
|
</main>
|
|
66
72
|
`;
|
|
67
73
|
}
|
|
@@ -47,13 +47,13 @@ function getContainerXml(args) {
|
|
|
47
47
|
</lido-text>
|
|
48
48
|
|
|
49
49
|
<!-- Bottom display Section -->
|
|
50
|
-
<lido-cell layout="pos" id="pos2" value="pos2" height="auto" width="landscape.
|
|
50
|
+
<lido-cell layout="pos" id="pos2" value="pos2" height="auto" width="landscape.900px, portrait.100%" x="landscape.700px, portrait.0px" y="landscape.300px, portrait.1000px" ariaHidden="true" bgColor="transparent" visible="true" onEntry="this.flex-shrink='0'; this.animation='bottomToPlace 2s linear';">
|
|
51
51
|
<lido-text id="answer-multiply-beeds" value="${answer}" height="inherit" width="inherit" string="${str_val}" font-size="84px" font-weight="600" bgColor="#FFF4CD" visible="true" onEntry="this.word-wrap='break-word'; this.fontWeight='600'; this.textAlign='center';">
|
|
52
52
|
</lido-text>
|
|
53
53
|
</lido-cell>
|
|
54
54
|
|
|
55
55
|
<!-- Beeds Section -->
|
|
56
|
-
<lido-cell layout="pos" id="pos3" height="landscape.1100px, portrait.900px" width="landscape.
|
|
56
|
+
<lido-cell layout="pos" id="pos3" height="landscape.1100px, portrait.900px" width="landscape.600px,portrait.825px" x="landscape.40px, portrait.15px" y="landscape.-80px,portrait.45px" ariaHidden="true" z="0" bgColor="transparent" visible="true" onEntry="this.opacity='1';">
|
|
57
57
|
<lido-math-matrix id="mat1" visible="true" rows="9" cols="9" top-index="true" left-index="true" bottom-index="false" clickable="true" active-only-visible="false" active-bg-color="#C23E06" deactive-bg-color="#F57139" border="2px solid #F34D08" defualt-fill="0" matrix-image="">
|
|
58
58
|
</lido-math-matrix>
|
|
59
59
|
</lido-cell>
|
|
@@ -16,31 +16,31 @@ export default meta;
|
|
|
16
16
|
export const numberBoard = {
|
|
17
17
|
args: {
|
|
18
18
|
options: [
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
19
|
+
"11",
|
|
20
|
+
"12",
|
|
21
|
+
"13",
|
|
22
|
+
"14",
|
|
23
|
+
"15",
|
|
24
|
+
"16",
|
|
25
|
+
"17",
|
|
26
|
+
"18",
|
|
27
|
+
"19",
|
|
28
|
+
"20"
|
|
29
29
|
],
|
|
30
30
|
answers: [
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
31
|
+
"11",
|
|
32
|
+
"12",
|
|
33
|
+
"13",
|
|
34
|
+
"14",
|
|
35
|
+
"15",
|
|
36
|
+
"16",
|
|
37
|
+
"17",
|
|
38
|
+
"18",
|
|
39
|
+
"19",
|
|
40
|
+
"20"
|
|
41
41
|
],
|
|
42
42
|
colors: ['#CF1565', '#409F5C', '#02C1C1', '#AD3184', '#F55376', '#81C127', '#5D44BD'],
|
|
43
|
-
isAllowOnlyCorrect:
|
|
43
|
+
isAllowOnlyCorrect: true,
|
|
44
44
|
},
|
|
45
45
|
render: args => {
|
|
46
46
|
const xml = getContainerXml(args);
|
|
@@ -52,51 +52,59 @@ function getContainerXml(args) {
|
|
|
52
52
|
const { options = [], answers = [], isAllowOnlyCorrect = true } = args;
|
|
53
53
|
const pickedColors = args.colors;
|
|
54
54
|
const DropCells = answers.map(answer => {
|
|
55
|
+
const rows = String(Number(answer) <= 10 ? 2 : 4);
|
|
55
56
|
return `
|
|
56
|
-
|
|
57
|
-
<lido-cell layout="col" visible="true" margin="landscape.0,portrait.72px 0px -95px 0px" height="landscape.345px,portrait.350px" width="
|
|
58
|
-
<lido-math-matrix id="mat1" rows="
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
57
|
+
<!-- drop -->
|
|
58
|
+
<lido-cell layout="col" visible="true" gap="20px" margin="landscape.0,portrait.72px 0px -95px 0px" height="landscape.345px,portrait.350px" width="150px" bg-Color="#DFF2F2" onEntry="this.position='relative';this.align-items='center';this.justify-content='center';this.borderRadius='10px';">
|
|
59
|
+
<lido-math-matrix id="mat1" rows="${rows}" cols="5" defualtFill="${answer}" leftIndex="false" topIndex="false" clickable="true" matrixImage="" activeBgColor="#922E05" inactiveBgColor="transparent" border="5px soild transparent" height="50%" width="100%" visible="true" margin="landscape.0,portrait.-26px 0px 0px 0px">
|
|
60
|
+
</lido-math-matrix>
|
|
61
|
+
<lido-cell id="drop${tabCounter}" visible="true" height="landscape.110px,portrait.110px" width="landscape.110px,portrait.110px" bg-color="white" tab-index="${tabCounter++}" value="${answer}" string="${answer}" type="drop" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';">
|
|
62
|
+
</lido-cell>
|
|
63
|
+
</lido-cell>
|
|
64
|
+
`;
|
|
62
65
|
}).join('');
|
|
63
66
|
const DragCells = options
|
|
64
67
|
.map((option) => {
|
|
65
68
|
const color = pickedColors[Math.floor(Math.random() * pickedColors.length)];
|
|
66
69
|
return `
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
+
<lido-text visible="true" onTouch="this.speak='true';" type="drag" id="drag${tabCounter}" tab-index="${tabCounter++}" height="landscape.110px,portrait.110px" width="landscape.110px,portrait.110px" bg-Color="white" font-family="'Baloo Bhai 2'" font-size="100px" font-weigth="500" value="${option}" string="${option}" margin="landscape.0 0 127px 0,portrait.0 135px 0 0 " onEntry="this.color='${color}';this.fontWeight='800';this.borderRadius='10px'; this.flex-shrink='0';this.textShadow = '3px 0 white, -3px 0 white, 0 3px white, 0 -3px white ">
|
|
71
|
+
</lido-text>
|
|
72
|
+
`;
|
|
70
73
|
})
|
|
71
74
|
.join('');
|
|
72
|
-
return
|
|
73
|
-
<
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
75
|
+
return `
|
|
76
|
+
<main>
|
|
77
|
+
<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">
|
|
78
|
+
|
|
79
|
+
<!-- Chimple Avatar -->
|
|
80
|
+
<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';">
|
|
81
|
+
|
|
82
|
+
<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}">
|
|
83
|
+
</lido-avatar>
|
|
84
|
+
</lido-cell>
|
|
85
|
+
|
|
86
|
+
<lido-image visible="true" id="tyre" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/letterboard/wheel.png" height="119px" width="131px" onEntry=" this.position='relative'; this.animation='rightToPlace 2.5s linear';" x="landscape.299px, portrait.293px" y="landscape.768px, portrait.1092px" margin="">
|
|
87
|
+
</lido-image>
|
|
88
|
+
|
|
89
|
+
<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'; question-text.speak='true';">
|
|
90
|
+
</lido-text>
|
|
91
|
+
<lido-text id="question-text" visible="false" audio="" string="drag the number to its correct place and complete the number puzzle" value="drag the number to its correct place and complete the number puzzle" onEntry="">
|
|
92
|
+
</lido-text>
|
|
93
|
+
|
|
94
|
+
<lido-cell visible="true" id="xx" layout="landscape.row,portrait.col" height="90%" width="90%" bg-Color="transparent" margin="landscape.56px 0px 0px 0px,portrait.0px" onEntry="">
|
|
95
|
+
<lido-cell visible="true" id="truck" layout="row" height="90%" width="1377px" bg-Color="transparent" margin="landscape.-169px 114px 39px -195px,portrait.-115px 0px 0px 0px" onEntry="this.animation='rightToPlace 2.5s linear';">
|
|
96
|
+
<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/letterboard/truck.png" height="583px" width="502px" onEntry=" " margin="landscape.345px -40px 0px 55px,portrait.408px 67px -179px -107px">
|
|
97
|
+
</lido-image>
|
|
98
|
+
<lido-cell visible="true" height="landscape.100%,portrait.858px" width="landscape.858px,portrait.62%" bg-color="#F78315" margin="landscape.0px 0px 0px -18px,portrait.-124px 252px -238px -114px" onEntry=" this.place-items='center';this.gap='1px'; this.padding='0px'; this.gridTemplateColumns='repeat(auto-fill, minmax(143px, auto))'; this.gridTemplateRows='repeat(auto-fit, 362px)'; this.flexWrap='wrap';">
|
|
99
|
+
${DropCells}
|
|
100
|
+
</lido-cell>
|
|
101
|
+
</lido-cell>
|
|
102
|
+
|
|
103
|
+
<lido-cell layout="landscape.col,portrait.row" visible="true" height="landscape.71%,portrait.185px" width="landscape.12%,portrait.71%" bg-color="transparent" onEntry=" this.animation='rightToPlace 2.7s linear';" margin="landscape.-280px 102px 0px -73px,portrait.-108px 0px 151px -50px">
|
|
104
|
+
${DragCells}
|
|
105
|
+
</lido-cell>
|
|
106
|
+
</lido-cell>
|
|
107
|
+
</lido-container>
|
|
108
|
+
</main>
|
|
109
|
+
`;
|
|
102
110
|
}
|
|
@@ -87,9 +87,10 @@ function getContainerXml(args) {
|
|
|
87
87
|
const objective = args.objective;
|
|
88
88
|
const isAllowOnlyCorrect = (_a = args.isAllowOnlyCorrect) !== null && _a !== void 0 ? _a : true;
|
|
89
89
|
const options = args.options;
|
|
90
|
+
let tabIndexStart = 4;
|
|
90
91
|
const optionsCell = options.map((option) => {
|
|
91
92
|
return `
|
|
92
|
-
<lido-text id="${option}" tab-index="${
|
|
93
|
+
<lido-text id="${option}" tab-index="${tabIndexStart++}" height="215px" width="auto" visible="true" value="${option}" string="${option}" font-family="'Baloo Bhai 2'" font-color="black" type="click" font-size="104px" bg-color="#FFB366" onCorrect="" onInCorrect="this.vibrate='horizontal-shake';" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse';" border-image="">
|
|
93
94
|
<lido-text visible="true" id="option-text" audio="" height="0px" width="auto" font-family="'Baloo 2', serif" font-size="landscape.44px, portrait.52px" font-color="black" string="${optionText}" bg-Color="transparent" onEntry="this.font-weight='700';" padding="0px 10px 0px 10px">
|
|
94
95
|
</lido-text>
|
|
95
96
|
</lido-text>
|
|
@@ -111,7 +112,7 @@ function getContainerXml(args) {
|
|
|
111
112
|
console.log('Expression Text: ', escapedExpressionText);
|
|
112
113
|
return `
|
|
113
114
|
<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/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
|
+
<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="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; 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
116
|
|
|
116
117
|
<!-- Chimple Avatar -->
|
|
117
118
|
<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';">
|
|
@@ -125,11 +126,11 @@ function getContainerXml(args) {
|
|
|
125
126
|
</lido-image>
|
|
126
127
|
</lido-cell>
|
|
127
128
|
|
|
128
|
-
<lido-text visible="false" id="txt1" audio="" font-family="'Baloo 2', serif" font-size="52px" font-color="black" string="Solve the problem shown in the board and select the correct answer" bg-Color="transparent" onEntry="this.speak='true'; question-board-text.speak='true';" >
|
|
129
|
+
<lido-text visible="false" id="txt1" audio="" tab-index="2" font-family="'Baloo 2', serif" font-size="52px" font-color="black" string="Solve the problem shown in the board and select the correct answer" bg-Color="transparent" onEntry="this.speak='true'; question-board-text.speak='true';" >
|
|
129
130
|
</lido-text>
|
|
130
131
|
|
|
131
132
|
<lido-cell layout="pos" id="pos3" value="pos3" x="landscape.445px, portrait.45px" y="landscape.115px, portrait.145px" visible="true" height="landscape.60%,portrait.10%" width="landscape.55%,portrait.92%" border-radius="7px" bg-color="transparent" onEntry="this.z-index='1';">
|
|
132
|
-
<lido-text visible="true" id="question-board-text" audio="" font-family="'Baloo 2', serif" font-size="landscape.60px, portrait.52px" font-color="black" string="${questionBoardText}" bg-Color="transparent" onEntry="this.font-weight='700'; this.textAlign='left'; this.lineHeight='1.25';" >
|
|
133
|
+
<lido-text visible="true" id="question-board-text" tab-index="3" audio="" font-family="'Baloo 2', serif" font-size="landscape.60px, portrait.52px" font-color="black" string="${questionBoardText}" bg-Color="transparent" onEntry="this.font-weight='700'; this.textAlign='left'; this.lineHeight='1.25';" >
|
|
133
134
|
</lido-text>
|
|
134
135
|
</lido-cell>
|
|
135
136
|
|
|
@@ -140,7 +141,7 @@ function getContainerXml(args) {
|
|
|
140
141
|
|
|
141
142
|
<!-- Invisible Text for Animation -->
|
|
142
143
|
<lido-cell layout="pos" id="invisible-text" disableEdit="true" value="pos3" height="landscape.10%, portrait.710px" width="landscape.75%, portrait.875px" x="landscape.325px, portrait.10px" y="landscape.740px, portrait.475px" ariaHidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.flex-shrink='0'; this.opacity='0'; this.z-index='0';">
|
|
143
|
-
<lido-text id="txt2" audio="" tab-index="
|
|
144
|
+
<lido-text id="txt2" audio="" tab-index="8" height="inherit" width="inherit" visible="true" value="${escapedExpressionText}" string="${escapedExpressionText}" font-family="'Baloo Bhai 2'" font-color="white" font-size="104px" bg-color="transparent" onCorrect="" onInCorrect="this.vibrate='horizontal-shake';" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-shrink='0';">
|
|
144
145
|
</lido-text>
|
|
145
146
|
</lido-cell>
|
|
146
147
|
|