lido-player 0.0.2-alpha-57-dev → 0.0.2-alpha-59-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_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/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" onEntry="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="row" visible="true" height="270px" width="auto" 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>`;
+}

package/dist/collection/stories/Templates/pictureWordMatch/pictureWordMatch1.stories.js

@@ -0,0 +1,88 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/pictureWordMatch1',
+    argTypes: {
+        option1: { control: 'text' },
+        option2: { control: 'text' },
+        option3: { control: 'text' },
+        option4: { control: 'text' },
+        option5: { control: 'text' },
+        img1: { control: 'file' },
+        img2: { control: 'file' },
+        img3: { control: 'file' },
+        img4: { control: 'file' },
+        img5: { control: 'file' },
+        answer1: { control: 'text' },
+        answer2: { control: 'text' },
+        answer3: { control: 'text' },
+        answer4: { control: 'text' },
+        answer5: { control: 'text' },
+        isAllowOnlyCorrect: { control: 'boolean' },
+    },
+};
+export default meta;
+export const pictureWordMatch1 = {
+    args: {
+        option1: "boy",
+        option2: "cat",
+        option3: "bag",
+        option4: "sun",
+        option5: "dog",
+        isAllowOnlyCorrect: true,
+        img1: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palEgra-pictureWordMatch/CAT.png",
+        img2: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palEgra-pictureWordMatch/SUN.png ",
+        img3: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palEgra-pictureWordMatch/BAG.png",
+        img4: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palEgra-pictureWordMatch/BOY.png",
+        img5: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palEgra-pictureWordMatch/DOG.png",
+        answer1: "cat",
+        answer2: "sun",
+        answer3: "bag",
+        answer4: "boy",
+        answer5: "dog",
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    let tabCounter = 1;
+    const { isAllowOnlyCorrect = true } = args;
+    return `<main>
+   <lido-container show-drop-border="false"  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="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.94%, portrait.28%" y="landscape.61%, 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="{chimpleCharacterRive}">
+			</lido-avatar>
+		</lido-cell>
+		<lido-text visible="false" id="inst" tab-index="1" string="drag and drop the correct option to match the picture given"></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="270px" width="90%" bg-color="transparent">
+    <lido-image visible="true" height="261px" width="260px" src="${args.img1}"></lido-image>
+    <lido-image visible="true" height="261px" width="260px" src="${args.img2}"></lido-image>
+    <lido-image visible="true" height="261px" width="260px" src="${args.img3}"></lido-image>
+    <lido-image visible="true" height="261px" width="260px" src="${args.img4}"></lido-image>
+    <lido-image visible="true" height="261px" width="260px" src="${args.img5}"></lido-image>
+  </lido-cell>
+  <lido-cell visible="true" layout="row" height="270px" width="90%" bg-color="transparent">
+    <lido-image type="drop" value="${args.answer1}" tab-index="8" id="drop1" visible="true" height="122px" width="225px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palEgra-pictureWordMatch/dropimg.png"></lido-image>
+    <lido-image type="drop" value="${args.answer2}" id="drop2" tab-index="9" visible="true" height="122px" width="225px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palEgra-pictureWordMatch/dropimg.png"></lido-image>
+    <lido-image type="drop" value="${args.answer3}" id="drop3" tab-index="10" visible="true" height="122px" width="225px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palEgra-pictureWordMatch/dropimg.png"></lido-image>
+    <lido-image type="drop" value="${args.answer4}" id="drop4" tab-index="11" visible="true" height="122px" width="225px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palEgra-pictureWordMatch/dropimg.png"></lido-image>
+    <lido-image type="drop" value="${args.answer5}" id="drop5" tab-index="12" visible="true" height="122px" width="225px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palEgra-pictureWordMatch/dropimg.png"></lido-image>
+  </lido-cell>
+  <lido-cell visible="true" layout="row"  height="270px" width="90%" bg-color="transparent" onEntry="this.align-items='center';this.justify-content='space-around';">
+    <lido-text visible="true" height="122px" width="225px" 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.border-radius='16px';" ></lido-text>
+    <lido-text visible="true" height="122px" width="225px" 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.border-radius='16px';" ></lido-text>
+    <lido-text visible="true" height="122px" width="225px" 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.border-radius='16px';" ></lido-text>
+    <lido-text visible="true" height="122px" width="225px" 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.border-radius='16px';" ></lido-text>
+    <lido-text visible="true" height="122px" width="225px" 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.border-radius='16px';" ></lido-text>
+  </lido-cell>
+
+</lido-cell>
+
+	</lido-container>
+  </main>`;
+}

package/dist/collection/stories/Templates/pictureWordMatch/pictureWordMatch2.stories.js

@@ -0,0 +1,66 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/pictureWordMatch2',
+    argTypes: {
+        option1: { control: 'text' },
+        option2: { control: 'text' },
+        option3: { control: 'text' },
+        option4: { control: 'text' },
+        option5: { control: 'text' },
+        img1: { control: 'file' },
+        answer: { control: 'text' },
+        isAllowOnlyCorrect: { control: 'boolean' },
+    },
+};
+export default meta;
+export const pictureWordMatch2 = {
+    args: {
+        option1: "boy",
+        option2: "cat",
+        option3: "bag",
+        option4: "sun",
+        option5: "dog",
+        isAllowOnlyCorrect: true,
+        img1: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palEgra-pictureWordMatch/CAT.png",
+        answer: "cat",
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    let tabCounter = 1;
+    const { isAllowOnlyCorrect = true } = args;
+    return `<main>
+   <lido-container show-drop-border="false"  visible="true" template-id="dragAndDrop" id="lido-container" objective="${args.answer}" 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.94%, portrait.28%" y="landscape.61%, 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="{chimpleCharacterRive}">
+			</lido-avatar>
+		</lido-cell>
+		<lido-text visible="false" id="inst" tab-index="1" string="drag and drop the correct option to match the picture given"></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="335px" width="90%" bg-color="transparent">
+    <lido-image visible="true" height="330px" width="330px" src="${args.img1}"></lido-image>
+    
+  </lido-cell>
+  <lido-cell visible="true" layout="row" height="270px" width="90%" bg-color="transparent">
+    <lido-image type="drop" value="${args.answer}" tab-index="8" id="drop1" visible="true" height="122px" width="225px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palEgra-pictureWordMatch/dropimg.png"></lido-image>
+    
+  </lido-cell>
+  <lido-cell visible="true" layout="row"  height="270px" width="90%" bg-color="transparent" onEntry="this.align-items='center';this.justify-content='space-around';">
+    <lido-text visible="true" height="122px" width="225px" 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.border-radius='16px';" ></lido-text>
+    <lido-text visible="true" height="122px" width="225px" 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.border-radius='16px';" ></lido-text>
+    <lido-text visible="true" height="122px" width="225px" 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.border-radius='16px';" ></lido-text>
+    <lido-text visible="true" height="122px" width="225px" 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.border-radius='16px';" ></lido-text>
+    <lido-text visible="true" height="122px" width="225px" 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.border-radius='16px';" ></lido-text>
+  </lido-cell>
+
+</lido-cell>
+
+	</lido-container>
+  </main>`;
+}

package/dist/collection/stories/Templates/picturemeaning/pictureMeaningCocos.stories.js

@@ -35,7 +35,7 @@ function getContainerXml(args) {
 				<lido-text visible="true" id="drag2" width="landscape.700px, portrait.470px" tab-index="2" audio="" string="${args.drag2}" value="${args.drag2}" font-size="landscape.72px, portrait.62px" font-color="black" onEntry="this.fontWeight='500'; this.lineHeight='80px';" border-radius="16px" bg-color="white" type="drag" padding="10px"></lido-text>
 				<lido-text visible="true" id="drag3" width="landscape.700px, portrait.470px" tab-index="3" audio="" string="${args.drag3}" value="${args.drag3}" font-size="landscape.72px, portrait.62px" font-color="black" onEntry="this.fontWeight='500'; this.lineHeight='80px';" border-radius="16px" bg-color="white" type="drag" padding="10px"></lido-text>
 			</lido-cell>
-			<lido-cell visible="true" layout="col" width="landscape.30%, portrait.40%" height="90%" bg-color="transparent" onEntry="this.alignItems='end';">
+			<lido-cell visible="true" layout="col" border-radius="15px" width="landscape.20%, portrait.40%" height="90%" bg-color="#fbcab5" >
 				<lido-image visible="true" id="drop1" width="landscape.240px, portrait.300px" tab-index="4" audio="" height="landscape.240px, portrait.300px" type="drop" border-radius="6px" value="${args.drop1}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picturemeaning/hygiene%201.png" bg-color="white"></lido-image>
 				<lido-image visible="true" id="drop2" width="landscape.240px, portrait.300px" tab-index="5" audio="" height="landscape.240px, portrait.300px" type="drop" border-radius="6px" value="${args.drop2}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picturemeaning/healthy_food.png" bg-color="white"></lido-image>
 				<lido-image visible="true" id="drop3" width="landscape.240px, portrait.300px" tab-index="6" audio="" height="landscape.240px, portrait.300px" type="drop" border-radius="6px" value="${args.drop3}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picturemeaning/hospital_with_patients.png" bg-color="white"></lido-image>