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

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

@@ -23,54 +23,54 @@ function getContainerXml(args) {
     const drags = args.options.filter(opt => !opt.startsWith('#') && !opt.startsWith('@'));
     let tabCounter = 1;
     const correctSequence = args.options.filter(opt => opt.startsWith('#') || opt.startsWith('@')).map(opt => opt.slice(1)).join('');
-    return `<main>
-    	<lido-container id="lido-container" is-allow-only-correct="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Spell%20door.png" objective="${drops.join(',')}" height="100%" width="100%" bg-color="transparent" visible="true" onCorrect=" lido-avatar.avatarAnimate='Success';  correctWord.speak='true';  this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false">
-				<lido-text visible="false" id="correctWord" onEntry="this.display='none';" string="${correctSequence}" ></lido-text>
-		<!-- Chimple Avatar -->
-		<lido-cell layout="pos" id="pos1" value="pos2" height="305px" width="227px" x="landscape.81%, portrait.60%" y="landscape.12%, portrait.20%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
-			<lido-avatar id="lido-avatar" visible="true" height="462px" width="356px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
-			</lido-avatar>
-		</lido-cell>
-		<lido-cell layout="landscape.row, portrait.col" visible="true" width="landscape.75%, portrait.76%" margin="landscape.0%, portrait.71% 0 0 0" height="landscape.57%, portrait.60%" onEntry="this.borderRadius='10px'; this.padding='8px'; this.backgroundColor='transparent';">
-			<!-- image -->
-			<lido-image id="image0" visible="true" z="100" src="https://media.githubusercontent.com/media/chimple/bahama/master/assets/games/spelldoor/textures/hut1_image_spelling.png" width="landscape.80%, portrait.100%" height="landscape.80%, portrait.62%" >
-			</lido-image>
-			<lido-cell layout="pos" id="pos3" visible="true" width="landscape.60%, portrait.76%" x="landscape.31%, portrait.31%" y="landscape.0%, portrait.35%" height="landscape.54%, portrait.60%" onEntry="this.borderRadius='10px'; this.padding='8px'; this.backgroundColor='transparent'" >
-				<!-- image -->
-				<lido-image id="image1" visible="true"  x="landscape.6%, portrait.-3%" y="landscape.25%, portrait.29%" src="https://media.githubusercontent.com/media/chimple/bahama/master/assets/games/spelldoor/textures/shutter1_image_spelling.png" width="landscape.50%, portrait.56%" height="landscape.69%, portrait.36%" >
-				</lido-image>
-				<lido-image id="image2" visible="true" x="landscape.12%, portrait.-5%" y="landscape.2%, portrait.20%" src="${args.image}" width="landscape.39%, portrait.60%" height="landscape.100%, portrait.50%" >
-				</lido-image>
-			</lido-cell>
-		</lido-cell>
-
-		<lido-cell bg-color="transparent" layout="landscape.col, portrait.col" width="landscape.auto, portrait.100%" height="landscape.43%, portrait.50%" onEntry="this.animation='bottomToPlace 1.5s linear'; this.align-items='center'; this.justify-content='space-between';" margin="landscape.-72px 0px 0px 0px, portrait.-14% 0px 7%" visible="true" >
-			<lido-cell  layout="landscape.row, portrait.row"  width="landscape.auto, portrait.75%"  height="landscape.43%, portrait.53%" margin="landscape.0px,portrait.0px 0px 0px 0px" child-elements-length="11"  onEntry="this.gap='13px';this.justifyContent='center'; this.gridTemplateColumns='repeat(2, 1fr)'; this.gridTemplateRows='repeat(2, 1fr)';"  visible="true">
+    return `<main>
+    	<lido-container id="lido-container" is-allow-only-correct="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Spell%20door.png" objective="${drops.join(',')}" height="100%" width="100%" bg-color="transparent" visible="true" onCorrect=" lido-avatar.avatarAnimate='Success';  correctWord.speak='true';  this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false">
+				<lido-text visible="false" id="correctWord" onEntry="this.display='none';" string="${correctSequence}" ></lido-text>
+		<!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" value="pos2" height="305px" width="227px" x="landscape.81%, portrait.60%" y="landscape.12%, portrait.20%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
+			<lido-avatar id="lido-avatar" visible="true" height="462px" width="356px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+			</lido-avatar>
+		</lido-cell>
+		<lido-cell layout="landscape.row, portrait.col" visible="true" width="landscape.75%, portrait.76%" margin="landscape.0%, portrait.71% 0 0 0" height="landscape.57%, portrait.60%" onEntry="this.borderRadius='10px'; this.padding='8px'; this.backgroundColor='transparent';">
+			<!-- image -->
+			<lido-image id="image0" visible="true" z="100" src="https://media.githubusercontent.com/media/chimple/bahama/master/assets/games/spelldoor/textures/hut1_image_spelling.png" width="landscape.80%, portrait.100%" height="landscape.80%, portrait.62%" >
+			</lido-image>
+			<lido-cell layout="pos" id="pos3" visible="true" width="landscape.60%, portrait.76%" x="landscape.31%, portrait.31%" y="landscape.0%, portrait.35%" height="landscape.54%, portrait.60%" onEntry="this.borderRadius='10px'; this.padding='8px'; this.backgroundColor='transparent'" >
+				<!-- image -->
+				<lido-image id="image1" visible="true"  x="landscape.6%, portrait.-3%" y="landscape.25%, portrait.29%" src="https://media.githubusercontent.com/media/chimple/bahama/master/assets/games/spelldoor/textures/shutter1_image_spelling.png" width="landscape.50%, portrait.56%" height="landscape.69%, portrait.36%" >
+				</lido-image>
+				<lido-image id="image2" visible="true" x="landscape.12%, portrait.-5%" y="landscape.2%, portrait.20%" src="${args.image}" width="landscape.39%, portrait.60%" height="landscape.100%, portrait.50%" >
+				</lido-image>
+			</lido-cell>
+		</lido-cell>
+
+		<lido-cell bg-color="transparent" layout="landscape.col, portrait.col" width="landscape.auto, portrait.100%" height="landscape.43%, portrait.50%" onEntry="this.animation='bottomToPlace 1.5s linear'; this.align-items='center'; this.justify-content='space-between';" margin="landscape.-72px 0px 0px 0px, portrait.-14% 0px 7%" visible="true" >
+			<lido-cell  layout="landscape.row, portrait.row"  width="landscape.auto, portrait.75%"  height="landscape.43%, portrait.53%" margin="landscape.0px,portrait.0px 0px 0px 0px" child-elements-length="11"  onEntry="this.gap='13px';this.justifyContent='center'; this.gridTemplateColumns='repeat(2, 1fr)'; this.gridTemplateRows='repeat(2, 1fr)';"  visible="true">
             ${args.options.map((opt) => {
         if (opt.startsWith('#')) {
-            return `
-             <lido-text id="drop${tabCounter}" drop-attr="stretch" visible="true" type="drop" tab-index="${tabCounter++}" value="${opt.slice(1)}" border-radius="10px"  height="130px"  width="130px" onEntry="this.flex-shrink='0';">
-              </lido-text>
+            return `
+             <lido-text id="drop${tabCounter}" drop-attr="stretch" visible="true" type="drop" tab-index="${tabCounter++}" value="${opt.slice(1)}" border-radius="10px"  height="130px"  width="130px" onEntry="this.flex-shrink='0';">
+              </lido-text>
                `;
         }
         else if (opt.startsWith('@')) {
-            return `
-         <lido-text  id="text${tabCounter}" audio="" tab-index="${tabCounter++}"   height="130px"  width="130px"  visible="true"  value="${opt.slice(1)}"  string="${opt.slice(1)}"  font-family="'Baloo Bhai 2'"  font-color="white"   type="text" font-size="104px"   bg-color="transparent"    onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.flex-shrink='0';"   margin="landscape.113px 0px 112px 0px, portrait.0px 0px 0px 0px"  border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/box.png">
-        </lido-text>
+            return `
+         <lido-text  id="text${tabCounter}" audio="" tab-index="${tabCounter++}"   height="130px"  width="130px"  visible="true"  value="${opt.slice(1)}"  string="${opt.slice(1)}"  font-family="'Baloo Bhai 2'"  font-color="white"   type="text" font-size="104px"   bg-color="transparent"    onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.flex-shrink='0';"   margin="landscape.113px 0px 112px 0px, portrait.0px 0px 0px 0px"  border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/box.png">
+        </lido-text>
         `;
         }
         return '';
-    }).join('')}
-      </lido-cell>
-
-			<lido-cell layout="landscape.row, portrait.row" width="landscape.auto, portrait.95%" height="landscape.43%, portrait.22%" child-elements-length="11" margin="landscape.-96px 0px 67px 0px,portrait.0px 25px 0px 0px" onEntry="this.justify-content='center';this.gap='20px ';    this.gridTemplateColumns = 'repeat(2, 1fr)';  this.gridTemplateRows = 'repeat(2, 1fr)';" visible="true">
-				 ${drags.map((opt) => `
-          <lido-text id="option${tabCounter}" audio="" tab-index="${tabCounter++}"  height="130px" width="130px" visible="true" value="${opt}" string="${opt}" font-family="'Baloo Bhai 2'" font-color="white" type="drag" font-size="104px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.flex-shrink='0';" margin="landscape.150px 0px 112px 0px, portrait.0px 0px 0px 0px" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/box.png">
-          </lido-text>
-        `).join('')}
-				
-			</lido-cell>
-		</lido-cell>
-	</lido-container>
+    }).join('')}
+      </lido-cell>
+
+			<lido-cell layout="landscape.row, portrait.row" width="landscape.auto, portrait.95%" height="landscape.43%, portrait.22%" child-elements-length="11" margin="landscape.-96px 0px 67px 0px,portrait.0px 25px 0px 0px" onEntry="this.justify-content='center';this.gap='20px ';    this.gridTemplateColumns = 'repeat(2, 1fr)';  this.gridTemplateRows = 'repeat(2, 1fr)';" visible="true">
+				 ${drags.map((opt) => `
+          <lido-text id="option${tabCounter}" audio="" tab-index="${tabCounter++}"  height="130px" width="130px" visible="true" value="${opt}" string="${opt}" font-family="'Baloo Bhai 2'" font-color="white" type="drag" font-size="104px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.flex-shrink='0';" margin="landscape.150px 0px 112px 0px, portrait.0px 0px 0px 0px" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/box.png">
+          </lido-text>
+        `).join('')}
+				
+			</lido-cell>
+		</lido-cell>
+	</lido-container>
 	</main>`;
 }

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

@@ -16,44 +16,44 @@ export const AmazingStories = {
     },
 };
 function getContainerXml(args) {
-    return `<main>
-    <lido-container show-prev-button="false" highlight-word-by-word="${args.highlightWord}" show-next-button="true" id="lido-container" bg-image="" height="1600px" width="900px" value="mainContainer4" objective="" aria-label="" x="0" y="0" z="0" visible="true" audio="" onTouch="" onCorrect="" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true">
-		<lido-cell id="cell1" margin="landscape.140px 0px 0px 0px,portrait.170px 0px 0px 0px" visible="true" layout="landscape.row,portrait.col" disable-edit="true" value="cell1" width="landscape.100%,portrait.86%" height="landscape.100%,portrait.80%" x="50px" y="50px" bg-color="white" type="" onEntry="this.justifyContent='space-evenly'; this.borderRadius='6px'" onTouch="" onCorrect="" onInCorrect="">
-			<lido-image id="image1" disable-edit="true" margin="landscape.0px 0px 0px 0px,portrait.-20px 0px 0px 0px" value="image1" visible="true" src="${args.storyimage}" width="landscape.704px,portrait.744px" height="landscape.704px,portrait.707px" bg-color="transparent" alt-text="{catimage}" onEntry="">
-			</lido-image>	
-			<lido-text id="text1" tab-index="1" audio="${args.audioURL}" disable-edit="true" margin="landscape.0px 0px 0px 27px,portrait.0px 0px 60px 0px" value="text1" visible="true" width="landscape.47%,portrait.90%" height="100%" bg-color="transparent" font-family="'Baloo 2', serif" font-size="44px" font-color="#000" string='${args.content}' onEntry="this.fontWeight='500'; this.boxShadow='unset'; this.textAlign='start'; this.speak='true';">
-			</lido-text>
-		</lido-cell>
-			
-		<!-- below is the code for avatar -->
-
-		<lido-pos id="pos1" disable-edit="true" value="pos1" height="350px" width="350px" x="landscape.1300px, portrait.580px" y="landscape.670px, portrait.1350px" aria-hidden="true" z="1" bg-color="transparent" type="" visible="true" audio="col1.mp3" onTouch="" onCorrect="">
-			<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="350px" width="350px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
-			</lido-avatar>
-				<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="186px" height="20px" x="77px" y="305px" alt-text="{shadowImage}">
-				</lido-image>
-		</lido-pos>
-	</lido-container>
-
-	<!-- Inverted image -->
-
-	<lido-container show-prev-button="true" highlight-word-by-word="${args.highlightWord}" show-next-button="true" id="lido-container" bg-image="" height="1600px" width="900px" value="mainContainer4" objective="" aria-label="" x="0" y="0" z="0" visible="true" audio="" onTouch="" onCorrect="" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true">
-		<lido-cell id="cell1" margin="landscape.90px 0px 0px 0px,portrait.70px 0px 0px 0px" visible="true" layout="landscape.row,portrait.col" disable-edit="true" value="cell1" width="landscape.100%,portrait.86%" height="landscape.100%,portrait.80%" x="50px" y="50px" bg-color="white" type="" onEntry="this.justifyContent='space-evenly'; this.borderRadius='6px'" onTouch="" onCorrect="" onInCorrect="">
-			<lido-text id="text1" tab-index="1" audio="${args.audioURL}" disable-edit="true" margin="landscape.0px 0px 0px 27px,portrait.0px 0px 52px 0px" value="text1" visible="true" width="landscape.47%,portrait.90%" height="100%" bg-color="transparent" font-family="'Baloo 2', serif" font-size="44px" font-color="#000" string='${args.content}' onEntry="this.fontWeight='500'; this.boxShadow='unset'; this.textAlign='start'; this.speak='true';">
-			</lido-text>
-			<lido-image id="image1" disable-edit="true" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 80px 0px" value="image1" visible="true" src="${args.storyimage}" width="landscape.704px,portrait.744px" height="landscape.704px,portrait.707px" bg-color="transparent" alt-text="{catimage}" onEntry="">
-			</lido-image>	
-		</lido-cell>
-			
-		<!-- below is the code for avatar -->
-
-		<lido-pos id="pos1" disable-edit="true" value="pos1" height="350px" width="350px" x="landscape.0px, portrait.580px" y="landscape.670px, portrait.1380px" aria-hidden="true" z="1" bg-color="transparent" type="" visible="true" audio="col1.mp3" onTouch="" onCorrect="">
-			<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="350px" width="350px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
-			</lido-avatar>
-				<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="186px" height="20px" x="77px" y="305px" alt-text="{shadowImage}">
-				</lido-image>
-		</lido-pos>
-	</lido-container>
-
+    return `<main>
+    <lido-container show-prev-button="false" highlight-word-by-word="${args.highlightWord}" show-next-button="true" id="lido-container" bg-image="" height="1600px" width="900px" value="mainContainer4" objective="" aria-label="" x="0" y="0" z="0" visible="true" audio="" onTouch="" onCorrect="" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true">
+		<lido-cell id="cell1" margin="landscape.140px 0px 0px 0px,portrait.170px 0px 0px 0px" visible="true" layout="landscape.row,portrait.col" disable-edit="true" value="cell1" width="landscape.100%,portrait.86%" height="landscape.100%,portrait.80%" x="50px" y="50px" bg-color="white" type="" onEntry="this.justifyContent='space-evenly'; this.borderRadius='6px'" onTouch="" onCorrect="" onInCorrect="">
+			<lido-image id="image1" disable-edit="true" margin="landscape.0px 0px 0px 0px,portrait.-20px 0px 0px 0px" value="image1" visible="true" src="${args.storyimage}" width="landscape.704px,portrait.744px" height="landscape.704px,portrait.707px" bg-color="transparent" alt-text="{catimage}" onEntry="">
+			</lido-image>	
+			<lido-text id="text1" tab-index="1" audio="${args.audioURL}" disable-edit="true" margin="landscape.0px 0px 0px 27px,portrait.0px 0px 60px 0px" value="text1" visible="true" width="landscape.47%,portrait.90%" height="100%" bg-color="transparent" font-family="'Baloo 2', serif" font-size="44px" font-color="#000" string='${args.content}' onEntry="this.fontWeight='500'; this.boxShadow='unset'; this.textAlign='start'; this.speak='true';">
+			</lido-text>
+		</lido-cell>
+			
+		<!-- below is the code for avatar -->
+
+		<lido-pos id="pos1" disable-edit="true" value="pos1" height="350px" width="350px" x="landscape.1300px, portrait.580px" y="landscape.670px, portrait.1350px" aria-hidden="true" z="1" bg-color="transparent" type="" visible="true" audio="col1.mp3" onTouch="" onCorrect="">
+			<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="350px" width="350px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+			</lido-avatar>
+				<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="186px" height="20px" x="77px" y="305px" alt-text="{shadowImage}">
+				</lido-image>
+		</lido-pos>
+	</lido-container>
+
+	<!-- Inverted image -->
+
+	<lido-container show-prev-button="true" highlight-word-by-word="${args.highlightWord}" show-next-button="true" id="lido-container" bg-image="" height="1600px" width="900px" value="mainContainer4" objective="" aria-label="" x="0" y="0" z="0" visible="true" audio="" onTouch="" onCorrect="" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true">
+		<lido-cell id="cell1" margin="landscape.90px 0px 0px 0px,portrait.70px 0px 0px 0px" visible="true" layout="landscape.row,portrait.col" disable-edit="true" value="cell1" width="landscape.100%,portrait.86%" height="landscape.100%,portrait.80%" x="50px" y="50px" bg-color="white" type="" onEntry="this.justifyContent='space-evenly'; this.borderRadius='6px'" onTouch="" onCorrect="" onInCorrect="">
+			<lido-text id="text1" tab-index="1" audio="${args.audioURL}" disable-edit="true" margin="landscape.0px 0px 0px 27px,portrait.0px 0px 52px 0px" value="text1" visible="true" width="landscape.47%,portrait.90%" height="100%" bg-color="transparent" font-family="'Baloo 2', serif" font-size="44px" font-color="#000" string='${args.content}' onEntry="this.fontWeight='500'; this.boxShadow='unset'; this.textAlign='start'; this.speak='true';">
+			</lido-text>
+			<lido-image id="image1" disable-edit="true" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 80px 0px" value="image1" visible="true" src="${args.storyimage}" width="landscape.704px,portrait.744px" height="landscape.704px,portrait.707px" bg-color="transparent" alt-text="{catimage}" onEntry="">
+			</lido-image>	
+		</lido-cell>
+			
+		<!-- below is the code for avatar -->
+
+		<lido-pos id="pos1" disable-edit="true" value="pos1" height="350px" width="350px" x="landscape.0px, portrait.580px" y="landscape.670px, portrait.1380px" aria-hidden="true" z="1" bg-color="transparent" type="" visible="true" audio="col1.mp3" onTouch="" onCorrect="">
+			<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="350px" width="350px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+			</lido-avatar>
+				<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="186px" height="20px" x="77px" y="305px" alt-text="{shadowImage}">
+				</lido-image>
+		</lido-pos>
+	</lido-container>
+
 	</main>`;
 }

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

@@ -32,13 +32,13 @@ export const substractionWithimg = {
 function generateImages(count, src) {
     let images = '';
     for (let i = 0; i < Number(count); i++) {
-        images += `
-      <lido-image
-        visible="true"
-        height="100px"
-        width="100px"
-        src="${src}">
-      </lido-image>
+        images += `
+      <lido-image
+        visible="true"
+        height="100px"
+        width="100px"
+        src="${src}">
+      </lido-image>
     `;
     }
     return images;
@@ -52,60 +52,60 @@ function getContainerXml(args) {
     const solidText2Images = generateImages(args.text2, SOLID_IMAGE);
     const actualAddImages = generateImages(args.answer, SOLID_IMAGE);
     const actualMinusImages = generateImages(args.text2, OUTLINE_IMAGE);
-    return `<main>
-   <lido-container disable-speak="true"  visible="true" id="lido-container" template-id="mcq" objective="${args.answer}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/pal-Subtraction/Frame.png" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="solid.z-index='2';this.sleep='1000';text2.animation='placeToRight 2s linear';this.sleep='1000';actual.z-index='10';">
-
-		<!-- Chimple Avatar -->
-		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.344px,portrait.402px" width="landscape.296px,portrait.398px" x="landscape.83%, portrait.28%" y="landscape.40%, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" >
-			<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
-			</lido-avatar>
-		</lido-cell>
-		<lido-text visible="false" id="inst" tab-index="1" string="choose the correct option"></lido-text>
-<lido-cell visible="true" id="solid" layout="row" width="auto" bg-color="#FFF5BB" y="14%" onEntry="this.padding='10px 18px 10px 18px';this.position='relative';this.justifyContent='space-around';this.border='2px solid #FFA500'; this.borderRadius='16px';this.gap='0px';">
-			<lido-cell layout="row" id="text1" visible="true">
-				 ${solidText1Images}
-			</lido-cell>	
-			<lido-cell layout="row" visible="true" id="text2" bg-color="transparent">
-				 ${solidText2Images}
-			</lido-cell>
-			
-			
-			</lido-cell>
-			<lido-cell visible="true" id="actual" layout="row" width="auto" bg-color="#FFF5BB" onEntry="this.padding='10px 18px 10px 18px';this.justifyContent='space-around';this.border='2px solid #FFA500'; this.borderRadius='16px';this.gap='0px';">
-				<lido-cell visible="true" id="add" layout="row">
-				 ${actualAddImages}
-				</lido-cell>
-				<lido-cell visible="true" id="minus" layout="row">
-					${actualMinusImages}
-				</lido-cell>
-			</lido-cell>
-			
-		<lido-cell visible="true" layout="col" height="58%" width="90%" bg-color="transparent" y="0%" onEntry="this.align-items='center';this.justify-content='space-around';this.position='relative';" >
-			
-			<lido-cell layout="row" visible="true" height="400px" width="825px" onEntry="this.align-items='center'; this.justify-content='space-around';">
-				<lido-text visible="true" id="text1" tab-index="2" string="${args.text1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 
-					onEntry="this.fontWeight='700';"></lido-text>
-				<lido-text visible="true" id="text2" tab-index="3" string="-"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 
-					onEntry="this.fontWeight='700';"></lido-text>
-				<lido-text visible="true" id="text3" tab-index="4" string="${args.text2}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 
-					onEntry="this.fontWeight='700';"></lido-text>
-				<lido-text visible="true" id="text4" tab-index="5" string="="  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 
-					onEntry="this.fontWeight='700';"></lido-text>
-				<lido-text visible="true" id="answer"  tab-index="6" height="184px" width="130px" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="#FFF5BBB2" value="2"
-					onEntry="this.fontWeight='700';this.border='2px solid #FFB612';this.border-radius='16px';" ></lido-text>	
-						
-			</lido-cell>
-			<lido-cell layout="row" visible="true" width="84%" height="300px">
-				<lido-text visible="true" disable-speak="true" value="${args.option1}" type="click" id="option1" tab-index="8" bg-color="#FFAC4C" height="212.4px" width="280px" string="${args.option1}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
-				<lido-text visible="true" disable-speak="true" value="${args.option2}" type="click" id="option2" tab-index="9" bg-color="#FFAC4C" height="212.4px" width="280px" string="${args.option2}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
-				<lido-text visible="true" disable-speak="true" value="${args.option3}" type="click" id="option3" tab-index="10" bg-color="#FFAC4C" height="212.4px" width="280px" string="${args.option3}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
-				<lido-text visible="true" disable-speak="true" type="click" value="${args.option4}" id="option4" tab-index="11" bg-color="#FFAC4C" height="212.4px" width="280px" string="${args.option4}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
-				
-
-
-			</lido-cell>
-		</lido-cell>
-
-	</lido-container>
+    return `<main>
+   <lido-container disable-speak="true"  visible="true" id="lido-container" template-id="mcq" objective="${args.answer}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/pal-Subtraction/Frame.png" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="solid.z-index='2';this.sleep='1000';text2.animation='placeToRight 2s linear';this.sleep='1000';actual.z-index='10';">
+
+		<!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.344px,portrait.402px" width="landscape.296px,portrait.398px" x="landscape.83%, portrait.28%" y="landscape.40%, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" >
+			<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+			</lido-avatar>
+		</lido-cell>
+		<lido-text visible="false" id="inst" tab-index="1" string="choose the correct option"></lido-text>
+<lido-cell visible="true" id="solid" layout="row" width="auto" bg-color="#FFF5BB" y="14%" onEntry="this.padding='10px 18px 10px 18px';this.position='relative';this.justifyContent='space-around';this.border='2px solid #FFA500'; this.borderRadius='16px';this.gap='0px';">
+			<lido-cell layout="row" id="text1" visible="true">
+				 ${solidText1Images}
+			</lido-cell>	
+			<lido-cell layout="row" visible="true" id="text2" bg-color="transparent">
+				 ${solidText2Images}
+			</lido-cell>
+			
+			
+			</lido-cell>
+			<lido-cell visible="true" id="actual" layout="row" width="auto" bg-color="#FFF5BB" onEntry="this.padding='10px 18px 10px 18px';this.justifyContent='space-around';this.border='2px solid #FFA500'; this.borderRadius='16px';this.gap='0px';">
+				<lido-cell visible="true" id="add" layout="row">
+				 ${actualAddImages}
+				</lido-cell>
+				<lido-cell visible="true" id="minus" layout="row">
+					${actualMinusImages}
+				</lido-cell>
+			</lido-cell>
+			
+		<lido-cell visible="true" layout="col" height="58%" width="90%" bg-color="transparent" y="0%" onEntry="this.align-items='center';this.justify-content='space-around';this.position='relative';" >
+			
+			<lido-cell layout="row" visible="true" height="400px" width="825px" onEntry="this.align-items='center'; this.justify-content='space-around';">
+				<lido-text visible="true" id="text1" tab-index="2" string="${args.text1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 
+					onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" id="text2" tab-index="3" string="-"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 
+					onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" id="text3" tab-index="4" string="${args.text2}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 
+					onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" id="text4" tab-index="5" string="="  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 
+					onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" id="answer"  tab-index="6" height="184px" width="130px" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="#FFF5BBB2" value="2"
+					onEntry="this.fontWeight='700';this.border='2px solid #FFB612';this.border-radius='16px';" ></lido-text>	
+						
+			</lido-cell>
+			<lido-cell layout="row" visible="true" width="84%" height="300px">
+				<lido-text visible="true" disable-speak="true" value="${args.option1}" type="click" id="option1" tab-index="8" bg-color="#FFAC4C" height="212.4px" width="280px" string="${args.option1}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" disable-speak="true" value="${args.option2}" type="click" id="option2" tab-index="9" bg-color="#FFAC4C" height="212.4px" width="280px" string="${args.option2}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" disable-speak="true" value="${args.option3}" type="click" id="option3" tab-index="10" bg-color="#FFAC4C" height="212.4px" width="280px" string="${args.option3}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" disable-speak="true" type="click" value="${args.option4}" id="option4" tab-index="11" bg-color="#FFAC4C" height="212.4px" width="280px" string="${args.option4}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				
+
+
+			</lido-cell>
+		</lido-cell>
+
+	</lido-container>
   </main>`;
 }

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

@@ -24,47 +24,47 @@ export const substractionWithoutImg = {
 function getContainerXml(args) {
     const { isAllowOnlyCorrect = true } = args;
     let tabCounter = 1;
-    return `<main>
-   <lido-container disable-speak="true" drop-action="infinite-drop" visible="true" template-id="dragAnDrop" id="lido-container" objective="${args.answers}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/pal-Subtraction/Frame.png" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="text1.speak='true';text2.speak='true';text3.speak='true';text4.speak='true';">
-
-		<!-- Chimple Avatar -->
-		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.344px,portrait.402px" width="landscape.296px,portrait.398px" x="landscape.83%, portrait.28%" y="landscape.40%, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" >
-			<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
-			</lido-avatar>
-		</lido-cell>
-		<lido-text visible="false" id="inst" tab-index="1" string="drag and drop the correct option"></lido-text>
-
-		<lido-cell visible="true" layout="col" height="95%" width="90%" bg-color="transparent" y="9%" onEntry="this.align-items='center';this.justify-content='space-around';this.position='relative';" >
-			<lido-cell layout="row" visible="true" height="400px" width="825px" onEntry="this.align-items='center'; this.justify-content='space-around';">
-				<lido-text visible="true" id="text1" tab-index="2" string="${args.text1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 
-					onEntry="this.fontWeight='700';"></lido-text>
-				<lido-text visible="true" id="text2" tab-index="3" string="-"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 
-					onEntry="this.fontWeight='700';"></lido-text>
-				<lido-text visible="true" id="text3" tab-index="4" string="${args.text2}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 
-					onEntry="this.fontWeight='700';"></lido-text>
-				<lido-text visible="true" id="text4" tab-index="5" string="="  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 
-					onEntry="this.fontWeight='700';"></lido-text>
-				<lido-text visible="true" id="drop1" type="drop" tab-index="6" height="212px" width="130px" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="#FFF5BBB2" value="2"
-					onEntry="this.fontWeight='700';this.border='2px solid #FFB612';this.border-radius='16px';" ></lido-text>	
-					<lido-text visible="true" type="drop" value="4" id="drop2" tab-index="7" height="212px" width="130px" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="#FFF5BBB2" 
-					onEntry="this.fontWeight='700';this.border='2px solid #FFB612';this.border-radius='16px';" ></lido-text>	
-			</lido-cell>
-			<lido-cell layout="row" visible="true" width="108%" height="300px">
-				<lido-text visible="true" disable-speak="true" type="drag" id="option1" tab-index="8" bg-color="#FFAC4C" height="212px" width="130px" string="0"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
-				<lido-text visible="true" disable-speak="true" value="1" type="drag" id="option2" tab-index="9" bg-color="#FFAC4C" height="212px" width="130px" string="1"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
-				<lido-text visible="true" disable-speak="true" value="2" type="drag" id="option3" tab-index="10" bg-color="#FFAC4C" height="212px" width="130px" string="2"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
-				<lido-text visible="true" disable-speak="true" type="drag" value="3" id="option4" tab-index="11" bg-color="#FFAC4C" height="212px" width="130px" string="3"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
-				<lido-text visible="true" disable-speak="true" type="drag" value="4" id="option5" tab-index="12" bg-color="#FFAC4C" height="212px" width="130px" string="4"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
-				<lido-text visible="true" disable-speak="true" type="drag" value="5" id="option6" tab-index="13" bg-color="#FFAC4C" height="212px" width="130px" string="5"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
-				<lido-text visible="true" disable-speak="true" type="drag" id="option7" value="6" tab-index="14" bg-color="#FFAC4C" height="212px" width="130px" string="6"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
-				<lido-text visible="true" disable-speak="true" type="drag" value="7" id="option8" tab-index="15" bg-color="#FFAC4C" height="212px" width="130px" string="7"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
-				<lido-text visible="true" disable-speak="true" value="8" type="drag" id="option9" tab-index="16" bg-color="#FFAC4C" height="212px" width="130px" string="8"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
-				<lido-text visible="true" disable-speak="true" value="9" type="drag" id="option10" tab-index="17" bg-color="#FFAC4C" height="212px" width="130px" string="9"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
-
-
-			</lido-cell>
-		</lido-cell>
-
-	</lido-container>
+    return `<main>
+   <lido-container disable-speak="true" drop-action="infinite-drop" visible="true" template-id="dragAnDrop" id="lido-container" objective="${args.answers}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/pal-Subtraction/Frame.png" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="text1.speak='true';text2.speak='true';text3.speak='true';text4.speak='true';">
+
+		<!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.344px,portrait.402px" width="landscape.296px,portrait.398px" x="landscape.83%, portrait.28%" y="landscape.40%, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" >
+			<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+			</lido-avatar>
+		</lido-cell>
+		<lido-text visible="false" id="inst" tab-index="1" string="drag and drop the correct option"></lido-text>
+
+		<lido-cell visible="true" layout="col" height="95%" width="90%" bg-color="transparent" y="9%" onEntry="this.align-items='center';this.justify-content='space-around';this.position='relative';" >
+			<lido-cell layout="row" visible="true" height="400px" width="825px" onEntry="this.align-items='center'; this.justify-content='space-around';">
+				<lido-text visible="true" id="text1" tab-index="2" string="${args.text1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 
+					onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" id="text2" tab-index="3" string="-"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 
+					onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" id="text3" tab-index="4" string="${args.text2}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 
+					onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" id="text4" tab-index="5" string="="  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 
+					onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" id="drop1" type="drop" tab-index="6" height="212px" width="130px" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="#FFF5BBB2" value="2"
+					onEntry="this.fontWeight='700';this.border='2px solid #FFB612';this.border-radius='16px';" ></lido-text>	
+					<lido-text visible="true" type="drop" value="4" id="drop2" tab-index="7" height="212px" width="130px" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="#FFF5BBB2" 
+					onEntry="this.fontWeight='700';this.border='2px solid #FFB612';this.border-radius='16px';" ></lido-text>	
+			</lido-cell>
+			<lido-cell layout="row" visible="true" width="108%" height="300px">
+				<lido-text visible="true" disable-speak="true" type="drag" id="option1" tab-index="8" bg-color="#FFAC4C" height="212px" width="130px" string="0"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" disable-speak="true" value="1" type="drag" id="option2" tab-index="9" bg-color="#FFAC4C" height="212px" width="130px" string="1"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" disable-speak="true" value="2" type="drag" id="option3" tab-index="10" bg-color="#FFAC4C" height="212px" width="130px" string="2"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" disable-speak="true" type="drag" value="3" id="option4" tab-index="11" bg-color="#FFAC4C" height="212px" width="130px" string="3"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" disable-speak="true" type="drag" value="4" id="option5" tab-index="12" bg-color="#FFAC4C" height="212px" width="130px" string="4"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" disable-speak="true" type="drag" value="5" id="option6" tab-index="13" bg-color="#FFAC4C" height="212px" width="130px" string="5"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" disable-speak="true" type="drag" id="option7" value="6" tab-index="14" bg-color="#FFAC4C" height="212px" width="130px" string="6"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" disable-speak="true" type="drag" value="7" id="option8" tab-index="15" bg-color="#FFAC4C" height="212px" width="130px" string="7"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" disable-speak="true" value="8" type="drag" id="option9" tab-index="16" bg-color="#FFAC4C" height="212px" width="130px" string="8"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" disable-speak="true" value="9" type="drag" id="option10" tab-index="17" bg-color="#FFAC4C" height="212px" width="130px" string="9"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+
+
+			</lido-cell>
+		</lido-cell>
+
+	</lido-container>
   </main>`;
 }