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

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

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

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

@@ -46,99 +46,99 @@ const renderDropBoxes = (numOfDrops) => {
 const renderDragCells = () => {
     let html = "";
     for (let i = 0; i < 10; i++) {
-        html += `
-      <lido-text 
-        visible="true" 
-        id="drag${i}" 
-        type="drag" 
-        string="${i}" 
-        value="${i}" 
-        font-size="150px" 
-        font-color="#3d1d0c" 
-        height="165px" 
-        width="115px" 
-        bg-color="#f5f098" 
-        border-radius="15px" 
-        onEntry="this.fontWeight='bold';">
-      </lido-text>
+        html += `
+      <lido-text 
+        visible="true" 
+        id="drag${i}" 
+        type="drag" 
+        string="${i}" 
+        value="${i}" 
+        font-size="150px" 
+        font-color="#3d1d0c" 
+        height="165px" 
+        width="115px" 
+        bg-color="#f5f098" 
+        border-radius="15px" 
+        onEntry="this.fontWeight='bold';">
+      </lido-text>
     `;
     }
     return html;
 };
 const getContainerXml = (args) => {
     const answer = answerNumbers(args.num1, args.num2, args.operator, args.num3);
-    return `
-    <main>
-    <lido-container visible="true" objective="${answer.toString().split("").join(",")}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/tenbox.png" is-continue-on-correct="true" onCorrect="this.sleep='1500';" drop-action="infinite-drop" id="lido-container" >
-	<lido-cell visible="true" layout="col" height="100%" width="100%" bg-color="transparent">
-		<lido-cell visible="true" layout="landscape.row, portrait.col" height="53%" width="auto" gap="20px" bg-color="transparent">
-			<lido-cell visible="true" layout="col" height="100%" width="500px" bg-color="transparent">
-				${!args.num3 && args.num1 >= 10 ? `
-					<lido-cell visible="true" height="50%" width="100%" layout="row">
-						<lido-text id="tenBox" visible="false" font-size="150px" bg-color="#fbd061" width="100%" height="70%" onEntry="this.border='4px solid #c86d29';" border-radius="20px">
-							<lido-image visible="true" is-slice="true" width="35%" height="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/sunflower.png">
-								<lido-text visible="true" string="10" font-size="145px" bg-color="transparent" onEntry="this.fontWeight='700';"></lido-text>
-							</lido-image>
-						</lido-text>
-						<lido-math-matrix visible="true" height="100%" width="100%" rows="5" cols="2" border="2px solid orange" border-radius="7px" active-bg-color="white" deactive-bg-color="white" onEntry="this.sleep='1000'; this.display='none'; tenBox.display='flex';" defualt-fill="10" clickable="false" matrix-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png"></lido-math-matrix>
-					</lido-cell>
-					` : ``}
-
-				${!args.num3 && args.num1 === 20 ? `
-					<lido-cell visible="true" height="50%" width="100%" layout="row">
-						<lido-text id="tenBox1" visible="false" font-size="150px" bg-color="#fbd061" width="100%" height="70%" onEntry="this.border='4px solid #c86d29';" border-radius="20px">
-							<lido-image visible="true" is-slice="true" width="35%" height="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/sunflower.png">
-								<lido-text visible="true" string="10" font-size="145px" bg-color="transparent" onEntry="this.fontWeight='700';"></lido-text>
-							</lido-image>
-						</lido-text>
-						<lido-math-matrix visible="true" height="100%" width="100%" rows="5" cols="2" border="2px solid orange" border-radius="7px" active-bg-color="white" deactive-bg-color="white" onEntry="this.sleep='1000'; this.display='none'; tenBox1.display='flex';" defualt-fill="10" clickable="false" matrix-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png"></lido-math-matrix>
-					</lido-cell>
-					` : `<lido-math-matrix visible="${args.num1 !== 10 ? true : false}" height="50%" width="100%" rows="5" cols="2" border="2px solid orange" border-radius="7px" active-bg-color="white" deactive-bg-color="white" defualt-fill="${args.num1 > 10 ? args.num1 - 10 : args.num1}" clickable="false" matrix-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png"></lido-math-matrix>`}
-				
-
-				
-
-			</lido-cell>
-
-			<lido-cell visible="true" layout="col" height="100%" width="500px" bg-color="transparent">
-				${!args.num3 && args.num2 >= 10 ? `
-					<lido-cell visible="true" height="50%" width="100%" layout="row">
-						<lido-text id="tenBox2" visible="false" font-size="150px" bg-color="#fbd061" width="100%" height="70%" onEntry="this.border='4px solid #c86d29';" border-radius="20px">
-							<lido-image visible="true" is-slice="true" width="35%" height="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/sunflower.png">
-								<lido-text visible="true" string="10" font-size="145px" bg-color="transparent" onEntry="this.fontWeight='700';"></lido-text>
-							</lido-image>
-						</lido-text>
-						<lido-math-matrix visible="true" height="100%" width="100%" rows="5" cols="2" border="2px solid orange" border-radius="7px" active-bg-color="white" deactive-bg-color="white" onEntry="this.sleep='1000'; this.display='none'; tenBox2.display='flex';" defualt-fill="10" clickable="false" matrix-image="${args.operator === "+" ? `https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png` : 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/apple%20outline.png'}"></lido-math-matrix>
-					</lido-cell>
-					` : ``}
-				
-
-				${!args.num3 && args.num2 === 20 ? `
-					<lido-cell visible="true" height="50%" width="100%" layout="row">
-						<lido-text id="tenBox3" visible="false" font-size="150px" bg-color="#fbd061" width="100%" height="70%" onEntry="this.border='4px solid #c86d29';" border-radius="20px">
-							<lido-image visible="true" is-slice="true" width="35%" height="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/sunflower.png">
-								<lido-text visible="true" string="10" font-size="145px" bg-color="transparent" onEntry="this.fontWeight='700';"></lido-text>
-							</lido-image>
-						</lido-text>
-						<lido-math-matrix visible="true" height="100%" width="100%" rows="5" cols="2" border="2px solid orange" border-radius="7px" active-bg-color="white" deactive-bg-color="white" onEntry="this.sleep='1000'; this.display='none'; tenBox3.display='flex';" defualt-fill="10" clickable="false" matrix-image="${args.operator === "+" ? `https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png` : 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/apple%20outline.png'}"></lido-math-matrix>
-					</lido-cell>
-					` : `<lido-math-matrix visible="${args.num2 !== 10 ? true : false}" height="50%" width="100%" rows="5" cols="2" border="2px solid orange" border-radius="7px" active-bg-color="white" deactive-bg-color="white" defualt-fill="${args.num2 > 10 ? args.num2 - 10 : args.num2}" clickable="false" matrix-image="${args.operator === "+" ? `https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png` : 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/apple%20outline.png'}"></lido-math-matrix>`}
-			</lido-cell>
-			${args.num3 ? `
-			<lido-cell visible="true" layout="col" height="100%" width="500px" bg-color="transparent">
-				<lido-math-matrix visible="true" height="50%" width="100%" rows="5" cols="2" border="2px solid orange" border-radius="7px" active-bg-color="white" deactive-bg-color="white" defualt-fill="${args.num3}" clickable="false" matrix-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png"></lido-math-matrix>
-			</lido-cell>` : ``}
-		</lido-cell>
-		<lido-cell visible="true" layout="row" height="20%" width="auto" gap="20px" bg-color="transparent">
-			<lido-text visible="true" string="${args.num1}${args.operator}${args.num2}${args.num3 ? args.operator + args.num3 : ""} = " font-size="150px" font-color="white" onEntry="this.fontWeight='bold';" onTouch="this.fontSize='20px'; this.visibility='hidden';"></lido-text>
-			${renderDropBoxes(answer)}
-		</lido-cell>
-		<lido-cell visible="true" layout="landscape.row, portrait.flex" height="landscpae.20%, portrait.30%" gap="landscape.0, portrait.80px" width="100%" bg-color="transparent">
-			
-			${renderDragCells()}
-
-		</lido-cell>
-	</lido-cell>
-</lido-container>
+    return `
+    <main>
+    <lido-container visible="true" objective="${answer.toString().split("").join(",")}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/tenbox.png" is-continue-on-correct="true" onCorrect="this.sleep='1500';" drop-action="infinite-drop" id="lido-container" >
+	<lido-cell visible="true" layout="col" height="100%" width="100%" bg-color="transparent">
+		<lido-cell visible="true" layout="landscape.row, portrait.col" height="53%" width="auto" gap="20px" bg-color="transparent">
+			<lido-cell visible="true" layout="col" height="100%" width="500px" bg-color="transparent">
+				${!args.num3 && args.num1 >= 10 ? `
+					<lido-cell visible="true" height="50%" width="100%" layout="row">
+						<lido-text id="tenBox" visible="false" font-size="150px" bg-color="#fbd061" width="100%" height="70%" onEntry="this.border='4px solid #c86d29';" border-radius="20px">
+							<lido-image visible="true" is-slice="true" width="35%" height="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/sunflower.png">
+								<lido-text visible="true" string="10" font-size="145px" bg-color="transparent" onEntry="this.fontWeight='700';"></lido-text>
+							</lido-image>
+						</lido-text>
+						<lido-math-matrix visible="true" height="100%" width="100%" rows="5" cols="2" border="2px solid orange" border-radius="7px" active-bg-color="white" deactive-bg-color="white" onEntry="this.sleep='1000'; this.display='none'; tenBox.display='flex';" defualt-fill="10" clickable="false" matrix-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png"></lido-math-matrix>
+					</lido-cell>
+					` : ``}
+
+				${!args.num3 && args.num1 === 20 ? `
+					<lido-cell visible="true" height="50%" width="100%" layout="row">
+						<lido-text id="tenBox1" visible="false" font-size="150px" bg-color="#fbd061" width="100%" height="70%" onEntry="this.border='4px solid #c86d29';" border-radius="20px">
+							<lido-image visible="true" is-slice="true" width="35%" height="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/sunflower.png">
+								<lido-text visible="true" string="10" font-size="145px" bg-color="transparent" onEntry="this.fontWeight='700';"></lido-text>
+							</lido-image>
+						</lido-text>
+						<lido-math-matrix visible="true" height="100%" width="100%" rows="5" cols="2" border="2px solid orange" border-radius="7px" active-bg-color="white" deactive-bg-color="white" onEntry="this.sleep='1000'; this.display='none'; tenBox1.display='flex';" defualt-fill="10" clickable="false" matrix-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png"></lido-math-matrix>
+					</lido-cell>
+					` : `<lido-math-matrix visible="${args.num1 !== 10 ? true : false}" height="50%" width="100%" rows="5" cols="2" border="2px solid orange" border-radius="7px" active-bg-color="white" deactive-bg-color="white" defualt-fill="${args.num1 > 10 ? args.num1 - 10 : args.num1}" clickable="false" matrix-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png"></lido-math-matrix>`}
+				
+
+				
+
+			</lido-cell>
+
+			<lido-cell visible="true" layout="col" height="100%" width="500px" bg-color="transparent">
+				${!args.num3 && args.num2 >= 10 ? `
+					<lido-cell visible="true" height="50%" width="100%" layout="row">
+						<lido-text id="tenBox2" visible="false" font-size="150px" bg-color="#fbd061" width="100%" height="70%" onEntry="this.border='4px solid #c86d29';" border-radius="20px">
+							<lido-image visible="true" is-slice="true" width="35%" height="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/sunflower.png">
+								<lido-text visible="true" string="10" font-size="145px" bg-color="transparent" onEntry="this.fontWeight='700';"></lido-text>
+							</lido-image>
+						</lido-text>
+						<lido-math-matrix visible="true" height="100%" width="100%" rows="5" cols="2" border="2px solid orange" border-radius="7px" active-bg-color="white" deactive-bg-color="white" onEntry="this.sleep='1000'; this.display='none'; tenBox2.display='flex';" defualt-fill="10" clickable="false" matrix-image="${args.operator === "+" ? `https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png` : 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/apple%20outline.png'}"></lido-math-matrix>
+					</lido-cell>
+					` : ``}
+				
+
+				${!args.num3 && args.num2 === 20 ? `
+					<lido-cell visible="true" height="50%" width="100%" layout="row">
+						<lido-text id="tenBox3" visible="false" font-size="150px" bg-color="#fbd061" width="100%" height="70%" onEntry="this.border='4px solid #c86d29';" border-radius="20px">
+							<lido-image visible="true" is-slice="true" width="35%" height="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/sunflower.png">
+								<lido-text visible="true" string="10" font-size="145px" bg-color="transparent" onEntry="this.fontWeight='700';"></lido-text>
+							</lido-image>
+						</lido-text>
+						<lido-math-matrix visible="true" height="100%" width="100%" rows="5" cols="2" border="2px solid orange" border-radius="7px" active-bg-color="white" deactive-bg-color="white" onEntry="this.sleep='1000'; this.display='none'; tenBox3.display='flex';" defualt-fill="10" clickable="false" matrix-image="${args.operator === "+" ? `https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png` : 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/apple%20outline.png'}"></lido-math-matrix>
+					</lido-cell>
+					` : `<lido-math-matrix visible="${args.num2 !== 10 ? true : false}" height="50%" width="100%" rows="5" cols="2" border="2px solid orange" border-radius="7px" active-bg-color="white" deactive-bg-color="white" defualt-fill="${args.num2 > 10 ? args.num2 - 10 : args.num2}" clickable="false" matrix-image="${args.operator === "+" ? `https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png` : 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/apple%20outline.png'}"></lido-math-matrix>`}
+			</lido-cell>
+			${args.num3 ? `
+			<lido-cell visible="true" layout="col" height="100%" width="500px" bg-color="transparent">
+				<lido-math-matrix visible="true" height="50%" width="100%" rows="5" cols="2" border="2px solid orange" border-radius="7px" active-bg-color="white" deactive-bg-color="white" defualt-fill="${args.num3}" clickable="false" matrix-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png"></lido-math-matrix>
+			</lido-cell>` : ``}
+		</lido-cell>
+		<lido-cell visible="true" layout="row" height="20%" width="auto" gap="20px" bg-color="transparent">
+			<lido-text visible="true" string="${args.num1}${args.operator}${args.num2}${args.num3 ? args.operator + args.num3 : ""} = " font-size="150px" font-color="white" onEntry="this.fontWeight='bold';" onTouch="this.fontSize='20px'; this.visibility='hidden';"></lido-text>
+			${renderDropBoxes(answer)}
+		</lido-cell>
+		<lido-cell visible="true" layout="landscape.row, portrait.flex" height="landscpae.20%, portrait.30%" gap="landscape.0, portrait.80px" width="100%" bg-color="transparent">
+			
+			${renderDragCells()}
+
+		</lido-cell>
+	</lido-cell>
+</lido-container>
 </main>`;
 };

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

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

package/dist/collection/stories/Templates/wordBuilding/wordBuildingwithimg.stories.js

@@ -37,40 +37,40 @@ export const wordBuildingwithimg = {
 };
 function getContainerXml(args) {
     const { isAllowOnlyCorrect = true } = args;
-    return `<main>
-   <lido-container disable-speak="true" visible="true" id="lido-container" template-id="mcq"  objective="${args.answer}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/WordBuilding/bgImage.png"  onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='1200';data.z-index='100'; data.boxShadow='0 0 40px #FFC107';this.sleep='300'; this.sleep='400'; data.boxShadow='none';this.sleep='2000';" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="blank.z-index='12';">
-<!-- Chimple Avatar -->
-		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape. 373px,portrait.402px" width="landscape.304px,portrait.398px" x="landscape.0%, portrait.28%" y="landscape.51%, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" >
-			<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
-			</lido-avatar>
-			
-	
-		</lido-cell>
-    <lido-text visible="false" z-index="0" tab-index="19"  audio="" id="inst" string="Choose the correct letter to form a word" ></lido-text>
-	<!--	<lido-text visible="true" z-index="1" height="114px" id="data" string="${args.word}" font-family="'Baloo Bhai 2'" font-color="black" font-size="144px"  bg-color="transparent" y="23%" x="-203px"	onEntry="this.fontWeight='700';this.position='relative';" ></lido-text>-->
-	<lido-cell visible="true" layout="col" height="84%" width="95%" bg-color="transparent" margin="5px -126px -107px 0px">
-		<lido-cell visible="true" id="xx" layout="row" height="auto" width="907px" bg-color="#FFF5BB" onEntry="this.align-items='center';this.justify-content='space-evenly';this.border='2px solid #FFB612';this.border-radius='16px';">
-			<lido-cell layout="row" id="blank" visible="true" z-index="2" height="200px" width="200px" onEntry="this.align-items='center';this.justify-content='center';">
-		
-			<lido-text visible="true" string="_" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 	onEntry="this.fontWeight='700';" ></lido-text>
-			<lido-text visible="true" string="${args.letter1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 	onEntry="this.fontWeight='700';" ></lido-text>
-			<lido-text visible="true" string="${args.letter2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 	onEntry="this.fontWeight='700';" ></lido-text>
-			</lido-cell>
-			<lido-cell visible="true" height="330px" width="330px">
-			<lido-image visible="true" heigth="auto"  width="auto" src="${args.img}"></lido-image>		
-		</lido-cell>
-	</lido-cell>
-	<lido-cell visible="true" height="40%" width="79%"  layout="row" >
-		<lido-text visible="true" type="click" value="${args.option1}" id="option1" tab-index="8" bg-color="#FFAC4C" height="212.4px" width="210px" string="${args.option1}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
-				<lido-text visible="true" disable-speak="true" value="${args.option2}" type="click" id="option2" tab-index="9" bg-color="#FFAC4C" height="212.4px" width="210px" string="${args.option2}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
-				<lido-text visible="true" disable-speak="true" value="${args.option3}" type="click" id="option3" tab-index="10" bg-color="#FFAC4C" height="212.4px" width="210px" string="${args.option3}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
-				<lido-text visible="true" disable-speak="true" value="${args.option4}" type="click" id="option3" tab-index="10" bg-color="#FFAC4C" height="212.4px" width="210px" string="${args.option4}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
-				<lido-text visible="true" disable-speak="true" value="${args.option5}" type="click" id="option3" tab-index="10" bg-color="#FFAC4C" height="212.4px" width="210px" string="${args.option5}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
-				
-				
-	</lido-cell>
-	
-	</lido-cell>
-</lido-container>
+    return `<main>
+   <lido-container disable-speak="true" visible="true" id="lido-container" template-id="mcq"  objective="${args.answer}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/WordBuilding/bgImage.png"  onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='1200';data.z-index='100'; data.boxShadow='0 0 40px #FFC107';this.sleep='300'; this.sleep='400'; data.boxShadow='none';this.sleep='2000';" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="blank.z-index='12';">
+<!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape. 373px,portrait.402px" width="landscape.304px,portrait.398px" x="landscape.0%, portrait.28%" y="landscape.51%, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" >
+			<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+			</lido-avatar>
+			
+	
+		</lido-cell>
+    <lido-text visible="false" z-index="0" tab-index="19"  audio="" id="inst" string="Choose the correct letter to form a word" ></lido-text>
+	<!--	<lido-text visible="true" z-index="1" height="114px" id="data" string="${args.word}" font-family="'Baloo Bhai 2'" font-color="black" font-size="144px"  bg-color="transparent" y="23%" x="-203px"	onEntry="this.fontWeight='700';this.position='relative';" ></lido-text>-->
+	<lido-cell visible="true" layout="col" height="84%" width="95%" bg-color="transparent" margin="5px -126px -107px 0px">
+		<lido-cell visible="true" id="xx" layout="row" height="auto" width="907px" bg-color="#FFF5BB" onEntry="this.align-items='center';this.justify-content='space-evenly';this.border='2px solid #FFB612';this.border-radius='16px';">
+			<lido-cell layout="row" id="blank" visible="true" z-index="2" height="200px" width="200px" onEntry="this.align-items='center';this.justify-content='center';">
+		
+			<lido-text visible="true" string="_" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 	onEntry="this.fontWeight='700';" ></lido-text>
+			<lido-text visible="true" string="${args.letter1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 	onEntry="this.fontWeight='700';" ></lido-text>
+			<lido-text visible="true" string="${args.letter2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 	onEntry="this.fontWeight='700';" ></lido-text>
+			</lido-cell>
+			<lido-cell visible="true" height="330px" width="330px">
+			<lido-image visible="true" heigth="auto"  width="auto" src="${args.img}"></lido-image>		
+		</lido-cell>
+	</lido-cell>
+	<lido-cell visible="true" height="40%" width="79%"  layout="row" >
+		<lido-text visible="true" type="click" value="${args.option1}" id="option1" tab-index="8" bg-color="#FFAC4C" height="212.4px" width="210px" string="${args.option1}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" disable-speak="true" value="${args.option2}" type="click" id="option2" tab-index="9" bg-color="#FFAC4C" height="212.4px" width="210px" string="${args.option2}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" disable-speak="true" value="${args.option3}" type="click" id="option3" tab-index="10" bg-color="#FFAC4C" height="212.4px" width="210px" string="${args.option3}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" disable-speak="true" value="${args.option4}" type="click" id="option3" tab-index="10" bg-color="#FFAC4C" height="212.4px" width="210px" string="${args.option4}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" disable-speak="true" value="${args.option5}" type="click" id="option3" tab-index="10" bg-color="#FFAC4C" height="212.4px" width="210px" string="${args.option5}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				
+				
+	</lido-cell>
+	
+	</lido-cell>
+</lido-container>
   </main>`;
 }