lido-player 0.0.2-alpha-60-dev → 0.0.2-alpha-61

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 (110) hide show
  1. package/dist/cjs/index.cjs.js +1 -1
  2. package/dist/cjs/lido-avatar_22.cjs.entry.js +70 -28
  3. package/dist/cjs/lido-player.cjs.js +1 -1
  4. package/dist/cjs/loader.cjs.js +1 -1
  5. package/dist/cjs/{utils-28faa755.js → utils-9cf49b55.js} +118 -55
  6. package/dist/collection/components/container/lido-container.js +21 -18
  7. package/dist/collection/components/home/lido-home.js +4 -4
  8. package/dist/collection/components/root/lido-root.js +5 -5
  9. package/dist/collection/components/text/lido-text.js +3 -2
  10. package/dist/collection/stories/Templates/balancing/balancing.stories.js +1 -1
  11. package/dist/collection/stories/Templates/imageMatch/imageMatch.stories.js +16 -15
  12. package/dist/collection/stories/Templates/numberIdentification/numberIdentificationimageTotext.stories.js +9 -7
  13. package/dist/collection/stories/Templates/numberIdentification/numberIdentificationtextTotext.stories.js +8 -6
  14. package/dist/collection/stories/Templates/palEgmaCalculateSum/palEgmaMultiOption.stories.js +2 -2
  15. package/dist/collection/stories/Templates/palEgmaCalculateSum/palEgmaSumTogether.stories.js +1 -1
  16. package/dist/collection/stories/Templates/palEgmaPatternMatching/palEgmaPatternMatching.stories.js +31 -18
  17. package/dist/collection/stories/Templates/palEgmaWordProblem/palEgmaWordProblem.stories.js +5 -5
  18. package/dist/collection/stories/Templates/palEgraInventedSpelling/pal_egra_invented_spelling_schema.stories.js +10 -7
  19. package/dist/collection/stories/Templates/palEgraMCQWithImage/palEgraMCQWithImage.stories.js +10 -6
  20. package/dist/collection/stories/Templates/palEgraOptionWithAudio/palEgraOptionWithAudio.stories.js +19 -14
  21. package/dist/collection/stories/Templates/palEgraStoryMaking/pal_egra_story_making.stories.js +8 -8
  22. package/dist/collection/stories/Templates/palEgraTemplate1/palEgraLetterIdentification.stories.js +17 -10
  23. package/dist/collection/stories/Templates/palEgraWordMatch/palEgraWordMatch.stories.js +97 -0
  24. package/dist/collection/stories/Templates/palEgra_OddOneOut/palEgra_oddOneOut.stories.js +6 -6
  25. package/dist/collection/stories/Templates/palEgra_arrange_pictures/palEgra_arrange_pictures.stories.js +16 -19
  26. package/dist/collection/stories/Templates/palEgra_build_word/palEgra_build_word.stories.js +17 -18
  27. package/dist/collection/stories/Templates/palEgra_word_formation/palEgra_WordFormation.stories.js +22 -19
  28. package/dist/collection/stories/Templates/palStorytale/palStorytale.stories.js +9 -9
  29. package/dist/collection/stories/Templates/pictureClues/pictureClues.stories.js +9 -9
  30. package/dist/collection/stories/Templates/pictureWordMatch/pictureWordMatch1.stories.js +13 -13
  31. package/dist/collection/stories/Templates/pictureWordMatch/pictureWordMatch2.stories.js +9 -9
  32. package/dist/collection/stories/Templates/sentenceMatch/sentenceMatch.stories.js +63 -0
  33. package/dist/collection/stories/Templates/substraction/substractionWithimg.stories.js +7 -7
  34. package/dist/collection/stories/Templates/substraction/substractionWithoutImg.stories.js +13 -13
  35. package/dist/collection/stories/Templates/wordBuilding/wordBuildingwithimg.stories.js +7 -7
  36. package/dist/collection/stories/Templates/wordBuilding/wordBuildingwithoutimg.stories.js +1 -1
  37. package/dist/collection/stories/Templates/writeSet/writeSet.stories.js +6 -5
  38. package/dist/collection/utils/audioPlayer.js +10 -0
  39. package/dist/collection/utils/customEvents.js +2 -1
  40. package/dist/collection/utils/i18n.js +2 -0
  41. package/dist/collection/utils/utils.js +4 -11
  42. package/dist/collection/utils/utilsHandlers/clickHandler.js +12 -7
  43. package/dist/collection/utils/utilsHandlers/dragDropHandler.js +26 -52
  44. package/dist/collection/utils/utilsHandlers/lidoBalanceHandler.js +4 -5
  45. package/dist/collection/utils/utilsHandlers/timer.js +53 -0
  46. package/dist/components/index.js +1 -1
  47. package/dist/components/lido-avatar.js +1 -1
  48. package/dist/components/lido-balance.js +1 -1
  49. package/dist/components/lido-calculator.js +1 -1
  50. package/dist/components/lido-canvas.js +1 -1
  51. package/dist/components/lido-cell.js +1 -1
  52. package/dist/components/lido-col.js +1 -1
  53. package/dist/components/lido-container.js +1 -1
  54. package/dist/components/lido-flash-card.js +1 -1
  55. package/dist/components/lido-float.js +1 -1
  56. package/dist/components/lido-home.js +1 -1
  57. package/dist/components/lido-image.js +1 -1
  58. package/dist/components/lido-keyboard.js +1 -1
  59. package/dist/components/lido-math-matrix.js +1 -1
  60. package/dist/components/lido-pos.js +1 -1
  61. package/dist/components/lido-random.js +1 -1
  62. package/dist/components/lido-root.js +27 -27
  63. package/dist/components/lido-row.js +1 -1
  64. package/dist/components/lido-shape.js +1 -1
  65. package/dist/components/lido-slide-fill.js +1 -1
  66. package/dist/components/lido-text.js +1 -1
  67. package/dist/components/lido-trace.js +1 -1
  68. package/dist/components/lido-wrap.js +1 -1
  69. package/dist/components/{p-354f7b19.js → p-0f54f212.js} +2 -2
  70. package/dist/components/{p-3acada8c.js → p-16a6a6f6.js} +1 -1
  71. package/dist/components/{p-b151457d.js → p-27bfb88f.js} +22 -20
  72. package/dist/components/{p-93acfbb2.js → p-2b0ef6d4.js} +1 -1
  73. package/dist/components/{p-c90d92db.js → p-2ce1503f.js} +1 -1
  74. package/dist/components/{p-8f082c62.js → p-2fedf56d.js} +1 -1
  75. package/dist/components/{p-a182c9a2.js → p-3c9dd098.js} +1 -1
  76. package/dist/components/{p-235091a1.js → p-40afd35f.js} +118 -56
  77. package/dist/components/{p-57400ebc.js → p-4a1af1bb.js} +1 -1
  78. package/dist/components/{p-74c270d2.js → p-4c1d15df.js} +2 -2
  79. package/dist/components/{p-5e7c6afa.js → p-4ec94e44.js} +1 -1
  80. package/dist/components/{p-3acd9a2e.js → p-572f8490.js} +1 -1
  81. package/dist/components/{p-16604098.js → p-6bee9883.js} +1 -1
  82. package/dist/components/{p-4d01394c.js → p-76947363.js} +1 -1
  83. package/dist/components/{p-de45dcab.js → p-8632f479.js} +25 -25
  84. package/dist/components/{p-db2a05f5.js → p-97ca067d.js} +3 -3
  85. package/dist/components/{p-8a32f7cb.js → p-be063cbd.js} +1 -1
  86. package/dist/components/{p-8c0667eb.js → p-d28496a9.js} +1 -1
  87. package/dist/components/{p-b867548e.js → p-df6042b0.js} +1 -1
  88. package/dist/components/{p-06cecca5.js → p-dfa70e99.js} +1 -1
  89. package/dist/components/{p-37c86a94.js → p-e4b71ba1.js} +47 -7
  90. package/dist/components/{p-32c89979.js → p-f241ab97.js} +1 -1
  91. package/dist/esm/index.js +1 -1
  92. package/dist/esm/lido-avatar_22.entry.js +70 -28
  93. package/dist/esm/lido-player.js +1 -1
  94. package/dist/esm/loader.js +1 -1
  95. package/dist/esm/{utils-2edeb213.js → utils-01d6cbb5.js} +118 -56
  96. package/dist/lido-player/index.esm.js +1 -1
  97. package/dist/lido-player/lido-player.esm.js +1 -1
  98. package/dist/lido-player/{p-add7f36e.js → p-c5ca9462.js} +2 -2
  99. package/dist/lido-player/p-e4d5dabf.entry.js +1 -0
  100. package/dist/types/components/container/lido-container.d.ts +1 -1
  101. package/dist/types/components/home/lido-home.d.ts +1 -1
  102. package/dist/types/components/root/lido-root.d.ts +1 -1
  103. package/dist/types/components.d.ts +24 -24
  104. package/dist/types/stories/Templates/palEgraWordMatch/palEgraWordMatch.stories.d.ts +4 -0
  105. package/dist/types/stories/Templates/sentenceMatch/sentenceMatch.stories.d.ts +4 -0
  106. package/dist/types/utils/audioPlayer.d.ts +1 -0
  107. package/dist/types/utils/constants.d.ts +4 -5
  108. package/dist/types/utils/utilsHandlers/timer.d.ts +14 -0
  109. package/package.json +1 -1
  110. package/dist/lido-player/p-280e3d34.entry.js +0 -1
package/dist/collection/stories/Templates/palEgraOptionWithAudio/palEgraOptionWithAudio.stories.js CHANGED
@@ -11,6 +11,7 @@ const meta = {
11
11
  option4: { control: 'text' },
12
12
  audio4: { control: 'text' },
13
13
  audioImage: { control: 'text' },
14
+ isAllowOnlyCorrect: { control: 'boolean' },
14
15
  },
15
16
  };
16
17
  export default meta;
@@ -24,7 +25,8 @@ export const PalEgraOptionWithAudio = {
24
25
  audio3: '',
25
26
  option4: 'मख्खी',
26
27
  audio4: '',
27
- audioImage: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/audio.png'
28
+ audioImage: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/audio.png',
29
+ isAllowOnlyCorrect: true,
28
30
  },
29
31
  render: args => {
30
32
  const xml = getContainerXml(args);
@@ -34,7 +36,7 @@ export const PalEgraOptionWithAudio = {
34
36
  function getContainerXml(args) {
35
37
  const objective = `${args.option1.trim()},${args.option2.trim()},${args.option3.trim()},${args.option4.trim()}`;
36
38
  return `<main>
37
- <lido-container id="lido-container" tab-index="1" template-id="dragAndDrop" value="maincontainer" objective="${objective}" aria-label="This is a multiple-option question. Select one option from the list." height="100vh" width="100vw" x="0" y="0" z="0" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/palEgraTemplate9.png" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" is-allow-only-correct="true">
39
+ <lido-container id="lido-container" tab-index="1" template-id="dragAndDrop" value="maincontainer" objective="${objective}" aria-label="This is a multiple-option question. Select one option from the list." height="100vh" width="100vw" x="0" y="0" z="0" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/palEgraTemplate9.png" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="invisibleText.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="${args.isAllowOnlyCorrect}" is-allow-only-correct="${args.isAllowOnlyCorrect}">
38
40
 
39
41
  <!-- Chimple Avatar -->
40
42
  <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="350px" width="350px" x="landscape.625px, portrait.273px" y="landscape.40px, portrait.1200px" aria-hidden="true" z="0" bg-color="transparent" type="" visible="true" audio="" onCorrect="" onEntry="this.animation='leftToPlace 1.5s linear';">
@@ -44,25 +46,28 @@ function getContainerXml(args) {
44
46
  </lido-image>
45
47
  </lido-cell>
46
48
 
49
+ <lido-text tab-index="2" id="invisibleText" value="play the audio first then drag the correct option into correct drop place" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="play the audio first then drag the correct option into correct drop place" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px" >
50
+ </lido-text>
51
+
47
52
 
48
53
  <lido-cell visible="true" layout="col" width="100%" height="100%" bg-color="transparent">
49
54
 
50
55
  <!-- Question -->
51
56
  <lido-cell layout="row" visible="true" width="100%" height="landscape.150px, portrait.25%" bg-color="transparent" onEntry="this.justifyContent='center'; this.borderRadius='16px'; this.alignContent='center'; this.animation='topToPlace 0.5s linear';" margin="landscape.125px 0px 60px 0px, portrait.0px 0px 0px 0px" gap="190px">
52
57
  <lido-image id="icon1" type="click" is-slice="true" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/PalEgraTempAudioIcon.png" bg-color="transparent" width="225px" height="240px" x="77px" y="302px" alt-text="" onTouch="text1.speak='true';">
53
- <lido-text id="text1" tab-index="2" value="${args.option1}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option1}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
58
+ <lido-text id="text1" tab-index="3" value="${args.option1}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option1}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
54
59
  </lido-text>
55
60
  </lido-image>
56
61
  <lido-image id="icon2" type="click" is-slice="true" disable-edit="true" value="image2" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/PalEgraTempAudioIcon.png" bg-color="transparent" width="225px" height="240px" x="77px" y="302px" alt-text="" onTouch="text2.speak='true';">
57
- <lido-text id="text2" tab-index="3" value="${args.option2}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option2}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
62
+ <lido-text id="text2" tab-index="4" value="${args.option2}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option2}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
58
63
  </lido-text>
59
64
  </lido-image>
60
65
  <lido-image id="icon3" type="click" is-slice="true" disable-edit="true" value="image3" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/PalEgraTempAudioIcon.png" bg-color="transparent" width="225px" height="240px" x="77px" y="302px" alt-text="" onTouch="text3.speak='true';">
61
- <lido-text id="text3" tab-index="4" value="${args.option3}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option3}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
66
+ <lido-text id="text3" tab-index="5" value="${args.option3}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option3}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
62
67
  </lido-text>
63
68
  </lido-image>
64
69
  <lido-image id="icon4" type="click" is-slice="true" disable-edit="true" value="image4" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/PalEgraTempAudioIcon.png" bg-color="transparent" width="225px" height="240px" x="77px" y="302px" alt-text="" onTouch="text4.speak='true';">
65
- <lido-text id="text4" tab-index="5" value="${args.option4}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option4}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
70
+ <lido-text id="text4" tab-index="6" value="${args.option4}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option4}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
66
71
  </lido-text>
67
72
  </lido-image>
68
73
  </lido-cell>
@@ -70,25 +75,25 @@ function getContainerXml(args) {
70
75
 
71
76
  <!-- drop boxes -->
72
77
  <lido-cell visible="true" layout="landscape.row, portrait.wrap" width="landscape.100%, portrait.90%" height="landscape.100%, portrait.auto" bg-color="transparent" gap="landscape.25px, portrait.55px" onEntry="">
73
- <lido-text id="drop1" tab-index="6" type="drop" visible="true" bg-color="#FFFFFF;" width="landscape.320px, portrait.100%" value="${args.option1}" height="212px" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="lido-avatar.avatarAnimate='Success';" onInCorrect="lido-avatar.avatarAnimate='Fail';">
78
+ <lido-text id="drop1" tab-index="7" type="drop" visible="true" bg-color="#FFFFFF;" width="landscape.320px, portrait.100%" value="${args.option1}" height="212px" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="lido-avatar.avatarAnimate='Success';" onInCorrect="lido-avatar.avatarAnimate='Fail';">
74
79
  </lido-text>
75
- <lido-text id="drop2" tab-index="7" type="drop" visible="true" bg-color="#FFFFFF;" width="landscape.320px, portrait.100%" value="${args.option2}" height="212px" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="lido-avatar.avatarAnimate='Success';" onInCorrect="lido-avatar.avatarAnimate='Fail';">
80
+ <lido-text id="drop2" tab-index="8" type="drop" visible="true" bg-color="#FFFFFF;" width="landscape.320px, portrait.100%" value="${args.option2}" height="212px" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="lido-avatar.avatarAnimate='Success';" onInCorrect="lido-avatar.avatarAnimate='Fail';">
76
81
  </lido-text>
77
- <lido-text id="drop3" tab-index="8" type="drop" visible="true" bg-color="#FFFFFF;" width="landscape.320px, portrait.100%" value="${args.option3}" height="212px" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="lido-avatar.avatarAnimate='Success';" onInCorrect="lido-avatar.avatarAnimate='Fail';">
82
+ <lido-text id="drop3" tab-index="9" type="drop" visible="true" bg-color="#FFFFFF;" width="landscape.320px, portrait.100%" value="${args.option3}" height="212px" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="lido-avatar.avatarAnimate='Success';" onInCorrect="lido-avatar.avatarAnimate='Fail';">
78
83
  </lido-text>
79
- <lido-text id="drop4" tab-index="9" type="drop" visible="true" bg-color="#FFFFFF;" width="landscape.320px, portrait.100%" value="${args.option4}" height="212px" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="lido-avatar.avatarAnimate='Success';" onInCorrect="lido-avatar.avatarAnimate='Fail';">
84
+ <lido-text id="drop4" tab-index="10" type="drop" visible="true" bg-color="#FFFFFF;" width="landscape.320px, portrait.100%" value="${args.option4}" height="212px" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="lido-avatar.avatarAnimate='Success';" onInCorrect="lido-avatar.avatarAnimate='Fail';">
80
85
  </lido-text>
81
86
  </lido-cell>
82
87
 
83
88
  <!-- drag Options -->
84
89
  <lido-cell visible="true" layout="landscape.row, portrait.wrap" width="landscape.100%, portrait.90%" height="landscape.100%, portrait.auto" bg-color="transparent" gap="landscape.70px, portrait.55px" onEntry="">
85
- <lido-text id="drag1" tab-index="10" type="drag" visible="true" bg-color="#FFAC4C" width="landscape.320px, portrait.100%" string="${args.option1}" value="${args.option1}" font-size="110px" height="212px" onEntry="this.borderRadius='25px'; this.padding='0'; this.fontWeight='700';">
90
+ <lido-text id="drag1" tab-index="11" type="drag" visible="true" bg-color="#FFAC4C" width="landscape.320px, portrait.100%" string="${args.option1}" value="${args.option1}" font-size="110px" height="212px" onEntry="this.borderRadius='25px'; this.padding='0'; this.fontWeight='700';">
86
91
  </lido-text>
87
- <lido-text id="drag2" tab-index="11" type="drag" visible="true" bg-color="#FFAC4C" width="landscape.320px, portrait.100%" string="${args.option2}" value="${args.option2}" font-size="110px" height="212px" onEntry="this.borderRadius='25px'; this.padding='0'; this.fontWeight='700';">
92
+ <lido-text id="drag2" tab-index="12" type="drag" visible="true" bg-color="#FFAC4C" width="landscape.320px, portrait.100%" string="${args.option2}" value="${args.option2}" font-size="110px" height="212px" onEntry="this.borderRadius='25px'; this.padding='0'; this.fontWeight='700';">
88
93
  </lido-text>
89
- <lido-text id="drag3" tab-index="12" type="drag" visible="true" bg-color="#FFAC4C" width="landscape.320px, portrait.100%" string="${args.option3}" value="${args.option3}" font-size="110px" height="212px" onEntry="this.borderRadius='25px'; this.padding='0'; this.fontWeight='700';">
94
+ <lido-text id="drag3" tab-index="13" type="drag" visible="true" bg-color="#FFAC4C" width="landscape.320px, portrait.100%" string="${args.option3}" value="${args.option3}" font-size="110px" height="212px" onEntry="this.borderRadius='25px'; this.padding='0'; this.fontWeight='700';">
90
95
  </lido-text>
91
- <lido-text id="drag4" tab-index="13" type="drag" visible="true" bg-color="#FFAC4C" width="landscape.320px, portrait.100%" string="${args.option4}" value="${args.option4}" font-size="110px" height="212px" onEntry="this.borderRadius='25px'; this.padding='0'; this.fontWeight='700';">
96
+ <lido-text id="drag4" tab-index="14" type="drag" visible="true" bg-color="#FFAC4C" width="landscape.320px, portrait.100%" string="${args.option4}" value="${args.option4}" font-size="110px" height="212px" onEntry="this.borderRadius='25px'; this.padding='0'; this.fontWeight='700';">
92
97
  </lido-text>
93
98
  </lido-cell>
94
99
 
package/dist/collection/stories/Templates/palEgraStoryMaking/pal_egra_story_making.stories.js CHANGED
@@ -40,29 +40,29 @@ function getContainerXml(args) {
40
40
  <lido-cell visible="true" layout="col" width="53%" height="100%" padding="0" bg-color="transparent">
41
41
  <lido-cell visible="true" layout="row" width="100%" height="22%" bg-color="transparent">
42
42
  <lido-image visible="true" width="160px" height="160px" bg-color="white" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picture_Clues/f1.png"></lido-image>
43
- <lido-text visible="true" value="${args.value1}" id="drop1" tab-index="1" type="drop" width="630px" height="100px" bg-color="white" border-radius="16px" onCorrect="lido-avatar.avatarAnimate='Success';"></lido-text>
43
+ <lido-text visible="true" value="${args.value1}" id="drop1" tab-index="1" disable-speak="true" type="drop" width="630px" height="100px" bg-color="white" border-radius="16px" onCorrect="lido-avatar.avatarAnimate='Success';"></lido-text>
44
44
  </lido-cell>
45
45
  <lido-cell visible="true" layout="row" width="100%" height="22%" bg-color="transparent">
46
46
  <lido-image visible="true" width="160px" height="160px" bg-color="white" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picture_Clues/f1.png"></lido-image>
47
- <lido-text visible="true" value="${args.value2}" id="drop2" tab-index="2" type="drop" width="630px" height="100px" bg-color="white" border-radius="16px" onCorrect="lido-avatar.avatarAnimate='Success';"></lido-text>
47
+ <lido-text visible="true" value="${args.value2}" id="drop2" tab-index="2" disable-speak="true" type="drop" width="630px" height="100px" bg-color="white" border-radius="16px" onCorrect="lido-avatar.avatarAnimate='Success';"></lido-text>
48
48
  </lido-cell>
49
49
  <lido-cell visible="true" layout="row" width="100%" height="22%" bg-color="transparent">
50
50
  <lido-image visible="true" width="160px" height="160px" bg-color="white" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picture_Clues/f1.png"></lido-image>
51
- <lido-text visible="true" value="${args.value3}" id="drop3" tab-index="3" type="drop" width="630px" height="100px" bg-color="white" border-radius="16px" onCorrect="lido-avatar.avatarAnimate='Success';"></lido-text>
51
+ <lido-text visible="true" value="${args.value3}" id="drop3" tab-index="3" disable-speak="true" type="drop" width="630px" height="100px" bg-color="white" border-radius="16px" onCorrect="lido-avatar.avatarAnimate='Success';"></lido-text>
52
52
  </lido-cell>
53
53
  <lido-cell visible="true" layout="row" width="100%" height="22%" bg-color="transparent">
54
54
  <lido-image visible="true" width="160px" height="160px" bg-color="white" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picture_Clues/f1.png"></lido-image>
55
- <lido-text visible="true" value="${args.value4}" id="drop4" tab-index="4" type="drop" width="630px" height="100px" bg-color="white" border-radius="16px" onCorrect="lido-avatar.avatarAnimate='Success';"></lido-text>
55
+ <lido-text visible="true" value="${args.value4}" id="drop4" tab-index="4" disable-speak="true" type="drop" width="630px" height="100px" bg-color="white" border-radius="16px" onCorrect="lido-avatar.avatarAnimate='Success';"></lido-text>
56
56
  </lido-cell>
57
57
  </lido-cell>
58
58
 
59
59
  <!-- Drag Elements -->
60
60
  <lido-cell visible="true" layout="col" width="42%" height="100%" bg-color="transparent">
61
61
  <lido-cell visible="true" layout="col" width="100%" height="70%" bg-color="transparent">
62
- <lido-text visible="true" value="${args.value3}" type="drag" width="630px" height="100px" bg-color="#FFAC4C" font-size="50px" font-color="black" string="${args.value3}" border-radius="16px" onEntry="this.fontWeight='600';"></lido-text>
63
- <lido-text visible="true" value="${args.value1}" type="drag" width="630px" height="100px" bg-color="#FFAC4C" font-size="50px" font-color="black" string="${args.value1}" border-radius="16px" onEntry="this.fontWeight='600';"></lido-text>
64
- <lido-text visible="true" value="${args.value4}" type="drag" width="630px" height="100px" bg-color="#FFAC4C" font-size="50px" font-color="black" string="${args.value4}" border-radius="16px" onEntry="this.fontWeight='600';"></lido-text>
65
- <lido-text visible="true" value="${args.value2}" type="drag" width="630px" height="100px" bg-color="#FFAC4C" font-size="50px" font-color="black" string="${args.value2}" border-radius="16px" onEntry="this.fontWeight='600';"></lido-text>
62
+ <lido-text visible="true" value="${args.value3}" disable-speak="true" type="drag" width="630px" height="100px" bg-color="#FFAC4C" font-size="50px" font-color="black" string="${args.value3}" border-radius="16px" onEntry="this.fontWeight='600';"></lido-text>
63
+ <lido-text visible="true" value="${args.value1}" disable-speak="true" type="drag" width="630px" height="100px" bg-color="#FFAC4C" font-size="50px" font-color="black" string="${args.value1}" border-radius="16px" onEntry="this.fontWeight='600';"></lido-text>
64
+ <lido-text visible="true" value="${args.value4}" disable-speak="true" type="drag" width="630px" height="100px" bg-color="#FFAC4C" font-size="50px" font-color="black" string="${args.value4}" border-radius="16px" onEntry="this.fontWeight='600';"></lido-text>
65
+ <lido-text visible="true" value="${args.value2}" disable-speak="true" type="drag" width="630px" height="100px" bg-color="#FFAC4C" font-size="50px" font-color="black" string="${args.value2}" border-radius="16px" onEntry="this.fontWeight='600';"></lido-text>
66
66
  </lido-cell>
67
67
  <lido-cell visible="true" height="30%"></lido-cell>
68
68
  </lido-cell>
package/dist/collection/stories/Templates/palEgraTemplate1/palEgraLetterIdentification.stories.js CHANGED
@@ -31,7 +31,10 @@ export const Default = {
31
31
  };
32
32
  function getContainerXml(args) {
33
33
  return `<main>
34
- <lido-container objective="${(args.correctAns)}" template-id="mcq" is-continue-on-correct="${args.PracticeMode}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Write%20Set.png" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail';" onEntry="questionText.speak='true';">
34
+ <lido-container objective="${(args.correctAns)}" template-id="mcq" is-continue-on-correct="${args.PracticeMode}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Write%20Set.png" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail';" onEntry="questionText.speak='true';" custom-style = "#audioCell:active {
35
+ box-shadow: 0px 0px 0px !important;
36
+ transform: translateY(10px);
37
+ } ">
35
38
  <lido-col visible="true" width="100%" height="80%" bg-color="transparent">
36
39
 
37
40
  <!-- Chimple Avatar -->
@@ -42,19 +45,23 @@ function getContainerXml(args) {
42
45
  </lido-image>
43
46
  </lido-cell>
44
47
 
45
- <lido-text visible="${args.template === 'Template1'}" id="questionText" width="300px" height="300px" tab-index="1" bg-color="#fff5bb" string="${(args.correctAns).toLowerCase()}" font-size="150px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700'; this.border='#ffac4c 2px solid'; "></lido-text>
48
+ <lido-text visible="${args.template === 'Template1'}" id="questionText" width="405px" height="250px" tab-index="1" bg-color="#fff5bb" string="${(args.correctAns).toLowerCase()}" font-size="120px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700'; this.border='#ffac4c 2px solid'; "></lido-text>
46
49
 
47
- <lido-cell visible="${args.template !== 'Template1'}" onTouch="questionText.speak='true';" layout="row" width="300px" height="300px" bg-color="white" border-radius="130px" onEntry="this.border='#ffac4c 2px solid';">
50
+ <lido-cell visible="${args.template !== 'Template1'}" id="audioCell" onTouch="questionText.speak='true';" layout="row" width="300px" height="300px" bg-color="white" border-radius="130px" onEntry="this.border='#ffac4c 2px solid'; this.boxShadow='0px 10.88px 0px #f34d08;';">
48
51
  <lido-image visible="true" bg-color="transparent" width="200px" height="200px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Icons/palAudioIcon.png"></lido-image>
49
52
  </lido-cell>
50
53
 
51
- <lido-row visible="true" width="80%" height="50%" bg-color="transparent">
52
- <lido-text visible="true" width="220px" height="220px" type="click" value="${args.option1}" string="${args.option1}" font-size="120px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
53
- <lido-text visible="true" width="220px" height="220px" type="click" value="${args.option2}" string="${args.option2}" font-size="120px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
54
- <lido-text visible="true" width="220px" height="220px" type="click" value="${args.option3}" string="${args.option3}" font-size="120px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
55
- <lido-text visible="true" width="220px" height="220px" type="click" value="${args.option4}" string="${args.option4}" font-size="120px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
56
- <lido-text visible="true" width="220px" height="220px" type="click" value="${args.option5}" string="${args.option5}" font-size="120px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
57
- </lido-row>
54
+ <lido-cell layout="col" visible="true" width="90%" height="50%" bg-color="transparent" padding="0">
55
+ <lido-cell layout="row" visible="true" width="70%" height="50%" bg-color="transparent">
56
+ <lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${args.option1}" string="${args.option1}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
57
+ <lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${args.option2}" string="${args.option2}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
58
+ </lido-cell>
59
+ <lido-cell layout="row" visible="true" width="100%" height="50%" bg-color="transparent">
60
+ <lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${args.option3}" string="${args.option3}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
61
+ <lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${args.option4}" string="${args.option4}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
62
+ <lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${args.option5}" string="${args.option5}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
63
+ </lido-cell>
64
+ </lido-cell>
58
65
  </lido-col>
59
66
  </lido-container>
60
67
  </main>`;
package/dist/collection/stories/Templates/palEgraWordMatch/palEgraWordMatch.stories.js ADDED
@@ -0,0 +1,97 @@
1
+ import { html } from "lit";
2
+ const meta = {
3
+ title: 'Templates/palEgraWordMatch',
4
+ argTypes: {
5
+ option1: { control: 'text' },
6
+ option2: { control: 'text' },
7
+ option3: { control: 'text' },
8
+ option4: { control: 'text' },
9
+ option5: { control: 'text' },
10
+ text1: { control: 'text' },
11
+ text2: { control: 'text' },
12
+ text3: { control: 'text' },
13
+ text4: { control: 'text' },
14
+ text5: { control: 'text' },
15
+ answer1: { control: 'text' },
16
+ answer2: { control: 'text' },
17
+ answer3: { control: 'text' },
18
+ answer4: { control: 'text' },
19
+ answer5: { control: 'text' },
20
+ PracticeMode: { control: 'boolean' },
21
+ },
22
+ };
23
+ export default meta;
24
+ export const palEgraWordMatch = {
25
+ args: {
26
+ option1: "phone",
27
+ option2: "friend",
28
+ option3: "boat",
29
+ option4: "light",
30
+ option5: "light",
31
+ answer1: "phone",
32
+ answer2: "friend",
33
+ answer3: "boat",
34
+ answer4: "light",
35
+ answer5: "light",
36
+ PracticeMode: true,
37
+ },
38
+ render: args => {
39
+ const xml = getContainerXml(args);
40
+ return html `<lido-home .xmlData="${xml}"></lido-home>`;
41
+ },
42
+ };
43
+ function getContainerXml(args) {
44
+ let tabCounter = 1;
45
+ return `<main>
46
+ <lido-container visible="true" template-id="dragAndDrop" id="lido-container" objective="${args.answer1},${args.answer2},${args.answer3},${args.answer4},${args.answer5}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palEgra-pictureWordMatch/bgImg.png" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="inst.speak='true';">
47
+
48
+ <!-- Chimple Avatar -->
49
+ <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.395px,portrait.402px" width="landscape.330px,portrait.398px" x="landscape.640px, portrait.28%" y="landscape.350px, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" >
50
+ <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}">
51
+ </lido-avatar>
52
+ <lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/Shadow.png" bg-color="transparent" width="186px" height="40px" x="65px" y="310px" alt-text="{shadowImgae}">
53
+ </lido-image>
54
+ </lido-cell>
55
+
56
+ <lido-text visible="false" id="inst" tab-index="1" string="drag and drop the correct option to match the word given">
57
+ </lido-text>
58
+
59
+ <lido-cell visible="true" layout="col" height="85%" width="98%" bg-color="transparent" margin="-20px 0px -20px 0px">
60
+
61
+ <lido-cell layout="row" visible="true" height="0px" width="100%" bg-color="transparent">
62
+ <lido-text visible="true" height="141px" disable-speak="true" width="256px" id="text1" tab-index="2" string="${args.option1}" value="${args.option1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="60px" bg-color="#FFF5BB" onEntry="this.font-weight='600';this.border-radius='16px'; this.border = 4px solid #FFB612" >
63
+ </lido-text>
64
+ <lido-text visible="true" height="141px" disable-speak="true" width="256px" id="text2" tab-index="3" string="${args.option2}" value="${args.option2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="60px" bg-color="#FFF5BB" onEntry="this.font-weight='600';this.border-radius='16px'; this.border = 4px solid #FFB612" >
65
+ </lido-text>
66
+ <lido-text visible="true" height="141px" disable-speak="true" width="256px" id="text3" tab-index="4" string="${args.option3}" value="${args.option3}" font-family="'Baloo Bhai 2'" font-color="black" font-size="60px" bg-color="#FFF5BB" onEntry="this.font-weight='600';this.border-radius='16px'; this.border = 4px solid #FFB612" >
67
+ </lido-text>
68
+ <lido-text visible="true" height="141px" disable-speak="true" width="256px" id="text4" tab-index="5" string="${args.option4}" value="${args.option4}" font-family="'Baloo Bhai 2'" font-color="black" font-size="60px" bg-color="#FFF5BB" onEntry="this.font-weight='600';this.border-radius='16px'; this.border = 4px solid #FFB612" >
69
+ </lido-text>
70
+ <lido-text visible="true" height="141px" disable-speak="true" width="256px" id="text5" tab-index="6" string="${args.option5}" value="${args.option5}" font-family="'Baloo Bhai 2'" font-color="black" font-size="60px" bg-color="#FFF5BB" onEntry="this.font-weight='600';this.border-radius='16px'; this.border = 4px solid #FFB612" >
71
+ </lido-text>
72
+ </lido-cell>
73
+
74
+ <lido-cell visible="true" layout="row" height="40px" width="100%" bg-color="transparent">
75
+ <lido-text type="drop" value="${args.answer1}" bg-color="white" id="drop1" tab-index="8" visible="true" height="141px" width="256px" onEntry="this.border-radius='16px';" ></lido-text>
76
+ <lido-text type="drop" value="${args.answer2}" bg-color="white" id="drop2" tab-index="9" visible="true" height="141px" width="256px" onEntry="this.border-radius='16px';"></lido-text>
77
+ <lido-text type="drop" value="${args.answer3}" bg-color="white" id="drop3" tab-index="10" visible="true" height="141px" width="256px" onEntry="this.border-radius='16px';"></lido-text>
78
+ <lido-text type="drop" value="${args.answer4}" bg-color="white" id="drop4" tab-index="11" visible="true" height="141px" width="256px" onEntry="this.border-radius='16px';"></lido-text>
79
+ <lido-text type="drop" value="${args.answer5}" bg-color="white" id="drop5" tab-index="12" visible="true" height="141px" width="256px" onEntry="this.border-radius='16px';"></lido-text>
80
+ </lido-cell>
81
+
82
+ <lido-cell visible="true" layout="row" height="250px" width="90%" bg-color="transparent" onEntry="this.align-items='center';this.justify-content='space-around';" margin="195px 0px -160px 0px">
83
+ <lido-text visible="true" height="122px" disable-speak="true" width="245px" type="drag" id="drag1" tab-index="2" string="${args.option1}" value="${args.option1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="70px" bg-color="#FFAC4C" onEntry="this.font-weight='700';this.border-radius='16px';" >
84
+ </lido-text>
85
+ <lido-text visible="true" height="122px" disable-speak="true" width="245px" type="drag" id="drag2" tab-index="3" string="${args.option2}" value="${args.option2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="70px" bg-color="#FFAC4C" onEntry="this.font-weight='700';this.border-radius='16px';" >
86
+ </lido-text>
87
+ <lido-text visible="true" height="122px" disable-speak="true" width="245px" type="drag" id="drag3" tab-index="4" string="${args.option3}" value="${args.option3}" font-family="'Baloo Bhai 2'" font-color="black" font-size="70px" bg-color="#FFAC4C" onEntry="this.font-weight='700';this.border-radius='16px';" >
88
+ </lido-text>
89
+ <lido-text visible="true" height="122px" disable-speak="true" width="245px" type="drag" id="drag4" tab-index="5" string="${args.option4}" value="${args.option4}" font-family="'Baloo Bhai 2'" font-color="black" font-size="70px" bg-color="#FFAC4C" onEntry="this.font-weight='700';this.border-radius='16px';" >
90
+ </lido-text>
91
+ <lido-text visible="true" height="122px" disable-speak="true" width="245px" type="drag" id="drag5" tab-index="6" string="${args.option5}" value="${args.option5}" font-family="'Baloo Bhai 2'" font-color="black" font-size="70px" bg-color="#FFAC4C" onEntry="this.font-weight='700';this.border-radius='16px';" >
92
+ </lido-text>
93
+ </lido-cell>
94
+ </lido-cell>
95
+ </lido-container>
96
+ </main>`;
97
+ }
package/dist/collection/stories/Templates/palEgra_OddOneOut/palEgra_oddOneOut.stories.js CHANGED
@@ -11,7 +11,7 @@ export const palEgra_OddOneOut = {
11
11
  args: {
12
12
  question_text: 'विषम का चयन कीजिये',
13
13
  options: ['तन', '@नर', 'मन', 'जन'],
14
- PracticeMode: true,
14
+ PracticeMode: false,
15
15
  },
16
16
  render: args => {
17
17
  const xml = getContainerXml(args);
@@ -22,7 +22,7 @@ function getContainerXml(args) {
22
22
  const option_cells = args.options.map((q, index) => {
23
23
  return `
24
24
  <lido-cell layout="row" id="text${1 + index}" tab-index="${12 + index}" template-id="mcq" visible="true" margin="" onEntry="this.border-radius='14px'; this.justify-content='center'; this.alignItems='center';" height="landscape.280px,portrait.244px" width="landscape.328px,portrait.244px" bg-color="orange" type="click" value="${q.startsWith('@') ? q.slice(1) : q}">
25
- <lido-text visible="true" value="${q.startsWith('@') ? q.slice(1) : q}" string="${q.startsWith('@') ? q.slice(1) : q}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.130px, portrait.100px" bg-color="orange" onEntry="this.fontWeight='700';">
25
+ <lido-text visible="true" value="${q.startsWith('@') ? q.slice(1) : q}" string="${q.startsWith('@') ? q.slice(1) : q}" disable-speak="true" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.79px, portrait.100px" bg-color="orange" onEntry="this.fontWeight='700';">
26
26
  </lido-text>
27
27
  </lido-cell>
28
28
  `;
@@ -34,16 +34,16 @@ function getContainerXml(args) {
34
34
  box-shadow: none !important;
35
35
  }" onEntry="questionText.speak='true';">
36
36
  <!-- Chimple Avatar -->
37
- <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.362px,portrait.378px" width="landscape.315px,portrait.382px"
38
- x="landscape.39%, portrait.30%" y="landscape.27%, portrait.78%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
37
+ <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.330px,portrait.378px" width="landscape.292px,portrait.382px"
38
+ x="landscape.40%, portrait.30%" y="landscape.26%, portrait.78%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
39
39
  <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
40
40
  </lido-avatar>
41
41
  </lido-cell>
42
42
 
43
43
  <lido-cell layout="landscape.col, portrait.row" aria-hidden="true" visible="true" height="landscape.100%,portrait.150px" width="landscape.100%, portrait.80%" bg-Color="transparent" margin="landscape.46px 0px 0px 0px,portrait.20px 0px 0px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.alignItems='center'; this.gap='278px';">
44
44
  <!-- question cells -->
45
- <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px 0px 0px 0px,portrait.-168px 0px 0px 0px" onEntry="this.border-radius='26px'; this.border='2px solid #FFB612'; this.justify-content='center'; this.align-items='center';" height="landscape.184px,portrait.42%" width="landscape.1050px,portrait.100%" bg-color="#FFF5BB">
46
- <lido-text visible="true" id="questionText" tab-index="11" value="" string="${args.question_text}" font-family="'Baloo Bhai 2'" font-color="#07004E" font-size="landscape.90px, portrait.100px" bg-color="" onEntry="this.fontWeight='700';">
45
+ <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px 0px 0px 0px,portrait.-168px 0px 0px 0px" onEntry="this.border-radius='26px'; this.border='2px solid #FFB612'; this.justify-content='center'; this.align-items='center';" height="landscape.auto,portrait.42%" width="landscape.auto,portrait.100%" bg-color="#FFF5BB" padding="8px 35px">
46
+ <lido-text visible="true" id="questionText" tab-index="11" value="" string="${args.question_text}" font-family="'Baloo Bhai 2'" font-color="#07004E" font-size="${args.question_text.length <= 17 ? '90px' : '70px'}" bg-color="" onEntry="this.fontWeight='700';">
47
47
  </lido-text>
48
48
  </lido-cell>
49
49
 
package/dist/collection/stories/Templates/palEgra_arrange_pictures/palEgra_arrange_pictures.stories.js CHANGED
@@ -9,12 +9,13 @@ const meta = {
9
9
  export default meta;
10
10
  export const palEgraArrangePictures = {
11
11
  args: {
12
- question_text: 'एक बिल्ली मेज के ऊपर बैठी थी। मेज के ऊपर एक गिलास में शरबत था। बिल्ली मेज के ऊपर शरबत पीने चढ़ी। उसने शरबत मेज पर गिरा दिया।',
12
+ question_text: 'एक बिल्ली मेज के ऊपर बैठी थी। मेज के ऊपर एक गिलास में शरबत था। बिल्ली मेज के ऊपर शरबत पीने चढ़ी। उसने शरबत मेज पर गिरा दिया। बिल्ली मेज के ऊपर शरबत पीने चढ़ी।',
13
13
  images: [{ id: '1', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/cat_playing_outside.webp' },
14
14
  { id: '2', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/glass_on_table.webp' },
15
15
  { id: '3', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/cat_on_table.jpg' },
16
- { id: '4', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/juice_on_table_spilled.webp' }],
17
- PracticeMode: true,
16
+ { id: '4', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/juice_on_table_spilled.webp' },
17
+ { id: '5', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/juice_on_table_spilled.webp' }],
18
+ PracticeMode: false,
18
19
  },
19
20
  render: args => {
20
21
  const xml = getContainerXml(args);
@@ -24,10 +25,10 @@ export const palEgraArrangePictures = {
24
25
  function getContainerXml(args) {
25
26
  const drop_cells = args.images.map((img, index) => {
26
27
  return `
27
- <lido-cell layout="landscape.col, portrait.col" visible="true" margin="landscape.0px,portrait.0" onEntry="this.border-radius='16px';" height="landscape.auto,portrait.35%" width="landscape.auto,portrait.100%" bg-color="transparent" padding="0px 13px 0px 17px" gap="12px">
28
+ <lido-cell layout="landscape.col, portrait.col" visible="true" margin="landscape.0px,portrait.0" onEntry="" height="landscape.auto,portrait.35%" width="landscape.auto,portrait.100%" bg-color="transparent" gap="20px">
28
29
  <lido-text visible="true" id="label${index + 1}" tab-index="" value="" string="${img.id}" font-family="'Baloo Bhai 2'" width="72px" height="72px" font-color="#030028" font-size="landscape.60px, portrait.100px" bg-color="#FFF5BB" onEntry="this.fontWeight='600'; this.border-radius='100%';">
29
30
  </lido-text>
30
- <lido-text visible="true" id="drop${index + 1}" tab-index="${11 + index}" value="${img.id}" string="" font-family="'Baloo Bhai 2'" width="215px" height="215px" font-color="#030028" font-size="landscape.140px, portrait.100px" bg-color="#FFFFFF" type="drop" onEntry="this.fontWeight='700'; this.border-radius='16px';">
31
+ <lido-text visible="true" id="drop${index + 1}" tab-index="${11 + index}" value="${img.id}" string="" font-family="'Baloo Bhai 2'" width="222px" height="222px" font-color="#030028" bg-color="#FFFFFF" type="drop" onEntry="this.fontWeight='700'; ">
31
32
  </lido-text>
32
33
  </lido-cell>
33
34
  `;
@@ -35,38 +36,34 @@ function getContainerXml(args) {
35
36
  const shuffledOptions = [...args.images].sort(() => Math.random() - 0.5);
36
37
  const drag_cells = shuffledOptions.map((img, index) => {
37
38
  return `
38
- <lido-image visible="true" id="drag${index + 1}" value="${img.id}" bg-color="transparent" width="215px" height="215px" src="${img.src}" type="drag"></lido-image>
39
+ <lido-image visible="true" id="drag${index + 1}" value="${img.id}" bg-color="transparent" width="240px" height="240px" src="${img.src}" type="drag"></lido-image>
39
40
  `;
40
41
  }).join('');
41
42
  // ---------------------- FINAL XML ----------------------
42
43
  return `
43
44
  <main>
44
- <lido-container visible="true" id="lido-container" onEntry="lido-question.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" template-id="dragAndDrop" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/palEgraTemp6_bg.png" objective="${args.images.map(img => img.id).join(',')}" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" custom-style= "#drop1, #drop2, #drop3, #drop4, #drop5 {
45
- border: none !important;
46
- box-shadow:
47
- inset -10px 10px 10px 0 rgba(0, 0, 0, 0.25);
48
- }">
45
+ <lido-container visible="true" id="lido-container" onEntry="lido-question.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" template-id="dragAndDrop" is-allow-only-one-drop = "true" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/palEgraTemp6_bg.png" objective="${args.images.map(img => img.id).join(',')}" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}">
49
46
  <!-- Chimple Avatar -->
50
- <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.330px,portrait.378px" width="landscape.300px,portrait.382px"
51
- x="landscape.86%, portrait.30%" y="landscape.34%, portrait.78%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
47
+ <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.290px,portrait.378px" width="landscape.262px,portrait.382px"
48
+ x="landscape.87%, portrait.30%" y="landscape.40%, portrait.78%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
52
49
  <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}">
53
50
  </lido-avatar>
54
- <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="20px" x="landscape.-1px, portrait.-7px" y="landscape.280px, portrait.535px" altText="{shadowImage}"></lido-image>
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="20px" x="landscape.-1px, portrait.-7px" y="landscape.248px, portrait.535px" altText="{shadowImage}"></lido-image>
55
52
  </lido-cell>
56
53
 
57
- <lido-cell layout="landscape.col, portrait.row" aria-hidden="true" visible="true" height="landscape.95%,portrait.150px" width="landscape.98%, portrait.80%" bg-Color="transparent" margin="landscape.102px 0px 0px 0px,portrait.20px 0px 0px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.alignItems='center'; this.gap='12px';">
54
+ <lido-cell layout="landscape.col, portrait.row" aria-hidden="true" visible="true" height="landscape.95%,portrait.150px" width="landscape.98%, portrait.80%" bg-Color="transparent" margin="landscape.102px 0px 0px 0px,portrait.20px 0px 0px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.alignItems='center';">
58
55
  <!-- question cell -->
59
- <lido-text tab-index="111" visible="true" id="lido-question" width="landscape.103%, portrait.80%" height="auto" bg-color="#FFF5BB" string="${args.question_text}" border-radius="16px" onEntry="this.border='2px solid #FFB612'; this.fontWeight='700';" font-size="48px" font-color="#07004E" font-family="'Baloo Bhai 2'" padding="7px 0px 0px 0px">
56
+ <lido-text tab-index="111" visible="true" id="lido-question" width="landscape.104%, portrait.80%" height="auto" bg-color="#FFF5BB" string="${args.question_text}" border-radius="16px" onEntry="this.border='2px solid #FFB612'; this.fontWeight='700';" font-size="44px" font-color="#07004E" font-family="'Baloo Bhai 2'" padding="7px 0px 0px 0px">
60
57
  </lido-text>
61
58
 
62
59
 
63
60
  <!--drop cells -->
64
- <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px 84px 0px 0px,portrait.0" onEntry="this.border-radius='26px';" height="landscape.auto,portrait.35%" width="landscape.auto,portrait.100%" bg-color="transparent">
65
- ${drop_cells}
61
+ <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px 100px 0px 0px,portrait.0" onEntry="" height="landscape.auto,portrait.35%" width="landscape.85%,portrait.100%" bg-color="transparent">
62
+ ${drop_cells}
66
63
  </lido-cell>
67
64
 
68
65
 
69
- <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px 50px 0px 0px,portrait.0" onEntry="this.border-radius='16px'; this.justify-content='space-evenly';" height="landscape.auto,portrait.35%" width="landscape.100%,portrait.100%" bg-color="transparent">
66
+ <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px 50px 0px 0px,portrait.0" onEntry=" this.justify-content='space-evenly';" height="landscape.auto,portrait.35%" width="landscape.100%,portrait.100%" bg-color="transparent">
70
67
  ${drag_cells}
71
68
  </lido-cell>
72
69
 
package/dist/collection/stories/Templates/palEgra_build_word/palEgra_build_word.stories.js CHANGED
@@ -11,7 +11,7 @@ export const palEgraBuildWord = {
11
11
  args: {
12
12
  question_text: 'Listen to the word and build it with the letters below',
13
13
  question_word: ['dance'],
14
- PracticeMode: true,
14
+ PracticeMode: false,
15
15
  },
16
16
  render: args => {
17
17
  const xml = getContainerXml(args);
@@ -23,23 +23,21 @@ function getContainerXml(args) {
23
23
  const letters = [...word]; // ["d", "a", "n", "c", "e"]
24
24
  const drop_cells = letters.map((q, index) => {
25
25
  return `
26
- <lido-text visible="true" id="drop${index + 1}" tab-index="${12 + index}" value="${q}" string="?" font-family="'Baloo Bhai 2'" width="172px" height="189px" font-color="#030028" font-size="landscape.140px, portrait.100px" bg-color="#FFFFFF" type="drop" onEntry="this.fontWeight='700'; this.border-radius='16px';">
26
+ <lido-text visible="true" id="drop${index + 1}" tab-index="${12 + index}" value="${q}" string="?" disable-speak="true" font-family="'Baloo Bhai 2'" width="173px" height="189px" is-allow-only-one-drop="true" font-color="#030028" font-size="landscape.140px, portrait.100px" bg-color="#FFFFFF" type="drop" onEntry="this.fontWeight='700'; this.border-radius='16px';">
27
27
  </lido-text>
28
28
  `;
29
29
  }).join('');
30
30
  const shuffledOptions = [...letters].sort(() => Math.random() - 0.5);
31
31
  const drag_cells = shuffledOptions.map((q, index) => {
32
32
  return `
33
- <lido-text visible="true" id="drag${index + 1}" tab-index="${16 + index}" value="${q}" string="${q}" font-family="'Baloo Bhai 2'" width="173px" height="189px" font-color="#FFFFFF" font-size="landscape.140px, portrait.100px" bg-color="#A05730" type="drag" onEntry="this.fontWeight='700'; this.border-radius='16px'; this.justifyContent='center'; this.alignItems='center';">
33
+ <lido-text visible="true" id="drag${index + 1}" tab-index="${16 + index}" value="${q}" string="${q}" disable-speak="true" font-family="'Baloo Bhai 2'" width="173px" height="189px" font-color="#FFFFFF" font-size="landscape.140px, portrait.100px" bg-color="#A05730" type="drag" onEntry="this.fontWeight='700'; this.border-radius='16px'; this.justifyContent='center'; this.alignItems='center';">
34
34
  </lido-text>
35
35
  `;
36
36
  }).join('');
37
37
  // ---------------------- FINAL XML ----------------------
38
38
  return `
39
39
  <main>
40
- <lido-container visible="true" id="lido-container" onEntry="lido-question.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" template-id="dragAndDrop" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/palEgraTemp6_bg.png" objective="${args.question_word.join(',')}" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" custom-style= "#drop1, #drop2, #drop3, #drop4, #drop5 {
41
- border: 2px solid #FFB612 !important;
42
- }">
40
+ <lido-container visible="true" id="lido-container" onEntry="lido-question.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" template-id="dragAndDrop" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/palEgraTemp6_bg.png" objective="${letters}" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" >
43
41
  <!-- Chimple Avatar -->
44
42
  <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.330px,portrait.378px" width="landscape.300px,portrait.382px"
45
43
  x="landscape.82%, portrait.30%" y="landscape.32%, portrait.78%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
@@ -55,21 +53,22 @@ function getContainerXml(args) {
55
53
 
56
54
 
57
55
  <!-- options cells -->
58
- <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.-18px 91px 31px -100px,portrait.0" onEntry="this.border-radius='26px';" height="landscape.auto,portrait.35%" width="landscape.auto,portrait.100%" bg-color="transparent" gap="60px">
59
- <lido-text layout="landscape.row, portrait.col" visible="true" margin="landscape.0px,portrait.0" onEntry="this.border-radius='100%'; this.border='2px solid #FFB612';" height="landscape.190px,portrait.35%" width="landscape.184px,portrait.100%" bg-color="white" font-size="1px" onTouch="this.speak='true';" string="${word}">
60
- <lido-image visible="true" bg-color="transparent" width="100px" height="100px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Icons/palAudioIcon.png"></lido-image>
61
- </lido-text>
56
+ <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.-18px 91px 31px -100px,portrait.0" onEntry="this.border-radius='26px';" height="landscape.auto,portrait.35%" width="landscape.80%,portrait.100%" bg-color="transparent">
57
+ <lido-text visible="false" id="inventedAudio" string="${word}" tab-index="2" font-size="80px" font-color="#07004E" border-radius="16px" bg-color="#FFF5BB" onEntry="this.fontWeight='700'; this.border='#FFB612 2px solid'; this.padding='25px 50px';"></lido-text>
58
+ <lido-cell visible="true" id="audioCell" layout="row" width="160px" height="160px" onTouch="inventedAudio.speak='true';" bg-color="white" border-radius="70px" onEntry="this.border='#ffac4c 2px solid'; this.boxShadow='0px 8px 0px #f34d08;'">
59
+ <lido-image visible="true" bg-color="transparent" width="100px" height="100px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Icons/palAudioIcon.png"></lido-image>
60
+ </lido-cell>
62
61
 
63
- <!-- drop cells -->
64
- <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px,portrait.0" onEntry="this.border-radius='16px';" height="landscape.239px,portrait.35%" width="landscape.auto,portrait.100%" bg-color="#FFFFFF99" padding="0px 13px 0px 17px" gap="12px">
65
- ${drop_cells}
66
- </lido-cell>
67
- </lido-cell>
62
+ <!-- drop cells -->
63
+ <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px,portrait.0" onEntry="this.border-radius='16px'; this.justifyContent='space-around'" height="landscape.239px,portrait.35%" width="landscape.80%,portrait.100%" bg-color="#FFFFFF99" padding="0px 13px 0px 17px">
64
+ ${drop_cells}
65
+ </lido-cell>
66
+ </lido-cell>
68
67
 
69
68
 
70
- <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.-46px 0px 0px 0px,portrait.0" onEntry="this.border-radius='16px';" height="landscape.239px,portrait.35%" width="landscape.auto,portrait.100%" bg-color="transparent" gap="23px">
71
- ${drag_cells}
72
- </lido-cell>
69
+ <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.-46px 0px 0px 0px,portrait.0" onEntry="this.border-radius='16px';" height="landscape.239px,portrait.35%" width="landscape.auto,portrait.100%" bg-color="transparent" gap="23px">
70
+ ${drag_cells}
71
+ </lido-cell>
73
72
 
74
73
  </lido-cell>
75
74
  </lido-container>