lido-player 0.0.2-alpha-60-dev → 0.0.2-alpha-62
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/lido-avatar_22.cjs.entry.js +70 -28
- package/dist/cjs/lido-player.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{utils-28faa755.js → utils-b13cba29.js} +130 -64
- package/dist/collection/components/container/lido-container.js +21 -18
- package/dist/collection/components/home/lido-home.js +4 -4
- package/dist/collection/components/root/lido-root.js +5 -5
- package/dist/collection/components/text/lido-text.js +3 -2
- package/dist/collection/stories/Templates/balancing/balancing.stories.js +1 -1
- package/dist/collection/stories/Templates/imageMatch/imageMatch.stories.js +16 -15
- package/dist/collection/stories/Templates/numberIdentification/numberIdentificationimageTotext.stories.js +9 -7
- package/dist/collection/stories/Templates/numberIdentification/numberIdentificationtextTotext.stories.js +8 -6
- package/dist/collection/stories/Templates/palEgmaCalculateSum/palEgmaMultiOption.stories.js +4 -3
- package/dist/collection/stories/Templates/palEgmaCalculateSum/palEgmaSumTogether.stories.js +3 -2
- package/dist/collection/stories/Templates/palEgmaPatternMatching/palEgmaPatternMatching.stories.js +32 -19
- package/dist/collection/stories/Templates/palEgmaWordProblem/palEgmaWordProblem.stories.js +5 -5
- package/dist/collection/stories/Templates/palEgraInventedSpelling/pal_egra_invented_spelling_schema.stories.js +10 -7
- package/dist/collection/stories/Templates/palEgraMCQWithImage/palEgraMCQWithImage.stories.js +11 -8
- package/dist/collection/stories/Templates/palEgraOptionWithAudio/palEgraOptionWithAudio.stories.js +18 -14
- package/dist/collection/stories/Templates/palEgraStoryMaking/pal_egra_story_making.stories.js +9 -9
- package/dist/collection/stories/Templates/palEgraTemplate1/palEgraLetterIdentification.stories.js +17 -10
- package/dist/collection/stories/Templates/palEgraWordMatch/palEgraWordMatch.stories.js +98 -0
- package/dist/collection/stories/Templates/palEgra_OddOneOut/palEgra_oddOneOut.stories.js +8 -8
- package/dist/collection/stories/Templates/palEgra_arrange_pictures/palEgra_arrange_pictures.stories.js +16 -19
- package/dist/collection/stories/Templates/palEgra_build_word/palEgra_build_word.stories.js +21 -18
- package/dist/collection/stories/Templates/palEgra_word_formation/palEgra_WordFormation.stories.js +26 -19
- package/dist/collection/stories/Templates/palStorytale/palStorytale.stories.js +9 -9
- package/dist/collection/stories/Templates/pictureClues/pictureClues.stories.js +9 -9
- package/dist/collection/stories/Templates/pictureWordMatch/pictureWordMatch1.stories.js +15 -15
- package/dist/collection/stories/Templates/pictureWordMatch/pictureWordMatch2.stories.js +11 -11
- package/dist/collection/stories/Templates/sentenceMatch/sentenceMatch.stories.js +63 -0
- package/dist/collection/stories/Templates/substraction/substractionWithimg.stories.js +7 -7
- package/dist/collection/stories/Templates/substraction/substractionWithoutImg.stories.js +13 -13
- package/dist/collection/stories/Templates/wordBuilding/wordBuildingwithimg.stories.js +7 -7
- package/dist/collection/stories/Templates/wordBuilding/wordBuildingwithoutimg.stories.js +1 -1
- package/dist/collection/stories/Templates/writeSet/writeSet.stories.js +6 -5
- package/dist/collection/utils/audioPlayer.js +10 -0
- package/dist/collection/utils/customEvents.js +2 -1
- package/dist/collection/utils/i18n.js +2 -0
- package/dist/collection/utils/utils.js +8 -12
- package/dist/collection/utils/utilsHandlers/clickHandler.js +20 -14
- package/dist/collection/utils/utilsHandlers/dragDropHandler.js +26 -52
- package/dist/collection/utils/utilsHandlers/lidoBalanceHandler.js +4 -5
- package/dist/collection/utils/utilsHandlers/timer.js +53 -0
- package/dist/components/index.js +1 -1
- package/dist/components/lido-avatar.js +1 -1
- package/dist/components/lido-balance.js +1 -1
- package/dist/components/lido-calculator.js +1 -1
- package/dist/components/lido-canvas.js +1 -1
- package/dist/components/lido-cell.js +1 -1
- package/dist/components/lido-col.js +1 -1
- package/dist/components/lido-container.js +1 -1
- package/dist/components/lido-flash-card.js +1 -1
- package/dist/components/lido-float.js +1 -1
- package/dist/components/lido-home.js +1 -1
- package/dist/components/lido-image.js +1 -1
- package/dist/components/lido-keyboard.js +1 -1
- package/dist/components/lido-math-matrix.js +1 -1
- package/dist/components/lido-pos.js +1 -1
- package/dist/components/lido-random.js +1 -1
- package/dist/components/lido-root.js +27 -27
- package/dist/components/lido-row.js +1 -1
- package/dist/components/lido-shape.js +1 -1
- package/dist/components/lido-slide-fill.js +1 -1
- package/dist/components/lido-text.js +1 -1
- package/dist/components/lido-trace.js +1 -1
- package/dist/components/lido-wrap.js +1 -1
- package/dist/components/{p-74c270d2.js → p-21938b85.js} +2 -2
- package/dist/components/{p-a182c9a2.js → p-39767aae.js} +1 -1
- package/dist/components/{p-3acd9a2e.js → p-3db5a756.js} +1 -1
- package/dist/components/{p-93acfbb2.js → p-40dd6fa3.js} +1 -1
- package/dist/components/{p-5e7c6afa.js → p-552f581f.js} +1 -1
- package/dist/components/{p-37c86a94.js → p-5a3a7f41.js} +47 -7
- package/dist/components/{p-b151457d.js → p-5da9c4a0.js} +22 -20
- package/dist/components/{p-3acada8c.js → p-64b85ae6.js} +1 -1
- package/dist/components/{p-4d01394c.js → p-6c1ea24d.js} +1 -1
- package/dist/components/{p-b867548e.js → p-7256917d.js} +1 -1
- package/dist/components/{p-8a32f7cb.js → p-777293d6.js} +1 -1
- package/dist/components/{p-8c0667eb.js → p-85eaa0b7.js} +1 -1
- package/dist/components/{p-8f082c62.js → p-8f174468.js} +1 -1
- package/dist/components/{p-235091a1.js → p-bd09bc5b.js} +130 -65
- package/dist/components/{p-32c89979.js → p-bf0c1e81.js} +1 -1
- package/dist/components/{p-c90d92db.js → p-cdb5b0e6.js} +1 -1
- package/dist/components/{p-db2a05f5.js → p-d0d890d8.js} +3 -3
- package/dist/components/{p-57400ebc.js → p-d2d6e641.js} +1 -1
- package/dist/components/{p-354f7b19.js → p-da85322a.js} +2 -2
- package/dist/components/{p-16604098.js → p-e42ddea5.js} +1 -1
- package/dist/components/{p-06cecca5.js → p-f4c980f0.js} +1 -1
- package/dist/components/{p-de45dcab.js → p-fb9e274c.js} +25 -25
- package/dist/esm/index.js +1 -1
- package/dist/esm/lido-avatar_22.entry.js +70 -28
- package/dist/esm/lido-player.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{utils-2edeb213.js → utils-b7ed15c2.js} +130 -65
- package/dist/lido-player/index.esm.js +1 -1
- package/dist/lido-player/lido-player.esm.js +1 -1
- package/dist/lido-player/{p-add7f36e.js → p-1557f3df.js} +2 -2
- package/dist/lido-player/p-7e79ea93.entry.js +1 -0
- package/dist/types/components/container/lido-container.d.ts +1 -1
- package/dist/types/components/home/lido-home.d.ts +1 -1
- package/dist/types/components/root/lido-root.d.ts +1 -1
- package/dist/types/components.d.ts +24 -24
- package/dist/types/stories/Templates/palEgraWordMatch/palEgraWordMatch.stories.d.ts +4 -0
- package/dist/types/stories/Templates/sentenceMatch/sentenceMatch.stories.d.ts +4 -0
- package/dist/types/utils/audioPlayer.d.ts +1 -0
- package/dist/types/utils/constants.d.ts +4 -5
- package/dist/types/utils/utilsHandlers/timer.d.ts +14 -0
- package/package.json +1 -1
- 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="
|
|
39
|
+
<lido-container disable-speak="true" 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,27 @@ 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>
|
|
47
51
|
|
|
48
52
|
<lido-cell visible="true" layout="col" width="100%" height="100%" bg-color="transparent">
|
|
49
53
|
|
|
50
54
|
<!-- Question -->
|
|
51
55
|
<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
56
|
<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="
|
|
57
|
+
<lido-text id="text1" disable-speak="true" 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
58
|
</lido-text>
|
|
55
59
|
</lido-image>
|
|
56
60
|
<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="
|
|
61
|
+
<lido-text id="text2" tab-index="4" disable-speak="true" 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
62
|
</lido-text>
|
|
59
63
|
</lido-image>
|
|
60
64
|
<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="
|
|
65
|
+
<lido-text id="text3" disable-speak="true" 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
66
|
</lido-text>
|
|
63
67
|
</lido-image>
|
|
64
68
|
<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="
|
|
69
|
+
<lido-text disable-speak="true" 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
70
|
</lido-text>
|
|
67
71
|
</lido-image>
|
|
68
72
|
</lido-cell>
|
|
@@ -70,25 +74,25 @@ function getContainerXml(args) {
|
|
|
70
74
|
|
|
71
75
|
<!-- drop boxes -->
|
|
72
76
|
<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="
|
|
77
|
+
<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
78
|
</lido-text>
|
|
75
|
-
<lido-text id="drop2" tab-index="
|
|
79
|
+
<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
80
|
</lido-text>
|
|
77
|
-
<lido-text id="drop3" tab-index="
|
|
81
|
+
<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
82
|
</lido-text>
|
|
79
|
-
<lido-text id="drop4" tab-index="
|
|
83
|
+
<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
84
|
</lido-text>
|
|
81
85
|
</lido-cell>
|
|
82
86
|
|
|
83
87
|
<!-- drag Options -->
|
|
84
88
|
<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="
|
|
89
|
+
<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
90
|
</lido-text>
|
|
87
|
-
<lido-text id="drag2" tab-index="
|
|
91
|
+
<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
92
|
</lido-text>
|
|
89
|
-
<lido-text id="drag3" tab-index="
|
|
93
|
+
<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
94
|
</lido-text>
|
|
91
|
-
<lido-text id="drag4" tab-index="
|
|
95
|
+
<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
96
|
</lido-text>
|
|
93
97
|
</lido-cell>
|
|
94
98
|
|
package/dist/collection/stories/Templates/palEgraStoryMaking/pal_egra_story_making.stories.js
CHANGED
|
@@ -25,7 +25,7 @@ export const Default = {
|
|
|
25
25
|
};
|
|
26
26
|
function getContainerXml(args) {
|
|
27
27
|
return `<main>
|
|
28
|
-
<lido-container is-continue-on-correct="true" template-id="dragAndDrop" is-allow-only-correct="true" objective="${args.value1},${args.value2},${args.value3},${args.value4}" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palStory/bgImage.png">
|
|
28
|
+
<lido-container disable-speak="true" id="lido-container" is-continue-on-correct="true" template-id="dragAndDrop" is-allow-only-correct="true" objective="${args.value1},${args.value2},${args.value3},${args.value4}" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palStory/bgImage.png">
|
|
29
29
|
|
|
30
30
|
<!-- Chimple Avatar -->
|
|
31
31
|
<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.300px,portrait.402px" width="landscape.250px,portrait.398px" x="landscape.68%, portrait.28%" y="landscape.600px, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
|
|
@@ -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 disable-speak="true" id="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="
|
|
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-
|
|
52
|
-
<lido-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
<lido-
|
|
57
|
-
|
|
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>`;
|
|
@@ -0,0 +1,98 @@
|
|
|
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 disable-speak="true" 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
|
+
|
|
57
|
+
<lido-text visible="false" id="inst" tab-index="1" string="drag and drop the correct option to match the word given">
|
|
58
|
+
</lido-text>
|
|
59
|
+
|
|
60
|
+
<lido-cell visible="true" layout="col" height="85%" width="98%" bg-color="transparent" margin="-20px 0px -20px 0px">
|
|
61
|
+
|
|
62
|
+
<lido-cell layout="row" visible="true" height="0px" width="100%" bg-color="transparent">
|
|
63
|
+
<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" >
|
|
64
|
+
</lido-text>
|
|
65
|
+
<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" >
|
|
66
|
+
</lido-text>
|
|
67
|
+
<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" >
|
|
68
|
+
</lido-text>
|
|
69
|
+
<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" >
|
|
70
|
+
</lido-text>
|
|
71
|
+
<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" >
|
|
72
|
+
</lido-text>
|
|
73
|
+
</lido-cell>
|
|
74
|
+
|
|
75
|
+
<lido-cell visible="true" layout="row" height="40px" width="100%" bg-color="transparent">
|
|
76
|
+
<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>
|
|
77
|
+
<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>
|
|
78
|
+
<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>
|
|
79
|
+
<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>
|
|
80
|
+
<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>
|
|
81
|
+
</lido-cell>
|
|
82
|
+
|
|
83
|
+
<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">
|
|
84
|
+
<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';" >
|
|
85
|
+
</lido-text>
|
|
86
|
+
<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';" >
|
|
87
|
+
</lido-text>
|
|
88
|
+
<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';" >
|
|
89
|
+
</lido-text>
|
|
90
|
+
<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';" >
|
|
91
|
+
</lido-text>
|
|
92
|
+
<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';" >
|
|
93
|
+
</lido-text>
|
|
94
|
+
</lido-cell>
|
|
95
|
+
</lido-cell>
|
|
96
|
+
</lido-container>
|
|
97
|
+
</main>`;
|
|
98
|
+
}
|
|
@@ -11,7 +11,7 @@ export const palEgra_OddOneOut = {
|
|
|
11
11
|
args: {
|
|
12
12
|
question_text: 'विषम का चयन कीजिये',
|
|
13
13
|
options: ['तन', '@नर', 'मन', 'जन'],
|
|
14
|
-
PracticeMode:
|
|
14
|
+
PracticeMode: false,
|
|
15
15
|
},
|
|
16
16
|
render: args => {
|
|
17
17
|
const xml = getContainerXml(args);
|
|
@@ -21,8 +21,8 @@ export const palEgra_OddOneOut = {
|
|
|
21
21
|
function getContainerXml(args) {
|
|
22
22
|
const option_cells = args.options.map((q, index) => {
|
|
23
23
|
return `
|
|
24
|
-
<lido-cell layout="row" id="text${1 + index}"
|
|
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.
|
|
24
|
+
<lido-cell layout="row" id="text${1 + 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}" tab-index="${13 + index}" 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
|
`;
|
|
@@ -30,20 +30,20 @@ function getContainerXml(args) {
|
|
|
30
30
|
// ---------------------- FINAL XML ----------------------
|
|
31
31
|
return `
|
|
32
32
|
<main>
|
|
33
|
-
<lido-container visible="true" id="lido-container" template-id="mcq" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/fb207af37ae5d938778718e0095fc36abef7c694.png" objective="${(args.options.find(q => q.startsWith('@')) || '').slice(1)}" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" custom-style= "#text {
|
|
33
|
+
<lido-container disable-speak="true" visible="true" id="lido-container" template-id="mcq" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/fb207af37ae5d938778718e0095fc36abef7c694.png" objective="${(args.options.find(q => q.startsWith('@')) || '').slice(1)}" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" custom-style= "#text {
|
|
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.
|
|
38
|
-
x="landscape.
|
|
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.
|
|
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="
|
|
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
|
|
|
@@ -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
|
-
|
|
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="
|
|
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="
|
|
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
|
|
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
|
|
45
|
-
border: none !important;
|
|
46
|
-
box-shadow:
|
|
47
|
-
inset -10px 10px 10px 0 rgba(0, 0, 0, 0.25);
|
|
48
|
-
}">
|
|
45
|
+
<lido-container disable-speak="true" 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.
|
|
51
|
-
x="landscape.
|
|
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.
|
|
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';
|
|
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.
|
|
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
|
|
65
|
-
|
|
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="
|
|
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
|
|
|
@@ -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:
|
|
14
|
+
PracticeMode: false,
|
|
15
15
|
},
|
|
16
16
|
render: args => {
|
|
17
17
|
const xml = getContainerXml(args);
|
|
@@ -23,23 +23,25 @@ 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="
|
|
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="${
|
|
41
|
-
|
|
42
|
-
|
|
40
|
+
<lido-container disable-speak="true" 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}"
|
|
41
|
+
custom-style = "#audioCell:active {
|
|
42
|
+
box-shadow: 0px 0px 0px !important;
|
|
43
|
+
transform: translateY(7px);
|
|
44
|
+
}" >
|
|
43
45
|
<!-- Chimple Avatar -->
|
|
44
46
|
<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.330px,portrait.378px" width="landscape.300px,portrait.382px"
|
|
45
47
|
x="landscape.82%, portrait.30%" y="landscape.32%, portrait.78%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
|
|
@@ -55,21 +57,22 @@ function getContainerXml(args) {
|
|
|
55
57
|
|
|
56
58
|
|
|
57
59
|
<!-- 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.
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
60
|
+
<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">
|
|
61
|
+
<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>
|
|
62
|
+
<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;'">
|
|
63
|
+
<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>
|
|
64
|
+
</lido-cell>
|
|
62
65
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
66
|
+
<!-- drop cells -->
|
|
67
|
+
<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">
|
|
68
|
+
${drop_cells}
|
|
69
|
+
</lido-cell>
|
|
70
|
+
</lido-cell>
|
|
68
71
|
|
|
69
72
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
+
<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">
|
|
74
|
+
${drag_cells}
|
|
75
|
+
</lido-cell>
|
|
73
76
|
|
|
74
77
|
</lido-cell>
|
|
75
78
|
</lido-container>
|