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

package/dist/collection/stories/Templates/foodJar/food-jar.stories.js

@@ -12,6 +12,7 @@ const meta = {
         option3: { control: 'text' },
         option4: { control: 'text' },
         option5: { control: 'text' },
+        isAllowOnlyCorrect: { control: 'boolean' },
     },
 };
 export default meta;
@@ -19,6 +20,7 @@ export const OrderTractor = {
     args: {
         firstNum: '10', operator: '+', secondNum: '5', equator: '=', answer: '15',
         option1: '=', option2: '5', option3: '+', option4: '15', option5: '10',
+        isAllowOnlyCorrect: 'true',
     },
     render: args => {
         const xml = getContainerXml(args);
@@ -26,40 +28,40 @@ export const OrderTractor = {
     },
 };
 function getContainerXml(args) {
-    return `
-    <main>
-	<lido-container id="lido-container" is-allow-only-correct="true"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/Sky.png" objective="${[args.firstNum, args.operator, args.secondNum, args.equator, args.answer].join(',')}" width="100%" bg-color="transparent" visible="true" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000';  " onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false" custom-style="#drop1, #drop2, #drop3, #drop4, #drop5{border: none !important;boxShadow: none !important;}  ">
-	<!-- Chimple Avatar -->
-	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.448px,portrait.402px" width="landscape.350px,portrait.398px" x="landscape.1px, portrait.20px" y="landscape.5px, portrait.100px" 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>
-
-	<!-- image math matrix -->
-		<lido-cell layout="row" visible="true" width="100%" height="landscape.40%,portrait.80%" bg-color="transparent" margin="landscape.100px 0px 0px 0px,portrait.500px 0px 0px 0px">
-			<lido-math-matrix id="mat1" rows="3" cols="4"  defualtFill="${args.firstNum}" leftIndex="false" topIndex="false" clickable="true" matrixImage="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png" activeBgColor="transparent" inactiveBgColor="transparent" border="none" height="100%" width="100%" visible="true"></lido-math-matrix>
-			<lido-math-matrix id="mat2" rows="3" cols="4" defualtFill="${args.secondNum}" leftIndex="false" topIndex="false" clickable="true" matrixImage="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png" activeBgColor="transparent" inactiveBgColor="transparent" border="none" height="100%" width="100%" visible="true"></lido-math-matrix>
-		</lido-cell>
-
-		<!-- drop elements -->
-		<lido-cell visible="true" id="answer" layout="row" height="landscape.30%,portrait.40%" width="landscape.80%,portrait.100%" bg-color="transparent" onEntry="this.alignItems='center';" margin="landscape.0,portrait.0px 0px 0px 0px">
-			<lido-image id="drop1"  width="landscape.300px,portrait.200px" height="landscape.200px,portrait.200px" value="${args.firstNum}" visible="true" tab-index="1" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljargrey_equation.png" bg-Color="transparent" onEntry="" type="drop"  onCorrect="lido-avatar.avatarAnimate='Success'"></lido-image>
-			<lido-image id="drop2"  width="landscape.300px,portrait.200px" height="landscape.200px,portrait.200px" value="${args.operator}" visible="true" tab-index="2" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljargrey_equation.png" bg-Color="transparent" onEntry="" type="drop"  onCorrect="lido-avatar.avatarAnimate='Success'" ></lido-image>
-			<lido-image id="drop3"  width="landscape.300px,portrait.200px" height="landscape.200px,portrait.200px" value="${args.secondNum}" visible="true" tab-index="3" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljargrey_equation.png" bg-Color="transparent" onEntry="" type="drop" onCorrect="lido-avatar.avatarAnimate='Success'" ></lido-image>
-			<lido-image id="drop4"  width="landscape.300px,portrait.200px" height="landscape.200px,portrait.200px" value="${args.equator}" visible="true" tab-index="4" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljargrey_equation.png" bg-Color="transparent" onEntry="" type="drop"   onCorrect="lido-avatar.avatarAnimate='Success'" ></lido-image>
-			<lido-image id="drop5"  width="landscape.300px,portrait.200px" height="landscape.200px,portrait.200px" value="${args.answer}" visible="true" tab-index="5" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljargrey_equation.png" bg-Color="transparent" onEntry="" type="drop"   onCorrect="lido-avatar.avatarAnimate='Success'" ></lido-image>
-		</lido-cell>
-
-		<!-- drag elements -->
-		<lido-cell visible="true" id="answer" layout="row" height="landscape.30%,portrait.40%" width="landscape.80%,portrait.100%" bg-color="transparent" onEntry="this.alignItems='center';" >
-			<lido-text id="drg1"  height="landscape.200px,portrait.200px" width="landscape.160px,portrait.155px" visible="true" font-family="'Baloo Bhai 2'" font-size="90px" string="${args.option1}" value="${args.option1}" tab-index="6" bg-Color="transparent" onEntry="  this.fontWeight='1000';" type="drag" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljar_equation.png" ></lido-text>
-			<lido-text id="drg2"  height="landscape.200px,portrait.200px" width="landscape.160px,portrait.155px" visible="true" font-family="'Baloo Bhai 2'" font-size="90px" string="${args.option2}" value="${args.option2}" tab-index="7" bg-Color="transparent" onEntry="  this.fontWeight='1000';" type="drag" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljar_equation.png" ></lido-text>
-			<lido-text id="drg3"  height="landscape.200px,portrait.200px" width="landscape.160px,portrait.155px" visible="true" font-family="'Baloo Bhai 2'" font-size="90px" string="${args.option3}" value="${args.option3}" tab-index="8" bg-Color="transparent" onEntry="  this.fontWeight='1000';" type="drag" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljar_equation.png" ></lido-text>
-			<lido-text id="drg4"  height="landscape.200px,portrait.200px" width="landscape.160px,portrait.155px" visible="true" font-family="'Baloo Bhai 2'" font-size="90px" string="${args.option4}" value="${args.option4}" tab-index="9" bg-Color="transparent" onEntry="  this.fontWeight='1000';" type="drag" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljar_equation.png" ></lido-text>
-			<lido-text id="drg5"  height="landscape.200px,portrait.200px" width="landscape.160px,portrait.155px" visible="true" font-family="'Baloo Bhai 2'" font-size="90px" string="${args.option5}" value="${args.option5}" tab-index="10" bg-Color="transparent" onEntry="  this.fontWeight='1000';" type="drag" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljar_equation.png" ></lido-text>
-			</lido-cell>
-
-    </lido-container>
-    </main>
+    return `
+    <main>
+	<lido-container id="lido-container" is-allow-only-correct="${args.isAllowOnlyCorrect}"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/Sky.png" objective="${[args.firstNum, args.operator, args.secondNum, args.equator, args.answer].join(',')}" width="100%" bg-color="transparent" visible="true" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000';  " onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false" custom-style="#drop1, #drop2, #drop3, #drop4, #drop5{border: none !important;boxShadow: none !important;}  ">
+	<!-- Chimple Avatar -->
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.448px,portrait.402px" width="landscape.350px,portrait.398px" x="landscape.1px, portrait.20px" y="landscape.5px, portrait.100px" 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>
+
+	<!-- image math matrix -->
+		<lido-cell layout="row" visible="true" width="100%" height="landscape.40%,portrait.80%" bg-color="transparent" margin="landscape.100px 0px 0px 0px,portrait.500px 0px 0px 0px">
+			<lido-math-matrix id="mat1" rows="3" cols="4"  defualtFill="${args.firstNum}" leftIndex="false" topIndex="false" clickable="true" matrixImage="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png" activeBgColor="transparent" inactiveBgColor="transparent" border="none" height="100%" width="100%" visible="true"></lido-math-matrix>
+			<lido-math-matrix id="mat2" rows="3" cols="4" defualtFill="${args.secondNum}" leftIndex="false" topIndex="false" clickable="true" matrixImage="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png" activeBgColor="transparent" inactiveBgColor="transparent" border="none" height="100%" width="100%" visible="true"></lido-math-matrix>
+		</lido-cell>
+
+		<!-- drop elements -->
+		<lido-cell visible="true" id="answer" layout="row" height="landscape.30%,portrait.40%" width="landscape.80%,portrait.100%" bg-color="transparent" onEntry="this.alignItems='center';" margin="landscape.0,portrait.0px 0px 0px 0px">
+			<lido-image id="drop1"  width="landscape.300px,portrait.200px" height="landscape.200px,portrait.200px" value="${args.firstNum}" visible="true" tab-index="1" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljargrey_equation.png" bg-Color="transparent" onEntry="" type="drop"  onCorrect="lido-avatar.avatarAnimate='Success'"></lido-image>
+			<lido-image id="drop2"  width="landscape.300px,portrait.200px" height="landscape.200px,portrait.200px" value="${args.operator}" visible="true" tab-index="2" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljargrey_equation.png" bg-Color="transparent" onEntry="" type="drop"  onCorrect="lido-avatar.avatarAnimate='Success'" ></lido-image>
+			<lido-image id="drop3"  width="landscape.300px,portrait.200px" height="landscape.200px,portrait.200px" value="${args.secondNum}" visible="true" tab-index="3" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljargrey_equation.png" bg-Color="transparent" onEntry="" type="drop" onCorrect="lido-avatar.avatarAnimate='Success'" ></lido-image>
+			<lido-image id="drop4"  width="landscape.300px,portrait.200px" height="landscape.200px,portrait.200px" value="${args.equator}" visible="true" tab-index="4" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljargrey_equation.png" bg-Color="transparent" onEntry="" type="drop"   onCorrect="lido-avatar.avatarAnimate='Success'" ></lido-image>
+			<lido-image id="drop5"  width="landscape.300px,portrait.200px" height="landscape.200px,portrait.200px" value="${args.answer}" visible="true" tab-index="5" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljargrey_equation.png" bg-Color="transparent" onEntry="" type="drop"   onCorrect="lido-avatar.avatarAnimate='Success'" ></lido-image>
+		</lido-cell>
+
+		<!-- drag elements -->
+		<lido-cell visible="true" id="answer" layout="row" height="landscape.30%,portrait.40%" width="landscape.80%,portrait.100%" bg-color="transparent" onEntry="this.alignItems='center';" >
+			<lido-text id="drg1"  height="landscape.200px,portrait.200px" width="landscape.160px,portrait.155px" visible="true" font-family="'Baloo Bhai 2'" font-size="90px" string="${args.option1}" value="${args.option1}" tab-index="6" bg-Color="transparent" onEntry="  this.fontWeight='1000';" type="drag" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljar_equation.png" ></lido-text>
+			<lido-text id="drg2"  height="landscape.200px,portrait.200px" width="landscape.160px,portrait.155px" visible="true" font-family="'Baloo Bhai 2'" font-size="90px" string="${args.option2}" value="${args.option2}" tab-index="7" bg-Color="transparent" onEntry="  this.fontWeight='1000';" type="drag" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljar_equation.png" ></lido-text>
+			<lido-text id="drg3"  height="landscape.200px,portrait.200px" width="landscape.160px,portrait.155px" visible="true" font-family="'Baloo Bhai 2'" font-size="90px" string="${args.option3}" value="${args.option3}" tab-index="8" bg-Color="transparent" onEntry="  this.fontWeight='1000';" type="drag" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljar_equation.png" ></lido-text>
+			<lido-text id="drg4"  height="landscape.200px,portrait.200px" width="landscape.160px,portrait.155px" visible="true" font-family="'Baloo Bhai 2'" font-size="90px" string="${args.option4}" value="${args.option4}" tab-index="9" bg-Color="transparent" onEntry="  this.fontWeight='1000';" type="drag" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljar_equation.png" ></lido-text>
+			<lido-text id="drg5"  height="landscape.200px,portrait.200px" width="landscape.160px,portrait.155px" visible="true" font-family="'Baloo Bhai 2'" font-size="90px" string="${args.option5}" value="${args.option5}" tab-index="10" bg-Color="transparent" onEntry="  this.fontWeight='1000';" type="drag" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljar_equation.png" ></lido-text>
+			</lido-cell>
+
+    </lido-container>
+    </main>
   `;
 }

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

@@ -30,123 +30,123 @@ export const Options = {
     },
 };
 function getContainerXml(args) {
-    return `<main>
-				<lido-container id="lido-container" value="mainContainer1" drop-action="move" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4},${args.correct5},${args.correct6},${args.correct7},${args.correct8},${args.correct9}" height="100%" width="100%" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/Underwater.png" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; this.overflow='hidden';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false" is-allow-only-correct="true">
-
-		<!-- Chimple Avatar -->
-		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="landscape.1274px, portrait.541px" y="landscape.0, portrait.1274px" 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="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
-			</lido-avatar>
-		</lido-cell>
-
-		<!-- drop container -->
-		<lido-cell layout="col" visible="true" width="landscape.100%, portrait.96%" height="landscape.100%, portrait.57%" bg-color="transparent">
-			<lido-image src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/ground.png" is-slice="true" disable-edit="true" visible="true" width="100%" height="83%" imageSlice="30 fill" flexible-width="false" value="dropContainer" z="0">
-				<lido-cell layout="landscape.row, portrait.col" bg-color="transparent" visible="true" width="100%" height="100%">
-					<!-- child drops -->
-					<lido-cell layout="col" bg-color="transparent" visible="true" width="100%" height="100%">
-						<lido-cell layout="row" visible="true" width="80%" height="100%" bg-color="transparent" x="0px" y="0px" margin="landscape.0px 0px 0px 17%, portrait.0px 0px 0px 25%" z="1">
-
-							<lido-image is-slice="true" id="option1" value="op"  audio="" tab-index="1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/grass_question_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.25%, portrait.22%" height="landscape.70%, portrait.75%" font-size="50px" z="0">
-								<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="100px" height="100px" string="op" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0">
-								</lido-text>
-							</lido-image>
-							<lido-image is-slice="true" id="option2" value="ug"  audio="" tab-index="2" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/grass_question_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.25%, portrait.22%" height="landscape.70%, portrait.75%" font-size="50px" z="0">
-								<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="100px" height="100px" string="ug" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0">
-								</lido-text>
-							</lido-image>
-							<lido-image is-slice="true" id="option3" value="ad"  audio="" tab-index="3" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/grass_question_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.25%, portrait.22%" height="landscape.70%, portrait.75%" font-size="50px" z="0">
-								<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="100px" height="100px" string="ad" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0">
-								</lido-text>
-							</lido-image>
-
-
-						</lido-cell>
-						<lido-cell layout="row" visible="true" width="96%" height="100%" bg-color="transparent" gap="20px">
-							<lido-image is-slice="true" tab-index="4" id="option4"  audio="" value="basket" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/grass_question_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.20%, portrait.18%" height="landscape.70%, portrait.75%" font-size="50px" z="0">
-								<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="100px" height="100px" string="ch" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0">
-								</lido-text>
-							</lido-image>
-							<lido-image id="option5" is-slice="true" value="${args.correct1}" tab-index="5" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/mud_drop_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.355px, portrait.15%" height="landscape.67%, portrait.70%" font-size="50px" z="0" type="drop">
-							</lido-image>
-							<lido-image id="option6" is-slice="true" value="${args.correct2}" tab-index="6" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/mud_drop_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.355px, portrait.15%" height="landscape.67%, portrait.70%" font-size="50px" z="0" type="drop">
-							</lido-image>
-							<lido-image id="option7" is-slice="true" value="${args.correct3}" tab-index="7" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/mud_drop_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.355px, portrait.15%" height="landscape.67%, portrait.70%" font-size="50px" z="0" type="drop">
-							</lido-image>
-
-
-						</lido-cell>
-						<lido-cell layout="row" visible="true" width="96%" height="100%" bg-color="transparent" gap="20px">
-							<lido-image is-slice="true" id="option8" value="basket"  audio="" tab-index="8" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/grass_question_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.20%, portrait.18%" height="landscape.70%, portrait.75%" font-size="50px" z="0">
-								<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="100px" height="100px" string="d" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0">
-								</lido-text>
-							</lido-image>
-							<lido-image id="option9" is-slice="true" value="${args.correct4}" tab-index="9" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/mud_drop_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.355px, portrait.15%" height="landscape.67%, portrait.70%" font-size="50px" z="0" type="drop">
-							</lido-image>
-							<lido-image id="option10" is-slice="true" value="${args.correct5}" tab-index="10" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/mud_drop_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.355px, portrait.15%" height="landscape.67%, portrait.70%" font-size="50px" z="0" type="drop">
-							</lido-image>
-							<lido-image id="option11" is-slice="true" value="${args.correct6}" tab-index="11" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/mud_drop_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.355px, portrait.15%" height="landscape.67%, portrait.70%" font-size="50px" z="0" type="drop">
-							</lido-image>
-						</lido-cell>
-						<lido-cell layout="row" visible="true" width="96%" height="100%" bg-color="transparent" gap="20px">
-							<lido-image is-slice="true" id="option12" value="basket"  audio="" tab-index="12" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/grass_question_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.20%, portrait.18%" height="landscape.70%, portrait.75%" font-size="50px" z="0">
-								<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="100px" height="100px" string="m" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0">
-								</lido-text>
-							</lido-image>
-							<lido-image id="option13" is-slice="true" value="${args.correct7}" visible="true" tab-index="13" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/mud_drop_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.355px, portrait.15%" height="landscape.67%, portrait.70%" font-size="50px" z="0" type="drop">
-							</lido-image>
-							<lido-image id="option14" is-slice="true" value="${args.correct8}" visible="true" tab-index="14" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/mud_drop_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.355px, portrait.15%" height="landscape.67%, portrait.70%" font-size="50px" z="0" type="drop">
-							</lido-image>
-							<lido-image id="option15" is-slice="true" value="${args.correct9}" visible="true" tab-index="15" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/mud_drop_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.355px, portrait.15%" height="landscape.67%, portrait.70%" font-size="50px" z="0" type="drop">
-							</lido-image>
-						</lido-cell>
-
-					</lido-cell>
-					<!-- drag container -->
-					<lido-cell layout="landscape.col, portrait.row" visible="true" width="landscape.25%, portrait.75%" height="landscape.100%, portrait.30%" bg-color="transparent" x="0px" y="0px" margin="landscape.23% 0px 0px 0px, portrait.0px 0px 0px 37%" z="1" onEntry="this.justifyContent='unset';">
-						<lido-image tab-index="16" is-slice="true" type="drag"  audio="" id="option16" value="${args.option1}" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/blue_alphabet_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.300px, portrait.120px" height="landscape.120px, portrait.120px" font-size="50px" z="0" margin="landscape.0px 0px 90px 0px, portrait.0px 82px 0px 0px">
-							<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="landscape.100px, portrait.120px" height="landscape.120px, portrait.100px" string="${args.option1}" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0" onTouch="this.speak='true';">
-							</lido-text>
-						</lido-image>
-						<lido-image tab-index="17" is-slice="true" type="drag"  audio="" id="option17" value="${args.option2}" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/blue_alphabet_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.300px, portrait.120px" height="landscape.120px, portrait.120px" font-size="50px" z="0" margin="landscape.0px 0px 90px 0px, portrait.0px 82px 0px 0px">
-							<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="landscape.100px, portrait.120px" height="landscape.120px, portrait.100px" string="${args.option2}" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0" onTouch="this.speak='true';">
-							</lido-text>
-						</lido-image>
-						<lido-image tab-index="18" is-slice="true" type="drag"  audio="" id="option18" value="${args.option3}" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/blue_alphabet_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.300px, portrait.120px" height="landscape.120px, portrait.120px" font-size="50px" z="0" margin="landscape.0px 0px 90px 0px, portrait.0px 82px 0px 0px">
-							<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="landscape.100px, portrait.120px" height="landscape.120px, portrait.100px" string="${args.option3}" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0" onTouch="this.speak='true';">
-							</lido-text>
-						</lido-image>
-
-						<!--hidden drags -->
-						<lido-image is-slice="true" type="drag"  tab-index="19" audio="" id="option19" value="${args.option4}" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/blue_alphabet_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.300px, portrait.120px" height="landscape.120px, portrait.120px" font-size="50px" z="0" margin="landscape.0px 0px 90px 0px, portrait.0px 82px 0px 0px">
-							<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="landscape.100px, portrait.120px" height="landscape.120px, portrait.100px" string="${args.option4}" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0" onTouch="this.speak='true';">
-							</lido-text>
-						</lido-image>
-						<lido-image is-slice="true" type="drag"  tab-index="20" audio="" id="option20" value="${args.option5}" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/blue_alphabet_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.300px, portrait.120px" height="landscape.120px, portrait.120px" font-size="50px" z="0" margin="landscape.0px 0px 90px 0px, portrait.0px 82px 0px 0px">
-							<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="landscape.100px, portrait.120px" height="landscape.120px, portrait.100px" string="${args.option5}" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0" onTouch="this.speak='true';">
-							</lido-text>
-						</lido-image>
-						<lido-image is-slice="true" type="drag"  tab-index="21" audio="" id="option21" value="${args.option6}" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/blue_alphabet_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.300px, portrait.120px" height="landscape.120px, portrait.120px" font-size="50px" z="0" margin="landscape.0px 0px 90px 0px, portrait.0px 82px 0px 0px">
-							<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="landscape.100px, portrait.120px" height="landscape.120px, portrait.100px" string="${args.option6}" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0" onTouch="this.speak='true';">
-							</lido-text>
-						</lido-image>
-
-						<lido-image is-slice="true" type="drag"  tab-index="22" audio="" id="option22" value="${args.option7}" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/blue_alphabet_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.300px, portrait.120px" height="landscape.120px, portrait.120px" font-size="50px" z="0" margin="landscape.0px 0px 90px 0px, portrait.0px 82px 0px 0px">
-							<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="landscape.100px, portrait.120px" height="landscape.120px, portrait.100px" string="${args.option7}" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0" onTouch="this.speak='true';">
-							</lido-text>
-						</lido-image>
-						<lido-image is-slice="true" type="drag"  tab-index="23" audio="" id="option23" value="${args.option8}" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/blue_alphabet_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.300px, portrait.120px" height="landscape.120px, portrait.120px" font-size="50px" z="0" margin="landscape.0px 0px 90px 0px, portrait.0px 82px 0px 0px">
-							<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="landscape.100px, portrait.120px" height="landscape.120px, portrait.100px" string="${args.option8}" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0" onTouch="this.speak='true';">
-							</lido-text>
-						</lido-image>
-						<lido-image is-slice="true" type="drag"  tab-index="24" audio="" id="option24" value="${args.option9}" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/blue_alphabet_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.300px, portrait.120px" height="landscape.120px, portrait.120px" font-size="50px" z="0" margin="landscape.0px 0px 90px 0px, portrait.0px 82px 0px 0px">
-							<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="landscape.100px, portrait.120px" height="landscape.120px, portrait.100px" string="${args.option9}" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0" onTouch="this.speak='true';">
-							</lido-text>
-						</lido-image>
-
-					</lido-cell>
-				</lido-cell>
-			</lido-image>
-	</lido-container>
+    return `<main>
+				<lido-container id="lido-container" value="mainContainer1" drop-action="move" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4},${args.correct5},${args.correct6},${args.correct7},${args.correct8},${args.correct9}" height="100%" width="100%" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/Underwater.png" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; this.overflow='hidden';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false" is-allow-only-correct="true">
+
+		<!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="landscape.1274px, portrait.541px" y="landscape.0, portrait.1274px" 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="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+			</lido-avatar>
+		</lido-cell>
+
+		<!-- drop container -->
+		<lido-cell layout="col" visible="true" width="landscape.100%, portrait.96%" height="landscape.100%, portrait.57%" bg-color="transparent">
+			<lido-image src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/ground.png" is-slice="true" disable-edit="true" visible="true" width="100%" height="83%" imageSlice="30 fill" flexible-width="false" value="dropContainer" z="0">
+				<lido-cell layout="landscape.row, portrait.col" bg-color="transparent" visible="true" width="100%" height="100%">
+					<!-- child drops -->
+					<lido-cell layout="col" bg-color="transparent" visible="true" width="100%" height="100%">
+						<lido-cell layout="row" visible="true" width="80%" height="100%" bg-color="transparent" x="0px" y="0px" margin="landscape.0px 0px 0px 17%, portrait.0px 0px 0px 25%" z="1">
+
+							<lido-image is-slice="true" id="option1" value="op"  audio="" tab-index="1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/grass_question_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.25%, portrait.22%" height="landscape.70%, portrait.75%" font-size="50px" z="0">
+								<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="100px" height="100px" string="op" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0">
+								</lido-text>
+							</lido-image>
+							<lido-image is-slice="true" id="option2" value="ug"  audio="" tab-index="2" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/grass_question_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.25%, portrait.22%" height="landscape.70%, portrait.75%" font-size="50px" z="0">
+								<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="100px" height="100px" string="ug" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0">
+								</lido-text>
+							</lido-image>
+							<lido-image is-slice="true" id="option3" value="ad"  audio="" tab-index="3" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/grass_question_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.25%, portrait.22%" height="landscape.70%, portrait.75%" font-size="50px" z="0">
+								<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="100px" height="100px" string="ad" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0">
+								</lido-text>
+							</lido-image>
+
+
+						</lido-cell>
+						<lido-cell layout="row" visible="true" width="96%" height="100%" bg-color="transparent" gap="20px">
+							<lido-image is-slice="true" tab-index="4" id="option4"  audio="" value="basket" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/grass_question_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.20%, portrait.18%" height="landscape.70%, portrait.75%" font-size="50px" z="0">
+								<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="100px" height="100px" string="ch" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0">
+								</lido-text>
+							</lido-image>
+							<lido-image id="option5" is-slice="true" value="${args.correct1}" tab-index="5" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/mud_drop_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.355px, portrait.15%" height="landscape.67%, portrait.70%" font-size="50px" z="0" type="drop">
+							</lido-image>
+							<lido-image id="option6" is-slice="true" value="${args.correct2}" tab-index="6" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/mud_drop_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.355px, portrait.15%" height="landscape.67%, portrait.70%" font-size="50px" z="0" type="drop">
+							</lido-image>
+							<lido-image id="option7" is-slice="true" value="${args.correct3}" tab-index="7" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/mud_drop_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.355px, portrait.15%" height="landscape.67%, portrait.70%" font-size="50px" z="0" type="drop">
+							</lido-image>
+
+
+						</lido-cell>
+						<lido-cell layout="row" visible="true" width="96%" height="100%" bg-color="transparent" gap="20px">
+							<lido-image is-slice="true" id="option8" value="basket"  audio="" tab-index="8" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/grass_question_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.20%, portrait.18%" height="landscape.70%, portrait.75%" font-size="50px" z="0">
+								<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="100px" height="100px" string="d" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0">
+								</lido-text>
+							</lido-image>
+							<lido-image id="option9" is-slice="true" value="${args.correct4}" tab-index="9" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/mud_drop_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.355px, portrait.15%" height="landscape.67%, portrait.70%" font-size="50px" z="0" type="drop">
+							</lido-image>
+							<lido-image id="option10" is-slice="true" value="${args.correct5}" tab-index="10" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/mud_drop_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.355px, portrait.15%" height="landscape.67%, portrait.70%" font-size="50px" z="0" type="drop">
+							</lido-image>
+							<lido-image id="option11" is-slice="true" value="${args.correct6}" tab-index="11" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/mud_drop_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.355px, portrait.15%" height="landscape.67%, portrait.70%" font-size="50px" z="0" type="drop">
+							</lido-image>
+						</lido-cell>
+						<lido-cell layout="row" visible="true" width="96%" height="100%" bg-color="transparent" gap="20px">
+							<lido-image is-slice="true" id="option12" value="basket"  audio="" tab-index="12" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/grass_question_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.20%, portrait.18%" height="landscape.70%, portrait.75%" font-size="50px" z="0">
+								<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="100px" height="100px" string="m" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0">
+								</lido-text>
+							</lido-image>
+							<lido-image id="option13" is-slice="true" value="${args.correct7}" visible="true" tab-index="13" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/mud_drop_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.355px, portrait.15%" height="landscape.67%, portrait.70%" font-size="50px" z="0" type="drop">
+							</lido-image>
+							<lido-image id="option14" is-slice="true" value="${args.correct8}" visible="true" tab-index="14" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/mud_drop_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.355px, portrait.15%" height="landscape.67%, portrait.70%" font-size="50px" z="0" type="drop">
+							</lido-image>
+							<lido-image id="option15" is-slice="true" value="${args.correct9}" visible="true" tab-index="15" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/mud_drop_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.355px, portrait.15%" height="landscape.67%, portrait.70%" font-size="50px" z="0" type="drop">
+							</lido-image>
+						</lido-cell>
+
+					</lido-cell>
+					<!-- drag container -->
+					<lido-cell layout="landscape.col, portrait.row" visible="true" width="landscape.25%, portrait.75%" height="landscape.100%, portrait.30%" bg-color="transparent" x="0px" y="0px" margin="landscape.23% 0px 0px 0px, portrait.0px 0px 0px 37%" z="1" onEntry="this.justifyContent='unset';">
+						<lido-image tab-index="16" is-slice="true" type="drag"  audio="" id="option16" value="${args.option1}" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/blue_alphabet_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.300px, portrait.120px" height="landscape.120px, portrait.120px" font-size="50px" z="0" margin="landscape.0px 0px 90px 0px, portrait.0px 82px 0px 0px">
+							<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="landscape.100px, portrait.120px" height="landscape.120px, portrait.100px" string="${args.option1}" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0" onTouch="this.speak='true';">
+							</lido-text>
+						</lido-image>
+						<lido-image tab-index="17" is-slice="true" type="drag"  audio="" id="option17" value="${args.option2}" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/blue_alphabet_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.300px, portrait.120px" height="landscape.120px, portrait.120px" font-size="50px" z="0" margin="landscape.0px 0px 90px 0px, portrait.0px 82px 0px 0px">
+							<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="landscape.100px, portrait.120px" height="landscape.120px, portrait.100px" string="${args.option2}" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0" onTouch="this.speak='true';">
+							</lido-text>
+						</lido-image>
+						<lido-image tab-index="18" is-slice="true" type="drag"  audio="" id="option18" value="${args.option3}" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/blue_alphabet_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.300px, portrait.120px" height="landscape.120px, portrait.120px" font-size="50px" z="0" margin="landscape.0px 0px 90px 0px, portrait.0px 82px 0px 0px">
+							<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="landscape.100px, portrait.120px" height="landscape.120px, portrait.100px" string="${args.option3}" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0" onTouch="this.speak='true';">
+							</lido-text>
+						</lido-image>
+
+						<!--hidden drags -->
+						<lido-image is-slice="true" type="drag"  tab-index="19" audio="" id="option19" value="${args.option4}" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/blue_alphabet_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.300px, portrait.120px" height="landscape.120px, portrait.120px" font-size="50px" z="0" margin="landscape.0px 0px 90px 0px, portrait.0px 82px 0px 0px">
+							<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="landscape.100px, portrait.120px" height="landscape.120px, portrait.100px" string="${args.option4}" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0" onTouch="this.speak='true';">
+							</lido-text>
+						</lido-image>
+						<lido-image is-slice="true" type="drag"  tab-index="20" audio="" id="option20" value="${args.option5}" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/blue_alphabet_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.300px, portrait.120px" height="landscape.120px, portrait.120px" font-size="50px" z="0" margin="landscape.0px 0px 90px 0px, portrait.0px 82px 0px 0px">
+							<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="landscape.100px, portrait.120px" height="landscape.120px, portrait.100px" string="${args.option5}" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0" onTouch="this.speak='true';">
+							</lido-text>
+						</lido-image>
+						<lido-image is-slice="true" type="drag"  tab-index="21" audio="" id="option21" value="${args.option6}" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/blue_alphabet_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.300px, portrait.120px" height="landscape.120px, portrait.120px" font-size="50px" z="0" margin="landscape.0px 0px 90px 0px, portrait.0px 82px 0px 0px">
+							<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="landscape.100px, portrait.120px" height="landscape.120px, portrait.100px" string="${args.option6}" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0" onTouch="this.speak='true';">
+							</lido-text>
+						</lido-image>
+
+						<lido-image is-slice="true" type="drag"  tab-index="22" audio="" id="option22" value="${args.option7}" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/blue_alphabet_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.300px, portrait.120px" height="landscape.120px, portrait.120px" font-size="50px" z="0" margin="landscape.0px 0px 90px 0px, portrait.0px 82px 0px 0px">
+							<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="landscape.100px, portrait.120px" height="landscape.120px, portrait.100px" string="${args.option7}" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0" onTouch="this.speak='true';">
+							</lido-text>
+						</lido-image>
+						<lido-image is-slice="true" type="drag"  tab-index="23" audio="" id="option23" value="${args.option8}" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/blue_alphabet_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.300px, portrait.120px" height="landscape.120px, portrait.120px" font-size="50px" z="0" margin="landscape.0px 0px 90px 0px, portrait.0px 82px 0px 0px">
+							<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="landscape.100px, portrait.120px" height="landscape.120px, portrait.100px" string="${args.option8}" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0" onTouch="this.speak='true';">
+							</lido-text>
+						</lido-image>
+						<lido-image is-slice="true" type="drag"  tab-index="24" audio="" id="option24" value="${args.option9}" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/blue_alphabet_wordmatrix.png" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset';" width="landscape.300px, portrait.120px" height="landscape.120px, portrait.120px" font-size="50px" z="0" margin="landscape.0px 0px 90px 0px, portrait.0px 82px 0px 0px">
+							<lido-text visible="true" bg-color="transparent" onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';" width="landscape.100px, portrait.120px" height="landscape.120px, portrait.100px" string="${args.option9}" font-color="black" font-family="'Baloo 2', serif" font-size="50px" z="0" onTouch="this.speak='true';">
+							</lido-text>
+						</lido-image>
+
+					</lido-cell>
+				</lido-cell>
+			</lido-image>
+	</lido-container>
 	</main>`;
 }