lido-player 0.0.2-alpha-51-dev → 0.0.2-alpha-53-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.
Files changed (143) hide show
  1. package/dist/cjs/index.cjs.js +1 -1
  2. package/dist/cjs/lido-avatar_22.cjs.entry.js +199 -73
  3. package/dist/cjs/lido-player.cjs.js +1 -1
  4. package/dist/cjs/loader.cjs.js +1 -1
  5. package/dist/cjs/{utils-dc02d753.js → utils-3c1ce74e.js} +236 -101
  6. package/dist/collection/components/avatar/lido-avatar.js +1 -1
  7. package/dist/collection/components/canvas/lido-canvas.css +5 -8
  8. package/dist/collection/components/canvas/lido-canvas.js +2 -2
  9. package/dist/collection/components/cell/lido-cell.js +1 -1
  10. package/dist/collection/components/column/lido-col.js +1 -1
  11. package/dist/collection/components/container/lido-container.js +24 -2
  12. package/dist/collection/components/flashCard/lido-flash-card.js +1 -1
  13. package/dist/collection/components/home/lido-home.css +4 -0
  14. package/dist/collection/components/home/lido-home.js +27 -3
  15. package/dist/collection/components/mathMatrix/lido-math-matrix.js +14 -14
  16. package/dist/collection/components/position/lido-pos.js +1 -1
  17. package/dist/collection/components/random/lido-random.js +1 -1
  18. package/dist/collection/components/row/lido-row.js +1 -1
  19. package/dist/collection/components/shape/lido-shape.js +1 -1
  20. package/dist/collection/components/trace/lido-trace.js +122 -47
  21. package/dist/collection/components/wrap/lido-wrap.js +1 -1
  22. package/dist/collection/stories/Templates/Fill-Up/fill-up.stories.js +26 -25
  23. package/dist/collection/stories/Templates/LetterPairing/LetterPairing.stories.js +3 -1
  24. package/dist/collection/stories/Templates/RocketGame/rocketGame.stories.js +1 -1
  25. package/dist/collection/stories/Templates/arrangeLetters/arrangeLetters.stories.js +1 -1
  26. package/dist/collection/stories/Templates/balancing/balancing.stories.js +1 -1
  27. package/dist/collection/stories/Templates/blender/blender.stories.js +100 -0
  28. package/dist/collection/stories/Templates/bubbleType/bubbleType.stories.js +1 -1
  29. package/dist/collection/stories/Templates/calculator/calculator.stories.js +6 -2
  30. package/dist/collection/stories/Templates/checker-block/checkerBlock.stories.js +1 -1
  31. package/dist/collection/stories/Templates/checkerBlock/checkerBlock.stories.js +1 -1
  32. package/dist/collection/stories/Templates/create-sentence/createSentence.stories.js +1 -1
  33. package/dist/collection/stories/Templates/fillAnswer/fill-answer.stories.js +3 -2
  34. package/dist/collection/stories/Templates/fillBlank/fill-blank.stories.js +1 -1
  35. package/dist/collection/stories/Templates/foodJar/food-jar.stories.js +3 -1
  36. package/dist/collection/stories/Templates/grid/grid.stories.js +5 -1
  37. package/dist/collection/stories/Templates/gridGame/grid-game.stories.js +1 -1
  38. package/dist/collection/stories/Templates/jumpSentence/jumpSentence.stories.js +4 -2
  39. package/dist/collection/stories/Templates/letterboard/letterboard.stories.js +1 -1
  40. package/dist/collection/stories/Templates/matchingCard/matching-card.stories.js +3 -1
  41. package/dist/collection/stories/Templates/multipleOption/mcqWithQuestionImage.stories.js +4 -2
  42. package/dist/collection/stories/Templates/multipleOption/multiple-option.stories.js +1 -1
  43. package/dist/collection/stories/Templates/multiplyBeeds/multiplyBeeds.stories.js +1 -1
  44. package/dist/collection/stories/Templates/nimbleTable/nimbleTable.stories.js +1 -1
  45. package/dist/collection/stories/Templates/numberBoard/numberBoard.stories.js +1 -1
  46. package/dist/collection/stories/Templates/numberBoardTwo/numberBoardTwo.stories.js +6 -4
  47. package/dist/collection/stories/Templates/numberPair/numberPair.stories.js +1 -1
  48. package/dist/collection/stories/Templates/openwindow/openwindow.stories.js +2 -2
  49. package/dist/collection/stories/Templates/openwindow/openwindow2.stories.js +2 -2
  50. package/dist/collection/stories/Templates/order-tractor/order-tractor-ascending-order.stories.js +14 -13
  51. package/dist/collection/stories/Templates/order-tractor/order-tractor.stories.js +14 -13
  52. package/dist/collection/stories/Templates/phonic-tractor/phonic-tractor.stories.js +1 -1
  53. package/dist/collection/stories/Templates/picturemeaning/pictureMeaningCocos.stories.js +5 -1
  54. package/dist/collection/stories/Templates/questionBoard/questionBoard.stories.js +1 -1
  55. package/dist/collection/stories/Templates/quizLiteracy/quizLiteracy.stories.js +1 -1
  56. package/dist/collection/stories/Templates/quizLiteracy/quizLiteracyImageWithText.stories.js +1 -1
  57. package/dist/collection/stories/Templates/quizLiteracy/quizLiteracyImageWord.stories.js +1 -1
  58. package/dist/collection/stories/Templates/reorder/reorder.stories.js +3 -1
  59. package/dist/collection/stories/Templates/rowBlocks/rowBlocks.stories.js +2 -2
  60. package/dist/collection/stories/Templates/sequenceBox/sequenceBox1.stories.js +6 -6
  61. package/dist/collection/stories/Templates/sequenceBox/sequenceBox2.stories.js +7 -6
  62. package/dist/collection/stories/Templates/shapePair/shape-pair.stories.js +1 -1
  63. package/dist/collection/stories/Templates/shapeTractor/shape-tractor.stories.js +25 -21
  64. package/dist/collection/stories/Templates/spellDoor/spellDoor.stories.js +1 -1
  65. package/dist/collection/stories/Templates/sumTogether/sumTogether.stories.js +8 -6
  66. package/dist/collection/stories/Templates/total/total.stories.js +1 -1
  67. package/dist/collection/stories/Templates/writeCard/writeCard.stories.js +1 -1
  68. package/dist/collection/stories/Templates/writeLetter/writeLetter.stories.js +2 -2
  69. package/dist/collection/stories/Templates/writeNumber/writeNumber.stories.js +6 -6
  70. package/dist/collection/stories/Templates/writeSet/writeSet.stories.js +1 -1
  71. package/dist/collection/stories/Templates/writeWord/writeWord.stories.js +7 -6
  72. package/dist/collection/utils/utils.js +155 -27
  73. package/dist/collection/utils/utilsHandlers/animationHandler.js +38 -0
  74. package/dist/collection/utils/utilsHandlers/clickHandler.js +5 -1
  75. package/dist/collection/utils/utilsHandlers/dragDropHandler.js +29 -64
  76. package/dist/collection/utils/utilsHandlers/slideHandler.js +7 -6
  77. package/dist/collection/utils/utilsHandlers/sortHandler.js +3 -5
  78. package/dist/components/index.js +1 -1
  79. package/dist/components/lido-avatar.js +1 -1
  80. package/dist/components/lido-balance.js +1 -1
  81. package/dist/components/lido-calculator.js +1 -1
  82. package/dist/components/lido-canvas.js +2 -2
  83. package/dist/components/lido-cell.js +1 -1
  84. package/dist/components/lido-col.js +1 -1
  85. package/dist/components/lido-container.js +1 -1
  86. package/dist/components/lido-flash-card.js +1 -1
  87. package/dist/components/lido-float.js +1 -1
  88. package/dist/components/lido-home.js +1 -1
  89. package/dist/components/lido-image.js +1 -1
  90. package/dist/components/lido-keyboard.js +1 -1
  91. package/dist/components/lido-math-matrix.js +1 -1
  92. package/dist/components/lido-pos.js +1 -1
  93. package/dist/components/lido-random.js +1 -1
  94. package/dist/components/lido-root.js +23 -23
  95. package/dist/components/lido-row.js +1 -1
  96. package/dist/components/lido-shape.js +1 -1
  97. package/dist/components/lido-slide-fill.js +1 -1
  98. package/dist/components/lido-text.js +1 -1
  99. package/dist/components/lido-trace.js +1 -1
  100. package/dist/components/lido-wrap.js +1 -1
  101. package/dist/components/{p-56c8f3da.js → p-004adc43.js} +3 -3
  102. package/dist/components/{p-c8815e84.js → p-057fb7b8.js} +48 -24
  103. package/dist/components/{p-bb907e43.js → p-0733b277.js} +2 -2
  104. package/dist/components/{p-6ba0f1af.js → p-09b3b152.js} +1 -1
  105. package/dist/components/{p-74b90a9c.js → p-23549651.js} +8 -8
  106. package/dist/components/{p-d7693f47.js → p-3e8ae1c5.js} +123 -48
  107. package/dist/components/{p-6be6c5eb.js → p-3f0e4436.js} +2 -2
  108. package/dist/components/{p-d0131159.js → p-511377d2.js} +236 -102
  109. package/dist/components/{p-a8724f06.js → p-561908ec.js} +2 -2
  110. package/dist/components/{p-1c84cf65.js → p-567983a9.js} +13 -7
  111. package/dist/components/{p-b89371ac.js → p-6beee44b.js} +1 -1
  112. package/dist/components/{p-1f3c2783.js → p-71ded596.js} +2 -2
  113. package/dist/components/{p-0fbeb3a1.js → p-73e3f0f4.js} +12 -6
  114. package/dist/components/{p-b7efadad.js → p-875c1411.js} +2 -2
  115. package/dist/components/{p-4fd6b588.js → p-8774f517.js} +2 -2
  116. package/dist/components/{p-04e904b5.js → p-90f7dd48.js} +1 -1
  117. package/dist/components/{p-caa05d1e.js → p-92b9ae9e.js} +2 -2
  118. package/dist/components/{p-e9548986.js → p-9ea1a67d.js} +26 -4
  119. package/dist/components/{p-bef96764.js → p-b3e67e7f.js} +2 -2
  120. package/dist/components/{p-988477ad.js → p-cca545f9.js} +2 -2
  121. package/dist/components/{p-d3f7d561.js → p-d2fe2bb6.js} +2 -2
  122. package/dist/components/{p-12432f23.js → p-d568d595.js} +1 -1
  123. package/dist/components/{p-62d2a5b3.js → p-df1af62c.js} +2 -2
  124. package/dist/esm/index.js +1 -1
  125. package/dist/esm/lido-avatar_22.entry.js +199 -73
  126. package/dist/esm/lido-player.js +1 -1
  127. package/dist/esm/loader.js +1 -1
  128. package/dist/esm/{utils-b5eb2360.js → utils-eefe4a1c.js} +236 -102
  129. package/dist/lido-player/index.esm.js +1 -1
  130. package/dist/lido-player/lido-player.esm.js +1 -1
  131. package/dist/lido-player/p-4d9ad047.entry.js +1 -0
  132. package/dist/lido-player/{p-9fd87d44.js → p-589fc3b8.js} +2 -2
  133. package/dist/types/components/canvas/lido-canvas.d.ts +1 -1
  134. package/dist/types/components/container/lido-container.d.ts +1 -0
  135. package/dist/types/components/home/lido-home.d.ts +1 -0
  136. package/dist/types/components/mathMatrix/lido-math-matrix.d.ts +0 -1
  137. package/dist/types/components/trace/lido-trace.d.ts +1 -0
  138. package/dist/types/components.d.ts +0 -6
  139. package/dist/types/stories/Templates/blender/blender.stories.d.ts +4 -0
  140. package/dist/types/utils/utils.d.ts +1 -1
  141. package/dist/types/utils/utilsHandlers/animationHandler.d.ts +1 -0
  142. package/package.json +1 -1
  143. package/dist/lido-player/p-e1a9c26f.entry.js +0 -1
@@ -37,19 +37,19 @@ function getContainerXml(args) {
37
37
  const objectiveArray = missingNumber.split('');
38
38
  const dropCells = objectiveArray
39
39
  .map((cell, i) => `
40
- <lido-text id="${cell}" tab-index="${i}" disable-edit="true" height="landscape.165px, portrait.125px" width="125px" visible="true" value="${cell}" string="?" font-family="'Baloo Bhai 2'" font-color="#FFC805" type="drop" font-size="landscape.130px, portrait.100px" bg-color="transparent" onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px';" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png">
40
+ <lido-text id="drop-${cell}" tab-index="${i}" disable-edit="true" height="landscape.165px, portrait.125px" width="125px" visible="true" value="${cell}" string="?" font-family="'Baloo Bhai 2'" font-color="#FFC805" type="drop" font-size="landscape.130px, portrait.100px" bg-color="transparent" onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px';" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png">
41
41
  </lido-text>
42
42
  `)
43
43
  .join('\n');
44
44
  const dragCells = options
45
45
  .map((digit, i) => `
46
- <lido-text id="${i}" tab-index="${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="">
46
+ <lido-text id="drag-${i}" tab-index="${50 + i}" height="landscape.170px, portrait.125px" width="landscape.125px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="drag" font-size="104px" bg-color="#FFF4CD" onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.flex-shrink='0';" border-image="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';">
47
47
  </lido-text>
48
48
  `)
49
49
  .join('\n');
50
50
  return `
51
51
  <main>
52
- <lido-container id="lido-container" objective="${objectiveString}" tab-index="1" show-drop-border="false" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.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">
52
+ <lido-container id="lido-container" objective="${objectiveString}" tab-index="1" show-drop-border="false" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Sequence%20box.png" height="100%" width="100%" bg-color="transparent" visible="true" onCorrect="this.questionBoxAnimate='true'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false">
53
53
 
54
54
  <!-- Chimple Avatar -->
55
55
  <lido-cell layout="pos" id="pos1" disableEdit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.600px, portrait.230px" y="landscape.45px, portrait.1010px" ariaHidden="true" z="1" bgColor="transparent" visible="true" onEntry="this.flex-shrink='0';">
@@ -66,7 +66,7 @@ function getContainerXml(args) {
66
66
  <lido-image is-slice="true" bg-color="transparent" id="drop-image0" disable-edit="true" tab-index="20" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px">
67
67
  </lido-image>
68
68
  <lido-image is-slice="true" bg-color="transparent" id="drop-image0" disable-edit="true" tab-index="21" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
69
- <lido-text id="${number1}" tab-index="${number1}" disable-edit="true" height="landscape.130px portrait.100px" width="200px" visible="true" value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px" bg-color="transparent" onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
69
+ <lido-text id="drop-${number1}" tab-index="${number1}" disable-edit="true" height="landscape.130px portrait.100px" width="200px" visible="true" value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px" bg-color="transparent" onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
70
70
  </lido-text>
71
71
  </lido-image>
72
72
  </lido-cell>
@@ -74,7 +74,7 @@ function getContainerXml(args) {
74
74
  <lido-image is-slice="true" bg-color="transparent" id="drop-image1" disable-edit="true" tab-index="23" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
75
75
  </lido-image>
76
76
  <lido-image is-slice="true" bg-color="transparent" id="drop-image1" disable-edit="true" tab-index="24" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
77
- <lido-text id="${number2}" tab-index="${number2}" disable-edit="true" height="landscape.130px portrait.100px" width="125px" visible="true" value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px" bg-color="transparent" onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
77
+ <lido-text id="drop-${number2}" tab-index="${number2}" disable-edit="true" height="landscape.130px portrait.100px" width="125px" visible="true" value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px" bg-color="transparent" onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
78
78
  </lido-text>
79
79
  </lido-image>
80
80
  </lido-cell>
@@ -89,7 +89,7 @@ function getContainerXml(args) {
89
89
  <lido-image is-slice="true" bg-color="transparent" id="drop-image3" disable-edit="true" tab-index="30" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
90
90
  </lido-image>
91
91
  <lido-image is-slice="true" bg-color="transparent" id="drop-image3" disable-edit="true" tab-index="31" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
92
- <lido-text id="${number4}" tab-index="${number4}" disable-edit="true" height="landscape.130px portrait.100px" width="125px" visible="true" value="${number4}" string="${number4}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px" bg-color="transparent" onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
92
+ <lido-text id="drop-${number4}" tab-index="${number4}" disable-edit="true" height="landscape.130px portrait.100px" width="125px" visible="true" value="${number4}" string="${number4}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px" bg-color="transparent" onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
93
93
  </lido-text>
94
94
  </lido-image>
95
95
  </lido-cell>
@@ -35,13 +35,14 @@ 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="${i}" tab-index="${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="">
38
+ <lido-text id="drag-${i}" tab-index="${100 + 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
+ onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';">
39
40
  </lido-text>
40
41
  `)
41
42
  .join('\n');
42
43
  return `
43
44
  <main>
44
- <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/trace/Underwater.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='20000';" drop-action="infinite-drop" show-check="false">
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='20000';" drop-action="infinite-drop" show-check="false">
45
46
 
46
47
  <!-- Chimple Avatar -->
47
48
  <lido-cell layout="pos" id="pos1" disableEdit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.600px, portrait.230px" y="landscape.45px, portrait.1010px" ariaHidden="true" z="1" bgColor="transparent" visible="true" onEntry="this.flex-shrink='0';">
@@ -58,7 +59,7 @@ function getContainerXml(args) {
58
59
  <lido-image is-slice="true" bg-color="transparent" id="drop-image0" disable-edit="true" tab-index="20" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px">
59
60
  </lido-image>
60
61
  <lido-image is-slice="true" bg-color="transparent" id="drop-image0" disable-edit="true" tab-index="21" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
61
- <lido-text id="${number1}" tab-index="${number1}" disable-edit="true" height="landscape.130px, portrait.100px" width="200px" visible="true" value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px" bg-color="transparent" onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
62
+ <lido-text id="drop-${number1}" tab-index="${number1}" disable-edit="true" height="landscape.130px, portrait.100px" width="200px" visible="true" value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px" bg-color="transparent" onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
62
63
  </lido-text>
63
64
  </lido-image>
64
65
  </lido-cell>
@@ -66,7 +67,7 @@ function getContainerXml(args) {
66
67
  <lido-image is-slice="true" bg-color="transparent" id="drop-image1" disable-edit="true" tab-index="23" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
67
68
  </lido-image>
68
69
  <lido-image is-slice="true" bg-color="transparent" id="drop-image1" disable-edit="true" tab-index="24" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
69
- <lido-text id="${number2}" tab-index="${number2}" disable-edit="true" height="landscape.130px, portrait.100px" width="125px" visible="true" value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px" bg-color="transparent" onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
70
+ <lido-text id="drop-${number2}" tab-index="${number2}" disable-edit="true" height="landscape.130px, portrait.100px" width="125px" visible="true" value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px" bg-color="transparent" onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
70
71
  </lido-text>
71
72
  </lido-image>
72
73
  </lido-cell>
@@ -74,7 +75,7 @@ function getContainerXml(args) {
74
75
  <lido-image is-slice="true" bg-color="transparent" id="drop-image2" disable-edit="true" tab-index="26" 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
76
  </lido-image>
76
77
  <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" >
77
- <lido-text id="${missingNumber}" tab-index="${missingNumber}" disable-edit="true" height="landscape.155px, portrait.125px" width="295px" 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';';" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png">
78
+ <lido-text id="drop-${missingNumber}" tab-index="${missingNumber}" disable-edit="true" height="landscape.155px, portrait.125px" width="295px" 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';';" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png">
78
79
  </lido-text>
79
80
  </lido-image>
80
81
  </lido-cell>
@@ -82,7 +83,7 @@ function getContainerXml(args) {
82
83
  <lido-image is-slice="true" bg-color="transparent" id="drop-image3" disable-edit="true" tab-index="30" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
83
84
  </lido-image>
84
85
  <lido-image is-slice="true" bg-color="transparent" id="drop-image3" disable-edit="true" tab-index="31" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
85
- <lido-text id="${number4}" tab-index="${number4}" disable-edit="true" height="landscape.130px, portrait.100px" width="125px" visible="true" value="${number4}" string="${number4}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px" bg-color="transparent" onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
86
+ <lido-text id="drop-${number4}" tab-index="${number4}" disable-edit="true" height="landscape.130px, portrait.100px" width="125px" visible="true" value="${number4}" string="${number4}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px" bg-color="transparent" onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
86
87
  </lido-text>
87
88
  </lido-image>
88
89
  </lido-cell>
@@ -79,7 +79,7 @@ export const ShapePair = {
79
79
  };
80
80
  function getContainerXml(args) {
81
81
  return `<main>
82
- <lido-container id="lido-container" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" is-allow-only-correct="${args.isAllowOnlyCorrect}" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/bg-image.png" dropAttr="EnableAnimation" custom-style="#heading,#drag1,#drag2,#drag3,#drag4,#drag5,#drag6,#drag7,#drop1,#drop2,#drop3,#drop4,#drop5,#drop6,#drop7{box-shadow: none !important;}" is-continue-on-correct="${args.isContinueOnCorrect}">
82
+ <lido-container id="lido-container" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" is-allow-only-correct="${args.isAllowOnlyCorrect}" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Shape%20pair.png" dropAttr="EnableAnimation" custom-style="#heading,#drag1,#drag2,#drag3,#drag4,#drag5,#drag6,#drag7,#drop1,#drop2,#drop3,#drop4,#drop5,#drop6,#drop7{box-shadow: none !important;}" is-continue-on-correct="${args.isContinueOnCorrect}">
83
83
  <!-- Chimple Avatar -->
84
84
  <lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="landscape.205px,portrait.195px" width="landscape.209px,portrait.209px" x="landscape.2%,portrait.80%" y="landscape.85px,portrait.146px" ariaHidden="true" bgColor="transparent" visible="true" onEntry="">
85
85
  <lido-avatar id="lido-avatar" disableEdit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}">
@@ -183,31 +183,35 @@ function getContainerXml({ blocks, options }) {
183
183
  .join("");
184
184
  return `
185
185
  <main>
186
- <lido-container id="lido-container" is-allow-only-correct="true" show-Check="false" is-Continue-On-Correct="true" after-Drop="false" objective="${dropValues}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/Spring.png" custom-style="#drop1, #drop2{border: none !important;}" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; answer.visible='false'; lido-avatar.animation='placeToLeft 2.5s linear'; answer.animation='placeToLeft 2.5s linear'; truck.animation='placeToLeft 2.5s linear'; trainAudio.speak='true'" onInCorrect="lido-avatar.avatarAnimate='Fail';" >
187
- <!-- Chimple Avatar -->
188
- <lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="300px" width="300px" x="landscape.110px,portrait.10px" y="landscape.80px,portrait.230px" ariaHidden="true" bgColor="transparent" visible="true" onEntry=" this.animation='rightToPlace 2.5s linear';">
189
- <lido-avatar id="lido-avatar" disableEdit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}">
190
- </lido-avatar>
191
- </lido-cell>
186
+ <lido-container id="lido-container" is-allow-only-correct="true" show-Check="false" is-Continue-On-Correct="true" after-Drop="false" objective="${dropValues}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Shape%20tractor.png" custom-style="#drop1, #drop2{border: none !important;}" onCorrect="drg1.disableType='true'; drg2.disableType='true'; drg3.disableType='true'; lido-avatar.avatarAnimate='Success'; this.sleep='2000'; answer.visible='false'; lido-avatar.animation='placeToLeft 2.5s linear'; answer.animation='placeToLeft 2.5s linear'; truck.animation='placeToLeft 2.5s linear'; trainAudio.speak='true'" onInCorrect="lido-avatar.avatarAnimate='Fail';" >
192
187
 
193
- <lido-cell visible="true" id="truck" layout="row" height="landscape.60%, portrait.60%" width="landscape.100%, portrait.100%" bg-color="transparent" onEntry=" this.animation='rightToPlace 2.5s linear';" onCorrect="" >
194
- <lido-text id="question" visible="false" string="complete the pattern using the blocks given below" value="complete the pattern using the blocks given below" onEntry="this.sleep='2000';this.speak='true';"></lido-text>
195
- <lido-text id="trainAudio" visible="false" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/train1.m4a" onEntry="this.speak='true';"></lido-text>
196
-
197
- <lido-cell visible="true" layout="row" bg-color="transparent" gap="0px" margin="landscape.220px 0px 0px 0px,portrait.977px 0px 0px -200px">
198
-
199
- <lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/truck_bg_soundtrain.png" width="landscape.220px,portrait.250px" padding="0px" margin="72px 0px 0px 0px"></lido-image>
200
- ${truckBlocks}
188
+ <!-- Chimple Avatar -->
189
+ <lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="300px" width="300px" x="landscape.110px,portrait.10px" y="landscape.80px,portrait.230px" ariaHidden="true" bgColor="transparent" visible="true" onEntry=" this.animation='rightToPlace 2.5s linear';">
190
+ <lido-avatar id="lido-avatar" disableEdit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}">
191
+ </lido-avatar>
201
192
  </lido-cell>
202
- </lido-cell>
203
193
 
204
- <lido-cell visible="true" id="answer" layout="row" height="landscape.40%,portrait.40%" width="landscape.50%,portrait.50%" bg-color="transparent" onEntry="this.alignItems='center';this.justify-content='space-around';this.animation='rightToPlace 2.5s linear'">
205
- ${optionCells}
206
- </lido-cell>
207
- </lido-container>
194
+ <lido-cell visible="true" id="truck" layout="row" height="landscape.60%, portrait.60%" width="landscape.100%, portrait.100%" bg-color="transparent" onEntry=" this.animation='rightToPlace 2.5s linear';" onCorrect="" >
195
+
196
+ <lido-text id="question" visible="false" string="complete the pattern using the blocks given below" value="complete the pattern using the blocks given below" onEntry="this.sleep='2000';this.speak='true';">
197
+ </lido-text>
198
+ <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';">
199
+ </lido-text>
200
+
201
+ <lido-cell visible="true" layout="row" bg-color="transparent" gap="0px" margin="landscape.220px 0px 0px 0px,portrait.977px 0px 0px -200px">
202
+
203
+ <lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/truck_bg_soundtrain.png" width="landscape.220px,portrait.250px" padding="0px" margin="72px 0px 0px 0px">
204
+ </lido-image>
208
205
 
209
-
210
-
206
+ ${truckBlocks}
207
+
208
+ </lido-cell>
209
+ </lido-cell>
210
+
211
+ <lido-cell visible="true" id="answer" delay-visible="2650" layout="row" height="landscape.40%,portrait.40%" width="landscape.50%,portrait.50%" bg-color="transparent" onEntry="this.alignItems='center';this.justify-content='space-around';this.animation='rightToPlace 2.5s linear'">
212
+ ${optionCells}
213
+ </lido-cell>
214
+ </lido-container>
211
215
  </main>
212
216
  `;
213
217
  }
@@ -24,7 +24,7 @@ function getContainerXml(args) {
24
24
  let tabCounter = 1;
25
25
  const correctSequence = args.options.filter(opt => opt.startsWith('#') || opt.startsWith('@')).map(opt => opt.slice(1)).join('');
26
26
  return `<main>
27
- <lido-container id="lido-container" is-allow-only-correct="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/spelldoor/Background_Spring.png" objective="${drops.join(',')}" height="100%" width="100%" bg-color="transparent" visible="true" onCorrect=" lido-avatar.avatarAnimate='Success'; correctWord.speak='true'; 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">
27
+ <lido-container id="lido-container" is-allow-only-correct="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Spell%20door.png" objective="${drops.join(',')}" height="100%" width="100%" bg-color="transparent" visible="true" onCorrect=" lido-avatar.avatarAnimate='Success'; correctWord.speak='true'; 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">
28
28
  <lido-text visible="false" id="correctWord" onEntry="this.display='none';" string="${correctSequence}" ></lido-text>
29
29
  <!-- Chimple Avatar -->
30
30
  <lido-cell layout="pos" id="pos1" value="pos2" height="305px" width="227px" x="landscape.81%, portrait.60%" y="landscape.12%, portrait.20%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
@@ -64,14 +64,14 @@ function getContainerXml(args) {
64
64
  const dragCells = options
65
65
  .map((digit, i) => {
66
66
  return `
67
- <lido-text id="option-${i}" tab-index="${tabCounter++}" type="drag" height="195px" width="120px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px" bg-color="white" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse';" border-image="">
67
+ <lido-text id="option-${i}" tab-index="${tabCounter++}" type="drag" height="195px" width="120px" visible="true" onInCorrect="this.speak='true';" onCorrect="this.speak='true';" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px" bg-color="white" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse';" border-image="">
68
68
  </lido-text>
69
69
  `;
70
70
  }).join('\n');
71
71
  return `
72
72
  <main>
73
73
 
74
- <lido-container id="sum-together" disable-speak="true" show-drop-border="false" objective="${objective}" tab-index="1" value="sum-together" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.png" height="100%" width="100%" bg-color="transparent" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; this.sumTogetherAnimation='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}">
74
+ <lido-container id="lido-container" disable-speak="true" show-drop-border="false" objective="${objective}" tab-index="1" value="sum-together" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Sum%20together.png" height="100%" width="100%" bg-color="transparent" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; this.sumTogetherAnimation='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}">
75
75
 
76
76
  <!-- Chimple Avatar -->
77
77
  <lido-cell layout="pos" id="pos1" disableEdit="true" value="pos1" height="landscape.570px, portrait.700px" width="landscape.380px, portrait.485px" x="landscape.-80px, portrait.195px" y="landscape.175px, portrait.1085px" ariaHidden="true" bg-color="transparent" visible="true" onEntry="this.flex-shrink='0'; this.z-index='0';">
@@ -80,7 +80,7 @@ function getContainerXml(args) {
80
80
  </lido-cell>
81
81
 
82
82
  <!-- top section -->
83
- <lido-cell layout="landscape.row,portrait.wrap" id="question-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">
83
+ <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
84
  ${topImageCells}
85
85
  </lido-cell>
86
86
 
@@ -94,13 +94,15 @@ function getContainerXml(args) {
94
94
  </lido-text>
95
95
  <lido-text id="equal" tab-index="${tabCounter++}" 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
96
  </lido-text>
97
- <lido-text id="${answer}" tab-index="${tabCounter++}" type="drop" height="245px" width="175px" visible="true" value="${answer}" 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="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png">
98
- </lido-text>
97
+ <lido-image id="${answer}" tab-index="${tabCounter++}" is-slice="true" height="225px" width="175px" value="${answer}" string="?" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png" type="drop" onEntry="this.opacity='0';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='1000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='1000';">
98
+ <lido-text height="245px" width="175px" visible="true" value="${answer}" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px" bg-color="transparent" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';">
99
+ </lido-text>
100
+ </lido-image>
99
101
  </lido-cell>
100
102
 
101
103
 
102
104
  <!-- option row-->
103
- <lido-cell layout="landscape.row, portrait.wrap" id="question-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">
105
+ <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">
104
106
  ${dragCells}
105
107
  </lido-cell>
106
108
 
@@ -30,7 +30,7 @@ function getContainerXml(args) {
30
30
  return `
31
31
  <main>
32
32
  <lido-container visible="true" id="lido-container" onInCorrect="lido-avatar.avatarAnimate='Fail';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='1000'; ${args.images.map((_, i) => `i${i + 1}.revealImageValue='true'; this.sleep='1000';`).join('')} this.sleep='2000';"
33
- bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" objective="${args.answer}" is-continue-on-correct="true" show-Check="false" >
33
+ bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Total.png" objective="${args.answer}" is-continue-on-correct="true" show-Check="false" >
34
34
  <!-- Chimple Avatar -->
35
35
  <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.402px,portrait.402px" width="landscape.302px,portrait.398px" x="landscape.84%, portrait.-4%" y="landscape.58%, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
36
36
  <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
@@ -42,7 +42,7 @@ function getContainerXml(args) {
42
42
  return `
43
43
  <main>
44
44
 
45
- <lido-container id="lido-container" objective="" tab-index="1" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" height="1600px" width="900px" 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" is-allow-only-correct="${isAllowOnlyCorrect}" after-drop="false" show-next-button="true">
45
+ <lido-container id="lido-container" objective="" tab-index="1" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Write%20card.png" height="1600px" width="900px" 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" is-allow-only-correct="${isAllowOnlyCorrect}" after-drop="false" show-next-button="true">
46
46
 
47
47
  <!-- Chimple Avatar -->
48
48
  <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.-24px, portrait.465px" y="landscape.385px, portrait.983px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.flex-shrink='0';">
@@ -52,7 +52,7 @@ function getContainerXml(args) {
52
52
  return `
53
53
  <main>
54
54
 
55
- <lido-container id="lido-container" disableSpeak="true" objective="writeLetter" tab-index="1" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" height="100%" 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" is-allow-only-correct="${isAllowOnlyCorrect}" after-drop="false">
55
+ <lido-container id="lido-container" disableSpeak="true" objective="writeLetter" tab-index="1" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Write%20letter.png" height="100%" 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" is-allow-only-correct="${isAllowOnlyCorrect}" after-drop="false">
56
56
 
57
57
  <!-- Chimple Avatar -->
58
58
  <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.-24px, portrait.465px" y="landscape.360px, portrait.1025px" aria-hidden="true" z="1" bg-Color="transparent" visible="true" onEntry="this.flex-shrink='0';">
@@ -79,7 +79,7 @@ function getContainerXml(args) {
79
79
 
80
80
 
81
81
 
82
- <lido-container id="lido-container" objective="writeCard" tab-index="1" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" height="1600px" width="900px" 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" is-allow-only-correct="${isAllowOnlyCorrect}" after-drop="false">
82
+ <lido-container id="lido-container" objective="writeCard" tab-index="1" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Write%20letter.png" height="1600px" width="900px" 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" is-allow-only-correct="${isAllowOnlyCorrect}" after-drop="false">
83
83
 
84
84
  <!-- Chimple Avatar -->
85
85
  <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.-24px, portrait.465px" y="landscape.385px, portrait.983px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.flex-shrink='0';">
@@ -54,17 +54,17 @@ function getContainerXml(args) {
54
54
  const starCells = starList
55
55
  .map((index) => {
56
56
  return `
57
- <lido-image id="star${index}" tab-index="${tabCounter++}" audio="" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/fly1%201.png" width="landscape.100px, portrait.140px" visible="true" height="landscape.75px, portrait.92px">
57
+ <lido-image id="star${index}" tab-index="${tabCounter++}" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Audios/1.wav" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/fly1%201.png" width="landscape.100px, portrait.140px" visible="true" height="landscape.75px, portrait.92px">
58
58
  </lido-image>
59
59
  `;
60
60
  })
61
61
  .join('');
62
62
  return `
63
63
  <main>
64
- <lido-container id="lido-container" objective="writeNumber" tab-index="1" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.png" height="100%" 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';" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}">
64
+ <lido-container id="lido-container" objective="writeNumber" tab-index="1" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Write%20number.png" height="100%" 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';" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}">
65
65
 
66
66
  <!-- Chimple Avatar -->
67
- <lido-cell layout="pos" id="pos1" disable-edit="true" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.1279px, portrait.230px" y="landscape.375px, portrait.1010px" ariaHidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.flex-shrink='0';">
67
+ <lido-cell layout="pos" id="pos1" disable-edit="true" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.1279px, portrait.230px" y="landscape.375px, portrait.1035px" ariaHidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.flex-shrink='0';">
68
68
  <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="inherit" width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" onEntry="">
69
69
  </lido-avatar>
70
70
  <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="inherit" height="27px" x="landscape.-7px, portrait.-7px" y="landscape.450px, portrait.535px" alt-text="{shadowImage}">
@@ -84,13 +84,13 @@ function getContainerXml(args) {
84
84
  </lido-cell>
85
85
 
86
86
  <!-- trace cell -->
87
- <lido-cell layout="pos" id="pos3" visible="true" width="landscape.740px, portrait.740px" height="landscape.477px, portrait.477px" bg-color="transparent" onEntry="this.border-radius='6px'; this.flex-shrink='0';" x="landscape.430px, portrait.75px" y="landscape.205px, portrait.315px">
88
- <lido-trace id="image2" tab-index="3" value="a" visible="true" highlightTextId="txt1" svgSource="${traceImage1}; ${traceImage2}" onCorrect="star-row.highlightStarsAndDisapper='true';" mode="${traceMode}" z="1" x="" y="" width="740px" height="477px" alt-text="{backgroundImage}">
87
+ <lido-cell layout="pos" id="pos3" visible="true" width="landscape.740px, portrait.740px" height="landscape.477px, portrait.477px" bg-color="transparent" onEntry="this.border-radius='6px'; this.flex-shrink='0';" x="landscape.430px, portrait.75px" y="landscape.205px, portrait.275px">
88
+ <lido-trace id="image2" tab-index="3" value="a" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Audios/1.wav; https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Audios/2.wav" visible="true" highlightTextId="txt1" svgSource="${traceImage1}; ${traceImage2}" onCorrect="star-row.highlightStarsAndDisapper='true'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';" mode="${traceMode}" z="1" x="" y="" width="740px" height="477px" alt-text="{backgroundImage}">
89
89
  </lido-trace>
90
90
  </lido-cell>
91
91
 
92
92
 
93
- <lido-cell layout="wrap" id="star-row" width="landscape.50%, portrait.80%" height="landscape.160px, portrait.200px" visible="true" bg-color="transparent" y="landscape.500px, portrait.485px" margin="landscape.560px 0px -100px 0px, portrait.225px 0px -100px 0px" onEntry="this.grid-template-columns='repeat(auto-fill, minmax(135px, auto))'; this.justify-content='center'; this.align-items='center';">
93
+ <lido-cell layout="wrap" id="star-row" width="landscape.85%, portrait.80%" height="landscape.160px, portrait.200px" visible="true" bg-color="transparent" y="landscape.500px, portrait.485px" margin="landscape.560px 0px -100px 0px, portrait.95px 0px -100px 0px" onEntry="this.grid-template-columns='repeat(auto-fit, minmax(125px, auto))'; this.justify-content='center'; this.align-items='center';">
94
94
  ${starCells}
95
95
  </lido-cell>
96
96
 
@@ -32,7 +32,7 @@ function getContainerXml(args) {
32
32
  `;
33
33
  }).join('');
34
34
  return `<main>
35
- <lido-container visible="true" show-next-button="true" dropAttr="math-matrix" appendToDropOnCompletion="true" equationCheck="$#mat1,==,$#number" objective="" is-allow-only-correct="${isAllowOnlyCorrect}" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; number.speak='true'; this.sleep='2000';" is-continue-on-correct="${isContinueOnCorrect}">
35
+ <lido-container visible="true" show-next-button="true" dropAttr="math-matrix" appendToDropOnCompletion="true" equationCheck="$#mat1,==,$#number" objective="" is-allow-only-correct="${isAllowOnlyCorrect}" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Write%20Set.png" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; number.speak='true'; this.sleep='2000';" is-continue-on-correct="${isContinueOnCorrect}">
36
36
 
37
37
  <!-- Audio -->
38
38
  <lido-text visible="false" id="audio123" onEntry="this.display='none'; this.speak='true';" string="Fill the matrix according to the number given in the box."></lido-text>
@@ -53,7 +53,7 @@ function getContainerXml(args) {
53
53
  console.log("SVG Source:", `${traceImage1}; ${traceImage2}; ${traceImage3}`);
54
54
  return `
55
55
  <main>
56
- <lido-container id="lido-container" tab-index="1" objective="writeWord" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.png" height="100%" 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" is-allow-only-correct="${isAllowOnlyCorrect}" after-drop="false">
56
+ <lido-container id="lido-container" tab-index="1" objective="writeWord" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Write%20word.png" height="100%" 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" is-allow-only-correct="${isAllowOnlyCorrect}" after-drop="false">
57
57
 
58
58
  <!-- Chimple Avatar -->
59
59
  <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.1200px, portrait.450px" y="landscape.390px, portrait.1020px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.flex-shrink='0';">
@@ -63,14 +63,15 @@ function getContainerXml(args) {
63
63
  </lido-image>
64
64
  </lido-cell>
65
65
 
66
- <!-- text-element -->
67
- <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.80px, portrait.80px" width="landscape.297px, portrait.297px" x="landscape.650px, portrait.300px" y="landscape.125px, portrait.190px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
68
- <lido-text id="txt1" tab-index="2" span-type="${spanType}" audio="" width="297px" height="80px" display="flex" onEntry="this.text-align='center'; this.justify-content='center'; this.flex-shrink='0';" font="'Baloo Bhai 2'" font-size="96px" z="1" font-color="black" font-weight="600" color=" #000000" string="${text}" visible="true" y="landscape., portrait." bg-color="transparent">
69
- </lido-text>
70
- </lido-cell>
66
+
71
67
 
72
68
  <lido-cell layout="col" visible="true" width="landscape.70%, portrait.70%" height="landscape.84%, portrait.60%" bg-color="transparent" margin="landscape.-35px 0px -35px 0px, portrait.-400px 0px -40px 0px" onEntry="this.padding='4px 0px 16px 0px';">
73
69
  <lido-image visible="true" src="${topDisplayImage}" z="1" width="landscape.570px, portrait.570px" height="landscape.225px, portrait.225px" onEntry="this.flex-shrink='0';" altText="{image1}">
70
+ <!-- text-element -->
71
+ <lido-cell layout="pos" display="flex" id="pos1" disable-edit="true" value="pos1" height="landscape.80px, portrait.80px" width="landscape.525px, portrait.525px" x="landscape.545px, portrait.300px" y="landscape.125px, portrait.190px" aria-hidden="true" bg-color="transparent" visible="true" onEntry="this.z-index='2'; this.align-items='center'; this.justify-content='center'; this.display='flex';">
72
+ <lido-text id="txt1" tab-index="2" span-type="${spanType}" audio="" width="525px" height="80px" onEntry="this.text-align='center'; this.justify-content='center'; this.flex-shrink='0'; this.fontWeight='600';" font="'Baloo Bhai 2'" font-size="96px" z="1" font-color="black" color=" #000000" string="${text}" visible="true" y="landscape., portrait." bg-color="transparent">
73
+ </lido-text>
74
+ </lido-cell>
74
75
  </lido-image>
75
76
 
76
77
  <lido-image visible="true" src="${bottomDisplayImage}" z="1" width="landscape.574px, portrait.760px" height="landscape.574px, portrait.760px" onEntry="this.flex-shrink='0';" altText="{image1}">