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

package/dist/collection/stories/Templates/palEgraStoryMaking/pal_egra_story_making.stories.js

@@ -0,0 +1,72 @@
+import { html } from "lit-html";
+const meta = {
+    title: 'Templates/StoryMaking',
+    argTypes: {
+        PracticeMode: { control: 'boolean' },
+        value1: { control: 'text' },
+        value2: { control: 'text' },
+        value3: { control: 'text' },
+        value4: { control: 'text' },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        PracticeMode: false,
+        value1: 'A',
+        value2: 'D',
+        value3: 'E',
+        value4: 'B',
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    return `<main>
+    <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">
+
+	<!-- Chimple Avatar -->
+	<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="">
+		<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">
+		</lido-avatar>
+		<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="150px" height="27px" x="45px" y="235px">
+		</lido-image>
+	</lido-cell>
+	
+	<lido-cell visible="true" layout="row" width="97%" height="87%" bg-color="transparent" margin="70px 0 0 0">
+		<!-- Drop Elements -->
+		<lido-cell visible="true" layout="col" width="53%" height="100%" padding="0" bg-color="transparent">
+			<lido-cell visible="true" layout="row" width="100%" height="22%" bg-color="transparent">
+				<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>
+				<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>
+			</lido-cell>
+			<lido-cell visible="true" layout="row" width="100%" height="22%" bg-color="transparent">
+				<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>
+				<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>
+			</lido-cell>
+			<lido-cell visible="true" layout="row" width="100%" height="22%" bg-color="transparent">
+				<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>
+				<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>
+			</lido-cell>
+			<lido-cell visible="true" layout="row" width="100%" height="22%" bg-color="transparent">
+				<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>
+				<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>
+			</lido-cell>
+		</lido-cell>
+
+		<!-- Drag Elements -->
+		<lido-cell visible="true" layout="col" width="42%" height="100%" bg-color="transparent">
+			<lido-cell visible="true" layout="col" width="100%" height="70%" bg-color="transparent">
+				<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>
+				<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>
+				<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>
+				<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>
+			</lido-cell>
+			<lido-cell visible="true" height="30%"></lido-cell>
+		</lido-cell>
+	</lido-cell>
+</lido-container>
+</main>`;
+}

package/dist/collection/stories/Templates/palEgraTemplate1/palEgraLetterIdentification.stories.js

@@ -0,0 +1,61 @@
+import { html } from "lit-html";
+const meta = {
+    title: 'Templates/LetterIdentification',
+    argTypes: {
+        PracticeMode: { control: 'boolean' },
+        template: { control: 'select', options: ['Template1', 'Template2'] },
+        option1: { control: 'text' },
+        option2: { control: 'text' },
+        option3: { control: 'text' },
+        option4: { control: 'text' },
+        option5: { control: 'text' },
+        correctAns: { control: 'text' },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        PracticeMode: false,
+        template: ['Template1'],
+        option1: 'A',
+        option2: 'D',
+        option3: 'E',
+        option4: 'B',
+        option5: 'C',
+        correctAns: 'A',
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    return `<main>
+    <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';">
+	<lido-col visible="true" width="100%" height="80%" bg-color="transparent">
+		
+        <!-- Chimple Avatar -->
+        <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.400px,portrait.402px" width="landscape.350px,portrait.398px" x="landscape.60%, portrait.28%" y="landscape.50px, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
+          <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">
+          </lido-avatar>
+		  <lido-image id="image" disableEdit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bgColor="transparent" width="inherit" height="27px" x="0" y="330px">
+		  </lido-image>
+        </lido-cell>
+
+		<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>
+		
+		<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';">
+			<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>
+		</lido-cell>
+
+		<lido-row visible="true" width="80%" height="50%" bg-color="transparent">
+			<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>
+			<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>
+			<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>
+			<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>
+			<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>
+		</lido-row>
+	</lido-col>
+</lido-container>
+</main>`;
+}

package/dist/collection/stories/Templates/palEgra_OddOneOut/palEgra_oddOneOut.stories.js

@@ -0,0 +1,60 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/palEgra_OddOneOut',
+    argTypes: {
+        options: { control: 'object' },
+        PracticeMode: { control: 'boolean' },
+    },
+};
+export default meta;
+export const palEgra_OddOneOut = {
+    args: {
+        question_text: 'विषम का चयन कीजिये',
+        options: ['तन', '@नर', 'मन', 'जन'],
+        PracticeMode: true,
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    const option_cells = args.options.map((q, index) => {
+        return `
+      <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}">
+        <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';">
+        </lido-text>
+      </lido-cell>
+  `;
+    }).join('');
+    // ---------------------- FINAL XML ----------------------
+    return `
+<main>
+<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 {
+        box-shadow: none !important;
+        }" onEntry="questionText.speak='true';">
+	 <!-- Chimple Avatar -->
+      <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.362px,portrait.378px" width="landscape.315px,portrait.382px"
+       x="landscape.39%, portrait.30%" y="landscape.27%, portrait.78%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
+        <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}">
+        </lido-avatar>
+      </lido-cell>
+
+        <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';">
+            <!-- question cells -->
+          <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">				
+            <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';">
+            </lido-text>  
+          </lido-cell>
+
+          <!-- options cells -->
+	      	<lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px 38px 0px 0px,portrait.0" onEntry="this.border-radius='26px';" height="landscape.290px,portrait.35%" width="landscape.100%,portrait.100%" bg-color="transparent">
+            ${option_cells}
+          </lido-cell>
+        </lido-cell>
+                  
+
+</lido-container>
+</main>
+`;
+}

package/dist/collection/stories/Templates/palEgra_arrange_pictures/palEgra_arrange_pictures.stories.js

@@ -0,0 +1,78 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/palEgraArrangePictures',
+    argTypes: {
+        options: { control: 'object' },
+        PracticeMode: { control: 'boolean' },
+    },
+};
+export default meta;
+export const palEgraArrangePictures = {
+    args: {
+        question_text: 'एक बिल्ली मेज के ऊपर बैठी थी।  मेज के ऊपर एक गिलास में शरबत था। बिल्ली मेज के ऊपर शरबत पीने चढ़ी। उसने शरबत मेज पर गिरा दिया।',
+        images: [{ id: '1', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/cat_playing_outside.webp' },
+            { id: '2', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/glass_on_table.webp' },
+            { id: '3', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/cat_on_table.jpg' },
+            { id: '4', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/juice_on_table_spilled.webp' }],
+        PracticeMode: true,
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    const drop_cells = args.images.map((img, index) => {
+        return `
+    <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">
+		<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%';">
+		</lido-text>
+		<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';">
+		</lido-text>
+	</lido-cell>
+  `;
+    }).join('');
+    const shuffledOptions = [...args.images].sort(() => Math.random() - 0.5);
+    const drag_cells = shuffledOptions.map((img, index) => {
+        return `
+      <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>
+  `;
+    }).join('');
+    // ---------------------- FINAL XML ----------------------
+    return `
+<main>
+<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 {
+        border: none !important;
+		box-shadow:
+			inset -10px 10px 10px 0 rgba(0, 0, 0, 0.25);
+        }">
+	 <!-- Chimple Avatar -->
+      <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.330px,portrait.378px" width="landscape.300px,portrait.382px"
+       x="landscape.86%, portrait.30%" y="landscape.34%, portrait.78%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
+        <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}">
+        </lido-avatar>
+		<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>
+      </lido-cell>
+
+        <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';">
+            <!-- question cell -->				
+            <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">
+      		</lido-text>
+          
+
+          <!--drop cells -->
+	      	<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">		
+				${drop_cells}
+			</lido-cell>
+
+
+			<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">
+                ${drag_cells}
+			</lido-cell>        
+             
+        </lido-cell>                  
+
+</lido-container>
+</main>
+`;
+}

package/dist/collection/stories/Templates/palEgra_build_word/palEgra_build_word.stories.js

@@ -0,0 +1,78 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/palEgraBuildWord',
+    argTypes: {
+        options: { control: 'object' },
+        PracticeMode: { control: 'boolean' },
+    },
+};
+export default meta;
+export const palEgraBuildWord = {
+    args: {
+        question_text: 'Listen to the word and build it with the letters below',
+        question_word: ['dance'],
+        PracticeMode: true,
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    const word = args.question_word[0]; // "dance"
+    const letters = [...word]; // ["d", "a", "n", "c", "e"]
+    const drop_cells = letters.map((q, index) => {
+        return `
+    <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';">
+	</lido-text>
+  `;
+    }).join('');
+    const shuffledOptions = [...letters].sort(() => Math.random() - 0.5);
+    const drag_cells = shuffledOptions.map((q, index) => {
+        return `
+    <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';">
+	</lido-text>
+  `;
+    }).join('');
+    // ---------------------- FINAL XML ----------------------
+    return `
+<main>
+<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 {
+        border: 2px solid #FFB612 !important;
+        }">
+	   <!-- Chimple Avatar -->
+      <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.330px,portrait.378px" width="landscape.300px,portrait.382px"
+       x="landscape.82%, portrait.30%" y="landscape.32%, portrait.78%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
+        <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}">
+        </lido-avatar>
+		<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>
+      </lido-cell>
+
+        <lido-cell layout="landscape.col, portrait.row" aria-hidden="true" visible="true" height="landscape.82%,portrait.150px" width="landscape.98%, portrait.80%" bg-Color="transparent" margin="landscape.94px 0px 0px 0px,portrait.20px 0px 0px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.alignItems='center'; this.gap='73px';">
+            <!-- question cell -->				
+            <lido-text tab-index="111" visible="true" id="lido-question" width="landscape.93%, portrait.80%" height="60px" bg-color="#FFF5BB" string="${args.question_text}" border-radius="16px" onEntry="this.border='2px solid #FFB612'; this.fontWeight='700'; this.padding='50px';" font-size="60px" font-color="#07004E" font-family="'Baloo Bhai 2'">
+      		</lido-text>
+          
+
+          <!-- options cells -->
+	      	<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">
+				<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}">
+					<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>
+				</lido-text>
+				
+				<!-- drop cells -->
+				<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">
+					${drop_cells}
+				</lido-cell>
+			</lido-cell>
+
+
+			<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">
+                ${drag_cells}
+			</lido-cell>        
+             
+        </lido-cell>
+</lido-container>
+</main>
+`;
+}

package/dist/collection/stories/Templates/palEgra_word_formation/palEgra_WordFormation.stories.js

@@ -0,0 +1,73 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/palEgraWordFormation',
+    argTypes: {
+        options: { control: 'object' },
+        PracticeMode: { control: 'boolean' },
+    },
+};
+export default meta;
+export const palEgraWordFormation = {
+    args: {
+        image: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/madari.jpg'],
+        options: ['म', 'दा', 'री'],
+        PracticeMode: true,
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    const drop_cells = args.options.map((q, index) => {
+        return `
+    <lido-text visible="true" id="drop${index + 1}" tab-index="${12 + index}" value="${q}" string="?" font-family="'Baloo Bhai 2'" width="173px" height="189px" font-color="#030028" font-size="landscape.140px, portrait.100px"  bg-color="#FFFFFF"  type="drop" onEntry="this.fontWeight='700'; this.border-radius='16px';">
+	</lido-text>
+  `;
+    }).join('');
+    const shuffledOptions = [...args.options].sort(() => Math.random() - 0.5);
+    const drag_cells = shuffledOptions.map((q, index) => {
+        return `
+      <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="#030028" font-size="landscape.140px, portrait.100px"  bg-color="#A05730"  type="drag" onEntry="this.fontWeight='700'; this.border-radius='16px'; this.justifyContent='center'; this.alignItems='baseline';">
+	  </lido-text>
+  `;
+    }).join('');
+    // ---------------------- FINAL XML ----------------------
+    return `
+<main>
+<lido-container  visible="true" id="lido-container" template-id="dragAndDrop" 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/palEgraTemp6_bg.png" objective="${args.options.join(',')}" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" custom-style= "#drop1, #drop2, #drop3, #drop4 {
+        border: 2px solid #FFB612 !important;
+        }">
+	  <!-- Chimple Avatar -->
+      <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.330px,portrait.378px" width="landscape.300px,portrait.382px"
+       x="landscape.62%, portrait.30%" y="landscape.35%, portrait.78%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
+        <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}">
+        </lido-avatar>
+      </lido-cell>
+
+        <lido-cell layout="landscape.row, portrait.row" aria-hidden="true" visible="true" height="landscape.100%,portrait.150px" width="landscape.98%, 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='73px';">
+            <!-- image cell -->
+          <lido-cell layout="landscape.row, portrait.col" tab-index="11" visible="true" margin="landscape.0px 0px 0px 0px,portrait.-168px 0px 0px 0px" onEntry="this.border='11px solid #FFFFFF'; this.justify-content='center'; this.align-items='center';" height="landscape.600px,portrait.42%" width="landscape.600px,portrait.100%" bg-color="#FFF5BB">				
+            <lido-image type="text" margin="landscape.0px,portrait.0px 0px 0px 0px" id="" visible="true" src="${args.image}" width="100%" height="100%" onTouch="this.speak='true'">
+			</lido-image>  
+          </lido-cell>
+
+          
+	      	<lido-cell layout="landscape.col, portrait.col" visible="true" margin="landscape.0px,portrait.0" onEntry="this.border-radius='26px';" height="landscape.84%,portrait.35%" width="landscape.51%,portrait.100%" bg-color="transparent" gap="240px">
+                <!-- drop cells -->
+				<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="23px">
+					${drop_cells}
+				</lido-cell>
+
+                <!-- drag cells -->
+				<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="transparent" padding="0px 13px 0px 17px" gap="23px">
+					${drag_cells}
+				</lido-cell>          
+            </lido-cell>
+        </lido-cell>
+                  
+
+</lido-container>
+</main>
+`;
+}

package/dist/collection/stories/Templates/palStorytale/palStorytale.stories.js

@@ -0,0 +1,35 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/palStorytale',
+};
+export default meta;
+export const AmazingStories = {
+    args: {
+        content: 'One hot day, a crow was very thirsty.It flew here and there looking for water. At last, it found a pitcher with a little water at the bottom. The crow tried to drink but could not reach the water. Then the crow had an idea. It dropped small stones into the pitcher. Slowly, the water rose up. The crow drank the water and flew away happily.',
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    return `<main>
+    <lido-container show-prev-button="false" show-next-button="true" id="lido-container" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palStory/bgImage.png" height="1600px" width="900px" value="mainContainer4" objective="" aria-label="" x="0" y="0" z="0" visible="true" audio="" onTouch="" onCorrect="" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true">
+		<lido-cell layout="row" id="cell1" visible="true" margin="82px 203px 0px 0px"  value="cell1" width="landscape.100%,portrait.86%" height="landscape.82%,portrait.80%" x="50px" y="50px" bg-color="transparent"  onEntry="" >
+				
+			<lido-text id="text1" tab-index="1"   value="text1" visible="true" width="landscape.100%,portrait.90%" height="100%" bg-color="#FFF5BB" font-family="Baloo Bhai 2" font-size="60px" font-color="#000" string='${args.content}' onEntry="this.border='2px solid #FFB612'; this.fontWeight='600';this.padding='0px 40px 0px 40px'; this.boxShadow='unset'; this.border-radius='16px'; this.textAlign='start'; this.speak='true';">
+			</lido-text>
+		</lido-cell>
+			
+		<!-- below is the code for avatar -->
+
+		<lido-pos id="pos1" disable-edit="true" value="pos1" height="350px" width="350px" x="landscape.91%, portrait.580px" y="landscape.56%, portrait.1350px" aria-hidden="true" z="1" bg-color="transparent" type="" visible="true" audio="col1.mp3" onTouch="" onCorrect="">
+			<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="350px" width="350px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+			</lido-avatar>
+				<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="186px" height="20px" x="77px" y="305px" alt-text="{shadowImage}">
+				</lido-image>
+		</lido-pos>
+	</lido-container>
+
+	</main>`;
+}

package/dist/collection/stories/Templates/pictureClues/pictureClues.stories.js

@@ -0,0 +1,88 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/pictureClues',
+    argTypes: {
+        option1: { control: 'text' },
+        option2: { control: 'text' },
+        option3: { control: 'text' },
+        option4: { control: 'text' },
+        option5: { control: 'text' },
+        img1: { control: 'file' },
+        sentenceParts: { control: 'object' },
+        answer: { control: 'text' },
+        isAllowOnlyCorrect: { control: 'boolean' },
+    },
+};
+export default meta;
+export const pictureClues = {
+    args: {
+        option1: "विद्यालय",
+        option2: "पानी",
+        option3: "पाठ",
+        option4: "बस",
+        option5: "बाजा",
+        sentenceParts: [
+            'ज़ोर ज़ोर से',
+            '#बाजा',
+            'बजा।।'
+        ],
+        isAllowOnlyCorrect: true,
+        img1: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picture_Clues/f1.png",
+        answer: "बाजा",
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function renderSentencePart(text, id) {
+    // DROP case
+    if (text.startsWith('#')) {
+        const value = text.replace('#', '').trim();
+        return `
+      <lido-text type="drop" drop-attr="stretch" value="${value}" id="${id}" visible="true" height="136px" width="200px" y="19px" onEntry="this.position='relative';this.margin-right='40px';this.border='4px solid #A8B53A';this.border-radius='16px';"></lido-text>
+    `;
+    }
+    // NORMAL TEXT case
+    return `
+    <lido-text visible="true" height="100px" width="auto" id="${id}" string="${text}" font-family="'Baloo Bhai 2'" font-color="black" font-size="80px" bg-color="transparent" onEntry="  this.font-weight='700';  this.border-radius='16px';  this.margin-right='40px'; " ></lido-text>
+  `;
+}
+function getContainerXml(args) {
+    let tabCounter = 1;
+    const { isAllowOnlyCorrect = true } = args;
+    const { sentenceParts = [] } = args;
+    return `<main>
+    <lido-container show-drop-border="false" visible="true" template-id="dragAndDrop" id="lido-container" objective="बाजा" 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="true" is-allow-only-correct="${isAllowOnlyCorrect}" onEntry="inst.speak='true';">
+
+    <!-- Chimple Avatar -->
+    <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.344px,portrait.402px" width="landscape.296px,portrait.398px" x="landscape.85%, portrait.28%" y="landscape.21%, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true">
+        <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="">
+        </lido-avatar>
+    </lido-cell>
+
+    <lido-text visible="false" id="inst" tab-index="1" string="drag and drop the correct option to form a sentence"></lido-text>
+
+    <lido-cell visible="true" layout="col" height="85%" width="98%" bg-color="transparent" margin="61px 0px -58px 0px">
+        <lido-cell layout="row" visible="true" height="330px" width="330px" bg-color="transparent">
+            <lido-image   tab-index="8"  visible="true" height="auto" width="auto" src="${args.img1}"></lido-image>
+    
+            </lido-cell>
+        <lido-cell layout="flex" visible="true" height="270px" width="auto" onEntry="this.display='ruby';" bg-color="transparent">
+          ${sentenceParts
+        .map((part, index) => renderSentencePart(part, `sentence-${index}`))
+        .join('')}
+        </lido-cell>
+        <lido-cell layout="row" visible="true" height="270px" width="90%" bg-color="transparent" onEntry="this.align-items='center';this.justify-content='space-around';">
+            <lido-text visible="true" height="136px" width="auto" type="drag" id="drag1" tab-index="2" string="${args.option1}" value="${args.option1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="80px"  bg-color="#FFAC4C" onEntry="this.font-weight='700';this.padding='10px 45px 10px 45px'; this.border-radius='16px';" ></lido-text>
+            <lido-text visible="true" height="136px" width="auto" type="drag" id="drag2" tab-index="3" string="${args.option2}" value="${args.option2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="80px"  bg-color="#FFAC4C" onEntry="this.font-weight='700';this.padding='10px 45px 10px 45px';this.border-radius='16px';" ></lido-text>
+            <lido-text visible="true" height="136px" width="auto" type="drag" id="drag3" tab-index="4" string="${args.option3}" value="${args.option3}" font-family="'Baloo Bhai 2'" font-color="black" font-size="80px"  bg-color="#FFAC4C" onEntry="this.font-weight='700';this.padding='10px 45px 10px 45px';this.border-radius='16px';" ></lido-text>
+            <lido-text visible="true" height="136px" width="auto" type="drag" id="drag4" tab-index="5" string="${args.option4}" value="${args.option4}" font-family="'Baloo Bhai 2'" font-color="black" font-size="80px"  bg-color="#FFAC4C" onEntry="this.font-weight='700';this.padding='10px 45px 10px 45px';this.border-radius='16px';" ></lido-text>
+            <lido-text visible="true" height="136px" width="auto" type="drag" id="drag5" tab-index="6" string="${args.option5}" value="${args.option5}" font-family="'Baloo Bhai 2'" font-color="black" font-size="80px"  bg-color="#FFAC4C" onEntry="this.font-weight='700';this.padding='10px 45px 10px 45px';this.border-radius='16px';" ></lido-text>
+        
+        </lido-cell>
+    </lido-cell>
+
+</lido-container>
+  </main>`;
+}