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

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

@@ -0,0 +1,100 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/blender',
+    argTypes: {
+        number: { control: 'text' },
+        isAllowOnlyCorrect: { control: 'boolean' },
+    },
+};
+export default meta;
+export const OrderTractor = {
+    args: {
+        number: '211',
+        isAllowOnlyCorrect: 'true',
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function buildObjectiveFromNumber(num) {
+    num = parseInt(num);
+    const hundreds = Math.floor(num / 100);
+    const tens = Math.floor((num % 100) / 10);
+    const ones = num % 10;
+    const build = (count, value) => {
+        if (count === 0)
+            return "";
+        let s = "";
+        for (let i = 0; i < count; i++) {
+            s += value;
+            if (i < count - 1)
+                s += "|";
+        }
+        return `(${s})`;
+    };
+    const hStr = build(hundreds, "100");
+    const tStr = build(tens, "10");
+    const oStr = build(ones, "1");
+    const objective = [hStr, tStr, oStr].filter(s => s !== "").join(",");
+    return {
+        objective, // same as before
+    };
+}
+function getContainerXml(args) {
+    const { objective } = buildObjectiveFromNumber(args.number);
+    return `
+    <main>
+        <lido-container id="lido-container" visible="true" objective="${objective}" onCorrect="lido-avatar.avatarAnimate='Success'; sentenceText.speak='true'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="sentenceText.speak='true';" is-continue-on-correct="true" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/fill-in-the-blanks/cloud.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-cell id="hundredsDrop" value="100" 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.justifyContent='flex-start';">
+			</lido-cell>
+		</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-cell id="tensDrop" value="10" 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.justifyContent='flex-start';" ></lido-cell>
+		</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-cell id="unitsDrop" value="1" 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.justifyContent='flex-start';"></lido-cell>
+		</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="35px" 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="35px" 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="100px" 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}">
-        <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,52 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/calculator',
+    argTypes: {
+        number1: { control: 'text' },
+        number2: { control: 'text' },
+        symbol: { control: 'text' },
+        isContinueOnCorrect: { control: 'boolean' },
+        isAllowOnlyCorrect: { control: 'boolean' },
+    },
+};
+export default meta;
+export const calculator = {
+    args: {
+        number1: '10',
+        number2: '5',
+        symbol: '+',
+        isContinueOnCorrect: true,
+        isAllowOnlyCorrect: true,
+    },
+    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';" 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.-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 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>`;
 }

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>`;
 }