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

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

@@ -68,117 +68,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/background-images/MCQ.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="${args.PracticeMode}" 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/background-images/MCQ.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="${args.PracticeMode}" 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/background-images/MCQ.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/background-images/MCQ.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

@@ -25,64 +25,64 @@ function getContainerXml(args) {
     const numberRow = Array.from({ length: 9 }, (_, i) => {
         const value = i + 1;
         const bgColor = value === num2 ? "#f24c05" : "#f2c90f";
-        return `
-                    <lido-text visible="true" width="63px" font-size="40px" onEntry="this.fontWeight='800'; this.border='2px solid black';" bg-color="${bgColor}" string="${value}" borderRadius="86px"></lido-text>
+        return `
+                    <lido-text visible="true" width="63px" font-size="40px" onEntry="this.fontWeight='800'; this.border='2px solid black';" bg-color="${bgColor}" string="${value}" borderRadius="86px"></lido-text>
                 `;
     }).join("");
-    return `
-        <main>
-        <lido-container visible="true" template-id="multiplyBeeds" objective="${objective}" onCorrect="drop${num2}.visibility='hidden'; drag${num2}.visibility='hidden'; num1.speak='true'; num2.speak='true'; num3.speak='true'; num4.speak='true'; num5.speak='true'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';" is-allow-only-correct="true" bg-image="https://db-stage.chimple.net/storage/v1/object/public/template-assets/background-images/Multiply%20beads.png" exit-button-url="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Close.png" prev-button-url='https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Previous.png' next-button-url='https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Next.png' speaker-button-url='https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/NavAudio.png'>
-
-                <lido-text id="num1" string="${num1}"></lido-text>
-                <lido-text id="num2" string="in to"></lido-text>
-                <lido-text id="num3" string="${num2}"></lido-text>
-                <lido-text id="num4" string="equal"></lido-text>
-                <lido-text id="num5" string="${num1 * num2}"></lido-text>
-
-        <!-- Chimple Avatar -->
-        <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.348px,portrait.270px" width="landscape.250px,portrait.270px" x="landscape.0px, portrait.-9%" y="landscape.600px, portrait.36%" 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" height="100%" width="80%" bg-color="transparent" layout="col" onEntry="this.justifyContent='flex-end';" margin="0 0 -10px 0">
-            <lido-cell visible="true" height="80px" width="90%" bg-color="transparent" layout="row" onEntry="this.justifyContent='flex-start';">
-                <lido-cell visible="true" height="30px" width="60%" layout="row">
-                    ${numberRow}
-                </lido-cell>
-            </lido-cell>
-            <lido-cell visible="true" height="600px" width="90%" bg-color="transparent" layout="row" onEntry="this.justifyContent='flex-start';">
-                <lido-cell visible="true" height="100%" width="60%" bg-color="transparent" layout="row" onEntry="this.alignItems='flex-start';">
-                    <lido-math-matrix id="drop0" value="1" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drop" onEntry="this.visibility='visible';" onCorrect="drop1.visibility='visible'; drag1.visibility='visible'; lido-avatar.avatarAnimate='Success';"></lido-math-matrix>
-                    <lido-math-matrix id="drop1" value="2" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drop" onEntry="this.visibility='hidden';" onCorrect="drop2.visibility='visible'; drag2.visibility='visible'; lido-avatar.avatarAnimate='Success';"></lido-math-matrix>   
-                    <lido-math-matrix id="drop2" value="3" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drop" onEntry="this.visibility='hidden';" onCorrect="drop3.visibility='visible'; drag3.visibility='visible'; lido-avatar.avatarAnimate='Success';"></lido-math-matrix>   
-                    <lido-math-matrix id="drop3" value="4" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drop" onEntry="this.visibility='hidden';" onCorrect="drop4.visibility='visible'; drag4.visibility='visible'; lido-avatar.avatarAnimate='Success';"></lido-math-matrix>   
-                    <lido-math-matrix id="drop4" value="5" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drop" onEntry="this.visibility='hidden';" onCorrect="drop5.visibility='visible'; drag5.visibility='visible'; lido-avatar.avatarAnimate='Success';"></lido-math-matrix>   
-                    <lido-math-matrix id="drop5" value="6" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drop" onEntry="this.visibility='hidden';" onCorrect="drop6.visibility='visible'; drag6.visibility='visible'; lido-avatar.avatarAnimate='Success';"></lido-math-matrix>   
-                    <lido-math-matrix id="drop6" value="7" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drop" onEntry="this.visibility='hidden';" onCorrect="drop7.visibility='visible'; drag7.visibility='visible'; lido-avatar.avatarAnimate='Success';"></lido-math-matrix>   
-                    <lido-math-matrix id="drop7" value="8" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drop" onEntry="this.visibility='hidden';" onCorrect="drop8.visibility='visible'; drag8.visibility='visible'; lido-avatar.avatarAnimate='Success';"></lido-math-matrix>   
-                    <lido-math-matrix id="drop8" value="9" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drop" onEntry="this.visibility='hidden';" onCorrect="drop9.visibility='visible'; drag9.visibility='visible'; lido-avatar.avatarAnimate='Success';"></lido-math-matrix>   
-                </lido-cell>
-                <lido-cell visible="true" layout="pos" height="65%" width="30%" bg-color="transparent" x="950px" y="113px" onEntry="this.display='flex'; this.justifyContent='center'; this.alignItems='center';">
-                    <lido-math-matrix id="drag0" value="1" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drag" activeBgColor="#9a3dc5ff" defualtFill="${num1}" onEntry=""></lido-math-matrix>
-                    <lido-math-matrix id="drag1" value="2" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drag" activeBgColor="#9a3dc5ff" defualtFill="${num1}" onEntry="this.visibility='hidden';"></lido-math-matrix>
-                    <lido-math-matrix id="drag2" value="3" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drag" activeBgColor="#9a3dc5ff" defualtFill="${num1}" onEntry="this.visibility='hidden';"></lido-math-matrix>
-                    <lido-math-matrix id="drag3" value="4" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drag" activeBgColor="#9a3dc5ff" defualtFill="${num1}" onEntry="this.visibility='hidden';"></lido-math-matrix>
-                    <lido-math-matrix id="drag4" value="5" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drag" activeBgColor="#9a3dc5ff" defualtFill="${num1}" onEntry="this.visibility='hidden';"></lido-math-matrix>
-                    <lido-math-matrix id="drag5" value="6" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drag" activeBgColor="#9a3dc5ff" defualtFill="${num1}" onEntry="this.visibility='hidden';"></lido-math-matrix>
-                    <lido-math-matrix id="drag6" value="7" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drag" activeBgColor="#9a3dc5ff" defualtFill="${num1}" onEntry="this.visibility='hidden';"></lido-math-matrix>
-                    <lido-math-matrix id="drag7" value="8" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drag" activeBgColor="#9a3dc5ff" defualtFill="${num1}" onEntry="this.visibility='hidden';"></lido-math-matrix>
-                    <lido-math-matrix id="drag8" value="9" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drag" activeBgColor="#9a3dc5ff" defualtFill="${num1}" onEntry="this.visibility='hidden';"></lido-math-matrix>
-                </lido-cell>
-            </lido-cell>
-
-            <lido-cell visible="true" layout="row" width="90%" height="165px" bg-color="brown" border-radius="50px">
-                <lido-text visible="true" id="beedsText" font-size="100px" font-color="white" string="" onEntry="this.fontWeight='800';"></lido-text>
-            <lido-cell>
-        <lido-cell>
-
-    </lido-container>
-
-        </main>
+    return `
+        <main>
+        <lido-container visible="true" template-id="multiplyBeeds" objective="${objective}" onCorrect="drop${num2}.visibility='hidden'; drag${num2}.visibility='hidden'; num1.speak='true'; num2.speak='true'; num3.speak='true'; num4.speak='true'; num5.speak='true'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';" is-allow-only-correct="true" bg-image="https://db-stage.chimple.net/storage/v1/object/public/template-assets/background-images/Multiply%20beads.png" exit-button-url="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Close.png" prev-button-url='https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Previous.png' next-button-url='https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Next.png' speaker-button-url='https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/NavAudio.png'>
+
+                <lido-text id="num1" string="${num1}"></lido-text>
+                <lido-text id="num2" string="in to"></lido-text>
+                <lido-text id="num3" string="${num2}"></lido-text>
+                <lido-text id="num4" string="equal"></lido-text>
+                <lido-text id="num5" string="${num1 * num2}"></lido-text>
+
+        <!-- Chimple Avatar -->
+        <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.348px,portrait.270px" width="landscape.250px,portrait.270px" x="landscape.0px, portrait.-9%" y="landscape.600px, portrait.36%" 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" height="100%" width="80%" bg-color="transparent" layout="col" onEntry="this.justifyContent='flex-end';" margin="0 0 -10px 0">
+            <lido-cell visible="true" height="80px" width="90%" bg-color="transparent" layout="row" onEntry="this.justifyContent='flex-start';">
+                <lido-cell visible="true" height="30px" width="60%" layout="row">
+                    ${numberRow}
+                </lido-cell>
+            </lido-cell>
+            <lido-cell visible="true" height="600px" width="90%" bg-color="transparent" layout="row" onEntry="this.justifyContent='flex-start';">
+                <lido-cell visible="true" height="100%" width="60%" bg-color="transparent" layout="row" onEntry="this.alignItems='flex-start';">
+                    <lido-math-matrix id="drop0" value="1" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drop" onEntry="this.visibility='visible';" onCorrect="drop1.visibility='visible'; drag1.visibility='visible'; lido-avatar.avatarAnimate='Success';"></lido-math-matrix>
+                    <lido-math-matrix id="drop1" value="2" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drop" onEntry="this.visibility='hidden';" onCorrect="drop2.visibility='visible'; drag2.visibility='visible'; lido-avatar.avatarAnimate='Success';"></lido-math-matrix>   
+                    <lido-math-matrix id="drop2" value="3" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drop" onEntry="this.visibility='hidden';" onCorrect="drop3.visibility='visible'; drag3.visibility='visible'; lido-avatar.avatarAnimate='Success';"></lido-math-matrix>   
+                    <lido-math-matrix id="drop3" value="4" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drop" onEntry="this.visibility='hidden';" onCorrect="drop4.visibility='visible'; drag4.visibility='visible'; lido-avatar.avatarAnimate='Success';"></lido-math-matrix>   
+                    <lido-math-matrix id="drop4" value="5" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drop" onEntry="this.visibility='hidden';" onCorrect="drop5.visibility='visible'; drag5.visibility='visible'; lido-avatar.avatarAnimate='Success';"></lido-math-matrix>   
+                    <lido-math-matrix id="drop5" value="6" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drop" onEntry="this.visibility='hidden';" onCorrect="drop6.visibility='visible'; drag6.visibility='visible'; lido-avatar.avatarAnimate='Success';"></lido-math-matrix>   
+                    <lido-math-matrix id="drop6" value="7" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drop" onEntry="this.visibility='hidden';" onCorrect="drop7.visibility='visible'; drag7.visibility='visible'; lido-avatar.avatarAnimate='Success';"></lido-math-matrix>   
+                    <lido-math-matrix id="drop7" value="8" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drop" onEntry="this.visibility='hidden';" onCorrect="drop8.visibility='visible'; drag8.visibility='visible'; lido-avatar.avatarAnimate='Success';"></lido-math-matrix>   
+                    <lido-math-matrix id="drop8" value="9" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drop" onEntry="this.visibility='hidden';" onCorrect="drop9.visibility='visible'; drag9.visibility='visible'; lido-avatar.avatarAnimate='Success';"></lido-math-matrix>   
+                </lido-cell>
+                <lido-cell visible="true" layout="pos" height="65%" width="30%" bg-color="transparent" x="950px" y="113px" onEntry="this.display='flex'; this.justifyContent='center'; this.alignItems='center';">
+                    <lido-math-matrix id="drag0" value="1" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drag" activeBgColor="#9a3dc5ff" defualtFill="${num1}" onEntry=""></lido-math-matrix>
+                    <lido-math-matrix id="drag1" value="2" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drag" activeBgColor="#9a3dc5ff" defualtFill="${num1}" onEntry="this.visibility='hidden';"></lido-math-matrix>
+                    <lido-math-matrix id="drag2" value="3" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drag" activeBgColor="#9a3dc5ff" defualtFill="${num1}" onEntry="this.visibility='hidden';"></lido-math-matrix>
+                    <lido-math-matrix id="drag3" value="4" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drag" activeBgColor="#9a3dc5ff" defualtFill="${num1}" onEntry="this.visibility='hidden';"></lido-math-matrix>
+                    <lido-math-matrix id="drag4" value="5" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drag" activeBgColor="#9a3dc5ff" defualtFill="${num1}" onEntry="this.visibility='hidden';"></lido-math-matrix>
+                    <lido-math-matrix id="drag5" value="6" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drag" activeBgColor="#9a3dc5ff" defualtFill="${num1}" onEntry="this.visibility='hidden';"></lido-math-matrix>
+                    <lido-math-matrix id="drag6" value="7" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drag" activeBgColor="#9a3dc5ff" defualtFill="${num1}" onEntry="this.visibility='hidden';"></lido-math-matrix>
+                    <lido-math-matrix id="drag7" value="8" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drag" activeBgColor="#9a3dc5ff" defualtFill="${num1}" onEntry="this.visibility='hidden';"></lido-math-matrix>
+                    <lido-math-matrix id="drag8" value="9" clickable="false" visible="true" height="550px" width="1200px" cols="${num1}" rows="1" border-radius="20px" type="drag" activeBgColor="#9a3dc5ff" defualtFill="${num1}" onEntry="this.visibility='hidden';"></lido-math-matrix>
+                </lido-cell>
+            </lido-cell>
+
+            <lido-cell visible="true" layout="row" width="90%" height="165px" bg-color="brown" border-radius="50px">
+                <lido-text visible="true" id="beedsText" font-size="100px" font-color="white" string="" onEntry="this.fontWeight='800';"></lido-text>
+            <lido-cell>
+        <lido-cell>
+
+    </lido-container>
+
+        </main>
     `;
 }