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

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

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

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

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

package/dist/collection/stories/Templates/fillAnswer/fill-answer.stories.js

@@ -25,42 +25,42 @@ 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/fill-in-the-blanks/cloud.png" objective="${args.answer}" 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">
-		<!-- 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.1267px, portrait.541px" y="landscape.587px, portrait.1304px" 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>
-
-		<!--Parent cell  -->
-		<lido-cell layout="col" visible="true" width="100%" height="100%" bg-color="transparent">
-			<!-- heading -->
-			<lido-cell audio="" layout="row" visible="true" width="landscape.45%, portrait.69%" height="landscape.15%, portrait.auto" bg-color="white"  onEntry="this.borderRadius='10px'; this.padding='8px';this.animation='topToPlace 2.5s linear';" margin="landscape.110px 0px 0px 0px , portrait.400px 0px 0px 0px">
-			<lido-text id="question" visible="false" string="solve the problem and select the correct answer from below" value="solve the problem and select the correct answer from below" onEntry="this.sleep='2000';this.speak='true';"></lido-text>
-			
-					<lido-text tab-index="1" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.firstNum}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='600';this.display='inline'; this.padding='0px 20px 0px 0px'; "></lido-text>
-					<lido-text tab-index="2" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.operator}" bg-color="transparent" onEntry="this.position='relative';this.fontWeight='600';this.display='inline';this.boxShadow='0 0 0'; this.padding='0px 21px 0px 0px';"></lido-text>
-					<lido-text tab-index="3" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.secontNum}" bg-color="transparent" onEntry="this.position='relative';this.fontWeight='600';this.display='inline';this.boxShadow='0 0 0'; this.padding='0px 21px 0px 0px';"></lido-text>
-					<lido-text tab-index="4" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.equator}" bg-color="transparent" onEntry="this.position='relative';this.fontWeight='600';this.display='inline';this.boxShadow='0 0 0'; this.padding='0px 21px 0px 0px';"></lido-text>
-					<lido-text tab-index="5" id="drop1" disable-edit="true" visible="true" width="164px" height="landscape.73px,portrait.77px" value="${args.answer}"  type="drop" is-allow-only-one-drop="true" drop-Attr="stretch" onEntry="this.border-radius='10px';this.box-shoadow=''; this.margin-right='35px';" ></lido-text>
-					
-				
-			</lido-cell>
-			<lido-cell layout="row" childElementsLength="4" onEntry="this.gap='28px'; this.animation='rightToPlace 2.5s linear';   this.gridTemplateColumns = 'repeat(2, 1fr)';  this.gridTemplateRows = 'repeat(2, 1fr)';" visible="true" margin="landscape.6px 25px 74px 0px, portrait.-170px 128px 0px 117px">
-				<lido-text  font-family="'Baloo Bhai 2'" audio="" id="option1" value="${args.option1}" tab-index="14" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px';  this.fontWeight='600';" width="auto" height="landscape.87px, portrait.91px" string="${args.option1}" fontColor="black" font-size="88px"   type="drag">
-				</lido-text>
-				<lido-text  font-family="'Baloo Bhai 2'" audio="" id="option2" value="${args.option2}" tab-index="15" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px';  this.fontWeight='600'; " width="auto" height="landscape.87px, portrait.91px" string="${args.option2}" fontColor="black" font-size="88px"  type="drag">
-				</lido-text>
-				<lido-text  font-family="'Baloo Bhai 2'" audio="" id="option3" value="${args.option3}" tab-index="16" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px'; this.fontWeight='600'; " width="auto" height="landscape.87px, portrait.91px" string="${args.option3}" fontColor="black" font-size="88px" type="drag">
-				</lido-text>
-				<lido-text  font-family="'Baloo Bhai 2'" audio="" id="option4" value="${args.option4}" tab-index="17" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px';  this.fontWeight='600';" width="auto" height="landscape.87px, portrait.91px" string="${args.option4}" fontColor="black" font-size="88px"   type="drag">
-				</lido-text>
-			</lido-cell>
-			
-		</lido-cell>
-	</lido-container>
-    </main>
+    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/fill-in-the-blanks/cloud.png" objective="${args.answer}" 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">
+		<!-- 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.1267px, portrait.541px" y="landscape.587px, portrait.1304px" 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>
+
+		<!--Parent cell  -->
+		<lido-cell layout="col" visible="true" width="100%" height="100%" bg-color="transparent">
+			<!-- heading -->
+			<lido-cell audio="" layout="row" visible="true" width="landscape.45%, portrait.69%" height="landscape.15%, portrait.auto" bg-color="white"  onEntry="this.borderRadius='10px'; this.padding='8px';this.animation='topToPlace 2.5s linear';" margin="landscape.110px 0px 0px 0px , portrait.400px 0px 0px 0px">
+			<lido-text id="question" visible="false" string="solve the problem and select the correct answer from below" value="solve the problem and select the correct answer from below" onEntry="this.sleep='2000';this.speak='true';"></lido-text>
+			
+					<lido-text tab-index="1" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.firstNum}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='600';this.display='inline'; this.padding='0px 20px 0px 0px'; "></lido-text>
+					<lido-text tab-index="2" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.operator}" bg-color="transparent" onEntry="this.position='relative';this.fontWeight='600';this.display='inline';this.boxShadow='0 0 0'; this.padding='0px 21px 0px 0px';"></lido-text>
+					<lido-text tab-index="3" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.secontNum}" bg-color="transparent" onEntry="this.position='relative';this.fontWeight='600';this.display='inline';this.boxShadow='0 0 0'; this.padding='0px 21px 0px 0px';"></lido-text>
+					<lido-text tab-index="4" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.equator}" bg-color="transparent" onEntry="this.position='relative';this.fontWeight='600';this.display='inline';this.boxShadow='0 0 0'; this.padding='0px 21px 0px 0px';"></lido-text>
+					<lido-text tab-index="5" id="drop1" disable-edit="true" visible="true" width="164px" height="landscape.73px,portrait.77px" value="${args.answer}"  type="drop" is-allow-only-one-drop="true" drop-Attr="stretch" onEntry="this.border-radius='10px';this.box-shoadow=''; this.margin-right='35px';" ></lido-text>
+					
+				
+			</lido-cell>
+			<lido-cell layout="row" childElementsLength="4" onEntry="this.gap='28px'; this.animation='rightToPlace 2.5s linear';   this.gridTemplateColumns = 'repeat(2, 1fr)';  this.gridTemplateRows = 'repeat(2, 1fr)';" visible="true" margin="landscape.6px 25px 74px 0px, portrait.-170px 128px 0px 117px">
+				<lido-text  font-family="'Baloo Bhai 2'" audio="" id="option1" value="${args.option1}" tab-index="14" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px';  this.fontWeight='600';" width="auto" height="landscape.87px, portrait.91px" string="${args.option1}" fontColor="black" font-size="88px"   type="drag">
+				</lido-text>
+				<lido-text  font-family="'Baloo Bhai 2'" audio="" id="option2" value="${args.option2}" tab-index="15" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px';  this.fontWeight='600'; " width="auto" height="landscape.87px, portrait.91px" string="${args.option2}" fontColor="black" font-size="88px"  type="drag">
+				</lido-text>
+				<lido-text  font-family="'Baloo Bhai 2'" audio="" id="option3" value="${args.option3}" tab-index="16" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px'; this.fontWeight='600'; " width="auto" height="landscape.87px, portrait.91px" string="${args.option3}" fontColor="black" font-size="88px" type="drag">
+				</lido-text>
+				<lido-text  font-family="'Baloo Bhai 2'" audio="" id="option4" value="${args.option4}" tab-index="17" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px';  this.fontWeight='600';" width="auto" height="landscape.87px, portrait.91px" string="${args.option4}" fontColor="black" font-size="88px"   type="drag">
+				</lido-text>
+			</lido-cell>
+			
+		</lido-cell>
+	</lido-container>
+    </main>
   `;
 }