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

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

@@ -63,68 +63,68 @@ export const QuestionAndOptions = {
     },
 };
 function getContainerXml(args) {
-    return `<main>
- <lido-container visible="true" objective="${args.correctObjective.toLowerCase()}" is-continue-on-correct="${args.PracticeMode}" show-next-button="${!args.PracticeMode}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/bg-image.png" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="this.sleep='1000'; this.slideAnimation='true';">
-
-	<!-- Chimple Avatar -->
-	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="250px" width="250px" x="landscape.0, portrait.670px" y="landscape.105px, portrait.1315px" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
-		<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" bg-color="transparent">
-		</lido-avatar>
-		<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/Shadow.png" bg-color="transparent" width="165px" height="40px" x="40px" y="205px" alt-text="{shadowImgae}">
-		</lido-image>
-	</lido-cell>
-
-	<lido-cell visible="true" layout="col" width="100%" height="100%" bg-color="transparent">
-		<lido-text visible="true" width="70%" height="landscape.10%, portrait.5%" bg-color="transparent"></lido-text>
-
-		<!-- Question -->
-		<lido-text tab-index="1" show-speak-icon="true" visible="true" width="landscape.70%, portrait.62%" height="10%" string="${args.question}" audio="${args.questionAudio}" font-size="36px" onEntry=" this.padding='0px 45px';this.fontWeight='600'; " bg-color="transparent"></lido-text>
-
-		<lido-cell visible="true" layout="landscape.col, portrait.row" flex-direction="landscape., portrait.row-reverse" align-items="landscape.center, portrait.start" width="100%" height="80%" bg-color="transparent">
-
-			<!-- Question Image -->
-      ${args.questionImg === '' || args.questionImg.length <= 0 ? '' : `<lido-image visible="true" height="30%" bg-color="white" src="${args.questionImg}"></lido-image>`}
-			
-			<!-- Slide Elements -->
-			<lido-cell visible="true" layout="landscape.row, portrait.col" width="landscape.64%, portrait.26%" height="landscape.40%, portrait.90%" bg-color="#FBCAB5" border-radius="landscape.16px 16px 0 0, portrait.0 16px 16px 0" onEntry="this.flex-shrink='0';this.padding='60px 40px';this.gap='37px';">
-				<lido-cell show-speak-icon="true" visible="true" layout="col" bg-color="white" width="landscape.182px, portrait.154px" height="landscape.85%, portrait.17%" value="${args.option1.toLowerCase()}" type="slide" onTouch="" border-radius="6px" onEntry="this.flex-shrink='0';this.border='2px solid #CACACA'; this.paddingTop='50px';">
-					<lido-cell visible="true" layout="pos" width="48px" height="48px" z="1">
-						<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/Reorder%20button.png"></lido-image>
-					</lido-cell>
-          ${args.option1Img === '' || args.option1Img.length <= 0 ? '' : `<lido-image visible="true" width="landscape., portrait.100%" src="${args.option1Img}"></lido-image>`}
-					
-					<lido-text visible="true" string="${args.option1}" audio="${args.option1Audio}" font-size="24px" onEntry="this.fontWeight='800'; this.textAlign='left'; this.lineHeight='26px';"></lido-text>
-				</lido-cell>
-				
-				<lido-cell show-speak-icon="true" visible="true" layout="col" bg-color="white" width="landscape.182px, portrait.154px" height="landscape.85%, portrait.17%" value="${args.option2.toLowerCase()}" type="slide" onTouch="" border-radius="6px" onEntry="this.flex-shrink='0'; this.border='2px solid #CACACA'; this.paddingTop='50px';">
-					<lido-cell visible="true" layout="pos" width="48px" height="48px" z="1">
-						<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/Reorder%20button.png"></lido-image>
-					</lido-cell>
-					${args.option2Img === '' || args.option2Img.length <= 0 ? '' : `<lido-image visible="true" width="landscape., portrait.100%" src="${args.option2Img}"></lido-image>`}
-					
-					<lido-text visible="true" string="${args.option2}" audio="${args.option2Audio}" font-size="24px" onEntry="this.fontWeight='800'; this.textAlign='left'; this.lineHeight='26px';"></lido-text>
-				</lido-cell>
-				
-				<lido-cell show-speak-icon="true" visible="true" layout="col" bg-color="white" width="landscape.182px, portrait.154px" height="landscape.85%, portrait.17%" value="${args.option3.toLowerCase()}" type="slide" onTouch="" border-radius="6px" onEntry=" this.flex-shrink='0';this.border='2px solid #CACACA'; this.paddingTop='50px';">
-					<lido-cell visible="true" layout="pos" width="48px" height="48px" z="1">
-						<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/Reorder%20button.png"></lido-image>
-					</lido-cell>
-					${args.option3Img === '' || args.option3Img.length <= 0 ? '' : `<lido-image visible="true" width="landscape., portrait.100%" src="${args.option3Img}"></lido-image>`}
-					
-					<lido-text visible="true" string="${args.option3}" audio="${args.option3Audio}" font-size="24px" onEntry="this.fontWeight='800'; this.textAlign='left'; this.lineHeight='26px';"></lido-text>
-				</lido-cell>
-				
-				<lido-cell show-speak-icon="true" visible="true" layout="col" bg-color="white" width="landscape.182px, portrait.154px" height="landscape.85%, portrait.17%" value="${args.option4.toLowerCase()}" type="slide" onTouch="" border-radius="6px" onEntry="this.flex-shrink='0';this.border='2px solid #CACACA'; this.paddingTop='50px';">
-					<lido-cell visible="true" layout="pos" width="48px" height="48px" z="1">
-						<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/Reorder%20button.png"></lido-image>
-					</lido-cell>
-					${args.option4Img === '' || args.option4Img.length <= 0 ? '' : `<lido-image visible="true" width="landscape., portrait.100%" src="${args.option4Img}"></lido-image>`}
-					
-					<lido-text visible="true" string="${args.option4}" audio="${args.option4Audio}" font-size="24px" onEntry="this.fontWeight='800'; this.textAlign='left'; this.lineHeight='26px';"></lido-text>
-				</lido-cell>
-			</lido-cell>
-		</lido-cell>
-	</lido-cell>
-</lido-container>
+    return `<main>
+ <lido-container visible="true" objective="${args.correctObjective.toLowerCase()}" is-continue-on-correct="${args.PracticeMode}" show-next-button="${!args.PracticeMode}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/bg-image.png" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="this.sleep='1000'; this.slideAnimation='true';">
+
+	<!-- Chimple Avatar -->
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="250px" width="250px" x="landscape.0, portrait.670px" y="landscape.105px, portrait.1315px" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
+		<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" bg-color="transparent">
+		</lido-avatar>
+		<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/Shadow.png" bg-color="transparent" width="165px" height="40px" x="40px" y="205px" alt-text="{shadowImgae}">
+		</lido-image>
+	</lido-cell>
+
+	<lido-cell visible="true" layout="col" width="100%" height="100%" bg-color="transparent">
+		<lido-text visible="true" width="70%" height="landscape.10%, portrait.5%" bg-color="transparent"></lido-text>
+
+		<!-- Question -->
+		<lido-text tab-index="1" show-speak-icon="true" visible="true" width="landscape.70%, portrait.62%" height="10%" string="${args.question}" audio="${args.questionAudio}" font-size="36px" onEntry=" this.padding='0px 45px';this.fontWeight='600'; " bg-color="transparent"></lido-text>
+
+		<lido-cell visible="true" layout="landscape.col, portrait.row" flex-direction="landscape., portrait.row-reverse" align-items="landscape.center, portrait.start" width="100%" height="80%" bg-color="transparent">
+
+			<!-- Question Image -->
+      ${args.questionImg === '' || args.questionImg.length <= 0 ? '' : `<lido-image visible="true" height="30%" bg-color="white" src="${args.questionImg}"></lido-image>`}
+			
+			<!-- Slide Elements -->
+			<lido-cell visible="true" layout="landscape.row, portrait.col" width="landscape.64%, portrait.26%" height="landscape.40%, portrait.90%" bg-color="#FBCAB5" border-radius="landscape.16px 16px 0 0, portrait.0 16px 16px 0" onEntry="this.flex-shrink='0';this.padding='60px 40px';this.gap='37px';">
+				<lido-cell show-speak-icon="true" visible="true" layout="col" bg-color="white" width="landscape.182px, portrait.154px" height="landscape.85%, portrait.17%" value="${args.option1.toLowerCase()}" type="slide" onTouch="" border-radius="6px" onEntry="this.flex-shrink='0';this.border='2px solid #CACACA'; this.paddingTop='50px';">
+					<lido-cell visible="true" layout="pos" width="48px" height="48px" z="1">
+						<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/Reorder%20button.png"></lido-image>
+					</lido-cell>
+          ${args.option1Img === '' || args.option1Img.length <= 0 ? '' : `<lido-image visible="true" width="landscape., portrait.100%" src="${args.option1Img}"></lido-image>`}
+					
+					<lido-text visible="true" string="${args.option1}" audio="${args.option1Audio}" font-size="24px" onEntry="this.fontWeight='800'; this.textAlign='left'; this.lineHeight='26px';"></lido-text>
+				</lido-cell>
+				
+				<lido-cell show-speak-icon="true" visible="true" layout="col" bg-color="white" width="landscape.182px, portrait.154px" height="landscape.85%, portrait.17%" value="${args.option2.toLowerCase()}" type="slide" onTouch="" border-radius="6px" onEntry="this.flex-shrink='0'; this.border='2px solid #CACACA'; this.paddingTop='50px';">
+					<lido-cell visible="true" layout="pos" width="48px" height="48px" z="1">
+						<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/Reorder%20button.png"></lido-image>
+					</lido-cell>
+					${args.option2Img === '' || args.option2Img.length <= 0 ? '' : `<lido-image visible="true" width="landscape., portrait.100%" src="${args.option2Img}"></lido-image>`}
+					
+					<lido-text visible="true" string="${args.option2}" audio="${args.option2Audio}" font-size="24px" onEntry="this.fontWeight='800'; this.textAlign='left'; this.lineHeight='26px';"></lido-text>
+				</lido-cell>
+				
+				<lido-cell show-speak-icon="true" visible="true" layout="col" bg-color="white" width="landscape.182px, portrait.154px" height="landscape.85%, portrait.17%" value="${args.option3.toLowerCase()}" type="slide" onTouch="" border-radius="6px" onEntry=" this.flex-shrink='0';this.border='2px solid #CACACA'; this.paddingTop='50px';">
+					<lido-cell visible="true" layout="pos" width="48px" height="48px" z="1">
+						<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/Reorder%20button.png"></lido-image>
+					</lido-cell>
+					${args.option3Img === '' || args.option3Img.length <= 0 ? '' : `<lido-image visible="true" width="landscape., portrait.100%" src="${args.option3Img}"></lido-image>`}
+					
+					<lido-text visible="true" string="${args.option3}" audio="${args.option3Audio}" font-size="24px" onEntry="this.fontWeight='800'; this.textAlign='left'; this.lineHeight='26px';"></lido-text>
+				</lido-cell>
+				
+				<lido-cell show-speak-icon="true" visible="true" layout="col" bg-color="white" width="landscape.182px, portrait.154px" height="landscape.85%, portrait.17%" value="${args.option4.toLowerCase()}" type="slide" onTouch="" border-radius="6px" onEntry="this.flex-shrink='0';this.border='2px solid #CACACA'; this.paddingTop='50px';">
+					<lido-cell visible="true" layout="pos" width="48px" height="48px" z="1">
+						<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/Reorder%20button.png"></lido-image>
+					</lido-cell>
+					${args.option4Img === '' || args.option4Img.length <= 0 ? '' : `<lido-image visible="true" width="landscape., portrait.100%" src="${args.option4Img}"></lido-image>`}
+					
+					<lido-text visible="true" string="${args.option4}" audio="${args.option4Audio}" font-size="24px" onEntry="this.fontWeight='800'; this.textAlign='left'; this.lineHeight='26px';"></lido-text>
+				</lido-cell>
+			</lido-cell>
+		</lido-cell>
+	</lido-cell>
+</lido-container>
   </main>`;
 }

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

@@ -35,62 +35,62 @@ function getContainerXml(args) {
         .map((option, index) => {
         const pickedColors = args.dragColors;
         const color = pickedColors[Math.floor(Math.random() * pickedColors.length)];
-        return `
-			<lido-text visible="true" id="drag${tabCounter}" tab-index="${tabCounter++}" width="140px" height="86px" value="${option}" string="${option}" font-color="white" font-size="76px" font-family="Baloo Bhai 2" bg-color="${color}" border-radius="8px" onEntry="this.border='5px solid ${color}'; this.font-weight='500'; this.sleep='100';this.animation='rightToPlace 3s linear';" type="drag" margin="${index % 2 == 0 ? 'landscape.196px 0px 0px -52px' : 'landscape.-56px 28px 0px -60px'}, portrait.0px 0px 0px 0px" isAllowOnlyCorrect="true" onTouch="this.speak='true';" onCorrect="this.speak='true';" ></lido-text>
+        return `
+			<lido-text visible="true" id="drag${tabCounter}" tab-index="${tabCounter++}" width="140px" height="86px" value="${option}" string="${option}" font-color="white" font-size="76px" font-family="Baloo Bhai 2" bg-color="${color}" border-radius="8px" onEntry="this.border='5px solid ${color}'; this.font-weight='500'; this.sleep='100';this.animation='rightToPlace 3s linear';" type="drag" margin="${index % 2 == 0 ? 'landscape.196px 0px 0px -52px' : 'landscape.-56px 28px 0px -60px'}, portrait.0px 0px 0px 0px" isAllowOnlyCorrect="true" onTouch="this.speak='true';" onCorrect="this.speak='true';" ></lido-text>
       `;
     })
         .join('');
-    return `
-<main>
-
-    <lido-container id="lido-container" visible="true" objective="${answers.join(',')}" onEntry="audio12.speak='true';"
-        onCorrect="lido-avatar.avatarAnimate='Success';  sentenceText.speak='true'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" is-continue-on-correct="${isContinueOnCorrect}" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Row%20blocks.png" custom-style= ".dropping {
-        border: 5px dashed #2C3836 !important;
-        background-color: #6D8C87 !important;
-        }" is-allow-only-correct="${isAllowOnlyCorrect}">
-
-        <!-- Audio -->
-        <lido-text visible="false" id="audio12" tab-index="${tabCounter++}" onEntry="this.display='none';" string="Drag the missing number to its correct place and complete the number puzzle."></lido-text>
-        
-        <!-- Chimple Avatar -->
-        <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" x="landscape.1432px,portrait.330px" y="landscape.612px, portrait.1338px" aria-hidden="true" z="9999" bg-color="transparent" visible="true" onEntry="" margin="-104px 0px 0px -54px">
-                <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="404px" width="302px" 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/temp1/Shadow.png" bg-color="transparent" width="165px" height="30px" x="landscape.70px,portrait.125px" y="landscape.320px,portrait.400px" alt-text="{shadowImage}">
-            </lido-image>
-        </lido-cell>
-
-            
-        <lido-cell visible="true" layout="landscape.col, portrait.row" width="landscape.98%, portrait.860px" height="landscape.712px,portrait.1032px" padding="landscape.20px 42px, portrait.60px 10px" bg-Color="#234838" margin="landscape.90px 0px 0px 0px, portrait.-136px 0px 0px 0px" onEntry="this.animation='topToPlace 1s linear';" border-radius="10px">
-            <lido-cell id="numberBlocks" visible="true" audio="" width="lanscape.102%, portrait.55%" height="landscape.40%, portrait.100%" layout="landscape.col, portrait.row" bg-color="transparent" gap="landscape.10px, portrait.20px" margin="landscape.16px -46px 0px 0px, portrait.0px 0px 0px 0px" padding="landscape.0px 0px 0px 0px, portrait.0px 0px 0px 30px">
-                <!-- drop elements -->
-                <lido-cell bg-color="transparent" height="landscape.32%, portrait.102%" width="landscape.103%, portrait.33%" 
-                    visible="true" onEntry="this.display='flex'; this.alignItems='center'; this.justify-content='flex-start';  this.flexWrap='wrap';" margin="landscape.-214px 0px 0px 0px, portrait.40px 5px 40px -258px" layout="landscape.row,portrait.col" gap="landscape.14px, portrait.12px">
+    return `
+<main>
+
+    <lido-container id="lido-container" visible="true" objective="${answers.join(',')}" onEntry="audio12.speak='true';"
+        onCorrect="lido-avatar.avatarAnimate='Success';  sentenceText.speak='true'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" is-continue-on-correct="${isContinueOnCorrect}" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Row%20blocks.png" custom-style= ".dropping {
+        border: 5px dashed #2C3836 !important;
+        background-color: #6D8C87 !important;
+        }" is-allow-only-correct="${isAllowOnlyCorrect}">
+
+        <!-- Audio -->
+        <lido-text visible="false" id="audio12" tab-index="${tabCounter++}" onEntry="this.display='none';" string="Drag the missing number to its correct place and complete the number puzzle."></lido-text>
+        
+        <!-- Chimple Avatar -->
+        <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" x="landscape.1432px,portrait.330px" y="landscape.612px, portrait.1338px" aria-hidden="true" z="9999" bg-color="transparent" visible="true" onEntry="" margin="-104px 0px 0px -54px">
+                <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="404px" width="302px" 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/temp1/Shadow.png" bg-color="transparent" width="165px" height="30px" x="landscape.70px,portrait.125px" y="landscape.320px,portrait.400px" alt-text="{shadowImage}">
+            </lido-image>
+        </lido-cell>
+
+            
+        <lido-cell visible="true" layout="landscape.col, portrait.row" width="landscape.98%, portrait.860px" height="landscape.712px,portrait.1032px" padding="landscape.20px 42px, portrait.60px 10px" bg-Color="#234838" margin="landscape.90px 0px 0px 0px, portrait.-136px 0px 0px 0px" onEntry="this.animation='topToPlace 1s linear';" border-radius="10px">
+            <lido-cell id="numberBlocks" visible="true" audio="" width="lanscape.102%, portrait.55%" height="landscape.40%, portrait.100%" layout="landscape.col, portrait.row" bg-color="transparent" gap="landscape.10px, portrait.20px" margin="landscape.16px -46px 0px 0px, portrait.0px 0px 0px 0px" padding="landscape.0px 0px 0px 0px, portrait.0px 0px 0px 30px">
+                <!-- drop elements -->
+                <lido-cell bg-color="transparent" height="landscape.32%, portrait.102%" width="landscape.103%, portrait.33%" 
+                    visible="true" onEntry="this.display='flex'; this.alignItems='center'; this.justify-content='flex-start';  this.flexWrap='wrap';" margin="landscape.-214px 0px 0px 0px, portrait.40px 5px 40px -258px" layout="landscape.row,portrait.col" gap="landscape.14px, portrait.12px">
                     ${args.numbers.map((opt, index) => {
         const color = args.numColors;
         const cleanValue = opt.substring(1); // removes the first character (@)
         if (opt.startsWith('@')) {
-            return `
-                    <lido-text visible="true" class="dropping" id="drop${tabCounter}" tab-index="${tabCounter++}" width="138px" height="86px" value="${cleanValue}" string="" font-color="#182A4F" font-size="76px" font-family="Baloo Bhai 2" bg-color="#6D8C87" border-radius="8px" onCorrect="lido-avatar.avatarAnimate='Success';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='1000';" onEntry="this.border='5px solid #2C3836'; this.speak='true';" type="drop" layout="row"></lido-text>
+            return `
+                    <lido-text visible="true" class="dropping" id="drop${tabCounter}" tab-index="${tabCounter++}" width="138px" height="86px" value="${cleanValue}" string="" font-color="#182A4F" font-size="76px" font-family="Baloo Bhai 2" bg-color="#6D8C87" border-radius="8px" onCorrect="lido-avatar.avatarAnimate='Success';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='1000';" onEntry="this.border='5px solid #2C3836'; this.speak='true';" type="drop" layout="row"></lido-text>
                     `;
         }
-        return `
-                    <lido-text visible="true" id="num${tabCounter}" tab-index="${tabCounter++}" width="140px" height="94px" value="${opt}" string="${opt}" font-color="#182A4F" font-size="76px" font-family="Baloo Bhai 2" bg-color="${index % 2 !== 0 ? color[0] : color[1]}" border-radius="8px" onEntry="this.font-weight='500'" onTouch="this.speak='true';" margin="0px 1px 0px 0px"></lido-text>
+        return `
+                    <lido-text visible="true" id="num${tabCounter}" tab-index="${tabCounter++}" width="140px" height="94px" value="${opt}" string="${opt}" font-color="#182A4F" font-size="76px" font-family="Baloo Bhai 2" bg-color="${index % 2 !== 0 ? color[0] : color[1]}" border-radius="8px" onEntry="this.font-weight='500'" onTouch="this.speak='true';" margin="0px 1px 0px 0px"></lido-text>
                     `;
-    }).join('')}
-                </lido-cell>
-            </lido-cell>		
-
-            <!--drag elements-->
-            <lido-cell id="numberBlocks" visible="true" tab-index="32" audio="" width="landscape.90%, portrait.50%" height="landscape.50%, portrait.100%" onEntry="this.animation='rightToPlace 2.5s linear'" layout="landscape.col, portrait.col" bg-color="transparent" display="flex" flex-direction="landscape.row, portrait.col" margin="landscape.0px 0px 0px -130px, portrait.0px 0px 0px 0px" gap="landscape.0px, portrait.10px" padding="landscape.0px 0px 0px 0px, portrait.0px 0px 0px 20px">
-                    ${DragCells}				    
-            </lido-cell>
-
-
-
-        </lido-cell>
-        
-    </lido-container>
-
+    }).join('')}
+                </lido-cell>
+            </lido-cell>		
+
+            <!--drag elements-->
+            <lido-cell id="numberBlocks" visible="true" tab-index="32" audio="" width="landscape.90%, portrait.50%" height="landscape.50%, portrait.100%" onEntry="this.animation='rightToPlace 2.5s linear'" layout="landscape.col, portrait.col" bg-color="transparent" display="flex" flex-direction="landscape.row, portrait.col" margin="landscape.0px 0px 0px -130px, portrait.0px 0px 0px 0px" gap="landscape.0px, portrait.10px" padding="landscape.0px 0px 0px 0px, portrait.0px 0px 0px 20px">
+                    ${DragCells}				    
+            </lido-cell>
+
+
+
+        </lido-cell>
+        
+    </lido-container>
+
 </main>`;
 }

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

@@ -30,34 +30,34 @@ export const sentenceMatch = {
 function getContainerXml(args) {
     let tabCounter = 1;
     const { isAllowOnlyCorrect = true } = args;
-    return `<main>
-  <lido-container disable-speak="true" id="lido-container" value="maincontainer" visible="true" objective="${args.answer}"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Quiz%20literacy.png"  onEntry="text1.speak='true';"  is-allow-only-correct="${args.PracticeMode}" is-Continue-On-Correct="${args.PracticeMode}" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';">
-	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.375px,portrait.401px" width="landscape.338px,portrait.401px" x="landscape.1323px, portrait.24%" y="landscape.57%, portrait.83%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
-		<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" bg-color="transparent">
-		</lido-avatar>
-		<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/Shadow.png" bg-color="transparent" width="203px" height="32px" x="landscape.74px,portrait.111px" y="landscape.309px,portrait.344px" alt-text="{shadowImgae}">
-		</lido-image>
-	</lido-cell>
-  <lido-text visible="false" id="inst" string="choose the correct option"></lido-text>
-    <lido-cell layout="col" visible="true" bg-Color="transparent" width="landscape.100%,portrait.90%" height="68%" margin="landscape.0px,portrait.-107px 0px 0px 0px">
-
-    
-          
-			<lido-text id="text1" tab-index="1" disable-edit="true" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 60px 0px" value="text1" visible="true" width="landscape.94%,portrait.90%" height="27%" bg-color="#FFF5BB" font-family="'Baloo 2', serif" font-size="60px" font-color="#000" string="${args.questionText}" y="-11%" onEntry="this.position='relative';this.fontWeight='500';this.padding='20px';this.border='2px solid #FFB612'; this.boxShadow='unset';this.border-radius='16px'; this.textAlign='start';">
-			</lido-text>
-		  
-    <lido-cell layout="col" visible="true"  width="landscape.53%,portrait.108%" height="216px" bg-Color="transparent" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" y="21px" x="-88px" onEntry="this.align-items='center'; this.justify-content='center';this.position='relative'; this.gap='25px';">
-            <lido-text visible="true" disable-speak="true" audio=""   id="option1" font-family="'Baloo Bhai 2'" tab-index="2" font-size="62px" border-radius="12px" font-color="black" height="113px" width="1244px" string="${args.option1}" value="${args.option1}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-			<lido-text visible="true" audio="" disable-speak="true"  id="option2"  font-family="'Baloo Bhai 2'" tab-index="3" font-size="62px" border-radius="12px" font-color="black" height="113px" width="1244px" string="${args.option2}" value="${args.option2}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-			<lido-text visible="true" audio="" disable-speak="true" id="option3" font-family="'Baloo Bhai 2'" tab-index="4" font-size="62px"  border-radius="12px" font-color="black" height="113px" width="1244px" string="${args.option3}" value="${args.option3}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-			<lido-text visible="true" audio="" disable-speak="true"  id="option4" font-family="'Baloo Bhai 2'" tab-index="5" font-size="62px" border-radius="12px" font-color="black" height="113px"  width="1244px" string="${args.option4}" value="${args.option4}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-		</lido-cell>
-	</lido-cell>
-
-</lido-container>
+    return `<main>
+  <lido-container disable-speak="true" id="lido-container" value="maincontainer" visible="true" objective="${args.answer}"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Quiz%20literacy.png"  onEntry="text1.speak='true';"  is-allow-only-correct="${args.PracticeMode}" is-Continue-On-Correct="${args.PracticeMode}" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';">
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.375px,portrait.401px" width="landscape.338px,portrait.401px" x="landscape.1323px, portrait.24%" y="landscape.57%, portrait.83%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
+		<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" bg-color="transparent">
+		</lido-avatar>
+		<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/Shadow.png" bg-color="transparent" width="203px" height="32px" x="landscape.74px,portrait.111px" y="landscape.309px,portrait.344px" alt-text="{shadowImgae}">
+		</lido-image>
+	</lido-cell>
+  <lido-text visible="false" id="inst" string="choose the correct option"></lido-text>
+    <lido-cell layout="col" visible="true" bg-Color="transparent" width="landscape.100%,portrait.90%" height="68%" margin="landscape.0px,portrait.-107px 0px 0px 0px">
+
+    
+          
+			<lido-text id="text1" tab-index="1" disable-edit="true" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 60px 0px" value="text1" visible="true" width="landscape.94%,portrait.90%" height="27%" bg-color="#FFF5BB" font-family="'Baloo 2', serif" font-size="60px" font-color="#000" string="${args.questionText}" y="-11%" onEntry="this.position='relative';this.fontWeight='500';this.padding='20px';this.border='2px solid #FFB612'; this.boxShadow='unset';this.border-radius='16px'; this.textAlign='start';">
+			</lido-text>
+		  
+    <lido-cell layout="col" visible="true"  width="landscape.53%,portrait.108%" height="216px" bg-Color="transparent" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" y="21px" x="-88px" onEntry="this.align-items='center'; this.justify-content='center';this.position='relative'; this.gap='25px';">
+            <lido-text visible="true" disable-speak="true" audio=""   id="option1" font-family="'Baloo Bhai 2'" tab-index="2" font-size="62px" border-radius="12px" font-color="black" height="113px" width="1244px" string="${args.option1}" value="${args.option1}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+			<lido-text visible="true" audio="" disable-speak="true"  id="option2"  font-family="'Baloo Bhai 2'" tab-index="3" font-size="62px" border-radius="12px" font-color="black" height="113px" width="1244px" string="${args.option2}" value="${args.option2}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+			<lido-text visible="true" audio="" disable-speak="true" id="option3" font-family="'Baloo Bhai 2'" tab-index="4" font-size="62px"  border-radius="12px" font-color="black" height="113px" width="1244px" string="${args.option3}" value="${args.option3}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+			<lido-text visible="true" audio="" disable-speak="true"  id="option4" font-family="'Baloo Bhai 2'" tab-index="5" font-size="62px" border-radius="12px" font-color="black" height="113px"  width="1244px" string="${args.option4}" value="${args.option4}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+		</lido-cell>
+	</lido-cell>
+
+</lido-container>
   </main>`;
 }

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

@@ -36,74 +36,74 @@ function getContainerXml(args) {
     const objectiveString = `${missingNumber.split('').join(',')}`;
     const objectiveArray = missingNumber.split('');
     const dropCells = objectiveArray
-        .map((cell, i) => `
-        <lido-text id="drop-${cell}" tab-index="${25 + i}" disable-edit="true" height="landscape.140px, portrait.125px" width="110px" visible="true" value="${cell}" string="?" font-family="'Baloo Bhai 2'" font-color="#FFC805" type="drop" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.border='1px solid white';" >
-        </lido-text>
+        .map((cell, i) => `
+        <lido-text id="drop-${cell}" tab-index="${25 + i}" disable-edit="true" height="landscape.140px, portrait.125px" width="110px" visible="true" value="${cell}" string="?" font-family="'Baloo Bhai 2'" font-color="#FFC805" type="drop" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.border='1px solid white';" >
+        </lido-text>
       `)
         .join('\n');
     const dragCells = options
-        .map((digit, i) => `
-      <lido-text id="drag-${digit}" tab-index="${50 + i}" height="landscape.170px, portrait.125px" width="landscape.125px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="drag" font-size="104px"  bg-color="#FFF4CD"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.flex-shrink='0';" border-image="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';">
-      </lido-text>
+        .map((digit, i) => `
+      <lido-text id="drag-${digit}" tab-index="${50 + i}" height="landscape.170px, portrait.125px" width="landscape.125px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="drag" font-size="104px"  bg-color="#FFF4CD"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.flex-shrink='0';" border-image="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';">
+      </lido-text>
     `)
         .join('\n');
-    return `
-    <main>
-        <lido-container id="lido-container" objective="${objectiveString}" tab-index="1" show-drop-border="false" is-continue-on-correct="true"  is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Sequence%20box.png" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="this.questionBoxAnimate='true'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false">
-
-            <!-- Chimple Avatar -->
-            <lido-cell layout="pos" id="pos1" disableEdit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.600px, portrait.230px" y="landscape.45px, portrait.1010px" ariaHidden="true" z="1" bgColor="transparent" visible="true"  onEntry="this.flex-shrink='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-image id="image" disableEdit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bgColor="transparent" width="inherit" height="27px" x="landscape.-7px, portrait.-7px" y="landscape.450px, portrait.535px" altText="{shadowImage}">
-              </lido-image>
-            </lido-cell>
-
-            <lido-text id="invisible-text" tab-index="2" audio="" width="297px" height="80px" display="flex" font-size="12px" z="1" font-color="black" value="fill the empty box with the missing numbers and complete the pattern." string="fill the empty box with the missing numbers and complete the pattern." visible="false" bg-color="transparent">
-            </lido-text> 
-
-            <!-- drop cells -->
-            <lido-cell layout="row" aria-hidden="true" visible="true" height="landscape.45%,portrait.40%" width="landscape.85%, portrait.95%" bg-Color="transparent" margin="landscape.385px 0px -545px 0px,portrait.55px 0px -73px 0px" onEntry="this.z-index='1'; this.boxAnimationOneByOne='true';">
-
-              <lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';">
-                <lido-image is-slice="true" bg-color="transparent" id="drop-image0" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px">
-                </lido-image>
-                <lido-image is-slice="true" bg-color="transparent" id="drop-image1" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
-                  <lido-text id="drop-${number1}" tab-index="3" disable-edit="true" height="landscape.130px, portrait.80px" width="landscape.200px, portrait.160px" visible="true" value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
-                  </lido-text>
-                </lido-image>
-              </lido-cell>
-              <lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';">
-                <lido-image is-slice="true" bg-color="transparent" id="drop-image2" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
-                </lido-image>
-                <lido-image is-slice="true" bg-color="transparent" id="drop-image3" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
-                  <lido-text id="drop-${number2}" tab-index="4" disable-edit="true" height="landscape.130px, portrait.80px" width="landscape.200px, portrait.160px" visible="true" value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
-                  </lido-text>
-                </lido-image>
-              </lido-cell>
-              <lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="this.boxAnimate='true';">
-                <lido-image is-slice="true" bg-color="transparent" id="drop-image4" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
-                </lido-image>
-                <lido-image is-slice="true" bg-color="transparent" id="drop-image2" disable-edit="true" tab-index="27" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" onEntry="this.gap='10px';">
-                  ${dropCells}
-                </lido-image>
-              </lido-cell>
-              <lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';">
-                <lido-image is-slice="true" bg-color="transparent" id="drop-image6" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
-                </lido-image>
-                <lido-image is-slice="true" bg-color="transparent" id="drop-image7" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
-                  <lido-text id="drop-${number4}" tab-index="5" disable-edit="true" height="landscape.130px, portrait.80px" width="landscape.200px, portrait.160px" visible="true" value="${number4}" string="${number4}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
-                  </lido-text>
-                </lido-image>
-              </lido-cell>
-            </lido-cell>
-
-            <!-- answers drag cell -->
-            <lido-cell layout="landscape.wrap, portrait.wrap" aria-hidden="true" visible="true" height="landscape.40%,portrait.40%" width="95%" bg-Color="transparent" margin="landscape.530px 0px 0px 0px,portrait.55px 0px 125px 0px" onEntry="this.z-index='1'; this.grid-template-columns='repeat(auto-fill, minmax(140px, auto))'; this.gridTemplateRows='repeat(auto-fit, 145px)'; this.flexWrap='wrap'; this.justify-content='center';" gap="5px">
-              ${dragCells}
-            </lido-cell>
-          </lido-container>
-
-    </main>
+    return `
+    <main>
+        <lido-container id="lido-container" objective="${objectiveString}" tab-index="1" show-drop-border="false" is-continue-on-correct="true"  is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Sequence%20box.png" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="this.questionBoxAnimate='true'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false">
+
+            <!-- Chimple Avatar -->
+            <lido-cell layout="pos" id="pos1" disableEdit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.600px, portrait.230px" y="landscape.45px, portrait.1010px" ariaHidden="true" z="1" bgColor="transparent" visible="true"  onEntry="this.flex-shrink='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-image id="image" disableEdit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bgColor="transparent" width="inherit" height="27px" x="landscape.-7px, portrait.-7px" y="landscape.450px, portrait.535px" altText="{shadowImage}">
+              </lido-image>
+            </lido-cell>
+
+            <lido-text id="invisible-text" tab-index="2" audio="" width="297px" height="80px" display="flex" font-size="12px" z="1" font-color="black" value="fill the empty box with the missing numbers and complete the pattern." string="fill the empty box with the missing numbers and complete the pattern." visible="false" bg-color="transparent">
+            </lido-text> 
+
+            <!-- drop cells -->
+            <lido-cell layout="row" aria-hidden="true" visible="true" height="landscape.45%,portrait.40%" width="landscape.85%, portrait.95%" bg-Color="transparent" margin="landscape.385px 0px -545px 0px,portrait.55px 0px -73px 0px" onEntry="this.z-index='1'; this.boxAnimationOneByOne='true';">
+
+              <lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';">
+                <lido-image is-slice="true" bg-color="transparent" id="drop-image0" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px">
+                </lido-image>
+                <lido-image is-slice="true" bg-color="transparent" id="drop-image1" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
+                  <lido-text id="drop-${number1}" tab-index="3" disable-edit="true" height="landscape.130px, portrait.80px" width="landscape.200px, portrait.160px" visible="true" value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
+                  </lido-text>
+                </lido-image>
+              </lido-cell>
+              <lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';">
+                <lido-image is-slice="true" bg-color="transparent" id="drop-image2" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
+                </lido-image>
+                <lido-image is-slice="true" bg-color="transparent" id="drop-image3" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
+                  <lido-text id="drop-${number2}" tab-index="4" disable-edit="true" height="landscape.130px, portrait.80px" width="landscape.200px, portrait.160px" visible="true" value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
+                  </lido-text>
+                </lido-image>
+              </lido-cell>
+              <lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="this.boxAnimate='true';">
+                <lido-image is-slice="true" bg-color="transparent" id="drop-image4" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
+                </lido-image>
+                <lido-image is-slice="true" bg-color="transparent" id="drop-image2" disable-edit="true" tab-index="27" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" onEntry="this.gap='10px';">
+                  ${dropCells}
+                </lido-image>
+              </lido-cell>
+              <lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';">
+                <lido-image is-slice="true" bg-color="transparent" id="drop-image6" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
+                </lido-image>
+                <lido-image is-slice="true" bg-color="transparent" id="drop-image7" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
+                  <lido-text id="drop-${number4}" tab-index="5" disable-edit="true" height="landscape.130px, portrait.80px" width="landscape.200px, portrait.160px" visible="true" value="${number4}" string="${number4}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
+                  </lido-text>
+                </lido-image>
+              </lido-cell>
+            </lido-cell>
+
+            <!-- answers drag cell -->
+            <lido-cell layout="landscape.wrap, portrait.wrap" aria-hidden="true" visible="true" height="landscape.40%,portrait.40%" width="95%" bg-Color="transparent" margin="landscape.530px 0px 0px 0px,portrait.55px 0px 125px 0px" onEntry="this.z-index='1'; this.grid-template-columns='repeat(auto-fill, minmax(140px, auto))'; this.gridTemplateRows='repeat(auto-fit, 145px)'; this.flexWrap='wrap'; this.justify-content='center';" gap="5px">
+              ${dragCells}
+            </lido-cell>
+          </lido-container>
+
+    </main>
   `;
 }