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

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>

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

@@ -280,7 +280,7 @@ function getContainerXml2(args) {
       onEntry="this.border-radius='14px';" bg-color="" onTouch="this.speak='true';" string="${args.question1}" font-color="white"
       font-size="1px">
         <lido-image visible="true"
-          src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Audio%20icon.svg"
+          src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/audio.png"
           width="96px">
         </lido-image>
     </lido-text>
@@ -299,7 +299,7 @@ function getContainerXml2(args) {
       onEntry="this.border-radius='14px';" bg-color="" onTouch="this.speak='true';" string="${args.answer}" font-color="white"
       font-size="1px">
         <lido-image visible="true"
-          src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Audio%20icon.svg"
+          src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/audio.png"
           width="96px">
         </lido-image>
     </lido-text>
@@ -329,7 +329,7 @@ function getContainerXml2(args) {
       font-color="white"
       font-size="1px">
         <lido-image visible="true"
-          src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Audio%20icon.svg"
+          src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/audio.png"
           width="100%">
         </lido-image>
     </lido-text>
@@ -501,7 +501,7 @@ export const word_problem = {
         question2: 'George went to a store and bought some t-shirts. He went to another store and bought 2 more t-shirts. He bought a total of 15 t-shirts. How many t-shirts did he buy at the first store?',
         answer: '13',
         options: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
-        images: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Audio%20icon.svg'],
+        images: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/audio.png'],
         isAllowOnlyCorrect: true,
         isContinueOnCorrect: true,
     },
@@ -605,7 +605,7 @@ function getContainerXml3(args) {
         : `
           <lido-cell  layout="col" visible="true" margin="landscape.22px 0px 0px 0px, portrait.-110px 0px 0px 0px" height="landscape.62%,portrait.40%" width="landscape.96%,portrait.100%" bg-color="transparent" onEntry="this.justifyContent='center';" gap="82px">
               <lido-text id="text12" visible="true" margin="landscape.0px,portrait.0px" onEntry="this.border-radius='14px';" height="177px" width="landscape.236px,portrait.34%" bg-color="" onTouch="this.speak='true';" string="${args.answer}" font-color="white" font-size="1px">
-                <lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Audio%20icon.svg"
+                <lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/audio.png"
                 width="100%">
                 </lido-image>
                 </lido-text>
@@ -776,7 +776,7 @@ function getContainerXml5(args) {
 		<lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.156px 0px 0px -154px,portrait.-168px 0px 0px 0px" onEntry="this.border-radius='26px';" height="landscape.390px,portrait.42%" width="landscape.86%,portrait.100%" bg-color="transparent">
 
 			<lido-text visible="true" margin="" id="t11" onEntry="this.border-radius='14px';" bg-color="" onTouch="this.speak='true';" string="Order the numbers from smallest to largest." font-color="white" font-size="1px">
-				<lido-image type="text" margin="landscape.-244px 0px 0px 0px,portrait.0px 0px 0px 0px" id="" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Audio%20icon.svg" width="100px" height="127px" onTouch="this.speak='true'">
+				<lido-image type="text" margin="landscape.-244px 0px 0px 0px,portrait.0px 0px 0px 0px" id="" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/audio.png" width="100px" height="127px" onTouch="this.speak='true'">
 				</lido-image>
 			</lido-text>
 				
@@ -974,7 +974,7 @@ function getContainerXml6(args) {
       onEntry="this.border-radius='14px';" bg-color="" onTouch="this.speak='true';" string="${args.question1}" font-color="white"
       font-size="1px">
         <lido-image visible="true"
-          src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Audio%20icon.svg"
+          src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/audio.png"
           width="96px">
         </lido-image>
     </lido-text>

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

@@ -50,7 +50,7 @@ function getContainerXml(args) {
         }" is-allow-only-correct="${isAllowOnlyCorrect}">
 
         <!-- Audio -->
-        <lido-text visible="false" id="audio12" onEntry="this.display='none';" string="Drag the missing number to its correct place and complete the number puzzle."></lido-text>
+        <lido-text visible="false" id="audio12" tab-index="${tabCounter++}" onEntry="this.display='none';" string="Drag the missing number to its correct place and complete the number puzzle."></lido-text>
         
         <!-- Chimple Avatar -->
         <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" x="landscape.1432px,portrait.330px" y="landscape.612px, portrait.1338px" aria-hidden="true" z="9999" bg-color="transparent" visible="true" onEntry="" margin="-104px 0px 0px -54px">

package/dist/collection/stories/Templates/sequenceBox/sequenceBox1.stories.js

@@ -37,7 +37,7 @@ function getContainerXml(args) {
     const objectiveArray = missingNumber.split('');
     const dropCells = objectiveArray
         .map((cell, i) => `
-        <lido-text id="drop-${cell}" tab-index="${25 + i}" disable-edit="true" height="landscape.165px, portrait.125px" width="125px" visible="true" value="${cell}" string="?" font-family="'Baloo Bhai 2'" font-color="#FFC805" type="drop" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px';" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png">
+        <lido-text id="drop-${cell}" tab-index="${25 + i}" disable-edit="true" height="landscape.140px, portrait.125px" width="110px" visible="true" value="${cell}" string="?" font-family="'Baloo Bhai 2'" font-color="#FFC805" type="drop" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.border='1px solid white';" >
         </lido-text>
       `)
         .join('\n');
@@ -84,7 +84,7 @@ function getContainerXml(args) {
               <lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="this.boxAnimate='true';">
                 <lido-image is-slice="true" bg-color="transparent" id="drop-image4" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
                 </lido-image>
-                <lido-image is-slice="true" bg-color="transparent" id="drop-image5" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
+                <lido-image is-slice="true" bg-color="transparent" id="drop-image2" disable-edit="true" tab-index="27" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" onEntry="this.gap='10px';">
                   ${dropCells}
                 </lido-image>
               </lido-cell>

package/dist/collection/stories/Templates/sequenceBox/sequenceBox2.stories.js

@@ -77,8 +77,8 @@ function getContainerXml(args) {
 				<lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="this.boxAnimate='true';">
 					<lido-image is-slice="true" bg-color="transparent" id="drop-image4" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
 					</lido-image>
-					<lido-image is-slice="true" bg-color="transparent" id="drop-image5" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
-						<lido-text id="drop-3" tab-index="5" disable-edit="true" height="landscape.155px, portrait.125px" width="295px" visible="true" value="${missingNumber}" string="?" font-family="'Baloo Bhai 2'" font-color="#FFC805" type="drop" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px';';" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png">
+					<lido-image is-slice="true" bg-color="transparent" id="drop-image2" disable-edit="true" tab-index="27" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
+						<lido-text id="drop-${missingNumber}" tab-index="${missingNumber}" disable-edit="true" height="landscape.130px, portrait.125px" width="250px" visible="true" value="${missingNumber}" string="?" font-family="'Baloo Bhai 2'" font-color="#FFC805" type="drop" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.border='1px solid white';" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png">
 						</lido-text>
 					</lido-image>
 				</lido-cell>

package/dist/collection/stories/Templates/substraction/substractionWithimg.stories.js

@@ -0,0 +1,111 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/substractionWithimg',
+    argTypes: {
+        option1: { control: 'text' },
+        option2: { control: 'text' },
+        option3: { control: 'text' },
+        option4: { control: 'text' },
+        text1: { control: 'text' },
+        text2: { control: 'text' },
+        answer: { control: 'text' },
+        isAllowOnlyCorrect: { control: 'boolean' },
+    },
+};
+export default meta;
+export const substractionWithimg = {
+    args: {
+        option1: "2",
+        option2: "3",
+        option3: "8",
+        option4: "4",
+        isAllowOnlyCorrect: true,
+        text1: "5",
+        text2: "2",
+        answer: "3",
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function generateImages(count, src) {
+    let images = '';
+    for (let i = 0; i < Number(count); i++) {
+        images += `
+      <lido-image
+        visible="true"
+        height="100px"
+        width="100px"
+        src="${src}">
+      </lido-image>
+    `;
+    }
+    return images;
+}
+const SOLID_IMAGE = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/pal-Subtraction/image5.png';
+const OUTLINE_IMAGE = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/aplle%20outlinee.png';
+function getContainerXml(args) {
+    let tabCounter = 1;
+    const { isAllowOnlyCorrect = true } = args;
+    const solidText1Images = generateImages(args.answer, SOLID_IMAGE);
+    const solidText2Images = generateImages(args.text2, SOLID_IMAGE);
+    const actualAddImages = generateImages(args.answer, SOLID_IMAGE);
+    const actualMinusImages = generateImages(args.text2, OUTLINE_IMAGE);
+    return `<main>
+   <lido-container  visible="true" id="lido-container" template-id="mcq" objective="${args.answer}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/pal-Subtraction/Frame.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="solid.z-index='2';this.sleep='1000';text2.animation='placeToRight 2s linear';this.sleep='1000';actual.z-index='10';">
+
+		<!-- 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.83%, portrait.28%" y="landscape.40%, 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="choose the correct option"></lido-text>
+<lido-cell visible="true" id="solid" layout="row" width="auto" bg-color="#FFF5BB" y="14%" onEntry="this.padding='10px 18px 10px 18px';this.position='relative';this.justifyContent='space-around';this.border='2px solid #FFA500'; this.borderRadius='16px';this.gap='0px';">
+			<lido-cell layout="row" id="text1" visible="true">
+				 ${solidText1Images}
+			</lido-cell>	
+			<lido-cell layout="row" visible="true" id="text2" bg-color="transparent">
+				 ${solidText2Images}
+			</lido-cell>
+			
+			
+			</lido-cell>
+			<lido-cell visible="true" id="actual" layout="row" width="auto" bg-color="#FFF5BB" onEntry="this.padding='10px 18px 10px 18px';this.justifyContent='space-around';this.border='2px solid #FFA500'; this.borderRadius='16px';this.gap='0px';">
+				<lido-cell visible="true" id="add" layout="row">
+				 ${actualAddImages}
+				</lido-cell>
+				<lido-cell visible="true" id="minus" layout="row">
+					${actualMinusImages}
+				</lido-cell>
+			</lido-cell>
+			
+		<lido-cell visible="true" layout="col" height="58%" width="90%" bg-color="transparent" y="0%" onEntry="this.align-items='center';this.justify-content='space-around';this.position='relative';" >
+			
+			<lido-cell layout="row" visible="true" height="400px" width="825px" onEntry="this.align-items='center'; this.justify-content='space-around';">
+				<lido-text visible="true" id="text1" tab-index="2" string="${args.text1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 
+					onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" id="text2" tab-index="3" string="-"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 
+					onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" id="text3" tab-index="4" string="${args.text2}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 
+					onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" id="text4" tab-index="5" string="="  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 
+					onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" id="answer"  tab-index="6" height="184px" width="130px" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="#FFF5BBB2" value="2"
+					onEntry="this.fontWeight='700';this.border='2px solid #FFB612';this.border-radius='16px';" ></lido-text>	
+						
+			</lido-cell>
+			<lido-cell layout="row" visible="true" width="84%" height="300px">
+				<lido-text visible="true" value="${args.option1}" type="click" id="option1" tab-index="8" bg-color="#FFAC4C" height="212.4px" width="280px" string="${args.option1}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" value="${args.option2}" type="click" id="option2" tab-index="9" bg-color="#FFAC4C" height="212.4px" width="280px" string="${args.option2}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" value="${args.option3}" type="click" id="option3" tab-index="10" bg-color="#FFAC4C" height="212.4px" width="280px" string="${args.option3}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" type="click" value="${args.option4}" id="option4" tab-index="11" bg-color="#FFAC4C" height="212.4px" width="280px" string="${args.option4}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				
+
+
+			</lido-cell>
+		</lido-cell>
+
+	</lido-container>
+  </main>`;
+}

package/dist/collection/stories/Templates/substraction/substractionWithoutImg.stories.js

@@ -0,0 +1,70 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/substractionWithoutImg',
+    argTypes: {
+        text1: { control: 'text' },
+        text2: { control: 'text' },
+        answers: { control: 'text' },
+        isAllowOnlyCorrect: { control: 'boolean' },
+    },
+};
+export default meta;
+export const substractionWithoutImg = {
+    args: {
+        text1: "36",
+        text2: "12",
+        answers: "2,4",
+        isAllowOnlyCorrect: true,
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    const { isAllowOnlyCorrect = true } = args;
+    let tabCounter = 1;
+    return `<main>
+   <lido-container  drop-action="infinite-drop" visible="true" template-id="dragAnDrop" id="lido-container" objective="${args.answers}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/pal-Subtraction/Frame.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';text1.speak='true';text2.speak='true';text3.speak='true';text4.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.83%, portrait.28%" y="landscape.40%, 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"></lido-text>
+
+		<lido-cell visible="true" layout="col" height="95%" width="90%" bg-color="transparent" y="9%" onEntry="this.align-items='center';this.justify-content='space-around';this.position='relative';" >
+			<lido-cell layout="row" visible="true" height="400px" width="825px" onEntry="this.align-items='center'; this.justify-content='space-around';">
+				<lido-text visible="true" id="text1" tab-index="2" string="${args.text1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 
+					onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" id="text2" tab-index="3" string="-"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 
+					onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" id="text3" tab-index="4" string="${args.text2}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 
+					onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" id="text4" tab-index="5" string="="  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 
+					onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" id="drop1" type="drop" tab-index="6" height="212px" width="130px" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="#FFF5BBB2" value="2"
+					onEntry="this.fontWeight='700';this.border='2px solid #FFB612';this.border-radius='16px';" ></lido-text>	
+					<lido-text visible="true" type="drop" value="4" id="drop2" tab-index="7" height="212px" width="130px" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="#FFF5BBB2" 
+					onEntry="this.fontWeight='700';this.border='2px solid #FFB612';this.border-radius='16px';" ></lido-text>	
+			</lido-cell>
+			<lido-cell layout="row" visible="true" width="108%" height="300px">
+				<lido-text visible="true" type="drag" id="option1" tab-index="8" bg-color="#FFAC4C" height="212px" width="130px" string="0"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" value="1" type="drag" id="option2" tab-index="9" bg-color="#FFAC4C" height="212px" width="130px" string="1"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" value="2" type="drag" id="option3" tab-index="10" bg-color="#FFAC4C" height="212px" width="130px" string="2"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" type="drag" value="3" id="option4" tab-index="11" bg-color="#FFAC4C" height="212px" width="130px" string="3"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" type="drag" value="4" id="option5" tab-index="12" bg-color="#FFAC4C" height="212px" width="130px" string="4"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" type="drag" value="5" id="option6" tab-index="13" bg-color="#FFAC4C" height="212px" width="130px" string="5"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" type="drag" id="option7" value="6" tab-index="14" bg-color="#FFAC4C" height="212px" width="130px" string="6"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" type="drag" value="7" id="option8" tab-index="15" bg-color="#FFAC4C" height="212px" width="130px" string="7"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" value="8" type="drag" id="option9" tab-index="16" bg-color="#FFAC4C" height="212px" width="130px" string="8"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" value="9" type="drag" id="option10" tab-index="17" bg-color="#FFAC4C" height="212px" width="130px" string="9"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+
+
+			</lido-cell>
+		</lido-cell>
+
+	</lido-container>
+  </main>`;
+}

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

@@ -36,6 +36,8 @@ function getContainerXml(args) {
 		<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" audio="" onEntry="this.speak='true';" bg-color="red" string="Count the number of objects in the left and click the number on the number board">
+  </lido-text>
 
       <!-- Main Layout -->
       <lido-cell layout="landscape.row,portrait.col" y="landscape.3%,portrait.0px" onEntry="this.position='relative';" visible="true" width="90%" height="90%" bg-color="transparent">

package/dist/collection/stories/Templates/wordBuilding/wordBuildingwithimg.stories.js

@@ -0,0 +1,76 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/wordBuildingwithimg',
+    argTypes: {
+        option1: { control: 'text' },
+        option2: { control: 'text' },
+        option3: { control: 'text' },
+        option4: { control: 'text' },
+        option5: { control: 'text' },
+        letter1: { control: 'text' },
+        letter2: { control: 'text' },
+        img: { control: 'file' },
+        word: { control: 'text' },
+        answer: { control: 'text' },
+        isAllowOnlyCorrect: { control: 'boolean' },
+    },
+};
+export default meta;
+export const wordBuildingwithimg = {
+    args: {
+        option1: "C",
+        option2: "W",
+        option3: "S",
+        option4: "P",
+        option5: "M",
+        img: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/WordBuilding/image.png",
+        isAllowOnlyCorrect: true,
+        word: "CAT",
+        letter1: "A",
+        letter2: "T",
+        answer: "C",
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    const { isAllowOnlyCorrect = true } = args;
+    return `<main>
+   <lido-container visible="true" id="lido-container" template-id="mcq"  objective="${args.answer}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/WordBuilding/bgImage.png"  onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='1200';data.z-index='100'; data.boxShadow='0 0 40px #FFC107';this.sleep='300'; this.sleep='400'; data.boxShadow='none';this.sleep='2000';" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}" onEntry="blank.z-index='12';">
+<!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape. 373px,portrait.402px" width="landscape.304px,portrait.398px" x="landscape.0%, portrait.28%" y="landscape.51%, 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" z-index="0" tab-index="19"  audio="" id="inst" string="Choose the correct letter to form a word" ></lido-text>
+	<!--	<lido-text visible="true" z-index="1" height="114px" id="data" string="${args.word}" font-family="'Baloo Bhai 2'" font-color="black" font-size="144px"  bg-color="transparent" y="23%" x="-203px"	onEntry="this.fontWeight='700';this.position='relative';" ></lido-text>-->
+	<lido-cell visible="true" layout="col" height="84%" width="95%" bg-color="transparent" margin="5px -126px -107px 0px">
+		<lido-cell visible="true" id="xx" layout="row" height="auto" width="907px" bg-color="#FFF5BB" onEntry="this.align-items='center';this.justify-content='space-evenly';this.border='2px solid #FFB612';this.border-radius='16px';">
+			<lido-cell layout="row" id="blank" visible="true" z-index="2" height="200px" width="200px" onEntry="this.align-items='center';this.justify-content='center';">
+		
+			<lido-text visible="true" string="_" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 	onEntry="this.fontWeight='700';" ></lido-text>
+			<lido-text visible="true" string="${args.letter1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 	onEntry="this.fontWeight='700';" ></lido-text>
+			<lido-text visible="true" string="${args.letter2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 	onEntry="this.fontWeight='700';" ></lido-text>
+			</lido-cell>
+			<lido-cell visible="true" height="330px" width="330px">
+			<lido-image visible="true" heigth="auto"  width="auto" src="${args.img}"></lido-image>		
+		</lido-cell>
+	</lido-cell>
+	<lido-cell visible="true" height="40%" width="79%"  layout="row" >
+		<lido-text visible="true" type="click" value="${args.option1}" id="option1" tab-index="8" bg-color="#FFAC4C" height="212.4px" width="210px" string="${args.option1}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" value="${args.option2}" type="click" id="option2" tab-index="9" bg-color="#FFAC4C" height="212.4px" width="210px" string="${args.option2}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" value="${args.option3}" type="click" id="option3" tab-index="10" bg-color="#FFAC4C" height="212.4px" width="210px" string="${args.option3}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" value="${args.option4}" type="click" id="option3" tab-index="10" bg-color="#FFAC4C" height="212.4px" width="210px" string="${args.option4}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" value="${args.option5}" type="click" id="option3" tab-index="10" bg-color="#FFAC4C" height="212.4px" width="210px" string="${args.option5}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				
+				
+	</lido-cell>
+	
+	</lido-cell>
+</lido-container>
+  </main>`;
+}