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

package/dist/collection/stories/Templates/RocketGame/rocketGame.stories.js

@@ -40,6 +40,10 @@ const meta = {
             description: 'Array of colors for the letters',
             defaultValue: ['#F34D08', '#81C127', '#FFC805', '#F55376', '#5D44BD'],
         },
+        isAllowOnlyCorrect: {
+            control: 'boolean',
+            name: 'Allow Only Correct',
+        },
     },
     args: {
         correct: ['h', 'i', 't'],
@@ -49,6 +53,7 @@ const meta = {
         dropImage: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/RocketAssets/Fullalphabet/dropImag.svg'],
         backgroundImage: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/RocketAssets/Fullalphabet/Background_Sky.png'],
         colors: ['#F34D08', '#81C127', '#FFC805', '#F55376', '#5D44BD'],
+        isAllowOnlyCorrect: true,
     },
 };
 export default meta;
@@ -59,10 +64,12 @@ export const Rocket = {
     },
 };
 function getContainerXml(args) {
+    var _a;
     // Extract letters from correct array
     const drags = args.options.slice(0);
     const indexStart = 16;
     const pickedColors = args.colors;
+    const isAllowOnlyCorrect = (_a = args.isAllowOnlyCorrect) !== null && _a !== void 0 ? _a : true;
     // ✅ Dynamic objective
     const objective = args.correct.join(",");
     // ✅ Wing positioning based on DROP elements
@@ -73,9 +80,9 @@ function getContainerXml(args) {
     // create drop elements
     const dropElements = args.correct.map((letter, index) => {
         const marginleft = index === 0 ? -60 : 0;
-        return `
-      <lido-image value="${letter}" string="${letter}" is-slice="true" onEntry="this.padding='0px'; this.margin-left='${marginleft}px'; this.margin-top='8px';" bg-color="transparent" id="drop-image${index + 1}" disable-edit="true" type="drop" tab-index="${9 + index}" visible="true" src="${args.dropImage}" height="landscape.150px, portrait.150px" width="landscape.150px, portrait.125px">
-      </lido-image>
+        return `
+      <lido-image value="${letter}" string="${letter}" is-slice="true" onEntry="this.padding='0px'; this.margin-left='${marginleft}px'; this.margin-top='8px';" bg-color="transparent" id="drop-image${index + 1}" disable-edit="true" type="drop" tab-index="${9 + index}" visible="true" src="${args.dropImage}" height="landscape.150px, portrait.150px" width="landscape.150px, portrait.125px">
+      </lido-image>
     `;
     }).join('');
     // Create drag elements for first row
@@ -83,53 +90,53 @@ function getContainerXml(args) {
         .map((letter, index) => {
         //const pickedColorIndex = Math.floor(Math.random(0,100) * pickedColors.length);
         const color = pickedColors[Math.floor(Math.random() * pickedColors.length)];
-        return `
-      <lido-text bg-color="${color}" string="${letter}" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/RocketAssets/sounds/${letter}.mp3" onTouch="this.speak='true';" onEntry="this.padding='0px'; this.boxShadow='none !important';" font-size="75px" font-color="white" font-family="Baloo Bhai 2" id="${letter}" visible="true" value="${letter}" tab-index="${indexStart + index}" type="drag" disable-edit="true" height="landscape.125px, portrait.150px" width="landscape.100%, portrait.95%">
-      </lido-text>
+        return `
+      <lido-text bg-color="${color}" string="${letter}" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/RocketAssets/sounds/${letter}.mp3" onTouch="this.speak='true';" onEntry="this.padding='0px'; this.boxShadow='none !important';" font-size="75px" font-color="white" font-family="Baloo Bhai 2" id="${letter}" visible="true" value="${letter}" tab-index="${indexStart + index}" type="drag" disable-edit="true" height="landscape.125px, portrait.150px" width="landscape.100%, portrait.95%">
+      </lido-text>
     `;
     })
         .join('');
-    return `
-  <main> 
-       
-      <lido-container id="lido-container" objective="${objective}" show-drop-border="false" tab-index="1" is-allow-only-correct="true" is-continue-on-correct="true" onCorrect="fullRrocket.animation='placeToLeft 2.5s 1s linear'; this.sleep='1000'; heading.speak='true'; " show-check="false" bg-image="${args.backgroundImage}" visible="true" onEntry="this.overflowY='hidden'; this.overflowX='hidden'; this.background-color='transparent';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" after-drop="false" drop-action="infinite-drop">
-          <lido-cell layout="pos" id="pos1" disable-edit="true" tab-index="2" value="pos2" height="305px" width="227px" x="landscape.1270px, portrait.541px" y="landscape.-60px, portrait.250px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
-              <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>
-          <lido-cell layout="pos" value="pos2" tab-index="3" id="pos2" visible="true" height="landscape.305px, portrait.auto " width="landscape.100%, portrait.100%;" y="landscape.-35%, portrait.-12%" x="landscape.23%, portrait.0%" onEntry="this.background-color='transparent'">
-              <lido-image id="board_bg_wordnote" tab-index="4" disable-edit="true" visible="true" src="https://media.githubusercontent.com/media/chimple/bahama/refs/heads/master/assets/games/rocket/textures/board_bg_wordnote.png">
-              </lido-image>
-              <lido-image id="hit_img" tab-index="5" height="170px" width="100%" y="landscape.124%, portrait.360px" x="landscape.-42%, portrait.-36%" disable-edit="true" visible="true" src="${args.TextBackgroundImage}">
-                <lido-cell layout="pos" display="flex" value="pos3" tab-index="3" id="pos3" visible="true" height="landscape.265px, portrait.auto " bg-color="transparent" width="landscape.100%, portrait.100%;" onEntry="this.z-index='1'; this.align-items='center'; this.justify-content='center'; this.display='flex';" y="landscape.0%, portrait.14%" x="landscape.9%, portrait.4%">
-                  <lido-text id="heading" tab-index="6" visible="true" string="${args.letterBoardText}" font-family="'Baloo Bhai 2'" font-color="#fafafa" font-size="landscape.9rem, portrait.10rem" bg-color="transparent" onEntry="this.fontWeight='700'; this.justify-content='center'; this.align-item='center'; this.speak='true';" x="unset" y="unset">
-                  </lido-text>
-                </lido-cell>
-              </lido-image>              
-          </lido-cell>
-
-          <lido-cell layout="row" onEntry="this.position='absolute'; this.justify-content='center'; this.align-items='center';" y="landscape.20%, portrait.40%" tab-index="7" id="fullRrocket" bg-color="transparent" height="landscape.445px, portrait.275px" width="100%" visible="true">
-              <lido-image bg-color="transparent" height="landscape.160px, portrait.160px" id="rockethead_bg_wordnote" tab-index="8" width="landscape.350px, portrait.350px" disable-edit="true" visible="true" src="https://media.githubusercontent.com/media/chimple/bahama/refs/heads/master/assets/games/rocket/textures/rockethead_bg_wordnote.png" margin="landscape.0px 0px 0px 0px, portrait.0">
-              </lido-image>
-			  
-              ${dropElements}
-
-              <lido-image onEntry="this.position='absolute'; this.padding='0px';" height="225px" width="27%"  x="landscape.${wingXLandscape}%, portrait.${wingXPortrait}%" y="landscape.0%, portrait.-24%" tab-index="12" bg-color="transparent" id="wings-image1" disable-edit="true" visible="true" src="https://media.githubusercontent.com/media/chimple/bahama/refs/heads/master/assets/games/rocket/textures/rockethandle_bg_wordnote.png" margin="0">
-              </lido-image>
-              <lido-image onEntry="this.position='absolute'; this.padding='0px';" height="225px" width="27%" x="landscape.${wingXLandscape}%, portrait.${wingXPortrait}%" y="landscape.51%, portrait.45%" tab-index="13" bg-color="transparent" id="wings-image2" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/RocketAssets/Fullalphabet/rockethandle_bg_wordnote%201.png" margin="0">
-              </lido-image>
-
-              <lido-image height="landscape.200px, portrait.200px" width="landscape.6%, portrait.6%" onEntry="this.zIndex='9';" bg-color="transparent" id="rocket-end" disable-edit="true" tab-index="14" margin="landscape.0px -2% 0px -35px, portrait.0px -2% 0px -35px" src="https://media.githubusercontent.com/media/chimple/bahama/refs/heads/master/assets/games/rocket/textures/rocketend_bg_wordnote.png">
-              </lido-image>
-              <lido-image onEntry="this.padding='0px';" height="220px" width="15%" tab-index="15" bg-color="transparent" disable-edit="true" id="fire_image1" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/RocketAssets/Fullalphabet/Fire.png">
-              </lido-image>
-          </lido-cell>
-
-
-          
-          <lido-cell disable-edit="true" layout="wrap" aria-hidden="true" visible="true" width="100%" height="landscape.50px, portrait.0px" margin="landscape.20% 0px 0px 0px, portrait.35% 0px 0px 0px" onEntry="this.place-items='center'; this.padding='0px'; this.gridTemplateColumns='repeat(auto-fill, minmax(111px, auto))';   this.gridTemplateRows='repeat(auto-fit, 146px)';  this.flexWrap='wrap';" bg-color="transparent"  tab-index="29" id="drag-wrap" gap="landscape.4px, portrait.5px">
-              ${dragElements}
-          </lido-cell>
-    </lido-container>
+    return `
+  <main> 
+       
+      <lido-container id="lido-container" objective="${objective}" show-drop-border="false" tab-index="1" is-allow-only-correct="${isAllowOnlyCorrect}" is-continue-on-correct="true" onCorrect="fullRrocket.animation='placeToLeft 2.5s 1s linear'; this.sleep='1000'; heading.speak='true'; " show-check="false" bg-image="${args.backgroundImage}" visible="true" onEntry="this.overflowY='hidden'; this.overflowX='hidden'; this.background-color='transparent';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" after-drop="false" drop-action="infinite-drop">
+          <lido-cell layout="pos" id="pos1" disable-edit="true" tab-index="2" value="pos2" height="305px" width="227px" x="landscape.1270px, portrait.541px" y="landscape.-60px, portrait.250px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
+              <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>
+          <lido-cell layout="pos" value="pos2" tab-index="3" id="pos2" visible="true" height="landscape.305px, portrait.auto " width="landscape.100%, portrait.100%;" y="landscape.-35%, portrait.-12%" x="landscape.23%, portrait.0%" onEntry="this.background-color='transparent'">
+              <lido-image id="board_bg_wordnote" tab-index="4" disable-edit="true" visible="true" src="https://media.githubusercontent.com/media/chimple/bahama/refs/heads/master/assets/games/rocket/textures/board_bg_wordnote.png">
+              </lido-image>
+              <lido-image id="hit_img" tab-index="5" height="170px" width="100%" y="landscape.124%, portrait.360px" x="landscape.-42%, portrait.-36%" disable-edit="true" visible="true" src="${args.TextBackgroundImage}">
+                <lido-cell layout="pos" display="flex" value="pos3" tab-index="3" id="pos3" visible="true" height="landscape.265px, portrait.auto " bg-color="transparent" width="landscape.100%, portrait.100%;" onEntry="this.z-index='1'; this.align-items='center'; this.justify-content='center'; this.display='flex';" y="landscape.0%, portrait.14%" x="landscape.9%, portrait.4%">
+                  <lido-text id="heading" tab-index="6" visible="true" string="${args.letterBoardText}" font-family="'Baloo Bhai 2'" font-color="#fafafa" font-size="landscape.9rem, portrait.10rem" bg-color="transparent" onEntry="this.fontWeight='700'; this.justify-content='center'; this.align-item='center'; this.speak='true';" x="unset" y="unset">
+                  </lido-text>
+                </lido-cell>
+              </lido-image>              
+          </lido-cell>
+
+          <lido-cell layout="row" onEntry="this.position='absolute'; this.justify-content='center'; this.align-items='center';" y="landscape.20%, portrait.40%" tab-index="7" id="fullRrocket" bg-color="transparent" height="landscape.445px, portrait.275px" width="100%" visible="true">
+              <lido-image bg-color="transparent" height="landscape.160px, portrait.160px" id="rockethead_bg_wordnote" tab-index="8" width="landscape.350px, portrait.350px" disable-edit="true" visible="true" src="https://media.githubusercontent.com/media/chimple/bahama/refs/heads/master/assets/games/rocket/textures/rockethead_bg_wordnote.png" margin="landscape.0px 0px 0px 0px, portrait.0">
+              </lido-image>
+			  
+              ${dropElements}
+
+              <lido-image onEntry="this.position='absolute'; this.padding='0px';" height="225px" width="27%"  x="landscape.${wingXLandscape}%, portrait.${wingXPortrait}%" y="landscape.0%, portrait.-24%" tab-index="12" bg-color="transparent" id="wings-image1" disable-edit="true" visible="true" src="https://media.githubusercontent.com/media/chimple/bahama/refs/heads/master/assets/games/rocket/textures/rockethandle_bg_wordnote.png" margin="0">
+              </lido-image>
+              <lido-image onEntry="this.position='absolute'; this.padding='0px';" height="225px" width="27%" x="landscape.${wingXLandscape}%, portrait.${wingXPortrait}%" y="landscape.51%, portrait.45%" tab-index="13" bg-color="transparent" id="wings-image2" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/RocketAssets/Fullalphabet/rockethandle_bg_wordnote%201.png" margin="0">
+              </lido-image>
+
+              <lido-image height="landscape.200px, portrait.200px" width="landscape.6%, portrait.6%" onEntry="this.zIndex='9';" bg-color="transparent" id="rocket-end" disable-edit="true" tab-index="14" margin="landscape.0px -2% 0px -35px, portrait.0px -2% 0px -35px" src="https://media.githubusercontent.com/media/chimple/bahama/refs/heads/master/assets/games/rocket/textures/rocketend_bg_wordnote.png">
+              </lido-image>
+              <lido-image onEntry="this.padding='0px';" height="220px" width="15%" tab-index="15" bg-color="transparent" disable-edit="true" id="fire_image1" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/RocketAssets/Fullalphabet/Fire.png">
+              </lido-image>
+          </lido-cell>
+
+
+          
+          <lido-cell disable-edit="true" layout="wrap" aria-hidden="true" visible="true" width="100%" height="landscape.50px, portrait.0px" margin="landscape.20% 0px 0px 0px, portrait.35% 0px 0px 0px" onEntry="this.place-items='center'; this.padding='0px'; this.gridTemplateColumns='repeat(auto-fill, minmax(111px, auto))';   this.gridTemplateRows='repeat(auto-fit, 146px)';  this.flexWrap='wrap';" bg-color="transparent"  tab-index="29" id="drag-wrap" gap="landscape.4px, portrait.5px">
+              ${dragElements}
+          </lido-cell>
+    </lido-container>
   </main>`;
 }

package/dist/collection/stories/Templates/Tag/tagGame.stories.js

@@ -31,34 +31,34 @@ export const QuestionAndOptions = {
     },
 };
 function getContainerXml(args) {
-    return `<main>
-<lido-container id="lido-container" value="maincontainer" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4}" aria-label="This is a multiple-option question. Select one option from the list." x="0" y="0" z="0" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/tag/Spring.png" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000;pos1.animation='placeToLeft 2.5s linear';this.sleep='2000';" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" is-allow-only-correct="true">
-		<lido-cell id="pos1" layout="landscape.row, portrait.col" height="100%" width="100%" visible="true" bg-color="transparent">
-			<lido-cell layout="landscape.col, portrait.row" id="pos2" disable-edit="true" value="pos2" margin="landscape.0% 4% 41% -3%, portrait.2% 69% 0% 0%" height="landscape.56%, portrait.28%" width="landscape.28%, portrait.38%" x="landscape.-11%, portrait.-5%" y="landscape.-6%, portrait.-39%" aria-hidden="true" z="5" bg-color="transparent" visible="true" onEntry="this.animation='leftToPlace 2.5s linear';">
-				<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 id="pos3" layout="landscape.col, portrait.row" disable-edit="true" value="pos" aria-hidden="true" x="0" y="0" z="0" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="" width="100%" height="100%" onEntry="">
-				<lido-cell id="pos4" layout="pos" disable-edit="true" value="pos" aria-hidden="true" x="0" y="0" z="0" bg-color="transparent" type="" visible="true" audio="" onTouch="" width="100%" height="100%" onEntry="this.animation='rightToPlace 2.5s linear'; this.sleep='2000'">
-					<lido-image width="landscape.87%, portrait.138%" height="landscape.137%, portrait.51%" y="landscape.-16%, portrait.32%" x="landscape.0%, portrait.-23%" custom-style=".redBg{background-color: red !important;} .greenBg{background-color: green !important; color: white !important;}" id="image1" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/tag/truck.png" onEntry="">
-					</lido-image>
-					<lido-image width="landscape.42%, portrait.51%" height="landscape.45%, portrait.23%" y="landscape.23%, portrait.43%" x="landscape.30%, portrait.34%" z="2" id="image2" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/tag/face.png" onEntry="">
-					</lido-image>
-					<lido-text id="text1" visible="true" width="landscape.16%, portrait.25%" height="landscape.9%, portrait.6%" z="3" x="landscape.43%, portrait.46%" y="landscape.23%, portrait.41%" type="drop" value="${args.option1}" isAllowOnlyOneDrop="true" onEntry="this.border='5px dashed black'" bg-color="#fbfbfbcf"></lido-text>
-					<lido-text id="text2" visible="true" width="landscape.16%, portrait.25%" height="landscape.9%, portrait.6%" z="3" x="landscape.59%, portrait.71%" y="landscape.33%, portrait.48%" type="drop" value="${args.option2}" isAllowOnlyOneDrop="true" onEntry="this.border='5px dashed black'" bg-color="#fbfbfbcf"></lido-text>
-					<lido-text id="text3" visible="true" width="landscape.16%, portrait.25%" height="landscape.9%, portrait.6%" z="3" x="landscape.57%, portrait.68%" y="landscape.56%, portrait.59%" type="drop" value="${args.option3}" isAllowOnlyOneDrop="true" onEntry="this.border='5px dashed black'" bg-color="#fbfbfbcf"></lido-text>
-					<lido-text id="text4" visible="true" width="landscape.16%, portrait.25%" height="landscape.9%, portrait.6%" z="3" x="landscape.28%, portrait.24%" y="landscape.54%, portrait.58%" type="drop" value="${args.option4}" isAllowOnlyOneDrop="true" onEntry="this.border='5px dashed black'" bg-color="#fbfbfbcf"></lido-text>
-				</lido-cell>
-			</lido-cell>
-			<lido-cell id="pos5" layout="landscape.col, portrait.row" disable-edit="true" value="pos" aria-hidden="true" x="0%" y="0" z="3" bg-color="transparent" type="" visible="true" audio="" onTouch="" width="landscape.27%, portrait.100%" height="landscape.100%, portrait.27%" onCorrect="" onEntry="this.visibility='hidden'; this.sleep='2500';this.visibility='visible'">
-				<lido-cell id="pos6" layout="landscape.col,portrait.row" disable-edit="true" value="pos" aria-hidden="true" x="landscape.85%, portrait.0%" y="landscape.23%, portrait.87%" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" width="landscape.130%, portrait.102%" height="landscape.59%, portrait.42%" onCorrect="" onEntry="this.align-content='center'; this.gap='2%'">
-					<lido-text id="text5" tab-index="1" height="landscape.16%, portrait.98%" width="landscape.76%, portrait.27%" type="drag" font="'Baloo Bhai 2'" visible="true" fontColor="black" font-size="50px" value="${args.option1}" string="${args.option1}" onTouch="this.speak='true'" bg-color="#DFF2F2" onEntry=" this.fontWeight='400'; this.boaderRadius='2px"></lido-text>
-					<lido-text id="text6" tab-index="2" height="landscape.16%, portrait.98%" width="landscape.76%, portrait.27%" type="drag" font="'Baloo Bhai 2'" visible="true" font-size="50px" value="${args.option2}" string="${args.option2}" onTouch="this.speak='true'" bg-color="#DFF2F2" onEntry=" this.fontWeight='400'; this.boaderRadius='2px'"></lido-text>
-					<lido-text id="text7" tab-index="3" height="landscape.16%, portrait.98%" width="landscape.76%, portrait.27%" type="drag" font="'Baloo Bhai 2'" visible="true" font-size="50px" value="${args.option3}" string="${args.option3}" onTouch="this.speak='true'" bg-color="#DFF2F2" onEntry=" this.fontWeight='400'; this.boaderRadius='2px'"></lido-text>
-					<lido-text id="text8" tab-index="4" height="landscape.16%, portrait.98%" width="landscape.76%, portrait.27%" type="drag" font="'Baloo Bhai 2'" visible="true" font-size="50px" value="${args.option4}" string="${args.option4}" onTouch="this.speak='true'" bg-color="#DFF2F2" onEntry=" this.fontWeight='400'; this.boaderRadius='2px'"></lido-text>
-				</lido-cell>
-			</lido-cell>
-		</lido-cell>
-	</lido-container> 
+    return `<main>
+<lido-container id="lido-container" value="maincontainer" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4}" aria-label="This is a multiple-option question. Select one option from the list." x="0" y="0" z="0" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/tag/Spring.png" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000;pos1.animation='placeToLeft 2.5s linear';this.sleep='2000';" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" is-allow-only-correct="true">
+		<lido-cell id="pos1" layout="landscape.row, portrait.col" height="100%" width="100%" visible="true" bg-color="transparent">
+			<lido-cell layout="landscape.col, portrait.row" id="pos2" disable-edit="true" value="pos2" margin="landscape.0% 4% 41% -3%, portrait.2% 69% 0% 0%" height="landscape.56%, portrait.28%" width="landscape.28%, portrait.38%" x="landscape.-11%, portrait.-5%" y="landscape.-6%, portrait.-39%" aria-hidden="true" z="5" bg-color="transparent" visible="true" onEntry="this.animation='leftToPlace 2.5s linear';">
+				<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 id="pos3" layout="landscape.col, portrait.row" disable-edit="true" value="pos" aria-hidden="true" x="0" y="0" z="0" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="" width="100%" height="100%" onEntry="">
+				<lido-cell id="pos4" layout="pos" disable-edit="true" value="pos" aria-hidden="true" x="0" y="0" z="0" bg-color="transparent" type="" visible="true" audio="" onTouch="" width="100%" height="100%" onEntry="this.animation='rightToPlace 2.5s linear'; this.sleep='2000'">
+					<lido-image width="landscape.87%, portrait.138%" height="landscape.137%, portrait.51%" y="landscape.-16%, portrait.32%" x="landscape.0%, portrait.-23%" custom-style=".redBg{background-color: red !important;} .greenBg{background-color: green !important; color: white !important;}" id="image1" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/tag/truck.png" onEntry="">
+					</lido-image>
+					<lido-image width="landscape.42%, portrait.51%" height="landscape.45%, portrait.23%" y="landscape.23%, portrait.43%" x="landscape.30%, portrait.34%" z="2" id="image2" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/tag/face.png" onEntry="">
+					</lido-image>
+					<lido-text id="text1" visible="true" width="landscape.16%, portrait.25%" height="landscape.9%, portrait.6%" z="3" x="landscape.43%, portrait.46%" y="landscape.23%, portrait.41%" type="drop" value="${args.option1}" isAllowOnlyOneDrop="true" onEntry="this.border='5px dashed black'" bg-color="#fbfbfbcf"></lido-text>
+					<lido-text id="text2" visible="true" width="landscape.16%, portrait.25%" height="landscape.9%, portrait.6%" z="3" x="landscape.59%, portrait.71%" y="landscape.33%, portrait.48%" type="drop" value="${args.option2}" isAllowOnlyOneDrop="true" onEntry="this.border='5px dashed black'" bg-color="#fbfbfbcf"></lido-text>
+					<lido-text id="text3" visible="true" width="landscape.16%, portrait.25%" height="landscape.9%, portrait.6%" z="3" x="landscape.57%, portrait.68%" y="landscape.56%, portrait.59%" type="drop" value="${args.option3}" isAllowOnlyOneDrop="true" onEntry="this.border='5px dashed black'" bg-color="#fbfbfbcf"></lido-text>
+					<lido-text id="text4" visible="true" width="landscape.16%, portrait.25%" height="landscape.9%, portrait.6%" z="3" x="landscape.28%, portrait.24%" y="landscape.54%, portrait.58%" type="drop" value="${args.option4}" isAllowOnlyOneDrop="true" onEntry="this.border='5px dashed black'" bg-color="#fbfbfbcf"></lido-text>
+				</lido-cell>
+			</lido-cell>
+			<lido-cell id="pos5" layout="landscape.col, portrait.row" disable-edit="true" value="pos" aria-hidden="true" x="0%" y="0" z="3" bg-color="transparent" type="" visible="true" audio="" onTouch="" width="landscape.27%, portrait.100%" height="landscape.100%, portrait.27%" onCorrect="" onEntry="this.visibility='hidden'; this.sleep='2500';this.visibility='visible'">
+				<lido-cell id="pos6" layout="landscape.col,portrait.row" disable-edit="true" value="pos" aria-hidden="true" x="landscape.85%, portrait.0%" y="landscape.23%, portrait.87%" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" width="landscape.130%, portrait.102%" height="landscape.59%, portrait.42%" onCorrect="" onEntry="this.align-content='center'; this.gap='2%'">
+					<lido-text id="text5" tab-index="1" height="landscape.16%, portrait.98%" width="landscape.76%, portrait.27%" type="drag" font="'Baloo Bhai 2'" visible="true" fontColor="black" font-size="50px" value="${args.option1}" string="${args.option1}" onTouch="this.speak='true'" bg-color="#DFF2F2" onEntry=" this.fontWeight='400'; this.boaderRadius='2px"></lido-text>
+					<lido-text id="text6" tab-index="2" height="landscape.16%, portrait.98%" width="landscape.76%, portrait.27%" type="drag" font="'Baloo Bhai 2'" visible="true" font-size="50px" value="${args.option2}" string="${args.option2}" onTouch="this.speak='true'" bg-color="#DFF2F2" onEntry=" this.fontWeight='400'; this.boaderRadius='2px'"></lido-text>
+					<lido-text id="text7" tab-index="3" height="landscape.16%, portrait.98%" width="landscape.76%, portrait.27%" type="drag" font="'Baloo Bhai 2'" visible="true" font-size="50px" value="${args.option3}" string="${args.option3}" onTouch="this.speak='true'" bg-color="#DFF2F2" onEntry=" this.fontWeight='400'; this.boaderRadius='2px'"></lido-text>
+					<lido-text id="text8" tab-index="4" height="landscape.16%, portrait.98%" width="landscape.76%, portrait.27%" type="drag" font="'Baloo Bhai 2'" visible="true" font-size="50px" value="${args.option4}" string="${args.option4}" onTouch="this.speak='true'" bg-color="#DFF2F2" onEntry=" this.fontWeight='400'; this.boaderRadius='2px'"></lido-text>
+				</lido-cell>
+			</lido-cell>
+		</lido-cell>
+	</lido-container> 
 </main>`;
 }

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

@@ -29,49 +29,49 @@ export const arrangeLetters = {
     },
 };
 function getContainerXml(args) {
-    return `<main>
-<lido-container visible="true" objective="${args.answers}" is-continue-on-correct="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/bg-image.png" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.sleep='1000'; this.slideAnimation='true';">
-
-	<!-- Chimple Avatar -->
-	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.372px,portrait.476px" width="landscape.366px,portrait.467px" x="landscape.71%, portrait.52%" y="landscape.105px, portrait.66%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
-		<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" bg-color="transparent">
-		</lido-avatar>
-		<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/Shadow.png" bg-color="transparent" width="200px" height="44px" x="landscape.84px,portrait.125px" y="landscape.310px,portrait.400px" alt-text="{shadowImgae}">
-		</lido-image>
-	</lido-cell>
-
-	<lido-cell visible="true" layout="col" width="100%" height="100%" bg-color="transparent">
-		<lido-text visible="true" width="70%" height="landscape.10%, portrait.5%" bg-color="transparent"></lido-text>
-
-		<!-- Question -->
-		<!-- <lido-text visible="true" tab-index="1" width="landscape.70%, portrait.62%" height="10%" string="Reorder the following shapes from the fewest flat faces to the most flat faces." font-size="36px" onEntry="this.fontWeight='600'; this.speak='true';" bg-color="transparent"></lido-text> -->
-
-		<lido-cell visible="true" layout="landscape.col, portrait.row" flex-direction="landscape., portrait.row-reverse" align-items="landscape.center, portrait.start" width="100%" height="landscape.80%,portrait.91%" bg-color="transparent" margin="landscape.-115px 0px 0px 0px,portrait.-92px 0px 0px 0px" onEntry="this.gap='10px';this.flex-shrink='0';">
-
-			<!-- Question Image -->
-			<lido-cell visible="true" height="450px" width="450px" border-radius='7px' bg-color="white" onEntry="this.display='flex'; this.align-items='center'; this.justifyContent='center';">
-				<lido-image visible="true" width="landscape.450px,portrait.450px" height="landscape.450px,portrait.450px" border-radius='7px' bg-color="white" src="${args.image}"></lido-image>
-			</lido-cell>
-
-			<!-- Slide Elements -->
-			<lido-cell visible="true" layout="landscape.row, portrait.col" width="landscape.98%, portrait.21%" height="landscape.37%, portrait.100%" bg-color="#FBCAB5" border-radius="landscape.16px 16px 0 0, portrait.0 16px 16px 0" padding="landscape.0px, portrait.20px 40px" onEntry="this.gap='0px';">
+    return `<main>
+<lido-container visible="true" objective="${args.answers}" is-continue-on-correct="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/bg-image.png" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.sleep='1000'; this.slideAnimation='true';">
+
+	<!-- Chimple Avatar -->
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.372px,portrait.476px" width="landscape.366px,portrait.467px" x="landscape.71%, portrait.52%" y="landscape.105px, portrait.66%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
+		<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" bg-color="transparent">
+		</lido-avatar>
+		<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/Shadow.png" bg-color="transparent" width="200px" height="44px" x="landscape.84px,portrait.125px" y="landscape.310px,portrait.400px" alt-text="{shadowImgae}">
+		</lido-image>
+	</lido-cell>
+
+	<lido-cell visible="true" layout="col" width="100%" height="100%" bg-color="transparent">
+		<lido-text visible="true" width="70%" height="landscape.10%, portrait.5%" bg-color="transparent"></lido-text>
+
+		<!-- Question -->
+		<!-- <lido-text visible="true" tab-index="1" width="landscape.70%, portrait.62%" height="10%" string="Reorder the following shapes from the fewest flat faces to the most flat faces." font-size="36px" onEntry="this.fontWeight='600'; this.speak='true';" bg-color="transparent"></lido-text> -->
+
+		<lido-cell visible="true" layout="landscape.col, portrait.row" flex-direction="landscape., portrait.row-reverse" align-items="landscape.center, portrait.start" width="100%" height="landscape.80%,portrait.91%" bg-color="transparent" margin="landscape.-115px 0px 0px 0px,portrait.-92px 0px 0px 0px" onEntry="this.gap='10px';this.flex-shrink='0';">
+
+			<!-- Question Image -->
+			<lido-cell visible="true" height="450px" width="450px" border-radius='7px' bg-color="white" onEntry="this.display='flex'; this.align-items='center'; this.justifyContent='center';">
+				<lido-image visible="true" width="landscape.450px,portrait.450px" height="landscape.450px,portrait.450px" border-radius='7px' bg-color="white" src="${args.image}"></lido-image>
+			</lido-cell>
+
+			<!-- Slide Elements -->
+			<lido-cell visible="true" layout="landscape.row, portrait.col" width="landscape.98%, portrait.21%" height="landscape.37%, portrait.100%" bg-color="#FBCAB5" border-radius="landscape.16px 16px 0 0, portrait.0 16px 16px 0" padding="landscape.0px, portrait.20px 40px" onEntry="this.gap='0px';">
 			${args.options
-        .map((option, index) => `	
-			<lido-cell visible="true" tab-index="${index + 1}" audio="" layout="col" bg-color="white" width="landscape.116px, portrait.116px" height="landscape.100px, portrait.78px" value="${option}" type="slide" onTouch="this.speak='true';" border-radius="6px" onEntry="this.border='2px solid #CACACA'; this.paddingTop='50px';this.flex-shrink='0';">
-					<lido-cell visible="true" layout="pos" width="landscape.44px,portrait.39px" height="landscape.44px,portrait.39px" z="1">
-						<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/Reorder%20button.png"></lido-image>
-					</lido-cell>
-					<!-- <lido-image visible="true" width="landscape., portrait.100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/sphere.png"></lido-image> -->
-					<lido-text visible="true" string="${option}" value="${option}" font-size="140px" onEntry="this.fontWeight='800'; this.textAlign='left'; this.lineHeight='26px';"></lido-text>
-				</lido-cell>
+        .map((option, index) => `	
+			<lido-cell visible="true" tab-index="${index + 1}" audio="" layout="col" bg-color="white" width="landscape.116px, portrait.116px" height="landscape.100px, portrait.78px" value="${option}" type="slide" onTouch="this.speak='true';" border-radius="6px" onEntry="this.border='2px solid #CACACA'; this.paddingTop='50px';this.flex-shrink='0';">
+					<lido-cell visible="true" layout="pos" width="landscape.44px,portrait.39px" height="landscape.44px,portrait.39px" z="1">
+						<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/Reorder%20button.png"></lido-image>
+					</lido-cell>
+					<!-- <lido-image visible="true" width="landscape., portrait.100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/sphere.png"></lido-image> -->
+					<lido-text visible="true" string="${option}" value="${option}" font-size="140px" onEntry="this.fontWeight='800'; this.textAlign='left'; this.lineHeight='26px';"></lido-text>
+				</lido-cell>
 				 `)
-        .join('')}
-				
-				
-				
-			</lido-cell>
-		</lido-cell>
-	</lido-cell>
-</lido-container>
+        .join('')}
+				
+				
+				
+			</lido-cell>
+		</lido-cell>
+	</lido-cell>
+</lido-container>
   </main>`;
 }

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

@@ -32,36 +32,42 @@ function getContainerXml(args) {
     const objective = escapeXml(args.objective);
     const leftValue = escapeXml(args.leftValue);
     const rightValue = escapeXml(args.rightValue);
-    return `
-   <main>
-    <lido-container visible="true" drop-action="move"  objective="${objective}"  equationCheck="$#lefthandle1,$#righthandle1" id="lido-container" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000';" show-Check="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" is-continue-on-correct="true">
-      <!-- Check Button -->
-      <lido-pos id="pos1" disable-edit="true" value="pos1" height="70px" width="150px" x="landscape.1324px,portrait.639px" y="landscape.220px,portrait.28%" aria-hidden="true" z="1" bg-color="transparent" type="" visible="true" audio="col1.mp3" onTouch="" onCorrect="" onEntry="">
-        <lido-text id="lido-checkButton" visible="true" 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>
-      <!-- question -->
-      <lido-text visible="true" height="landscape.100px,portrait.175px" font-family="'Baloo Bhai 2'" font-size="60px" width="landscape.auto,portrait.86%" string="Drop the elements to match the given symbol '${objective}'" font-color="black" bg-color="white" y="landscape.12%,portrait.-4%" onEntry="this.font-weight='600'; this.position='relative';">
-      </lido-text>
-      <lido-balance  tilt="0" operation="add" visible="true" height="landscape.456px,portrait.500px" y="landscape.180px,portrait.6%" width="landscape.1136px,portrait.876px">
-      </lido-balance>
-      <!-- drop Element -->
-      <lido-cell layout="row" visible="true" id="leftparent" heigth="auto" width="auto" bg-Color="transparent" y="landscape.-158px,portrait.-276px" x="landscape.-357px,portrait.-293px" onEntry="this.position='relative';">
-        <lido-text visible="true" id="lefthandle1" tab-index="1" value="" height="126px" width="120px" type="drop"></lido-text>
-      </lido-cell>
-      <lido-cell layout="row" visible="true" id="rightparent" heigth="auto" width="auto" bg-Color="transparent" onEntry="this.position='relative';" y="landscape.-32%,portrait.-26%" x="landscape.22%,portrait.31%">
-        <lido-text visible="true" id="righthandle1" tab-index="2" value="" height="126px" width="120px" type="drop"></lido-text>
-      </lido-cell>
-      <!-- dragElements -->
-      <lido-cell visible="true" height="130px" width="80%" layout="row" onEntry="this.position='relative';" y="-35px">
-        <lido-image  is-slice="true" height="126px" width="188px" audio="" id="drag1" value="${leftValue}" tab-index="3" visible="true"  x="78%" y="0%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/big_fruit.png" type="drag">
-          <lido-text font-family="'Baloo Bhai 2'" height="126px" width="188px" audio="" visible="true" onEntry="this.fontWeight='600';" string="${leftValue}" fontColor="black" font-size="40px"></lido-text>
-        </lido-image>
-        <lido-image is-slice="true"  height="126px" width="188px" audio="" id="drag2" value="${rightValue}" tab-index="4" visible="true"  x="78%" y="0%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/big_fruit.png" type="drag">
-          <lido-text font-family="'Baloo Bhai 2'" height="126px" width="188px" audio="" visible="true" onEntry="this.fontWeight='600';" string="${rightValue}" fontColor="black" font-size="40px"></lido-text>
-        </lido-image>
-      </lido-cell>
-    </lido-container>
-   </main>
+    return `
+   <main>
+    <lido-container visible="true" drop-action="move"  objective="${objective}"  equationCheck="$#lefthandle1,$#righthandle1" id="lido-container" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000';" show-Check="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" is-continue-on-correct="true">
+     <!-- 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.82%, portrait.32%" y="landscape.63%, portrait.78%" 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> 
+      <!-- Check Button -->
+      <lido-pos id="pos1" disable-edit="true" value="pos1" height="70px" width="150px" x="landscape.1324px,portrait.639px" y="landscape.220px,portrait.28%" aria-hidden="true" z="1" bg-color="transparent" type="" visible="true" audio="col1.mp3" onTouch="" onCorrect="" onEntry="">
+        <lido-text id="lido-checkButton" visible="true" bg-color="#5b5bd3" width="150px" height="70px" string="Next" 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>
+      <!-- question -->
+      <lido-text visible="true" tab-index="12" height="landscape.100px,portrait.175px" font-family="'Baloo Bhai 2'" font-size="60px" width="landscape.auto,portrait.86%" string="Drop the elements to match the given symbol '${objective}'" font-color="black" bg-color="white" y="landscape.0%,portrait.-12%" onEntry="this.font-weight='600'; this.position='relative';">
+      </lido-text>
+      <lido-balance  tilt="0" operation="add" visible="true" height="landscape.456px,portrait.500px" y="landscape.4%,portrait.0%" width="landscape.1136px,portrait.876px">
+      <!-- drop Element -->
+      <lido-cell layout="row" visible="true" id="leftparent" height="126px" width="120px" bg-color="transparent" y="landscape.22%,portrait.28%" x="landscape.14%,portrait.12%" onEntry="this.position='relative';">
+        <lido-text visible="true" id="lefthandle1" tab-index="1" value="" height="126px" width="120px" type="drop"></lido-text>
+      </lido-cell>
+      <lido-cell layout="row" visible="true" id="rightparent" height="126px" width="120px" bg-color="transparent" onEntry="this.position='relative';" y="landscape.22%,portrait.28%" x="landscape.65%,portrait.61%">
+        <lido-text visible="true" id="righthandle1" tab-index="2" value="" height="126px" width="120px" type="drop"></lido-text>
+      </lido-cell>
+    </lido-balance>
+      
+      <!-- dragElements -->
+      <lido-cell visible="true" height="130px" width="80%" layout="row" onEntry="this.position='relative';" y="landscape.6%,portrait.4%">
+        <lido-image  is-slice="true" height="126px" width="172px" audio="" id="drag1" value="${leftValue}" tab-index="3" visible="true"  x="78%" y="0%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/big_fruit.png" type="drag">
+          <lido-text font-family="'Baloo Bhai 2'" height="126px" width="120px" audio="" margin="30px 1px 0px 0px" visible="true" onEntry="this.fontWeight='600';" string="${leftValue}" fontColor="black" font-size="40px"></lido-text>
+        </lido-image>
+        <lido-image is-slice="true"  height="126px" width="172px" audio="" id="drag2" value="${rightValue}" tab-index="4" visible="true"  x="78%" y="0%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/big_fruit.png" type="drag">
+          <lido-text font-family="'Baloo Bhai 2'" height="126px" width="120px" audio=""  margin="30px 1px 0px 0px" visible="true" onEntry="this.fontWeight='600';" string="${rightValue}" fontColor="black" font-size="40px"></lido-text>
+        </lido-image>
+      </lido-cell>
+    </lido-container>
+   </main>
   `;
 }

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

@@ -33,44 +33,44 @@ export const QuestionAndOptions = {
     },
 };
 function getContainerXml(args) {
-    const floatCellsXml = args.cells.map(cell => `
-    <lido-cell visible="true" layout="col" width="250px" height="500px" bg-color="transparent" value="${cell.value}">
-        <lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/float/balloon.png" width="100%" height="100%" filter="${cell.filter}">
-        </lido-image>
-        <lido-text visible="true" string="${cell.value}" bg-color="transparent" font-family="'Baloo Bhai 2'" font-size="143px" x="97px" y="50px" onEntry="this.position='absolute'; this.fontWeight='500';">
-        </lido-text>
-    </lido-cell>
+    const floatCellsXml = args.cells.map(cell => `
+    <lido-cell visible="true" layout="col" width="250px" height="500px" bg-color="transparent" value="${cell.value}">
+        <lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/float/balloon.png" width="100%" height="100%" filter="${cell.filter}">
+        </lido-image>
+        <lido-text visible="true" string="${cell.value}" bg-color="transparent" font-family="'Baloo Bhai 2'" font-size="143px" x="97px" y="50px" onEntry="this.position='absolute'; this.fontWeight='500';">
+        </lido-text>
+    </lido-cell>
   `).join('');
-    return `<main>
-    <lido-container id="lido-container" tab-index="1" visible="true" objective="${args.objective}"
-      onCorrect="lido-slide-fill.fill-slide='${args.Increment}'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';"
-      onInCorrect="lido-slide-fill.fill-slide='${args.Decrement}'; lido-avatar.avatarAnimate='Fail'; this.sleep='2000';"
-      is-continue-on-correct="true" show-check="true" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png">
-        <lido-text tab-index="1" visible="false" string="Pop the ${args.objective} balloon"></lido-text>
-        <!-- Chimple Avatar -->
-        <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="-50px" y="landscape.560px, portrait.1220px" aria-hidden="true" z="1" bg-color="transparent" visible="true">
-            <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>
-        
-        <!-- Content -->
-        <lido-cell visible="true" layout="row" width="landscape.100%, portrait.95%" height="100%" z="1" onEntry="this.alignItems='flex-start';">
-
-            <lido-cell visible="true" layout="pos" x="landscape.70px, portrait.50px" y="landscape.360px, portrait.330px" bg-color="transparent">
-              <lido-text visible="true" string="${args.objective}" bg-color="transparent" font-family="'Baloo Bhai 2'" font-size="140px">
-              </lido-text>
-            </lido-cell>
-
-            <lido-slide-fill id="lido-slide-fill" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/float/balloonBeeker.svg" width="landscape.10%, portrait.17%" margin="landscape.0 0 0 35px, portrait.0" height="600px" fill="0" fillDirection="vertical">
-            </lido-slide-fill>
-
-
-            <!-- Float Area -->
-            <lido-float visible="true" width="90%" height="100%" bg-color="transparent">
-                ${floatCellsXml}
-            </lido-float>
-        </lido-cell>
-        
-    </lido-container>
+    return `<main>
+    <lido-container id="lido-container" tab-index="1" visible="true" objective="${args.objective}"
+      onCorrect="lido-slide-fill.fill-slide='${args.Increment}'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';"
+      onInCorrect="lido-slide-fill.fill-slide='${args.Decrement}'; lido-avatar.avatarAnimate='Fail'; this.sleep='2000';"
+      is-continue-on-correct="true" show-check="true" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png">
+        <lido-text tab-index="1" visible="false" string="Pop the ${args.objective} balloon"></lido-text>
+        <!-- Chimple Avatar -->
+        <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="-50px" y="landscape.560px, portrait.1220px" aria-hidden="true" z="1" bg-color="transparent" visible="true">
+            <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>
+        
+        <!-- Content -->
+        <lido-cell visible="true" layout="row" width="landscape.100%, portrait.95%" height="100%" z="1" onEntry="this.alignItems='flex-start';">
+
+            <lido-cell visible="true" layout="pos" x="landscape.70px, portrait.50px" y="landscape.360px, portrait.330px" bg-color="transparent">
+              <lido-text visible="true" string="${args.objective}" bg-color="transparent" font-family="'Baloo Bhai 2'" font-size="140px">
+              </lido-text>
+            </lido-cell>
+
+            <lido-slide-fill id="lido-slide-fill" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/float/balloonBeeker.svg" width="landscape.10%, portrait.17%" margin="landscape.0 0 0 35px, portrait.0" height="600px" fill="0" fillDirection="vertical">
+            </lido-slide-fill>
+
+
+            <!-- Float Area -->
+            <lido-float visible="true" width="90%" height="100%" bg-color="transparent">
+                ${floatCellsXml}
+            </lido-float>
+        </lido-cell>
+        
+    </lido-container>
   </main>`;
 }