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

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

@@ -46,64 +46,64 @@ function buildObjectiveFromNumber(num) {
 }
 function getContainerXml(args) {
     const { objective, hundreds, tens, ones } = buildObjectiveFromNumber(args.number);
-    return `
-    <main>
-        <lido-container id="lido-container" visible="true" template-id="blender" objective="${objective}" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="" is-continue-on-correct="true" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Blender.png" drop-action="infinite-drop" is-allow-only-correct="${args.isAllowOnlyCorrect}">
-
-			<!-- 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.1332px, portrait.-8%" y="landscape.547px, portrait.1%" aria-hidden="true" z="0" 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 layout="pos" bg-color="transparent" visible="true" height="landscape.5px,portrait.70%" width="landscape.7px,portrait.90%" x="landscape.745px, portrait.44%" y="landscape.65px, portrait.8%" >
-				<lido-text visible="true"  value="${args.number}" string="${args.number}" font-family="'Baloo Bhai 2'" font-color="#182A4F" font-size="52px" bg-color="#FFE99B" width="147px" onEntry="this.fontWeight='800';this.border='5px solid #FFC805';this.border-radius='10px';" border-image=""></lido-text>
-			</lido-cell>
-			<lido-cell layout="row" bg-color="transparent" visible="true" height="landscape.60%,portrait.1120px" width="landscape.90%,portrait.900px" gap="1px" margin="landscape.86px 0px 0px 0px,portrait.258px 0px 0px 0px" padding="0px">
-					<!-- Hundreds Place Value -->
-				<lido-cell layout="col" bg-color="transparent" visible="true" height="landscape.506.25px,portrait.1051.8px" width="landscape.720px,portrait.810px" padding="0px">
-					<lido-cell layout="landscape.row,portrait.col" bg-color="#5D44BD" visible="true" height="landscape.85px,portrait.261px" width="landscape.704px,portrait.269px"  margin="landscape.71px 0px 0px 0px,portrait.0">
-						<lido-text visible="true"  value="Hundreds" string="Hundreds" font-family="'Baloo Bhai 2'" font-color="white" font-size="52px" onInCorrect="" onEntry="this.fontWeight='800';" border-image="">
-						</lido-text>
-						<lido-text id="hundreds" height="70px" width="108px" visible="true" value="000" string="000" font-family="'Baloo Bhai 2'" font-color="#182A4F" border-radius="21px" bg-color="white" font-size="52px" onInCorrect="" onEntry="this.fontWeight='800';" border-image="">
-						</lido-text>
-					</lido-cell>
-					<lido-text id="hundredsDrop" value="100" required-drops="${hundreds}" dropAttr="landscape.stackcascade,portrait.verticalstack" is-allow-only-one-drop="false" type="drop" tab-index="1" layout="row" bg-color="white" visible="true" height="landscape.359px,portrait.752px"  width="landscape.698px,portrait.290px" onEntry="this.justify-content='flex-start';">
-					</lido-text>
-				</lido-cell>
-
-				<!-- Tens Place Value -->
-				<lido-cell layout="col" bg-color="transparent" visible="true" height="landscape.506.25px,portrait.1051px" width="landscape.432px,portrait.810px" padding="0px">
-					<lido-cell layout="landscape.row,portrait.col" bg-color="#5D44BD" visible="true" height="landscape.85px,portrait.261px" width="landscape.426px,portrait.269px"  margin="landscape.71px 0px 0px 0px,portrait.0">
-						<lido-text visible="true"  value="Tens" string="Tens" font-family="'Baloo Bhai 2'" font-color="white" font-size="52px" onInCorrect=""  onEntry="this.fontWeight='800';" border-image="">
-						</lido-text>
-						<lido-text id="tens" height="70px" width="77px" visible="true"  value="00" string="00" font-family="'Baloo Bhai 2'" font-color="#182A4F" border-radius="21px" bg-color="white" font-size="52px" onInCorrect="" onEntry="this.fontWeight='800';" border-image="">
-						</lido-text>
-					</lido-cell>
-					<lido-text id="tensDrop" value="10" required-drops="${tens}" dropAttr="landscape.stackcascade,portrait.verticalstack" type="drop" is-allow-only-one-drop="false" tab-index="2" layout="row" bg-color="white" visible="true" 
-				 height="landscape.357px,portrait.752px" width="landscape.414px,portrait.290px" onEntry="this.justify-content='flex-start';" >
-					</lido-text>
-				</lido-cell>
-
-				<!-- Units Place Value -->
-				<lido-cell layout="col" bg-color="transparent" visible="true" height="landscape.506.25px,portrait.1051px" width="landscape.331px,portrait.810" padding="0px">
-					<lido-cell layout="landscape.row,portrait.col" bg-color="#5D44BD" visible="true" height="landscape.85px,portrait.261px" width="landscape.310px,portrait.269px"  margin="landscape.71px 0px 0px 0px,portrait.0">
-						<lido-text visible="true"  value="Units" string="Units" font-family="'Baloo Bhai 2'" font-color="white" font-size="52px"  onInCorrect="" onEntry="this.fontWeight='800';" border-image="">
-						</lido-text>
-						<lido-text id="units" height="70px" width="55px" visible="true"  value="0" string="0" font-family="'Baloo Bhai 2'" font-color="#182A4F" border-radius="21px" bg-color="white" font-size="52px" onInCorrect="" onEntry="this.fontWeight='800';" border-image="">
-						</lido-text>
-					</lido-cell>
-					<lido-text id="unitsDrop" value="1" required-drops="${ones}" dropAttr="landscape.stackcascade,portrait.verticalstack" type="drop" is-allow-only-one-drop="false" tab-index="3" layout="row" bg-color="white" visible="true" height="landscape.360px,portrait.752px" width="landscape.310px,portrait.290px" onEntry="this.justify-content='flex-start';">
-					</lido-text>
-				</lido-cell>
-			</lido-cell>
-
-			<lido-cell layout="row" bg-color="transparent" aria-hidden="true" visible="true" height="landscape.420px,portrait.30%" width="landscape.1451px,portrait.90%"  onEntry="this.z-index='1';">
-				<lido-math-matrix id="hundredsDrag" value="100" tab-index="11" type="drag" rows="10" cols="10" defualtFill="100" leftIndex="false" topIndex="false" clickable="false" activeBgColor="#5D44BD" deactiveBgColor="#5D44BD" border="2px solid #4A3697" height="288px" width="220px" visible="true"></lido-math-matrix>
-				<lido-math-matrix  id="tensDrag" value="10" type="drag" tab-index="12" rows="10" cols="1"  defualtFill="10" leftIndex="false" topIndex="false" clickable="false" activeBgColor="#F57139" deactiveBgColor="#F57139" border="2px solid #F34D08" height="288px" width="300px" visible="true"></lido-math-matrix>
-				<lido-math-matrix id="unitsDrag" value="1" tab-index="13" type="drag" rows="1" cols="1"  defualtFill="100" leftIndex="false" topIndex="false" clickable="false" activeBgColor="#F57139" deactiveBgColor="#F57139" border="2px solid #F34D08" height="288px" width="80px" visible="true"></lido-math-matrix> 
-			</lido-cell>		
-		</lido-container>
-    </main>
+    return `
+    <main>
+        <lido-container id="lido-container" visible="true" template-id="blender" objective="${objective}" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="" is-continue-on-correct="true" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Blender.png" drop-action="infinite-drop" is-allow-only-correct="${args.isAllowOnlyCorrect}">
+
+			<!-- 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.1332px, portrait.-8%" y="landscape.547px, portrait.1%" aria-hidden="true" z="0" 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 layout="pos" bg-color="transparent" visible="true" height="landscape.5px,portrait.70%" width="landscape.7px,portrait.90%" x="landscape.745px, portrait.44%" y="landscape.65px, portrait.8%" >
+				<lido-text visible="true"  value="${args.number}" string="${args.number}" font-family="'Baloo Bhai 2'" font-color="#182A4F" font-size="52px" bg-color="#FFE99B" width="147px" onEntry="this.fontWeight='800';this.border='5px solid #FFC805';this.border-radius='10px';" border-image=""></lido-text>
+			</lido-cell>
+			<lido-cell layout="row" bg-color="transparent" visible="true" height="landscape.60%,portrait.1120px" width="landscape.90%,portrait.900px" gap="1px" margin="landscape.86px 0px 0px 0px,portrait.258px 0px 0px 0px" padding="0px">
+					<!-- Hundreds Place Value -->
+				<lido-cell layout="col" bg-color="transparent" visible="true" height="landscape.506.25px,portrait.1051.8px" width="landscape.720px,portrait.810px" padding="0px">
+					<lido-cell layout="landscape.row,portrait.col" bg-color="#5D44BD" visible="true" height="landscape.85px,portrait.261px" width="landscape.704px,portrait.269px"  margin="landscape.71px 0px 0px 0px,portrait.0">
+						<lido-text visible="true"  value="Hundreds" string="Hundreds" font-family="'Baloo Bhai 2'" font-color="white" font-size="52px" onInCorrect="" onEntry="this.fontWeight='800';" border-image="">
+						</lido-text>
+						<lido-text id="hundreds" height="70px" width="108px" visible="true" value="000" string="000" font-family="'Baloo Bhai 2'" font-color="#182A4F" border-radius="21px" bg-color="white" font-size="52px" onInCorrect="" onEntry="this.fontWeight='800';" border-image="">
+						</lido-text>
+					</lido-cell>
+					<lido-text id="hundredsDrop" value="100" required-drops="${hundreds}" dropAttr="landscape.stackcascade,portrait.verticalstack" is-allow-only-one-drop="false" type="drop" tab-index="1" layout="row" bg-color="white" visible="true" height="landscape.359px,portrait.752px"  width="landscape.698px,portrait.290px" onEntry="this.justify-content='flex-start';">
+					</lido-text>
+				</lido-cell>
+
+				<!-- Tens Place Value -->
+				<lido-cell layout="col" bg-color="transparent" visible="true" height="landscape.506.25px,portrait.1051px" width="landscape.432px,portrait.810px" padding="0px">
+					<lido-cell layout="landscape.row,portrait.col" bg-color="#5D44BD" visible="true" height="landscape.85px,portrait.261px" width="landscape.426px,portrait.269px"  margin="landscape.71px 0px 0px 0px,portrait.0">
+						<lido-text visible="true"  value="Tens" string="Tens" font-family="'Baloo Bhai 2'" font-color="white" font-size="52px" onInCorrect=""  onEntry="this.fontWeight='800';" border-image="">
+						</lido-text>
+						<lido-text id="tens" height="70px" width="77px" visible="true"  value="00" string="00" font-family="'Baloo Bhai 2'" font-color="#182A4F" border-radius="21px" bg-color="white" font-size="52px" onInCorrect="" onEntry="this.fontWeight='800';" border-image="">
+						</lido-text>
+					</lido-cell>
+					<lido-text id="tensDrop" value="10" required-drops="${tens}" dropAttr="landscape.stackcascade,portrait.verticalstack" type="drop" is-allow-only-one-drop="false" tab-index="2" layout="row" bg-color="white" visible="true" 
+				 height="landscape.357px,portrait.752px" width="landscape.414px,portrait.290px" onEntry="this.justify-content='flex-start';" >
+					</lido-text>
+				</lido-cell>
+
+				<!-- Units Place Value -->
+				<lido-cell layout="col" bg-color="transparent" visible="true" height="landscape.506.25px,portrait.1051px" width="landscape.331px,portrait.810" padding="0px">
+					<lido-cell layout="landscape.row,portrait.col" bg-color="#5D44BD" visible="true" height="landscape.85px,portrait.261px" width="landscape.310px,portrait.269px"  margin="landscape.71px 0px 0px 0px,portrait.0">
+						<lido-text visible="true"  value="Units" string="Units" font-family="'Baloo Bhai 2'" font-color="white" font-size="52px"  onInCorrect="" onEntry="this.fontWeight='800';" border-image="">
+						</lido-text>
+						<lido-text id="units" height="70px" width="55px" visible="true"  value="0" string="0" font-family="'Baloo Bhai 2'" font-color="#182A4F" border-radius="21px" bg-color="white" font-size="52px" onInCorrect="" onEntry="this.fontWeight='800';" border-image="">
+						</lido-text>
+					</lido-cell>
+					<lido-text id="unitsDrop" value="1" required-drops="${ones}" dropAttr="landscape.stackcascade,portrait.verticalstack" type="drop" is-allow-only-one-drop="false" tab-index="3" layout="row" bg-color="white" visible="true" height="landscape.360px,portrait.752px" width="landscape.310px,portrait.290px" onEntry="this.justify-content='flex-start';">
+					</lido-text>
+				</lido-cell>
+			</lido-cell>
+
+			<lido-cell layout="row" bg-color="transparent" aria-hidden="true" visible="true" height="landscape.420px,portrait.30%" width="landscape.1451px,portrait.90%"  onEntry="this.z-index='1';">
+				<lido-math-matrix id="hundredsDrag" value="100" tab-index="11" type="drag" rows="10" cols="10" defualtFill="100" leftIndex="false" topIndex="false" clickable="false" activeBgColor="#5D44BD" deactiveBgColor="#5D44BD" border="2px solid #4A3697" height="288px" width="220px" visible="true"></lido-math-matrix>
+				<lido-math-matrix  id="tensDrag" value="10" type="drag" tab-index="12" rows="10" cols="1"  defualtFill="10" leftIndex="false" topIndex="false" clickable="false" activeBgColor="#F57139" deactiveBgColor="#F57139" border="2px solid #F34D08" height="288px" width="300px" visible="true"></lido-math-matrix>
+				<lido-math-matrix id="unitsDrag" value="1" tab-index="13" type="drag" rows="1" cols="1"  defualtFill="100" leftIndex="false" topIndex="false" clickable="false" activeBgColor="#F57139" deactiveBgColor="#F57139" border="2px solid #F34D08" height="288px" width="80px" visible="true"></lido-math-matrix> 
+			</lido-cell>		
+		</lido-container>
+    </main>
   `;
 }

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

@@ -31,49 +31,49 @@ function getContainerXml(args) {
     const allKeys = `${args.buttons}`.split(',');
     const keys = allKeys.map(k => (enabledKeys.includes(k) ? k : `${k}-disable`)).join(',');
     const floatCellsXml = args.cells
-        .map(cell => `
-    <lido-cell visible="true" layout="col" width="180px" height="180px" bg-color="transparent" value="${cell.value.toLowerCase()}" onEntry="this.alignItems='center'; this.justifyContent='center';">
-        <lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/bubble-type/Group1.png" width="100%" height="100%" filter="${cell.filter}">
-        </lido-image>
-        <lido-text visible="true" height="100%" width="100%" string="${cell.value}" bg-color="transparent" font-family="'Baloo Bhai 2'" font-size="120px" font-color="white" onEntry="this.position='absolute'; this.fontWeight='800';">
-        </lido-text>
-    </lido-cell>
+        .map(cell => `
+    <lido-cell visible="true" layout="col" width="180px" height="180px" bg-color="transparent" value="${cell.value.toLowerCase()}" onEntry="this.alignItems='center'; this.justifyContent='center';">
+        <lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/bubble-type/Group1.png" width="100%" height="100%" filter="${cell.filter}">
+        </lido-image>
+        <lido-text visible="true" height="100%" width="100%" string="${cell.value}" bg-color="transparent" font-family="'Baloo Bhai 2'" font-size="120px" font-color="white" onEntry="this.position='absolute'; this.fontWeight='800';">
+        </lido-text>
+    </lido-cell>
   `)
         .join('');
-    return `<main>
-              <lido-container id="lido-container" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" is-continue-on-correct="true" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Bubble%20type.png">
-
-
-                        <lido-text tab-index="1" visible="false" string="Click the bubbled Letter"></lido-text>
-                        <lido-cell visible="true" layout="col" width="100%" height="100%" z="1" onEntry="this.justifyContent='space-between';" bg-color="transparent">
-                                  <!-- Chimple Avatar -->
-                        <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="-20px" y="landscape.230px, portrait.620px" aria-hidden="true" z="9999" bg-color="transparent" visible="true" onEntry="">
-                            <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="462px" width="356px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
-                            </lido-avatar>
-                        </lido-cell>
-                            <!-- Float Area -->
-                            <lido-float visible="true" width="100%" height="56%" bg-color="transparent" float-direction="leftToRight" onEntry="this.pointerEvents='none';">
-                                ${floatCellsXml}
-                            </lido-float>
-                            <lido-keyboard 
-                              visible="true" 
-                              width="90%" 
-                              height="44%" 
-                              type="click" 
-                              bg-color="#f59631" 
-                              keys="${keys}" 
-                              font-size="landscape.50px, portrait.70px" 
-                              onEntry="this.fontWeight='800';" 
-                              font-color="white" 
-                              keyboard-input="true" 
-                              border-radius="10px" 
-                              letter-length="5"
-                              z="99999"
-                              columns="landscape.10, portrait.7"
-                              >
-                            </lido-keyboard>
-                        </lido-cell>
-                        
-              </lido-container>
+    return `<main>
+              <lido-container id="lido-container" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" is-continue-on-correct="true" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Bubble%20type.png">
+
+
+                        <lido-text tab-index="1" visible="false" string="Click the bubbled Letter"></lido-text>
+                        <lido-cell visible="true" layout="col" width="100%" height="100%" z="1" onEntry="this.justifyContent='space-between';" bg-color="transparent">
+                                  <!-- Chimple Avatar -->
+                        <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="-20px" y="landscape.230px, portrait.620px" aria-hidden="true" z="9999" bg-color="transparent" visible="true" onEntry="">
+                            <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="462px" width="356px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+                            </lido-avatar>
+                        </lido-cell>
+                            <!-- Float Area -->
+                            <lido-float visible="true" width="100%" height="56%" bg-color="transparent" float-direction="leftToRight" onEntry="this.pointerEvents='none';">
+                                ${floatCellsXml}
+                            </lido-float>
+                            <lido-keyboard 
+                              visible="true" 
+                              width="90%" 
+                              height="44%" 
+                              type="click" 
+                              bg-color="#f59631" 
+                              keys="${keys}" 
+                              font-size="landscape.50px, portrait.70px" 
+                              onEntry="this.fontWeight='800';" 
+                              font-color="white" 
+                              keyboard-input="true" 
+                              border-radius="10px" 
+                              letter-length="5"
+                              z="99999"
+                              columns="landscape.10, portrait.7"
+                              >
+                            </lido-keyboard>
+                        </lido-cell>
+                        
+              </lido-container>
           </main>`;
 }

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

@@ -24,33 +24,33 @@ export const calculator = {
     },
 };
 function getContainerXml(args) {
-    return `
-   <main>
-    <lido-container visible="true" id="lido-container" objective="" equationCheck="$#numb1,$#symbol,$#numb2" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Calculator.png" onInCorrect="lido-avatar.avatarAnimate='Fail';" is-allow-only-correct="${args.isAllowOnlyCorrect}" onCorrect="lido-avatar.avatarAnimate='Success';answer.updateCalculatorAnswer='true';this.sleep='2500';" is-continue-on-correct="${args.isContinueOnCorrect}" >
-		<lido-text visible="true" z="1" height="100px" width="400px" y="landscape.8%,portrait.-17%" x="landscape.-21%,portrait.0px" font-size="56px" font-color="white" onEntry="this.position='relative';this.font-weight='600';"  string="WRITE HERE"></lido-text>
-		<lido-cell layout="col" visible="true" height="10px" width="254px" bg-color="transparent" z="1" y="landscape.18%,portrait.-15%" x="landscape.-15%,portrait.19%" onEntry="this.align-items='center'; this.jsutifyContent='space-around'; this.position='relative';">
-			<lido-text visible="true" height="100px" width="400px" id="numb1" tab-index="1" font-size="106px" font-color="black" value="${args.number1}" string="${args.number1}" y="" z="1" x="" onEntry="this.position='relative';this.font-weight='900';"></lido-text>
-			<lido-cell layout="row" visible="true" height="100px" width="243px" bg-color="transparent" onEntry="this.position='relative';" x="-61px">
-				<lido-text visible="true" height="100px" width="400px" id="symbol" tab-index="2" font-size="106px" font-color="black" value="${args.symbol}" string="${args.symbol}" y="" z="1" x=""  onEntry="this.position='relative';this.font-weight='900';"></lido-text>
-				<lido-text visible="true" height="100px" width="400px"  id="numb2" tab-index="3"  font-size="106px" font-color="black" value="${args.number2}" string="${args.number2}" y="" z="1" x="" onEntry="this.position='relative';this.font-weight='900';"></lido-text>
-			</lido-cell>
-			<lido-text visible="true" height="40px" width="295px" font-size="106px" font-color="black" string="- - - - -"   z="1" ></lido-text>
-			<lido-text  id="answer" visible="true" tab-index="4" height="84px" width="279px"  font-size="106px" font-color="black" string=" " value="5"   z="1"  onEntry="this.font-weight='900';"></lido-text>
-		</lido-cell>
-
-  <lido-image  visible="true"  width="700px"  height="800px"  onEntry="this.position='absolute';"  y="landscape.3%,portrait.6%"  x="landscape.5%,portrait.6%"  z="0"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/calculator/canvas1.png">
-  </lido-image>
-  <lido-canvas visible="true"  width="700px"  height="700px"  y="landscape.9%,portrait.6%"  x="landscape.3%,portrait.6%"  z="1">
-  </lido-canvas>
-    <lido-cell visible="true" height="700px" width="470px"  onEntry="this.position='relative';" y="landscape.-2%,portrait.23%" x="landscape.456px,portrait.9%" >
-			<lido-calculator id="lidoCalculator" visible="true" height="700px" width="470px"  onEntry="this.position='relative';" ></lido-calculator>
-		</lido-cell>
-    <!-- Chimple Avatar -->
-		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.396px,portrait.400px" width="landscape.298px,portrait.369px" x="landscape.48%, portrait.-2%" y="landscape.60%, 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-container>
-   </main>
+    return `
+   <main>
+    <lido-container visible="true" id="lido-container" objective="" equationCheck="$#numb1,$#symbol,$#numb2" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Calculator.png" onInCorrect="lido-avatar.avatarAnimate='Fail';" is-allow-only-correct="${args.isAllowOnlyCorrect}" onCorrect="lido-avatar.avatarAnimate='Success';answer.updateCalculatorAnswer='true';this.sleep='2500';" is-continue-on-correct="${args.isContinueOnCorrect}" >
+		<lido-text visible="true" z="1" height="100px" width="400px" y="landscape.8%,portrait.-17%" x="landscape.-21%,portrait.0px" font-size="56px" font-color="white" onEntry="this.position='relative';this.font-weight='600';"  string="WRITE HERE"></lido-text>
+		<lido-cell layout="col" visible="true" height="10px" width="254px" bg-color="transparent" z="1" y="landscape.18%,portrait.-15%" x="landscape.-15%,portrait.19%" onEntry="this.align-items='center'; this.jsutifyContent='space-around'; this.position='relative';">
+			<lido-text visible="true" height="100px" width="400px" id="numb1" tab-index="1" font-size="106px" font-color="black" value="${args.number1}" string="${args.number1}" y="" z="1" x="" onEntry="this.position='relative';this.font-weight='900';"></lido-text>
+			<lido-cell layout="row" visible="true" height="100px" width="243px" bg-color="transparent" onEntry="this.position='relative';" x="-61px">
+				<lido-text visible="true" height="100px" width="400px" id="symbol" tab-index="2" font-size="106px" font-color="black" value="${args.symbol}" string="${args.symbol}" y="" z="1" x=""  onEntry="this.position='relative';this.font-weight='900';"></lido-text>
+				<lido-text visible="true" height="100px" width="400px"  id="numb2" tab-index="3"  font-size="106px" font-color="black" value="${args.number2}" string="${args.number2}" y="" z="1" x="" onEntry="this.position='relative';this.font-weight='900';"></lido-text>
+			</lido-cell>
+			<lido-text visible="true" height="40px" width="295px" font-size="106px" font-color="black" string="- - - - -"   z="1" ></lido-text>
+			<lido-text  id="answer" visible="true" tab-index="4" height="84px" width="279px"  font-size="106px" font-color="black" string=" " value="5"   z="1"  onEntry="this.font-weight='900';"></lido-text>
+		</lido-cell>
+
+  <lido-image  visible="true"  width="700px"  height="800px"  onEntry="this.position='absolute';"  y="landscape.3%,portrait.6%"  x="landscape.5%,portrait.6%"  z="0"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/calculator/canvas1.png">
+  </lido-image>
+  <lido-canvas visible="true"  width="700px"  height="700px"  y="landscape.9%,portrait.6%"  x="landscape.3%,portrait.6%"  z="1">
+  </lido-canvas>
+    <lido-cell visible="true" height="700px" width="470px"  onEntry="this.position='relative';" y="landscape.-2%,portrait.23%" x="landscape.456px,portrait.9%" >
+			<lido-calculator id="lidoCalculator" visible="true" height="700px" width="470px"  onEntry="this.position='relative';" ></lido-calculator>
+		</lido-cell>
+    <!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.396px,portrait.400px" width="landscape.298px,portrait.369px" x="landscape.48%, portrait.-2%" y="landscape.60%, 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-container>
+   </main>
   `;
 }

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

@@ -29,44 +29,44 @@ export const QuestionAndOptions = {
 };
 function getContainerXml(args) {
     const objective = `(${args.correct1.split(',').join('|')}),(${args.correct2.split(',').join('|')}),(${args.correct3.split(',').join('|')})`;
-    return `
-  <main>
-    <lido-container id="lido-container" value="mainContainer1" objective="${objective}" aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" bg-color="#FFB742" 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="true" is-continue-on-correct="true" is-allow-only-correct="false">
-		<!-- Chimple Avatar -->
-      <lido-pos id="pos1" disable-edit="true" value="pos1" height="350px" width="350px" x="1430px" y="500px" aria-hidden="true" z="1" bg-color="transparent" type="" visible="true" audio="col1.mp3" onTouch="" onCorrect="" onEntry="">
-        <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/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
-        </lido-avatar>
-        <lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="186px" height="20px" x="77px" y="305px" alt-text="{shadowImage}">
-        </lido-image>
-      </lido-pos>
-      <!-- Check Button -->
-      <lido-pos id="pos1" disable-edit="true" value="pos1" height="70px" width="150px" x="1500px" y="105px" aria-hidden="true" z="1" bg-color="transparent" type="" visible="true" audio="col1.mp3" onTouch="" onCorrect="" onEntry="">
-        <lido-text id="lido-checkButton" bg-color="#5b5bd3" width="150px" height="70px" string="Check" type="click" font-family="'Baloo 2', serif" font-size="30px" font-color="white" onEntry="this.fontWeight='800'; this.addClass='lido-disable-check-button';"></lido-text>
-      </lido-pos>
-      <lido-row visible="true" bg-color="transparent" width="1500px" height="850px">
-        <lido-col visible="true" type="optionArea" bg-color="transparent" width="300px" height="840px">
+    return `
+  <main>
+    <lido-container id="lido-container" value="mainContainer1" objective="${objective}" aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" bg-color="#FFB742" 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="true" is-continue-on-correct="true" is-allow-only-correct="false">
+		<!-- Chimple Avatar -->
+      <lido-pos id="pos1" disable-edit="true" value="pos1" height="350px" width="350px" x="1430px" y="500px" aria-hidden="true" z="1" bg-color="transparent" type="" visible="true" audio="col1.mp3" onTouch="" onCorrect="" onEntry="">
+        <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/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+        </lido-avatar>
+        <lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="186px" height="20px" x="77px" y="305px" alt-text="{shadowImage}">
+        </lido-image>
+      </lido-pos>
+      <!-- Check Button -->
+      <lido-pos id="pos1" disable-edit="true" value="pos1" height="70px" width="150px" x="1500px" y="105px" aria-hidden="true" z="1" bg-color="transparent" type="" visible="true" audio="col1.mp3" onTouch="" onCorrect="" onEntry="">
+        <lido-text id="lido-checkButton" bg-color="#5b5bd3" width="150px" height="70px" string="Check" type="click" font-family="'Baloo 2', serif" font-size="30px" font-color="white" onEntry="this.fontWeight='800'; this.addClass='lido-disable-check-button';"></lido-text>
+      </lido-pos>
+      <lido-row visible="true" bg-color="transparent" width="1500px" height="850px">
+        <lido-col visible="true" type="optionArea" bg-color="transparent" width="300px" height="840px">
         ${args.options
-        .map((option, index) => `
+        .map((option, index) => `
           <lido-text visible="true" tab-index="${index + 1}" bg-color="white" value="${option}" string="${option}" width="200px" height="80px" font-family="'Baloo 2', serif" font-size="30px" onEntry="this.fontWeight='800'; this.marginBottom='10px';" type="option"></lido-text>`)
-        .join('')}
-        
-        </lido-col>
-        <lido-row visible="true" bg-color="transparent" width="1150px" height="840px">
-          <lido-col id="cate1" visible="true" width="200px" height="700px" onEntry="this.border='2px solid';" bg-color="#0000005e" onTouch="this.addClass='highlight-element'; cate2.removeClass='highlight-element'; cate3.removeClass='highlight-element';">
-            <lido-text tab-index="9" visible="true" width="200px" bg-color="black" font-color="white" string="${args.category1}" font-size="30px" font-family="'Baloo 2', serif" onEntry="this.fontWeight='800';"></lido-text>
-            <lido-col visible="true" id="category1" tab-index="1" width="200px" height="100%" onEntry="this.display='block'; this.overflow='auto'; this.scrollbarWidth='none';" value="${args.correct1}" bg-color="transparent" type="category">
-            </lido-col>
-          </lido-col>
-          <lido-col id="cate2" visible="true" width="200px" height="700px" onEntry="this.border='2px solid';" bg-color="#0000005e" onTouch="this.addClass='highlight-element'; cate1.removeClass='highlight-element'; cate3.removeClass='highlight-element';">
-            <lido-text tab-index="10" visible="true" width="200px" bg-color="black" font-color="white" string="${args.category2}" font-size="30px" font-family="'Baloo 2', serif" onEntry="this.fontWeight='800';"></lido-text>
-            <lido-col visible="true" id="category2" tab-index="2" width="200px" height="100%" onEntry="this.display='block'; this.overflow='auto'; this.scrollbarWidth='none';" value="${args.correct2}" bg-color="transparent" type="category"></lido-col>
-          </lido-col>
-          <lido-col id="cate3" visible="true" width="200px" height="700px" onEntry="this.border='2px solid';" bg-color="#0000005e" onTouch="this.addClass='highlight-element'; cate2.removeClass='highlight-element'; cate1.removeClass='highlight-element';">
-            <lido-text tab-index="11" visible="true" width="200px" bg-color="black" font-color="white" string="${args.category3}" font-size="30px" font-family="'Baloo 2', serif" onEntry="this.fontWeight='800';"></lido-text>
-            <lido-col visible="true" id="category3" tab-index="3" width="200px" height="100%" onEntry="this.display='block'; this.overflow='auto'; this.scrollbarWidth='none';" value="${args.correct3}" bg-color="transparent" type="category"></lido-col>
-          </lido-col>
-        </lido-row>
-      </lido-row>
-    </lido-container>
+        .join('')}
+        
+        </lido-col>
+        <lido-row visible="true" bg-color="transparent" width="1150px" height="840px">
+          <lido-col id="cate1" visible="true" width="200px" height="700px" onEntry="this.border='2px solid';" bg-color="#0000005e" onTouch="this.addClass='highlight-element'; cate2.removeClass='highlight-element'; cate3.removeClass='highlight-element';">
+            <lido-text tab-index="9" visible="true" width="200px" bg-color="black" font-color="white" string="${args.category1}" font-size="30px" font-family="'Baloo 2', serif" onEntry="this.fontWeight='800';"></lido-text>
+            <lido-col visible="true" id="category1" tab-index="1" width="200px" height="100%" onEntry="this.display='block'; this.overflow='auto'; this.scrollbarWidth='none';" value="${args.correct1}" bg-color="transparent" type="category">
+            </lido-col>
+          </lido-col>
+          <lido-col id="cate2" visible="true" width="200px" height="700px" onEntry="this.border='2px solid';" bg-color="#0000005e" onTouch="this.addClass='highlight-element'; cate1.removeClass='highlight-element'; cate3.removeClass='highlight-element';">
+            <lido-text tab-index="10" visible="true" width="200px" bg-color="black" font-color="white" string="${args.category2}" font-size="30px" font-family="'Baloo 2', serif" onEntry="this.fontWeight='800';"></lido-text>
+            <lido-col visible="true" id="category2" tab-index="2" width="200px" height="100%" onEntry="this.display='block'; this.overflow='auto'; this.scrollbarWidth='none';" value="${args.correct2}" bg-color="transparent" type="category"></lido-col>
+          </lido-col>
+          <lido-col id="cate3" visible="true" width="200px" height="700px" onEntry="this.border='2px solid';" bg-color="#0000005e" onTouch="this.addClass='highlight-element'; cate2.removeClass='highlight-element'; cate1.removeClass='highlight-element';">
+            <lido-text tab-index="11" visible="true" width="200px" bg-color="black" font-color="white" string="${args.category3}" font-size="30px" font-family="'Baloo 2', serif" onEntry="this.fontWeight='800';"></lido-text>
+            <lido-col visible="true" id="category3" tab-index="3" width="200px" height="100%" onEntry="this.display='block'; this.overflow='auto'; this.scrollbarWidth='none';" value="${args.correct3}" bg-color="transparent" type="category"></lido-col>
+          </lido-col>
+        </lido-row>
+      </lido-row>
+    </lido-container>
   </main>`;
 }