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

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}">
-        <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}">
+        <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/trace/Underwater.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/trace/Underwater.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

@@ -0,0 +1,48 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/calculator',
+    argTypes: {
+        number1: { control: 'text' },
+        number2: { control: 'text' },
+        symbol: { control: 'text' },
+    },
+};
+export default meta;
+export const calculator = {
+    args: {
+        number1: '10',
+        number2: '5',
+        symbol: '+',
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+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/trace/Sky.png" onInCorrect="lido-avatar.avatarAnimate='Fail';" onCorrect="lido-avatar.avatarAnimate='Success';answer.updatedAnswer='true';this.sleep='2500';" is-continue-on-correct="true" >
+		<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.-12%,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-canvas visible="true" width="700px" heigth="800px" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/calculator/s1.png" y="landscape.10%,portrait.6%" x="landscape.4%,portrait.6%"   ></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 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>`;
 }

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

@@ -92,72 +92,72 @@ export const Categ = {
 function getContainerXml(args) {
     const formatCorrect = (str) => (str.includes(',') ? `(${str.split(',').join('|')})` : str);
     const objective = `${formatCorrect(args.correct1)},${formatCorrect(args.correct2)},${formatCorrect(args.correct3)}`;
-    return `
-  <main>
-   <lido-container id="lido-container" show-next-button="true" show-drop-border="false" tabIndex="0"  value="mainContainer1"   bg-Color="#FFF"  height="100%" width="100%" visible="true" objective="${objective}" show-Check="false" is-Continue-On-Correct="true" after-Drop="false" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';"   onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" is-allow-only-correct="false"  > 
-		
-		<!-- parent cell -->
-		<lido-cell layout="col" visible="true"  height="100%"  width="98%" bgColor="transparent"  margin="landscape.83px 0px 0px 0px, portrait.36px 0px -49px 0px">
-			<!-- Chimple Avatar -->
-			<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="landscape.205px,portrait.195px" width="landscape.209px,portrait.209px" x="landscape.12px,portrait.-17px" y="landscape.68px,portrait.146px" ariaHidden="true" bgColor="transparent" visible="true"  onEntry="">
-				<lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="100%"  width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}">
-				</lido-avatar>
-			</lido-cell>
-
-			<!-- heading -->
-			<lido-text id="heading"  tabIndex="2"  audio="${args.headingAudio}" visible="true" string="${args.heading}" font-family="'Baloo Bhai 2'" fontColor="#323232" font-size="landscape.44px,portrait.32px" bg-Color="transparent" onEntry="this.padding='0px 47px';  this.fontWeight='400'; "   margin="landscape.26px 0px -25px 0px, portrait.80px 0px -62px" >
-			</lido-text>
-			<!-- dropElements -->
-			<lido-cell layout="row" visible="true"  height="landscape.38%,portrait.41%" width="100%" bg-Color="transparent" margin="landscape.7px 0px 0px 0px,portrait.55px 0px -73px 0px"   >
-				<lido-cell id="cate1" z="100"  visible="true"  width="landscape.32%,portrait.30%" height="100%" bg-Color="#E3F5FC"  onEntry="this.border-radius='6px';this.border=' 2px dashed #326B80';this.display='flex';this.flex-direction='column';this.align-items='center';" onTouch="this.addClass='highlight-element'; cate2.removeClass='highlight-element'; cate3.removeClass='highlight-element';">
-					<lido-text visible="true"  audio="${args.category1Audio}" font-family="'Baloo Bhai 2'" font-size="landscape.32px,portrait.32px" string="${args.category1}" bg-Color="transparent" onEntry="this.padding='10px 47px'; this.fontWeight='600';  " ></lido-text>
-					<lido-cell  layout="landscape.wrap,portrait.col" id="category1" scrollbar-width="14px" tab-index="3"  visible="true" value="${args.correct1}" type="category" height="1000px" width="100%" bg-color="#E3F5FC" onEntry="this.padding='23px';this.overflow=' hidden'; this.justify-items='center';  this.grid-template-columns=' repeat(2, 1fr)'; this.gap=' 10px'; this.overflow-y=' auto';" margin="landscape.-15px 0px 0px 0px,portrait.0px" ></lido-cell>
-				</lido-cell>
-				<lido-cell id="cate2" z="100"  visible="true"  width="landscape.32%,portrait.30%" height="100%" bg-Color="#F2EAFC" onEntry="this.border-radius='6px';this.border=' 2px dashed #67428F';this.display='flex';this.flex-direction='column';this.align-items='center';" onTouch="this.addClass='highlight-element'; cate1.removeClass='highlight-element'; cate3.removeClass='highlight-element';">
-					<lido-text visible="true"  audio="${args.category2Audio}" font-family="'Baloo Bhai 2'" font-size="landscape.32px,portrait.32px" string="${args.category2}" bg-Color="transparent" onEntry="this.padding='10px 47px';   this.fontWeight='600'; " ></lido-text>
-					<lido-cell layout="landscape.wrap,portrait.col" id="category2" scrollbar-width="14px" tab-index="4"  visible="true" value="${args.correct2}" type="category" height="1000px" width="100%" bg-color="#F2EAFC" onEntry="this.padding='23px';this.overflow=' hidden'; this.justify-items='center';  this.grid-template-columns=' repeat(2, 1fr)'; this.gap=' 10px'; this.overflow-y=' auto'; this.flex-direction='column';" margin="landscape.-15px 0px 0px 0px,portrait.0px" ></lido-cell>
-				</lido-cell>
-				<lido-cell id="cate3" z="100"  visible="true" width="landscape.32%,portrait.30%" height="100%" bg-Color="#DAF1BC" onEntry="this.border-radius='6px'; this.border=' 2px dashed #799650';this.display='flex';this.flex-direction='column';this.align-items='center';" onTouch="this.addClass='highlight-element'; cate2.removeClass='highlight-element'; cate1.removeClass='highlight-element';">
-					<lido-text visible="true"  audio="${args.category3Audio}" font-family="'Baloo Bhai 2'" font-size="landscape.32px,portrait.32px" string="${args.category3}" bg-Color="transparent" onEntry="this.padding='10px 47px';  this.fontWeight='600'; " ></lido-text>
-					<lido-cell layout="landscape.wrap,portrait.col" id="category3" scrollbar-width="14px" tab-index="5"  visible="true" value="${args.correct2}" type="category" height="1000px" width="100%" bg-color="#DAF1BC" onEntry="this.padding='23px';this.overflow=' hidden'; this.justify-items='center';  this.grid-template-columns=' repeat(2, 1fr)'; this.gap=' 10px'; this.overflow-y=' auto'; this.flex-direction='column'; " margin="landscape.-15px 0px 0px 0px,portrait.0px" ></lido-cell>
-				</lido-cell>
-			</lido-cell>
-			<!-- dragElements -->
-			<lido-cell layout="landscape.row,portrait.wrap" z="0" visible="true" type="optionArea"  height="landscape.32%,portrait.38%" width="landscape.99%,portrait.98%" bg-Color="#FEEDE6"  margin="landscape.-33px 0px 32px 0px, portrait.23px 0px 18px 0px" onEntry=" this.border='1px solid #FAB89C';this.overflow=' hidden'; this.gap='25px'; this.align-items='center'; this.justify-content='center';this.border-radius='6px';">
-
-				${args.image1.length === 0 && args.option1.length === 0 ? '' : `<lido-cell layout="col"   audio="${args.option1Audio}" x="29px" y="-221px"  z="1" onTouch=""  visible="true" type="option"  tab-index="6" id="i1"  value="${args.option1}" height="217px" width="149px" bg-Color="white" onEntry="this.padding='0px';this.flex-shrink='0'; this.box-sizing='unset'; this.align-items='center';this.justify-content='center';this.border-radius='6px';this. box-shadow=' 0px 8px 0px -2px rgba(0, 0, 0, 0.1)'">
-					${args.image1.length === 0 ? '' : `<lido-image visible="true"    height="145px" width="145px" bgColor="transparent"  src="${args.image1}" onEntry="this.pointer-events=' none';this.flex=' 0 0 auto'; this.boxShadow='unset';this.transition = 'transform 0.5s ease';" ></lido-image>`}
-					
-					${args.option1.length === 0 ? '' : `<lido-text visible="true"  height="31px" width="145px" string="${args.option1}" font-family="'Baloo Bhai 2'" font-size="32px" margin="0px 0px 0px 0px" onEntry="this.pointer-events=' none';this.border-radius='0px'; this.fontWeight='500';" bg-Color="white"></lido-text>`}				
-				</lido-cell>`}
-				${args.image2.length === 0 && args.option2.length === 0 ? '' : `<lido-cell layout="col" onTouch=""   audio="${args.option2Audio}" x="29px" y="-221px"  visible="true" type="option"   tab-index="7" id="i2"  value="${args.option2}" height="217px" width="149px" bg-Color="white" onEntry="this.padding='0px';this.flex-shrink='0';this.box-sizing='unset';this.align-items='center';this.justify-content='center';this.border-radius='6px';this. box-shadow=' 0px 8px 0px -2px rgba(0, 0, 0, 0.1)'">
-					${args.image2.length === 0 ? '' : ` <lido-image visible="true"   height="145px" width="145px" bgColor="transparent"  src="${args.image2}" onEntry="this.pointer-events=' none';this.flex=' 0 0 auto';this.boxShadow='unset';this.transition = 'transform 0.5s ease';"></lido-image>`}
-					${args.option2.length === 0 ? '' : ` <lido-text visible="true"  height="31px" width="145px" string="${args.option2}" font-family="'Baloo Bhai 2'" font-size="32px" margin="0px 0px 0px 0px" onEntry="this.pointer-events=' none';this.border-radius='0px'; this.fontWeight='500';" bg-Color="white"></lido-text>`}
-				</lido-cell>`}
-
-
-				${args.image3.length === 0 && args.option3.length === 0 ? '' : `<lido-cell layout="col"  onTouch=""  audio="${args.option3Audio}" x="29px" y="-221px"  visible="true" type="option"  tab-index="8" id="i3"  value="${args.option3}" height="217px" width="149px" bg-Color="white" onEntry="this.padding='0px';this.flex-shrink='0';this.box-sizing='unset';this.align-items='center';this.justify-content='center';this.border-radius='6px';this. box-shadow=' 0px 8px 0px -2px rgba(0, 0, 0, 0.1)'">
-					${args.image3.length === 0 ? '' : `<lido-image visible="true"   height="145px" width="145px" bgColor="transparent"  src="${args.image3}" onEntry="this.pointer-events=' none';this.flex=' 0 0 auto';this.boxShadow='unset';this.transition = 'transform 0.5s ease';" z="5"></lido-image>`}
-					${args.option3.length === 0 ? '' : `<lido-text visible="true"  height="31px" width="145px" string="${args.option3}" font-family="'Baloo Bhai 2'" font-size="32px" margin="0px 0px 0px 0px" onEntry="this.pointer-events=' none';this.border-radius='0px'; this.fontWeight='500';" bg-Color="white"></lido-text>`}
-				</lido-cell>`}
-
-				${args.image4.length === 0 && args.option4.length === 0 ? '' : `<lido-cell layout="col" onTouch=""  audio="${args.option4Audio}" x="29px" y="-221px"  visible="true" type="option"  tab-index="9" id="i4"  value="${args.option4}" height="217px" width="149px" bg-Color="white" onEntry="this.padding='0px';this.flex-shrink='0';this.box-sizing='unset';this.align-items='center';this.justify-content='center';this.border-radius='6px';this. box-shadow=' 0px 8px 0px -2px rgba(0, 0, 0, 0.1)'">
-					${args.image4.length === 0 ? '' : `<lido-image visible="true"  height="145px" width="145px" bgColor="transparent"  src="${args.image4}" onEntry="this.pointer-events=' none';this.flex=' 0 0 auto';this.boxShadow='unset';this.transition = 'transform 0.5s ease';"  z="5"></lido-image>`}
-					${args.option4.length === 0 ? '' : `<lido-text visible="true" onTouch=""   height="31px" width="145px" string="${args.option4}" font-family="'Baloo Bhai 2'" font-size="32px" margin="0px 0px 0px 0px" onEntry="this.pointer-events=' none';this.border-radius='0px'; this.fontWeight='500';" bg-Color="white"></lido-text>`}
-				</lido-cell>`}
-
-				${args.image5.length === 0 && args.option5.length === 0 ? '' : `<lido-cell layout="col" onTouch=""  audio="${args.option5Audio}" x="29px" y="-221px" visible="true" type="option"  tab-index="10" id="i5"  value="${args.option5}" height="217px" width="149px" bg-Color="white" onEntry="this.padding='0px';this.flex-shrink='0';this.box-sizing='unset';this.align-items='center';this.justify-content='center';this.border-radius='6px';this. box-shadow=' 0px 8px 0px -2px rgba(0, 0, 0, 0.1)'">
-					${args.image5.length === 0 ? '' : `<lido-image visible="true"   height="145px" width="145px" bgColor="transparent"  src="${args.image5}" onEntry="this.pointer-events=' none';this.flex=' 0 0 auto';this.boxShadow='unset';this.transition = 'transform 0.5s ease';"  z="5"></lido-image>`}
-					${args.option5.length === 0 ? '' : `<lido-text visible="true" onTouch=""   height="31px" width="145px" string="${args.option5}" font-family="'Baloo Bhai 2'" font-size="32px" margin="0px 0px 0px 0px" onEntry="this.pointer-events=' none';this.border-radius='0px'; this.fontWeight='500';" bg-Color="white"></lido-text>1`}
-				</lido-cell>`}
-
-				${args.image6.length === 0 && args.option6.length === 0 ? '' : `<lido-cell layout="col" onTouch=""  audio="${args.option6Audio}" x="29px" y="-221px"  visible="true" type="option"  tab-index="11" id="i6"  value="${args.option6}" height="217px" width="149px" bg-Color="white" onEntry="this.padding='0px';this.flex-shrink='0';this.box-sizing='unset';this.align-items='center';this.justify-content='center';this.border-radius='6px';this. box-shadow=' 0px 8px 0px -2px rgba(0, 0, 0, 0.1)'">
-					${args.image6.length === 0 ? '' : `<lido-image visible="true"  height="145px" width="145px" bgColor="transparent"  src="${args.image6}" onEntry="this.pointer-events=' none';this.flex=' 0 0 auto';this.boxShadow='unset';this.transition = 'transform 0.5s ease';"  z="5"></lido-image>`}
-					${args.option6.length === 0 ? '' : `<lido-text visible="true" onTouch=""  height="31px" width="145px" string="${args.option6}" font-family="'Baloo Bhai 2'" font-size="32px" margin="0px 0px 0px 0px" onEntry="this.pointer-events=' none';this.border-radius='0px'; this.fontWeight='500';" bg-Color="white"></lido-text>`}
-				</lido-cell>`}
-
-			</lido-cell>
-		</lido-cell>
-	</lido-container>
+    return `
+  <main>
+   <lido-container id="lido-container" show-next-button="true" show-drop-border="false" tabIndex="0"  value="mainContainer1"   bg-Color="#FFF"  height="100%" width="100%" visible="true" objective="${objective}" show-Check="false" is-Continue-On-Correct="true" after-Drop="false" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';"   onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" is-allow-only-correct="false"  > 
+		
+		<!-- parent cell -->
+		<lido-cell layout="col" visible="true"  height="100%"  width="98%" bgColor="transparent"  margin="landscape.83px 0px 0px 0px, portrait.36px 0px -49px 0px">
+			<!-- Chimple Avatar -->
+			<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="landscape.205px,portrait.195px" width="landscape.209px,portrait.209px" x="landscape.12px,portrait.-17px" y="landscape.68px,portrait.146px" ariaHidden="true" bgColor="transparent" visible="true"  onEntry="">
+				<lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="100%"  width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}">
+				</lido-avatar>
+			</lido-cell>
+
+			<!-- heading -->
+			<lido-text id="heading"  tabIndex="2"  audio="${args.headingAudio}" visible="true" string="${args.heading}" font-family="'Baloo Bhai 2'" fontColor="#323232" font-size="landscape.44px,portrait.32px" bg-Color="transparent" onEntry="this.padding='0px 47px';  this.fontWeight='400'; "   margin="landscape.26px 0px -25px 0px, portrait.80px 0px -62px" >
+			</lido-text>
+			<!-- dropElements -->
+			<lido-cell layout="row" visible="true"  height="landscape.38%,portrait.41%" width="100%" bg-Color="transparent" margin="landscape.7px 0px 0px 0px,portrait.55px 0px -73px 0px"   >
+				<lido-cell id="cate1" z="100"  visible="true"  width="landscape.32%,portrait.30%" height="100%" bg-Color="#E3F5FC"  onEntry="this.border-radius='6px';this.border=' 2px dashed #326B80';this.display='flex';this.flex-direction='column';this.align-items='center';" onTouch="this.addClass='highlight-element'; cate2.removeClass='highlight-element'; cate3.removeClass='highlight-element';">
+					<lido-text visible="true"  audio="${args.category1Audio}" font-family="'Baloo Bhai 2'" font-size="landscape.32px,portrait.32px" string="${args.category1}" bg-Color="transparent" onEntry="this.padding='10px 47px'; this.fontWeight='600';  " ></lido-text>
+					<lido-cell  layout="landscape.wrap,portrait.col" id="category1" scrollbar-width="14px" tab-index="3"  visible="true" value="${args.correct1}" type="category" height="1000px" width="100%" bg-color="#E3F5FC" onEntry="this.padding='23px';this.overflow=' hidden'; this.justify-items='center';  this.grid-template-columns=' repeat(2, 1fr)'; this.gap=' 10px'; this.overflow-y=' auto';" margin="landscape.-15px 0px 0px 0px,portrait.0px" ></lido-cell>
+				</lido-cell>
+				<lido-cell id="cate2" z="100"  visible="true"  width="landscape.32%,portrait.30%" height="100%" bg-Color="#F2EAFC" onEntry="this.border-radius='6px';this.border=' 2px dashed #67428F';this.display='flex';this.flex-direction='column';this.align-items='center';" onTouch="this.addClass='highlight-element'; cate1.removeClass='highlight-element'; cate3.removeClass='highlight-element';">
+					<lido-text visible="true"  audio="${args.category2Audio}" font-family="'Baloo Bhai 2'" font-size="landscape.32px,portrait.32px" string="${args.category2}" bg-Color="transparent" onEntry="this.padding='10px 47px';   this.fontWeight='600'; " ></lido-text>
+					<lido-cell layout="landscape.wrap,portrait.col" id="category2" scrollbar-width="14px" tab-index="4"  visible="true" value="${args.correct2}" type="category" height="1000px" width="100%" bg-color="#F2EAFC" onEntry="this.padding='23px';this.overflow=' hidden'; this.justify-items='center';  this.grid-template-columns=' repeat(2, 1fr)'; this.gap=' 10px'; this.overflow-y=' auto'; this.flex-direction='column';" margin="landscape.-15px 0px 0px 0px,portrait.0px" ></lido-cell>
+				</lido-cell>
+				<lido-cell id="cate3" z="100"  visible="true" width="landscape.32%,portrait.30%" height="100%" bg-Color="#DAF1BC" onEntry="this.border-radius='6px'; this.border=' 2px dashed #799650';this.display='flex';this.flex-direction='column';this.align-items='center';" onTouch="this.addClass='highlight-element'; cate2.removeClass='highlight-element'; cate1.removeClass='highlight-element';">
+					<lido-text visible="true"  audio="${args.category3Audio}" font-family="'Baloo Bhai 2'" font-size="landscape.32px,portrait.32px" string="${args.category3}" bg-Color="transparent" onEntry="this.padding='10px 47px';  this.fontWeight='600'; " ></lido-text>
+					<lido-cell layout="landscape.wrap,portrait.col" id="category3" scrollbar-width="14px" tab-index="5"  visible="true" value="${args.correct2}" type="category" height="1000px" width="100%" bg-color="#DAF1BC" onEntry="this.padding='23px';this.overflow=' hidden'; this.justify-items='center';  this.grid-template-columns=' repeat(2, 1fr)'; this.gap=' 10px'; this.overflow-y=' auto'; this.flex-direction='column'; " margin="landscape.-15px 0px 0px 0px,portrait.0px" ></lido-cell>
+				</lido-cell>
+			</lido-cell>
+			<!-- dragElements -->
+			<lido-cell layout="landscape.row,portrait.wrap" z="0" visible="true" type="optionArea"  height="landscape.32%,portrait.38%" width="landscape.99%,portrait.98%" bg-Color="#FEEDE6"  margin="landscape.-33px 0px 32px 0px, portrait.23px 0px 18px 0px" onEntry=" this.border='1px solid #FAB89C';this.overflow=' hidden'; this.gap='25px'; this.align-items='center'; this.justify-content='center';this.border-radius='6px';">
+
+				${args.image1.length === 0 && args.option1.length === 0 ? '' : `<lido-cell layout="col"   audio="${args.option1Audio}" x="29px" y="-221px"  z="1" onTouch=""  visible="true" type="option"  tab-index="6" id="i1"  value="${args.option1}" height="217px" width="149px" bg-Color="white" onEntry="this.padding='0px';this.flex-shrink='0'; this.box-sizing='unset'; this.align-items='center';this.justify-content='center';this.border-radius='6px';this. box-shadow=' 0px 8px 0px -2px rgba(0, 0, 0, 0.1)'">
+					${args.image1.length === 0 ? '' : `<lido-image visible="true"    height="145px" width="145px" bgColor="transparent"  src="${args.image1}" onEntry="this.pointer-events=' none';this.flex=' 0 0 auto'; this.boxShadow='unset';this.transition = 'transform 0.5s ease';" ></lido-image>`}
+					
+					${args.option1.length === 0 ? '' : `<lido-text visible="true"  height="31px" width="145px" string="${args.option1}" font-family="'Baloo Bhai 2'" font-size="32px" margin="0px 0px 0px 0px" onEntry="this.pointer-events=' none';this.border-radius='0px'; this.fontWeight='500';" bg-Color="white"></lido-text>`}				
+				</lido-cell>`}
+				${args.image2.length === 0 && args.option2.length === 0 ? '' : `<lido-cell layout="col" onTouch=""   audio="${args.option2Audio}" x="29px" y="-221px"  visible="true" type="option"   tab-index="7" id="i2"  value="${args.option2}" height="217px" width="149px" bg-Color="white" onEntry="this.padding='0px';this.flex-shrink='0';this.box-sizing='unset';this.align-items='center';this.justify-content='center';this.border-radius='6px';this. box-shadow=' 0px 8px 0px -2px rgba(0, 0, 0, 0.1)'">
+					${args.image2.length === 0 ? '' : ` <lido-image visible="true"   height="145px" width="145px" bgColor="transparent"  src="${args.image2}" onEntry="this.pointer-events=' none';this.flex=' 0 0 auto';this.boxShadow='unset';this.transition = 'transform 0.5s ease';"></lido-image>`}
+					${args.option2.length === 0 ? '' : ` <lido-text visible="true"  height="31px" width="145px" string="${args.option2}" font-family="'Baloo Bhai 2'" font-size="32px" margin="0px 0px 0px 0px" onEntry="this.pointer-events=' none';this.border-radius='0px'; this.fontWeight='500';" bg-Color="white"></lido-text>`}
+				</lido-cell>`}
+
+
+				${args.image3.length === 0 && args.option3.length === 0 ? '' : `<lido-cell layout="col"  onTouch=""  audio="${args.option3Audio}" x="29px" y="-221px"  visible="true" type="option"  tab-index="8" id="i3"  value="${args.option3}" height="217px" width="149px" bg-Color="white" onEntry="this.padding='0px';this.flex-shrink='0';this.box-sizing='unset';this.align-items='center';this.justify-content='center';this.border-radius='6px';this. box-shadow=' 0px 8px 0px -2px rgba(0, 0, 0, 0.1)'">
+					${args.image3.length === 0 ? '' : `<lido-image visible="true"   height="145px" width="145px" bgColor="transparent"  src="${args.image3}" onEntry="this.pointer-events=' none';this.flex=' 0 0 auto';this.boxShadow='unset';this.transition = 'transform 0.5s ease';" z="5"></lido-image>`}
+					${args.option3.length === 0 ? '' : `<lido-text visible="true"  height="31px" width="145px" string="${args.option3}" font-family="'Baloo Bhai 2'" font-size="32px" margin="0px 0px 0px 0px" onEntry="this.pointer-events=' none';this.border-radius='0px'; this.fontWeight='500';" bg-Color="white"></lido-text>`}
+				</lido-cell>`}
+
+				${args.image4.length === 0 && args.option4.length === 0 ? '' : `<lido-cell layout="col" onTouch=""  audio="${args.option4Audio}" x="29px" y="-221px"  visible="true" type="option"  tab-index="9" id="i4"  value="${args.option4}" height="217px" width="149px" bg-Color="white" onEntry="this.padding='0px';this.flex-shrink='0';this.box-sizing='unset';this.align-items='center';this.justify-content='center';this.border-radius='6px';this. box-shadow=' 0px 8px 0px -2px rgba(0, 0, 0, 0.1)'">
+					${args.image4.length === 0 ? '' : `<lido-image visible="true"  height="145px" width="145px" bgColor="transparent"  src="${args.image4}" onEntry="this.pointer-events=' none';this.flex=' 0 0 auto';this.boxShadow='unset';this.transition = 'transform 0.5s ease';"  z="5"></lido-image>`}
+					${args.option4.length === 0 ? '' : `<lido-text visible="true" onTouch=""   height="31px" width="145px" string="${args.option4}" font-family="'Baloo Bhai 2'" font-size="32px" margin="0px 0px 0px 0px" onEntry="this.pointer-events=' none';this.border-radius='0px'; this.fontWeight='500';" bg-Color="white"></lido-text>`}
+				</lido-cell>`}
+
+				${args.image5.length === 0 && args.option5.length === 0 ? '' : `<lido-cell layout="col" onTouch=""  audio="${args.option5Audio}" x="29px" y="-221px" visible="true" type="option"  tab-index="10" id="i5"  value="${args.option5}" height="217px" width="149px" bg-Color="white" onEntry="this.padding='0px';this.flex-shrink='0';this.box-sizing='unset';this.align-items='center';this.justify-content='center';this.border-radius='6px';this. box-shadow=' 0px 8px 0px -2px rgba(0, 0, 0, 0.1)'">
+					${args.image5.length === 0 ? '' : `<lido-image visible="true"   height="145px" width="145px" bgColor="transparent"  src="${args.image5}" onEntry="this.pointer-events=' none';this.flex=' 0 0 auto';this.boxShadow='unset';this.transition = 'transform 0.5s ease';"  z="5"></lido-image>`}
+					${args.option5.length === 0 ? '' : `<lido-text visible="true" onTouch=""   height="31px" width="145px" string="${args.option5}" font-family="'Baloo Bhai 2'" font-size="32px" margin="0px 0px 0px 0px" onEntry="this.pointer-events=' none';this.border-radius='0px'; this.fontWeight='500';" bg-Color="white"></lido-text>1`}
+				</lido-cell>`}
+
+				${args.image6.length === 0 && args.option6.length === 0 ? '' : `<lido-cell layout="col" onTouch=""  audio="${args.option6Audio}" x="29px" y="-221px"  visible="true" type="option"  tab-index="11" id="i6"  value="${args.option6}" height="217px" width="149px" bg-Color="white" onEntry="this.padding='0px';this.flex-shrink='0';this.box-sizing='unset';this.align-items='center';this.justify-content='center';this.border-radius='6px';this. box-shadow=' 0px 8px 0px -2px rgba(0, 0, 0, 0.1)'">
+					${args.image6.length === 0 ? '' : `<lido-image visible="true"  height="145px" width="145px" bgColor="transparent"  src="${args.image6}" onEntry="this.pointer-events=' none';this.flex=' 0 0 auto';this.boxShadow='unset';this.transition = 'transform 0.5s ease';"  z="5"></lido-image>`}
+					${args.option6.length === 0 ? '' : `<lido-text visible="true" onTouch=""  height="31px" width="145px" string="${args.option6}" font-family="'Baloo Bhai 2'" font-size="32px" margin="0px 0px 0px 0px" onEntry="this.pointer-events=' none';this.border-radius='0px'; this.fontWeight='500';" bg-Color="white"></lido-text>`}
+				</lido-cell>`}
+
+			</lido-cell>
+		</lido-cell>
+	</lido-container>
   </main>`;
 }

package/dist/collection/stories/Templates/checker-block/checkerBlock.stories.js

@@ -23,8 +23,8 @@ function getContainerXml(args) {
     const dropMatrices = Object.entries(shape)
         .map(([key, { width, height }], index) => {
         objective.push(`slot${index + 1}`);
-        return `
-        <lido-math-matrix id="drop-${index + 1}" visible="true" width="1600px" height="900px" rows="${width}" cols="${height}" top-index="false" left-index="false" bottom-index="false" active-only-visible="true" activeBgColor="#967ca6" defualtFill="${width * height}" tab-index="${tabIndex++}" type="drop" value="slot${index + 1}" clickable="false" border="2px solid black" font-color="white"></lido-math-matrix>
+        return `
+        <lido-math-matrix id="drop-${index + 1}" visible="true" width="1600px" height="900px" rows="${width}" cols="${height}" top-index="false" left-index="false" bottom-index="false" active-only-visible="true" activeBgColor="#967ca6" defualtFill="${width * height}" tab-index="${tabIndex++}" type="drop" value="slot${index + 1}" clickable="false" border="2px solid black" font-color="white" onInCorrect="lido-avatar.avatarAnimate='Fail';"></lido-math-matrix>
         `;
     })
         .join("\n");
@@ -32,28 +32,34 @@ function getContainerXml(args) {
         .map(([key, { width, height }], index) => {
         const colors = ['#a657fa', '#fa7f98', '#dee60e', '#71f24e', '#55d9a4'];
         const randomColor = colors[Math.floor(Math.random() * colors.length)];
-        return `
-        <lido-math-matrix id="drag-${index + 1}" visible="true" width="1600px" height="900px" rows="${width}" cols="${height}" top-index="false" left-index="false" bottom-index="false" active-only-visible="true" activeBgColor="${randomColor}" defualtFill="${width * height}" tab-index="${tabIndex++}" type="drag" value="slot${index + 1}" clickable="false" border="2px solid black" font-color="white"></lido-math-matrix>`;
+        return `
+        <lido-math-matrix id="drag-${index + 1}" visible="true" width="1600px" height="900px" rows="${width}" cols="${height}" top-index="false" left-index="false" bottom-index="false" active-only-visible="true" activeBgColor="${randomColor}" defualtFill="${width * height}" tab-index="${tabIndex++}" type="drag" value="slot${index + 1}" clickable="false" border="2px solid black" font-color="white" onCorrect="lido-avatar.avatarAnimate='Success';"></lido-math-matrix>`;
     })
         .join("\n");
-    return `<main>
-    <lido-container visible="true" show-next-button="true" dropAttr="math-matrix" objective="${objective}" onCorrect="this.sleep='200'; all.animation='placeToLeft 1.5s linear'; this.sleep='1500';" is-continue-on-correct="true" is-allow-only-correct="true" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/create%20sentence/Spring.png">
-
-	<lido-cell visible="true" id="all" layout="row" height="900px" width="1600px" onEntry="this.justifyContent='unset';">
-    <lido-cell visible="true" layout="col" width="30%" height="90%" bg-color="transparent" z="2">
-			<lido-cell visible="true" layout="random" width="100%" height="100%" bg-color="transparent" x="50px">
-				${dragMatrices}
-			</lido-cell>
-		</lido-cell>
-		<lido-cell id="truck" visible="true" layout="pos" x="0" y="0" z="1" onEntry="this.animation='rightToPlace 1.5s linear';">
-			<lido-image visible="true" width="1500px" height="900px" x="185px" y='20px' src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/CheckerBlock/checkerBlockTruck.svg"></lido-image>
-			<lido-math-matrix id="matrix" visible="true" width="1570px" height="860px" x="800px" y="23px" rows="10" cols="10" top-index="false" left-index="false" bottom-index="false" active-only-visible="false" defualtFill="100" text="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100" border="2px solid #736e6cff" border-radius="0" active-bg-color="#d7d5d9" clickable="false" type="checkerBlock" font-color="#4f2e35"></lido-math-matrix>
-			${dropMatrices}
-			
-		</lido-cell>
-	</lido-cell>
-	
-</lido-container>
+    return `<main>
+    <lido-container visible="true" show-next-button="true" dropAttr="math-matrix" objective="${objective}" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; all.animation='placeToLeft 1.5s linear'; this.sleep='1500';" is-continue-on-correct="true" is-allow-only-correct="true" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/create%20sentence/Spring.png" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';">
+
+    <!-- Chimple Avatar -->
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.448px,portrait.270px" width="landscape.350px,portrait.270px" x="landscape.500px, portrait.-9%" y="landscape.522px, 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" id="all" layout="landscape.row, portrait.col" height="100%" width="100%" flex-direction="landscape.unset, portrait.column-reverse" onEntry="this.justifyContent='unset';" bg-color="transparent">
+    <lido-cell visible="true" layout="col" width="landscape.30%, portrait.90%" height="landscape.90%, portrait.45%" bg-color="transparent" z="2">
+			<lido-cell visible="true" layout="random" width="100%" height="100%" bg-color="transparent">
+				${dragMatrices}
+			</lido-cell>
+		</lido-cell>
+		<lido-cell id="truck" visible="true" layout="pos" x="0" y="0" z="1" onEntry="this.animation='rightToPlace 1.5s linear';">
+			<lido-image visible="true" width="landscape.1500px, portrait.1234px" height="landscape.900px, portrait.850px" x="landscape.185px, portrait.-350px" y='landscape.20px, portrait.60px' src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/CheckerBlock/checkerBlockTruck.svg"></lido-image>
+			<lido-math-matrix id="matrix" visible="true" width="landscape.1570px, portrait.700px" height="landscape.860px, portrait.400px" x="landscape.800px, portrait.135px" y="landscape.23px, portrait.75px" rows="10" cols="10" top-index="false" left-index="false" bottom-index="false" active-only-visible="false" defualtFill="100" text="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100" border="2px solid #736e6cff" border-radius="0" active-bg-color="#d7d5d9" clickable="false" type="checkerBlock" font-color="#4f2e35"></lido-math-matrix>
+			${dropMatrices}
+			
+		</lido-cell>
+	</lido-cell>
+	
+</lido-container>
   </main>`;
 }
 function generateSlots(level) {

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

@@ -18,19 +18,19 @@ export const CheckerBlock = {
 function getContainerXml(args) {
     const shape = generateSlots();
     console.log("shape : ", shape);
-    return `<main>
-    <lido-container visible="true" show-next-button="true" dropAttr="math-matrix" objective="nammadha" onCorrect="this.sleep='120000';">
-	<lido-math-matrix id="matrix3" visible="true" rows="10" cols="10" top-index="false" left-index="false" bottom-index="false" active-only-visible="false" defualtFill="100" active-bg-color="#deb3f2" clickable="false" type="checkerBlock"></lido-math-matrix>
-
-	<lido-cell visible="true" layout="pos" x="0" y="0">
-		<lido-math-matrix id="matrix1" visible="true" width="1600px" height="900px" rows="1" cols="10" top-index="false" left-index="false" bottom-index="false" active-only-visible="true" text="false" activeBgColor="#9a3dc5ff" defualtFill="10" tab-index="1" type="drop" value="nammadha" clickable="false"></lido-math-matrix>
-	</lido-cell>
-
-	<lido-cell visible="true" layout="pos" x="0" y="0">
-		<lido-math-matrix id="matrix4" visible="true" width="1600px" height="900px" rows="2" cols="3" top-index="false" left-index="false" bottom-index="false" active-only-visible="true" text="false" activeBgColor="#9a3dc5ff" defualtFill="9" tab-index="3" type="drag" value="nammadha" clickable="false"></lido-math-matrix>
-	</lido-cell>
-
-</lido-container>
+    return `<main>
+    <lido-container visible="true" show-next-button="true" dropAttr="math-matrix" objective="nammadha" onCorrect="this.sleep='120000';">
+	<lido-math-matrix id="matrix3" visible="true" rows="10" cols="10" top-index="false" left-index="false" bottom-index="false" active-only-visible="false" defualtFill="100" active-bg-color="#deb3f2" clickable="false" type="checkerBlock"></lido-math-matrix>
+
+	<lido-cell visible="true" layout="pos" x="0" y="0">
+		<lido-math-matrix id="matrix1" visible="true" width="1600px" height="900px" rows="1" cols="10" top-index="false" left-index="false" bottom-index="false" active-only-visible="true" text="false" activeBgColor="#9a3dc5ff" defualtFill="10" tab-index="1" type="drop" value="nammadha" clickable="false"></lido-math-matrix>
+	</lido-cell>
+
+	<lido-cell visible="true" layout="pos" x="0" y="0">
+		<lido-math-matrix id="matrix4" visible="true" width="1600px" height="900px" rows="2" cols="3" top-index="false" left-index="false" bottom-index="false" active-only-visible="true" text="false" activeBgColor="#9a3dc5ff" defualtFill="9" tab-index="3" type="drag" value="nammadha" clickable="false"></lido-math-matrix>
+	</lido-cell>
+
+</lido-container>
   </main>`;
 }
 function generateSlots() {