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

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

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

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

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

package/dist/collection/stories/Templates/create-sentence/createSentence.stories.js

@@ -95,79 +95,79 @@ export const CreateSentence = {
     },
 };
 function getContainerXml(args) {
-    return `<main>
-	<lido-container id="lido-container" is-allow-only-correct="true" value="maincontainer" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4},${args.correct5},${args.correct6},${args.correct7},${args.correct8}" x="0" y="0" z="0" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/create%20sentence/Spring.png" visible="true" audio="" onCorrect="lido-avatar.avatarAnimate='Success'; pos5.animation='placeToLeft 2.5s linear';pos2.animation='placeToLeft 2.5s linear'; this.sleep='2000';" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="false"  appendToDropOnCompletion="true">
-		<lido-cell visible="false" id="speak-con">
-			<lido-text id="sentenceText" string="${args.correct}"/>
-		</lido-cell>
-		<lido-cell id="row1" layout="col" height="100%" width="100%" visible="true" bg-Color="transparent">
-			
-
-			<lido-text  show-speak-icon="true" tab-index="1" margin="60px 0px -139px 0px"  visible="true" bg-color="transparent" y="landscape.30px, portrait.79px" onEntry="this.padding='0px 45px'; this.fontWeight='600';  " audio="${args.headingAudio}" width="auto" height="5%" string="${args.heading}" font-family="'Baloo 2', serif" font-size="36px" z="2" >
-
-					</lido-text>
-			<!-- Truck -->
-			<lido-cell id="col" layout="col" 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="pos2" layout="pos" disable-edit="true" value="pos" aria-hidden="true" x="0" y="landscape.29px,portrait.0px" 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.1477px, portrait.200%" height="landscape.139%, portrait.100%" y="landscape.-28%, portrait.-7%" x="landscape.0%, portrait.-73%" id="image1" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/create%20sentence/blueTruck.png" onEntry="">
-					</lido-image>
-					<lido-image width="landscape.16%, portrait.32%" y="landscape.17%, portrait.26%" x="landscape.51%, portrait.35%" z="2" id="image2" disable-edit="true" visible="true" src="${args.questionImg}" onEntry="">
-					</lido-image>
-					<lido-cell layout="wrap" visible="true" width="landscape.50%, portrait.88%" y="landscape.48%, portrait.48%" x="landscape.35%,portrait.7%" z="2" onEntry="this.gridTemplateColumns = 'repeat(4, 1fr)';  this.gridTemplateRows = 'repeat(2, 1fr)';this.position='relative';this.gap='45px';" bg-color="transparent">
-					<lido-text id="drop1" drop-attr="stretch"  value="${args.correct1}" tab-index="2" is-allow-only-one-drop="true" visible="true"  onEntry="this.background='transparent';  this.borderRadius='15px'; " width="150px" height="80px"   type="drop">
-					</lido-text>
-					<lido-text id="drop2"  drop-attr="stretch" value="${args.correct2}" tab-index="3" is-allow-only-one-drop="true"  visible="true" onEntry=" this.background='transparent'; this.borderRadius='15px'; " width="150px" height="80px"   z="2" type="drop">
-					</lido-text>
-					<lido-text id="drop3"  drop-attr="stretch" value="${args.correct3}" tab-index="4" is-allow-only-one-drop="true"  visible="true"  onEntry=" this.background='transparent'; this.borderRadius='15px'; " width="150px" height="80px"   z="2" type="drop">
-					</lido-text>
-					<lido-text id="drop4"  drop-attr="stretch"  value="${args.correct4}" tab-index="5" is-allow-only-one-drop="true" visible="true"  onEntry=" this.background='transparent'; this.borderRadius='15px'; " width="150px" height="80px"   z="2" type="drop">
-					</lido-text>
-					<lido-text id="drop5"  drop-attr="stretch" value="${args.correct5}" tab-index="6" is-allow-only-one-drop="true" visible="true"  onEntry=" this.background='transparent'; this.borderRadius='15px'; " width="150px" height="80px"   z="2" type="drop">
-					</lido-text>
-					<lido-text id="drop6"  drop-attr="stretch" value="${args.correct6}" tab-index="7" is-allow-only-one-drop="true" visible="true"  onEntry=" this.background='transparent'; this.borderRadius='15px'; " width="150px" height="80px"   z="2" type="drop">
-					</lido-text>
-					<lido-text id="drop7"  drop-attr="stretch" value="${args.correct7}" tab-index="8" is-allow-only-one-drop="true" visible="true"  onEntry=" this.background='transparent'; this.borderRadius='15px'; " width="150px" height="80px"   z="2" type="drop">
-					</lido-text>
-					<lido-text id="drop8"  drop-attr="stretch"  value="${args.correct8}" tab-index="9" is-allow-only-one-drop="true" visible="true"  onEntry=" this.background='transparent'; this.borderRadius='15px'; " width="150px" height="80px"   z="2" type="drop">
-					</lido-text>
-				</lido-cell>
-
-				</lido-cell>
-				<lido-cell layout="landscape.flex,portrait.wrap" delay-visible="2650" visible="true" width="landscape.86%, portrait.88%" y="landscape.65%, portrait.62%" x="landscape.4%,portrait.0px" z="2" onEntry="this.gridTemplateColumns = 'repeat(4, 1fr)';  this.gridTemplateRows = 'repeat(2, 1fr)';this.position='relative';this.gap='40px';">
-
-
-					<lido-text id="option1" show-speak-icon="true" audio="${args.option1Audio}" value="${args.option1}" tab-index="10"  visible="true" bg-color="#FCF3B1" onEntry="this.padding='0px 40px';this.borderRadius='25px'; this.boxShadow='unset'; this.fontWeight='800';  " width="auto" height="84px" string="${args.option1}" font-family="'Baloo 2', serif" font-size="24px" z="2" type="drag">
-					</lido-text>
-					<lido-text id="option2" show-speak-icon="true" audio="${args.option2Audio}" value="${args.option2}" tab-index="11"  visible="true" bg-color="#FCF3B1" onEntry="this.padding='0px 40px';this.borderRadius='25px'; this.boxShadow='unset'; this.fontWeight='800'; " width="auto" height="84px" string="${args.option2}" font-family="'Baloo 2', serif" font-size="24px" z="2" type="drag">
-
-					</lido-text>
-					<lido-text id="option3" show-speak-icon="true" audio="${args.option3Audio}" value="${args.option3}" tab-index="12"  visible="true" bg-color="#FCF3B1" onEntry="this.padding='0px 40px';this.borderRadius='25px'; this.boxShadow='unset'; this.fontWeight='800'; " width="auto" height="84px" string="${args.option3}" font-family="'Baloo 2', serif" font-size="24px" z="2" type="drag">
-					</lido-text>
-					<lido-text id="option4" show-speak-icon="true" audio="${args.option4Audio}" value="${args.option4}" tab-index="13"  visible="true" bg-color="#FCF3B1" onEntry="this.padding='0px 40px';this.borderRadius='25px'; this.boxShadow='unset'; this.fontWeight='800'; " width="auto" height="84px" string="${args.option4}" font-family="'Baloo 2', serif" font-size="24px" z="2" type="drag">
-					</lido-text>
-					<lido-text id="option5" show-speak-icon="true" audio="${args.option5Audio}" value="${args.option5}" tab-index="14"  visible="true" bg-color="#FCF3B1" onEntry="this.padding='0px 40px';this.borderRadius='25px'; this.boxShadow='unset'; this.fontWeight='800'; " width="auto" height="84px" string="${args.option5}" font-family="'Baloo 2', serif" font-size="24px" z="2" type="drag">
-					</lido-text>
-					<lido-text id="option6" show-speak-icon="true" audio="${args.option6Audio}" value="${args.option6}" tab-index="15"  visible="true" bg-color="#FCF3B1" onEntry="this.padding='0px 40px';this.borderRadius='25px'; this.boxShadow='unset'; this.fontWeight='800';" width="auto" height="84px" string="${args.option6}" font-family="'Baloo 2', serif" font-size="24px" z="2" type="drag">
-					</lido-text>
-					<lido-text id="option7" show-speak-icon="true" audio="${args.option7Audio}" value="${args.option7}" tab-index="16"  visible="true" bg-color="#FCF3B1" onEntry="this.padding='0px 40px';this.borderRadius='25px'; this.boxShadow='unset'; this.fontWeight='800'; " width="auto" height="84px" string="${args.option7}" font-family="'Baloo 2', serif" font-size="24px" z="2" type="drag">
-					</lido-text>
-					<lido-text id="option8" show-speak-icon="true" audio="${args.option8Audio}" value="${args.option8}" tab-index="17"  visible="true" bg-color="#FCF3B1" onEntry="this.padding='0px 40px';this.borderRadius='25px'; this.boxShadow='unset'; this.fontWeight='800'; " width="auto" height="84px" string="${args.option8}" font-family="'Baloo 2', serif" font-size="24px" z="2" type="drag">
-
-					</lido-text>
-				</lido-cell>
-				<lido-cell layout="row" visible="true" width="landscape.70%, portrait.88%" y="landscape.21%, portrait.42%" x="0%" z="2" onEntry="this.position='relative'">
-					
-				</lido-cell>
-			</lido-cell>
-				<!-- avatar -->
-			<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.408px,portrait.327px" width="landscape.311px,portrait.294px" x="landscape.85%, portrait.640px" y="landscape.43%, portrait.172px" aria-hidden="true" z="-13" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 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-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="landscape.61px,portrait.103px" y="landscape.315px,portrait.353px" alt-text="{shadowImage}">
-				</lido-image>
-			
-			</lido-cell>
-		</lido-cell>
-	</lido-container>	
+    return `<main>
+	<lido-container id="lido-container" is-allow-only-correct="true" value="maincontainer" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4},${args.correct5},${args.correct6},${args.correct7},${args.correct8}" x="0" y="0" z="0" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/create%20sentence/Spring.png" visible="true" audio="" onCorrect="lido-avatar.avatarAnimate='Success'; pos5.animation='placeToLeft 2.5s linear';pos2.animation='placeToLeft 2.5s linear'; this.sleep='2000';" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="false"  appendToDropOnCompletion="true">
+		<lido-cell visible="false" id="speak-con">
+			<lido-text id="sentenceText" string="${args.correct}"/>
+		</lido-cell>
+		<lido-cell id="row1" layout="col" height="100%" width="100%" visible="true" bg-Color="transparent">
+			
+
+			<lido-text  show-speak-icon="true" tab-index="1" margin="60px 0px -139px 0px"  visible="true" bg-color="transparent" y="landscape.30px, portrait.79px" onEntry="this.padding='0px 45px'; this.fontWeight='600';  " audio="${args.headingAudio}" width="auto" height="5%" string="${args.heading}" font-family="'Baloo 2', serif" font-size="36px" z="2" >
+
+					</lido-text>
+			<!-- Truck -->
+			<lido-cell id="col" layout="col" 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="pos2" layout="pos" disable-edit="true" value="pos" aria-hidden="true" x="0" y="landscape.29px,portrait.0px" 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.1477px, portrait.200%" height="landscape.139%, portrait.100%" y="landscape.-28%, portrait.-7%" x="landscape.0%, portrait.-73%" id="image1" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/create%20sentence/blueTruck.png" onEntry="">
+					</lido-image>
+					<lido-image width="landscape.16%, portrait.32%" y="landscape.17%, portrait.26%" x="landscape.51%, portrait.35%" z="2" id="image2" disable-edit="true" visible="true" src="${args.questionImg}" onEntry="">
+					</lido-image>
+					<lido-cell layout="wrap" visible="true" width="landscape.50%, portrait.88%" y="landscape.48%, portrait.48%" x="landscape.35%,portrait.7%" z="2" onEntry="this.gridTemplateColumns = 'repeat(4, 1fr)';  this.gridTemplateRows = 'repeat(2, 1fr)';this.position='relative';this.gap='45px';" bg-color="transparent">
+					<lido-text id="drop1" drop-attr="stretch"  value="${args.correct1}" tab-index="2" is-allow-only-one-drop="true" visible="true"  onEntry="this.background='transparent';  this.borderRadius='15px'; " width="150px" height="80px"   type="drop">
+					</lido-text>
+					<lido-text id="drop2"  drop-attr="stretch" value="${args.correct2}" tab-index="3" is-allow-only-one-drop="true"  visible="true" onEntry=" this.background='transparent'; this.borderRadius='15px'; " width="150px" height="80px"   z="2" type="drop">
+					</lido-text>
+					<lido-text id="drop3"  drop-attr="stretch" value="${args.correct3}" tab-index="4" is-allow-only-one-drop="true"  visible="true"  onEntry=" this.background='transparent'; this.borderRadius='15px'; " width="150px" height="80px"   z="2" type="drop">
+					</lido-text>
+					<lido-text id="drop4"  drop-attr="stretch"  value="${args.correct4}" tab-index="5" is-allow-only-one-drop="true" visible="true"  onEntry=" this.background='transparent'; this.borderRadius='15px'; " width="150px" height="80px"   z="2" type="drop">
+					</lido-text>
+					<lido-text id="drop5"  drop-attr="stretch" value="${args.correct5}" tab-index="6" is-allow-only-one-drop="true" visible="true"  onEntry=" this.background='transparent'; this.borderRadius='15px'; " width="150px" height="80px"   z="2" type="drop">
+					</lido-text>
+					<lido-text id="drop6"  drop-attr="stretch" value="${args.correct6}" tab-index="7" is-allow-only-one-drop="true" visible="true"  onEntry=" this.background='transparent'; this.borderRadius='15px'; " width="150px" height="80px"   z="2" type="drop">
+					</lido-text>
+					<lido-text id="drop7"  drop-attr="stretch" value="${args.correct7}" tab-index="8" is-allow-only-one-drop="true" visible="true"  onEntry=" this.background='transparent'; this.borderRadius='15px'; " width="150px" height="80px"   z="2" type="drop">
+					</lido-text>
+					<lido-text id="drop8"  drop-attr="stretch"  value="${args.correct8}" tab-index="9" is-allow-only-one-drop="true" visible="true"  onEntry=" this.background='transparent'; this.borderRadius='15px'; " width="150px" height="80px"   z="2" type="drop">
+					</lido-text>
+				</lido-cell>
+
+				</lido-cell>
+				<lido-cell layout="landscape.flex,portrait.wrap" delay-visible="2650" visible="true" width="landscape.86%, portrait.88%" y="landscape.65%, portrait.62%" x="landscape.4%,portrait.0px" z="2" onEntry="this.gridTemplateColumns = 'repeat(4, 1fr)';  this.gridTemplateRows = 'repeat(2, 1fr)';this.position='relative';this.gap='40px';">
+
+
+					<lido-text id="option1" show-speak-icon="true" audio="${args.option1Audio}" value="${args.option1}" tab-index="10"  visible="true" bg-color="#FCF3B1" onEntry="this.padding='0px 40px';this.borderRadius='25px'; this.boxShadow='unset'; this.fontWeight='800';  " width="auto" height="84px" string="${args.option1}" font-family="'Baloo 2', serif" font-size="24px" z="2" type="drag">
+					</lido-text>
+					<lido-text id="option2" show-speak-icon="true" audio="${args.option2Audio}" value="${args.option2}" tab-index="11"  visible="true" bg-color="#FCF3B1" onEntry="this.padding='0px 40px';this.borderRadius='25px'; this.boxShadow='unset'; this.fontWeight='800'; " width="auto" height="84px" string="${args.option2}" font-family="'Baloo 2', serif" font-size="24px" z="2" type="drag">
+
+					</lido-text>
+					<lido-text id="option3" show-speak-icon="true" audio="${args.option3Audio}" value="${args.option3}" tab-index="12"  visible="true" bg-color="#FCF3B1" onEntry="this.padding='0px 40px';this.borderRadius='25px'; this.boxShadow='unset'; this.fontWeight='800'; " width="auto" height="84px" string="${args.option3}" font-family="'Baloo 2', serif" font-size="24px" z="2" type="drag">
+					</lido-text>
+					<lido-text id="option4" show-speak-icon="true" audio="${args.option4Audio}" value="${args.option4}" tab-index="13"  visible="true" bg-color="#FCF3B1" onEntry="this.padding='0px 40px';this.borderRadius='25px'; this.boxShadow='unset'; this.fontWeight='800'; " width="auto" height="84px" string="${args.option4}" font-family="'Baloo 2', serif" font-size="24px" z="2" type="drag">
+					</lido-text>
+					<lido-text id="option5" show-speak-icon="true" audio="${args.option5Audio}" value="${args.option5}" tab-index="14"  visible="true" bg-color="#FCF3B1" onEntry="this.padding='0px 40px';this.borderRadius='25px'; this.boxShadow='unset'; this.fontWeight='800'; " width="auto" height="84px" string="${args.option5}" font-family="'Baloo 2', serif" font-size="24px" z="2" type="drag">
+					</lido-text>
+					<lido-text id="option6" show-speak-icon="true" audio="${args.option6Audio}" value="${args.option6}" tab-index="15"  visible="true" bg-color="#FCF3B1" onEntry="this.padding='0px 40px';this.borderRadius='25px'; this.boxShadow='unset'; this.fontWeight='800';" width="auto" height="84px" string="${args.option6}" font-family="'Baloo 2', serif" font-size="24px" z="2" type="drag">
+					</lido-text>
+					<lido-text id="option7" show-speak-icon="true" audio="${args.option7Audio}" value="${args.option7}" tab-index="16"  visible="true" bg-color="#FCF3B1" onEntry="this.padding='0px 40px';this.borderRadius='25px'; this.boxShadow='unset'; this.fontWeight='800'; " width="auto" height="84px" string="${args.option7}" font-family="'Baloo 2', serif" font-size="24px" z="2" type="drag">
+					</lido-text>
+					<lido-text id="option8" show-speak-icon="true" audio="${args.option8Audio}" value="${args.option8}" tab-index="17"  visible="true" bg-color="#FCF3B1" onEntry="this.padding='0px 40px';this.borderRadius='25px'; this.boxShadow='unset'; this.fontWeight='800'; " width="auto" height="84px" string="${args.option8}" font-family="'Baloo 2', serif" font-size="24px" z="2" type="drag">
+
+					</lido-text>
+				</lido-cell>
+				<lido-cell layout="row" visible="true" width="landscape.70%, portrait.88%" y="landscape.21%, portrait.42%" x="0%" z="2" onEntry="this.position='relative'">
+					
+				</lido-cell>
+			</lido-cell>
+				<!-- avatar -->
+			<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.408px,portrait.327px" width="landscape.311px,portrait.294px" x="landscape.85%, portrait.640px" y="landscape.43%, portrait.172px" aria-hidden="true" z="-13" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 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-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="landscape.61px,portrait.103px" y="landscape.315px,portrait.353px" alt-text="{shadowImage}">
+				</lido-image>
+			
+			</lido-cell>
+		</lido-cell>
+	</lido-container>	
 	</main>`;
 }

package/dist/collection/stories/Templates/dragAndDrop/drag-drop.stories.js

@@ -32,74 +32,74 @@ export const QuestionAndOptions = {
     },
 };
 function getContainerXml(args) {
-    return `<main>
-			<lido-container id="lido-container" tab-index="1" value="mainContainer1" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4}" 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="false" is-continue-on-correct="true" after-drop="true">
-				<!-- Audio Icon -->
-				<lido-pos id="pos" disable-edit="true" value="pos" height="100px" width="100px" aria-hidden="true" x="0" y="0" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="" onEntry="">
-					<lido-image id="play" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets//Audio%20icon.png" width="100px" height="100px" bg-color="transparent" x="35px" y="50px" onTouch="this.visibilty='hidden'; pause.visibility='visible'; question.speak='true'; option1.speak='true'; option2.speak='true'; option3.speak='true'; option4.speak='true'; option5.speak='true'; option6.speak='true'; this.visibilty='visible'; pause.visibility='hidden';">
-					</lido-image>
-					<lido-image id="pause" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets//pause.png" width="100px" height="100px" bg-color="transparent" x="35px" y="50px" onTouch="this.stop='true'; this.visibility='hidden'; play.visibility='visible';" onEntry="this.visibility='hidden';">
-					</lido-image>
-				</lido-pos>
-				<!-- Chimple Avatar -->
-				<lido-pos id="pos1" disable-edit="true" value="pos1" height="350px" width="350px" x="landscape.1260px, portrait.265px" y="landscape.530px, portrait.835px" aria-hidden="true" z="1" bg-color="transparent" type="" visible="true" audio="col1.mp3" onTouch="" onCorrect="" onEntry="this.animation='rightToPlace 2.5s linear';">
-					<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>
-				<!-- Background -->
-				<lido-pos id="pos2" disable-edit="true" value="pos2" height="900px" width="1600px" aria-hidden="true" x="0" y="0" z="0" bg-color="transparent" type="" visible="true" audio="col1.mp3" onTouch="" onCorrect="" onEntry="">
-					<lido-image id="image2" disable-edit="true" value="image2" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/backgroundImage.png" z="0" width="1600px" height="900px" onEntry="" alt-text="{backgroundImage}">
-					</lido-image>
-				</lido-pos>
-				<!-- Question -->
-				<lido-pos id="question" value="pos3" visible="true" width="840px" height="135px" x="landscape.370px, portrait.30px" y="100px"  bg-color="transparent" onEntry="this.animation='topToPlace 0.5s linear';">
-					<lido-image id="image3" disable-edit="true" value="image3" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Vector.png" z="0" width="840px" height="100%" alt-text="{question.image}">
-					</lido-image>
-					<lido-text id="textA" width="800px" height="100px" tab-index="2" value="{question.id}" visible="true" string="${args.question}" font-family="'Baloo 2', serif" font-color="black" font-size="40px" bg-color="transparent" onEntry="this.boxShadow='unset'; this.fontWeight='800';" y="20px" x="25px">
-					</lido-text>
-				</lido-pos>
-				<!-- Drop Elements -->
-				<lido-pos id="pos4" disable-edit="true" value="pos4" visible="true" width="landscape.1600px, portrait.600px" height="landscape.300px, portrait.500px" bg-color="transparent" x="landscape.0, portrait.140px" y="landscape.280px, portrait.340px" z="1" onEntry="this.visibility='hidden'; this.sleep='1500'; this.visibility='visible'; this.animation='leftToPlace 0.5s linear';">
-					<!-- Drop Background -->
-					<lido-row id="row" disable-edit="true" display="landscape.flex, portrait.grid" value="row" visible="true" width="landscape.auto, portrait.597px" min-length="2" max-length="6" child-elements-length="4" height="landscape.300px, portrait.500px" x="50%" y="50%" onEntry="this.marginBottom='70px'; this.transform='translate(-50%, -50%)'; this.gap='30px';" >
-						<lido-image id="col" is-slice="true" disable-edit="true" visible="true" height="auto" width="auto"  bg-color="transparent" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dropBackground.png" onEntry="this.padding='51px';">
-							<lido-image id="image4" is-slice="true" disable-edit="true" tab-index="3" visible="true" width="150px" imageSlice="30 fill" flexible-width="false" height="100px" value="apple" z="1" y="149px" type="drop" is-allow-only-one-drop="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dropCard.png" onEntry="this.borderRadius='15px'; this.boxShadow='unset'; " >
-							</lido-image>
-						</lido-image>
-						<lido-image id="col" is-slice="true" disable-edit="true" visible="true" height="auto" width="auto"  bg-color="transparent" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dropBackground.png" onEntry="this.padding='51px';">
-							<lido-image id="image5" is-slice="true" disable-edit="true" tab-index="4" visible="true" width="150px" imageSlice="30 fill" flexible-width="false" height="100px" value="basket" z="1" y="149px" type="drop" is-allow-only-one-drop="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dropCard.png" onEntry="this.borderRadius='15px'; this.boxShadow='unset'; " >
-							</lido-image>
-						</lido-image>
-						<lido-image id="col" is-slice="true" disable-edit="true" visible="true" height="auto" width="auto"  bg-color="transparent" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dropBackground.png" onEntry="this.padding='51px';">
-							<lido-image id="image6" is-slice="true" disable-edit="true" tab-index="5" visible="true" width="150px" imageSlice="30 fill" flexible-width="false" height="100px" value="character" z="1" y="149px" type="drop" is-allow-only-one-drop="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dropCard.png" onEntry="this.borderRadius='15px'; this.boxShadow='unset'; " >
-							</lido-image>
-						</lido-image>
-						<lido-image id="col" is-slice="true" disable-edit="true" visible="true" height="auto" width="auto"  bg-color="transparent" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dropBackground.png" onEntry="this.padding='51px';">
-							<lido-image id="image7" is-slice="true" disable-edit="true" tab-index="6" visible="true" width="150px" imageSlice="30 fill" flexible-width="false" height="100px" value="dance" z="1" y="149px" type="drop" is-allow-only-one-drop="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dropCard.png" onEntry="this.borderRadius='15px'; this.boxShadow='unset'; " >
-							</lido-image>
-						</lido-image>
-					</lido-row>
-				</lido-pos>
-				<!-- Drag Background -->
-				<lido-pos id="pos5" disable-edit="true" value="pos5" visible="true" width="1532.89px" height="300px" x="landscape.60px, portrait.-160px" y="landscape.620px, portrait.1100px" bg-color="transparent" onEntry="this.animation='bottomToPlace 1s linear';">
-					<lido-image id="image10" disable-edit="true" value="image10" visible="true" width="landscape.1532px, portrait.1600px" height="landscape.300px, portrait.550px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dragGroupBg.png" alt-text="{dragGroupBackgroundImage}">
-					</lido-image>
-				</lido-pos>
-				<!-- Drag Elements -->
-				<lido-pos id="pos6" value="pos6" visible="true" width="landscape.1600px, portrait.900px" height="150px" bg-color="transparent" x="0" y="landscape.700px, portrait.1260px" z="1" onEntry="this.animation='bottomToPlace 1s linear';">
-					<lido-row id="row2" value="row2" display="landscape.flex, portrait.grid" visible="true" height="landscape.150px, portrait.240px" width="landscape.auto, portrait.597px" min-length="2" max-length="6" child-elements-length="4" x="50%" y="50%" onEntry="this.gap='30px'; this.transform='translate(-50%, -50%)';">
-						<lido-text id="option1" value="${args.option1}" tab-index="6" flexible-width="false" visible="true" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dragElementBg.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="150px" height="100px" string="${args.option1}" font-color="black" font-family="'Baloo 2', serif" font-size="36px" z="0" type="drag">
-						</lido-text>
-						<lido-text id="option2" value="${args.option2}" tab-index="7" flexible-width="false" visible="true" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dragElementBg.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="150px" height="100px" string="${args.option2}" font-color="black" font-family="'Baloo 2', serif" font-size="36px" z="0" type="drag">
-						</lido-text>
-						<lido-text id="option3" value="${args.option3}" tab-index="8" flexible-width="false" visible="true" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dragElementBg.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="150px" height="100px" string="${args.option3}" font-color="black" font-family="'Baloo 2', serif" font-size="36px" z="0" type="drag">
-						</lido-text>
-						<lido-text id="option3" value="${args.option4}" tab-index="9" flexible-width="false" visible="true" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dragElementBg.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="150px" height="100px" string="${args.option4}" font-color="black" font-family="'Baloo 2', serif" font-size="36px" z="0" type="drag">
-						</lido-text>
-					</lido-row>
-				</lido-pos>
-			</lido-container>
+    return `<main>
+			<lido-container id="lido-container" tab-index="1" value="mainContainer1" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4}" 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="false" is-continue-on-correct="true" after-drop="true">
+				<!-- Audio Icon -->
+				<lido-pos id="pos" disable-edit="true" value="pos" height="100px" width="100px" aria-hidden="true" x="0" y="0" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="" onEntry="">
+					<lido-image id="play" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets//Audio%20icon.png" width="100px" height="100px" bg-color="transparent" x="35px" y="50px" onTouch="this.visibilty='hidden'; pause.visibility='visible'; question.speak='true'; option1.speak='true'; option2.speak='true'; option3.speak='true'; option4.speak='true'; option5.speak='true'; option6.speak='true'; this.visibilty='visible'; pause.visibility='hidden';">
+					</lido-image>
+					<lido-image id="pause" disable-edit="true" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets//pause.png" width="100px" height="100px" bg-color="transparent" x="35px" y="50px" onTouch="this.stop='true'; this.visibility='hidden'; play.visibility='visible';" onEntry="this.visibility='hidden';">
+					</lido-image>
+				</lido-pos>
+				<!-- Chimple Avatar -->
+				<lido-pos id="pos1" disable-edit="true" value="pos1" height="350px" width="350px" x="landscape.1260px, portrait.265px" y="landscape.530px, portrait.835px" aria-hidden="true" z="1" bg-color="transparent" type="" visible="true" audio="col1.mp3" onTouch="" onCorrect="" onEntry="this.animation='rightToPlace 2.5s linear';">
+					<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>
+				<!-- Background -->
+				<lido-pos id="pos2" disable-edit="true" value="pos2" height="900px" width="1600px" aria-hidden="true" x="0" y="0" z="0" bg-color="transparent" type="" visible="true" audio="col1.mp3" onTouch="" onCorrect="" onEntry="">
+					<lido-image id="image2" disable-edit="true" value="image2" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/backgroundImage.png" z="0" width="1600px" height="900px" onEntry="" alt-text="{backgroundImage}">
+					</lido-image>
+				</lido-pos>
+				<!-- Question -->
+				<lido-pos id="question" value="pos3" visible="true" width="840px" height="135px" x="landscape.370px, portrait.30px" y="100px"  bg-color="transparent" onEntry="this.animation='topToPlace 0.5s linear';">
+					<lido-image id="image3" disable-edit="true" value="image3" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Vector.png" z="0" width="840px" height="100%" alt-text="{question.image}">
+					</lido-image>
+					<lido-text id="textA" width="800px" height="100px" tab-index="2" value="{question.id}" visible="true" string="${args.question}" font-family="'Baloo 2', serif" font-color="black" font-size="40px" bg-color="transparent" onEntry="this.boxShadow='unset'; this.fontWeight='800';" y="20px" x="25px">
+					</lido-text>
+				</lido-pos>
+				<!-- Drop Elements -->
+				<lido-pos id="pos4" disable-edit="true" value="pos4" visible="true" width="landscape.1600px, portrait.600px" height="landscape.300px, portrait.500px" bg-color="transparent" x="landscape.0, portrait.140px" y="landscape.280px, portrait.340px" z="1" onEntry="this.visibility='hidden'; this.sleep='1500'; this.visibility='visible'; this.animation='leftToPlace 0.5s linear';">
+					<!-- Drop Background -->
+					<lido-row id="row" disable-edit="true" display="landscape.flex, portrait.grid" value="row" visible="true" width="landscape.auto, portrait.597px" min-length="2" max-length="6" child-elements-length="4" height="landscape.300px, portrait.500px" x="50%" y="50%" onEntry="this.marginBottom='70px'; this.transform='translate(-50%, -50%)'; this.gap='30px';" >
+						<lido-image id="col" is-slice="true" disable-edit="true" visible="true" height="auto" width="auto"  bg-color="transparent" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dropBackground.png" onEntry="this.padding='51px';">
+							<lido-image id="image4" is-slice="true" disable-edit="true" tab-index="3" visible="true" width="150px" imageSlice="30 fill" flexible-width="false" height="100px" value="apple" z="1" y="149px" type="drop" is-allow-only-one-drop="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dropCard.png" onEntry="this.borderRadius='15px'; this.boxShadow='unset'; " >
+							</lido-image>
+						</lido-image>
+						<lido-image id="col" is-slice="true" disable-edit="true" visible="true" height="auto" width="auto"  bg-color="transparent" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dropBackground.png" onEntry="this.padding='51px';">
+							<lido-image id="image5" is-slice="true" disable-edit="true" tab-index="4" visible="true" width="150px" imageSlice="30 fill" flexible-width="false" height="100px" value="basket" z="1" y="149px" type="drop" is-allow-only-one-drop="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dropCard.png" onEntry="this.borderRadius='15px'; this.boxShadow='unset'; " >
+							</lido-image>
+						</lido-image>
+						<lido-image id="col" is-slice="true" disable-edit="true" visible="true" height="auto" width="auto"  bg-color="transparent" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dropBackground.png" onEntry="this.padding='51px';">
+							<lido-image id="image6" is-slice="true" disable-edit="true" tab-index="5" visible="true" width="150px" imageSlice="30 fill" flexible-width="false" height="100px" value="character" z="1" y="149px" type="drop" is-allow-only-one-drop="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dropCard.png" onEntry="this.borderRadius='15px'; this.boxShadow='unset'; " >
+							</lido-image>
+						</lido-image>
+						<lido-image id="col" is-slice="true" disable-edit="true" visible="true" height="auto" width="auto"  bg-color="transparent" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dropBackground.png" onEntry="this.padding='51px';">
+							<lido-image id="image7" is-slice="true" disable-edit="true" tab-index="6" visible="true" width="150px" imageSlice="30 fill" flexible-width="false" height="100px" value="dance" z="1" y="149px" type="drop" is-allow-only-one-drop="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dropCard.png" onEntry="this.borderRadius='15px'; this.boxShadow='unset'; " >
+							</lido-image>
+						</lido-image>
+					</lido-row>
+				</lido-pos>
+				<!-- Drag Background -->
+				<lido-pos id="pos5" disable-edit="true" value="pos5" visible="true" width="1532.89px" height="300px" x="landscape.60px, portrait.-160px" y="landscape.620px, portrait.1100px" bg-color="transparent" onEntry="this.animation='bottomToPlace 1s linear';">
+					<lido-image id="image10" disable-edit="true" value="image10" visible="true" width="landscape.1532px, portrait.1600px" height="landscape.300px, portrait.550px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dragGroupBg.png" alt-text="{dragGroupBackgroundImage}">
+					</lido-image>
+				</lido-pos>
+				<!-- Drag Elements -->
+				<lido-pos id="pos6" value="pos6" visible="true" width="landscape.1600px, portrait.900px" height="150px" bg-color="transparent" x="0" y="landscape.700px, portrait.1260px" z="1" onEntry="this.animation='bottomToPlace 1s linear';">
+					<lido-row id="row2" value="row2" display="landscape.flex, portrait.grid" visible="true" height="landscape.150px, portrait.240px" width="landscape.auto, portrait.597px" min-length="2" max-length="6" child-elements-length="4" x="50%" y="50%" onEntry="this.gap='30px'; this.transform='translate(-50%, -50%)';">
+						<lido-text id="option1" value="${args.option1}" tab-index="6" flexible-width="false" visible="true" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dragElementBg.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="150px" height="100px" string="${args.option1}" font-color="black" font-family="'Baloo 2', serif" font-size="36px" z="0" type="drag">
+						</lido-text>
+						<lido-text id="option2" value="${args.option2}" tab-index="7" flexible-width="false" visible="true" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dragElementBg.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="150px" height="100px" string="${args.option2}" font-color="black" font-family="'Baloo 2', serif" font-size="36px" z="0" type="drag">
+						</lido-text>
+						<lido-text id="option3" value="${args.option3}" tab-index="8" flexible-width="false" visible="true" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dragElementBg.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="150px" height="100px" string="${args.option3}" font-color="black" font-family="'Baloo 2', serif" font-size="36px" z="0" type="drag">
+						</lido-text>
+						<lido-text id="option3" value="${args.option4}" tab-index="9" flexible-width="false" visible="true" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/dragElementBg.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="150px" height="100px" string="${args.option4}" font-color="black" font-family="'Baloo 2', serif" font-size="36px" z="0" type="drag">
+						</lido-text>
+					</lido-row>
+				</lido-pos>
+			</lido-container>
 	</main>`;
 }