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

package/dist/collection/stories/Templates/sequenceBox/sequenceBox2.stories.js

@@ -7,6 +7,7 @@ const meta = {
         number2: { control: 'text', name: 'Number 2' },
         number4: { control: 'text', name: 'Number 4' },
         options: { control: 'object', name: 'digits' },
+        isAllowOnlyCorrect: { control: 'boolean', name: 'isAllowOnlyCorrect' },
     },
     args: {
         missingNumber: '555',
@@ -14,6 +15,7 @@ const meta = {
         number2: '545',
         number4: '565',
         options: ['777', '666', '555', '444'],
+        isAllowOnlyCorrect: true,
     },
 };
 export default meta;
@@ -24,71 +26,73 @@ export const SequenceBox = {
     },
 };
 function getContainerXml(args) {
+    var _a;
     const missingNumber = args.missingNumber;
     const number1 = args.number1;
     const number2 = args.number2;
     const number4 = args.number4;
     const options = args.options;
+    const isAllowOnlyCorrect = (_a = args.isAllowOnlyCorrect) !== null && _a !== void 0 ? _a : true;
     const dragCells = options
-        .map((digit, i) => `
-        <lido-text id="${i}" tab-index="${i}" height="landscape.130px, portrait.130px" width="landscape.225px, portrait.200px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="drag" font-size="104px"  bg-color="#FFF4CD"  onEntry="this.fontWeight='800'; this.borderRadius='10px';" border-image="">
-        </lido-text>
+        .map((digit, i) => `
+        <lido-text id="${i}" tab-index="${i}" height="landscape.130px, portrait.130px" width="landscape.225px, portrait.200px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="drag" font-size="104px"  bg-color="#FFF4CD"  onEntry="this.fontWeight='800'; this.borderRadius='10px';" border-image="">
+        </lido-text>
     `)
         .join('\n');
-    return `
-    <main>
-        <lido-container id="lido-container" objective="${missingNumber}" tab-index="1" show-drop-border="false" is-continue-on-correct="true" is-allow-only-correct="true" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.png" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="this.questionBoxAnimate='true'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='20000';" drop-action="infinite-drop" show-check="false">
-
-			<!-- Chimple Avatar -->
-			<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.600px, portrait.230px" y="landscape.45px, portrait.1010px" ariaHidden="true" z="1" bgColor="transparent" visible="true"  onEntry="this.flex-shrink='0';">
-				<lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}" onEntry="">
-				</lido-avatar>
-				<lido-image id="image" disableEdit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bgColor="transparent" width="inherit" height="27px" x="landscape.-7px, portrait.-7px" y="landscape.450px, portrait.535px" altText="{shadowImage}">
-				</lido-image>
-			</lido-cell>
-
-			<!-- drop cells -->
-			<lido-cell layout="row" aria-hidden="true" visible="true" height="landscape.45%,portrait.40%" width="landscape.85%, portrait.95%" bg-Color="transparent" margin="landscape.385px 0px -545px 0px,portrait.55px 0px -73px 0px" onEntry="this.z-index='1'; this.boxAnimationOneByOne='true';">
-
-				<lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';">
-					<lido-image is-slice="true" bg-color="transparent" id="drop-image0" disable-edit="true" tab-index="20" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px">
-					</lido-image>
-					<lido-image is-slice="true" bg-color="transparent" id="drop-image0" disable-edit="true" tab-index="21" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
-						<lido-text id="${number1}" tab-index="${number1}" disable-edit="true" height="landscape.130px, portrait.100px" width="200px" visible="true" value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
-						</lido-text>
-					</lido-image>
-				</lido-cell>
-				<lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';">
-					<lido-image is-slice="true" bg-color="transparent" id="drop-image1" disable-edit="true" tab-index="23" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
-					</lido-image>
-					<lido-image is-slice="true" bg-color="transparent" id="drop-image1" disable-edit="true" tab-index="24" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
-						<lido-text id="${number2}" tab-index="${number2}" disable-edit="true" height="landscape.130px, portrait.100px" width="125px" visible="true" value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
-						</lido-text>
-					</lido-image>
-				</lido-cell>
-				<lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="this.boxAnimate='true';">
-					<lido-image is-slice="true" bg-color="transparent" id="drop-image2" disable-edit="true" tab-index="26" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
-					</lido-image>
-					<lido-image is-slice="true" bg-color="transparent" id="drop-image2" disable-edit="true" tab-index="27" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
-						<lido-text id="${missingNumber}" tab-index="${missingNumber}" disable-edit="true" height="landscape.155px, portrait.125px" width="295px" visible="true" value="${missingNumber}" string="?" font-family="'Baloo Bhai 2'" font-color="#FFC805" type="drop" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px';';" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png">
-						</lido-text>
-					</lido-image>
-				</lido-cell>
-				<lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';">
-					<lido-image is-slice="true" bg-color="transparent" id="drop-image3" disable-edit="true" tab-index="30" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
-					</lido-image>
-					<lido-image is-slice="true" bg-color="transparent" id="drop-image3" disable-edit="true" tab-index="31" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
-						<lido-text id="${number4}" tab-index="${number4}" disable-edit="true" height="landscape.130px, portrait.100px" width="125px" visible="true" value="${number4}" string="${number4}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
-						</lido-text>
-					</lido-image>
-				</lido-cell>
-			</lido-cell>
-
-			<!-- answers drag cell -->
-			<lido-cell layout="row" aria-hidden="true" visible="true" height="landscape.40%,portrait.20%" width="landscape.60%, portarit.90%" bg-Color="transparent" margin="landscape.530px 0px 0px 0px,portrait.-135px 0px 290px 0px" onEntry="this.z-index='1';" gap="landscape.5px, portrait.10px">
-				${dragCells}
-			</lido-cell>
-		</lido-container>
-    </main>
+    return `
+    <main>
+        <lido-container id="lido-container" objective="${missingNumber}" tab-index="1" show-drop-border="false" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.png" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="this.questionBoxAnimate='true'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='20000';" drop-action="infinite-drop" show-check="false">
+
+			<!-- Chimple Avatar -->
+			<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.600px, portrait.230px" y="landscape.45px, portrait.1010px" ariaHidden="true" z="1" bgColor="transparent" visible="true"  onEntry="this.flex-shrink='0';">
+				<lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}" onEntry="">
+				</lido-avatar>
+				<lido-image id="image" disableEdit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bgColor="transparent" width="inherit" height="27px" x="landscape.-7px, portrait.-7px" y="landscape.450px, portrait.535px" altText="{shadowImage}">
+				</lido-image>
+			</lido-cell>
+
+			<!-- drop cells -->
+			<lido-cell layout="row" aria-hidden="true" visible="true" height="landscape.45%,portrait.40%" width="landscape.85%, portrait.95%" bg-Color="transparent" margin="landscape.385px 0px -545px 0px,portrait.55px 0px -73px 0px" onEntry="this.z-index='1'; this.boxAnimationOneByOne='true';">
+
+				<lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';">
+					<lido-image is-slice="true" bg-color="transparent" id="drop-image0" disable-edit="true" tab-index="20" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px">
+					</lido-image>
+					<lido-image is-slice="true" bg-color="transparent" id="drop-image0" disable-edit="true" tab-index="21" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
+						<lido-text id="${number1}" tab-index="${number1}" disable-edit="true" height="landscape.130px, portrait.100px" width="200px" visible="true" value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
+						</lido-text>
+					</lido-image>
+				</lido-cell>
+				<lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';">
+					<lido-image is-slice="true" bg-color="transparent" id="drop-image1" disable-edit="true" tab-index="23" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
+					</lido-image>
+					<lido-image is-slice="true" bg-color="transparent" id="drop-image1" disable-edit="true" tab-index="24" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
+						<lido-text id="${number2}" tab-index="${number2}" disable-edit="true" height="landscape.130px, portrait.100px" width="125px" visible="true" value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
+						</lido-text>
+					</lido-image>
+				</lido-cell>
+				<lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="this.boxAnimate='true';">
+					<lido-image is-slice="true" bg-color="transparent" id="drop-image2" disable-edit="true" tab-index="26" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
+					</lido-image>
+					<lido-image is-slice="true" bg-color="transparent" id="drop-image2" disable-edit="true" tab-index="27" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
+						<lido-text id="${missingNumber}" tab-index="${missingNumber}" disable-edit="true" height="landscape.155px, portrait.125px" width="295px" visible="true" value="${missingNumber}" string="?" font-family="'Baloo Bhai 2'" font-color="#FFC805" type="drop" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px';';" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png">
+						</lido-text>
+					</lido-image>
+				</lido-cell>
+				<lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';">
+					<lido-image is-slice="true" bg-color="transparent" id="drop-image3" disable-edit="true" tab-index="30" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
+					</lido-image>
+					<lido-image is-slice="true" bg-color="transparent" id="drop-image3" disable-edit="true" tab-index="31" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
+						<lido-text id="${number4}" tab-index="${number4}" disable-edit="true" height="landscape.130px, portrait.100px" width="125px" visible="true" value="${number4}" string="${number4}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
+						</lido-text>
+					</lido-image>
+				</lido-cell>
+			</lido-cell>
+
+			<!-- answers drag cell -->
+			<lido-cell layout="row" aria-hidden="true" visible="true" height="landscape.40%,portrait.20%" width="landscape.60%, portarit.90%" bg-Color="transparent" margin="landscape.530px 0px 0px 0px,portrait.-135px 0px 290px 0px" onEntry="this.z-index='1';" gap="landscape.5px, portrait.10px">
+				${dragCells}
+			</lido-cell>
+		</lido-container>
+    </main>
   `;
 }

package/dist/collection/stories/Templates/shapePair/shape-pair.stories.js

@@ -2,6 +2,8 @@ import { html } from "lit";
 const meta = {
     title: 'Templates/shapePair',
     argTypes: {
+        isAllowOnlyCorrect: { control: 'boolean' },
+        isContinueOnCorrect: { control: 'boolean' },
         question: { control: 'text' },
         questionAudio: { control: {
                 type: 'file',
@@ -40,9 +42,11 @@ const meta = {
     },
 };
 export default meta;
-export const NumberPair = {
+export const ShapePair = {
     args: {
         question: 'Drag the cards with the same shape together.',
+        isAllowOnlyCorrect: true,
+        isContinueOnCorrect: true,
         dropimg1: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/matchinggame_triangle_level1_large.png',
         droptext1: '',
         dropimg2: '',
@@ -74,111 +78,111 @@ export const NumberPair = {
     },
 };
 function getContainerXml(args) {
-    return `<main>
-    <lido-container id="lido-container" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" is-allow-only-correct="true" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/bg-image.png" dropAttr="EnableAnimation" custom-style="#heading,#drag1,#drag2,#drag3,#drag4,#drag5,#drag6,#drag7,#drop1,#drop2,#drop3,#drop4,#drop5,#drop6,#drop7{box-shadow: none !important;}">
-				<!-- Chimple Avatar -->
-		<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="landscape.205px,portrait.195px" width="landscape.209px,portrait.209px" x="landscape.2%,portrait.80%" y="landscape.85px,portrait.146px" ariaHidden="true" bgColor="transparent" visible="true"  onEntry="">
-				<lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="100%"  width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}">
-				</lido-avatar>
-		</lido-cell>
-			<!-- heading -->
-			<lido-text id="heading" audio="" width="landscape.auto,portrait.70%" tabIndex="20" visible="true" string="${args.question}" font-family="'Baloo Bhai 2'" fontColor="#323232" font-size="landscape.36px,portrait.36px" bg-Color="transparent" onEntry="this.padding='0px 45px';this.fontWeight='600';this.speak='true'"  margin="landscape.120px 0px -25px 0px, portrait.160px 0px -39px 0px">
-			</lido-text>
-		<lido-cell visible="true" flex-direction="landscape., portrait.row-reverse" bg-color="transparent" layout="portrait.row,landscape.col" width="100%" height="100%" onEntry="">
-			
-			<lido-cell visible="true" margin="20px 0px 0px 0px" bg-color="transparent" layout="landscape.row,portrait.col" height="landscape.50%,portrait.96%" width="landscape.100%,portrait.100%" onEntry="this.gap='10px';">
-				
-				${(args.dropimg1.length === 0 && args.droptext1.length === 0) ? '' : `<lido-cell layout="row" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="">
-					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="">
-						<lido-cell id="image1" audio="" value="${args.correct1}" tab-index="1" height="landscape.268px,portrait.240px" width="landscape.268px,portrait.240px" type="drop" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px'; this.borderRadius='8px';" 
-						>
-							${!args.dropimg1 || args.dropimg1.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.126%,portrait.126%" height="landscape.100%,portrait.100%" bg-color="transparent" src="${args.dropimg1}"></lido-image>`}
-
-							${!args.droptext1 || args.droptext1 === "" ? '' : `<lido-text id="drop1" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.60px,portrait.55px" string="${args.droptext1}" bg-Color="transparent" onEntry="this.fontWeight='600';"></lido-text>`}
-							
-						</lido-cell>
-					</lido-cell>
-				</lido-cell>`}
-
-				${(args.dropimg2.length === 0 && args.droptext2.length === 0) ? '' : `<lido-cell layout="row" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='6px';">
-					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="">
-						<lido-cell id="image2" class="boxShadow" audio="" value="${args.correct2}" tab-index="2" isAllowOnlyOneDrop="true" disable-edit="true" height="landscape.268px,portrait.240px" width="landscape.268px,portrait.240px" type="drop" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';this.borderRadius='8px';" onCorrect="this.speak='true'">
-							${!args.dropimg2 || args.dropimg2.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.126%,portrait.126%" height="landscape.100%,portrait.100%" bg-color="transparent" src="${args.dropimg2}"></lido-image>`}
-
-							${!args.droptext2 || args.droptext2 === "" ? '' : `<lido-text id="drop2" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.60px,portrait.55px" string="${args.droptext2}" bg-Color="transparent" onEntry="this.fontWeight='600';"></lido-text>`}
-						</lido-cell>
-					</lido-cell>
-				</lido-cell>`}
-
-				${(args.dropimg3.length === 0 && args.droptext3.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.50px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='5px';">
-					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="">
-						<lido-cell type="drop" audio="" id="image3" tab-index="3" isAllowOnlyOneDrop="true" disable-edit="true" value="${args.correct3}" height="landscape.268px,portrait.240px" width="landscape.268px,portrait.240px" layout="col" visible="true" bg-Color="white" 
-						onEntry="this.padding='0px';this.borderRadius='8px';" onCorrect="this.speak='true'">
-							${!args.dropimg3 || args.dropimg3.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.126%,portrait.126%" height="landscape.100%,portrait.100%" bg-color="transparent" src="${args.dropimg3}"></lido-image>`}
-
-							${!args.droptext3 || args.droptext3 === "" ? '' : `<lido-text id="drop3" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.60px,portrait.55px" string="${args.droptext3}" bg-Color="transparent" onEntry="this.fontWeight='600';" ></lido-text>`}
-						</lido-cell>
-					</lido-cell>
-				</lido-cell>`}
-
-
-				${(args.dropimg4.length === 0 && args.droptext4.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='6px';">
-					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="this.display='flex';">
-						<lido-cell id="image4" audio="" value="${args.correct4}" isAllowOnlyOneDrop="true" disable-edit="true" tab-index="4" height="landscape.268px,portrait.240px" width="landscape.268px,portrait.240px" type="drop" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';this.borderRadius='8px';"
-						onCorrect="this.speak='true'">
-							${!args.dropimg4 || args.dropimg4.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.126%,portrait.126%" height="landscape.100%,portrait.100%" bg-color="transparent" src="${args.dropimg4}"></lido-image>`}
-
-							${!args.droptext4 || args.droptext4 === "" ? '' : `<lido-text id="drop4" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.60px,portrait.55px" string="${args.droptext4}" bg-Color="transparent" onEntry="this.fontWeight='600';" ></lido-text>`}
-						</lido-cell>
-					</lido-cell>
-				</lido-cell>`}
-			</lido-cell>
-
-
-
-
-			<lido-cell visible="true" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" bg-color="transparent" layout="landscape.row,portrait.col" height="landscape.40%,portrait.96%" width="100%" onEntry="">
-				${(args.dragimg1.length === 0 && args.dragtext1.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="">
-					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent">
-						<lido-cell border-radius="8px" class="boxShadow" audio="" id="option1" value="${args.option1}" tab-index="6" height="landscape.268px,portrait.240px" width="landscape.268px,portrait.240px" type="drag" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';">
-							${!args.dragimg1 || args.dragimg1.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.126%,portrait.126%" height="landscape.100%,portrait.100%" bg-color="transparent" src="${args.dragimg1}"></lido-image>`}
-
-							${!args.dragtext1 || args.dragtext1 === "" ? '' : `<lido-text id="drag1" class="boxShadow" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.60px,portrait.55px" string="${args.dragtext1}" bg-Color="transparent" onEntry="this.fontWeight='600';"></lido-text>`}
-						</lido-cell>
-					</lido-cell>
-				</lido-cell>`}
-
-				${(args.dragimg2.length === 0 && args.dragtext2.length === 0) ? '' : `<lido-cell layout="row" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='2px';">
-					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="">
-						<lido-cell border-radius="8px" audio="" id="option2" value="${args.option2}" tab-index="7" height="landscape.268px,portrait.240px" width="landscape.268px,portrait.240px" type="drag" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';this.justifyContent='center'; ">
-							${!args.dragimg2 || args.dragimg2.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.126%,portrait.126%" height="landscape.100%,portrait.100%" bg-color="transparent" src="${args.dragimg2}"></lido-image>`}
-
-							${!args.dragtext2 || args.dragtext2 === "" ? '' : `<lido-text id="drag2" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.60px,portrait.55px" string="${args.dragtext2}" bg-Color="transparent" onEntry="this.fontWeight='600';"></lido-text>`}
-						</lido-cell>
-					</lido-cell>
-				</lido-cell>`}
-
-				${(args.dragimg3.length === 0 && args.dragtext3.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='2px';">
-					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="this.display='flex';">
-						<lido-cell border-radius="8px" id="option3" audio="" value="${args.option3}" tab-index="8" height="landscape.268px,portrait.240px" width="landscape.268px,portrait.240px" type="drag" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px'; ">
-							${!args.dragimg3 || args.dragimg3.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.126%,portrait.126%" height="landscape.100%,portrait.100%" bg-color="transparent" src="${args.dragimg3}"></lido-image>`}
-
-							${!args.dragtext3 || args.dragtext3 === "" ? '' : `<lido-text id="drag3" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.60px,portrait.55px" string="${args.dragtext3}" bg-Color="transparent" onEntry="this.fontWeight='600';" ></lido-text>`}
-						</lido-cell>
-					</lido-cell>
-				</lido-cell>`}
-
-				${(args.dragimg4.length === 0 && args.dragtext4.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='2px';">
-					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="this.display='flex';">
-						<lido-cell border-radius="8px" id="option4" audio="" value="${args.option4}" tab-index="9" height="landscape.268px,portrait.240px" width="landscape.268px,portrait.240px" type="drag" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';">
-							${!args.dragimg4 || args.dragimg4.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.126%,portrait.126%" height="landscape.100%,portrait.100%" bg-color="transparent" src="${args.dragimg4}"></lido-image>`}
-
-							${!args.dragtext4 || args.dragtext4 === "" ? '' : `<lido-text id="drag4" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.60px,portrait.55px" string="${args.dragtext4}" bg-Color="transparent" onEntry="this.fontWeight='600';"></lido-text>`}
-						</lido-cell>
-					</lido-cell>
-				</lido-cell>`}
-			</lido-cell>
-		</lido-cell>
-	</lido-container>
+    return `<main>
+    <lido-container id="lido-container" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" is-allow-only-correct="${args.isAllowOnlyCorrect}" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/bg-image.png" dropAttr="EnableAnimation" custom-style="#heading,#drag1,#drag2,#drag3,#drag4,#drag5,#drag6,#drag7,#drop1,#drop2,#drop3,#drop4,#drop5,#drop6,#drop7{box-shadow: none !important;}" is-continue-on-correct="${args.isContinueOnCorrect}">
+				<!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="landscape.205px,portrait.195px" width="landscape.209px,portrait.209px" x="landscape.2%,portrait.80%" y="landscape.85px,portrait.146px" ariaHidden="true" bgColor="transparent" visible="true"  onEntry="">
+				<lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="100%"  width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}">
+				</lido-avatar>
+		</lido-cell>
+			<!-- heading -->
+			<lido-text id="heading" audio="" width="landscape.auto,portrait.70%" tabIndex="20" visible="true" string="${args.question}" font-family="'Baloo Bhai 2'" fontColor="#323232" font-size="landscape.36px,portrait.36px" bg-Color="transparent" onEntry="this.padding='0px 45px';this.fontWeight='600';this.speak='true'"  margin="landscape.120px 0px -25px 0px, portrait.160px 0px -39px 0px">
+			</lido-text>
+		<lido-cell visible="true" flex-direction="landscape., portrait.row-reverse" bg-color="transparent" layout="portrait.row,landscape.col" width="100%" height="100%" onEntry="">
+			
+			<lido-cell visible="true" margin="20px 0px 0px 0px" bg-color="transparent" layout="landscape.row,portrait.col" height="landscape.50%,portrait.96%" width="landscape.100%,portrait.100%" onEntry="this.gap='10px';">
+				
+				${(args.dropimg1.length === 0 && args.droptext1.length === 0) ? '' : `<lido-cell layout="row" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="">
+						<lido-cell id="image1" audio="" value="${args.correct1}" tab-index="1" height="landscape.268px,portrait.240px" width="landscape.268px,portrait.240px" type="drop" onCorrect="lido-avatar.avatarAnimate='Success'; this.speak='true'" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='1000';"  layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px'; this.borderRadius='8px';" 
+						>
+							${!args.dropimg1 || args.dropimg1.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.126%,portrait.126%" height="landscape.100%,portrait.100%" bg-color="transparent" src="${args.dropimg1}"></lido-image>`}
+
+							${!args.droptext1 || args.droptext1 === "" ? '' : `<lido-text id="drop1" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.60px,portrait.55px" string="${args.droptext1}" bg-Color="transparent" onEntry="this.fontWeight='600';"></lido-text>`}
+							
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+
+				${(args.dropimg2.length === 0 && args.droptext2.length === 0) ? '' : `<lido-cell layout="row" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='6px';">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="">
+						<lido-cell id="image2" class="boxShadow" audio="" value="${args.correct2}" tab-index="2" isAllowOnlyOneDrop="true" disable-edit="true" height="landscape.268px,portrait.240px" width="landscape.268px,portrait.240px" type="drop"  layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';this.borderRadius='8px';" onCorrect="lido-avatar.avatarAnimate='Success'; this.speak='true'" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='1000';">
+							${!args.dropimg2 || args.dropimg2.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.126%,portrait.126%" height="landscape.100%,portrait.100%" bg-color="transparent" src="${args.dropimg2}"></lido-image>`}
+
+							${!args.droptext2 || args.droptext2 === "" ? '' : `<lido-text id="drop2" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.60px,portrait.55px" string="${args.droptext2}" bg-Color="transparent" onEntry="this.fontWeight='600';"></lido-text>`}
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+
+				${(args.dropimg3.length === 0 && args.droptext3.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.50px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='5px';">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="">
+						<lido-cell type="drop"  audio="" id="image3" tab-index="3" isAllowOnlyOneDrop="true" disable-edit="true" value="${args.correct3}" height="landscape.268px,portrait.240px" width="landscape.268px,portrait.240px" layout="col" visible="true" bg-Color="white" 
+						onEntry="this.padding='0px';this.borderRadius='8px';" onCorrect="lido-avatar.avatarAnimate='Success'; this.speak='true'" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='1000';">
+							${!args.dropimg3 || args.dropimg3.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.126%,portrait.126%" height="landscape.100%,portrait.100%" bg-color="transparent" src="${args.dropimg3}"></lido-image>`}
+
+							${!args.droptext3 || args.droptext3 === "" ? '' : `<lido-text id="drop3" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.60px,portrait.55px" string="${args.droptext3}" bg-Color="transparent" onEntry="this.fontWeight='600';" ></lido-text>`}
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+
+
+				${(args.dropimg4.length === 0 && args.droptext4.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='6px';">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="this.display='flex';">
+						<lido-cell id="image4" audio="" value="${args.correct4}" isAllowOnlyOneDrop="true" disable-edit="true" tab-index="4" height="landscape.268px,portrait.240px" width="landscape.268px,portrait.240px" type="drop"  layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';this.borderRadius='8px';"
+						onCorrect="lido-avatar.avatarAnimate='Success'; this.speak='true'" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='1000';">
+							${!args.dropimg4 || args.dropimg4.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.126%,portrait.126%" height="landscape.100%,portrait.100%" bg-color="transparent" src="${args.dropimg4}"></lido-image>`}
+
+							${!args.droptext4 || args.droptext4 === "" ? '' : `<lido-text id="drop4" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.60px,portrait.55px" string="${args.droptext4}" bg-Color="transparent" onEntry="this.fontWeight='600';" ></lido-text>`}
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+			</lido-cell>
+
+
+
+
+			<lido-cell visible="true" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" bg-color="transparent" layout="landscape.row,portrait.col" height="landscape.40%,portrait.96%" width="100%" onEntry="">
+				${(args.dragimg1.length === 0 && args.dragtext1.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent">
+						<lido-cell border-radius="8px" class="boxShadow" audio="" id="option1" value="${args.option1}" tab-index="6" height="landscape.268px,portrait.240px" width="landscape.268px,portrait.240px" type="drag" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';">
+							${!args.dragimg1 || args.dragimg1.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.126%,portrait.126%" height="landscape.100%,portrait.100%" bg-color="transparent" src="${args.dragimg1}"></lido-image>`}
+
+							${!args.dragtext1 || args.dragtext1 === "" ? '' : `<lido-text id="drag1" class="boxShadow" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.60px,portrait.55px" string="${args.dragtext1}" bg-Color="transparent" onEntry="this.fontWeight='600';"></lido-text>`}
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+
+				${(args.dragimg2.length === 0 && args.dragtext2.length === 0) ? '' : `<lido-cell layout="row" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='2px';">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="">
+						<lido-cell border-radius="8px" audio="" id="option2" value="${args.option2}" tab-index="7" height="landscape.268px,portrait.240px" width="landscape.268px,portrait.240px" type="drag" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';this.justifyContent='center'; ">
+							${!args.dragimg2 || args.dragimg2.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.126%,portrait.126%" height="landscape.100%,portrait.100%" bg-color="transparent" src="${args.dragimg2}"></lido-image>`}
+
+							${!args.dragtext2 || args.dragtext2 === "" ? '' : `<lido-text id="drag2" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.60px,portrait.55px" string="${args.dragtext2}" bg-Color="transparent" onEntry="this.fontWeight='600';"></lido-text>`}
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+
+				${(args.dragimg3.length === 0 && args.dragtext3.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='2px';">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="this.display='flex';">
+						<lido-cell border-radius="8px" id="option3" audio="" value="${args.option3}" tab-index="8" height="landscape.268px,portrait.240px" width="landscape.268px,portrait.240px" type="drag" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px'; ">
+							${!args.dragimg3 || args.dragimg3.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.126%,portrait.126%" height="landscape.100%,portrait.100%" bg-color="transparent" src="${args.dragimg3}"></lido-image>`}
+
+							${!args.dragtext3 || args.dragtext3 === "" ? '' : `<lido-text id="drag3" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.60px,portrait.55px" string="${args.dragtext3}" bg-Color="transparent" onEntry="this.fontWeight='600';" ></lido-text>`}
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+
+				${(args.dragimg4.length === 0 && args.dragtext4.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='2px';">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="this.display='flex';">
+						<lido-cell border-radius="8px" id="option4" audio="" value="${args.option4}" tab-index="9" height="landscape.268px,portrait.240px" width="landscape.268px,portrait.240px" type="drag" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';">
+							${!args.dragimg4 || args.dragimg4.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.126%,portrait.126%" height="landscape.100%,portrait.100%" bg-color="transparent" src="${args.dragimg4}"></lido-image>`}
+
+							${!args.dragtext4 || args.dragtext4 === "" ? '' : `<lido-text id="drag4" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.60px,portrait.55px" string="${args.dragtext4}" bg-Color="transparent" onEntry="this.fontWeight='600';"></lido-text>`}
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+			</lido-cell>
+		</lido-cell>
+	</lido-container>
 	</main>`;
 }

package/dist/collection/stories/Templates/shapeTractor/shape-tractor.stories.js

@@ -145,17 +145,17 @@ export const ShapeTractorFour = {
 function createLidoImage({ id, type, value, src, tabIndex }) {
     const dropSrc = "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/box_answer_soundtrain_trans.png";
     const finalSrc = type === "drop" ? dropSrc : src || "";
-    return `
-    <lido-image
-      id="${id}"
-      ${tabIndex ? `tab-index="${tabIndex}"` : ""}
-      value="${value || ""}"
-      src="${finalSrc}"
-      visible="true"
-      type="${type || ""}"
-      width="landscape.140px,portrait.120px"
-      ${type === "drop" ? `onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'"` : ""}
-    ></lido-image>
+    return `
+    <lido-image
+      id="${id}"
+      ${tabIndex ? `tab-index="${tabIndex}"` : ""}
+      value="${value || ""}"
+      src="${finalSrc}"
+      visible="true"
+      type="${type || ""}"
+      width="landscape.140px,portrait.120px"
+      ${type === "drop" ? `onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'"` : ""}
+    ></lido-image>
   `;
 }
 function getContainerXml({ blocks, options }) {
@@ -168,46 +168,46 @@ function getContainerXml({ blocks, options }) {
     const truckBlocks = blocks
         .map((block, i) => {
         const images = block.map(img => createLidoImage(Object.assign(Object.assign({}, img), { tabIndex: tabCounter++ }))).join("");
-        return `
-        <lido-cell id="block${i + 1}" visible="true" width="landscape.400px,portrait.250px" layout="col" bg-color="transparent" margin="landscape.0px 0px 0px -65px,portrait.97px 0px 0px 0px"  >
-				<lido-cell visible="true" layout="row" bg-color="transparent" margin="landscape.180px 0px -130px 0px,portrait.95px 0px 0px 0px" gap="15px">
-				  ${images}
-          </lido-cell>
-          <lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/trolly_drop_soundtrain_2block.png" width="landscape.350px,portrait.350"></lido-image>
-        </lido-cell>
+        return `
+        <lido-cell id="block${i + 1}" visible="true" width="landscape.400px,portrait.250px" layout="col" bg-color="transparent" margin="landscape.0px 0px 0px -65px,portrait.97px 0px 0px 0px"  >
+				<lido-cell visible="true" layout="row" bg-color="transparent" margin="landscape.180px 0px -130px 0px,portrait.95px 0px 0px 0px" gap="15px">
+				  ${images}
+          </lido-cell>
+          <lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/trolly_drop_soundtrain_2block.png" width="landscape.350px,portrait.350"></lido-image>
+        </lido-cell>
       `;
     })
         .join("");
     const optionCells = options
         .map(option => createLidoImage(Object.assign(Object.assign({}, option), { tabIndex: tabCounter++ })))
         .join("");
-    return `
-    <main>
-     <lido-container id="lido-container" is-allow-only-correct="true" show-Check="false" is-Continue-On-Correct="true" after-Drop="false" objective="${dropValues}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/Spring.png" custom-style="#drop1, #drop2{border: none !important;}"  onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; answer.visible='false';  lido-avatar.animation='placeToLeft 2.5s linear'; answer.animation='placeToLeft 2.5s linear';  truck.animation='placeToLeft 2.5s linear'; trainAudio.speak='true'" onInCorrect="lido-avatar.avatarAnimate='Fail';" >
-			<!-- Chimple Avatar -->
-		<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="300px" width="300px" x="landscape.110px,portrait.10px" y="landscape.80px,portrait.230px" ariaHidden="true" bgColor="transparent" visible="true"  onEntry=" this.animation='rightToPlace 2.5s linear';">
-				<lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="100%"  width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}">
-				</lido-avatar>
-		</lido-cell>
-
-        <lido-cell visible="true" id="truck" layout="row" height="landscape.60%, portrait.60%" width="landscape.100%, portrait.100%" bg-color="transparent"  onEntry=" this.animation='rightToPlace 2.5s linear';" onCorrect="" >
-		  	<lido-text id="question" visible="false" string="complete the pattern using the blocks given below" value="complete the pattern using the blocks given below" onEntry="this.sleep='2000';this.speak='true';"></lido-text>
-			<lido-text id="trainAudio" visible="false" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/train1.m4a" onEntry="this.speak='true';"></lido-text>
-			
-		  <lido-cell visible="true" layout="row" bg-color="transparent" gap="0px"   margin="landscape.220px 0px 0px 0px,portrait.977px 0px 0px -200px">
-			
-			<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/truck_bg_soundtrain.png" width="landscape.220px,portrait.250px" padding="0px" margin="72px 0px 0px 0px"></lido-image>
-			${truckBlocks}
-          </lido-cell>
-        </lido-cell>
-
-        <lido-cell visible="true" id="answer" layout="row" height="landscape.40%,portrait.40%" width="landscape.50%,portrait.50%" bg-color="transparent" onEntry="this.alignItems='center';this.justify-content='space-around';this.animation='rightToPlace 2.5s linear'">
-          ${optionCells}
-        </lido-cell>
-      </lido-container>
-
-      
-     
-    </main>
+    return `
+    <main>
+     <lido-container id="lido-container" is-allow-only-correct="true" show-Check="false" is-Continue-On-Correct="true" after-Drop="false" objective="${dropValues}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/Spring.png" custom-style="#drop1, #drop2{border: none !important;}"  onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; answer.visible='false';  lido-avatar.animation='placeToLeft 2.5s linear'; answer.animation='placeToLeft 2.5s linear';  truck.animation='placeToLeft 2.5s linear'; trainAudio.speak='true'" onInCorrect="lido-avatar.avatarAnimate='Fail';" >
+			<!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="300px" width="300px" x="landscape.110px,portrait.10px" y="landscape.80px,portrait.230px" ariaHidden="true" bgColor="transparent" visible="true"  onEntry=" this.animation='rightToPlace 2.5s linear';">
+				<lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="100%"  width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}">
+				</lido-avatar>
+		</lido-cell>
+
+        <lido-cell visible="true" id="truck" layout="row" height="landscape.60%, portrait.60%" width="landscape.100%, portrait.100%" bg-color="transparent"  onEntry=" this.animation='rightToPlace 2.5s linear';" onCorrect="" >
+		  	<lido-text id="question" visible="false" string="complete the pattern using the blocks given below" value="complete the pattern using the blocks given below" onEntry="this.sleep='2000';this.speak='true';"></lido-text>
+			<lido-text id="trainAudio" visible="false" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/train1.m4a" onEntry="this.speak='true';"></lido-text>
+			
+		  <lido-cell visible="true" layout="row" bg-color="transparent" gap="0px"   margin="landscape.220px 0px 0px 0px,portrait.977px 0px 0px -200px">
+			
+			<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/truck_bg_soundtrain.png" width="landscape.220px,portrait.250px" padding="0px" margin="72px 0px 0px 0px"></lido-image>
+			${truckBlocks}
+          </lido-cell>
+        </lido-cell>
+
+        <lido-cell visible="true" id="answer" layout="row" height="landscape.40%,portrait.40%" width="landscape.50%,portrait.50%" bg-color="transparent" onEntry="this.alignItems='center';this.justify-content='space-around';this.animation='rightToPlace 2.5s linear'">
+          ${optionCells}
+        </lido-cell>
+      </lido-container>
+
+      
+     
+    </main>
   `;
 }