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

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

@@ -28,59 +28,59 @@ export const quizLiteracy = {
 };
 function getContainerXml(args) {
     let tabCounter = 1;
-    return `<main>
-   <lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answers}"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Quiz%20literacy.png"  onEntry="" is-Continue-On-Correct="true" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';">
-	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.290px,portrait.364px" width="landscape.278px,portrait.386px" x="landscape.72%, portrait.31%" y="landscape.10%, portrait.80%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
-		<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/temp1/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" bg-color="transparent">
-		</lido-avatar>
-		<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/Shadow.png" bg-color="transparent" width="165px" height="30px" x="landscape.54px,portrait.109px" y="landscape.239px,portrait.314px" alt-text="{shadowImgae}">
-		</lido-image>
-	</lido-cell>
-	<lido-cell layout="col" visible="true" bg-Color="transparent" width="90%" height="53%" margin="landscape.-177px 0px 0px 0px,portrait.-467px 0px -149px">
-		<lido-cell layout="flex" visible="true" width="100%" height="300px" bg-Color="transparent"
-  onEntry="this.align-items='center'; this.justify-content='center';">
-
+    return `<main>
+   <lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answers}"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Quiz%20literacy.png"  onEntry="" is-Continue-On-Correct="true" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';">
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.290px,portrait.364px" width="landscape.278px,portrait.386px" x="landscape.72%, portrait.31%" y="landscape.10%, portrait.80%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
+		<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/temp1/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" bg-color="transparent">
+		</lido-avatar>
+		<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/Shadow.png" bg-color="transparent" width="165px" height="30px" x="landscape.54px,portrait.109px" y="landscape.239px,portrait.314px" alt-text="{shadowImgae}">
+		</lido-image>
+	</lido-cell>
+	<lido-cell layout="col" visible="true" bg-Color="transparent" width="90%" height="53%" margin="landscape.-177px 0px 0px 0px,portrait.-467px 0px -149px">
+		<lido-cell layout="flex" visible="true" width="100%" height="300px" bg-Color="transparent"
+  onEntry="this.align-items='center'; this.justify-content='center';">
+
   ${args.text && args.text.length > 0
-        ? `<lido-text visible="true" id="answer${tabCounter}"  
-        tab-index="${tabCounter++}" font-size="140px"
-        bg-color="#FFF5BB" audio="" border-radius="12px"
-        font-color="black" height="200px" width="auto"
-        string="${args.text}" margin="landscape.0px,portrait.-131px 0px 0px 0px" 
-        value="${args.text}" type="text"
-        onEntry="this.border='6px solid #FFB612';this.font-weight='500';this.padding='0px 64px';">
+        ? `<lido-text visible="true" id="answer${tabCounter}"  
+        tab-index="${tabCounter++}" font-size="140px"
+        bg-color="#FFF5BB" audio="" border-radius="12px"
+        font-color="black" height="200px" width="auto"
+        string="${args.text}" margin="landscape.0px,portrait.-131px 0px 0px 0px" 
+        value="${args.text}" type="text"
+        onEntry="this.border='6px solid #FFB612';this.font-weight='500';this.padding='0px 64px';">
      </lido-text>`
         : args.image && args.image.length > 0
-            ? `<lido-cell visible="true" height="200px" value="${args.answers}" width="200px" border-radius="7px"
-        bg-color="white" margin="landscape.12px 0px 0px 0px, portrait.0px 0px 0px 0px"
-        onEntry="this.display='flex'; this.align-items='center'; this.justifyContent='center';this.border='4px solid #FFB612';">
-        <lido-image audio="" visible="true"
-          width="landscape.200px,portrait.200px"
-          height="landscape.200px,portrait.200px"
-          border-radius="7px" bg-color="white"
-          src="${Array.isArray(args.image) ? args.image[0] : args.image}">
-        </lido-image>
+            ? `<lido-cell visible="true" height="200px" value="${args.answers}" width="200px" border-radius="7px"
+        bg-color="white" margin="landscape.12px 0px 0px 0px, portrait.0px 0px 0px 0px"
+        onEntry="this.display='flex'; this.align-items='center'; this.justifyContent='center';this.border='4px solid #FFB612';">
+        <lido-image audio="" visible="true"
+          width="landscape.200px,portrait.200px"
+          height="landscape.200px,portrait.200px"
+          border-radius="7px" bg-color="white"
+          src="${Array.isArray(args.image) ? args.image[0] : args.image}">
+        </lido-image>
      </lido-cell>`
-            : ''}
-   
-
-</lido-cell>
-
-
-		<lido-cell layout="landscape.wrap,portrait.col" visible="true"  margin="landscape.0px,portrait.0px 0px 0px 0px" width="landscape.88%,portrait.77%" height="216px" bg-Color="transparent" onEntry="this.gridTemplateColumns = 'repeat(2, 1fr)';  this.gridTemplateRows = 'repeat(2, 1fr)';this.align-items='center'; this.justify-content='center'; this.gap='40px';">
-             
-            <lido-text visible="true" audio="" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="100px" border-radius="12px" font-color="black" height="205px" width="auto" string="${args.option1}" value="${args.option1}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-              <lido-text visible="true" audio="" onCorrect="this.border='5px solid green';" onInCorrect="this.vibrate='horizontal-shake';" id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="100px" border-radius="12px" font-color="black" height="205px" width="auto" string="${args.option2}" value="${args.option2}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-              <lido-text visible="true" audio="" onCorrect="this.border='5px solid green';" onInCorrect="this.vibrate='horizontal-shake';"  id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="100px" border-radius="12px" font-color="black" height="205px" width="auto" string="${args.option3}" value="${args.option3}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-              <lido-text visible="true" audio="" onCorrect="this.border='5px solid green';" onInCorrect="this.vibrate='horizontal-shake';"   id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="100px" border-radius="12px" font-color="black" height="205px" width="auto" string="${args.option4}" value="${args.option4}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-            
-			
-		</lido-cell>
-
-	</lido-cell>
-</lido-container>
+            : ''}
+   
+
+</lido-cell>
+
+
+		<lido-cell layout="landscape.wrap,portrait.col" visible="true"  margin="landscape.0px,portrait.0px 0px 0px 0px" width="landscape.88%,portrait.77%" height="216px" bg-Color="transparent" onEntry="this.gridTemplateColumns = 'repeat(2, 1fr)';  this.gridTemplateRows = 'repeat(2, 1fr)';this.align-items='center'; this.justify-content='center'; this.gap='40px';">
+             
+            <lido-text visible="true" audio="" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="100px" border-radius="12px" font-color="black" height="205px" width="auto" string="${args.option1}" value="${args.option1}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+              <lido-text visible="true" audio="" onCorrect="this.border='5px solid green';" onInCorrect="this.vibrate='horizontal-shake';" id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="100px" border-radius="12px" font-color="black" height="205px" width="auto" string="${args.option2}" value="${args.option2}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+              <lido-text visible="true" audio="" onCorrect="this.border='5px solid green';" onInCorrect="this.vibrate='horizontal-shake';"  id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="100px" border-radius="12px" font-color="black" height="205px" width="auto" string="${args.option3}" value="${args.option3}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+              <lido-text visible="true" audio="" onCorrect="this.border='5px solid green';" onInCorrect="this.vibrate='horizontal-shake';"   id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="100px" border-radius="12px" font-color="black" height="205px" width="auto" string="${args.option4}" value="${args.option4}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+            
+			
+		</lido-cell>
+
+	</lido-cell>
+</lido-container>
   </main>`;
 }

package/dist/collection/stories/Templates/quizLiteracy/quizLiteracyImageWithText.stories.js

@@ -22,41 +22,41 @@ export const quizLiteracyImageWithText = {
 };
 function getContainerXml(args) {
     let tabCounter = 1;
-    return `<main>
-  <lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answer}"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Quiz%20literacy.png"  onEntry="" is-Continue-On-Correct="true" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';">
-	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.306px,portrait.401px" width="landscape.307px,portrait.401px" x="landscape.82%, portrait.24%" y="landscape.77%, portrait.83%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
-		<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/temp1/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" bg-color="transparent">
-		</lido-avatar>
-		<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/Shadow.png" bg-color="transparent" width="165px" height="30px" x="landscape.54px,portrait.111px" y="landscape.239px,portrait.344px" alt-text="{shadowImgae}">
-		</lido-image>
-	</lido-cell>
-	<lido-cell layout="landscape.row,portrait.col" visible="true" bg-Color="transparent" width="landscape.100%,portrait.90%" height="68%" margin="landscape.0px,portrait.-107px 0px 0px 0px">
-		
-			<lido-cell visible="true" height="landscape.98%,portrait.62%" width="landscape.600px,portrait.681px" border-radius="7px"
-          bg-color="white" margin="landscape.0px 0px 0px 0px, portrait.-149px 0px 25px 0px"
-          onEntry="this.display='flex'; this.align-items='center'; this.justifyContent='center';">
-			<lido-image visible="true"
-            width="landscape.100%,portrait.100%"
-            height="landscape.100%,portrait.100%"
-            border-radius="7px" bg-color="white"
-            src="${args.image}">
-          </lido-image>
-		  </lido-cell>
-		
-		<lido-cell layout="col" visible="true"  width="landscape.53%,portrait.108%" height="216px" bg-Color="transparent" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" onEntry="this.align-items='center'; this.justify-content='center'; this.gap='40px';">
-            <lido-text visible="true" audio="" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';"  id="option1" font-family="'Baloo Bhai 2'" tab-index="2" font-size="62px" border-radius="12px" font-color="black" height="120px" width="auto" string="${args.option1}" value="${args.option1}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-			<lido-text visible="true" audio=""  id="option2" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" font-family="'Baloo Bhai 2'" tab-index="3" font-size="62px" border-radius="12px" font-color="black" height="120px" width="auto" string="${args.option2}" value="${args.option2}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-			<lido-text visible="true" audio=""  id="option3" font-family="'Baloo Bhai 2'" tab-index="4" font-size="62px" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" border-radius="12px" font-color="black" height="120px" width="auto" string="${args.option3}" value="${args.option3}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-			<lido-text visible="true" audio=""  id="option4" font-family="'Baloo Bhai 2'" tab-index="5" font-size="62px" border-radius="12px" font-color="black" height="120px" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" width="auto" string="${args.option4}" value="${args.option4}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-		</lido-cell>
-
-	</lido-cell>
-</lido-container>
-
-
+    return `<main>
+  <lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answer}"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Quiz%20literacy.png"  onEntry="" is-Continue-On-Correct="true" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';">
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.306px,portrait.401px" width="landscape.307px,portrait.401px" x="landscape.82%, portrait.24%" y="landscape.77%, portrait.83%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
+		<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/temp1/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" bg-color="transparent">
+		</lido-avatar>
+		<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/Shadow.png" bg-color="transparent" width="165px" height="30px" x="landscape.54px,portrait.111px" y="landscape.239px,portrait.344px" alt-text="{shadowImgae}">
+		</lido-image>
+	</lido-cell>
+	<lido-cell layout="landscape.row,portrait.col" visible="true" bg-Color="transparent" width="landscape.100%,portrait.90%" height="68%" margin="landscape.0px,portrait.-107px 0px 0px 0px">
+		
+			<lido-cell visible="true" height="landscape.98%,portrait.62%" width="landscape.600px,portrait.681px" border-radius="7px"
+          bg-color="white" margin="landscape.0px 0px 0px 0px, portrait.-149px 0px 25px 0px"
+          onEntry="this.display='flex'; this.align-items='center'; this.justifyContent='center';">
+			<lido-image visible="true"
+            width="landscape.100%,portrait.100%"
+            height="landscape.100%,portrait.100%"
+            border-radius="7px" bg-color="white"
+            src="${args.image}">
+          </lido-image>
+		  </lido-cell>
+		
+		<lido-cell layout="col" visible="true"  width="landscape.53%,portrait.108%" height="216px" bg-Color="transparent" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" onEntry="this.align-items='center'; this.justify-content='center'; this.gap='40px';">
+            <lido-text visible="true" audio="" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';"  id="option1" font-family="'Baloo Bhai 2'" tab-index="2" font-size="62px" border-radius="12px" font-color="black" height="120px" width="auto" string="${args.option1}" value="${args.option1}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+			<lido-text visible="true" audio=""  id="option2" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" font-family="'Baloo Bhai 2'" tab-index="3" font-size="62px" border-radius="12px" font-color="black" height="120px" width="auto" string="${args.option2}" value="${args.option2}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+			<lido-text visible="true" audio=""  id="option3" font-family="'Baloo Bhai 2'" tab-index="4" font-size="62px" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" border-radius="12px" font-color="black" height="120px" width="auto" string="${args.option3}" value="${args.option3}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+			<lido-text visible="true" audio=""  id="option4" font-family="'Baloo Bhai 2'" tab-index="5" font-size="62px" border-radius="12px" font-color="black" height="120px" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" width="auto" string="${args.option4}" value="${args.option4}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+		</lido-cell>
+
+	</lido-cell>
+</lido-container>
+
+
   </main>`;
 }

package/dist/collection/stories/Templates/quizLiteracy/quizLiteracyImageWord.stories.js

@@ -22,48 +22,48 @@ export const quizLiteracyImageWord = {
 };
 function getContainerXml(args) {
     let tabCounter = 1;
-    return `<main>
-   <lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answers}"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Quiz%20literacy.png"  onEntry="" is-Continue-On-Correct="true" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';">
-	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.290px,portrait.434px" width="landscape.278px,portrait.437px" x="landscape.78%, portrait.24%" y="landscape.228px, portrait.75%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
-		<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/temp1/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" bg-color="transparent">
-		</lido-avatar>
-		<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/Shadow.png" bg-color="transparent" width="landscape.165px,portrait.200px" height="landscape.30px,portrait.48px" x="landscape.54px,portrait.108px" y="landscape.239px,portrait.361px" alt-text="{shadowImgae}">
-		</lido-image>
-	</lido-cell>
-	<lido-cell layout="col" visible="true" bg-Color="transparent" width="90%" height="68%">
-		<lido-cell layout="flex" margin="landscape.0px,portrait.-215px 0px 0px 0px" visible="true" width="100%" height="300px" bg-Color="transparent"
-  onEntry="this.align-items='center'; this.justify-content='center';">
-
-        <lido-cell visible="true" height="400px" width="400px" value="${args.answers}" border-radius="7px"
-          bg-color="white" margin="landscape.-70px 0px 0px 0px, portrait.0px 0px 0px 0px"
-          onEntry="this.display='flex'; this.align-items='center'; this.justifyContent='center';">
-          <lido-image visible="true"
-            width="landscape.400px,portrait.400px"
-            height="landscape.400px,portrait.400px"
-            border-radius="7px" bg-color="white"
-            src="${args.image}">
-          </lido-image>
-        </lido-cell>
-   
-
-</lido-cell>
-
-
-		<lido-cell layout="landscape.wrap,portrait.col" visible="true" margin="landscape.0px,portrait.214px 0px 271px" width="landscape.67%,portrait.100%" height="216px" bg-Color="transparent" onEntry=" this.gridTemplateColumns = 'repeat(2, 1fr)';  this.gridTemplateRows = 'repeat(2, 1fr)';this.align-items='center'; this.justify-content='center'; this.gap='40px';">
-            
-            <lido-text visible="true" audio=""  id="drag${tabCounter}" tab-index="${tabCounter++}" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" font-size="80px" border-radius="12px" font-color="black" height="148px" width="auto" string="${args.option1}" value="${args.option1}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-             <lido-text visible="true" audio=""  id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="80px" border-radius="12px" font-color="black" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" height="148px" width="auto" string="${args.option2}" value="${args.option2}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-             <lido-text visible="true" audio=""  id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="80px" border-radius="12px" font-color="black" height="148px" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" width="auto" string="${args.option3}" value="${args.option3}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-             <lido-text visible="true" audio=""  id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="80px" border-radius="12px" font-color="black" height="148px" width="auto" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" string="${args.option4}" value="${args.option4}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-            
-			
-		</lido-cell>
-
-	</lido-cell>
-</lido-container>
+    return `<main>
+   <lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answers}"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Quiz%20literacy.png"  onEntry="" is-Continue-On-Correct="true" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';">
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.290px,portrait.434px" width="landscape.278px,portrait.437px" x="landscape.78%, portrait.24%" y="landscape.228px, portrait.75%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
+		<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/temp1/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" bg-color="transparent">
+		</lido-avatar>
+		<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/Shadow.png" bg-color="transparent" width="landscape.165px,portrait.200px" height="landscape.30px,portrait.48px" x="landscape.54px,portrait.108px" y="landscape.239px,portrait.361px" alt-text="{shadowImgae}">
+		</lido-image>
+	</lido-cell>
+	<lido-cell layout="col" visible="true" bg-Color="transparent" width="90%" height="68%">
+		<lido-cell layout="flex" margin="landscape.0px,portrait.-215px 0px 0px 0px" visible="true" width="100%" height="300px" bg-Color="transparent"
+  onEntry="this.align-items='center'; this.justify-content='center';">
+
+        <lido-cell visible="true" height="400px" width="400px" value="${args.answers}" border-radius="7px"
+          bg-color="white" margin="landscape.-70px 0px 0px 0px, portrait.0px 0px 0px 0px"
+          onEntry="this.display='flex'; this.align-items='center'; this.justifyContent='center';">
+          <lido-image visible="true"
+            width="landscape.400px,portrait.400px"
+            height="landscape.400px,portrait.400px"
+            border-radius="7px" bg-color="white"
+            src="${args.image}">
+          </lido-image>
+        </lido-cell>
+   
+
+</lido-cell>
+
+
+		<lido-cell layout="landscape.wrap,portrait.col" visible="true" margin="landscape.0px,portrait.214px 0px 271px" width="landscape.67%,portrait.100%" height="216px" bg-Color="transparent" onEntry=" this.gridTemplateColumns = 'repeat(2, 1fr)';  this.gridTemplateRows = 'repeat(2, 1fr)';this.align-items='center'; this.justify-content='center'; this.gap='40px';">
+            
+            <lido-text visible="true" audio=""  id="drag${tabCounter}" tab-index="${tabCounter++}" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" font-size="80px" border-radius="12px" font-color="black" height="148px" width="auto" string="${args.option1}" value="${args.option1}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+             <lido-text visible="true" audio=""  id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="80px" border-radius="12px" font-color="black" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" height="148px" width="auto" string="${args.option2}" value="${args.option2}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+             <lido-text visible="true" audio=""  id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="80px" border-radius="12px" font-color="black" height="148px" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" width="auto" string="${args.option3}" value="${args.option3}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+             <lido-text visible="true" audio=""  id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="80px" border-radius="12px" font-color="black" height="148px" width="auto" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" string="${args.option4}" value="${args.option4}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+            
+			
+		</lido-cell>
+
+	</lido-cell>
+</lido-container>
   </main>`;
 }