lido-player 0.0.2-alpha-50-dev → 0.0.2-alpha-52-dev

package/dist/collection/stories/Templates/multipleOption/mcqWithQuestionImage.stories.js

@@ -66,117 +66,117 @@ function getContainerXml(args) {
     const optionImage2 = args.optionImg2 && args.optionImg2.length > 0 ? `<lido-image visible="true" bg-color="white" height="landscape.60%, portrait.67%" src="${args.optionImg2}" border-radius="6px" onEntry="this.border='5px solid white';"></lido-image>` : "";
     const optionImage3 = args.optionImg3 && args.optionImg3.length > 0 ? `<lido-image visible="true" bg-color="white" height="landscape.60%, portrait.67%" src="${args.optionImg3}" border-radius="6px" onEntry="this.border='5px solid white';"></lido-image>` : "";
     const optionImage4 = args.optionImg4 && args.optionImg4.length > 0 ? `<lido-image visible="true" bg-color="white" height="landscape.60%, portrait.67%" src="${args.optionImg4}" border-radius="6px" onEntry="this.border='5px solid white';"></lido-image>` : "";
-    return `<main>
-    <lido-container id="lido-container" value="maincontainer" objective="${args.correctAns}"
-    aria-label="This is a multiple-option question. Select one option from the list."
-    height="100vh" width="100vw" x="0" y="0" z="0" bg-color="transparent"
-    bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png"
-    visible="true" audio="background1.mp3" onTouch=""
-    onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';"
-    onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';"
-    show-check="false" is-continue-on-correct="true" onEntry="">
-
-    <!-- Chimple Avatar -->
-    <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1"
-      height="300px" width="300px"
-      x="landscape.-20px, portrait.-20px" y="landscape.100px, portrait.100px"
-      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="186px" height="40px" x="55px" y="248px" 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="80%" height="10%" bg-color="transparent"></lido-text>
-
-      <lido-text tab-index="1" show-speak-icon="true" audio="${args.questionAudio}" visible="true"
-        id="lido-question" width="landscape.65%, portrait.80%" height="10%"
-        bg-color="#FFF5BB"
-        string="${args.question}"
-        border-radius="16px"
-        onEntry="this.border='1px solid black'; this.fontWeight='500'; this.padding='50px';" font-size="36px">
-      </lido-text>
-
-      <lido-cell visible="true" width="100%" height="landscape.68%, portrait.100%"
-        bg-color="transparent" layout="landscape.row, portrait.col"
-        margin="landscape.0, portrait.-108px 0 0 0">
-
-        ${questionImage}
-
-        <lido-cell visible="true" layout="wrap" width="landscape.70%, portrait.80%"
-          height="landscape.97%, portrait.auto" bg-color="transparent" gap="40px"
-          onEntry="this.gridTemplateColumns='1fr 1fr';" margin="landscape.0, portrait.-195px 0 0 0">
-
-          <!-- Option 1 -->
-          <lido-cell tab-index="2" visible="true" show-speak-icon="true" layout="col"
-            width="100%" type="click" audio="${args.audio1}" value="${args.option1}"
-            height="landscape.250px, portrait.270px"
-            onEntry="this.borderRadius='25px'; this.padding='0';"
-            onCorrect="this.cellBorderAnimate='#65BC46';"
-            onInCorrect="this.vibrate='horizontal-shake';" onTouch="">
-						${optionImage1}
-            <lido-text visible="true" font-size="36px" font-color="black"
-              string="${args.option1}" width="fit-content" bg-color="transparent"
-              onEntry="this.fontWeight='500'; this.padding='0 20px';">
-            </lido-text>
-          </lido-cell>
-
-          <!-- Option 2 -->
-          <lido-cell tab-index="3" visible="true" show-speak-icon="true" layout="col"
-            width="100%" type="click" audio="${args.audio2}" value="${args.option2}"
-            height="landscape.250px, portrait.270px"
-            onEntry="this.borderRadius='25px'; this.padding='0';"
-            onCorrect="this.cellBorderAnimate='#65BC46';"
-            onInCorrect="this.vibrate='horizontal-shake';"
-            onTouch="this.speak='true';">
-						${optionImage2}
-            <lido-text visible="true" font-size="36px" font-color="black"
-              string="${args.option2}" width="fit-content" bg-color="transparent"
-              onEntry="this.fontWeight='500'; this.padding='0 20px';">
-            </lido-text>
-          </lido-cell>
-
-          <!-- Option 3 -->
-          <lido-cell tab-index="4" visible="true" show-speak-icon="true" layout="col"
-            width="100%" type="click" audio="${args.audio3}" value="${args.option3}"
-            height="landscape.250px, portrait.270px"
-            onEntry="this.borderRadius='25px'; this.padding='0';"
-            margin="landscape.0, portrait.20px 0 0 0"
-            onCorrect="this.border='this.cellBorderAnimate='#65BC46';"
-            onInCorrect="this.vibrate='horizontal-shake';" onTouch="">
-						${optionImage3}
-            <lido-text visible="true" font-size="36px" font-color="black"
-              string="${args.option3}" width="fit-content" bg-color="transparent"
-              onEntry="this.fontWeight='500'; this.padding='0 20px';">
-            </lido-text>
-          </lido-cell>
-
-          <!-- Option 4 -->
-          <lido-cell tab-index="5" visible="true" show-speak-icon="true" layout="col"
-            width="100%" type="click" audio="${args.audio4}" value="${args.option4}"
-            height="landscape.250px, portrait.270px"
-            onEntry="this.borderRadius='25px'; this.padding='0';"
-            margin="landscape.0, portrait.20px 0 0 0"
-            onCorrect="this.cellBorderAnimate='#65BC46';"
-            onInCorrect="this.vibrate='horizontal-shake';" onTouch="">
-						${optionImage4}
-            <lido-text visible="true" font-size="36px" font-color="black"
-              string="${args.option4}" bg-color="transparent" width="fit-content"
-              onEntry="this.fontWeight='500'; this.padding='0 20px';">
-            </lido-text>
-          </lido-cell>
-
-        </lido-cell>
-      </lido-cell>
-    </lido-cell>
-  </lido-container>
+    return `<main>
+    <lido-container id="lido-container" value="maincontainer" objective="${args.correctAns}"
+    aria-label="This is a multiple-option question. Select one option from the list."
+    height="100vh" width="100vw" x="0" y="0" z="0" bg-color="transparent"
+    bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png"
+    visible="true" audio="background1.mp3" onTouch=""
+    onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';"
+    onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';"
+    show-check="false" is-continue-on-correct="true" onEntry="">
+
+    <!-- Chimple Avatar -->
+    <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1"
+      height="300px" width="300px"
+      x="landscape.-20px, portrait.-20px" y="landscape.100px, portrait.100px"
+      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="186px" height="40px" x="55px" y="248px" 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="80%" height="10%" bg-color="transparent"></lido-text>
+
+      <lido-text tab-index="1" show-speak-icon="true" audio="${args.questionAudio}" visible="true"
+        id="lido-question" width="landscape.65%, portrait.80%" height="10%"
+        bg-color="#FFF5BB"
+        string="${args.question}"
+        border-radius="16px"
+        onEntry="this.border='1px solid black'; this.fontWeight='500'; this.padding='50px';" font-size="36px">
+      </lido-text>
+
+      <lido-cell visible="true" width="100%" height="landscape.68%, portrait.100%"
+        bg-color="transparent" layout="landscape.row, portrait.col"
+        margin="landscape.0, portrait.-108px 0 0 0">
+
+        ${questionImage}
+
+        <lido-cell visible="true" layout="wrap" width="landscape.70%, portrait.80%"
+          height="landscape.97%, portrait.auto" bg-color="transparent" gap="40px"
+          onEntry="this.gridTemplateColumns='1fr 1fr';" margin="landscape.0, portrait.-195px 0 0 0">
+
+          <!-- Option 1 -->
+          <lido-cell tab-index="2" visible="true" show-speak-icon="true" layout="col"
+            width="100%" type="click" audio="${args.audio1}" value="${args.option1}"
+            height="landscape.250px, portrait.270px"
+            onEntry="this.borderRadius='25px'; this.padding='0';"
+            onCorrect="this.cellBorderAnimate='#65BC46';"
+            onInCorrect="this.vibrate='horizontal-shake';" onTouch="">
+						${optionImage1}
+            <lido-text visible="true" font-size="36px" font-color="black"
+              string="${args.option1}" width="fit-content" bg-color="transparent"
+              onEntry="this.fontWeight='500'; this.padding='0 20px';">
+            </lido-text>
+          </lido-cell>
+
+          <!-- Option 2 -->
+          <lido-cell tab-index="3" visible="true" show-speak-icon="true" layout="col"
+            width="100%" type="click" audio="${args.audio2}" value="${args.option2}"
+            height="landscape.250px, portrait.270px"
+            onEntry="this.borderRadius='25px'; this.padding='0';"
+            onCorrect="this.cellBorderAnimate='#65BC46';"
+            onInCorrect="this.vibrate='horizontal-shake';"
+            onTouch="this.speak='true';">
+						${optionImage2}
+            <lido-text visible="true" font-size="36px" font-color="black"
+              string="${args.option2}" width="fit-content" bg-color="transparent"
+              onEntry="this.fontWeight='500'; this.padding='0 20px';">
+            </lido-text>
+          </lido-cell>
+
+          <!-- Option 3 -->
+          <lido-cell tab-index="4" visible="true" show-speak-icon="true" layout="col"
+            width="100%" type="click" audio="${args.audio3}" value="${args.option3}"
+            height="landscape.250px, portrait.270px"
+            onEntry="this.borderRadius='25px'; this.padding='0';"
+            margin="landscape.0, portrait.20px 0 0 0"
+            onCorrect="this.border='this.cellBorderAnimate='#65BC46';"
+            onInCorrect="this.vibrate='horizontal-shake';" onTouch="">
+						${optionImage3}
+            <lido-text visible="true" font-size="36px" font-color="black"
+              string="${args.option3}" width="fit-content" bg-color="transparent"
+              onEntry="this.fontWeight='500'; this.padding='0 20px';">
+            </lido-text>
+          </lido-cell>
+
+          <!-- Option 4 -->
+          <lido-cell tab-index="5" visible="true" show-speak-icon="true" layout="col"
+            width="100%" type="click" audio="${args.audio4}" value="${args.option4}"
+            height="landscape.250px, portrait.270px"
+            onEntry="this.borderRadius='25px'; this.padding='0';"
+            margin="landscape.0, portrait.20px 0 0 0"
+            onCorrect="this.cellBorderAnimate='#65BC46';"
+            onInCorrect="this.vibrate='horizontal-shake';" onTouch="">
+						${optionImage4}
+            <lido-text visible="true" font-size="36px" font-color="black"
+              string="${args.option4}" bg-color="transparent" width="fit-content"
+              onEntry="this.fontWeight='500'; this.padding='0 20px';">
+            </lido-text>
+          </lido-cell>
+
+        </lido-cell>
+      </lido-cell>
+    </lido-cell>
+  </lido-container>
 </main>`;
 }

package/dist/collection/stories/Templates/multipleOption/multiple-option.stories.js

@@ -42,52 +42,52 @@ export const Default = {
     },
 };
 function getContainerXml(args) {
-    return `<main>
-		<lido-container id="lido-container" value="maincontainer" objective="${args.correctAns}" aria-label="This is a multiple-option question. Select one option from the list." height="100vh" width="100vw" x="0" y="0" z="0" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true">
-
-		<!-- Chimple Avatar -->
-		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="350px" width="350px" x="landscape.-50px, portrait.273px" y="landscape.507px, portrait.1200px" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="" onEntry="this.animation='leftToPlace 1.5s linear';">
-			<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="350px" width="350px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/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="186px" height="40px" x="77px" y="302px" alt-text="{shadowImgae}">
-			</lido-image>
-		</lido-cell>
-
-		<lido-cell visible="true" layout="col" width="100%" height="100%" bg-color="transparent">
-			<!-- Question -->
-			<lido-cell layout="flex" visible="true" width="100%" height="landscape.30%, portrait.25%" bg-color="transparent" onEntry="this.justifyContent='center'; this.alignContent='center'; this.animation='topToPlace 0.5s linear';">
-				<lido-image visible="true" is-slice="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/questionBg.png" bg-color="transparent" width="landscape.65%, portrait.70%" height="40%" onEntry="this.padding='20px';">
-					<lido-text id="textA" tab-index="1" value="{question.id}" visible="true" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='800';" string="${args.question}" font-family="'Baloo 2', serif" font-size="40px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px" onTouch="question.speak='true';"></lido-text>
-				</lido-image>
-			</lido-cell>
-			
-			<!-- Options -->
-			<lido-cell layout="flex" visible="true" width="100%" height="70%" bg-color="transparent" onEntry="this.justifyContent='center'; this.alignContent='center'; this.animation='bottomToPlace 1s linear';">
-				<lido-cell visible="true" layout="landscape.row, portrait.wrap" width="landscape.70%, portrait.73%" height="landscape.50%, portrait.auto" bg-color="transpernt" gap="landscape.30px, portrait.55px" onEntry="">
-					<lido-cell tab-index="2" visible="true" layout="col" width="landscape.25%, portrait.100%" type="click" value="${args.option1}" height="100%" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="this.border='8px solid green';" onInCorrect="this.border='8px solid red';" audio='${args.audio1}' onTouch="this.speak='true';">
-						<lido-image visible="true" src="${args.optionImg1}" bg-color="transparent" width="90%" height="auto" border-radius="25px 25px 0 0" onEntry="this.marginTop='10px';"></lido-image>
-						<lido-text visible="true" font-size="40px" font-color="black" string="${args.option1}" width="100%" bg-color="transparent" onEntry="this.fontWeight='bold';"></lido-text>
-					</lido-cell>
-					<lido-cell tab-index="3" visible="true" layout="col" width="landscape.25%, portrait.100%" type="click" value="${args.option2}" height="100%" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="this.border='8px solid green';" onInCorrect="this.border='8px solid red';" audio='${args.audio2}' onTouch="this.speak='true';">
-						<lido-image visible="true" src="${args.optionImg2}" bg-color="transparent" width="90%" height="auto" border-radius="25px 25px 0 0" onEntry="this.marginTop='10px';"></lido-image>
-						<lido-text visible="true" font-size="40px" font-color="black" string="${args.option2}" width="100%" bg-color="transparent" onEntry="this.fontWeight='bold';"></lido-text>
-					</lido-cell>
-					<lido-cell tab-index="4" visible="true" layout="col" width="landscape.25%, portrait.100%" type="click" value="${args.option3}" height="100%" onEntry="this.borderRadius='25px'; this.padding='0';" margin="landscape.0, portrait.20px 0 0 0" onCorrect="this.border='8px solid green';" onInCorrect="this.border='8px solid red';" audio='${args.audio3}' onTouch="this.speak='true';">
-						<lido-image visible="true" src="${args.optionImg3}" bg-color="transparent" width="90%" height="auto" border-radius="25px 25px 0 0" onEntry="this.marginTop='10px';"></lido-image>
-						<lido-text visible="true" font-size="40px" font-color="black" string="${args.option3}" width="100%" bg-color="transparent" onEntry="this.fontWeight='bold';"></lido-text>
-					</lido-cell>
-					<lido-cell tab-index="5" visible="true" layout="col" width="landscape.25%, portrait.100%" type="click" value="${args.option4}" height="100%" onEntry="this.borderRadius='25px'; this.padding='0';" margin="landscape.0, portrait.20px 0 0 0" onCorrect="this.border='8px solid green';" onInCorrect="this.border='8px solid red';" audio='${args.audio4}' onTouch="this.speak='true';">
-						<lido-image visible="true" src="${args.optionImg4}" bg-color="transparent" width="90%" height="auto" border-radius="25px 25px 0 0" onEntry="this.marginTop='10px';"></lido-image>
-						<lido-text visible="true" font-size="40px" font-color="black" string="${args.option4}" width="100%" bg-color="transparent" onEntry="this.fontWeight='bold';"></lido-text>
-					</lido-cell>
-				</lido-cell>
-			</lido-cell>
-			
-			<lido-cell layout="flex" height="30%" width="100%" x="landscape.-50px, portrait.100px" y="507px" z="2" bg-color="transparent" type="" visible="landscape.false, portrait.true" audio="" onTouch="" onCorrect="" onEntry="this.justifyContent='center'; this.alignContent='center'; this.animation='leftToPlace 1.5s linear'; ">
-				
-			</lido-cell>
-
-		</lido-cell>
-	</lido-container>
+    return `<main>
+		<lido-container id="lido-container" value="maincontainer" objective="${args.correctAns}" aria-label="This is a multiple-option question. Select one option from the list." height="100vh" width="100vw" x="0" y="0" z="0" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true">
+
+		<!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="350px" width="350px" x="landscape.-50px, portrait.273px" y="landscape.507px, portrait.1200px" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="" onEntry="this.animation='leftToPlace 1.5s linear';">
+			<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="350px" width="350px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/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="186px" height="40px" x="77px" y="302px" alt-text="{shadowImgae}">
+			</lido-image>
+		</lido-cell>
+
+		<lido-cell visible="true" layout="col" width="100%" height="100%" bg-color="transparent">
+			<!-- Question -->
+			<lido-cell layout="flex" visible="true" width="100%" height="landscape.30%, portrait.25%" bg-color="transparent" onEntry="this.justifyContent='center'; this.alignContent='center'; this.animation='topToPlace 0.5s linear';">
+				<lido-image visible="true" is-slice="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/questionBg.png" bg-color="transparent" width="landscape.65%, portrait.70%" height="40%" onEntry="this.padding='20px';">
+					<lido-text id="textA" tab-index="1" value="{question.id}" visible="true" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='800';" string="${args.question}" font-family="'Baloo 2', serif" font-size="40px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px" onTouch="question.speak='true';"></lido-text>
+				</lido-image>
+			</lido-cell>
+			
+			<!-- Options -->
+			<lido-cell layout="flex" visible="true" width="100%" height="70%" bg-color="transparent" onEntry="this.justifyContent='center'; this.alignContent='center'; this.animation='bottomToPlace 1s linear';">
+				<lido-cell visible="true" layout="landscape.row, portrait.wrap" width="landscape.70%, portrait.73%" height="landscape.50%, portrait.auto" bg-color="transpernt" gap="landscape.30px, portrait.55px" onEntry="">
+					<lido-cell tab-index="2" visible="true" layout="col" width="landscape.25%, portrait.100%" type="click" value="${args.option1}" height="100%" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="this.border='8px solid green';" onInCorrect="this.border='8px solid red';" audio='${args.audio1}' onTouch="this.speak='true';">
+						<lido-image visible="true" src="${args.optionImg1}" bg-color="transparent" width="90%" height="auto" border-radius="25px 25px 0 0" onEntry="this.marginTop='10px';"></lido-image>
+						<lido-text visible="true" font-size="40px" font-color="black" string="${args.option1}" width="100%" bg-color="transparent" onEntry="this.fontWeight='bold';"></lido-text>
+					</lido-cell>
+					<lido-cell tab-index="3" visible="true" layout="col" width="landscape.25%, portrait.100%" type="click" value="${args.option2}" height="100%" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="this.border='8px solid green';" onInCorrect="this.border='8px solid red';" audio='${args.audio2}' onTouch="this.speak='true';">
+						<lido-image visible="true" src="${args.optionImg2}" bg-color="transparent" width="90%" height="auto" border-radius="25px 25px 0 0" onEntry="this.marginTop='10px';"></lido-image>
+						<lido-text visible="true" font-size="40px" font-color="black" string="${args.option2}" width="100%" bg-color="transparent" onEntry="this.fontWeight='bold';"></lido-text>
+					</lido-cell>
+					<lido-cell tab-index="4" visible="true" layout="col" width="landscape.25%, portrait.100%" type="click" value="${args.option3}" height="100%" onEntry="this.borderRadius='25px'; this.padding='0';" margin="landscape.0, portrait.20px 0 0 0" onCorrect="this.border='8px solid green';" onInCorrect="this.border='8px solid red';" audio='${args.audio3}' onTouch="this.speak='true';">
+						<lido-image visible="true" src="${args.optionImg3}" bg-color="transparent" width="90%" height="auto" border-radius="25px 25px 0 0" onEntry="this.marginTop='10px';"></lido-image>
+						<lido-text visible="true" font-size="40px" font-color="black" string="${args.option3}" width="100%" bg-color="transparent" onEntry="this.fontWeight='bold';"></lido-text>
+					</lido-cell>
+					<lido-cell tab-index="5" visible="true" layout="col" width="landscape.25%, portrait.100%" type="click" value="${args.option4}" height="100%" onEntry="this.borderRadius='25px'; this.padding='0';" margin="landscape.0, portrait.20px 0 0 0" onCorrect="this.border='8px solid green';" onInCorrect="this.border='8px solid red';" audio='${args.audio4}' onTouch="this.speak='true';">
+						<lido-image visible="true" src="${args.optionImg4}" bg-color="transparent" width="90%" height="auto" border-radius="25px 25px 0 0" onEntry="this.marginTop='10px';"></lido-image>
+						<lido-text visible="true" font-size="40px" font-color="black" string="${args.option4}" width="100%" bg-color="transparent" onEntry="this.fontWeight='bold';"></lido-text>
+					</lido-cell>
+				</lido-cell>
+			</lido-cell>
+			
+			<lido-cell layout="flex" height="30%" width="100%" x="landscape.-50px, portrait.100px" y="507px" z="2" bg-color="transparent" type="" visible="landscape.false, portrait.true" audio="" onTouch="" onCorrect="" onEntry="this.justifyContent='center'; this.alignContent='center'; this.animation='leftToPlace 1.5s linear'; ">
+				
+			</lido-cell>
+
+		</lido-cell>
+	</lido-container>
 </main>`;
 }

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

@@ -4,12 +4,14 @@ const meta = {
     argTypes: {
         number: { control: 'text', name: 'number1', description: 'number. (E.g. 9)' },
         multiplicationFactor: { control: 'text', name: 'multiplication factor', description: '(E.g. 9)' },
-        answer: { control: 'text', name: 'answer', description: 'answer. (E.g. 81)' }
+        answer: { control: 'text', name: 'answer', description: 'answer. (E.g. 81)' },
+        isAllowOnlyCorrect: { control: 'boolean', name: 'isAllowOnlyCorrect' },
     },
     args: {
         number: '9',
         multiplicationFactor: '9',
         answer: '81',
+        isAllowOnlyCorrect: true,
     }
 };
 export default meta;
@@ -20,40 +22,42 @@ export const MultiplyBeeds = {
     },
 };
 function getContainerXml(args) {
+    var _a;
     const number = args.number;
     const multiplicationFactor = args.multiplicationFactor;
     const answer = args.answer;
+    const isAllowOnlyCorrect = (_a = args.isAllowOnlyCorrect) !== null && _a !== void 0 ? _a : true;
     let str_val = "";
     for (let i = 0; i < Number(multiplicationFactor); i++) {
         str_val += number + '+';
     }
     str_val = str_val.slice(0, -1) + '=';
-    return `
-        <main>
-            <lido-container id="multiply-beads" disableSpeak="true" show-drop-border="false" equationCheck="$#mat1,==,$#answer-multiply-beeds" objective="" tab-index="1"  value="multiply-beads" bgImage="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.png"  height="100%" width="100%" bgColor="transparent"  visible="true" onCorrect="answer-multiply-beeds.addText='${answer}'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" showCheck="false" isContinueOnCorrect="true">
-
-                <!-- Chimple Avatar -->
-                <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.570px, portrait.700px" width="landscape.380px, portrait.485px" x="landscape.1045px, portrait.220px" y="landscape.525px, portrait.1075px" ariaHidden="true" bgColor="transparent" visible="true"  onEntry="this.flex-shrink='0'; this.z-index='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-cell>
-                
-                <!-- Question Start Section -->
-                <lido-text visible="false" id="txt1" font-family="'Baloo 2', serif" font-size="52px" font-color="black" string="click the right slot of the beeds column and count the sum of all the beeds" onEntry="this.speak='true';" >
-                </lido-text>
-
-                <!-- Bottom display Section -->
-                <lido-cell layout="pos" id="pos2"  value="pos2" height="auto" width="landscape.815px, portrait.815px" x="landscape.775px, portrait.48px" y="landscape.300px, portrait.945px" ariaHidden="true" bgColor="transparent" visible="true" onEntry="this.flex-shrink='0'; this.animation='bottomToPlace 2s linear';">
-                    <lido-text id="answer-multiply-beeds"  value="${answer}" height="inherit" width="inherit" string="${str_val}" font-size="84px" font-weight="600" bgColor="#FFF4CD" visible="true" onEntry="this.word-wrap='break-word'; this.fontWeight='600'; this.textAlign='center';">
-                    </lido-text>
-                </lido-cell>
-
-                <!-- Beeds Section -->
-                <lido-cell layout="pos" id="pos3"  height="landscape.1100px, portrait.900px" width="landscape.700px,portrait.825px" x="landscape.40px, portrait.15px" y="landscape.-80px,portrait.45px" ariaHidden="true" z="0" bgColor="transparent" visible="true" onEntry="this.opacity='1';">
-                    <lido-math-matrix id="mat1" visible="true" rows="9" cols="9" top-index="true" left-index="true" bottom-index="false" clickable="true" active-only-visible="false" active-bg-color="#C23E06" deactive-bg-color="#F57139" border="2px solid #F34D08" defualt-fill="0" matrix-image="">
-                    </lido-math-matrix>
-                </lido-cell>
-            </lido-container>
-        </main>
+    return `
+        <main>
+            <lido-container id="multiply-beads" disableSpeak="true" show-drop-border="false" equationCheck="$#mat1,==,$#answer-multiply-beeds" objective="" tab-index="1"  value="multiply-beads" bgImage="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.png"  height="100%" width="100%" bgColor="transparent"  visible="true" onCorrect="answer-multiply-beeds.addText='${answer}'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}">
+
+                <!-- Chimple Avatar -->
+                <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.570px, portrait.700px" width="landscape.380px, portrait.485px" x="landscape.1045px, portrait.220px" y="landscape.525px, portrait.1075px" ariaHidden="true" bgColor="transparent" visible="true"  onEntry="this.flex-shrink='0'; this.z-index='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-cell>
+                
+                <!-- Question Start Section -->
+                <lido-text visible="false" id="txt1" font-family="'Baloo 2', serif" font-size="52px" font-color="black" string="click the right slot of the beeds column and count the sum of all the beeds" onEntry="this.speak='true';" >
+                </lido-text>
+
+                <!-- Bottom display Section -->
+                <lido-cell layout="pos" id="pos2"  value="pos2" height="auto" width="landscape.815px, portrait.815px" x="landscape.775px, portrait.48px" y="landscape.300px, portrait.945px" ariaHidden="true" bgColor="transparent" visible="true" onEntry="this.flex-shrink='0'; this.animation='bottomToPlace 2s linear';">
+                    <lido-text id="answer-multiply-beeds"  value="${answer}" height="inherit" width="inherit" string="${str_val}" font-size="84px" font-weight="600" bgColor="#FFF4CD" visible="true" onEntry="this.word-wrap='break-word'; this.fontWeight='600'; this.textAlign='center';">
+                    </lido-text>
+                </lido-cell>
+
+                <!-- Beeds Section -->
+                <lido-cell layout="pos" id="pos3"  height="landscape.1100px, portrait.900px" width="landscape.700px,portrait.825px" x="landscape.40px, portrait.15px" y="landscape.-80px,portrait.45px" ariaHidden="true" z="0" bgColor="transparent" visible="true" onEntry="this.opacity='1';">
+                    <lido-math-matrix id="mat1" visible="true" rows="9" cols="9" top-index="true" left-index="true" bottom-index="false" clickable="true" active-only-visible="false" active-bg-color="#C23E06" deactive-bg-color="#F57139" border="2px solid #F34D08" defualt-fill="0" matrix-image="">
+                    </lido-math-matrix>
+                </lido-cell>
+            </lido-container>
+        </main>
     `;
 }

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

@@ -5,6 +5,7 @@ const meta = {
         equations: { control: 'object' },
         values: { control: 'object' },
         isContinueOnCorrect: { control: 'boolean' },
+        isAllowOnlyCorrect: { control: 'boolean' },
     },
 };
 export default meta;
@@ -21,6 +22,7 @@ export const nimbletable = {
         ],
         answers: ["2", "4", "6", "8", "10", "12", "5"],
         isContinueOnCorrect: true,
+        isAllowOnlyCorrect: true,
     },
     render: args => {
         const xml = getContainerXml(args);
@@ -29,65 +31,65 @@ export const nimbletable = {
 };
 function getContainerXml(args) {
     let tabCounter = 1;
-    const { equations = [], answers = [], isContinueOnCorrect = true } = args;
+    const { equations = [], answers = [], isContinueOnCorrect = true, isAllowOnlyCorrect = true } = args;
     const SlidingEquationCells = equations
         .map((equation, index) => {
         const answer = answers[index]; // one-to-one mapping
-        return `
-      <lido-text visible="true" audio="" onTouch="" type="calculate"
-        id="equation${index + 1}" tab-index="${tabCounter++}"
-        height="landscape.140px, portrait.126px" width="landscape.100%, portrait.96%"
-        bg-Color="transparent" font-family="'Baloo Bhai 2'" font-size="84px"
-        value="${answer}" string="${equation}"
-        margin="landscape.-4px 10px 22px -116px,portrait.6px 0 20px 0 "
-        onEntry="this.color='white';this.fontWeight='500';this.borderRadius='10px';
-                 this.flex-shrink='0';this.textShadow='3px 0 white, -3px 0 white, 0 3px white, 0 -3px white';
-                 this.justifyContent='center'; this.alignItems='center'"
-        onCorrect="">
-      </lido-text>
+        return `
+      <lido-text visible="true" audio="" onTouch="" type="calculate"
+        id="equation${index + 1}" tab-index="${tabCounter++}"
+        height="landscape.140px, portrait.126px" width="landscape.100%, portrait.96%"
+        bg-Color="transparent" font-family="'Baloo Bhai 2'" font-size="84px"
+        value="${answer}" string="${equation}"
+        margin="landscape.-4px 10px 22px -116px,portrait.6px 0 20px 0 "
+        onEntry="this.color='white';this.fontWeight='500';this.borderRadius='10px';
+                 this.flex-shrink='0';this.textShadow='3px 0 white, -3px 0 white, 0 3px white, 0 -3px white';
+                 this.justifyContent='center'; this.alignItems='center'"
+        onCorrect="">
+      </lido-text>
     `;
     })
         .join('');
-    return `<main>
- <lido-container id="lido-container" is-allow-only-correct="true" tab-index="1" value="mainContainer1"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/letterboard/bg.png" objective="${answers.join(',')}" height="100%" width="100%" bg-color="transparent" visible="true" onCorrect="this.scrollCellAfterEquationSolved='true'; this.sleep='1000';lido-avatar.avatarAnimate='Success';this.sleep='2000'; " onEntry="this.justifyContent='space-around'; audio.speak='true';" onInCorrect="this.scrollCellAfterEquationSolved='true'; lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" 
- is-continue-on-correct="${isContinueOnCorrect}">
-
-   <!-- Audio -->
-  <lido-text visible="false" id="audio" onEntry="this.display='none';" string="Solve the question at the third board and select the correct answer from the calculator."></lido-text>
-
-<!-- Chimple Avatar -->
-	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.448px,portrait.402px" width="landscape.350px,portrait.398px" x="landscape.718px, portrait.-8%" y="landscape.502px, portrait.73%" 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-cell visible="true" id="xx"  layout="landscape.row,portrait.col" height="90%" width="102%" bg-Color="transparent" margin="landscape.56px -56px 0px 110px,portrait.0px" onEntry="" justify-content="space-evenly">
-			  <lido-cell layout="landscape.col,portrait.col" visible="true" height="landscape.96%,portrait.51%" width="landscape.614px,portrait.68%" bg-color="rgb(158 82 15 / 97%)" onEntry="" margin="landscape.27px 0px 0px -906px,portrait.-660px 0px 18px 0px" border-radius="10px">
-            <lido-text visible="true" id="" audio="" onTouch="" tab-index="${tabCounter++}" height="landscape.140px, portrait.126px" width="landscape.100%, portrait.96%" bg-Color="#b27641" margin="landscape.0px 0px 10px 0px,portrait.0 " onEntry="this.borderRadius='18px 18px 0px 0px'; this.flex-shrink='0';">
-            </lido-text>	
-            <lido-text visible="true" audio="" onTouch="" tab-index="${tabCounter++}" height="landscape.140px, portrait.126px" width="landscape.100%, portrait.96%" bg-Color="#b27641" margin="landscape.0px 0px 10px 0px,portrait.0 " onEntry="this.flex-shrink='0';">
-            </lido-text>
-            <lido-text visible="true" audio="" onTouch="" tab-index="${tabCounter++}" height="landscape.140px,portrait.124px" width="landscape.90%, portrait.86%" bg-Color="#9e5310" margin="landscape.0px 0px 10px 0px,portrait.0 " onEntry="this.flex-shrink='0'; this.border = 16px solid #82420a">
-            </lido-text>
-            <lido-text visible="true" audio="" onTouch="" tab-index="${tabCounter++}" height="landscape.140px, portrait.126px" width="landscape.100%, portrait.96%" bg-Color="#b27641" margin="landscape.0px 0px 10px 0px,portrait.0 " onEntry="this.flex-shrink='0';">
-            </lido-text>
-            <lido-text visible="true" audio="" onTouch="" tab-index="${tabCounter++}" height="landscape.140px, portrait.126px" width="landscape.100%, portrait.96%" bg-Color="#b27641" margin="landscape.0px 0px 10px 0px,portrait.0 " onEntry="this.borderRadius='0px 0px 18px 18px'; this.flex-shrink='0';">
-            </lido-text>				
-			   </lido-cell>
-
-			<lido-cell id="cellParent" layout="landscape.col,portrait.col" visible="true" height="landscape.94%,portrait.92%" width="landscape.40%,portrait.71%" bg-color="transparent" onEntry="this.position= 'fixed'; this.justifyContent='flex-start'" margin="landscape.101px 0px 0px 166px,portrait.80px 0px 0px 124px" border-radius="10px" display="flex">
-        <lido-text visible="true" audio="" onTouch="" id="dummy111" class="dummy-1" tab-index="" height="landscape.140px, portrait.126px" width="landscape.100%, portrait.96%" bg-Color="transparent" font-family="'Baloo Bhai 2'" font-size="88px" string="" margin="landscape.-4px 10px 22px -116px,portrait.6px 0 20px 0 " onEntry="this.color='white';this.fontWeight='500';this.borderRadius='10px'; this.flex-shrink='0';this.textShadow = '3px 0 white, -3px 0 white, 0 3px white, 0 -3px white'; this.justifyContent='center'" onCorrect="">
-				</lido-text>
-				<lido-text visible="true" audio="" onTouch="" id="dummy112" class="dummy-2" tab-index="" height="landscape.140px, portrait.126px" width="landscape.100%, portrait.96%" bg-Color="transparent" font-family="'Baloo Bhai 2'" font-size="88px" string="" margin="landscape.-4px 10px 22px -116px,portrait.6px 0 20px 0 " onEntry="this.color='white';this.fontWeight='500';this.borderRadius='10px'; this.flex-shrink='0';this.textShadow = '3px 0 white, -3px 0 white, 0 3px white, 0 -3px white'; this.justifyContent='center'" onCorrect="">
-				</lido-text>
-        ${SlidingEquationCells}
-
-       <lido-cell visible="true" height="landscape.84%,portrait.732px" width="landscape.530px,portrait.62%" bg-color="transparent"  onEntry="this.display='flex'; this.position='fixed'" margin="landscape.98px 0px 106px 1027px, portrait.860px 0px 0px 280px">
-				<lido-calculator visible="true" height="100%"></lido-calculator>
-			</lido-cell>				
-			</lido-cell>
-    </lido-cell>
-</lido-container>
+    return `<main>
+ <lido-container id="lido-container" is-allow-only-correct="${isAllowOnlyCorrect}" tab-index="1" value="mainContainer1"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/letterboard/bg.png" objective="${answers.join(',')}" height="100%" width="100%" bg-color="transparent" visible="true" onCorrect="this.scrollCellAfterEquationSolved='true'; this.sleep='1000';lido-avatar.avatarAnimate='Success';this.sleep='2000'; " onEntry="this.justifyContent='space-around'; audio.speak='true';" onInCorrect="this.scrollCellAfterEquationSolved='true'; lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" 
+ is-continue-on-correct="${isContinueOnCorrect}">
+
+   <!-- Audio -->
+  <lido-text visible="false" id="audio" onEntry="this.display='none';" string="Solve the question at the third board and select the correct answer from the calculator."></lido-text>
+
+<!-- Chimple Avatar -->
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.448px,portrait.402px" width="landscape.350px,portrait.398px" x="landscape.718px, portrait.-8%" y="landscape.502px, portrait.73%" 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-cell visible="true" id="xx"  layout="landscape.row,portrait.col" height="90%" width="102%" bg-Color="transparent" margin="landscape.56px -56px 0px 110px,portrait.0px" onEntry="" justify-content="space-evenly">
+			  <lido-cell layout="landscape.col,portrait.col" visible="true" height="landscape.96%,portrait.51%" width="landscape.614px,portrait.68%" bg-color="rgb(158 82 15 / 97%)" onEntry="" margin="landscape.27px 0px 0px -906px,portrait.-660px 0px 18px 0px" border-radius="10px">
+            <lido-text visible="true" id="" audio="" onTouch="" tab-index="${tabCounter++}" height="landscape.140px, portrait.126px" width="landscape.100%, portrait.96%" bg-Color="#b27641" margin="landscape.0px 0px 10px 0px,portrait.0 " onEntry="this.borderRadius='18px 18px 0px 0px'; this.flex-shrink='0';">
+            </lido-text>	
+            <lido-text visible="true" audio="" onTouch="" tab-index="${tabCounter++}" height="landscape.140px, portrait.126px" width="landscape.100%, portrait.96%" bg-Color="#b27641" margin="landscape.0px 0px 10px 0px,portrait.0 " onEntry="this.flex-shrink='0';">
+            </lido-text>
+            <lido-text visible="true" audio="" onTouch="" tab-index="${tabCounter++}" height="landscape.140px,portrait.124px" width="landscape.90%, portrait.86%" bg-Color="#9e5310" margin="landscape.0px 0px 10px 0px,portrait.0 " onEntry="this.flex-shrink='0'; this.border = 16px solid #82420a">
+            </lido-text>
+            <lido-text visible="true" audio="" onTouch="" tab-index="${tabCounter++}" height="landscape.140px, portrait.126px" width="landscape.100%, portrait.96%" bg-Color="#b27641" margin="landscape.0px 0px 10px 0px,portrait.0 " onEntry="this.flex-shrink='0';">
+            </lido-text>
+            <lido-text visible="true" audio="" onTouch="" tab-index="${tabCounter++}" height="landscape.140px, portrait.126px" width="landscape.100%, portrait.96%" bg-Color="#b27641" margin="landscape.0px 0px 10px 0px,portrait.0 " onEntry="this.borderRadius='0px 0px 18px 18px'; this.flex-shrink='0';">
+            </lido-text>				
+			   </lido-cell>
+
+			<lido-cell id="cellParent" layout="landscape.col,portrait.col" visible="true" height="landscape.94%,portrait.92%" width="landscape.40%,portrait.71%" bg-color="transparent" onEntry="this.position= 'fixed'; this.justifyContent='flex-start'" margin="landscape.101px 0px 0px 166px,portrait.80px 0px 0px 124px" border-radius="10px" display="flex">
+        <lido-text visible="true" audio="" onTouch="" id="dummy111" class="dummy-1" tab-index="" height="landscape.140px, portrait.126px" width="landscape.100%, portrait.96%" bg-Color="transparent" font-family="'Baloo Bhai 2'" font-size="88px" string="" margin="landscape.-4px 10px 22px -116px,portrait.6px 0 20px 0 " onEntry="this.color='white';this.fontWeight='500';this.borderRadius='10px'; this.flex-shrink='0';this.textShadow = '3px 0 white, -3px 0 white, 0 3px white, 0 -3px white'; this.justifyContent='center'" onCorrect="">
+				</lido-text>
+				<lido-text visible="true" audio="" onTouch="" id="dummy112" class="dummy-2" tab-index="" height="landscape.140px, portrait.126px" width="landscape.100%, portrait.96%" bg-Color="transparent" font-family="'Baloo Bhai 2'" font-size="88px" string="" margin="landscape.-4px 10px 22px -116px,portrait.6px 0 20px 0 " onEntry="this.color='white';this.fontWeight='500';this.borderRadius='10px'; this.flex-shrink='0';this.textShadow = '3px 0 white, -3px 0 white, 0 3px white, 0 -3px white'; this.justifyContent='center'" onCorrect="">
+				</lido-text>
+        ${SlidingEquationCells}
+
+       <lido-cell visible="true" height="landscape.84%,portrait.732px" width="landscape.530px,portrait.62%" bg-color="transparent"  onEntry="this.display='flex'; this.position='fixed'" margin="landscape.98px 0px 106px 1027px, portrait.860px 0px 0px 280px">
+				<lido-calculator visible="true" height="100%"></lido-calculator>
+			</lido-cell>				
+			</lido-cell>
+    </lido-cell>
+</lido-container>
 </main>`;
 }