lido-player 0.0.2-alpha-50-dev → 0.0.2-alpha-52-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/spelldoor/Background_Spring.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/spelldoor/Background_Spring.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

@@ -14,44 +14,44 @@ export const AmazingStories = {
     },
 };
 function getContainerXml(args) {
-    return `<main>
-    <lido-container show-prev-button="false" 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" 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" 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" 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" 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" 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" 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" 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/sumTogether/sumTogether.stories.js

@@ -7,6 +7,7 @@ const meta = {
         answer: { control: 'text', name: 'answer' },
         sign: { control: 'text', name: 'sign', multiple: true },
         options: { control: 'object', name: 'digits' },
+        isAllowOnlyCorrect: { control: 'boolean', name: 'isAllowOnlyCorrect' },
     },
     args: {
         number1: '10',
@@ -14,6 +15,7 @@ const meta = {
         answer: '1',
         sign: '-',
         options: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
+        isAllowOnlyCorrect: true,
     },
 };
 export default meta;
@@ -30,12 +32,14 @@ export const SumTogether = {
     }
 };
 function getContainerXml(args) {
+    var _a;
     const number1 = args.number1;
     const number2 = args.number2;
     const answer = args.answer;
     const sign = args.sign;
     const options = args.options;
     const objective = answer;
+    const isAllowOnlyCorrect = (_a = args.isAllowOnlyCorrect) !== null && _a !== void 0 ? _a : true;
     let tabCounter = 2;
     const numberMap = {
         1: "one",
@@ -52,58 +56,58 @@ function getContainerXml(args) {
     const topImageCells = options
         .map((cell, i) => {
         const val = numberMap[i + 1];
-        return `
-      <lido-image id="image-${i}" visible="true" width="105px" height="200px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/SumTogether/sum_together_${val}.png" onEntry="this.opacity='0';">
-      </lido-image>
+        return `
+      <lido-image id="image-${i}" visible="true" width="105px" height="200px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/SumTogether/sum_together_${val}.png" onEntry="this.opacity='0';">
+      </lido-image>
     `;
     }).join('\n');
     const dragCells = options
         .map((digit, i) => {
-        return `
-        <lido-text id="option-${i}" tab-index="${tabCounter++}" type="drag" height="195px" width="120px" visible="true"   value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="white" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse';" border-image="">
-        </lido-text>
+        return `
+        <lido-text id="option-${i}" tab-index="${tabCounter++}" type="drag" height="195px" width="120px" visible="true"   value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="white" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse';" border-image="">
+        </lido-text>
         `;
     }).join('\n');
-    return `
-    <main>
-        
-        <lido-container id="sum-together" disable-speak="true" show-drop-border="false" objective="${objective}" tab-index="1"  value="questionBoard" bgImage="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.png"  height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; this.sumTogetherAnimation='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" showCheck="false" isAllowOnlyCorrect="true">
-
-            <!-- Chimple Avatar -->
-            <lido-cell layout="pos" id="pos1" disableEdit="true" value="pos1" height="landscape.570px, portrait.700px" width="landscape.380px, portrait.485px" x="landscape.-80px, portrait.195px" y="landscape.175px, portrait.1085px" ariaHidden="true" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0'; this.z-index='0';">
-                <lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}" onEntry="">
-                </lido-avatar>
-            </lido-cell>
-
-            <!-- top section -->
-            <lido-cell layout="landscape.row,portrait.wrap" id="question-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.5%" width="landscape.100%, portrait.106%" bg-Color="transparent" margin="landscape.100px 0px 0px 0px,portrait.-130px -65px 0px 0px" onEntry="this.z-index='1'; this.justify-content='center';" gap="landscape.35px,portrait.5px">
-                ${topImageCells}
-            </lido-cell>
-
-            <!-- question row-->
-            <lido-cell layout="row" id="question-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.15%" width="landscape.65%, portrait.90%" bg-Color="transparent" margin="landscape.185px 0px 30px 0px,portrait.25px 0px -120px 0px" onEntry="this.z-index='1'; this.justify-content='center';" gap="landscape.90px,portrait.40px">
-                <lido-text id="${number1}" tab-index="${tabCounter++}" height="215px" width="120px" visible="true"  value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="">
-                </lido-text>
-                <lido-text id="operator-${sign}" tab-index="${tabCounter++}" height="295px" width="120px" visible="true"  value="${sign}" string="${sign}" font-family="'Baloo Bhai 2'" font-color="black" font-size="195px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="">
-                </lido-text>
-                <lido-text id="${number2}" tab-index="${tabCounter++}" height="215px" width="120px" visible="true"  value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="">
-                </lido-text>
-                <lido-text id="equal" tab-index="${tabCounter++}" height="215px" width="120px" visible="true"  value="=" string="=" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="">
-                </lido-text>
-                <lido-text id="${answer}" tab-index="${tabCounter++}" type="drop" height="245px" width="175px" visible="true"  value="${answer}" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png">
-                </lido-text>
-            </lido-cell>
-
-
-            <!-- option row-->
-            <lido-cell layout="landscape.row, portrait.wrap" id="question-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='0';" gap="landscape.20px,portrait.5px">
-                ${dragCells}
-            </lido-cell>
-
-            <!-- speaking element-->
-            <lido-text id="speak-text" tab-index="5" height="100%" width="100%" visible="false" string="solve the problem by counting the teddys above and drag the correct answer" font-family="'Baloo Bhai 2'" font-color="red" font-size="75px"  bg-color="transparent" onInCorrect="" onEntry="this.opacity='0'; this.speak='true';" border-image="">
-            </lido-text>
-        </lido-container>
-    </main>
+    return `
+    <main>
+        
+        <lido-container id="sum-together" disable-speak="true" show-drop-border="false" objective="${objective}" tab-index="1"  value="sum-together" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.png"  height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; this.sumTogetherAnimation='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}">
+
+            <!-- Chimple Avatar -->
+            <lido-cell layout="pos" id="pos1" disableEdit="true" value="pos1" height="landscape.570px, portrait.700px" width="landscape.380px, portrait.485px" x="landscape.-80px, portrait.195px" y="landscape.175px, portrait.1085px" ariaHidden="true" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0'; this.z-index='0';">
+                <lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}" onEntry="">
+                </lido-avatar>
+            </lido-cell>
+
+            <!-- top section -->
+            <lido-cell layout="landscape.row,portrait.wrap" id="question-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.5%" width="landscape.100%, portrait.106%" bg-Color="transparent" margin="landscape.100px 0px 0px 0px,portrait.-130px -65px 0px 0px" onEntry="this.z-index='1'; this.justify-content='center';" gap="landscape.35px,portrait.5px">
+                ${topImageCells}
+            </lido-cell>
+
+            <!-- question row-->
+            <lido-cell layout="row" id="question-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.15%" width="landscape.65%, portrait.90%" bg-Color="transparent" margin="landscape.185px 0px 30px 0px,portrait.25px 0px -120px 0px" onEntry="this.z-index='1'; this.justify-content='center';" gap="landscape.90px,portrait.40px">
+                <lido-text id="${number1}" tab-index="${tabCounter++}" height="215px" width="120px" visible="true"  value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="">
+                </lido-text>
+                <lido-text id="operator-${sign}" tab-index="${tabCounter++}" height="295px" width="120px" visible="true"  value="${sign}" string="${sign}" font-family="'Baloo Bhai 2'" font-color="black" font-size="195px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="">
+                </lido-text>
+                <lido-text id="${number2}" tab-index="${tabCounter++}" height="215px" width="120px" visible="true"  value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="">
+                </lido-text>
+                <lido-text id="equal" tab-index="${tabCounter++}" height="215px" width="120px" visible="true"  value="=" string="=" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="">
+                </lido-text>
+                <lido-text id="${answer}" tab-index="${tabCounter++}" type="drop" height="245px" width="175px" visible="true"  value="${answer}" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png">
+                </lido-text>
+            </lido-cell>
+
+
+            <!-- option row-->
+            <lido-cell layout="landscape.row, portrait.wrap" id="question-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='0';" gap="landscape.20px,portrait.5px">
+                ${dragCells}
+            </lido-cell>
+
+            <!-- speaking element-->
+            <lido-text id="speak-text" tab-index="5" height="100%" width="100%" visible="false" string="solve the problem by counting the teddys above and drag the correct answer" font-family="'Baloo Bhai 2'" font-color="red" font-size="75px"  bg-color="transparent" onInCorrect="" onEntry="this.opacity='0'; this.speak='true';" border-image="">
+            </lido-text>
+        </lido-container>
+    </main>
   `;
 }

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

@@ -27,33 +27,33 @@ export const total = {
 };
 function getContainerXml(args) {
     const margins = ['0px 100px 0px 0px', '0px 80px 0px 0px', '-80px -214px 0px 0px', '-66px 367px 0px 0px', '0px -180px 0px 0px',];
-    return `
-  <main>
-    <lido-container  visible="true"  id="lido-container"  onInCorrect="lido-avatar.avatarAnimate='Fail';"  onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='1000'; ${args.images.map((_, i) => `i${i + 1}.revealImageValue='true'; this.sleep='1000';`).join('')} this.sleep='2000';"
-    bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" objective="${args.answer}" is-continue-on-correct="true" show-Check="false" >
-<!-- Chimple Avatar -->
-	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.448px,portrait.402px" width="landscape.350px,portrait.398px" x="landscape.37%, portrait.-4%" y="landscape.48%, 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>
-
-      <!-- Main Layout -->
-      <lido-cell layout="landscape.row,portrait.col" visible="true" width="90%" height="90%" bg-color="transparent">
-        <!-- Left column: images -->
-        <lido-cell layout="col" visible="true" margin="landscape.0px 117px 0px -117px,portrait.0px" onEntry="this.animation='topToPlace 1.5s linear';" height="751px" width="500px" bg-color="transparent">
+    return `
+  <main>
+    <lido-container  visible="true"  id="lido-container"  onInCorrect="lido-avatar.avatarAnimate='Fail';"  onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='1000'; ${args.images.map((_, i) => `i${i + 1}.revealImageValue='true'; this.sleep='1000';`).join('')} this.sleep='2000';"
+    bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" objective="${args.answer}" is-continue-on-correct="true" show-Check="false" >
+<!-- Chimple Avatar -->
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.402px,portrait.402px" width="landscape.302px,portrait.398px" x="landscape.84%, portrait.-4%" y="landscape.58%, 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>
+
+      <!-- Main Layout -->
+      <lido-cell layout="landscape.row,portrait.col" y="landscape.3%,portrait.0px" onEntry="this.position='relative';" visible="true" width="90%" height="90%" bg-color="transparent">
+        <!-- Left column: images -->
+        <lido-cell layout="wrap" visible="true"  margin="landscape.0px -161px 0px -148px,portrait.0px"  onEntry="this.animation='topToPlace 1.5s linear';this.gridTemplateColumns = 'repeat(5, 1fr)' ;this.gap='10px';" bg-color="transparent" height="auto" width="auto"  >
           ${args.images
-        .map((img, i) => `
-              <lido-image id="i${i + 1}" value="${i + 1}" type="text" visible="true" src="${img}" height="120px" width="120px"  margin="${margins[i % margins.length]}" ></lido-image>`)
-        .join('')}
-        </lido-cell>
-
-        <!-- Right column: text + calculator -->
-        <lido-cell layout="col" visible="true" margin="landscape.0px,portrait.0px -184px 0px 0px" height="751px" width="500px" bg-color="transparent">
-          <lido-text visible="true" bg-color="#60DADA" height="100px" width="456px" margin="0px" string="${args.questionText}" onEntry="this.border='5px solid #029A9A'; this.border-radius='10px'; this.font-size='40px'; this.font-weight='600';"></lido-text>
-          <lido-calculator visible="true" height="650px" y="26px" width="456px" onEntry="this.position='relative';"></lido-calculator>
-        </lido-cell>
-      </lido-cell>
-    </lido-container>
-  </main>
+        .map((img, i) => `
+              <lido-image id="i${i + 1}" value="${i + 1}" type="text" visible="true" src="${img}" height="landscape.170px,portrait.140px" width="landscape.170px,portrait.140px"    ></lido-image>`)
+        .join('')}
+        </lido-cell>
+
+        <!-- Right column: text + calculator -->
+        <lido-cell layout="col" visible="true" margin="landscape.0px,portrait.0px -184px 0px 0px" height="751px" width="500px" bg-color="transparent">
+          <lido-text visible="true" bg-color="#60DADA" height="100px" width="456px" margin="0px" string="${args.questionText}" onEntry="this.border='5px solid #029A9A'; this.border-radius='10px'; this.font-size='40px'; this.font-weight='600';"></lido-text>
+          <lido-calculator visible="true" height="650px" y="26px" width="456px" onEntry="this.position='relative';"></lido-calculator>
+        </lido-cell>
+      </lido-cell>
+    </lido-container>
+  </main>
   `;
 }

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

@@ -7,6 +7,7 @@ const meta = {
         backSlot: { control: 'select', options: ['front', 'back'], name: 'Flash Card Back Slot' },
         frontText: { control: 'text', name: 'Flash Card Front Text' },
         backText: { control: 'text', name: 'Flash Card Back Text' },
+        isAllowOnlyCorrect: { control: 'boolean', name: 'Allow Only Correct' },
     },
     args: {
         flashCardImage: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/flash-card/Unicorn.png'],
@@ -14,6 +15,7 @@ const meta = {
         backSlot: 'back',
         frontText: 'Unicorn is cute and shy',
         backText: 'I am a colour. I am mentioned in the poem along with Yellow and Blue. My name starts with the letter "R". Who am I?',
+        isAllowOnlyCorrect: true,
     },
 };
 export default meta;
@@ -30,41 +32,43 @@ export const writeCard = {
     }
 };
 function getContainerXml(args) {
+    var _a;
     const flashCardImage = args.flashCardImage[0];
     const frontSlot = args.frontSlot;
     const backSlot = args.backSlot;
     const frontText = args.frontText;
     const backText = args.backText;
-    return `
-        <main>
-
-            <lido-container id="lido-container" objective="" tab-index="1"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png"  height="1600px" width="900px" 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';" show-check="false" is-continue-on-correct="true" after-drop="false" show-next-button="true">
-
-                <!-- 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.-24px, portrait.465px" y="landscape.385px, portrait.983px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
-                    <lido-avatar id="lido-avatar" disable-edit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" onEntry="">
-                    </lido-avatar>
-                    <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="inherit" height="27px" x="landscape.-7px, portrait.-7px" y="landscape.450px, portrait.540px" alt-text="{shadowImage}">
-                    </lido-image>
-                </lido-cell>
-
-                <!-- flash-card element -->
-                <lido-cell layout="pos" id="pos2" disable-edit="true" value="pos2" width="landscape.594px, portrait.754px" height="landscape.725px, portrait.925px" x="landscape.519px, portrait.73px" y="landscape.127px, portrait.172px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
-                    <lido-flash-card x="50" y="100" width="landscape.594px, portrait.754px" height="landscape.725px, portrait.925px" bg-color="transparent" onEntry="this.border-radius='32px';" onTouch="">
-                        <lido-cell layout="col" id="col1"  audio="" slot="${frontSlot}" disable-edit="true" visible="true" width="landscape.594px, portrait.754px" height="landscape.725px, portrait.925px" bg-color="white" type="" tab-index="2" dropAttr="diagonal" onEntry="this.border-radius=32px; this.padding='8px 8px 16px 8px';" y="landscape.5px,portrait.10px">
-                            <lido-image visible="true" src="${flashCardImage}" z="1" width="landscape.578px, portrait.738px" height="landscape.578px, portrait.738px" onEntry="this.flex-shrink='0';" border-radius="24px 24px 6px 6px" alt-text="{image1}">
-                            </lido-image>
-                            <lido-text id="txt1" width="553px" height="80px" display="flex" onEntry="this.textAlign='center'; this.flexDirection='column'; this.justifyContent='center'; this.alignItems='center'; this.flexShrink='0';" font-family="'Baloo Bhai 2'" font-size="52px" z="1" font-color="black" font-weight="500" color="#303030" string="${frontText}" visible="true" y="landscape.15px, portrait.15px" bg-color="white" margin="landscape.45px 0px 45px 0px, portrait.45px 0px 45px 0px">
-                            </lido-text>
-                        </lido-cell>
-                        <lido-cell layout="col" tab-index="3"  audio="" id="col2" slot="${backSlot}" disable-edit="true" visible="true"  width="landscape.594px, portrait.754px" height="landscape.725px, portrait.925px" bg-color="white" type="" dropAttr="diagonal" onEntry="this.border-radius=32px; this.padding='8px 8px 16px 8px';" y="landscape.,portrait.">
-                            <lido-text id="txt2" height="480px" width="495px" display="flex" onEntry="this.textAlign='left'; this.lineHeight='1.5';" font-family="'Baloo Bhai 2'" font-size="52px" z="1" font-color="black" font-weight="500" color="#000000" string="${backText}" visible="true" y="landscape.35px, portrait.15px" bg-color="white" margin="landscape.45px 0px 45px 0px, portrait.45px 0px 45px 0px">
-                            </lido-text>
-                        </lido-cell>
-                    </lido-flash-card>
-                </lido-cell>
-
-            </lido-container>
-        </main>
+    const isAllowOnlyCorrect = (_a = args.isAllowOnlyCorrect) !== null && _a !== void 0 ? _a : true;
+    return `
+        <main>
+
+            <lido-container id="lido-container" objective="" tab-index="1"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png"  height="1600px" width="900px" 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';" show-check="false" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}" after-drop="false" show-next-button="true">
+
+                <!-- 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.-24px, portrait.465px" y="landscape.385px, portrait.983px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
+                    <lido-avatar id="lido-avatar" disable-edit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" onEntry="">
+                    </lido-avatar>
+                    <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="inherit" height="27px" x="landscape.-7px, portrait.-7px" y="landscape.450px, portrait.540px" alt-text="{shadowImage}">
+                    </lido-image>
+                </lido-cell>
+
+                <!-- flash-card element -->
+                <lido-cell layout="pos" id="pos2" disable-edit="true" value="pos2" width="landscape.594px, portrait.754px" height="landscape.725px, portrait.925px" x="landscape.519px, portrait.73px" y="landscape.127px, portrait.172px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
+                    <lido-flash-card x="50" y="100" width="landscape.594px, portrait.754px" height="landscape.725px, portrait.925px" bg-color="transparent" onEntry="this.border-radius='32px';" onTouch="">
+                        <lido-cell layout="col" id="col1"  audio="" slot="${frontSlot}" disable-edit="true" visible="true" width="landscape.594px, portrait.754px" height="landscape.725px, portrait.925px" bg-color="white" type="" tab-index="2" dropAttr="diagonal" onEntry="this.border-radius=32px; this.padding='8px 8px 16px 8px';" y="landscape.5px,portrait.10px">
+                            <lido-image visible="true" src="${flashCardImage}" z="1" width="landscape.578px, portrait.738px" height="landscape.578px, portrait.738px" onEntry="this.flex-shrink='0';" border-radius="24px 24px 6px 6px" alt-text="{image1}">
+                            </lido-image>
+                            <lido-text id="txt1" width="553px" height="80px" display="flex" onEntry="this.textAlign='center'; this.flexDirection='column'; this.justifyContent='center'; this.alignItems='center'; this.flexShrink='0';" font-family="'Baloo Bhai 2'" font-size="52px" z="1" font-color="black" font-weight="500" color="#303030" string="${frontText}" visible="true" y="landscape.15px, portrait.15px" bg-color="white" margin="landscape.45px 0px 45px 0px, portrait.45px 0px 45px 0px">
+                            </lido-text>
+                        </lido-cell>
+                        <lido-cell layout="col" tab-index="3"  audio="" id="col2" slot="${backSlot}" disable-edit="true" visible="true"  width="landscape.594px, portrait.754px" height="landscape.725px, portrait.925px" bg-color="white" type="" dropAttr="diagonal" onEntry="this.border-radius=32px; this.padding='8px 8px 16px 8px';" y="landscape.,portrait.">
+                            <lido-text id="txt2" height="480px" width="495px" display="flex" onEntry="this.textAlign='left'; this.lineHeight='1.5';" font-family="'Baloo Bhai 2'" font-size="52px" z="1" font-color="black" font-weight="500" color="#000000" string="${backText}" visible="true" y="landscape.35px, portrait.15px" bg-color="white" margin="landscape.45px 0px 45px 0px, portrait.45px 0px 45px 0px">
+                            </lido-text>
+                        </lido-cell>
+                    </lido-flash-card>
+                </lido-cell>
+
+            </lido-container>
+        </main>
     `;
 }