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

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

@@ -9,13 +9,13 @@ const meta = {
         option4: { control: 'text' },
         answer: { control: 'text' },
         image: { control: 'file' },
-        isAllowOnlyCorrect: { control: 'boolean' },
+        PracticeMode: { control: 'boolean' },
     },
 };
 export default meta;
 export const imageMatch = {
     args: {
-        isAllowOnlyCorrect: true,
+        PracticeMode: false,
         option1: "रमन के स्कूल में खेल दिवस है।",
         option2: "रमन के स्कूल में खेल दिवस हैं।",
         option3: "रमन की स्कूल में खेल दिवस है।",
@@ -33,41 +33,42 @@ function getContainerXml(args) {
     let tabCounter = 1;
     const { isAllowOnlyCorrect = true } = args;
     return `<main>
-  <lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answer}"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Quiz%20literacy.png"  onEntry="" is-allow-only-correct="${isAllowOnlyCorrect}" is-Continue-On-Correct="true" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';">
-	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.415px,portrait.401px" width="landscape.374px,portrait.401px" x="landscape.25%, portrait.24%" y="landscape.52%, portrait.83%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
+  <lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answer}"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Quiz%20literacy.png"  onEntry="text1.speak='true';" is-allow-only-correct="${args.PracticeMode}" is-Continue-On-Correct="${args.PracticeMode}" onInCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';">
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.345px,portrait.401px" width="landscape.308px,portrait.401px" x="landscape.24%, portrait.24%" y="landscape.60%, portrait.83%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
 		<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/temp1/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" bg-color="transparent">
 		</lido-avatar>
-		<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/Shadow.png" bg-color="transparent" width="203px" height="32px" x="landscape.87px,portrait.111px" y="landscape.338px,portrait.344px" alt-text="{shadowImgae}">
+		<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/Shadow.png" bg-color="transparent" width="203px" height="32px" x="landscape.57px,portrait.111px" y="landscape.285px,portrait.344px" alt-text="{shadowImgae}">
 		</lido-image>
 	</lido-cell>
+  <lido-text visible="false" id="inst" string="choose the correct option"></lido-text>
     <lido-cell layout="col" visible="true" bg-Color="transparent" width="landscape.100%,portrait.90%" height="68%" margin="landscape.0px,portrait.-107px 0px 0px 0px">
 
     
           
-			<lido-text id="text1" tab-index="1" disable-edit="true" margin="landscape.0px 0px 0px 27px,portrait.0px 0px 60px 0px" value="text1" visible="true" width="landscape.100%,portrait.90%" height="18%" bg-color="#FFF5BB" font-family="'Baloo 2', serif" font-size="60px" font-color="#000" string="${args.questionText}" y="-13%" onEntry="this.position='relative';this.fontWeight='500';this.padding='20px';this.border='2px solid #FFB612'; this.boxShadow='unset';this.border-radius='16px'; this.textAlign='start'; this.speak='true';">
+			<lido-text id="text1" tab-index="1" disable-edit="true" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 60px 0px" value="text1" visible="true" width="landscape.92%,portrait.90%" height="18%" bg-color="#FFF5BB" font-family="'Baloo 2', serif" font-size="60px" font-color="#000" string="${args.questionText}" y="-7%" onEntry="this.position='relative';this.fontWeight='500';this.padding='0px';this.border='2px solid #FFB612'; this.boxShadow='unset';this.border-radius='16px'; this.textAlign='start'; ">
 			</lido-text>
 		  
-   <lido-cell layout="landscape.row,portrait.col" visible="true" bg-Color="transparent" width="landscape.130%,portrait.90%" height="68%" margin="landscape.0px,portrait.-107px 0px 0px 0px">
+   <lido-cell layout="landscape.row,portrait.col" visible="true" bg-Color="transparent" width="landscape.109%,portrait.90%" height="68%" margin="landscape.40px 0px -31px 0px,portrait.-107px 0px 0px 0px">
 		
-			<lido-cell visible="true" height="landscape.553px,portrait.62%" width="landscape.553px,portrait.681px" border-radius="7px"
+			<lido-cell visible="true" height="landscape.400px,portrait.62%" width="landscape.400px,portrait.681px" border-radius="7px"
           bg-color="white" margin="landscape.0px 0px 0px 0px, portrait.-149px 0px 25px 0px"
           onEntry="this.display='flex'; this.align-items='center'; this.justifyContent='center';">
 			<lido-image visible="true"
-            width="landscape.553px,portrait.100%"
-            height="landscape.553px,portrait.100%"
+            width="landscape.400px,portrait.100%"
+            height="landscape.400px,portrait.100%"
             border-radius="7px" bg-color="white"
             src="${args.image}">
           </lido-image>
 		  </lido-cell>
 		
-		<lido-cell layout="col" visible="true"  width="landscape.53%,portrait.108%" height="216px" bg-Color="transparent" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" onEntry="this.align-items='center'; this.justify-content='center'; this.gap='40px';">
-            <lido-text visible="true" audio="" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';"  id="option1" font-family="'Baloo Bhai 2'" tab-index="2" font-size="62px" border-radius="12px" font-color="black" height="120px" width="788px" string="${args.option1}" value="${args.option1}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+		<lido-cell layout="col" visible="true"  width="landscape.53%,portrait.108%" height="216px" bg-Color="transparent" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" onEntry="this.align-items='center'; this.justify-content='center'; this.gap='24px';">
+            <lido-text visible="true" disable-speak="true" audio="" onCorrect="" onInCorrect=""  id="option1" font-family="'Baloo Bhai 2'" tab-index="2" font-size="54px" border-radius="12px" font-color="black" height="120px" width="873px" string="${args.option1}" value="${args.option1}" type="click" onEntry="this.font-weight='500';this.padding='12px 19px';this.line-height='1';">
             </lido-text>
-			<lido-text visible="true" audio=""  id="option2" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" font-family="'Baloo Bhai 2'" tab-index="3" font-size="62px" border-radius="12px" font-color="black" height="120px" width="788px" string="${args.option2}" value="${args.option2}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+			<lido-text visible="true" audio="" disable-speak="true"  id="option2" onCorrect="" onInCorrect="" font-family="'Baloo Bhai 2'" tab-index="3" font-size="54px" border-radius="12px" font-color="black" height="120px" width="873px" string="${args.option2}" value="${args.option2}" type="click" onEntry="this.font-weight='500';this.padding='12px 19px';this.line-height='1';">
             </lido-text>
-			<lido-text visible="true" audio=""  id="option3" font-family="'Baloo Bhai 2'" tab-index="4" font-size="62px" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" border-radius="12px" font-color="black" height="120px" width="788px" string="${args.option3}" value="${args.option3}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+			<lido-text visible="true" audio="" disable-speak="true"  id="option3" font-family="'Baloo Bhai 2'" tab-index="4" font-size="54px" onCorrect="" onInCorrect="" border-radius="12px" font-color="black" height="120px" width="873px" string="${args.option3}" value="${args.option3}" type="click" onEntry="this.font-weight='500';this.padding='12px 19px'; this.line-height='1';">
             </lido-text>
-			<lido-text visible="true" audio=""  id="option4" font-family="'Baloo Bhai 2'" tab-index="5" font-size="62px" border-radius="12px" font-color="black" height="120px" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" width="788px" string="${args.option4}" value="${args.option4}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+			<lido-text visible="true" audio="" disable-speak="true"  id="option4" font-family="'Baloo Bhai 2'" tab-index="5" font-size="54px" border-radius="12px" font-color="black" height="120px" onCorrect="" onInCorrect="" width="873px" string="${args.option4}" value="${args.option4}" type="click" onEntry="this.font-weight='500';this.padding='12px 19px';this.line-height='1';">
             </lido-text>
 		</lido-cell>
 

package/dist/collection/stories/Templates/numberIdentification/numberIdentificationimageTotext.stories.js

@@ -10,11 +10,13 @@ const meta = {
         answers: { control: 'text' },
         row: { control: 'text' },
         col: { control: 'text' },
+        PracticeMode: { control: 'boolean' },
     },
 };
 export default meta;
 export const numberIdentificationimageTotext = {
     args: {
+        PracticeMode: false,
         option1: "3",
         option2: "2",
         option3: "7",
@@ -32,7 +34,7 @@ export const numberIdentificationimageTotext = {
 function getContainerXml(args) {
     let tabCounter = 1;
     return `<main>
- <lido-container  visible="true" id="lido-container" template-id="mcq" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/pal_number_identification/bgImage.png" objective="${args.answer}"  is-continue-on-correct="true" is-allow-only-correct="true" onEntry="inst.speak='true';question.speak='true';text1.speak='true';text2.speak='true';text3.speak='true';text4.speak='true';">
+ <lido-container  visible="true" id="lido-container" template-id="mcq" onInCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/pal_number_identification/bgImage.png" objective="${args.answer}"  is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="question.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.64%, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
 		<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
@@ -44,8 +46,8 @@ function getContainerXml(args) {
 			<lido-text id="question" tab-index="2" visible="true" value="10" string="${args.question}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.84px"  bg-color="transparent" 
 			onEntry="this.fontWeight='700';">
             </lido-text>
-			<lido-cell visible="true" width="400px" bg-color="transparent" height="200px" onEntry="this.display='flex';this.align-items='center';"	>
-				<lido-math-matrix id="mat1" rows="${args.row}" cols="${args.col}"  defualtFill="${args.answer}" leftIndex="false" topIndex="false" clickable="true" matrixImage="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/pal_number_identification/fruit.png" activeBgColor="transparent" inactiveBgColor="transparent" border="5px soild transparent" height="200px" width="400px" visible="true" margin="landscape.0,portrait.-26px 0px 0px 0px">
+			<lido-cell visible="true" width="500px" bg-color="transparent" height="300px" onEntry="this.display='flex';this.align-items='center';"	>
+				<lido-math-matrix id="mat1" rows="${args.row}" cols="${args.col}"  defualtFill="${args.answer}" leftIndex="false" topIndex="false" clickable="true" matrixImage="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/pal_number_identification/fruit.png" activeBgColor="transparent" inactiveBgColor="transparent" border="5px soild transparent" height="300px" width="500px" visible="true" margin="landscape.0,portrait.-26px 0px 0px 0px">
 			</lido-math-matrix>
 		  </lido-cell>
 			
@@ -56,14 +58,14 @@ function getContainerXml(args) {
 		
 				<lido-cell layout="row" visible="true" margin="" onEntry="this.border-radius='24px';" height="228px" width="landscape.280px,portrait.300px" bg-color="orange"  type="click" value="${args.option1}">
 					
-					<lido-text id="text1" tab-index="3" visible="true"  string="${args.option1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="orange" 
+					<lido-text id="text1" tab-index="3" disable-speak="true" visible="true"  string="${args.option1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="orange" 
 					onEntry="this.fontWeight='700';">
 					</lido-text>
 				</lido-cell>
 
 				<lido-cell layout="row" visible="true" margin="" onEntry="this.border-radius='24px';" height="228px" width="landscape.280px,portrait.300px" bg-color="orange"  type="click" value="${args.option2}">
 					
-					<lido-text id="text2" tab-index="4" visible="true"  string="${args.option2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="orange" 
+					<lido-text id="text2" tab-index="4" disable-speak="true" visible="true"  string="${args.option2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="orange" 
 					onEntry="this.fontWeight='700';">
 					</lido-text>
 				</lido-cell>
@@ -71,14 +73,14 @@ function getContainerXml(args) {
 		
 				<lido-cell layout="row" visible="true" margin="" onEntry="this.border-radius='24px';" height="228px" width="landscape.280px,portrait.300px" bg-color="orange"  type="click" value="${args.option3}">
 					
-					<lido-text id="text3" tab-index="5" visible="true" string="${args.option3}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="orange" 
+					<lido-text id="text3" tab-index="5" disable-speak="true" visible="true" string="${args.option3}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="orange" 
 					onEntry="this.fontWeight='700';">
 					</lido-text>
 				</lido-cell>
 
 				<lido-cell layout="row" visible="true" margin="" onEntry="this.border-radius='24px';" height="228px" width="landscape.280px,portrait.300px" bg-color="orange"  type="click" value="${args.option4}">
 					
-					<lido-text id="text4" tab-index="6" visible="true" string="${args.option4}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.130px, portrait.100px"  bg-color="orange" 
+					<lido-text id="text4" tab-index="6" disable-speak="true" visible="true" string="${args.option4}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.130px, portrait.100px"  bg-color="orange" 
 					onEntry="this.fontWeight='800';">
 					</lido-text>
 				</lido-cell>	

package/dist/collection/stories/Templates/numberIdentification/numberIdentificationtextTotext.stories.js

@@ -8,11 +8,13 @@ const meta = {
         option4: { control: 'text' },
         question: { control: 'text' },
         answer: { control: 'text' },
+        PracticeMode: { control: 'boolean' },
     },
 };
 export default meta;
 export const numberIdentificationtextTotext = {
     args: {
+        PracticeMode: false,
         option1: "333",
         option2: "256",
         option3: "777",
@@ -28,13 +30,13 @@ export const numberIdentificationtextTotext = {
 function getContainerXml(args) {
     let tabCounter = 1;
     return `<main>
- <lido-container  visible="true" id="lido-container" template-id="mcq" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/pal_number_identification/bgImage.png" objective="${args.answer}"  is-continue-on-correct="true" is-allow-only-correct="true" onEntry="inst.speak='true';question.speak='true';text1.speak='true';text2.speak='true';text3.speak='true';text4.speak='true';">
+ <lido-container  visible="true" id="lido-container" template-id="mcq" onInCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/pal_number_identification/bgImage.png" objective="${args.answer}"  is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="question.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.64%, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
 		<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
 		</lido-avatar>
 	</lido-cell>
-	<lido-text visible="false" id="inst" tab-index="1" string="choose the correct option" onEntry=""></lido-text>
+	
 <!-- question text -->
 		<lido-cell layout="row" visible="true"  margin="landscape.26px 0px 155px 0px, portrait.-170px 0px 0px 0px" height="290px" width="landscape.1476px,portrait.100%" bg-color="#FFF5BB" onEntry="this.justifyContent='center';this.border='2px solid #FFA500'; this.borderRadius='16px';">
 			<lido-text id="question" tab-index="2" visible="true" value="10" string="${args.question}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.80px, portrait.84px"  bg-color="transparent" 
@@ -49,14 +51,14 @@ function getContainerXml(args) {
 		
 				<lido-cell layout="row" visible="true" margin="" onEntry="this.border-radius='24px';" height="228px" width="landscape.280px,portrait.300px" bg-color="orange"  type="click" value="${args.option1}">
 					
-					<lido-text id="text1" tab-index="3" visible="true"  string="${args.option1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="orange" 
+					<lido-text id="text1" tab-index="3" visible="true" disable-speak="true"  string="${args.option1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="orange" 
 					onEntry="this.fontWeight='700';">
 					</lido-text>
 				</lido-cell>
 
 				<lido-cell layout="row" visible="true" margin="" onEntry="this.border-radius='24px';" height="228px" width="landscape.280px,portrait.300px" bg-color="orange"  type="click" value="${args.option2}">
 					
-					<lido-text id="text2" tab-index="4" visible="true"  string="${args.option2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="orange" 
+					<lido-text id="text2" tab-index="4"  disable-speak="true" visible="true"  string="${args.option2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="orange" 
 					onEntry="this.fontWeight='700';">
 					</lido-text>
 				</lido-cell>
@@ -64,14 +66,14 @@ function getContainerXml(args) {
 		
 				<lido-cell layout="row" visible="true" margin="" onEntry="this.border-radius='24px';" height="228px" width="landscape.280px,portrait.300px" bg-color="orange"  type="click" value="${args.option3}">
 					
-					<lido-text id="text3" tab-index="5" visible="true" string="${args.option3}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="orange" 
+					<lido-text id="text3" tab-index="5"  disable-speak="true" visible="true" string="${args.option3}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="orange" 
 					onEntry="this.fontWeight='700';">
 					</lido-text>
 				</lido-cell>
 
 				<lido-cell layout="row" visible="true" margin="" onEntry="this.border-radius='24px';" height="228px" width="landscape.280px,portrait.300px" bg-color="orange"  type="click" value="${args.option4}">
 					
-					<lido-text id="text4" tab-index="6" visible="true" string="${args.option4}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.130px, portrait.100px"  bg-color="orange" 
+					<lido-text id="text4" tab-index="6"  disable-speak="true" visible="true" string="${args.option4}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.130px, portrait.100px"  bg-color="orange" 
 					onEntry="this.fontWeight='800';">
 					</lido-text>
 				</lido-cell>	

package/dist/collection/stories/Templates/palEgmaCalculateSum/palEgmaMultiOption.stories.js

@@ -51,7 +51,7 @@ function getContainerXml(args) {
         .join('\n');
     return `
     <main>
-        <lido-container id="lido-container" objective="${objective}" tab-index="1" show-drop-border="false" is-continue-on-correct="${isAllowOnlyCorrect}"  is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/pal_egma_temp_3.png" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false">
+        <lido-container id="lido-container" objective="${objective}" tab-index="1" show-drop-border="false" is-continue-on-correct="${isAllowOnlyCorrect}"  is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/pal_egma_temp_3.png" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; invisibleText.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false">
 
             <!-- Chimple Avatar -->
             <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.1310px, portrait.450px" y="landscape.418px, portrait.1020px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
@@ -94,7 +94,7 @@ function getContainerXml(args) {
             </lido-cell>
 
 
-            <!-- answers drag cell -->
+            <!-- answers click cell -->
             <!-- option row-->
             <lido-cell layout="landscape.row, portrait.wrap" id="option-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.5%" width="landscape.90%, portrait.106%" bg-Color="transparent" margin="landscape.65px 0px 65px 0px,portrait.-160px -65px 500px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.opacity='1';" gap="landscape.20px,portrait.5px">
                 ${clickCells}

package/dist/collection/stories/Templates/palEgmaCalculateSum/palEgmaSumTogether.stories.js

@@ -49,7 +49,7 @@ function getContainerXml(args) {
         .join('\n');
     return `
     <main>
-        <lido-container id="lido-container" objective="${objectiveString}" tab-index="1" template-id="dragAndDrop" show-drop-border="false" is-continue-on-correct="true"  is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/pal_egma_temp_3.png" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="this.questionBoxAnimate='true'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; invisibleText.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false">
+        <lido-container id="lido-container" objective="${objectiveString}" tab-index="1" template-id="dragAndDrop" show-drop-border="false" is-continue-on-correct="${isAllowOnlyCorrect}"  is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/pal_egma_temp_3.png" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="this.questionBoxAnimate='true'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; invisibleText.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false">
 
             <!-- Chimple Avatar -->
             <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.1310px, portrait.450px" y="landscape.100px, portrait.1020px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">

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

@@ -25,26 +25,39 @@ function getContainerXml(args) {
     const question_cells = args.questions.map((q, index) => {
         const isHidden = q === null || q === void 0 ? void 0 : q.startsWith('@');
         const actualValue = isHidden ? q.slice(1) : q;
-        const questionString = isHidden ? '? ' : q;
-        // add comma except for last item
-        const comma = index < args.questions.length - 1 ? ' ,' : '';
+        const spokenString = isHidden ? '?' : q;
+        const showComma = index < args.questions.length - 1;
         return `
-      <lido-text
-        visible="true" tab-index="${1 + index}"
-        value="${actualValue}"
-        string="${questionString}${comma}"
-        font-family="'Baloo Bhai 2'"
-        font-color="#07004E"
-        font-size="landscape.130px, portrait.100px"
-        bg-color=""
-        onEntry="this.fontWeight='800';">
-      </lido-text>  
-  `;
+  <lido-text id="pattern${1 + index}"
+    visible="true"
+    tab-index="${1 + index}"
+    value="${actualValue}"
+    string="${spokenString}"
+    font-family="'Baloo Bhai 2'"
+    font-color="#07004E"
+    font-size="landscape.130px, portrait.100px"
+    bg-color=""
+    onEntry="this.fontWeight='800';">
+  </lido-text>
+
+  ${showComma ? `
+    <lido-text onEntry="this.fontWeight='800';"
+      visible="true"
+      value=","
+      string=","
+      speak="false"
+      font-family="'Baloo Bhai 2'"
+      font-color="#07004E"
+      font-size="landscape.130px, portrait.100px"
+      bg-color="" >
+    </lido-text>
+  ` : ''}
+`;
     }).join('');
-    const opion_cells = args.options.map((q, index) => {
+    const option_cells = args.options.map((q, index) => {
         return `
       <lido-cell layout="row" id="text${1 + index}" visible="true" margin="" onEntry="this.border-radius='14px';" height="landscape.270px,portrait.244px" width="landscape.270px,portrait.244px" bg-color="orange"  type="click" value="${q}">
-        <lido-text visible="true" value="${q}" string="${q}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.130px, portrait.100px"  bg-color="orange" onEntry="this.fontWeight='800';">
+        <lido-text visible="true" value="${q}" string="${q}" disable-speak="true" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.130px, portrait.100px"  bg-color="orange" onEntry="this.fontWeight='800';">
         </lido-text>
       </lido-cell>
   `;
@@ -53,7 +66,7 @@ function getContainerXml(args) {
 <main>
 <lido-container  visible="true" id="lido-container" template-id="mcq" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/Frame%2051.svg" objective="${(args.questions.find(q => q.startsWith('@')) || '').slice(1)}" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" custom-style= "#text {
         box-shadow: none !important;
-        }" onEntry="questionText.speak='true';">
+        }" onEntry="questionText.speak='true'; pattern1.speak='true'; pattern2.speak='true'; pattern3.speak='true'; pattern4.speak='true'; pattern5.speak='true'">
 	 <!-- Chimple Avatar -->
       <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.328px,portrait.378px" width="landscape.284px,portrait.382px" x="landscape.87%, portrait.30%" y="landscape.68%, portrait.78%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
         <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
@@ -74,7 +87,7 @@ function getContainerXml(args) {
 
         <!-- options cells -->
 	      	<lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px 38px 0px 0px,portrait.0" onEntry="this.border-radius='26px';" height="landscape.290px,portrait.35%" width="landscape.86%,portrait.100%" bg-color="transparent">
-            ${opion_cells}
+            ${option_cells}
           </lido-cell>
 
           

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

@@ -23,14 +23,14 @@ export const palEgmaWordProblem1 = {
 function getContainerXml(args) {
     const dragCells = args.options
         .map((digit, i) => `
-      <lido-text id="drag${i}" tab-index="${i}" height="landscape.190px, portrait.125px" width="landscape.125px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="drag" font-size="104px"  bg-color="orange"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.flex-shrink='0';" border-image="">
+      <lido-text id="drag${i}" disable-speak="true" tab-index="${11 + i}" height="landscape.190px, portrait.125px" width="landscape.125px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="drag" font-size="104px"  bg-color="orange"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.flex-shrink='0';" border-image="">
       </lido-text>
     `)
         .join('\n');
     const objectiveArray = args.answer.split('');
     const dropCells = objectiveArray
         .map((cell, i) => `
-       <lido-text id="drop${i}" tab-index="${i}" disable-edit="true" height="landscape.190px, portrait.auto" width="125px" visible="true" value="${cell}" string="?" font-family="'Baloo Bhai 2'" font-color="black" type="drop" font-size="landscape.130px, portrait.100px"  bg-color="white"  onEntry="this.fontWeight='800'; this.borderRadius='20px'; this.border='4px solid #f69820'" border-image="">
+       <lido-text id="drop${i}" disable-edit="true" height="landscape.190px, portrait.auto" width="125px" visible="true" value="${cell}" string="?" font-family="'Baloo Bhai 2'" font-color="black" type="drop" font-size="landscape.130px, portrait.100px"  bg-color="white"  onEntry="this.fontWeight='800'; this.borderRadius='20px'; this.border='4px dashed #f34d08'" border-image="">
       </lido-text>
       `)
         .join('\n');
@@ -38,7 +38,7 @@ function getContainerXml(args) {
     return `
 <main>
 
-  <lido-container id="lido-container" objective="${args.answer.split('').join(',')}" tab-index="" template-id="dragAndDrop" show-drop-border="false" is-allow-only-correct="${args.PracticeMode}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/new.svg" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false" custom-style= "#question11 {
+  <lido-container id="lido-container" objective="${args.answer.split('').join(',')}" tab-index="" template-id="dragAndDrop" show-drop-border="false" is-allow-only-correct="${args.PracticeMode}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/new.svg" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="question.speak='true'" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false" custom-style= "#question11 {
         box-shadow: none !important;
         }">
 
@@ -88,7 +88,7 @@ export const palEgmaWordProblem2 = {
 function getContainerXml1(args) {
     const optionCells = args.options
         .map((digit, i) => `
-      <lido-text id="drag${i}" tab-index="${i}" height="landscape.270px, portrait.125px" width="landscape.270px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="click" font-size="104px"  bg-color="orange"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.flex-shrink='0';" border-image="">
+      <lido-text id="drag${i}" tab-index="${i + 1}" disable-speak="true" height="landscape.270px, portrait.125px" width="landscape.270px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="click" font-size="104px"  bg-color="orange"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.flex-shrink='0';" border-image="">
       </lido-text>
     `)
         .join('\n');
@@ -96,7 +96,7 @@ function getContainerXml1(args) {
     return `
 <main>
 
-  <lido-container id="lido-container" objective="${args.answer}" tab-index="" template-id="mcq" show-drop-border="false" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/new.svg" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false" custom-style= "#question11 {
+  <lido-container id="lido-container" objective="${args.answer}" tab-index="" template-id="mcq" show-drop-border="false" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/new.svg" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="question.speak='true'" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false" custom-style= "#question11 {
         box-shadow: none !important;
         }">
 

package/dist/collection/stories/Templates/palEgraInventedSpelling/pal_egra_invented_spelling_schema.stories.js

@@ -29,7 +29,10 @@ export const Default = {
 };
 function getContainerXml(args) {
     return `<main>
-    <lido-container objective="${(args.correctAns).toLowerCase()}" is-continue-on-correct="${args.PracticeMode}" template-id="mcq" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Picture%20meaning.png" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail';" onEntry="inventedAudio.speak='true';">
+        <lido-container objective="${(args.correctAns).toLowerCase()}" is-continue-on-correct="${args.PracticeMode}" template-id="mcq" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Picture%20meaning.png" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail';" onEntry="inventedAudio.speak='true';" custom-style = "#audioCell:active {
+  box-shadow: 0px 0px 0px !important;
+  transform: translateY(7px);
+}" >
 	<lido-cell visible="true" layout="col" width="80%" height="90%" bg-color="transparent">
     <!-- Chimple Avatar -->
     <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.300px,portrait.402px" width="landscape.250px,portrait.398px" x="landscape.56%, portrait.28%" y="landscape.200px, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true">
@@ -41,18 +44,18 @@ function getContainerXml(args) {
 
 		<lido-text visible="true" string="Choose the rhyming word" tab-index="1" font-size="80px" font-color="#07004E" border-radius="16px" bg-color="#FFF5BB" onEntry="this.fontWeight='700'; this.border='#FFB612 2px solid'; this.padding='25px 50px';"></lido-text>
 		<lido-text visible="false" id="inventedAudio" string="${args.correctAns}" tab-index="2" font-size="80px" font-color="#07004E" border-radius="16px" bg-color="#FFF5BB" onEntry="this.fontWeight='700'; this.border='#FFB612 2px solid'; this.padding='25px 50px';"></lido-text>
-		<lido-cell visible="true" layout="row" width="160px" height="160px" onTouch="inventedAudio.speak='true';" bg-color="white" border-radius="70px" onEntry="this.border='#ffac4c 2px solid';">
+		<lido-cell visible="true" id="audioCell" layout="row" width="160px" height="160px" onTouch="inventedAudio.speak='true';" bg-color="white" border-radius="70px" onEntry="this.border='#ffac4c 2px solid'; this.boxShadow='0px 8px 0px #f34d08;'">
 			<lido-image visible="true" bg-color="transparent" width="100px" height="100px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Icons/palAudioIcon.png"></lido-image>
 		</lido-cell>
 		<lido-cell layout="col" visible="true" width="100%" height="50%" bg-color="transparent" padding="0">
 			<lido-cell layout="row" visible="true" width="70%" height="50%" bg-color="transparent">
-				<lido-text visible="true" width="400px" height="136px" type="click" value="${(args.option1).toLowerCase()}" string="${args.option1}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
-				<lido-text visible="true" width="400px" height="136px" type="click" value="${(args.option2).toLowerCase()}" string="${args.option2}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${(args.option1).toLowerCase()}" string="${args.option1}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${(args.option2).toLowerCase()}" string="${args.option2}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
 			</lido-cell>
 			<lido-cell layout="row" visible="true" width="100%" height="50%" bg-color="transparent">
-				<lido-text visible="true" width="400px" height="136px" type="click" value="${(args.option3).toLowerCase()}" string="${args.option3}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
-				<lido-text visible="true" width="400px" height="136px" type="click" value="${(args.option4).toLowerCase()}" string="${args.option4}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
-				<lido-text visible="true" width="400px" height="136px" type="click" value="${(args.option5).toLowerCase()}" string="${args.option5}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${(args.option3).toLowerCase()}" string="${args.option3}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${(args.option4).toLowerCase()}" string="${args.option4}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${(args.option5).toLowerCase()}" string="${args.option5}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
 			</lido-cell>
 		</lido-cell>
 	</lido-cell>

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

@@ -16,6 +16,7 @@ const meta = {
         audio4: { control: 'text' },
         optionImg4: { control: 'text' },
         correctAns: { control: 'text' },
+        isAllowOnlyCorrect: { control: 'boolean' },
     },
 };
 export default meta;
@@ -35,6 +36,7 @@ export const PalEgraMCQWithImage = {
         audio4: '',
         optionImg4: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/rat.png',
         correctAns: 'ELEPHANT',
+        isAllowOnlyCorrect: true,
     },
     render: args => {
         const xml = getContainerXml(args);
@@ -43,7 +45,7 @@ export const PalEgraMCQWithImage = {
 };
 function getContainerXml(args) {
     return `<main>
-		<lido-container id="lido-container" value="maincontainer" objective="${args.correctAns}" aria-label="This is a multiple-option question. Select one option from the list." height="100vh" width="100vw" x="0" y="0" z="0" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/palEgraTemplate3.png" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true">
+		<lido-container id="lido-container" tab-index="1" value="maincontainer" objective="${args.correctAns}" aria-label="This is a multiple-option question. Select one option from the list." height="100vh" width="100vw" x="0" y="0" z="0" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/palEgraTemplate3.png" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="invisibleText.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="${args.isAllowOnlyCorrect}" is-allow-only-correct="${args.isAllowOnlyCorrect}">
 
 		<!-- Chimple Avatar -->
 		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="350px" width="350px" x="landscape.1228px, portrait.273px" y="landscape.125px, portrait.1200px" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="" onEntry="this.animation='leftToPlace 1.5s linear';">
@@ -53,25 +55,27 @@ function getContainerXml(args) {
 			</lido-image>
 		</lido-cell>
 
+    <lido-text tab-index="2" id="invisibleText" value="click the correct option that describes the image shown in text." visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="click the correct option that describes the image shown in text." font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px" ></lido-text>
+
 		<lido-cell visible="true" layout="col" width="100%" height="100%" bg-color="transparent">
 			<!-- Question -->
 			<lido-cell layout="flex" visible="true" width="518px" height="landscape.198px, portrait.25%" bg-color="#FFF5BB" onEntry="this.justifyContent='center'; this.borderRadius='16px'; this.alignContent='center'; this.animation='topToPlace 0.5s linear';" margin="landscape.75px 0px 0px 0px, portrait.0px 0px 0px 0px">
-					<lido-text id="textA" tab-index="1" value="${args.question}" visible="true" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.question}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px" onTouch="this.speak='true';"></lido-text>
+					<lido-text id="textA" tab-index="3" value="${args.question}" visible="true" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.question}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px" onTouch="this.speak='true';"></lido-text>
 			</lido-cell>
 			
 			<!-- Options -->
 			<lido-cell layout="flex" visible="true" width="100%" height="90%" bg-color="transparent" onEntry="this.justifyContent='center'; this.alignContent='center'; this.animation='bottomToPlace 1s linear';" margin="landscape.-60px 0px -210px 0px, portrait.0px 0px 0px 0px">
 				<lido-cell visible="true" layout="landscape.row, portrait.wrap" width="landscape.85%, portrait.73%" height="landscape.100%, portrait.auto" bg-color="transparent" gap="landscape.0px, portrait.55px" onEntry="">
-					<lido-cell tab-index="2" type="click" visible="true" layout="col" bg-color="transparent" width="landscape.25%, portrait.100%"  value="${args.option1}" height="50%" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" audio='${args.audio1}' onTouch="this.speak='true';">
+					<lido-cell tab-index="4" type="click" visible="true" layout="col" bg-color="transparent" width="landscape.25%, portrait.100%"  value="${args.option1}" height="50%" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="" onInCorrect="" audio='${args.audio1}' onTouch="this.speak='true';">
 						<lido-image visible="true" src="${args.optionImg1}" bg-color="transparent" width="90%" height="auto" border-radius="25px 25px 0 0" onEntry="this.marginTop='10px';"></lido-image>
 					</lido-cell>
-					<lido-cell tab-index="3" type="click" visible="true" layout="col" bg-color="transparent" width="landscape.25%, portrait.100%"  value="${args.option2}" height="50%" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" audio='${args.audio2}' onTouch="this.speak='true';">
+					<lido-cell tab-index="5" type="click" visible="true" layout="col" bg-color="transparent" width="landscape.25%, portrait.100%"  value="${args.option2}" height="50%" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="" onInCorrect="" audio='${args.audio2}' onTouch="this.speak='true';">
 						<lido-image visible="true" src="${args.optionImg2}" bg-color="transparent" width="90%" height="auto" border-radius="25px 25px 0 0" onEntry="this.marginTop='10px';"></lido-image>
 					</lido-cell>
-					<lido-cell tab-index="4" type="click" visible="true" layout="col" bg-color="transparent" width="landscape.25%, portrait.100%"  value="${args.option3}" height="50%" onEntry="this.borderRadius='25px'; this.padding='0';" margin="landscape.0, portrait.20px 0 0 0" onCorrect="this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" audio='${args.audio3}' onTouch="this.speak='true';">
+					<lido-cell tab-index="6" type="click" visible="true" layout="col" bg-color="transparent" width="landscape.25%, portrait.100%"  value="${args.option3}" height="50%" onEntry="this.borderRadius='25px'; this.padding='0';" margin="landscape.0, portrait.20px 0 0 0" onCorrect="" onInCorrect="" audio='${args.audio3}' onTouch="this.speak='true';">
 						<lido-image visible="true" src="${args.optionImg3}" bg-color="transparent" width="90%" height="auto" border-radius="25px 25px 0 0" onEntry="this.marginTop='10px';"></lido-image>
 					</lido-cell>
-					<lido-cell tab-index="5" type="click" visible="true" layout="col" bg-color="transparent" width="landscape.25%, portrait.100%"  value="${args.option4}" height="50%" onEntry="this.borderRadius='25px'; this.padding='0';" margin="landscape.0, portrait.20px 0 0 0" onCorrect="this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" audio='${args.audio4}' onTouch="this.speak='true';">
+					<lido-cell tab-index="7" type="click" visible="true" layout="col" bg-color="transparent" width="landscape.25%, portrait.100%"  value="${args.option4}" height="50%" onEntry="this.borderRadius='25px'; this.padding='0';" margin="landscape.0, portrait.20px 0 0 0" onCorrect="" onInCorrect="" audio='${args.audio4}' onTouch="this.speak='true';">
 						<lido-image visible="true" src="${args.optionImg4}" bg-color="transparent" width="90%" height="auto" border-radius="25px 25px 0 0" onEntry="this.marginTop='10px';"></lido-image>
 					</lido-cell>
 				</lido-cell>