lido-player 0.0.2-alpha-58-dev → 0.0.2-alpha-59-dev

package/dist/collection/stories/Templates/matchBox/matchBox2.stories.js

@@ -36,57 +36,87 @@ export const Blanks = {
 function getContainerXml(args) {
     return `
   <main>
-
-	<lido-container visible="true" dropAttr="EnableAnimation" is-allow-only-correct="true" objective="${args.drop1},${args.drop2},${args.drop3},${args.drop4}" id="ldo-container" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" is-continue-on-correct="true">
-		<lido-cell visible="true"  onEntry="this.position='relative';" y="landscape.57%,portrait.77%">	
-				<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="360px" width="485px"  y="landscape.200px,portrait.0px" onEntry="this.position='relative';" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+		<lido-container id="lido-container" is-allow-only-correct="true" is-continue-on-correct="true" objective="${args.drop1},${args.drop2},${args.drop3},${args.drop4}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/bg-image.png" dropAttr="EnableAnimation" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="this.sleep='2000';">
+		<!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="landscape.205px,portrait.195px" width="landscape.209px,portrait.209px" x="landscape.-30px,portrait.80%" y="landscape.700px,portrait.146px" ariaHidden="true" bgColor="transparent" visible="true" z="1"  onEntry="">
+				<lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="100%"  width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" >
 				</lido-avatar>
-			</lido-cell>
-		<lido-cell layout="row" visible="true" margin="landscape.-336px 0px -49px,portrait.-103px 0px 333px 0px" bg-color="transparent" height="90%" width="landscape.84%,portrait.100%">
-			<lido-image layout="col" is-slice="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/matchBox/linematching_building1.png" visible="true" height="100%" width="landscape.30%,portrait.40%"  onEntry="this.display='grid';  this.align-items='center';this.justify-content='center';this.gap='26px';">
-				<lido-cell layout="col" visible="true" margin="0px 18px 0px -18px" bg-color="transparent" height="89%" width="100%" onEntry="this.display='flex'; align-items='center'; justify-content='space-around';">
-				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="1" type="drag" id="drag1" value="${args.drag1}" height="auto" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
-					<lido-image visible="true" height="150px" width="150px" src="${args.dragimg1}"></lido-image>
-				</lido-image>
+		</lido-cell>
 			
-				
+		<lido-cell visible="true" flex-direction="landscape., portrait.row-reverse" bg-color="transparent" layout="portrait.row,landscape.col" width="100%" height="100%" onEntry="">
 			
-				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="3" type="drag" id="drag3" value="${args.drag2}" height="auto" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
-					<lido-image visible="true" height="150px" width="150px" src="${args.dragimg2}"></lido-image>
+			<lido-cell visible="true" margin="20px 0px 0px 0px" bg-color="transparent" layout="landscape.row,portrait.col" height="landscape.50%,portrait.96%" width="landscape.100%,portrait.100%" onEntry="this.gap='10px';">
 				
-				</lido-image>
-				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="2" type="drag" id="drag2" value="${args.drag3}" height="auto" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
-					<lido-image visible="true" height="150px" width="150px" src="${args.dragimg3}"></lido-image>
-				</lido-image>
-				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="4" type="drag" id="drag4" value="${args.drag4}" height="auto" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
-					<lido-image visible="true" height="150px" width="150px" src="${args.dragimg4}"></lido-image>
-				</lido-image>
-		
+				<lido-cell layout="row" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="">
+						<lido-cell id="image1" value="${args.drop1}" tab-index="1" height="landscape.270px,portrait.240px" width="landscape.200px,portrait.180px" type="drop" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px'; this.borderRadius='8px';">
+							<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.202px,portrait.180px" height="landscape.200px,portrait.180px" bg-color="transparent" src="${args.dropimg1}"></lido-image>
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>
+				<lido-cell layout="row" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="">
+						<lido-cell id="image2" value="${args.drop2}" tab-index="2" height="landscape.270px,portrait.240px" width="landscape.200px,portrait.180px" type="drop" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px'; this.borderRadius='8px';">
+							<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.202px,portrait.180px" height="landscape.200px,portrait.180px" bg-color="transparent" src="${args.dropimg2}"></lido-image>
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>
+				<lido-cell layout="row" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="">
+						<lido-cell id="image3" value="${args.drop3}" tab-index="3" height="landscape.270px,portrait.240px" width="landscape.200px,portrait.180px" type="drop" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px'; this.borderRadius='8px';">
+							<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.202px,portrait.180px" height="landscape.200px,portrait.180px" bg-color="transparent" src="${args.dropimg3}"></lido-image>
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>
+				<lido-cell layout="row" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="">
+						<lido-cell id="image4" value="${args.drop4}" tab-index="4" height="landscape.270px,portrait.240px" width="landscape.200px,portrait.180px" type="drop" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px'; this.borderRadius='8px';">
+							<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.202px,portrait.180px" height="landscape.200px,portrait.180px" bg-color="transparent" src="${args.dropimg4}"></lido-image>
+						</lido-cell>
+					</lido-cell>
 				</lido-cell>
-			</lido-image>
-			
-			<lido-image layout="col" is-slice="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/matchBox/linematching_building2.png" visible="true" height="100%" width="landscape.30%,portrait.40%"  onEntry="this.display='grid';  this.align-items='center';this.justify-content='center';this.gap='26px';">
-				<lido-cell layout="col" visible="true" margin="0px 18px 0px -18px" bg-color="transparent" height="89%" width="100%" onEntry="this.display='flex'; align-items='center'; justify-content='space-around';">
-				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="11" type="drop" id="drop1" value="hygine" height="auto" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
-					<lido-image visible="true" height="150px" width="150px" src="${args.dropimg1}"></lido-image>
-				</lido-image>
-			
-				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="12" type="drop" id="drop2" value="lion" height="auto" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
-					<lido-image visible="true" height="150px" width="150px" src="${args.dropimg2}"></lido-image>
-				</lido-image>
-			
 				
-				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="14" type="drop" id="drop4" value="tiger" height="auto" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
-					<lido-image visible="true" height="150px" width="150px" src="${args.dropimg3}"></lido-image>
-				</lido-image>
-			
-				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="15" type="drop" id="drop5" value="zebra" height="auto" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
-					<lido-image visible="true" height="150px" width="150px" src="${args.dropimg4}"></lido-image>
-				</lido-image>
+			</lido-cell>
+
+
+
+			<lido-cell visible="true" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" bg-color="#fbcab5" layout="landscape.row,portrait.col" height="landscape.50%,portrait.96%" width="95%" border-radius="10px" onEntry="">
+				
+				<lido-cell layout="row" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent">
+						<lido-cell border-radius="8px" id="option1" value="${args.drag1}" tab-index="5" height="landscape.268px,portrait.240px" width="landscape.200px,portrait.178px" type="drag" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';">
+							<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.202px,portrait.180px" height="landscape.200px,portrait.180px" bg-color="transparent" src="${args.dragimg1}"></lido-image>
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>
+				<lido-cell layout="row" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent">
+						<lido-cell border-radius="8px" id="option2" value="${args.drag2}" tab-index="6" height="landscape.268px,portrait.240px" width="landscape.200px,portrait.178px" type="drag" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';">
+							<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.202px,portrait.180px" height="landscape.200px,portrait.180px" bg-color="transparent" src="${args.dragimg2}"></lido-image>
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>
+				<lido-cell layout="row" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent">
+						<lido-cell border-radius="8px" id="option3" value="${args.drag3}" tab-index="7" height="landscape.268px,portrait.240px" width="landscape.200px,portrait.178px" type="drag" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';">
+							<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.202px,portrait.180px" height="landscape.200px,portrait.180px" bg-color="transparent" src="${args.dragimg3}"></lido-image>
+						</lido-cell>
+					</lido-cell>
 				</lido-cell>
-			</lido-image>
+				<lido-cell layout="row" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent">
+						<lido-cell border-radius="8px" id="option4" value="${args.drag4}" tab-index="8" height="landscape.268px,portrait.240px" width="landscape.200px,portrait.178px" type="drag" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';">
+							<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.202px,portrait.180px" height="landscape.200px,portrait.180px" bg-color="transparent" src="${args.dragimg4}"></lido-image>
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>
+
+			</lido-cell>
+
+
 		</lido-cell>
-    </lido-container>
-    </main>
+
+	</lido-container>
+  </main>
    `;
 }

package/dist/collection/stories/Templates/matchingCard/matching-card.stories.js

@@ -35,12 +35,12 @@ function getContainerXml(args) {
     <lido-image id="truck"  height="60%" width="landscape.100%,portrait.200%" visible="true"  bg-Color="transparent" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/train.svg" margin="landscape.14px 0px 0px 0px,portrait.452px 0px 0px 0px" onEntry="this.animation='rightToPlace 2.5s linear';" onCorrect="this.animation='placeToLeft 2.5s linear';"></lido-image>
 		<lido-cell id="imgs" visible="true" x="landscape.-158px,portrait.0" y="landscape.-495px,portrait.-652px" layout="row" height="80%" width="landscape.35%,portrait.70%" bg-color="transparent" margin="landscape.-115px 0px 0px 345px,portrait.0px 0px 0px 95px" onEntry="this.position='relative';this.animation='rightToPlace 2.5s linear';" onCorrect="this.animation='placeToLeft 2.5s linear';">
 		   	<lido-image id="qn" height="landscape.320px,portrait.320px" value="${args.answer}" width="landscape.320px,portrait.320px" tab-index="2" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/Group%2047094.png"></lido-image>
-		   	<lido-image id="dropEle" height="landscape.320px,portrait.320px" value="${args.answer}" width="landscape.320px,portrait.320px" tab-index="1" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/card_shadow.png" type="drop"></lido-image>
+		   	<lido-image id="dropEle" height="landscape.320px,portrait.320px" value="${args.answer}" width="landscape.320px,portrait.320px" tab-index="1" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/dropbox-%20matching%20card.png" type="drop"></lido-image>
 		</lido-cell>
 	<lido-cell id="dragEle" visible="true" layout="row" width="100%" height="40%" bg-color="transparent" margin="landscape.-580px 0px 50px 0px,portrait.-532px 0px 162px 0px" onEntry="this.animation='rightToPlace 2.5s linear';" onCorrect="this.animation='placeToLeft 2.5s linear';">
-	   	<lido-image id="drag1" height="landscape.320px,portrait.320px" width="landscape.320px,portrait.320px" tab-index="1" value="${args.option1}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/Group%2047093.png" type="drag"></lido-image>
-		<lido-image id="drag2" height="landscape.320px,portrait.320px" width="landscape.320px,portrait.320px" tab-index="2" value="${args.option2}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/Group%2047094.png" type="drag"></lido-image>
-		<lido-image id="drag3" height="landscape.320px,portrait.320px" width="landscape.320px,portrait.320px" tab-index="3" value="${args.option3}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/Group%2047095.png" type="drag"></lido-image>
+	   	<lido-image id="drag1" height="landscape.320px,portrait.320px" width="landscape.273px,portrait.320px" tab-index="1" value="${args.option1}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/Group%2047093.png" type="drag"></lido-image>
+		<lido-image id="drag2" height="landscape.320px,portrait.320px" width="landscape.273px,portrait.320px" tab-index="2" value="${args.option2}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/Group%2047094.png" type="drag"></lido-image>
+		<lido-image id="drag3" height="landscape.320px,portrait.320px" width="landscape.273px,portrait.320px" tab-index="3" value="${args.option3}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/Group%2047095.png" type="drag"></lido-image>
 	</lido-cell>
 
     </lido-container>

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

@@ -0,0 +1,91 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/numberIdentificationimageTotext',
+    argTypes: {
+        option1: { control: 'text' },
+        option2: { control: 'text' },
+        option3: { control: 'text' },
+        option4: { control: 'text' },
+        question: { control: 'text' },
+        answers: { control: 'text' },
+        row: { control: 'text' },
+        col: { control: 'text' },
+    },
+};
+export default meta;
+export const numberIdentificationimageTotext = {
+    args: {
+        option1: "3",
+        option2: "2",
+        option3: "7",
+        option4: "8",
+        row: "4",
+        col: "2",
+        question: "EIGHT",
+        answer: "8",
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    let tabCounter = 1;
+    return `<main>
+ <lido-container  visible="true" id="lido-container" template-id="mcq" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/pal_number_identification/bgImage.png" objective="${args.answer}"  is-continue-on-correct="true" is-allow-only-correct="true" onEntry="inst.speak='true';question.speak='true';text1.speak='true';text2.speak='true';text3.speak='true';text4.speak='true';">
+	 <!-- Chimple Avatar -->
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.344px,portrait.402px" width="landscape.296px,portrait.398px" x="landscape.83%, portrait.28%" y="landscape.64%, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
+		<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+		</lido-avatar>
+	</lido-cell>
+	<lido-text visible="false" id="inst" tab-index="1" string="choose the correct option" onEntry=""></lido-text>
+<!-- question text -->
+		<lido-cell layout="row" visible="true" margin="landscape.26px 0px 155px 0px, portrait.-170px 0px 0px 0px" height="290px" width="landscape.1355PX,portrait.100%" bg-color="#FFF5BB" onEntry="this.justifyContent='space-around';this.border='2px solid #FFA500'; this.borderRadius='16px';this.gap='0px';">
+			<lido-text id="question" tab-index="2" visible="true" value="10" string="${args.question}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.84px"  bg-color="transparent" 
+			onEntry="this.fontWeight='700';">
+            </lido-text>
+			<lido-cell visible="true" width="400px" bg-color="transparent" height="200px" onEntry="this.display='flex';this.align-items='center';"	>
+				<lido-math-matrix id="mat1" rows="${args.row}" cols="${args.col}"  defualtFill="${args.answer}" leftIndex="false" topIndex="false" clickable="true" matrixImage="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/pal_number_identification/fruit.png" activeBgColor="transparent" inactiveBgColor="transparent" border="5px soild transparent" height="200px" width="400px" visible="true" margin="landscape.0,portrait.-26px 0px 0px 0px">
+			</lido-math-matrix>
+		  </lido-cell>
+			
+		</lido-cell>
+
+		<lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.-65px 0px -101px -94px,portrait.0" onEntry="this.border-radius='26px';" height="landscape.390px,portrait.46%" width="landscape.76%,portrait.100%" bg-color="transparent">
+
+		
+				<lido-cell layout="row" visible="true" margin="" onEntry="this.border-radius='24px';" height="228px" width="landscape.280px,portrait.300px" bg-color="orange"  type="click" value="${args.option1}">
+					
+					<lido-text id="text1" tab-index="3" visible="true"  string="${args.option1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="orange" 
+					onEntry="this.fontWeight='700';">
+					</lido-text>
+				</lido-cell>
+
+				<lido-cell layout="row" visible="true" margin="" onEntry="this.border-radius='24px';" height="228px" width="landscape.280px,portrait.300px" bg-color="orange"  type="click" value="${args.option2}">
+					
+					<lido-text id="text2" tab-index="4" visible="true"  string="${args.option2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="orange" 
+					onEntry="this.fontWeight='700';">
+					</lido-text>
+				</lido-cell>
+		
+		
+				<lido-cell layout="row" visible="true" margin="" onEntry="this.border-radius='24px';" height="228px" width="landscape.280px,portrait.300px" bg-color="orange"  type="click" value="${args.option3}">
+					
+					<lido-text id="text3" tab-index="5" visible="true" string="${args.option3}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="orange" 
+					onEntry="this.fontWeight='700';">
+					</lido-text>
+				</lido-cell>
+
+				<lido-cell layout="row" visible="true" margin="" onEntry="this.border-radius='24px';" height="228px" width="landscape.280px,portrait.300px" bg-color="orange"  type="click" value="${args.option4}">
+					
+					<lido-text id="text4" tab-index="6" visible="true" string="${args.option4}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.130px, portrait.100px"  bg-color="orange" 
+					onEntry="this.fontWeight='800';">
+					</lido-text>
+				</lido-cell>	
+		
+ 	
+	</lido-cell>
+
+</lido-container>
+  </main>`;
+}

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

@@ -0,0 +1,84 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/numberIdentificationtextTotext',
+    argTypes: {
+        option1: { control: 'text' },
+        option2: { control: 'text' },
+        option3: { control: 'text' },
+        option4: { control: 'text' },
+        question: { control: 'text' },
+        answer: { control: 'text' },
+    },
+};
+export default meta;
+export const numberIdentificationtextTotext = {
+    args: {
+        option1: "333",
+        option2: "256",
+        option3: "777",
+        option4: "234",
+        question: "SEVEN HUNDRED AND SEVENTY SEVEN",
+        answer: "777",
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    let tabCounter = 1;
+    return `<main>
+ <lido-container  visible="true" id="lido-container" template-id="mcq" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/pal_number_identification/bgImage.png" objective="${args.answer}"  is-continue-on-correct="true" is-allow-only-correct="true" onEntry="inst.speak='true';question.speak='true';text1.speak='true';text2.speak='true';text3.speak='true';text4.speak='true';">
+	 <!-- Chimple Avatar -->
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.344px,portrait.402px" width="landscape.296px,portrait.398px" x="landscape.83%, portrait.28%" y="landscape.64%, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
+		<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+		</lido-avatar>
+	</lido-cell>
+	<lido-text visible="false" id="inst" tab-index="1" string="choose the correct option" onEntry=""></lido-text>
+<!-- question text -->
+		<lido-cell layout="row" visible="true"  margin="landscape.26px 0px 155px 0px, portrait.-170px 0px 0px 0px" height="290px" width="landscape.1476px,portrait.100%" bg-color="#FFF5BB" onEntry="this.justifyContent='center';this.border='2px solid #FFA500'; this.borderRadius='16px';">
+			<lido-text id="question" tab-index="2" visible="true" value="10" string="${args.question}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.80px, portrait.84px"  bg-color="transparent" 
+			onEntry="this.fontWeight='700';">
+            </lido-text>
+
+			
+		</lido-cell>
+
+		<lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.-65px 0px -101px -94px,portrait.0" onEntry="this.border-radius='26px';" height="landscape.390px,portrait.46%" width="landscape.76%,portrait.100%" bg-color="transparent">
+
+		
+				<lido-cell layout="row" visible="true" margin="" onEntry="this.border-radius='24px';" height="228px" width="landscape.280px,portrait.300px" bg-color="orange"  type="click" value="${args.option1}">
+					
+					<lido-text id="text1" tab-index="3" visible="true"  string="${args.option1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="orange" 
+					onEntry="this.fontWeight='700';">
+					</lido-text>
+				</lido-cell>
+
+				<lido-cell layout="row" visible="true" margin="" onEntry="this.border-radius='24px';" height="228px" width="landscape.280px,portrait.300px" bg-color="orange"  type="click" value="${args.option2}">
+					
+					<lido-text id="text2" tab-index="4" visible="true"  string="${args.option2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="orange" 
+					onEntry="this.fontWeight='700';">
+					</lido-text>
+				</lido-cell>
+		
+		
+				<lido-cell layout="row" visible="true" margin="" onEntry="this.border-radius='24px';" height="228px" width="landscape.280px,portrait.300px" bg-color="orange"  type="click" value="${args.option3}">
+					
+					<lido-text id="text3" tab-index="5" visible="true" string="${args.option3}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="orange" 
+					onEntry="this.fontWeight='700';">
+					</lido-text>
+				</lido-cell>
+
+				<lido-cell layout="row" visible="true" margin="" onEntry="this.border-radius='24px';" height="228px" width="landscape.280px,portrait.300px" bg-color="orange"  type="click" value="${args.option4}">
+					
+					<lido-text id="text4" tab-index="6" visible="true" string="${args.option4}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.130px, portrait.100px"  bg-color="orange" 
+					onEntry="this.fontWeight='800';">
+					</lido-text>
+				</lido-cell>	
+		
+ 	
+	</lido-cell>
+
+</lido-container>
+  </main>`;
+}

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

@@ -85,8 +85,6 @@ function getOpenWindowXml(args) {
 		  </lido-cell>
       <lido-cell layout="row" visible="true" width="75%" height="25%" bg-color="transparent" margin="5%">
         <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="landscape.620px, portrait.270px" y="landscape.440px, portrait.1200px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.padding-right=100px">
-          <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/open_window/door.png" bg-color="transparent" width="195px" height="285px" x="landscape.80px, portrait.80px" y="landscape.90px, portrait.90px" alt-text="{shadowImage}">
-          </lido-image>
           <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="480px" width="220px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" x="65px" y="-25px">
           </lido-avatar>
         </lido-cell>

package/dist/collection/stories/Templates/openwindow/openwindow2.stories.js

@@ -69,8 +69,6 @@ function getOpenWindowXml(args) {
 		  </lido-cell>
       <lido-cell layout="row" visible="true" width="75%" height="25%" bg-color="transparent" margin="5%">
         <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="landscape.620px, portrait.270px" y="landscape.440px, portrait.1200px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.padding-right=100px">
-          <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/open_window/door.png" bg-color="transparent" width="195px" height="285px" x="landscape.80px, portrait.80px" y="landscape.90px, portrait.90px" alt-text="{shadowImage}">
-          </lido-image>
           <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="480px" width="220px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" x="65px" y="-25px">
           </lido-avatar>
         </lido-cell>

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

@@ -0,0 +1,106 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/palEgmaCalculateSum',
+    argTypes: {
+        number1: { control: 'text', name: 'Number 1' },
+        number2: { control: 'text', name: 'Number 2' },
+        options: { control: 'object', name: 'options' },
+        sign: { control: 'text', name: 'sign', defaultValue: '+' },
+        isAllowOnlyCorrect: { control: 'boolean', name: 'isAllowOnlyCorrect' },
+    },
+    args: {
+        number1: '3',
+        number2: '2',
+        sign: '+',
+        options: ['1', '7', '5', '9'],
+        isAllowOnlyCorrect: true,
+    },
+};
+export default meta;
+export const PalEgmaMultiOption = {
+    render: (args) => {
+        const xml = getContainerXml(args);
+        return html `<lido-home xml-data="${xml}" xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    var _a, _b;
+    const number1 = args.number1;
+    const number2 = args.number2;
+    const options = args.options;
+    const sign = (_a = args.sign) !== null && _a !== void 0 ? _a : '+';
+    const isAllowOnlyCorrect = (_b = args.isAllowOnlyCorrect) !== null && _b !== void 0 ? _b : true;
+    const objective = String(Number(number1) + Number(number2));
+    const imageCells1 = Array.from({ length: Number(number1) }, (_, i) => i + 1)
+        .map((digit, i) => `
+        <lido-image id="image1-${digit}" height="landscape.140px, portrait.125px" width="60px" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/Kulfi.png" bg-color="transparent" border-image="">
+        </lido-image>
+      `)
+        .join('\n');
+    const imageCells2 = Array.from({ length: Number(number2) }, (_, i) => i + 1)
+        .map((digit, i) => `
+        <lido-image id="image2-${digit}" height="landscape.140px, portrait.125px" width="60px" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/Kulfi.png" bg-color="transparent" border-image="">
+        </lido-image>
+      `)
+        .join('\n');
+    const clickCells = options
+        .map((digit, i) => `
+      <lido-text id="click-${digit}" tab-index="${50 + i}" height="landscape.212px, portrait.125px" width="landscape.270px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="click" font-size="104px"  bg-color="#FFAC4C"  onEntry="this.fontWeight='800'; this.borderRadius='24px'; this.flex-shrink='0';" border-image="" onCorrect="this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" >
+      </lido-text>
+    `)
+        .join('\n');
+    return `
+    <main>
+        <lido-container id="lido-container" objective="${objective}" tab-index="1" template-id="mcq" show-drop-border="false" is-continue-on-correct="true"  is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/pal_egma_temp_3.png" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; invisibleText.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false">
+
+            <!-- Chimple Avatar -->
+            <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.1310px, portrait.450px" y="landscape.418px, portrait.1020px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
+                <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" altText="{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" altText="{shadowImage}">
+                </lido-image>
+            </lido-cell>
+
+            <lido-text id="invisibleText" tab-index="2" audio="" width="297px" height="80px" display="flex" font-size="12px" z="1" font-color="black" value="solve the equation and click the correct answer" string="solve the equation and click the correct answer" visible="false" bg-color="transparent" onEntry="">
+            </lido-text> 
+
+
+            <!-- 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.215px 0px 30px 0px,portrait.25px 0px -120px 0px" onEntry="this.z-index='1'; this.justify-content='center';" gap="landscape.35px,portrait.40px">
+                <lido-cell layout="col" is-slice="true" visible="true" height="landscape.245px,portrait.41%" width="auto" bg-Color="#FFF5BB" onEntry="this.z-index='1'; this.borderRadius='16px';" onCorrect="">
+                  <lido-cell layout="row" is-slice="true" visible="true" height="landscape.15%,portrait.41%" width="auto" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="">
+                    ${imageCells1}
+                  </lido-cell>
+                  <lido-cell layout="row" is-slice="true" visible="true" height="landscape.5%,portrait.41%" width="inherit" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="">
+                    <lido-text id="num-1" is-slice="true"  disable-edit="true" height="landscape.156px, portrait.125px" width="inherit" visible="true" value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.90px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='700'; this.borderRadius='16px';" border-image="">
+                    </lido-text>
+                  </lido-cell>
+                </lido-cell>
+                <lido-text id="operator"  height="295px" width="120px" visible="true"  value="${sign}" string="${sign}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='700'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';" border-image="">
+                </lido-text>
+                <lido-cell layout="col" is-slice="true" visible="true" height="landscape.245px,portrait.41%" width="auto" bg-Color="#FFF5BB" onEntry="this.z-index='1'; this.borderRadius='16px';" onCorrect="">
+                  <lido-cell layout="row" is-slice="true" visible="true" height="landscape.15%,portrait.41%" width="auto" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="">
+                    ${imageCells2}
+                  </lido-cell>
+                  <lido-cell layout="row" is-slice="true" visible="true" height="landscape.5%,portrait.41%" width="inherit" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="">
+                    <lido-text id="num-2" is-slice="true"  disable-edit="true" height="landscape.156px, portrait.125px" width="inherit" visible="true" value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.90px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='700'; this.borderRadius='16px';" border-image="">
+                    </lido-text>
+                  </lido-cell>
+                </lido-cell>
+                <lido-text id="equal"  height="215px" width="120px" visible="true"  value="=" string="=" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='700'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';" border-image="">
+                </lido-text>
+                <lido-text id="drop-answer" disable-edit="true" height="landscape.287px, portrait.125px" width="208px" visible="true" value="5" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='700'; this.borderRadius='16px';" border-image="">
+                </lido-text>
+            </lido-cell>
+
+
+            <!-- answers drag cell -->
+            <!-- option row-->
+            <lido-cell layout="landscape.row, portrait.wrap" id="option-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.5%" width="landscape.90%, portrait.106%" bg-Color="transparent" margin="landscape.65px 0px 65px 0px,portrait.-160px -65px 500px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.opacity='1';" gap="landscape.20px,portrait.5px">
+                ${clickCells}
+            </lido-cell>
+        </lido-container>
+
+    </main>
+  `;
+}

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

@@ -0,0 +1,91 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/palEgmaCalculateSum',
+    argTypes: {
+        missingNumber: { control: 'text', name: 'missing number' },
+        number1: { control: 'text', name: 'Number 1' },
+        number2: { control: 'text', name: 'Number 2' },
+        options: { control: 'object', name: 'digits' },
+        sign: { control: 'text', name: 'sign', defaultValue: '+' },
+        isAllowOnlyCorrect: { control: 'boolean', name: 'isAllowOnlyCorrect' },
+    },
+    args: {
+        missingNumber: '60',
+        number1: '36',
+        number2: '24',
+        sign: '+',
+        options: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
+        isAllowOnlyCorrect: true,
+    },
+};
+export default meta;
+export const PalEgmaSumTogether = {
+    render: (args) => {
+        const xml = getContainerXml(args);
+        return html `<lido-home xml-data="${xml}" xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    var _a, _b;
+    const missingNumber = args.missingNumber;
+    const number1 = args.number1;
+    const number2 = args.number2;
+    const options = args.options;
+    const sign = (_a = args.sign) !== null && _a !== void 0 ? _a : '+';
+    const isAllowOnlyCorrect = (_b = args.isAllowOnlyCorrect) !== null && _b !== void 0 ? _b : true;
+    const objectiveString = `${missingNumber.split('').join(',')}`;
+    const objectiveArray = missingNumber.split('');
+    const dropCells = objectiveArray
+        .map((cell, i) => `
+      <lido-image is-slice="true" height="225px" width="175px" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png" onEntry="this.opacity='1';">
+        <lido-text id="drop-${cell}" tab-index="${25 + i}" disable-edit="true" height="landscape.215px, portrait.125px" width="135px" visible="true" value="${cell}" string="?" font-family="'Baloo Bhai 2'" font-color="black" type="drop" font-size="landscape.140px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='700'; this.borderRadius='16px';" border-image="">
+        </lido-text>
+      </lido-image>
+      `)
+        .join('\n');
+    const dragCells = options
+        .map((digit, i) => `
+      <lido-text id="drag-${digit}" tab-index="${50 + i}" height="landscape.212px, portrait.125px" width="landscape.140px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="drag" font-size="104px"  bg-color="#FFAC4C"  onEntry="this.fontWeight='800'; this.borderRadius='16px'; 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" template-id="dragAndDrop" show-drop-border="false" is-continue-on-correct="true"  is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/pal_egma_temp_3.png" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="this.questionBoxAnimate='true'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; invisibleText.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false">
+
+            <!-- Chimple Avatar -->
+            <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.1310px, portrait.450px" y="landscape.100px, portrait.1020px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
+                <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" altText="{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" altText="{shadowImage}">
+                </lido-image>
+            </lido-cell>
+
+            <lido-text id="invisibleText" tab-index="2" audio="" width="297px" height="80px" display="flex" font-size="12px" z="1" font-color="black" value="solve the equation and drag the correct answer" string="solve the equation and drag the correct answer" visible="false" bg-color="transparent" onEntry="">
+            </lido-text> 
+
+            <!-- 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.215px 0px 30px 0px,portrait.25px 0px -120px 0px" onEntry="this.z-index='1'; this.justify-content='center';" gap="landscape.60px,portrait.40px">
+                <lido-text id="num-1" height="215px" width="120px" visible="true"  value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='700'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';" border-image="">
+                </lido-text>
+                <lido-text id="operator"  height="295px" width="120px" visible="true"  value="${sign}" string="${sign}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='700'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';" border-image="">
+                </lido-text>
+                <lido-text id="num-2"  height="215px" width="120px" visible="true"  value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='700'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';" border-image="">
+                </lido-text>
+                <lido-text id="equal" height="215px" width="120px" visible="true"  value="=" string="=" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='700'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';" border-image="">
+                </lido-text>
+                <lido-cell layout="row" is-slice="true" visible="true" height="landscape.20%,portrait.41%" width="auto" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="" gap="landscape.10px,portrait.5px">
+                  ${dropCells}
+                </lido-cell>
+            </lido-cell>
+
+
+            <!-- answers drag cell -->
+            <!-- option row-->
+            <lido-cell layout="landscape.row, portrait.wrap" id="option-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.5%" width="landscape.90%, portrait.106%" bg-Color="transparent" margin="landscape.65px 0px 65px 0px,portrait.-160px -65px 500px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.opacity='1';" gap="landscape.20px,portrait.5px">
+                ${dragCells}
+            </lido-cell>
+        </lido-container>
+    </main>
+  `;
+}