lido-player 0.0.2-beta-18-dev → 0.0.2-beta-21-dev

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

@@ -26,48 +26,48 @@ export const FillAnswer = {
     },
 };
 function getContainerXml(args) {
-    return `
-    <main>
-		<lido-container id="lido-container" is-allow-only-correct="${args.isAllowOnlyCorrect}"  value="mainContainer1" tab-index="1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Fill%20answer.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 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" audio="" tab-index="2" 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="3" 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="4" 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="5" 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="6" 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="7" 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';" onTouch="this.speak='true';" onCorrect="this.speak='true';" >
-					</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" onTouch="this.speak='true';" onCorrect="this.speak='true';"  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" onTouch="this.speak='true';" onCorrect="this.speak='true';" 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" onTouch="this.speak='true';" onCorrect="this.speak='true';" 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" onTouch="this.speak='true';" onCorrect="this.speak='true';"  type="drag">
-					</lido-text>
-				</lido-cell>
-			
-			</lido-cell>
-		</lido-container>
-    </main>
+    return `
+    <main>
+		<lido-container id="lido-container" is-allow-only-correct="${args.isAllowOnlyCorrect}"  value="mainContainer1" tab-index="1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Fill%20answer.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 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" audio="" tab-index="2" 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="3" 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="4" 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="5" 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="6" 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="7" 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';" onTouch="this.speak='true';" onCorrect="this.speak='true';" >
+					</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" onTouch="this.speak='true';" onCorrect="this.speak='true';"  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" onTouch="this.speak='true';" onCorrect="this.speak='true';" 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" onTouch="this.speak='true';" onCorrect="this.speak='true';" 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" onTouch="this.speak='true';" onCorrect="this.speak='true';"  type="drag">
+					</lido-text>
+				</lido-cell>
+			
+			</lido-cell>
+		</lido-container>
+    </main>
   `;
 }