lido-player 0.0.2-alpha-57-dev → 0.0.2-alpha-59-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 +94 -34
- package/dist/cjs/lido-player.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{utils-a61cfc6b.js → utils-03573882.js} +160 -124
- package/dist/collection/components/container/lido-container.js +60 -3
- package/dist/collection/components/flashCard/lido-flash-card.js +10 -1
- package/dist/collection/components/float/lido-float.js +1 -1
- package/dist/collection/components/home/lido-home.js +22 -12
- package/dist/collection/components/keyboard/lido-keyboard.js +2 -2
- package/dist/collection/components/mathMatrix/lido-math-matrix.js +1 -1
- package/dist/collection/components/position/lido-pos.js +1 -1
- package/dist/collection/components/random/lido-random.js +1 -1
- package/dist/collection/components/row/lido-row.js +1 -1
- package/dist/collection/components/scale/lido-balance.js +1 -1
- package/dist/collection/components/shape/lido-shape.js +2 -2
- package/dist/collection/components/slideFill/lido-slide-fill.js +1 -1
- package/dist/collection/components/text/lido-text.js +1 -1
- package/dist/collection/components/trace/lido-trace.js +18 -7
- package/dist/collection/components/wrap/lido-wrap.js +1 -1
- package/dist/collection/css/animation.css +17 -0
- package/dist/collection/css/index.css +1 -1
- package/dist/collection/stories/Templates/LetterPairing/LetterPairing.stories.js +3 -3
- package/dist/collection/stories/Templates/balancing/balancing.stories.js +1 -1
- package/dist/collection/stories/Templates/matchBox/matchBox2.stories.js +74 -44
- package/dist/collection/stories/Templates/matchingCard/matching-card.stories.js +4 -4
- package/dist/collection/stories/Templates/numberBoardTwo/numberBoardTwo.stories.js +2 -2
- package/dist/collection/stories/Templates/numberIdentification/numberIdentificationimageTotext.stories.js +91 -0
- package/dist/collection/stories/Templates/numberIdentification/numberIdentificationtextTotext.stories.js +84 -0
- package/dist/collection/stories/Templates/openwindow/openwindow.stories.js +0 -2
- package/dist/collection/stories/Templates/openwindow/openwindow2.stories.js +0 -2
- package/dist/collection/stories/Templates/order-tractor/order-tractor-ascending-order.stories.js +6 -5
- package/dist/collection/stories/Templates/order-tractor/order-tractor.stories.js +6 -6
- package/dist/collection/stories/Templates/palEgmaCalculateSum/palEgmaMultiOption.stories.js +106 -0
- package/dist/collection/stories/Templates/palEgmaCalculateSum/palEgmaSumTogether.stories.js +91 -0
- package/dist/collection/stories/Templates/palEgmaPatternMatching/palEgmaPatternMatching.stories.js +86 -0
- package/dist/collection/stories/Templates/palEgmaWordProblem/palEgmaWordProblem.stories.js +131 -0
- package/dist/collection/stories/Templates/palEgraInventedSpelling/pal_egra_invented_spelling_schema.stories.js +61 -0
- package/dist/collection/stories/Templates/palEgraMCQWithImage/palEgraMCQWithImage.stories.js +87 -0
- package/dist/collection/stories/Templates/palEgraStoryMaking/pal_egra_story_making.stories.js +72 -0
- package/dist/collection/stories/Templates/palEgraTemplate1/palEgraLetterIdentification.stories.js +61 -0
- package/dist/collection/stories/Templates/palEgra_OddOneOut/palEgra_oddOneOut.stories.js +60 -0
- package/dist/collection/stories/Templates/palEgra_word_formation/palEgra_WordFormation.stories.js +73 -0
- package/dist/collection/stories/Templates/pictureClues/pictureClues.stories.js +88 -0
- package/dist/collection/stories/Templates/pictureWordMatch/pictureWordMatch1.stories.js +88 -0
- package/dist/collection/stories/Templates/pictureWordMatch/pictureWordMatch2.stories.js +66 -0
- package/dist/collection/stories/Templates/picturemeaning/pictureMeaningCocos.stories.js +1 -1
- package/dist/collection/stories/Templates/quizMaths/quizMaths.stories.js +7 -7
- package/dist/collection/stories/Templates/rowBlocks/rowBlocks.stories.js +1 -1
- package/dist/collection/stories/Templates/sequenceBox/sequenceBox1.stories.js +16 -13
- package/dist/collection/stories/Templates/sequenceBox/sequenceBox2.stories.js +17 -14
- package/dist/collection/stories/Templates/substraction/substractionWithimg.stories.js +111 -0
- package/dist/collection/stories/Templates/substraction/substractionWithoutImg.stories.js +70 -0
- package/dist/collection/stories/Templates/sumTogether/sumTogether.stories.js +11 -10
- package/dist/collection/stories/Templates/total/total.stories.js +2 -0
- package/dist/collection/stories/Templates/wordBuilding/wordBuildingwithimg.stories.js +76 -0
- package/dist/collection/stories/Templates/wordBuilding/wordBuildingwithoutimg.stories.js +74 -0
- package/dist/collection/stories/Templates/writeSet/writeSet.stories.js +1 -1
- package/dist/collection/utils/constants.js +2 -1
- package/dist/collection/utils/utils.js +29 -20
- package/dist/collection/utils/utilsHandlers/clickHandler.js +2 -0
- package/dist/collection/utils/utilsHandlers/dragDropHandler.js +24 -20
- package/dist/collection/utils/utilsHandlers/highlightHandler.js +50 -2
- package/dist/collection/utils/utilsHandlers/lidoBalanceHandler.js +5 -4
- 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 -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-73e3f0f4.js → p-2bb1f74d.js} +203 -1
- package/dist/components/{p-f3bc4577.js → p-33b83222.js} +1 -1
- package/dist/components/{p-0712a27e.js → p-3513b1f3.js} +159 -125
- package/dist/components/{p-f2b53e8e.js → p-356e56bd.js} +2 -2
- package/dist/components/{p-b9875116.js → p-49ccf573.js} +18 -7
- package/dist/components/{p-330caab8.js → p-4d9462ab.js} +4 -4
- package/dist/components/{p-4d332eab.js → p-5aa24314.js} +2 -2
- package/dist/components/{p-d1b5079b.js → p-5c990168.js} +45 -6
- package/dist/components/{p-21852d55.js → p-5eeaccab.js} +2 -2
- package/dist/components/{p-480f708a.js → p-6819005f.js} +11 -2
- package/dist/components/{p-ffc40642.js → p-6bbad90f.js} +2 -2
- package/dist/components/{p-e1ba0c44.js → p-73e4bb01.js} +41 -33
- package/dist/components/{p-ff801ba1.js → p-84302365.js} +1 -1
- package/dist/components/{p-0a41b2f8.js → p-99fcbae4.js} +1 -1
- package/dist/components/{p-9104d427.js → p-9b35082a.js} +2 -2
- package/dist/components/{p-882b291d.js → p-ad0f335e.js} +2 -2
- package/dist/components/{p-c4739621.js → p-aff68c41.js} +3 -3
- package/dist/components/{p-2829c82c.js → p-d9b17242.js} +2 -2
- package/dist/components/{p-cca36777.js → p-de62d08e.js} +3 -3
- package/dist/components/{p-4e041807.js → p-e8e9250e.js} +2 -2
- package/dist/components/{p-17f84b2f.js → p-f238004e.js} +2 -2
- package/dist/components/{p-eab0ebb7.js → p-f9426cbe.js} +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/lido-avatar_22.entry.js +94 -34
- package/dist/esm/lido-player.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{utils-7ed76799.js → utils-3995d2d5.js} +159 -125
- package/dist/lido-player/index.esm.js +1 -1
- package/dist/lido-player/lido-player.css +1 -1
- package/dist/lido-player/lido-player.esm.js +1 -1
- package/dist/lido-player/p-75daccb0.entry.js +1 -0
- package/dist/lido-player/{p-17d93181.js → p-aee89fba.js} +2 -2
- package/dist/types/components/container/lido-container.d.ts +15 -2
- package/dist/types/components/trace/lido-trace.d.ts +3 -3
- package/dist/types/components.d.ts +10 -2
- package/dist/types/stories/Templates/numberIdentification/numberIdentificationimageTotext.stories.d.ts +4 -0
- package/dist/types/stories/Templates/numberIdentification/numberIdentificationtextTotext.stories.d.ts +4 -0
- package/dist/types/stories/Templates/palEgmaCalculateSum/palEgmaMultiOption.stories.d.ts +11 -0
- package/dist/types/stories/Templates/palEgmaCalculateSum/palEgmaSumTogether.stories.d.ts +12 -0
- package/dist/types/stories/Templates/palEgmaPatternMatching/palEgmaPatternMatching.stories.d.ts +4 -0
- package/dist/types/stories/Templates/palEgmaWordProblem/palEgmaWordProblem.stories.d.ts +5 -0
- package/dist/types/stories/Templates/palEgraInventedSpelling/pal_egra_invented_spelling_schema.stories.d.ts +4 -0
- package/dist/types/stories/Templates/palEgraMCQWithImage/palEgraMCQWithImage.stories.d.ts +4 -0
- package/dist/types/stories/Templates/palEgraStoryMaking/pal_egra_story_making.stories.d.ts +4 -0
- package/dist/types/stories/Templates/palEgraTemplate1/palEgraLetterIdentification.stories.d.ts +4 -0
- package/dist/types/stories/Templates/palEgra_OddOneOut/palEgra_oddOneOut.stories.d.ts +4 -0
- package/dist/types/stories/Templates/palEgra_word_formation/palEgra_WordFormation.stories.d.ts +4 -0
- package/dist/types/stories/Templates/pictureClues/pictureClues.stories.d.ts +4 -0
- package/dist/types/stories/Templates/pictureWordMatch/pictureWordMatch1.stories.d.ts +4 -0
- package/dist/types/stories/Templates/pictureWordMatch/pictureWordMatch2.stories.d.ts +4 -0
- package/dist/types/stories/Templates/substraction/substractionWithimg.stories.d.ts +4 -0
- package/dist/types/stories/Templates/substraction/substractionWithoutImg.stories.d.ts +4 -0
- package/dist/types/stories/Templates/wordBuilding/wordBuildingwithimg.stories.d.ts +4 -0
- package/dist/types/stories/Templates/wordBuilding/wordBuildingwithoutimg.stories.d.ts +4 -0
- package/dist/types/utils/constants.d.ts +9 -1
- package/dist/types/utils/utils.d.ts +1 -0
- package/dist/types/utils/utilsHandlers/highlightHandler.d.ts +1 -0
- package/package.json +1 -1
- package/dist/components/p-7ab0a273.js +0 -204
- package/dist/lido-player/p-fa9dfdf8.entry.js +0 -1
|
@@ -280,7 +280,7 @@ function getContainerXml2(args) {
|
|
|
280
280
|
onEntry="this.border-radius='14px';" bg-color="" onTouch="this.speak='true';" string="${args.question1}" font-color="white"
|
|
281
281
|
font-size="1px">
|
|
282
282
|
<lido-image visible="true"
|
|
283
|
-
src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/
|
|
283
|
+
src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/audio.png"
|
|
284
284
|
width="96px">
|
|
285
285
|
</lido-image>
|
|
286
286
|
</lido-text>
|
|
@@ -299,7 +299,7 @@ function getContainerXml2(args) {
|
|
|
299
299
|
onEntry="this.border-radius='14px';" bg-color="" onTouch="this.speak='true';" string="${args.answer}" font-color="white"
|
|
300
300
|
font-size="1px">
|
|
301
301
|
<lido-image visible="true"
|
|
302
|
-
src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/
|
|
302
|
+
src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/audio.png"
|
|
303
303
|
width="96px">
|
|
304
304
|
</lido-image>
|
|
305
305
|
</lido-text>
|
|
@@ -329,7 +329,7 @@ function getContainerXml2(args) {
|
|
|
329
329
|
font-color="white"
|
|
330
330
|
font-size="1px">
|
|
331
331
|
<lido-image visible="true"
|
|
332
|
-
src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/
|
|
332
|
+
src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/audio.png"
|
|
333
333
|
width="100%">
|
|
334
334
|
</lido-image>
|
|
335
335
|
</lido-text>
|
|
@@ -501,7 +501,7 @@ export const word_problem = {
|
|
|
501
501
|
question2: 'George went to a store and bought some t-shirts. He went to another store and bought 2 more t-shirts. He bought a total of 15 t-shirts. How many t-shirts did he buy at the first store?',
|
|
502
502
|
answer: '13',
|
|
503
503
|
options: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
|
|
504
|
-
images: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/
|
|
504
|
+
images: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/audio.png'],
|
|
505
505
|
isAllowOnlyCorrect: true,
|
|
506
506
|
isContinueOnCorrect: true,
|
|
507
507
|
},
|
|
@@ -605,7 +605,7 @@ function getContainerXml3(args) {
|
|
|
605
605
|
: `
|
|
606
606
|
<lido-cell layout="col" visible="true" margin="landscape.22px 0px 0px 0px, portrait.-110px 0px 0px 0px" height="landscape.62%,portrait.40%" width="landscape.96%,portrait.100%" bg-color="transparent" onEntry="this.justifyContent='center';" gap="82px">
|
|
607
607
|
<lido-text id="text12" visible="true" margin="landscape.0px,portrait.0px" onEntry="this.border-radius='14px';" height="177px" width="landscape.236px,portrait.34%" bg-color="" onTouch="this.speak='true';" string="${args.answer}" font-color="white" font-size="1px">
|
|
608
|
-
<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/
|
|
608
|
+
<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/audio.png"
|
|
609
609
|
width="100%">
|
|
610
610
|
</lido-image>
|
|
611
611
|
</lido-text>
|
|
@@ -776,7 +776,7 @@ function getContainerXml5(args) {
|
|
|
776
776
|
<lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.156px 0px 0px -154px,portrait.-168px 0px 0px 0px" onEntry="this.border-radius='26px';" height="landscape.390px,portrait.42%" width="landscape.86%,portrait.100%" bg-color="transparent">
|
|
777
777
|
|
|
778
778
|
<lido-text visible="true" margin="" id="t11" onEntry="this.border-radius='14px';" bg-color="" onTouch="this.speak='true';" string="Order the numbers from smallest to largest." font-color="white" font-size="1px">
|
|
779
|
-
<lido-image type="text" margin="landscape.-244px 0px 0px 0px,portrait.0px 0px 0px 0px" id="" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/
|
|
779
|
+
<lido-image type="text" margin="landscape.-244px 0px 0px 0px,portrait.0px 0px 0px 0px" id="" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/audio.png" width="100px" height="127px" onTouch="this.speak='true'">
|
|
780
780
|
</lido-image>
|
|
781
781
|
</lido-text>
|
|
782
782
|
|
|
@@ -974,7 +974,7 @@ function getContainerXml6(args) {
|
|
|
974
974
|
onEntry="this.border-radius='14px';" bg-color="" onTouch="this.speak='true';" string="${args.question1}" font-color="white"
|
|
975
975
|
font-size="1px">
|
|
976
976
|
<lido-image visible="true"
|
|
977
|
-
src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/
|
|
977
|
+
src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/audio.png"
|
|
978
978
|
width="96px">
|
|
979
979
|
</lido-image>
|
|
980
980
|
</lido-text>
|
|
@@ -50,7 +50,7 @@ function getContainerXml(args) {
|
|
|
50
50
|
}" is-allow-only-correct="${isAllowOnlyCorrect}">
|
|
51
51
|
|
|
52
52
|
<!-- Audio -->
|
|
53
|
-
<lido-text visible="false" id="audio12" onEntry="this.display='none';" string="Drag the missing number to its correct place and complete the number puzzle."></lido-text>
|
|
53
|
+
<lido-text visible="false" id="audio12" tab-index="${tabCounter++}" onEntry="this.display='none';" string="Drag the missing number to its correct place and complete the number puzzle."></lido-text>
|
|
54
54
|
|
|
55
55
|
<!-- Chimple Avatar -->
|
|
56
56
|
<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" x="landscape.1432px,portrait.330px" y="landscape.612px, portrait.1338px" aria-hidden="true" z="9999" bg-color="transparent" visible="true" onEntry="" margin="-104px 0px 0px -54px">
|
|
@@ -37,13 +37,13 @@ function getContainerXml(args) {
|
|
|
37
37
|
const objectiveArray = missingNumber.split('');
|
|
38
38
|
const dropCells = objectiveArray
|
|
39
39
|
.map((cell, i) => `
|
|
40
|
-
<lido-text id="drop-${cell}" tab-index="${i}" disable-edit="true" height="landscape.
|
|
40
|
+
<lido-text id="drop-${cell}" tab-index="${25 + i}" disable-edit="true" height="landscape.140px, portrait.125px" width="110px" 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'; this.border='1px solid white';" >
|
|
41
41
|
</lido-text>
|
|
42
42
|
`)
|
|
43
43
|
.join('\n');
|
|
44
44
|
const dragCells = options
|
|
45
45
|
.map((digit, i) => `
|
|
46
|
-
<lido-text id="drag-${
|
|
46
|
+
<lido-text id="drag-${digit}" 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');
|
|
@@ -59,37 +59,40 @@ function getContainerXml(args) {
|
|
|
59
59
|
</lido-image>
|
|
60
60
|
</lido-cell>
|
|
61
61
|
|
|
62
|
+
<lido-text id="invisible-text" tab-index="2" audio="" width="297px" height="80px" display="flex" font-size="12px" z="1" font-color="black" value="fill the empty box with the missing numbers and complete the pattern." string="fill the empty box with the missing numbers and complete the pattern." visible="false" bg-color="transparent">
|
|
63
|
+
</lido-text>
|
|
64
|
+
|
|
62
65
|
<!-- drop cells -->
|
|
63
66
|
<lido-cell layout="row" aria-hidden="true" visible="true" height="landscape.45%,portrait.40%" width="landscape.85%, portrait.95%" bg-Color="transparent" margin="landscape.385px 0px -545px 0px,portrait.55px 0px -73px 0px" onEntry="this.z-index='1'; this.boxAnimationOneByOne='true';">
|
|
64
67
|
|
|
65
68
|
<lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';">
|
|
66
|
-
<lido-image is-slice="true" bg-color="transparent" id="drop-image0" disable-edit="true"
|
|
69
|
+
<lido-image is-slice="true" bg-color="transparent" id="drop-image0" disable-edit="true" 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
70
|
</lido-image>
|
|
68
|
-
<lido-image is-slice="true" bg-color="transparent" id="drop-
|
|
69
|
-
<lido-text id="drop-${number1}" tab-index="
|
|
71
|
+
<lido-image is-slice="true" bg-color="transparent" id="drop-image1" disable-edit="true" 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" >
|
|
72
|
+
<lido-text id="drop-${number1}" tab-index="3" disable-edit="true" height="landscape.130px, portrait.80px" width="landscape.200px, portrait.160px" 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
73
|
</lido-text>
|
|
71
74
|
</lido-image>
|
|
72
75
|
</lido-cell>
|
|
73
76
|
<lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';">
|
|
74
|
-
<lido-image is-slice="true" bg-color="transparent" id="drop-
|
|
77
|
+
<lido-image is-slice="true" bg-color="transparent" id="drop-image2" disable-edit="true" 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
78
|
</lido-image>
|
|
76
|
-
<lido-image is-slice="true" bg-color="transparent" id="drop-
|
|
77
|
-
<lido-text id="drop-${number2}" tab-index="
|
|
79
|
+
<lido-image is-slice="true" bg-color="transparent" id="drop-image3" disable-edit="true" 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" >
|
|
80
|
+
<lido-text id="drop-${number2}" tab-index="4" disable-edit="true" height="landscape.130px, portrait.80px" width="landscape.200px, portrait.160px" 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
81
|
</lido-text>
|
|
79
82
|
</lido-image>
|
|
80
83
|
</lido-cell>
|
|
81
84
|
<lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="this.boxAnimate='true';">
|
|
82
|
-
<lido-image is-slice="true" bg-color="transparent" id="drop-
|
|
85
|
+
<lido-image is-slice="true" bg-color="transparent" id="drop-image4" disable-edit="true" 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" >
|
|
83
86
|
</lido-image>
|
|
84
|
-
<lido-image is-slice="true" bg-color="transparent" id="drop-image2" disable-edit="true" tab-index="27" 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" >
|
|
87
|
+
<lido-image is-slice="true" bg-color="transparent" id="drop-image2" disable-edit="true" tab-index="27" 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" onEntry="this.gap='10px';">
|
|
85
88
|
${dropCells}
|
|
86
89
|
</lido-image>
|
|
87
90
|
</lido-cell>
|
|
88
91
|
<lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';">
|
|
89
|
-
<lido-image is-slice="true" bg-color="transparent" id="drop-
|
|
92
|
+
<lido-image is-slice="true" bg-color="transparent" id="drop-image6" disable-edit="true" 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
93
|
</lido-image>
|
|
91
|
-
<lido-image is-slice="true" bg-color="transparent" id="drop-
|
|
92
|
-
<lido-text id="drop-${number4}" tab-index="
|
|
94
|
+
<lido-image is-slice="true" bg-color="transparent" id="drop-image7" disable-edit="true" 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" >
|
|
95
|
+
<lido-text id="drop-${number4}" tab-index="5" disable-edit="true" height="landscape.130px, portrait.80px" width="landscape.200px, portrait.160px" 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
96
|
</lido-text>
|
|
94
97
|
</lido-image>
|
|
95
98
|
</lido-cell>
|
|
@@ -35,55 +35,58 @@ function getContainerXml(args) {
|
|
|
35
35
|
const isAllowOnlyCorrect = (_a = args.isAllowOnlyCorrect) !== null && _a !== void 0 ? _a : true;
|
|
36
36
|
const dragCells = options
|
|
37
37
|
.map((digit, i) => `
|
|
38
|
-
<lido-text id="drag-${
|
|
38
|
+
<lido-text id="drag-${digit}" tab-index="${50 + i}" height="landscape.130px, portrait.130px" width="landscape.225px, portrait.200px" 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';" border-image="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';"
|
|
39
39
|
onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';">
|
|
40
40
|
</lido-text>
|
|
41
41
|
`)
|
|
42
42
|
.join('\n');
|
|
43
43
|
return `
|
|
44
44
|
<main>
|
|
45
|
-
<lido-container id="lido-container" objective="${missingNumber}" 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='
|
|
45
|
+
<lido-container id="lido-container" objective="${missingNumber}" 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">
|
|
46
46
|
|
|
47
47
|
<!-- Chimple Avatar -->
|
|
48
|
-
<lido-cell layout="pos" id="pos1"
|
|
48
|
+
<lido-cell layout="pos" id="pos1" disable-edit="true" 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';">
|
|
49
49
|
<lido-avatar id="lido-avatar" disableEdit="true" visible="true" height="inherit" width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}" onEntry="">
|
|
50
50
|
</lido-avatar>
|
|
51
51
|
<lido-image id="image" disableEdit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bgColor="transparent" width="inherit" height="27px" x="landscape.-7px, portrait.-7px" y="landscape.450px, portrait.535px" altText="{shadowImage}">
|
|
52
52
|
</lido-image>
|
|
53
53
|
</lido-cell>
|
|
54
54
|
|
|
55
|
+
<lido-text id="invisible-text" tab-index="2" audio="" width="297px" height="80px" display="flex" font-size="12px" z="1" font-color="black" value="fill the empty box with the missing numbers and complete the pattern." string="fill the empty box with the missing numbers and complete the pattern." visible="false" bg-color="transparent">
|
|
56
|
+
</lido-text>
|
|
57
|
+
|
|
55
58
|
<!-- drop cells -->
|
|
56
59
|
<lido-cell layout="row" aria-hidden="true" visible="true" height="landscape.45%,portrait.40%" width="landscape.85%, portrait.95%" bg-Color="transparent" margin="landscape.385px 0px -545px 0px,portrait.55px 0px -73px 0px" onEntry="this.z-index='1'; this.boxAnimationOneByOne='true';">
|
|
57
60
|
|
|
58
61
|
<lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';">
|
|
59
|
-
<lido-image is-slice="true" bg-color="transparent" id="drop-image0" disable-edit="true"
|
|
62
|
+
<lido-image is-slice="true" bg-color="transparent" id="drop-image0" disable-edit="true" 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">
|
|
60
63
|
</lido-image>
|
|
61
|
-
<lido-image is-slice="true" bg-color="transparent" id="drop-
|
|
62
|
-
<lido-text id="drop
|
|
64
|
+
<lido-image is-slice="true" bg-color="transparent" id="drop-image1" disable-edit="true" 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" >
|
|
65
|
+
<lido-text id="drop-1" tab-index="3" 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';">
|
|
63
66
|
</lido-text>
|
|
64
67
|
</lido-image>
|
|
65
68
|
</lido-cell>
|
|
66
69
|
<lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';">
|
|
67
|
-
<lido-image is-slice="true" bg-color="transparent" id="drop-
|
|
70
|
+
<lido-image is-slice="true" bg-color="transparent" id="drop-image2" disable-edit="true" 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" >
|
|
68
71
|
</lido-image>
|
|
69
|
-
<lido-image is-slice="true" bg-color="transparent" id="drop-
|
|
70
|
-
<lido-text id="drop
|
|
72
|
+
<lido-image is-slice="true" bg-color="transparent" id="drop-image3" disable-edit="true" 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" >
|
|
73
|
+
<lido-text id="drop-2" tab-index="4" disable-edit="true" height="landscape.130px, portrait.100px" width="200px" 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';">
|
|
71
74
|
</lido-text>
|
|
72
75
|
</lido-image>
|
|
73
76
|
</lido-cell>
|
|
74
77
|
<lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="this.boxAnimate='true';">
|
|
75
|
-
<lido-image is-slice="true" bg-color="transparent" id="drop-
|
|
78
|
+
<lido-image is-slice="true" bg-color="transparent" id="drop-image4" disable-edit="true" 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" >
|
|
76
79
|
</lido-image>
|
|
77
80
|
<lido-image is-slice="true" bg-color="transparent" id="drop-image2" disable-edit="true" tab-index="27" 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" >
|
|
78
|
-
<lido-text id="drop-${missingNumber}" tab-index="${missingNumber}" disable-edit="true" height="landscape.
|
|
81
|
+
<lido-text id="drop-${missingNumber}" tab-index="${missingNumber}" disable-edit="true" height="landscape.130px, portrait.125px" width="250px" visible="true" value="${missingNumber}" 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'; this.border='1px solid white';" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png">
|
|
79
82
|
</lido-text>
|
|
80
83
|
</lido-image>
|
|
81
84
|
</lido-cell>
|
|
82
85
|
<lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';">
|
|
83
|
-
<lido-image is-slice="true" bg-color="transparent" id="drop-
|
|
86
|
+
<lido-image is-slice="true" bg-color="transparent" id="drop-image6" disable-edit="true" 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" >
|
|
84
87
|
</lido-image>
|
|
85
|
-
<lido-image is-slice="true" bg-color="transparent" id="drop-
|
|
86
|
-
<lido-text id="drop
|
|
88
|
+
<lido-image is-slice="true" bg-color="transparent" id="drop-image7" disable-edit="true" 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" >
|
|
89
|
+
<lido-text id="drop-4" tab-index="6" disable-edit="true" height="landscape.130px, portrait.100px" width="200px" 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';">
|
|
87
90
|
</lido-text>
|
|
88
91
|
</lido-image>
|
|
89
92
|
</lido-cell>
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import { html } from "lit";
|
|
2
|
+
const meta = {
|
|
3
|
+
title: 'Templates/substractionWithimg',
|
|
4
|
+
argTypes: {
|
|
5
|
+
option1: { control: 'text' },
|
|
6
|
+
option2: { control: 'text' },
|
|
7
|
+
option3: { control: 'text' },
|
|
8
|
+
option4: { control: 'text' },
|
|
9
|
+
text1: { control: 'text' },
|
|
10
|
+
text2: { control: 'text' },
|
|
11
|
+
answer: { control: 'text' },
|
|
12
|
+
isAllowOnlyCorrect: { control: 'boolean' },
|
|
13
|
+
},
|
|
14
|
+
};
|
|
15
|
+
export default meta;
|
|
16
|
+
export const substractionWithimg = {
|
|
17
|
+
args: {
|
|
18
|
+
option1: "2",
|
|
19
|
+
option2: "3",
|
|
20
|
+
option3: "8",
|
|
21
|
+
option4: "4",
|
|
22
|
+
isAllowOnlyCorrect: true,
|
|
23
|
+
text1: "5",
|
|
24
|
+
text2: "2",
|
|
25
|
+
answer: "3",
|
|
26
|
+
},
|
|
27
|
+
render: args => {
|
|
28
|
+
const xml = getContainerXml(args);
|
|
29
|
+
return html `<lido-home .xmlData="${xml}"></lido-home>`;
|
|
30
|
+
},
|
|
31
|
+
};
|
|
32
|
+
function generateImages(count, src) {
|
|
33
|
+
let images = '';
|
|
34
|
+
for (let i = 0; i < Number(count); i++) {
|
|
35
|
+
images += `
|
|
36
|
+
<lido-image
|
|
37
|
+
visible="true"
|
|
38
|
+
height="100px"
|
|
39
|
+
width="100px"
|
|
40
|
+
src="${src}">
|
|
41
|
+
</lido-image>
|
|
42
|
+
`;
|
|
43
|
+
}
|
|
44
|
+
return images;
|
|
45
|
+
}
|
|
46
|
+
const SOLID_IMAGE = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/pal-Subtraction/image5.png';
|
|
47
|
+
const OUTLINE_IMAGE = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/aplle%20outlinee.png';
|
|
48
|
+
function getContainerXml(args) {
|
|
49
|
+
let tabCounter = 1;
|
|
50
|
+
const { isAllowOnlyCorrect = true } = args;
|
|
51
|
+
const solidText1Images = generateImages(args.answer, SOLID_IMAGE);
|
|
52
|
+
const solidText2Images = generateImages(args.text2, SOLID_IMAGE);
|
|
53
|
+
const actualAddImages = generateImages(args.answer, SOLID_IMAGE);
|
|
54
|
+
const actualMinusImages = generateImages(args.text2, OUTLINE_IMAGE);
|
|
55
|
+
return `<main>
|
|
56
|
+
<lido-container visible="true" id="lido-container" template-id="mcq" objective="${args.answer}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/pal-Subtraction/Frame.png" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}" onEntry="solid.z-index='2';this.sleep='1000';text2.animation='placeToRight 2s linear';this.sleep='1000';actual.z-index='10';">
|
|
57
|
+
|
|
58
|
+
<!-- Chimple Avatar -->
|
|
59
|
+
<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.344px,portrait.402px" width="landscape.296px,portrait.398px" x="landscape.83%, portrait.28%" y="landscape.40%, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" >
|
|
60
|
+
<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}">
|
|
61
|
+
</lido-avatar>
|
|
62
|
+
</lido-cell>
|
|
63
|
+
<lido-text visible="false" id="inst" tab-index="1" string="choose the correct option"></lido-text>
|
|
64
|
+
<lido-cell visible="true" id="solid" layout="row" width="auto" bg-color="#FFF5BB" y="14%" onEntry="this.padding='10px 18px 10px 18px';this.position='relative';this.justifyContent='space-around';this.border='2px solid #FFA500'; this.borderRadius='16px';this.gap='0px';">
|
|
65
|
+
<lido-cell layout="row" id="text1" visible="true">
|
|
66
|
+
${solidText1Images}
|
|
67
|
+
</lido-cell>
|
|
68
|
+
<lido-cell layout="row" visible="true" id="text2" bg-color="transparent">
|
|
69
|
+
${solidText2Images}
|
|
70
|
+
</lido-cell>
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
</lido-cell>
|
|
74
|
+
<lido-cell visible="true" id="actual" layout="row" width="auto" bg-color="#FFF5BB" onEntry="this.padding='10px 18px 10px 18px';this.justifyContent='space-around';this.border='2px solid #FFA500'; this.borderRadius='16px';this.gap='0px';">
|
|
75
|
+
<lido-cell visible="true" id="add" layout="row">
|
|
76
|
+
${actualAddImages}
|
|
77
|
+
</lido-cell>
|
|
78
|
+
<lido-cell visible="true" id="minus" layout="row">
|
|
79
|
+
${actualMinusImages}
|
|
80
|
+
</lido-cell>
|
|
81
|
+
</lido-cell>
|
|
82
|
+
|
|
83
|
+
<lido-cell visible="true" layout="col" height="58%" width="90%" bg-color="transparent" y="0%" onEntry="this.align-items='center';this.justify-content='space-around';this.position='relative';" >
|
|
84
|
+
|
|
85
|
+
<lido-cell layout="row" visible="true" height="400px" width="825px" onEntry="this.align-items='center'; this.justify-content='space-around';">
|
|
86
|
+
<lido-text visible="true" id="text1" tab-index="2" string="${args.text1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" bg-color="transparent"
|
|
87
|
+
onEntry="this.fontWeight='700';"></lido-text>
|
|
88
|
+
<lido-text visible="true" id="text2" tab-index="3" string="-" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" bg-color="transparent"
|
|
89
|
+
onEntry="this.fontWeight='700';"></lido-text>
|
|
90
|
+
<lido-text visible="true" id="text3" tab-index="4" string="${args.text2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" bg-color="transparent"
|
|
91
|
+
onEntry="this.fontWeight='700';"></lido-text>
|
|
92
|
+
<lido-text visible="true" id="text4" tab-index="5" string="=" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" bg-color="transparent"
|
|
93
|
+
onEntry="this.fontWeight='700';"></lido-text>
|
|
94
|
+
<lido-text visible="true" id="answer" tab-index="6" height="184px" width="130px" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" bg-color="#FFF5BBB2" value="2"
|
|
95
|
+
onEntry="this.fontWeight='700';this.border='2px solid #FFB612';this.border-radius='16px';" ></lido-text>
|
|
96
|
+
|
|
97
|
+
</lido-cell>
|
|
98
|
+
<lido-cell layout="row" visible="true" width="84%" height="300px">
|
|
99
|
+
<lido-text visible="true" value="${args.option1}" type="click" id="option1" tab-index="8" bg-color="#FFAC4C" height="212.4px" width="280px" string="${args.option1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
|
|
100
|
+
<lido-text visible="true" value="${args.option2}" type="click" id="option2" tab-index="9" bg-color="#FFAC4C" height="212.4px" width="280px" string="${args.option2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
|
|
101
|
+
<lido-text visible="true" value="${args.option3}" type="click" id="option3" tab-index="10" bg-color="#FFAC4C" height="212.4px" width="280px" string="${args.option3}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
|
|
102
|
+
<lido-text visible="true" type="click" value="${args.option4}" id="option4" tab-index="11" bg-color="#FFAC4C" height="212.4px" width="280px" string="${args.option4}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
</lido-cell>
|
|
107
|
+
</lido-cell>
|
|
108
|
+
|
|
109
|
+
</lido-container>
|
|
110
|
+
</main>`;
|
|
111
|
+
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { html } from "lit";
|
|
2
|
+
const meta = {
|
|
3
|
+
title: 'Templates/substractionWithoutImg',
|
|
4
|
+
argTypes: {
|
|
5
|
+
text1: { control: 'text' },
|
|
6
|
+
text2: { control: 'text' },
|
|
7
|
+
answers: { control: 'text' },
|
|
8
|
+
isAllowOnlyCorrect: { control: 'boolean' },
|
|
9
|
+
},
|
|
10
|
+
};
|
|
11
|
+
export default meta;
|
|
12
|
+
export const substractionWithoutImg = {
|
|
13
|
+
args: {
|
|
14
|
+
text1: "36",
|
|
15
|
+
text2: "12",
|
|
16
|
+
answers: "2,4",
|
|
17
|
+
isAllowOnlyCorrect: true,
|
|
18
|
+
},
|
|
19
|
+
render: args => {
|
|
20
|
+
const xml = getContainerXml(args);
|
|
21
|
+
return html `<lido-home .xmlData="${xml}"></lido-home>`;
|
|
22
|
+
},
|
|
23
|
+
};
|
|
24
|
+
function getContainerXml(args) {
|
|
25
|
+
const { isAllowOnlyCorrect = true } = args;
|
|
26
|
+
let tabCounter = 1;
|
|
27
|
+
return `<main>
|
|
28
|
+
<lido-container drop-action="infinite-drop" visible="true" template-id="dragAnDrop" id="lido-container" objective="${args.answers}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/pal-Subtraction/Frame.png" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}" onEntry="inst.speak='true';text1.speak='true';text2.speak='true';text3.speak='true';text4.speak='true';">
|
|
29
|
+
|
|
30
|
+
<!-- Chimple Avatar -->
|
|
31
|
+
<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.344px,portrait.402px" width="landscape.296px,portrait.398px" x="landscape.83%, portrait.28%" y="landscape.40%, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" >
|
|
32
|
+
<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}">
|
|
33
|
+
</lido-avatar>
|
|
34
|
+
</lido-cell>
|
|
35
|
+
<lido-text visible="false" id="inst" tab-index="1" string="drag and drop the correct option"></lido-text>
|
|
36
|
+
|
|
37
|
+
<lido-cell visible="true" layout="col" height="95%" width="90%" bg-color="transparent" y="9%" onEntry="this.align-items='center';this.justify-content='space-around';this.position='relative';" >
|
|
38
|
+
<lido-cell layout="row" visible="true" height="400px" width="825px" onEntry="this.align-items='center'; this.justify-content='space-around';">
|
|
39
|
+
<lido-text visible="true" id="text1" tab-index="2" string="${args.text1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" bg-color="transparent"
|
|
40
|
+
onEntry="this.fontWeight='700';"></lido-text>
|
|
41
|
+
<lido-text visible="true" id="text2" tab-index="3" string="-" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" bg-color="transparent"
|
|
42
|
+
onEntry="this.fontWeight='700';"></lido-text>
|
|
43
|
+
<lido-text visible="true" id="text3" tab-index="4" string="${args.text2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" bg-color="transparent"
|
|
44
|
+
onEntry="this.fontWeight='700';"></lido-text>
|
|
45
|
+
<lido-text visible="true" id="text4" tab-index="5" string="=" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" bg-color="transparent"
|
|
46
|
+
onEntry="this.fontWeight='700';"></lido-text>
|
|
47
|
+
<lido-text visible="true" id="drop1" type="drop" tab-index="6" height="212px" width="130px" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" bg-color="#FFF5BBB2" value="2"
|
|
48
|
+
onEntry="this.fontWeight='700';this.border='2px solid #FFB612';this.border-radius='16px';" ></lido-text>
|
|
49
|
+
<lido-text visible="true" type="drop" value="4" id="drop2" tab-index="7" height="212px" width="130px" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" bg-color="#FFF5BBB2"
|
|
50
|
+
onEntry="this.fontWeight='700';this.border='2px solid #FFB612';this.border-radius='16px';" ></lido-text>
|
|
51
|
+
</lido-cell>
|
|
52
|
+
<lido-cell layout="row" visible="true" width="108%" height="300px">
|
|
53
|
+
<lido-text visible="true" type="drag" id="option1" tab-index="8" bg-color="#FFAC4C" height="212px" width="130px" string="0" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
|
|
54
|
+
<lido-text visible="true" value="1" type="drag" id="option2" tab-index="9" bg-color="#FFAC4C" height="212px" width="130px" string="1" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
|
|
55
|
+
<lido-text visible="true" value="2" type="drag" id="option3" tab-index="10" bg-color="#FFAC4C" height="212px" width="130px" string="2" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
|
|
56
|
+
<lido-text visible="true" type="drag" value="3" id="option4" tab-index="11" bg-color="#FFAC4C" height="212px" width="130px" string="3" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
|
|
57
|
+
<lido-text visible="true" type="drag" value="4" id="option5" tab-index="12" bg-color="#FFAC4C" height="212px" width="130px" string="4" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
|
|
58
|
+
<lido-text visible="true" type="drag" value="5" id="option6" tab-index="13" bg-color="#FFAC4C" height="212px" width="130px" string="5" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
|
|
59
|
+
<lido-text visible="true" type="drag" id="option7" value="6" tab-index="14" bg-color="#FFAC4C" height="212px" width="130px" string="6" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
|
|
60
|
+
<lido-text visible="true" type="drag" value="7" id="option8" tab-index="15" bg-color="#FFAC4C" height="212px" width="130px" string="7" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
|
|
61
|
+
<lido-text visible="true" value="8" type="drag" id="option9" tab-index="16" bg-color="#FFAC4C" height="212px" width="130px" string="8" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
|
|
62
|
+
<lido-text visible="true" value="9" type="drag" id="option10" tab-index="17" bg-color="#FFAC4C" height="212px" width="130px" string="9" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
</lido-cell>
|
|
66
|
+
</lido-cell>
|
|
67
|
+
|
|
68
|
+
</lido-container>
|
|
69
|
+
</main>`;
|
|
70
|
+
}
|
|
@@ -79,6 +79,10 @@ function getContainerXml(args) {
|
|
|
79
79
|
</lido-avatar>
|
|
80
80
|
</lido-cell>
|
|
81
81
|
|
|
82
|
+
<!-- speaking element-->
|
|
83
|
+
<lido-text id="speak-text" tab-index="2" height="100%" width="100%" visible="false" string="solve the problem by counting the teddys above and drag the correct answer" font-family="'Baloo Bhai 2'" font-color="red" font-size="75px" bg-color="transparent" onInCorrect="" onEntry="this.opacity='0'; this.speak='true';" border-image="">
|
|
84
|
+
</lido-text>
|
|
85
|
+
|
|
82
86
|
<!-- top section -->
|
|
83
87
|
<lido-cell layout="landscape.row,portrait.wrap" id="top-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.5%" width="landscape.100%, portrait.106%" bg-Color="transparent" margin="landscape.100px 0px 0px 0px,portrait.-130px -65px 0px 0px" onEntry="this.z-index='1'; this.justify-content='center';" gap="landscape.35px,portrait.5px">
|
|
84
88
|
${topImageCells}
|
|
@@ -86,16 +90,16 @@ function getContainerXml(args) {
|
|
|
86
90
|
|
|
87
91
|
<!-- question row-->
|
|
88
92
|
<lido-cell layout="row" id="question-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.15%" width="landscape.65%, portrait.90%" bg-Color="transparent" margin="landscape.185px 0px 30px 0px,portrait.25px 0px -120px 0px" onEntry="this.z-index='1'; this.justify-content='center';" gap="landscape.90px,portrait.40px">
|
|
89
|
-
<lido-text id="num-${number1}" tab-index="
|
|
93
|
+
<lido-text id="num-${number1}" tab-index="3" height="215px" width="120px" visible="true" value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px" bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="">
|
|
90
94
|
</lido-text>
|
|
91
|
-
<lido-text id="operator-${sign}" tab-index="
|
|
95
|
+
<lido-text id="operator-${sign}" tab-index="4" height="295px" width="120px" visible="true" value="${sign}" string="${sign}" font-family="'Baloo Bhai 2'" font-color="black" font-size="195px" bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="">
|
|
92
96
|
</lido-text>
|
|
93
|
-
<lido-text id="num-${number2}" tab-index="
|
|
97
|
+
<lido-text id="num-${number2}" tab-index="5" height="215px" width="120px" visible="true" value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px" bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="">
|
|
94
98
|
</lido-text>
|
|
95
|
-
<lido-text id="equal" tab-index="
|
|
99
|
+
<lido-text id="equal" tab-index="6" height="215px" width="120px" visible="true" value="=" string="=" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px" bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="">
|
|
96
100
|
</lido-text>
|
|
97
|
-
<lido-image is-slice="true" height="225px" width="175px" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png" onEntry="this.opacity='0';"
|
|
98
|
-
<lido-text id="number-${answer}" height="225px" width="175px" visible="true" tab-index="
|
|
101
|
+
<lido-image is-slice="true" height="225px" width="175px" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png" onEntry="this.opacity='0';">
|
|
102
|
+
<lido-text id="number-${answer}" height="225px" width="175px" visible="true" tab-index="7" value="${answer}" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px" type="drop" bg-color="transparent" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';">
|
|
99
103
|
</lido-text>
|
|
100
104
|
</lido-image>
|
|
101
105
|
</lido-cell>
|
|
@@ -105,10 +109,7 @@ function getContainerXml(args) {
|
|
|
105
109
|
<lido-cell layout="landscape.row, portrait.wrap" id="option-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.5%" width="landscape.90%, portrait.106%" bg-Color="transparent" margin="landscape.65px 0px 65px 0px,portrait.-160px -65px 500px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.opacity='0';" gap="landscape.20px,portrait.5px">
|
|
106
110
|
${dragCells}
|
|
107
111
|
</lido-cell>
|
|
108
|
-
|
|
109
|
-
<!-- speaking element-->
|
|
110
|
-
<lido-text id="speak-text" tab-index="20" height="100%" width="100%" visible="false" string="solve the problem by counting the teddys above and drag the correct answer" font-family="'Baloo Bhai 2'" font-color="red" font-size="75px" bg-color="transparent" onInCorrect="" onEntry="this.opacity='0'; this.speak='true';" border-image="">
|
|
111
|
-
</lido-text>
|
|
112
|
+
|
|
112
113
|
</lido-container>
|
|
113
114
|
</main>
|
|
114
115
|
`;
|
|
@@ -36,6 +36,8 @@ function getContainerXml(args) {
|
|
|
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}">
|
|
37
37
|
</lido-avatar>
|
|
38
38
|
</lido-cell>
|
|
39
|
+
<lido-text visible="false" audio="" onEntry="this.speak='true';" bg-color="red" string="Count the number of objects in the left and click the number on the number board">
|
|
40
|
+
</lido-text>
|
|
39
41
|
|
|
40
42
|
<!-- Main Layout -->
|
|
41
43
|
<lido-cell layout="landscape.row,portrait.col" y="landscape.3%,portrait.0px" onEntry="this.position='relative';" visible="true" width="90%" height="90%" bg-color="transparent">
|