lido-player 0.0.2-beta-18-dev → 0.0.2-beta-21-dev

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

@@ -39,50 +39,50 @@ 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-radius='16px';"></lido-text>
+        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-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>
+    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 disable-speak="true"  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="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="">
-
-    <!-- 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">
+    return `<main>
+    <lido-container disable-speak="true"  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="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="">
+
+    <!-- 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" disable-speak="true" 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" disable-speak="true" 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" disable-speak="true" 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" disable-speak="true" 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" disable-speak="true" 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>
+        .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" disable-speak="true" 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" disable-speak="true" 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" disable-speak="true" 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" disable-speak="true" 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" disable-speak="true" 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

@@ -48,41 +48,41 @@ export const pictureWordMatch1 = {
 function getContainerXml(args) {
     let tabCounter = 1;
     const { isAllowOnlyCorrect = true } = args;
-    return `<main>
-   <lido-container  disable-speak="true"  visible="true" template-id="dragAndDrop" id="lido-container" objective="${args.answer1},${args.answer2},${args.answer3},${args.answer4},${args.answer5}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palEgra-pictureWordMatch/bgImg.png" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="">
-
-		<!-- 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.84%, 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-text type="drop" value="${args.answer1}" tab-index="8" id="drop1" visible="true" height="122px" width="225px" onEntry="this.border-radius='16px';" ></lido-text>
-    <lido-text type="drop" value="${args.answer2}" id="drop2" tab-index="9" visible="true" height="122px" width="225px" onEntry="this.border-radius='16px';"></lido-text>
-    <lido-text type="drop" value="${args.answer3}" id="drop3" tab-index="10" visible="true" height="122px" width="225px" onEntry="this.border-radius='16px';"></lido-text>
-    <lido-text type="drop" value="${args.answer4}" id="drop4" tab-index="11" visible="true" height="122px" width="225px" onEntry="this.border-radius='16px';"></lido-text>
-    <lido-text type="drop" value="${args.answer5}" id="drop5" tab-index="12" visible="true" height="122px" width="225px" onEntry="this.border-radius='16px';"></lido-text>
-  </lido-cell>
-  <lido-cell visible="true" layout="row"  height="270px" width="81%" bg-color="transparent" onEntry="this.align-items='center';this.justify-content='space-around';this.position='relative';" x="-34px">
-    <lido-text visible="true" height="122px" disable-speak="true" 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" disable-speak="true" 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" disable-speak="true" 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" disable-speak="true" 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" disable-speak="true" 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>
+    return `<main>
+   <lido-container  disable-speak="true"  visible="true" template-id="dragAndDrop" id="lido-container" objective="${args.answer1},${args.answer2},${args.answer3},${args.answer4},${args.answer5}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palEgra-pictureWordMatch/bgImg.png" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="">
+
+		<!-- 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.84%, 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-text type="drop" value="${args.answer1}" tab-index="8" id="drop1" visible="true" height="122px" width="225px" onEntry="this.border-radius='16px';" ></lido-text>
+    <lido-text type="drop" value="${args.answer2}" id="drop2" tab-index="9" visible="true" height="122px" width="225px" onEntry="this.border-radius='16px';"></lido-text>
+    <lido-text type="drop" value="${args.answer3}" id="drop3" tab-index="10" visible="true" height="122px" width="225px" onEntry="this.border-radius='16px';"></lido-text>
+    <lido-text type="drop" value="${args.answer4}" id="drop4" tab-index="11" visible="true" height="122px" width="225px" onEntry="this.border-radius='16px';"></lido-text>
+    <lido-text type="drop" value="${args.answer5}" id="drop5" tab-index="12" visible="true" height="122px" width="225px" onEntry="this.border-radius='16px';"></lido-text>
+  </lido-cell>
+  <lido-cell visible="true" layout="row"  height="270px" width="81%" bg-color="transparent" onEntry="this.align-items='center';this.justify-content='space-around';this.position='relative';" x="-34px">
+    <lido-text visible="true" height="122px" disable-speak="true" 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" disable-speak="true" 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" disable-speak="true" 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" disable-speak="true" 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" disable-speak="true" 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

@@ -32,35 +32,35 @@ export const pictureWordMatch2 = {
 function getContainerXml(args) {
     let tabCounter = 1;
     const { isAllowOnlyCorrect = true } = args;
-    return `<main>
-   <lido-container  disable-speak="true" 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="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="">
-
-		<!-- 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.84%, 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-text type="drop" value="${args.answer}" tab-index="8" id="drop1" visible="true" height="122px" width="225px" onEntry="this.border-radius='16px';"></lido-text>
-    
-  </lido-cell>
-  <lido-cell visible="true" layout="row"  height="270px" width="81%" bg-color="transparent" onEntry="this.align-items='center';this.justify-content='space-around';this.position='relative';" x="-34px">
-    <lido-text visible="true" disable-speak="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" disable-speak="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" disable-speak="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" disable-speak="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" disable-speak="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>
+    return `<main>
+   <lido-container  disable-speak="true" 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="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="">
+
+		<!-- 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.84%, 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-text type="drop" value="${args.answer}" tab-index="8" id="drop1" visible="true" height="122px" width="225px" onEntry="this.border-radius='16px';"></lido-text>
+    
+  </lido-cell>
+  <lido-cell visible="true" layout="row"  height="270px" width="81%" bg-color="transparent" onEntry="this.align-items='center';this.justify-content='space-around';this.position='relative';" x="-34px">
+    <lido-text visible="true" disable-speak="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" disable-speak="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" disable-speak="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" disable-speak="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" disable-speak="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

@@ -22,25 +22,25 @@ export const Default = {
     },
 };
 function getContainerXml(args) {
-    return `<main>	
-  <lido-container id="lido-container" is-allow-only-correct="${args.PracticeMode}" objective="${args.drop1},${args.drop2},${args.drop3}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" dropAttr="EnableAnimation" onCorrect="this.sleep='2000';" onInCorrect="this.sleep='2000';">
-				<!-- Chimple Avatar -->
-		<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="300px" width="300px" x="landscape.870px,portrait.300px" y="landscape.560px,portrait.1400px" ariaHidden="true" bgColor="transparent" visible="true"  onEntry="">
-				<lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="100%"  width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}">
-				</lido-avatar>
-		</lido-cell>
-		<lido-cell visible="true" layout="row" width="landscape.90%, portrait.100%" height="100%" bg-color="transparent" onEntry="this.justifyContent='space-between';">
-			<lido-cell visible="true" layout="col" width="landscape.45%, portrait.60%" height="90%" bg-color="transparent">
-				<lido-text visible="true" id="drag1" width="landscape.700px, portrait.470px" tab-index="1" audio="" string="${args.drag1}" value="${args.drag1}" 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="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" 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>
-			</lido-cell>
-		</lido-cell>
-	</lido-container>
+    return `<main>	
+  <lido-container id="lido-container" is-allow-only-correct="${args.PracticeMode}" objective="${args.drop1},${args.drop2},${args.drop3}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" dropAttr="EnableAnimation" onCorrect="this.sleep='2000';" onInCorrect="this.sleep='2000';">
+				<!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="300px" width="300px" x="landscape.870px,portrait.300px" y="landscape.560px,portrait.1400px" ariaHidden="true" bgColor="transparent" visible="true"  onEntry="">
+				<lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="100%"  width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}">
+				</lido-avatar>
+		</lido-cell>
+		<lido-cell visible="true" layout="row" width="landscape.90%, portrait.100%" height="100%" bg-color="transparent" onEntry="this.justifyContent='space-between';">
+			<lido-cell visible="true" layout="col" width="landscape.45%, portrait.60%" height="90%" bg-color="transparent">
+				<lido-text visible="true" id="drag1" width="landscape.700px, portrait.470px" tab-index="1" audio="" string="${args.drag1}" value="${args.drag1}" 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="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" 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>
+			</lido-cell>
+		</lido-cell>
+	</lido-container>
   </main>`;
 }

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

@@ -20,22 +20,22 @@ export const PuzzleGame = {
     },
 };
 function getContainerXml(args) {
-    return `<main>
- <lido-container  id="lido-container" show-drop-border="false" tab-index="1" is-continue-on-correct="true" objective="i1,i2" bgImage="" bgColor="grey" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" showCheck="false" visible="true">
-    	<lido-image  id="img1" disableEdit="true"  visible="true" width="landscape.68%,portrait.134%" margin="landscape.-5px 0px 188px,portrait.-5px 0px 188px -133px" height="landscape.59%,portrait.53%" src="${args.dropimg}" z="0"  onEntry="this.backgroundImage='none';" > 
-			 <!-- drop elements -->
-			  <lido-text id="t1" tab-index="2" type="drop" tabIndex="2" value="i1" border-image="transparent"  bgColor="transparent" z="5" height="132px" width="132px" is-allow-only-one-drop="true" x="landscape.583px,portrait.643px" y="-97px"  onEntry=" this.position='relative';"></lido-text>
-			<lido-text id="t2" tab-index="3" type="drop" bgColor="transparent" value="i2" border-image="none" tabIndex="3" z="10" height="132px" width="132px"  is-allow-only-one-drop="true" x="landscape.449px,portrait.498px" y="119px"   onEntry=" this.border='none';this.position='relative';"></lido-text>
-		</lido-image>  
-		
-		<!-- draggabel images -->
-		 <lido-cell layout="row" width="80%" height="34%" bgColor="transparent" visible="true" margin="-158px 0px -31px 0px" > 
-			<lido-image id="img2" tab-index="4" width="374px" height="279px" disableEdit="true" value="i1"  bgColor="transparent" visible="true"  type="drag"  margin="0px 0px 0px 0px"  src="${args.dragimg1}" z="1"  onEntry="this.boxShadow='unset';" >
-			</lido-image>
-			
-			<lido-image id="img3" tab-index="5" disableEdit="true" value="i2" bgColor="transparent" visible="true" width="landscape.304px,portrait.310px" height="310px" type="drag"  margin="0px 0px 0px 0px"  src="${args.dragimg2}" z="1" onEntry="this.boxShadow='unset';" >
-			</lido-image>
-		</lido-cell>
-	</lido-container>
+    return `<main>
+ <lido-container  id="lido-container" show-drop-border="false" tab-index="1" is-continue-on-correct="true" objective="i1,i2" bgImage="" bgColor="grey" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" showCheck="false" visible="true">
+    	<lido-image  id="img1" disableEdit="true"  visible="true" width="landscape.68%,portrait.134%" margin="landscape.-5px 0px 188px,portrait.-5px 0px 188px -133px" height="landscape.59%,portrait.53%" src="${args.dropimg}" z="0"  onEntry="this.backgroundImage='none';" > 
+			 <!-- drop elements -->
+			  <lido-text id="t1" tab-index="2" type="drop" tabIndex="2" value="i1" border-image="transparent"  bgColor="transparent" z="5" height="132px" width="132px" is-allow-only-one-drop="true" x="landscape.583px,portrait.643px" y="-97px"  onEntry=" this.position='relative';"></lido-text>
+			<lido-text id="t2" tab-index="3" type="drop" bgColor="transparent" value="i2" border-image="none" tabIndex="3" z="10" height="132px" width="132px"  is-allow-only-one-drop="true" x="landscape.449px,portrait.498px" y="119px"   onEntry=" this.border='none';this.position='relative';"></lido-text>
+		</lido-image>  
+		
+		<!-- draggabel images -->
+		 <lido-cell layout="row" width="80%" height="34%" bgColor="transparent" visible="true" margin="-158px 0px -31px 0px" > 
+			<lido-image id="img2" tab-index="4" width="374px" height="279px" disableEdit="true" value="i1"  bgColor="transparent" visible="true"  type="drag"  margin="0px 0px 0px 0px"  src="${args.dragimg1}" z="1"  onEntry="this.boxShadow='unset';" >
+			</lido-image>
+			
+			<lido-image id="img3" tab-index="5" disableEdit="true" value="i2" bgColor="transparent" visible="true" width="landscape.304px,portrait.310px" height="310px" type="drag"  margin="0px 0px 0px 0px"  src="${args.dragimg2}" z="1" onEntry="this.boxShadow='unset';" >
+			</lido-image>
+		</lido-cell>
+	</lido-container>
 </main>`;
 }

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

@@ -81,73 +81,73 @@ function getContainerXml(args) {
     const options = args.options;
     let tabIndexStart = 4;
     const optionsCell = options.map((option) => {
-        return `
-        <lido-text id="${option}" tab-index="${tabIndexStart++}" height="215px" width="auto" visible="true" value="${option}" string="${option}" font-family="'Baloo Bhai 2'" font-color="black" type="click" font-size="104px"  bg-color="#FFB366" onCorrect="" onInCorrect="this.vibrate='horizontal-shake';" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse';" border-image="">
-            <lido-text visible="true" id="option-text" audio="" height="0px" width="auto" font-family="'Baloo 2', serif" font-size="landscape.44px, portrait.52px" font-color="black" string="${optionText}" bg-Color="transparent" onEntry="this.font-weight='700';" padding="0px 10px 0px 10px">
-            </lido-text>
-        </lido-text>
+        return `
+        <lido-text id="${option}" tab-index="${tabIndexStart++}" height="215px" width="auto" visible="true" value="${option}" string="${option}" font-family="'Baloo Bhai 2'" font-color="black" type="click" font-size="104px"  bg-color="#FFB366" onCorrect="" onInCorrect="this.vibrate='horizontal-shake';" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse';" border-image="">
+            <lido-text visible="true" id="option-text" audio="" height="0px" width="auto" font-family="'Baloo 2', serif" font-size="landscape.44px, portrait.52px" font-color="black" string="${optionText}" bg-Color="transparent" onEntry="this.font-weight='700';" padding="0px 10px 0px 10px">
+            </lido-text>
+        </lido-text>
         `;
     }).join('');
     const plus_minus_animation = expressionText.includes('+') || expressionText.includes('-');
     const multiplication_animation = expressionText.includes('X') || expressionText.includes('x') || expressionText.includes('*');
-    const expressionAnimation = plus_minus_animation ? `
-        background-animation-plus-minus-1.opacity='1'; background-animation-plus-minus-2.opacity='1';
-    ` : multiplication_animation ? `
-        background-animation-multiplication.opacity='1';
+    const expressionAnimation = plus_minus_animation ? `
+        background-animation-plus-minus-1.opacity='1'; background-animation-plus-minus-2.opacity='1';
+    ` : multiplication_animation ? `
+        background-animation-multiplication.opacity='1';
     ` : ``;
     const { num1, num2, operator, result } = parseExpression(expressionText);
     // Escape angular brackets for invisible text
     const escapedExpressionText = expressionText.replace(/</g, '&lt;').replace(/>/g, '&gt;');
     let val1 = parseInt(num1) <= 10 ? '1' : '2';
     let val2 = parseInt(num2) <= 10 ? '1' : '2';
-    return `
-        <main>
-            	<lido-container id="question-board-container" highlight-word-by-word="${args.highlightWord}"  disable-speak="true" objective="${objective}" tab-index="1"  value="questionBoard" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Question%20board.png"  height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; question-board-image.transition='transform 1s ease'; question-board-image.transform='rotateY(180deg)'; question-board-text.transition='opacity 0.5s ease'; question-board-text.opacity='0'; option-row.opacity='0'; invisible-text.transition='opacity 0.5s ease'; invisible-text.opacity='1'; invisible-text.visibility='visible'; ${expressionAnimation} this.sleep='4000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}" >
-
-                    <!-- Chimple Avatar -->
-                    <lido-cell layout="pos" id="pos1" disableEdit="true" value="pos1" height="landscape.570px, portrait.700px" width="landscape.380px, portrait.485px" x="landscape.110px, portrait.195px" y="landscape.160px, portrait.1050px" ariaHidden="true" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0'; this.z-index='2';">
-                        <lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}" onEntry="">
-                        </lido-avatar>
-                    </lido-cell>
-
-                    <!-- Question Section -->
-                    <lido-cell layout="pos" id="pos2" disableEdit="true" value="pos2" height="landscape.850px, portrait.710px" width="landscape.1225px, portrait.900px" x="landscape.155px, portrait.0px" y="landscape.60px, portrait.85px" ariaHidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
-                        <lido-image visible="true" id="question-board-image" width="100%" height="67%" bg-color="transparent" src="${questionBoardImage}" altText="{questionBoardImage}"  onEntry="">
-                        </lido-image>
-                    </lido-cell>
-
-                    <lido-text visible="false" id="txt1" audio="" tab-index="2" font-family="'Baloo 2', serif" font-size="52px" font-color="black" string="Solve the problem shown in the board and select the correct answer" bg-Color="transparent" onEntry="this.speak='true'; question-board-text.speak='true';" >
-                    </lido-text>
-
-                    <lido-cell layout="pos" id="pos3" value="pos3" x="landscape.445px, portrait.45px" y="landscape.115px, portrait.145px" visible="true" height="landscape.60%,portrait.10%" width="landscape.55%,portrait.92%" border-radius="7px" bg-color="transparent" onEntry="this.z-index='1';">
-                        <lido-text visible="true" audio="${args.audioURL}" id="question-board-text" tab-index="3" audio="" font-family="'Baloo 2', serif" font-size="landscape.60px, portrait.52px" font-color="black" string="${questionBoardText}" bg-Color="transparent" onEntry="this.font-weight='700'; this.textAlign='left'; this.lineHeight='1.25';" >
-                        </lido-text>
-                    </lido-cell>
-
-                    <!-- Options Section -->
-                    <lido-cell layout="landscape.row, portrait.wrap" id="option-row" aria-hidden="true" visible="true" height="landscape.40%,portrait.20%" width="landscape.95%, portrait.75%" bg-Color="transparent" margin="landscape.625px 0px 0px -70px,portrait.50px 0px 130px 0px" onEntry="this.z-index='1'; this.justify-content='center';" gap="landscape.175px,portrait.65px">
-                        ${optionsCell}
-                    </lido-cell>
-                    
-                    <!-- Invisible Text for Animation -->
-                    <lido-cell layout="pos" id="invisible-text" disableEdit="true" value="pos3" height="landscape.10%, portrait.710px" width="landscape.75%, portrait.875px" x="landscape.325px, portrait.10px" y="landscape.740px, portrait.475px" ariaHidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0'; this.opacity='0'; this.z-index='0';">
-                        <lido-text id="txt2" audio="" tab-index="8" height="inherit" width="inherit" visible="true" value="${escapedExpressionText}" string="${escapedExpressionText}" font-family="'Baloo Bhai 2'" font-color="white" font-size="104px"  bg-color="transparent" onCorrect="" onInCorrect="this.vibrate='horizontal-shake';" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-shrink='0';">
-                        </lido-text>
-                    </lido-cell>
-
-                    <!-- Background animation -->
-                    <lido-cell layout="pos" id="background-animation-plus-minus-1" value="pos5" height="600px" width="600px" x="landscape.475px, portrait.85px" y="landscape.-110px,portrait.-80px" ariaHidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.opacity='0';">
-                        <lido-math-matrix visible="true" rows="10" cols="${val1}" top-index="false" left-index="false" bottom-index="false" clickable="false" active-only-visible="true" active-bg-color="yellow" inactive-bg-color="black" defualt-fill="${num1}" matrix-image="${backgroundImagePlusSign1}"></lido-math-matrix>
-                    </lido-cell>
-                    <lido-cell layout="pos" id="background-animation-plus-minus-2" value="pos5" height="600px" width="600px" x="landscape.475px, portrait.85px" y="landscape.130px, portrait.75px" ariaHidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.opacity='0';">
-                        <lido-math-matrix visible="true" rows="10" cols="${val2}" top-index="false" left-index="false" bottom-index="false" clickable="false" active-only-visible="true" active-bg-color="yellow" inactive-bg-color="black" defualt-fill="${num2}" matrix-image="${backgroundImagePlusSign2}"></lido-math-matrix>
-                    </lido-cell>
-
-                    <lido-cell layout="pos" id="background-animation-multiplication" value="pos5" height="600px" width="600px" x="landscape.530px, portrait.125px" y="landscape.50px, portrait.15px" ariaHidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.opacity='0';">
-                        <lido-math-matrix visible="true" rows="${num1}" cols="${num2}" top-index="false" left-index="false" bottom-index="false" clickable="false" active-only-visible="true" active-bg-color="yellow" inactive-bg-color="black" defualt-fill="${result}" matrix-image="${backgroundImageMultiplicationSign}"></lido-math-matrix>
-                    </lido-cell>
-
-                </lido-container>
-        </main>
+    return `
+        <main>
+            	<lido-container id="question-board-container" highlight-word-by-word="${args.highlightWord}"  disable-speak="true" objective="${objective}" tab-index="1"  value="questionBoard" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Question%20board.png"  height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; question-board-image.transition='transform 1s ease'; question-board-image.transform='rotateY(180deg)'; question-board-text.transition='opacity 0.5s ease'; question-board-text.opacity='0'; option-row.opacity='0'; invisible-text.transition='opacity 0.5s ease'; invisible-text.opacity='1'; invisible-text.visibility='visible'; ${expressionAnimation} this.sleep='4000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}" >
+
+                    <!-- Chimple Avatar -->
+                    <lido-cell layout="pos" id="pos1" disableEdit="true" value="pos1" height="landscape.570px, portrait.700px" width="landscape.380px, portrait.485px" x="landscape.110px, portrait.195px" y="landscape.160px, portrait.1050px" ariaHidden="true" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0'; this.z-index='2';">
+                        <lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}" onEntry="">
+                        </lido-avatar>
+                    </lido-cell>
+
+                    <!-- Question Section -->
+                    <lido-cell layout="pos" id="pos2" disableEdit="true" value="pos2" height="landscape.850px, portrait.710px" width="landscape.1225px, portrait.900px" x="landscape.155px, portrait.0px" y="landscape.60px, portrait.85px" ariaHidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
+                        <lido-image visible="true" id="question-board-image" width="100%" height="67%" bg-color="transparent" src="${questionBoardImage}" altText="{questionBoardImage}"  onEntry="">
+                        </lido-image>
+                    </lido-cell>
+
+                    <lido-text visible="false" id="txt1" audio="" tab-index="2" font-family="'Baloo 2', serif" font-size="52px" font-color="black" string="Solve the problem shown in the board and select the correct answer" bg-Color="transparent" onEntry="this.speak='true'; question-board-text.speak='true';" >
+                    </lido-text>
+
+                    <lido-cell layout="pos" id="pos3" value="pos3" x="landscape.445px, portrait.45px" y="landscape.115px, portrait.145px" visible="true" height="landscape.60%,portrait.10%" width="landscape.55%,portrait.92%" border-radius="7px" bg-color="transparent" onEntry="this.z-index='1';">
+                        <lido-text visible="true" audio="${args.audioURL}" id="question-board-text" tab-index="3" audio="" font-family="'Baloo 2', serif" font-size="landscape.60px, portrait.52px" font-color="black" string="${questionBoardText}" bg-Color="transparent" onEntry="this.font-weight='700'; this.textAlign='left'; this.lineHeight='1.25';" >
+                        </lido-text>
+                    </lido-cell>
+
+                    <!-- Options Section -->
+                    <lido-cell layout="landscape.row, portrait.wrap" id="option-row" aria-hidden="true" visible="true" height="landscape.40%,portrait.20%" width="landscape.95%, portrait.75%" bg-Color="transparent" margin="landscape.625px 0px 0px -70px,portrait.50px 0px 130px 0px" onEntry="this.z-index='1'; this.justify-content='center';" gap="landscape.175px,portrait.65px">
+                        ${optionsCell}
+                    </lido-cell>
+                    
+                    <!-- Invisible Text for Animation -->
+                    <lido-cell layout="pos" id="invisible-text" disableEdit="true" value="pos3" height="landscape.10%, portrait.710px" width="landscape.75%, portrait.875px" x="landscape.325px, portrait.10px" y="landscape.740px, portrait.475px" ariaHidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0'; this.opacity='0'; this.z-index='0';">
+                        <lido-text id="txt2" audio="" tab-index="8" height="inherit" width="inherit" visible="true" value="${escapedExpressionText}" string="${escapedExpressionText}" font-family="'Baloo Bhai 2'" font-color="white" font-size="104px"  bg-color="transparent" onCorrect="" onInCorrect="this.vibrate='horizontal-shake';" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-shrink='0';">
+                        </lido-text>
+                    </lido-cell>
+
+                    <!-- Background animation -->
+                    <lido-cell layout="pos" id="background-animation-plus-minus-1" value="pos5" height="600px" width="600px" x="landscape.475px, portrait.85px" y="landscape.-110px,portrait.-80px" ariaHidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.opacity='0';">
+                        <lido-math-matrix visible="true" rows="10" cols="${val1}" top-index="false" left-index="false" bottom-index="false" clickable="false" active-only-visible="true" active-bg-color="yellow" inactive-bg-color="black" defualt-fill="${num1}" matrix-image="${backgroundImagePlusSign1}"></lido-math-matrix>
+                    </lido-cell>
+                    <lido-cell layout="pos" id="background-animation-plus-minus-2" value="pos5" height="600px" width="600px" x="landscape.475px, portrait.85px" y="landscape.130px, portrait.75px" ariaHidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.opacity='0';">
+                        <lido-math-matrix visible="true" rows="10" cols="${val2}" top-index="false" left-index="false" bottom-index="false" clickable="false" active-only-visible="true" active-bg-color="yellow" inactive-bg-color="black" defualt-fill="${num2}" matrix-image="${backgroundImagePlusSign2}"></lido-math-matrix>
+                    </lido-cell>
+
+                    <lido-cell layout="pos" id="background-animation-multiplication" value="pos5" height="600px" width="600px" x="landscape.530px, portrait.125px" y="landscape.50px, portrait.15px" ariaHidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.opacity='0';">
+                        <lido-math-matrix visible="true" rows="${num1}" cols="${num2}" top-index="false" left-index="false" bottom-index="false" clickable="false" active-only-visible="true" active-bg-color="yellow" inactive-bg-color="black" defualt-fill="${result}" matrix-image="${backgroundImageMultiplicationSign}"></lido-math-matrix>
+                    </lido-cell>
+
+                </lido-container>
+        </main>
     `;
 }