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

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

@@ -35,68 +35,68 @@ export const PalEgraOptionWithAudio = {
 };
 function getContainerXml(args) {
     const objective = `${args.option1.trim()},${args.option2.trim()},${args.option3.trim()},${args.option4.trim()}`;
-    return `<main>
-		<lido-container disable-speak="true" id="lido-container" tab-index="1" template-id="dragAndDrop" value="maincontainer" objective="${objective}" aria-label="This is a multiple-option question. Select one option from the list." height="100vh" width="100vw" x="0" y="0" z="0" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/palEgraTemplate9.png" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="invisibleText.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="${args.isAllowOnlyCorrect}" is-allow-only-correct="${args.isAllowOnlyCorrect}">
-
-		<!-- Chimple Avatar -->
-		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="350px" width="350px" x="landscape.625px, portrait.273px" y="landscape.40px, portrait.1200px" aria-hidden="true" z="0" bg-color="transparent" type="" visible="true" audio="" onCorrect="" onEntry="this.animation='leftToPlace 1.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/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="186px" height="40px" x="77px" y="302px" alt-text="{shadowImgae}">
-			</lido-image>
-		</lido-cell>
-
-    <lido-text tab-index="2" id="invisibleText" value="play the audio first then drag the correct option into correct drop place" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="play the audio first then drag the correct option into correct drop place" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px" >
-    </lido-text>
-
-		<lido-cell visible="true" layout="col" width="100%" height="100%" bg-color="transparent">
-
-      <!-- Question -->
-			<lido-cell layout="row" visible="true" width="100%" height="landscape.150px, portrait.25%" bg-color="transparent" onEntry="this.justifyContent='center'; this.borderRadius='16px'; this.alignContent='center'; this.animation='topToPlace 0.5s linear';" margin="landscape.125px 0px 60px 0px, portrait.0px 0px 0px 0px" gap="190px">
-        <lido-image id="icon1" type="click" is-slice="true" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/PalEgraTempAudioIcon.png" bg-color="transparent" width="225px" height="240px" x="77px" y="302px" alt-text="" onTouch="text1.speak='true';">
-          <lido-text id="text1" disable-speak="true" tab-index="3" value="${args.option1}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option1}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
-          </lido-text>
-			  </lido-image>
-        <lido-image id="icon2" type="click" is-slice="true" disable-edit="true" value="image2" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/PalEgraTempAudioIcon.png" bg-color="transparent" width="225px" height="240px" x="77px" y="302px" alt-text="" onTouch="text2.speak='true';">
-          <lido-text id="text2" tab-index="4" disable-speak="true" value="${args.option2}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option2}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
-          </lido-text>
-			  </lido-image>
-        <lido-image id="icon3" type="click" is-slice="true" disable-edit="true" value="image3" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/PalEgraTempAudioIcon.png" bg-color="transparent" width="225px" height="240px" x="77px" y="302px" alt-text="" onTouch="text3.speak='true';">
-          <lido-text id="text3" disable-speak="true" tab-index="5" value="${args.option3}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option3}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
-          </lido-text>
-			  </lido-image>
-        <lido-image id="icon4" type="click" is-slice="true" disable-edit="true" value="image4" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/PalEgraTempAudioIcon.png" bg-color="transparent" width="225px" height="240px" x="77px" y="302px" alt-text="" onTouch="text4.speak='true';">
-          <lido-text disable-speak="true" id="text4" tab-index="6" value="${args.option4}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option4}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
-          </lido-text>
-			  </lido-image>
-			</lido-cell>
-
-
-      <!-- drop boxes -->
-				<lido-cell visible="true" layout="landscape.row, portrait.wrap" width="landscape.100%, portrait.90%" height="landscape.100%, portrait.auto" bg-color="transparent" gap="landscape.25px, portrait.55px" onEntry="">
-					<lido-text id="drop1" tab-index="7" type="drop" visible="true" bg-color="#FFFFFF;" width="landscape.320px, portrait.100%"  value="${args.option1}" height="212px" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="lido-avatar.avatarAnimate='Success';" onInCorrect="lido-avatar.avatarAnimate='Fail';">
-					</lido-text>
-          <lido-text id="drop2" tab-index="8" type="drop" visible="true" bg-color="#FFFFFF;" width="landscape.320px, portrait.100%"  value="${args.option2}" height="212px" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="lido-avatar.avatarAnimate='Success';" onInCorrect="lido-avatar.avatarAnimate='Fail';">
-					</lido-text>
-          <lido-text id="drop3" tab-index="9" type="drop" visible="true" bg-color="#FFFFFF;" width="landscape.320px, portrait.100%"  value="${args.option3}" height="212px" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="lido-avatar.avatarAnimate='Success';" onInCorrect="lido-avatar.avatarAnimate='Fail';">
-					</lido-text>
-          <lido-text id="drop4" tab-index="10" type="drop" visible="true" bg-color="#FFFFFF;" width="landscape.320px, portrait.100%"  value="${args.option4}" height="212px" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="lido-avatar.avatarAnimate='Success';" onInCorrect="lido-avatar.avatarAnimate='Fail';">
-					</lido-text>					
-				</lido-cell>
-			
-			<!-- drag Options -->
-				<lido-cell visible="true" layout="landscape.row, portrait.wrap" width="landscape.100%, portrait.90%" height="landscape.100%, portrait.auto" bg-color="transparent" gap="landscape.70px, portrait.55px" onEntry="">
-					<lido-text id="drag1" tab-index="11" type="drag" visible="true" bg-color="#FFAC4C" width="landscape.320px, portrait.100%" string="${args.option1}" value="${args.option1}" font-size="110px" height="212px" onEntry="this.borderRadius='25px'; this.padding='0'; this.fontWeight='700';">
-					</lido-text>
-          <lido-text id="drag2" tab-index="12" type="drag" visible="true" bg-color="#FFAC4C" width="landscape.320px, portrait.100%" string="${args.option2}" value="${args.option2}" font-size="110px" height="212px" onEntry="this.borderRadius='25px'; this.padding='0'; this.fontWeight='700';">
-					</lido-text>
-          <lido-text id="drag3" tab-index="13" type="drag" visible="true" bg-color="#FFAC4C" width="landscape.320px, portrait.100%" string="${args.option3}" value="${args.option3}" font-size="110px" height="212px" onEntry="this.borderRadius='25px'; this.padding='0'; this.fontWeight='700';">
-					</lido-text>
-          <lido-text id="drag4" tab-index="14" type="drag" visible="true" bg-color="#FFAC4C" width="landscape.320px, portrait.100%" string="${args.option4}" value="${args.option4}" font-size="110px" height="212px" onEntry="this.borderRadius='25px'; this.padding='0'; this.fontWeight='700';">
-					</lido-text>					
-				</lido-cell>
-
-		</lido-cell>
-	</lido-container>
+    return `<main>
+		<lido-container disable-speak="true" id="lido-container" tab-index="1" template-id="dragAndDrop" value="maincontainer" objective="${objective}" aria-label="This is a multiple-option question. Select one option from the list." height="100vh" width="100vw" x="0" y="0" z="0" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/palEgraTemplate9.png" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="invisibleText.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="${args.isAllowOnlyCorrect}" is-allow-only-correct="${args.isAllowOnlyCorrect}">
+
+		<!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="350px" width="350px" x="landscape.625px, portrait.273px" y="landscape.40px, portrait.1200px" aria-hidden="true" z="0" bg-color="transparent" type="" visible="true" audio="" onCorrect="" onEntry="this.animation='leftToPlace 1.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/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="186px" height="40px" x="77px" y="302px" alt-text="{shadowImgae}">
+			</lido-image>
+		</lido-cell>
+
+    <lido-text tab-index="2" id="invisibleText" value="play the audio first then drag the correct option into correct drop place" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="play the audio first then drag the correct option into correct drop place" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px" >
+    </lido-text>
+
+		<lido-cell visible="true" layout="col" width="100%" height="100%" bg-color="transparent">
+
+      <!-- Question -->
+			<lido-cell layout="row" visible="true" width="100%" height="landscape.150px, portrait.25%" bg-color="transparent" onEntry="this.justifyContent='center'; this.borderRadius='16px'; this.alignContent='center'; this.animation='topToPlace 0.5s linear';" margin="landscape.125px 0px 60px 0px, portrait.0px 0px 0px 0px" gap="190px">
+        <lido-image id="icon1" type="click" is-slice="true" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/PalEgraTempAudioIcon.png" bg-color="transparent" width="225px" height="240px" x="77px" y="302px" alt-text="" onTouch="text1.speak='true';">
+          <lido-text id="text1" disable-speak="true" tab-index="3" value="${args.option1}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option1}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
+          </lido-text>
+			  </lido-image>
+        <lido-image id="icon2" type="click" is-slice="true" disable-edit="true" value="image2" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/PalEgraTempAudioIcon.png" bg-color="transparent" width="225px" height="240px" x="77px" y="302px" alt-text="" onTouch="text2.speak='true';">
+          <lido-text id="text2" tab-index="4" disable-speak="true" value="${args.option2}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option2}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
+          </lido-text>
+			  </lido-image>
+        <lido-image id="icon3" type="click" is-slice="true" disable-edit="true" value="image3" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/PalEgraTempAudioIcon.png" bg-color="transparent" width="225px" height="240px" x="77px" y="302px" alt-text="" onTouch="text3.speak='true';">
+          <lido-text id="text3" disable-speak="true" tab-index="5" value="${args.option3}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option3}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
+          </lido-text>
+			  </lido-image>
+        <lido-image id="icon4" type="click" is-slice="true" disable-edit="true" value="image4" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/PalEgraTempAudioIcon.png" bg-color="transparent" width="225px" height="240px" x="77px" y="302px" alt-text="" onTouch="text4.speak='true';">
+          <lido-text disable-speak="true" id="text4" tab-index="6" value="${args.option4}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option4}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
+          </lido-text>
+			  </lido-image>
+			</lido-cell>
+
+
+      <!-- drop boxes -->
+				<lido-cell visible="true" layout="landscape.row, portrait.wrap" width="landscape.100%, portrait.90%" height="landscape.100%, portrait.auto" bg-color="transparent" gap="landscape.25px, portrait.55px" onEntry="">
+					<lido-text id="drop1" tab-index="7" type="drop" visible="true" bg-color="#FFFFFF;" width="landscape.320px, portrait.100%"  value="${args.option1}" height="212px" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="lido-avatar.avatarAnimate='Success';" onInCorrect="lido-avatar.avatarAnimate='Fail';">
+					</lido-text>
+          <lido-text id="drop2" tab-index="8" type="drop" visible="true" bg-color="#FFFFFF;" width="landscape.320px, portrait.100%"  value="${args.option2}" height="212px" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="lido-avatar.avatarAnimate='Success';" onInCorrect="lido-avatar.avatarAnimate='Fail';">
+					</lido-text>
+          <lido-text id="drop3" tab-index="9" type="drop" visible="true" bg-color="#FFFFFF;" width="landscape.320px, portrait.100%"  value="${args.option3}" height="212px" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="lido-avatar.avatarAnimate='Success';" onInCorrect="lido-avatar.avatarAnimate='Fail';">
+					</lido-text>
+          <lido-text id="drop4" tab-index="10" type="drop" visible="true" bg-color="#FFFFFF;" width="landscape.320px, portrait.100%"  value="${args.option4}" height="212px" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="lido-avatar.avatarAnimate='Success';" onInCorrect="lido-avatar.avatarAnimate='Fail';">
+					</lido-text>					
+				</lido-cell>
+			
+			<!-- drag Options -->
+				<lido-cell visible="true" layout="landscape.row, portrait.wrap" width="landscape.100%, portrait.90%" height="landscape.100%, portrait.auto" bg-color="transparent" gap="landscape.70px, portrait.55px" onEntry="">
+					<lido-text id="drag1" tab-index="11" type="drag" visible="true" bg-color="#FFAC4C" width="landscape.320px, portrait.100%" string="${args.option1}" value="${args.option1}" font-size="110px" height="212px" onEntry="this.borderRadius='25px'; this.padding='0'; this.fontWeight='700';">
+					</lido-text>
+          <lido-text id="drag2" tab-index="12" type="drag" visible="true" bg-color="#FFAC4C" width="landscape.320px, portrait.100%" string="${args.option2}" value="${args.option2}" font-size="110px" height="212px" onEntry="this.borderRadius='25px'; this.padding='0'; this.fontWeight='700';">
+					</lido-text>
+          <lido-text id="drag3" tab-index="13" type="drag" visible="true" bg-color="#FFAC4C" width="landscape.320px, portrait.100%" string="${args.option3}" value="${args.option3}" font-size="110px" height="212px" onEntry="this.borderRadius='25px'; this.padding='0'; this.fontWeight='700';">
+					</lido-text>
+          <lido-text id="drag4" tab-index="14" type="drag" visible="true" bg-color="#FFAC4C" width="landscape.320px, portrait.100%" string="${args.option4}" value="${args.option4}" font-size="110px" height="212px" onEntry="this.borderRadius='25px'; this.padding='0'; this.fontWeight='700';">
+					</lido-text>					
+				</lido-cell>
+
+		</lido-cell>
+	</lido-container>
 </main>`;
 }

package/dist/collection/stories/Templates/palEgraStoryMaking/pal_egra_story_making.stories.js

@@ -24,49 +24,49 @@ export const Default = {
     },
 };
 function getContainerXml(args) {
-    return `<main>
-    <lido-container disable-speak="true" id="lido-container" is-continue-on-correct="true" template-id="dragAndDrop" is-allow-only-correct="true" objective="${args.value1},${args.value2},${args.value3},${args.value4}" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palStory/bgImage.png">
-
-	<!-- Chimple Avatar -->
-	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.300px,portrait.402px" width="landscape.250px,portrait.398px" x="landscape.68%, portrait.28%" y="landscape.600px, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
-		<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv">
-		</lido-avatar>
-		<lido-image id="image" disableEdit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bgColor="transparent" width="150px" height="27px" x="45px" y="235px">
-		</lido-image>
-	</lido-cell>
-	
-	<lido-cell visible="true" layout="row" width="97%" height="87%" bg-color="transparent" margin="70px 0 0 0">
-		<!-- Drop Elements -->
-		<lido-cell visible="true" layout="col" width="53%" height="100%" padding="0" bg-color="transparent">
-			<lido-cell visible="true" layout="row" width="100%" height="22%" bg-color="transparent">
-				<lido-image visible="true" width="160px" height="160px" bg-color="white" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picture_Clues/f1.png"></lido-image>
-				<lido-text visible="true" value="${args.value1}" id="drop1" tab-index="1" disable-speak="true" type="drop" width="630px" height="100px" bg-color="white" border-radius="16px" onCorrect="lido-avatar.avatarAnimate='Success';"></lido-text>
-			</lido-cell>
-			<lido-cell visible="true" layout="row" width="100%" height="22%" bg-color="transparent">
-				<lido-image visible="true" width="160px" height="160px" bg-color="white" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picture_Clues/f1.png"></lido-image>
-				<lido-text visible="true" value="${args.value2}" id="drop2" tab-index="2" disable-speak="true" type="drop" width="630px" height="100px" bg-color="white" border-radius="16px" onCorrect="lido-avatar.avatarAnimate='Success';"></lido-text>
-			</lido-cell>
-			<lido-cell visible="true" layout="row" width="100%" height="22%" bg-color="transparent">
-				<lido-image visible="true" width="160px" height="160px" bg-color="white" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picture_Clues/f1.png"></lido-image>
-				<lido-text visible="true" value="${args.value3}" id="drop3" tab-index="3" disable-speak="true" type="drop" width="630px" height="100px" bg-color="white" border-radius="16px" onCorrect="lido-avatar.avatarAnimate='Success';"></lido-text>
-			</lido-cell>
-			<lido-cell visible="true" layout="row" width="100%" height="22%" bg-color="transparent">
-				<lido-image visible="true" width="160px" height="160px" bg-color="white" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picture_Clues/f1.png"></lido-image>
-				<lido-text visible="true" value="${args.value4}" id="drop4" tab-index="4" disable-speak="true" type="drop" width="630px" height="100px" bg-color="white" border-radius="16px" onCorrect="lido-avatar.avatarAnimate='Success';"></lido-text>
-			</lido-cell>
-		</lido-cell>
-
-		<!-- Drag Elements -->
-		<lido-cell visible="true" layout="col" width="42%" height="100%" bg-color="transparent">
-			<lido-cell visible="true" layout="col" width="100%" height="70%" bg-color="transparent">
-				<lido-text visible="true" value="${args.value3}" disable-speak="true" type="drag" width="630px" height="100px" bg-color="#FFAC4C" font-size="50px" font-color="black" string="${args.value3}" border-radius="16px" onEntry="this.fontWeight='600';"></lido-text>
-				<lido-text visible="true" value="${args.value1}" disable-speak="true" type="drag" width="630px" height="100px" bg-color="#FFAC4C" font-size="50px" font-color="black" string="${args.value1}" border-radius="16px" onEntry="this.fontWeight='600';"></lido-text>
-				<lido-text visible="true" value="${args.value4}" disable-speak="true" type="drag" width="630px" height="100px" bg-color="#FFAC4C" font-size="50px" font-color="black" string="${args.value4}" border-radius="16px" onEntry="this.fontWeight='600';"></lido-text>
-				<lido-text visible="true" value="${args.value2}" disable-speak="true" type="drag" width="630px" height="100px" bg-color="#FFAC4C" font-size="50px" font-color="black" string="${args.value2}" border-radius="16px" onEntry="this.fontWeight='600';"></lido-text>
-			</lido-cell>
-			<lido-cell visible="true" height="30%"></lido-cell>
-		</lido-cell>
-	</lido-cell>
-</lido-container>
+    return `<main>
+    <lido-container disable-speak="true" id="lido-container" is-continue-on-correct="true" template-id="dragAndDrop" is-allow-only-correct="true" objective="${args.value1},${args.value2},${args.value3},${args.value4}" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palStory/bgImage.png">
+
+	<!-- Chimple Avatar -->
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.300px,portrait.402px" width="landscape.250px,portrait.398px" x="landscape.68%, portrait.28%" y="landscape.600px, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
+		<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv">
+		</lido-avatar>
+		<lido-image id="image" disableEdit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bgColor="transparent" width="150px" height="27px" x="45px" y="235px">
+		</lido-image>
+	</lido-cell>
+	
+	<lido-cell visible="true" layout="row" width="97%" height="87%" bg-color="transparent" margin="70px 0 0 0">
+		<!-- Drop Elements -->
+		<lido-cell visible="true" layout="col" width="53%" height="100%" padding="0" bg-color="transparent">
+			<lido-cell visible="true" layout="row" width="100%" height="22%" bg-color="transparent">
+				<lido-image visible="true" width="160px" height="160px" bg-color="white" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picture_Clues/f1.png"></lido-image>
+				<lido-text visible="true" value="${args.value1}" id="drop1" tab-index="1" disable-speak="true" type="drop" width="630px" height="100px" bg-color="white" border-radius="16px" onCorrect="lido-avatar.avatarAnimate='Success';"></lido-text>
+			</lido-cell>
+			<lido-cell visible="true" layout="row" width="100%" height="22%" bg-color="transparent">
+				<lido-image visible="true" width="160px" height="160px" bg-color="white" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picture_Clues/f1.png"></lido-image>
+				<lido-text visible="true" value="${args.value2}" id="drop2" tab-index="2" disable-speak="true" type="drop" width="630px" height="100px" bg-color="white" border-radius="16px" onCorrect="lido-avatar.avatarAnimate='Success';"></lido-text>
+			</lido-cell>
+			<lido-cell visible="true" layout="row" width="100%" height="22%" bg-color="transparent">
+				<lido-image visible="true" width="160px" height="160px" bg-color="white" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picture_Clues/f1.png"></lido-image>
+				<lido-text visible="true" value="${args.value3}" id="drop3" tab-index="3" disable-speak="true" type="drop" width="630px" height="100px" bg-color="white" border-radius="16px" onCorrect="lido-avatar.avatarAnimate='Success';"></lido-text>
+			</lido-cell>
+			<lido-cell visible="true" layout="row" width="100%" height="22%" bg-color="transparent">
+				<lido-image visible="true" width="160px" height="160px" bg-color="white" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picture_Clues/f1.png"></lido-image>
+				<lido-text visible="true" value="${args.value4}" id="drop4" tab-index="4" disable-speak="true" type="drop" width="630px" height="100px" bg-color="white" border-radius="16px" onCorrect="lido-avatar.avatarAnimate='Success';"></lido-text>
+			</lido-cell>
+		</lido-cell>
+
+		<!-- Drag Elements -->
+		<lido-cell visible="true" layout="col" width="42%" height="100%" bg-color="transparent">
+			<lido-cell visible="true" layout="col" width="100%" height="70%" bg-color="transparent">
+				<lido-text visible="true" value="${args.value3}" disable-speak="true" type="drag" width="630px" height="100px" bg-color="#FFAC4C" font-size="50px" font-color="black" string="${args.value3}" border-radius="16px" onEntry="this.fontWeight='600';"></lido-text>
+				<lido-text visible="true" value="${args.value1}" disable-speak="true" type="drag" width="630px" height="100px" bg-color="#FFAC4C" font-size="50px" font-color="black" string="${args.value1}" border-radius="16px" onEntry="this.fontWeight='600';"></lido-text>
+				<lido-text visible="true" value="${args.value4}" disable-speak="true" type="drag" width="630px" height="100px" bg-color="#FFAC4C" font-size="50px" font-color="black" string="${args.value4}" border-radius="16px" onEntry="this.fontWeight='600';"></lido-text>
+				<lido-text visible="true" value="${args.value2}" disable-speak="true" type="drag" width="630px" height="100px" bg-color="#FFAC4C" font-size="50px" font-color="black" string="${args.value2}" border-radius="16px" onEntry="this.fontWeight='600';"></lido-text>
+			</lido-cell>
+			<lido-cell visible="true" height="30%"></lido-cell>
+		</lido-cell>
+	</lido-cell>
+</lido-container>
 </main>`;
 }

package/dist/collection/stories/Templates/palEgraTemplate1/palEgraLetterIdentification.stories.js

@@ -30,39 +30,39 @@ export const Default = {
     },
 };
 function getContainerXml(args) {
-    return `<main>
-    <lido-container disable-speak="true" id="lido-container" objective="${(args.correctAns)}" template-id="mcq" is-continue-on-correct="${args.PracticeMode}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Write%20Set.png" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail';" onEntry="questionText.speak='true';" custom-style = "#audioCell:active {
-  box-shadow: 0px 0px 0px !important;
-  transform: translateY(10px);
-} ">
-	<lido-col visible="true" width="100%" height="80%" bg-color="transparent">
-		
-        <!-- Chimple Avatar -->
-        <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.400px,portrait.402px" width="landscape.350px,portrait.398px" x="landscape.60%, portrait.28%" y="landscape.50px, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
-          <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv">
-          </lido-avatar>
-		  <lido-image id="image" disableEdit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bgColor="transparent" width="inherit" height="27px" x="0" y="330px">
-		  </lido-image>
-        </lido-cell>
-
-		<lido-text visible="${args.template === 'Template1'}" id="questionText" width="405px" height="250px" tab-index="1"  bg-color="#fff5bb" string="${(args.correctAns).toLowerCase()}" font-size="120px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700'; this.border='#ffac4c 2px solid'; "></lido-text>
-		
-		<lido-cell visible="${args.template !== 'Template1'}" id="audioCell" onTouch="questionText.speak='true';" layout="row" width="300px" height="300px" bg-color="white" border-radius="130px" onEntry="this.border='#ffac4c 2px solid'; this.boxShadow='0px 10.88px 0px #f34d08;';">
-			<lido-image visible="true" bg-color="transparent" width="200px" height="200px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Icons/palAudioIcon.png"></lido-image>
-		</lido-cell>
-
-		<lido-cell layout="col" visible="true" width="90%" height="50%" bg-color="transparent" padding="0">
-			<lido-cell layout="row" visible="true" width="70%" height="50%" bg-color="transparent">
-				<lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${args.option1}" string="${args.option1}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
-				<lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${args.option2}" string="${args.option2}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
-			</lido-cell>
-			<lido-cell layout="row" visible="true" width="100%" height="50%" bg-color="transparent">
-				<lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${args.option3}" string="${args.option3}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
-				<lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${args.option4}" string="${args.option4}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
-				<lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${args.option5}" string="${args.option5}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
-			</lido-cell>
-		</lido-cell>
-	</lido-col>
-</lido-container>
+    return `<main>
+    <lido-container disable-speak="true" id="lido-container" objective="${(args.correctAns)}" template-id="mcq" is-continue-on-correct="${args.PracticeMode}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Write%20Set.png" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail';" onEntry="questionText.speak='true';" custom-style = "#audioCell:active {
+  box-shadow: 0px 0px 0px !important;
+  transform: translateY(10px);
+} ">
+	<lido-col visible="true" width="100%" height="80%" bg-color="transparent">
+		
+        <!-- Chimple Avatar -->
+        <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.400px,portrait.402px" width="landscape.350px,portrait.398px" x="landscape.60%, portrait.28%" y="landscape.50px, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
+          <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv">
+          </lido-avatar>
+		  <lido-image id="image" disableEdit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bgColor="transparent" width="inherit" height="27px" x="0" y="330px">
+		  </lido-image>
+        </lido-cell>
+
+		<lido-text visible="${args.template === 'Template1'}" id="questionText" width="405px" height="250px" tab-index="1"  bg-color="#fff5bb" string="${(args.correctAns).toLowerCase()}" font-size="120px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700'; this.border='#ffac4c 2px solid'; "></lido-text>
+		
+		<lido-cell visible="${args.template !== 'Template1'}" id="audioCell" onTouch="questionText.speak='true';" layout="row" width="300px" height="300px" bg-color="white" border-radius="130px" onEntry="this.border='#ffac4c 2px solid'; this.boxShadow='0px 10.88px 0px #f34d08;';">
+			<lido-image visible="true" bg-color="transparent" width="200px" height="200px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Icons/palAudioIcon.png"></lido-image>
+		</lido-cell>
+
+		<lido-cell layout="col" visible="true" width="90%" height="50%" bg-color="transparent" padding="0">
+			<lido-cell layout="row" visible="true" width="70%" height="50%" bg-color="transparent">
+				<lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${args.option1}" string="${args.option1}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${args.option2}" string="${args.option2}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
+			</lido-cell>
+			<lido-cell layout="row" visible="true" width="100%" height="50%" bg-color="transparent">
+				<lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${args.option3}" string="${args.option3}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${args.option4}" string="${args.option4}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${args.option5}" string="${args.option5}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
+			</lido-cell>
+		</lido-cell>
+	</lido-col>
+</lido-container>
 </main>`;
 }

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

@@ -42,57 +42,57 @@ export const palEgraWordMatch = {
 };
 function getContainerXml(args) {
     let tabCounter = 1;
-    return `<main>
-        <lido-container disable-speak="true"  visible="true" template-id="dragAndDrop" id="lido-container" objective="${args.answer1},${args.answer2},${args.answer3},${args.answer4},${args.answer5}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palEgra-pictureWordMatch/bgImg.png" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="inst.speak='true';">
-
-            <!-- Chimple Avatar -->
-            <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.395px,portrait.402px" width="landscape.330px,portrait.398px" x="landscape.640px, portrait.28%" y="landscape.350px, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" >
-                <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/temp1/Shadow.png" bg-color="transparent" width="186px" height="40px" x="65px" y="310px" alt-text="{shadowImgae}">
-			    </lido-image>
-            </lido-cell>
-            
-
-            <lido-text visible="false" id="inst" tab-index="1" string="drag and drop the correct option to match the word given">
-            </lido-text>
-
-            <lido-cell visible="true" layout="col" height="85%" width="98%" bg-color="transparent" margin="-20px 0px -20px 0px">
-
-                <lido-cell layout="row" visible="true" height="0px" width="100%" bg-color="transparent">
-                    <lido-text visible="true" height="141px" disable-speak="true" width="256px" id="text1" tab-index="2" string="${args.option1}" value="${args.option1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="60px"  bg-color="#FFF5BB" onEntry="this.font-weight='600';this.border-radius='16px'; this.border = 4px solid #FFB612" >
-                    </lido-text>
-                    <lido-text visible="true" height="141px" disable-speak="true" width="256px" id="text2" tab-index="3" string="${args.option2}" value="${args.option2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="60px"  bg-color="#FFF5BB" onEntry="this.font-weight='600';this.border-radius='16px'; this.border = 4px solid #FFB612" >
-                    </lido-text>
-                    <lido-text visible="true" height="141px" disable-speak="true" width="256px" id="text3" tab-index="4" string="${args.option3}" value="${args.option3}" font-family="'Baloo Bhai 2'" font-color="black" font-size="60px"  bg-color="#FFF5BB" onEntry="this.font-weight='600';this.border-radius='16px'; this.border = 4px solid #FFB612" >
-                    </lido-text>
-                    <lido-text visible="true" height="141px" disable-speak="true" width="256px" id="text4" tab-index="5" string="${args.option4}" value="${args.option4}" font-family="'Baloo Bhai 2'" font-color="black" font-size="60px"  bg-color="#FFF5BB" onEntry="this.font-weight='600';this.border-radius='16px'; this.border = 4px solid #FFB612" >
-                    </lido-text>
-                    <lido-text visible="true" height="141px" disable-speak="true" width="256px" id="text5" tab-index="6" string="${args.option5}" value="${args.option5}" font-family="'Baloo Bhai 2'" font-color="black" font-size="60px"  bg-color="#FFF5BB" onEntry="this.font-weight='600';this.border-radius='16px'; this.border = 4px solid #FFB612" >
-                    </lido-text>
-                </lido-cell>
-
-                <lido-cell visible="true" layout="row" height="40px" width="100%" bg-color="transparent">
-                    <lido-text type="drop" value="${args.answer1}" bg-color="white" id="drop1" tab-index="8" visible="true" height="141px" width="256px" onEntry="this.border-radius='16px';" ></lido-text>
-                    <lido-text type="drop" value="${args.answer2}" bg-color="white" id="drop2" tab-index="9" visible="true" height="141px" width="256px" onEntry="this.border-radius='16px';"></lido-text>
-                    <lido-text type="drop" value="${args.answer3}" bg-color="white" id="drop3" tab-index="10" visible="true" height="141px" width="256px" onEntry="this.border-radius='16px';"></lido-text>
-                    <lido-text type="drop" value="${args.answer4}" bg-color="white" id="drop4" tab-index="11" visible="true" height="141px" width="256px" onEntry="this.border-radius='16px';"></lido-text>
-                    <lido-text type="drop" value="${args.answer5}" bg-color="white" id="drop5" tab-index="12" visible="true" height="141px" width="256px" onEntry="this.border-radius='16px';"></lido-text>
-                </lido-cell>
-
-                <lido-cell visible="true" layout="row"  height="250px" width="90%" bg-color="transparent" onEntry="this.align-items='center';this.justify-content='space-around';" margin="195px 0px -160px 0px">
-                    <lido-text visible="true" height="122px" disable-speak="true" width="245px" type="drag" id="drag1" tab-index="2" string="${args.option1}" value="${args.option1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="70px"  bg-color="#FFAC4C" onEntry="this.font-weight='700';this.border-radius='16px';" >
-                    </lido-text>
-                    <lido-text visible="true" height="122px" disable-speak="true" width="245px" type="drag" id="drag2" tab-index="3" string="${args.option2}" value="${args.option2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="70px"  bg-color="#FFAC4C" onEntry="this.font-weight='700';this.border-radius='16px';" >
-                    </lido-text>
-                    <lido-text visible="true" height="122px" disable-speak="true" width="245px" type="drag" id="drag3" tab-index="4" string="${args.option3}" value="${args.option3}" font-family="'Baloo Bhai 2'" font-color="black" font-size="70px"  bg-color="#FFAC4C" onEntry="this.font-weight='700';this.border-radius='16px';" >
-                    </lido-text>
-                    <lido-text visible="true" height="122px" disable-speak="true" width="245px" type="drag" id="drag4" tab-index="5" string="${args.option4}" value="${args.option4}" font-family="'Baloo Bhai 2'" font-color="black" font-size="70px"  bg-color="#FFAC4C" onEntry="this.font-weight='700';this.border-radius='16px';" >
-                    </lido-text>
-                    <lido-text visible="true" height="122px" disable-speak="true" width="245px" type="drag" id="drag5" tab-index="6" string="${args.option5}" value="${args.option5}" font-family="'Baloo Bhai 2'" font-color="black" font-size="70px"  bg-color="#FFAC4C" onEntry="this.font-weight='700';this.border-radius='16px';" >
-                    </lido-text>
-                </lido-cell>
-            </lido-cell>
-        </lido-container>
+    return `<main>
+        <lido-container disable-speak="true"  visible="true" template-id="dragAndDrop" id="lido-container" objective="${args.answer1},${args.answer2},${args.answer3},${args.answer4},${args.answer5}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palEgra-pictureWordMatch/bgImg.png" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="inst.speak='true';">
+
+            <!-- Chimple Avatar -->
+            <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.395px,portrait.402px" width="landscape.330px,portrait.398px" x="landscape.640px, portrait.28%" y="landscape.350px, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" >
+                <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/temp1/Shadow.png" bg-color="transparent" width="186px" height="40px" x="65px" y="310px" alt-text="{shadowImgae}">
+			    </lido-image>
+            </lido-cell>
+            
+
+            <lido-text visible="false" id="inst" tab-index="1" string="drag and drop the correct option to match the word given">
+            </lido-text>
+
+            <lido-cell visible="true" layout="col" height="85%" width="98%" bg-color="transparent" margin="-20px 0px -20px 0px">
+
+                <lido-cell layout="row" visible="true" height="0px" width="100%" bg-color="transparent">
+                    <lido-text visible="true" height="141px" disable-speak="true" width="256px" id="text1" tab-index="2" string="${args.option1}" value="${args.option1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="60px"  bg-color="#FFF5BB" onEntry="this.font-weight='600';this.border-radius='16px'; this.border = 4px solid #FFB612" >
+                    </lido-text>
+                    <lido-text visible="true" height="141px" disable-speak="true" width="256px" id="text2" tab-index="3" string="${args.option2}" value="${args.option2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="60px"  bg-color="#FFF5BB" onEntry="this.font-weight='600';this.border-radius='16px'; this.border = 4px solid #FFB612" >
+                    </lido-text>
+                    <lido-text visible="true" height="141px" disable-speak="true" width="256px" id="text3" tab-index="4" string="${args.option3}" value="${args.option3}" font-family="'Baloo Bhai 2'" font-color="black" font-size="60px"  bg-color="#FFF5BB" onEntry="this.font-weight='600';this.border-radius='16px'; this.border = 4px solid #FFB612" >
+                    </lido-text>
+                    <lido-text visible="true" height="141px" disable-speak="true" width="256px" id="text4" tab-index="5" string="${args.option4}" value="${args.option4}" font-family="'Baloo Bhai 2'" font-color="black" font-size="60px"  bg-color="#FFF5BB" onEntry="this.font-weight='600';this.border-radius='16px'; this.border = 4px solid #FFB612" >
+                    </lido-text>
+                    <lido-text visible="true" height="141px" disable-speak="true" width="256px" id="text5" tab-index="6" string="${args.option5}" value="${args.option5}" font-family="'Baloo Bhai 2'" font-color="black" font-size="60px"  bg-color="#FFF5BB" onEntry="this.font-weight='600';this.border-radius='16px'; this.border = 4px solid #FFB612" >
+                    </lido-text>
+                </lido-cell>
+
+                <lido-cell visible="true" layout="row" height="40px" width="100%" bg-color="transparent">
+                    <lido-text type="drop" value="${args.answer1}" bg-color="white" id="drop1" tab-index="8" visible="true" height="141px" width="256px" onEntry="this.border-radius='16px';" ></lido-text>
+                    <lido-text type="drop" value="${args.answer2}" bg-color="white" id="drop2" tab-index="9" visible="true" height="141px" width="256px" onEntry="this.border-radius='16px';"></lido-text>
+                    <lido-text type="drop" value="${args.answer3}" bg-color="white" id="drop3" tab-index="10" visible="true" height="141px" width="256px" onEntry="this.border-radius='16px';"></lido-text>
+                    <lido-text type="drop" value="${args.answer4}" bg-color="white" id="drop4" tab-index="11" visible="true" height="141px" width="256px" onEntry="this.border-radius='16px';"></lido-text>
+                    <lido-text type="drop" value="${args.answer5}" bg-color="white" id="drop5" tab-index="12" visible="true" height="141px" width="256px" onEntry="this.border-radius='16px';"></lido-text>
+                </lido-cell>
+
+                <lido-cell visible="true" layout="row"  height="250px" width="90%" bg-color="transparent" onEntry="this.align-items='center';this.justify-content='space-around';" margin="195px 0px -160px 0px">
+                    <lido-text visible="true" height="122px" disable-speak="true" width="245px" type="drag" id="drag1" tab-index="2" string="${args.option1}" value="${args.option1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="70px"  bg-color="#FFAC4C" onEntry="this.font-weight='700';this.border-radius='16px';" >
+                    </lido-text>
+                    <lido-text visible="true" height="122px" disable-speak="true" width="245px" type="drag" id="drag2" tab-index="3" string="${args.option2}" value="${args.option2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="70px"  bg-color="#FFAC4C" onEntry="this.font-weight='700';this.border-radius='16px';" >
+                    </lido-text>
+                    <lido-text visible="true" height="122px" disable-speak="true" width="245px" type="drag" id="drag3" tab-index="4" string="${args.option3}" value="${args.option3}" font-family="'Baloo Bhai 2'" font-color="black" font-size="70px"  bg-color="#FFAC4C" onEntry="this.font-weight='700';this.border-radius='16px';" >
+                    </lido-text>
+                    <lido-text visible="true" height="122px" disable-speak="true" width="245px" type="drag" id="drag4" tab-index="5" string="${args.option4}" value="${args.option4}" font-family="'Baloo Bhai 2'" font-color="black" font-size="70px"  bg-color="#FFAC4C" onEntry="this.font-weight='700';this.border-radius='16px';" >
+                    </lido-text>
+                    <lido-text visible="true" height="122px" disable-speak="true" width="245px" type="drag" id="drag5" tab-index="6" string="${args.option5}" value="${args.option5}" font-family="'Baloo Bhai 2'" font-color="black" font-size="70px"  bg-color="#FFAC4C" onEntry="this.font-weight='700';this.border-radius='16px';" >
+                    </lido-text>
+                </lido-cell>
+            </lido-cell>
+        </lido-container>
     </main>`;
 }

package/dist/collection/stories/Templates/palEgra_OddOneOut/palEgra_oddOneOut.stories.js

@@ -20,41 +20,41 @@ export const palEgra_OddOneOut = {
 };
 function getContainerXml(args) {
     const option_cells = args.options.map((q, index) => {
-        return `
-      <lido-cell layout="row" id="text${1 + index}"  template-id="mcq" visible="true" margin="" onEntry="this.border-radius='14px'; this.justify-content='center'; this.alignItems='center';" height="landscape.280px,portrait.244px" width="landscape.328px,portrait.244px" bg-color="orange"  type="click" value="${q.startsWith('@') ? q.slice(1) : q}">
-        <lido-text visible="true" value="${q.startsWith('@') ? q.slice(1) : q}" tab-index="${13 + index}" string="${q.startsWith('@') ? q.slice(1) : q}" disable-speak="true" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.79px, portrait.100px"  bg-color="orange" onEntry="this.fontWeight='700';">
-        </lido-text>
-      </lido-cell>
+        return `
+      <lido-cell layout="row" id="text${1 + index}"  template-id="mcq" visible="true" margin="" onEntry="this.border-radius='14px'; this.justify-content='center'; this.alignItems='center';" height="landscape.280px,portrait.244px" width="landscape.328px,portrait.244px" bg-color="orange"  type="click" value="${q.startsWith('@') ? q.slice(1) : q}">
+        <lido-text visible="true" value="${q.startsWith('@') ? q.slice(1) : q}" tab-index="${13 + index}" string="${q.startsWith('@') ? q.slice(1) : q}" disable-speak="true" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.79px, portrait.100px"  bg-color="orange" onEntry="this.fontWeight='700';">
+        </lido-text>
+      </lido-cell>
   `;
     }).join('');
     // ---------------------- FINAL XML ----------------------
-    return `
-<main>
-<lido-container disable-speak="true"  visible="true" id="lido-container" template-id="mcq" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/fb207af37ae5d938778718e0095fc36abef7c694.png" objective="${(args.options.find(q => q.startsWith('@')) || '').slice(1)}" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" custom-style= "#text {
-        box-shadow: none !important;
-        }" onEntry="questionText.speak='true';">
-	 <!-- Chimple Avatar -->
-      <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.330px,portrait.378px" width="landscape.292px,portrait.382px"
-       x="landscape.40%, portrait.30%" y="landscape.26%, portrait.78%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
-        <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
-        </lido-avatar>
-      </lido-cell>
-
-        <lido-cell layout="landscape.col, portrait.row" aria-hidden="true" visible="true" height="landscape.100%,portrait.150px" width="landscape.100%, portrait.80%" bg-Color="transparent" margin="landscape.46px 0px 0px 0px,portrait.20px 0px 0px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.alignItems='center'; this.gap='278px';">
-            <!-- question cells -->
-          <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px 0px 0px 0px,portrait.-168px 0px 0px 0px" onEntry="this.border-radius='26px'; this.border='2px solid #FFB612'; this.justify-content='center'; this.align-items='center';" height="landscape.auto,portrait.42%" width="landscape.auto,portrait.100%" bg-color="#FFF5BB" padding="8px 35px">				
-            <lido-text visible="true" id="questionText" tab-index="11" value="" string="${args.question_text}" font-family="'Baloo Bhai 2'" font-color="#07004E" font-size="${args.question_text.length <= 17 ? '90px' : '70px'}" bg-color="" onEntry="this.fontWeight='700';">
-            </lido-text>  
-          </lido-cell>
-
-          <!-- options cells -->
-	      	<lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px 38px 0px 0px,portrait.0" onEntry="this.border-radius='26px';" height="landscape.290px,portrait.35%" width="landscape.100%,portrait.100%" bg-color="transparent">
-            ${option_cells}
-          </lido-cell>
-        </lido-cell>
-                  
-
-</lido-container>
-</main>
+    return `
+<main>
+<lido-container disable-speak="true"  visible="true" id="lido-container" template-id="mcq" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/fb207af37ae5d938778718e0095fc36abef7c694.png" objective="${(args.options.find(q => q.startsWith('@')) || '').slice(1)}" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" custom-style= "#text {
+        box-shadow: none !important;
+        }" onEntry="questionText.speak='true';">
+	 <!-- Chimple Avatar -->
+      <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.330px,portrait.378px" width="landscape.292px,portrait.382px"
+       x="landscape.40%, portrait.30%" y="landscape.26%, portrait.78%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
+        <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+        </lido-avatar>
+      </lido-cell>
+
+        <lido-cell layout="landscape.col, portrait.row" aria-hidden="true" visible="true" height="landscape.100%,portrait.150px" width="landscape.100%, portrait.80%" bg-Color="transparent" margin="landscape.46px 0px 0px 0px,portrait.20px 0px 0px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.alignItems='center'; this.gap='278px';">
+            <!-- question cells -->
+          <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px 0px 0px 0px,portrait.-168px 0px 0px 0px" onEntry="this.border-radius='26px'; this.border='2px solid #FFB612'; this.justify-content='center'; this.align-items='center';" height="landscape.auto,portrait.42%" width="landscape.auto,portrait.100%" bg-color="#FFF5BB" padding="8px 35px">				
+            <lido-text visible="true" id="questionText" tab-index="11" value="" string="${args.question_text}" font-family="'Baloo Bhai 2'" font-color="#07004E" font-size="${args.question_text.length <= 17 ? '90px' : '70px'}" bg-color="" onEntry="this.fontWeight='700';">
+            </lido-text>  
+          </lido-cell>
+
+          <!-- options cells -->
+	      	<lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px 38px 0px 0px,portrait.0" onEntry="this.border-radius='26px';" height="landscape.290px,portrait.35%" width="landscape.100%,portrait.100%" bg-color="transparent">
+            ${option_cells}
+          </lido-cell>
+        </lido-cell>
+                  
+
+</lido-container>
+</main>
 `;
 }