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

package/dist/collection/stories/Templates/order-tractor/order-tractor.stories.js

@@ -27,95 +27,95 @@ export const OrderTractor = {
     },
 };
 function getContainerXml(args) {
-    return `
-    <main>
-	<lido-container id="lido-container" is-allow-only-correct="${args.isAllowOnlyCorrect}" show-Check="false" is-Continue-On-Correct="true" after-Drop="false" objective="${[args.answer1, args.answer2, args.answer3, args.answer4, args.answer5].join(',')}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Order%20tractor.png" custom-style="#drop1, #drop2,#drop3,#drop4,#drop5{border: none !important;}" onCorrect="drg1.disableType='true';drg2.disableType='true';drg3.disableType='true';drg4.disableType='true';drg5.disableType='true';lido-avatar.avatarAnimate='Success'; this.sleep='2000';  lido-avatar.animation='placeToLeft 2.5s linear'; answer.animation='placeToLeft 2.5s linear';  truck.animation='placeToLeft 2.5s linear'; trainAudio.speak='true'; this.sleep='1000';" onInCorrect="lido-avatar.avatarAnimate='Fail';" >
-				<!-- Chimple Avatar -->
-		<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="300px" width="300px" x="landscape.110px,portrait.10px" y="landscape.80px,portrait.230px" ariaHidden="true" bgColor="transparent" visible="true"  onEntry="this.animation='rightToPlace 2.5s linear';">
-				<lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="100%"  width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}">
-				</lido-avatar>
-		</lido-cell>
-
-		<!-- truck -->
-		<lido-cell visible="true" id="truck" layout="row" height="60%" width="landscape.100%, portrait.auto" margin="landscape.0,portrait.650px -44px -11px -146px" bg-color="transparent"  onEntry=" this.animation='rightToPlace 2.5s linear';" onCorrect="" >
-			<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/ordertractor_cart.png" width="landscape.220px,portrait.250px" padding="0px" margin="landscape.350px -81px 0px 34px,portrait.172px -44px -11px -87px"></lido-image>
-
-				<lido-text id="question" tab-index="6" visible="false" string="arrange the number blocks in increasing or decreasing order and complete the pattern train" value="arrange the number blocks in increasing or decreasing order and complete the pattern train" onEntry="this.sleep='2000';this.speak='true';"></lido-text>
-				<lido-text id="trainAudio" visible="false" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/train1.m4a" onEntry="this.speak='true';"></lido-text>
-			<lido-cell visible="true" layout="col" bg-color="transparent" margin="landscape.0px -36px 0px -130px,portrait.0px 10px 0px 30px"  >
-
-				<lido-image visible="true" id="drop1" tab-index="1" type="drop" onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='1000';" value="${args.answer1}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain_trans.png" margin="landscape.200px 0px -90px 0px,portrait.50px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
-				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_upper.png" margin="landscape.-5px 0px 0px 0px,portrait.-70px 0px 0px 0px"  width="landscape.200px,portrait.160px" background="transparent"></lido-image>
-				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px 0px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
-				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px 0px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
-				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px 0px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
-				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px 0px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
-				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px -150px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
-				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain.png" margin="landscape.-1px 18px 0px 0px,portrait.-120px 12px 0px 0px"  width="landscape.217px,portrait.170px" background="transparent"></lido-image>
-			</lido-cell>
-
-			<lido-cell visible="true" layout="col" bg-color="transparent" margin="landscape.30px -31px 0px -198px,portrait.20px 10px 0px -40px" padding="0px" >
-
-				<lido-image visible="true" id="drop2" tab-index="2" type="drop" onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='1000';" value="${args.answer2}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain_trans.png" margin="landscape.200px 0px -90px 0px,portrait.50px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
-				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_upper.png" margin="landscape.-5px 0px 0px 0px,portrait.-70px 0px 0px 0px"  width="landscape.200px,portrait.160px" background="transparent"></lido-image>
-				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px 0px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
-				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px 0px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
-				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px 0px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
-				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px -150px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
-				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain.png" margin="landscape.-2px 17px 0px 0px,portrait.-120px 12px 0px 0px"  width="landscape.217px,portrait.170px" background="transparent"></lido-image>
-			</lido-cell>
-
-			<lido-cell visible="true" layout="col" bg-color="transparent" margin=" landscape.50px -44px 0px -205px,portrait.40px 0px 0px -40px" >
-
-				<lido-image visible="true" id="drop3" tab-index="3" type="drop" onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='1000';" value="${args.answer3}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain_trans.png" margin="landscape.200px 0px -90px 0px,portrait.50px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
-				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_upper.png" margin="landscape.-5px 0px 0px 0px,portrait.-70px 0px 0px 0px"  
-				width="landscape.200px,portrait.160px" background="transparent"></lido-image>
-				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px 0px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
-				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px 0px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
-				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px -150px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
-				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain.png" margin="landscape.-2px 17px 0px 0px,portrait.-120px 11px 0px 0px"  width="landscape.218px,portrait.170px" background="transparent"></lido-image>
-			</lido-cell>
-
-			<lido-cell visible="true" layout="col" bg-color="transparent" margin="landscape.70px 0px 0px -207px,portrait.60px 0px 0px -40px" >
-
-				<lido-image visible="true" id="drop4" tab-index="4" type="drop" onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='1000';" value="${args.answer4}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain_trans.png"  margin="landscape.200px 0px -90px 0px,portrait.50px 0px 0px 0px"
-				width="landscape.200px,portrait.160px" background="transparent"></lido-image>
-				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_upper.png" margin="landscape.-5px 0px 0px 0px,portrait.-70px 0px 0px 0px"  
-				width="landscape.200px,portrait.160px" background="transparent"></lido-image>
-				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px 0px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
-				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px -150px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
-				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain.png" margin="landscape.-2px 18px 0px 0px,portrait.-120px 12px 0px 0px"  width="landscape.217px,portrait.170px" background="transparent"></lido-image>
-			</lido-cell>
-
-			<lido-cell visible="true" layout="col" bg-color="transparent" padding="0" margin="landscape.90px 0px 0px -238px,portrait.80px 0px 0px -26px" >
-
-				<lido-image visible="true" id="drop5" tab-index="5" type="drop" onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='1000';" value="${args.answer5}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain_trans.png" margin="landscape.200px 0px -90px 0px,portrait.50px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
-				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_upper.png" margin="landscape.-5px 0px 0px 0px,portrait.-70px 0px 0px 0px"  
-		        width="landscape.200px,portrait.160px" background="transparent"></lido-image>
-				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px -150px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
-				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain.png" margin="landscape.-1px 16px 0px 0px,portrait.-120px 13px 0px 0px"  width="landscape.217px,portrait.170px" background="transparent"></lido-image>
-			</lido-cell>
-
-		</lido-cell>
-		
-
-		<!-- answers -->
-		<lido-cell visible="true" id="answer" delay-visible="2650" layout="row" height="40%" width="100%" bg-color="transparent" onEntry="this.alignItems='center';this.justify-content='space-around'"  >
-			
-				<lido-text id="drg1" onTouch="this.speak='true';" height="landscape.200px,portrait.160px" width="landscape.200px,portrait.160px" visible="true" font-family="'Baloo Bhai 2'" font-size="110px" string="${args.option1}" value="${args.option1}" tab-index="7" bg-Color="transparent" onEntry="  this.fontWeight='1000';" fontColor="gold" type="drag" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain.png" ></lido-text>
-			
-				<lido-text id="drg2" onTouch="this.speak='true';" height="landscape.200px,portrait.160px" width="landscape.200px,portrait.160px" visible="true" font-family="'Baloo Bhai 2'" font-size="110px" string="${args.option2}" value="${args.option2}" tab-index="8" bg-Color="transparent" onEntry="  this.fontWeight='1000';" fontColor="gold" type="drag" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain.png" ></lido-text>
-
-				<lido-text id="drg3"  onTouch="this.speak='true';" height="landscape.200px,portrait.160px" width="landscape.200px,portrait.160px" visible="true" font-family="'Baloo Bhai 2'" font-size="110px" string="${args.option3}" value="${args.option3}" tab-index="9" bg-Color="transparent" onEntry="  this.fontWeight='1000';" fontColor="gold" type="drag" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain.png" ></lido-text>
-
-				<lido-text id="drg4"  onTouch="this.speak='true';" height="landscape.200px,portrait.160px" width="landscape.200px,portrait.160px" visible="true" font-family="'Baloo Bhai 2'" font-size="110px" string="${args.option4}" value="${args.option4}" tab-index="10" bg-Color="transparent" onEntry="  this.fontWeight='1000';" fontColor="gold" type="drag" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain.png" ></lido-text>
-			
-				<lido-text id="drg5"  onTouch="this.speak='true';" height="landscape.200px,portrait.160px" width="landscape.200px,portrait.160px" visible="true" font-family="'Baloo Bhai 2'" font-size="110px" string="${args.option5}" value="${args.option5}" tab-index="11" bg-Color="transparent" onEntry="  this.fontWeight='1000';" fontColor="gold" type="drag" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain.png" ></lido-text>
-			
-		</lido-cell>
-		
-
-	</lido-container>
-    </main>
+    return `
+    <main>
+	<lido-container id="lido-container" is-allow-only-correct="${args.isAllowOnlyCorrect}" show-Check="false" is-Continue-On-Correct="true" after-Drop="false" objective="${[args.answer1, args.answer2, args.answer3, args.answer4, args.answer5].join(',')}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Order%20tractor.png" custom-style="#drop1, #drop2,#drop3,#drop4,#drop5{border: none !important;}" onCorrect="drg1.disableType='true';drg2.disableType='true';drg3.disableType='true';drg4.disableType='true';drg5.disableType='true';lido-avatar.avatarAnimate='Success'; this.sleep='2000';  lido-avatar.animation='placeToLeft 2.5s linear'; answer.animation='placeToLeft 2.5s linear';  truck.animation='placeToLeft 2.5s linear'; trainAudio.speak='true'; this.sleep='1000';" onInCorrect="lido-avatar.avatarAnimate='Fail';" >
+				<!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="300px" width="300px" x="landscape.110px,portrait.10px" y="landscape.80px,portrait.230px" ariaHidden="true" bgColor="transparent" visible="true"  onEntry="this.animation='rightToPlace 2.5s linear';">
+				<lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="100%"  width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}">
+				</lido-avatar>
+		</lido-cell>
+
+		<!-- truck -->
+		<lido-cell visible="true" id="truck" layout="row" height="60%" width="landscape.100%, portrait.auto" margin="landscape.0,portrait.650px -44px -11px -146px" bg-color="transparent"  onEntry=" this.animation='rightToPlace 2.5s linear';" onCorrect="" >
+			<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/ordertractor_cart.png" width="landscape.220px,portrait.250px" padding="0px" margin="landscape.350px -81px 0px 34px,portrait.172px -44px -11px -87px"></lido-image>
+
+				<lido-text id="question" tab-index="6" visible="false" string="arrange the number blocks in increasing or decreasing order and complete the pattern train" value="arrange the number blocks in increasing or decreasing order and complete the pattern train" onEntry="this.sleep='2000';this.speak='true';"></lido-text>
+				<lido-text id="trainAudio" visible="false" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/train1.m4a" onEntry="this.speak='true';"></lido-text>
+			<lido-cell visible="true" layout="col" bg-color="transparent" margin="landscape.0px -36px 0px -130px,portrait.0px 10px 0px 30px"  >
+
+				<lido-image visible="true" id="drop1" tab-index="1" type="drop" onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='1000';" value="${args.answer1}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain_trans.png" margin="landscape.200px 0px -90px 0px,portrait.50px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_upper.png" margin="landscape.-5px 0px 0px 0px,portrait.-70px 0px 0px 0px"  width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px 0px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px 0px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px 0px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px 0px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px -150px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain.png" margin="landscape.-1px 18px 0px 0px,portrait.-120px 12px 0px 0px"  width="landscape.217px,portrait.170px" background="transparent"></lido-image>
+			</lido-cell>
+
+			<lido-cell visible="true" layout="col" bg-color="transparent" margin="landscape.30px -31px 0px -198px,portrait.20px 10px 0px -40px" padding="0px" >
+
+				<lido-image visible="true" id="drop2" tab-index="2" type="drop" onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='1000';" value="${args.answer2}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain_trans.png" margin="landscape.200px 0px -90px 0px,portrait.50px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_upper.png" margin="landscape.-5px 0px 0px 0px,portrait.-70px 0px 0px 0px"  width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px 0px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px 0px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px 0px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px -150px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain.png" margin="landscape.-2px 17px 0px 0px,portrait.-120px 12px 0px 0px"  width="landscape.217px,portrait.170px" background="transparent"></lido-image>
+			</lido-cell>
+
+			<lido-cell visible="true" layout="col" bg-color="transparent" margin=" landscape.50px -44px 0px -205px,portrait.40px 0px 0px -40px" >
+
+				<lido-image visible="true" id="drop3" tab-index="3" type="drop" onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='1000';" value="${args.answer3}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain_trans.png" margin="landscape.200px 0px -90px 0px,portrait.50px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_upper.png" margin="landscape.-5px 0px 0px 0px,portrait.-70px 0px 0px 0px"  
+				width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px 0px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px 0px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px -150px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain.png" margin="landscape.-2px 17px 0px 0px,portrait.-120px 11px 0px 0px"  width="landscape.218px,portrait.170px" background="transparent"></lido-image>
+			</lido-cell>
+
+			<lido-cell visible="true" layout="col" bg-color="transparent" margin="landscape.70px 0px 0px -207px,portrait.60px 0px 0px -40px" >
+
+				<lido-image visible="true" id="drop4" tab-index="4" type="drop" onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='1000';" value="${args.answer4}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain_trans.png"  margin="landscape.200px 0px -90px 0px,portrait.50px 0px 0px 0px"
+				width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_upper.png" margin="landscape.-5px 0px 0px 0px,portrait.-70px 0px 0px 0px"  
+				width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px 0px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px -150px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain.png" margin="landscape.-2px 18px 0px 0px,portrait.-120px 12px 0px 0px"  width="landscape.217px,portrait.170px" background="transparent"></lido-image>
+			</lido-cell>
+
+			<lido-cell visible="true" layout="col" bg-color="transparent" padding="0" margin="landscape.90px 0px 0px -238px,portrait.80px 0px 0px -26px" >
+
+				<lido-image visible="true" id="drop5" tab-index="5" type="drop" onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='1000';" value="${args.answer5}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain_trans.png" margin="landscape.200px 0px -90px 0px,portrait.50px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_upper.png" margin="landscape.-5px 0px 0px 0px,portrait.-70px 0px 0px 0px"  
+		        width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px -150px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain.png" margin="landscape.-1px 16px 0px 0px,portrait.-120px 13px 0px 0px"  width="landscape.217px,portrait.170px" background="transparent"></lido-image>
+			</lido-cell>
+
+		</lido-cell>
+		
+
+		<!-- answers -->
+		<lido-cell visible="true" id="answer" delay-visible="2650" layout="row" height="40%" width="100%" bg-color="transparent" onEntry="this.alignItems='center';this.justify-content='space-around'"  >
+			
+				<lido-text id="drg1" onTouch="this.speak='true';" height="landscape.200px,portrait.160px" width="landscape.200px,portrait.160px" visible="true" font-family="'Baloo Bhai 2'" font-size="110px" string="${args.option1}" value="${args.option1}" tab-index="7" bg-Color="transparent" onEntry="  this.fontWeight='1000';" fontColor="gold" type="drag" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain.png" ></lido-text>
+			
+				<lido-text id="drg2" onTouch="this.speak='true';" height="landscape.200px,portrait.160px" width="landscape.200px,portrait.160px" visible="true" font-family="'Baloo Bhai 2'" font-size="110px" string="${args.option2}" value="${args.option2}" tab-index="8" bg-Color="transparent" onEntry="  this.fontWeight='1000';" fontColor="gold" type="drag" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain.png" ></lido-text>
+
+				<lido-text id="drg3"  onTouch="this.speak='true';" height="landscape.200px,portrait.160px" width="landscape.200px,portrait.160px" visible="true" font-family="'Baloo Bhai 2'" font-size="110px" string="${args.option3}" value="${args.option3}" tab-index="9" bg-Color="transparent" onEntry="  this.fontWeight='1000';" fontColor="gold" type="drag" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain.png" ></lido-text>
+
+				<lido-text id="drg4"  onTouch="this.speak='true';" height="landscape.200px,portrait.160px" width="landscape.200px,portrait.160px" visible="true" font-family="'Baloo Bhai 2'" font-size="110px" string="${args.option4}" value="${args.option4}" tab-index="10" bg-Color="transparent" onEntry="  this.fontWeight='1000';" fontColor="gold" type="drag" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain.png" ></lido-text>
+			
+				<lido-text id="drg5"  onTouch="this.speak='true';" height="landscape.200px,portrait.160px" width="landscape.200px,portrait.160px" visible="true" font-family="'Baloo Bhai 2'" font-size="110px" string="${args.option5}" value="${args.option5}" tab-index="11" bg-Color="transparent" onEntry="  this.fontWeight='1000';" fontColor="gold" type="drag" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain.png" ></lido-text>
+			
+		</lido-cell>
+		
+
+	</lido-container>
+    </main>
   `;
 }

package/dist/collection/stories/Templates/palEgmaCalculateSum/palEgmaMultiOption.stories.js

@@ -32,76 +32,76 @@ function getContainerXml(args) {
     const isAllowOnlyCorrect = (_b = args.isAllowOnlyCorrect) !== null && _b !== void 0 ? _b : true;
     const objective = String(Number(number1) + Number(number2));
     const imageCells1 = Array.from({ length: Number(number1) }, (_, i) => i + 1)
-        .map((digit, i) => `
-        <lido-image id="image1-${digit}" height="landscape.140px, portrait.125px" width="60px" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/Kulfi.png" bg-color="transparent" border-image="">
-        </lido-image>
+        .map((digit, i) => `
+        <lido-image id="image1-${digit}" height="landscape.140px, portrait.125px" width="60px" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/Kulfi.png" bg-color="transparent" border-image="">
+        </lido-image>
       `)
         .join('\n');
     const imageCells2 = Array.from({ length: Number(number2) }, (_, i) => i + 1)
-        .map((digit, i) => `
-        <lido-image id="image2-${digit}" height="landscape.140px, portrait.125px" width="60px" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/Kulfi.png" bg-color="transparent" border-image="">
-        </lido-image>
+        .map((digit, i) => `
+        <lido-image id="image2-${digit}" height="landscape.140px, portrait.125px" width="60px" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/Kulfi.png" bg-color="transparent" border-image="">
+        </lido-image>
       `)
         .join('\n');
     const clickCells = options
-        .map((digit, i) => `
-      <lido-text id="click-${digit}" disable-speak="true" tab-index="${50 + i}" height="landscape.212px, portrait.125px" width="landscape.270px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="click" font-size="104px"  bg-color="#FFAC4C"  onEntry="this.fontWeight='800'; this.borderRadius='24px'; this.flex-shrink='0';" border-image="" onCorrect="" onInCorrect="" >
-      </lido-text>
+        .map((digit, i) => `
+      <lido-text id="click-${digit}" disable-speak="true" tab-index="${50 + i}" height="landscape.212px, portrait.125px" width="landscape.270px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="click" font-size="104px"  bg-color="#FFAC4C"  onEntry="this.fontWeight='800'; this.borderRadius='24px'; this.flex-shrink='0';" border-image="" onCorrect="" onInCorrect="" >
+      </lido-text>
     `)
         .join('\n');
-    return `
-    <main>
-    
-        <lido-container disable-speak="true" id="lido-container" objective="${objective}" tab-index="1" show-drop-border="false" is-continue-on-correct="${isAllowOnlyCorrect}"  is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/pal_egma_temp_3.png" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; invisibleText.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false">
-
-            <!-- Chimple Avatar -->
-            <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.1310px, portrait.450px" y="landscape.418px, portrait.1020px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
-                <lido-avatar id="lido-avatar" disable-edit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}" onEntry="">
-                </lido-avatar>
-                <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="inherit" height="27px" x="landscape.-7px, portrait.-7px" y="landscape.450px, portrait.540px" altText="{shadowImage}">
-                </lido-image>
-            </lido-cell>
-
-            <lido-text id="invisibleText" tab-index="2" audio="" width="297px" height="80px" display="flex" font-size="12px" z="1" font-color="black" value="solve the equation and click the correct answer" string="solve the equation and click the correct answer" visible="false" bg-color="transparent" onEntry="">
-            </lido-text> 
-
-
-            <!-- question row-->
-            <lido-cell layout="row" id="question-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.15%" width="landscape.65%, portrait.90%" bg-Color="transparent" margin="landscape.215px 0px 30px 0px,portrait.25px 0px -120px 0px" onEntry="this.z-index='1'; this.justify-content='center';" gap="landscape.35px,portrait.40px">
-                <lido-cell layout="col" is-slice="true" visible="true" height="landscape.245px,portrait.41%" width="auto" bg-Color="#FFF5BB" onEntry="this.z-index='1'; this.borderRadius='16px';" onCorrect="">
-                  <lido-cell layout="row" is-slice="true" visible="true" height="landscape.15%,portrait.41%" width="auto" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="">
-                    ${imageCells1}
-                  </lido-cell>
-                  <lido-cell layout="row" is-slice="true" visible="true" height="landscape.5%,portrait.41%" width="inherit" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="">
-                    <lido-text id="num-1" is-slice="true"  disable-edit="true" height="landscape.156px, portrait.125px" width="inherit" visible="true" value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.90px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='700'; this.borderRadius='16px';" border-image="">
-                    </lido-text>
-                  </lido-cell>
-                </lido-cell>
-                <lido-text id="operator"  height="295px" width="120px" visible="true"  value="${sign}" string="${sign}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='700'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';" border-image="">
-                </lido-text>
-                <lido-cell layout="col" is-slice="true" visible="true" height="landscape.245px,portrait.41%" width="auto" bg-Color="#FFF5BB" onEntry="this.z-index='1'; this.borderRadius='16px';" onCorrect="">
-                  <lido-cell layout="row" is-slice="true" visible="true" height="landscape.15%,portrait.41%" width="auto" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="">
-                    ${imageCells2}
-                  </lido-cell>
-                  <lido-cell layout="row" is-slice="true" visible="true" height="landscape.5%,portrait.41%" width="inherit" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="">
-                    <lido-text id="num-2" is-slice="true"  disable-edit="true" height="landscape.156px, portrait.125px" width="inherit" visible="true" value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.90px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='700'; this.borderRadius='16px';" border-image="">
-                    </lido-text>
-                  </lido-cell>
-                </lido-cell>
-                <lido-text id="equal"  height="215px" width="120px" visible="true"  value="=" string="=" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='700'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';" border-image="">
-                </lido-text>
-                <lido-text id="drop-answer" disable-edit="true" height="landscape.287px, portrait.125px" width="208px" visible="true" value="5" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='700'; this.borderRadius='16px';" border-image="">
-                </lido-text>
-            </lido-cell>
-
-
-            <!-- answers click cell -->
-            <!-- option row-->
-            <lido-cell layout="landscape.row, portrait.wrap" id="option-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.5%" width="landscape.90%, portrait.106%" bg-Color="transparent" margin="landscape.65px 0px 65px 0px,portrait.-160px -65px 500px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.opacity='1';" gap="landscape.20px,portrait.5px">
-                ${clickCells}
-            </lido-cell>
-        </lido-container>
-
-    </main>
+    return `
+    <main>
+    
+        <lido-container disable-speak="true" id="lido-container" objective="${objective}" tab-index="1" show-drop-border="false" is-continue-on-correct="${isAllowOnlyCorrect}"  is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/pal_egma_temp_3.png" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; invisibleText.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false">
+
+            <!-- Chimple Avatar -->
+            <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.1310px, portrait.450px" y="landscape.418px, portrait.1020px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
+                <lido-avatar id="lido-avatar" disable-edit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}" onEntry="">
+                </lido-avatar>
+                <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="inherit" height="27px" x="landscape.-7px, portrait.-7px" y="landscape.450px, portrait.540px" altText="{shadowImage}">
+                </lido-image>
+            </lido-cell>
+
+            <lido-text id="invisibleText" tab-index="2" audio="" width="297px" height="80px" display="flex" font-size="12px" z="1" font-color="black" value="solve the equation and click the correct answer" string="solve the equation and click the correct answer" visible="false" bg-color="transparent" onEntry="">
+            </lido-text> 
+
+
+            <!-- question row-->
+            <lido-cell layout="row" id="question-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.15%" width="landscape.65%, portrait.90%" bg-Color="transparent" margin="landscape.215px 0px 30px 0px,portrait.25px 0px -120px 0px" onEntry="this.z-index='1'; this.justify-content='center';" gap="landscape.35px,portrait.40px">
+                <lido-cell layout="col" is-slice="true" visible="true" height="landscape.245px,portrait.41%" width="auto" bg-Color="#FFF5BB" onEntry="this.z-index='1'; this.borderRadius='16px';" onCorrect="">
+                  <lido-cell layout="row" is-slice="true" visible="true" height="landscape.15%,portrait.41%" width="auto" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="">
+                    ${imageCells1}
+                  </lido-cell>
+                  <lido-cell layout="row" is-slice="true" visible="true" height="landscape.5%,portrait.41%" width="inherit" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="">
+                    <lido-text id="num-1" is-slice="true"  disable-edit="true" height="landscape.156px, portrait.125px" width="inherit" visible="true" value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.90px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='700'; this.borderRadius='16px';" border-image="">
+                    </lido-text>
+                  </lido-cell>
+                </lido-cell>
+                <lido-text id="operator"  height="295px" width="120px" visible="true"  value="${sign}" string="${sign}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='700'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';" border-image="">
+                </lido-text>
+                <lido-cell layout="col" is-slice="true" visible="true" height="landscape.245px,portrait.41%" width="auto" bg-Color="#FFF5BB" onEntry="this.z-index='1'; this.borderRadius='16px';" onCorrect="">
+                  <lido-cell layout="row" is-slice="true" visible="true" height="landscape.15%,portrait.41%" width="auto" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="">
+                    ${imageCells2}
+                  </lido-cell>
+                  <lido-cell layout="row" is-slice="true" visible="true" height="landscape.5%,portrait.41%" width="inherit" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="">
+                    <lido-text id="num-2" is-slice="true"  disable-edit="true" height="landscape.156px, portrait.125px" width="inherit" visible="true" value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.90px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='700'; this.borderRadius='16px';" border-image="">
+                    </lido-text>
+                  </lido-cell>
+                </lido-cell>
+                <lido-text id="equal"  height="215px" width="120px" visible="true"  value="=" string="=" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='700'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';" border-image="">
+                </lido-text>
+                <lido-text id="drop-answer" disable-edit="true" height="landscape.287px, portrait.125px" width="208px" visible="true" value="5" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='700'; this.borderRadius='16px';" border-image="">
+                </lido-text>
+            </lido-cell>
+
+
+            <!-- answers click cell -->
+            <!-- option row-->
+            <lido-cell layout="landscape.row, portrait.wrap" id="option-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.5%" width="landscape.90%, portrait.106%" bg-Color="transparent" margin="landscape.65px 0px 65px 0px,portrait.-160px -65px 500px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.opacity='1';" gap="landscape.20px,portrait.5px">
+                ${clickCells}
+            </lido-cell>
+        </lido-container>
+
+    </main>
   `;
 }

package/dist/collection/stories/Templates/palEgmaCalculateSum/palEgmaSumTogether.stories.js

@@ -36,55 +36,55 @@ function getContainerXml(args) {
     const objectiveString = `${missingNumber.split('').join(',')}`;
     const objectiveArray = missingNumber.split('');
     const dropCells = objectiveArray
-        .map((cell, i) => `
-      <lido-text visible="true" id="drop-${i}" type="drop" tab-index="${25 + i}" height="212px" width="130px" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="#FFF5BBB2" value="${cell}" onEntry="this.fontWeight='700';this.border='2px solid #FFB612';this.border-radius='16px';" >
-      </lido-text>	
+        .map((cell, i) => `
+      <lido-text visible="true" id="drop-${i}" type="drop" tab-index="${25 + i}" height="212px" width="130px" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="#FFF5BBB2" value="${cell}" onEntry="this.fontWeight='700';this.border='2px solid #FFB612';this.border-radius='16px';" >
+      </lido-text>	
       `)
         .join('\n');
     const dragCells = options
-        .map((digit, i) => `
-      <lido-text id="drag-${digit}" disable-speak="true" tab-index="${50 + i}" height="landscape.212px, portrait.125px" width="landscape.140px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="drag" font-size="104px"  bg-color="#FFAC4C"  onEntry="this.fontWeight='800'; this.borderRadius='16px'; this.flex-shrink='0';" border-image="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';">
-      </lido-text>
+        .map((digit, i) => `
+      <lido-text id="drag-${digit}" disable-speak="true" tab-index="${50 + i}" height="landscape.212px, portrait.125px" width="landscape.140px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="drag" font-size="104px"  bg-color="#FFAC4C"  onEntry="this.fontWeight='800'; this.borderRadius='16px'; this.flex-shrink='0';" border-image="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';">
+      </lido-text>
     `)
         .join('\n');
-    return `
-    <main>
-        <lido-container id="lido-container" disable-speak="true" objective="${objectiveString}" tab-index="1" template-id="dragAndDrop" show-drop-border="false" is-continue-on-correct="${isAllowOnlyCorrect}"  is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/pal_egma_temp_3.png" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="this.questionBoxAnimate='true'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; invisibleText.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false">
-
-        
-            <!-- Chimple Avatar -->
-            <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.1310px, portrait.450px" y="landscape.100px, portrait.1020px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
-                <lido-avatar id="lido-avatar" disable-edit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}" onEntry="">
-                </lido-avatar>
-                <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="inherit" height="27px" x="landscape.-7px, portrait.-7px" y="landscape.450px, portrait.540px" altText="{shadowImage}">
-                </lido-image>
-            </lido-cell>
-
-            <lido-text id="invisibleText" tab-index="2" audio="" width="297px" height="80px" display="flex" font-size="12px" z="1" font-color="black" value="solve the equation and drag the correct answer" string="solve the equation and drag the correct answer" visible="false" bg-color="transparent" onEntry="">
-            </lido-text> 
-
-            <!-- question row-->
-            <lido-cell layout="row" id="question-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.15%" width="landscape.65%, portrait.90%" bg-Color="transparent" margin="landscape.215px 0px 30px 0px,portrait.25px 0px -120px 0px" onEntry="this.z-index='1'; this.justify-content='center';" gap="landscape.60px,portrait.40px">
-                <lido-text id="num-1" height="215px" width="120px" visible="true"  value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='700'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';" border-image="">
-                </lido-text>
-                <lido-text id="operator"  height="295px" width="120px" visible="true"  value="${sign}" string="${sign}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='700'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';" border-image="">
-                </lido-text>
-                <lido-text id="num-2"  height="215px" width="120px" visible="true"  value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='700'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';" border-image="">
-                </lido-text>
-                <lido-text id="equal" height="215px" width="120px" visible="true"  value="=" string="=" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='700'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';" border-image="">
-                </lido-text>
-                <lido-cell layout="row" is-slice="true" visible="true" height="landscape.20%,portrait.41%" width="auto" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="" gap="landscape.10px,portrait.5px">
-                  ${dropCells}
-                </lido-cell>
-            </lido-cell>
-
-
-            <!-- answers drag cell -->
-            <!-- option row-->
-            <lido-cell layout="landscape.row, portrait.wrap" id="option-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.5%" width="landscape.90%, portrait.106%" bg-Color="transparent" margin="landscape.65px 0px 65px 0px,portrait.-160px -65px 500px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.opacity='1';" gap="landscape.20px,portrait.5px">
-                ${dragCells}
-            </lido-cell>
-        </lido-container>
-    </main>
+    return `
+    <main>
+        <lido-container id="lido-container" disable-speak="true" objective="${objectiveString}" tab-index="1" template-id="dragAndDrop" show-drop-border="false" is-continue-on-correct="${isAllowOnlyCorrect}"  is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/pal_egma_temp_3.png" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="this.questionBoxAnimate='true'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; invisibleText.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false">
+
+        
+            <!-- Chimple Avatar -->
+            <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.1310px, portrait.450px" y="landscape.100px, portrait.1020px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
+                <lido-avatar id="lido-avatar" disable-edit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}" onEntry="">
+                </lido-avatar>
+                <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="inherit" height="27px" x="landscape.-7px, portrait.-7px" y="landscape.450px, portrait.540px" altText="{shadowImage}">
+                </lido-image>
+            </lido-cell>
+
+            <lido-text id="invisibleText" tab-index="2" audio="" width="297px" height="80px" display="flex" font-size="12px" z="1" font-color="black" value="solve the equation and drag the correct answer" string="solve the equation and drag the correct answer" visible="false" bg-color="transparent" onEntry="">
+            </lido-text> 
+
+            <!-- question row-->
+            <lido-cell layout="row" id="question-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.15%" width="landscape.65%, portrait.90%" bg-Color="transparent" margin="landscape.215px 0px 30px 0px,portrait.25px 0px -120px 0px" onEntry="this.z-index='1'; this.justify-content='center';" gap="landscape.60px,portrait.40px">
+                <lido-text id="num-1" height="215px" width="120px" visible="true"  value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='700'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';" border-image="">
+                </lido-text>
+                <lido-text id="operator"  height="295px" width="120px" visible="true"  value="${sign}" string="${sign}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='700'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';" border-image="">
+                </lido-text>
+                <lido-text id="num-2"  height="215px" width="120px" visible="true"  value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='700'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';" border-image="">
+                </lido-text>
+                <lido-text id="equal" height="215px" width="120px" visible="true"  value="=" string="=" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='700'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';" border-image="">
+                </lido-text>
+                <lido-cell layout="row" is-slice="true" visible="true" height="landscape.20%,portrait.41%" width="auto" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="" gap="landscape.10px,portrait.5px">
+                  ${dropCells}
+                </lido-cell>
+            </lido-cell>
+
+
+            <!-- answers drag cell -->
+            <!-- option row-->
+            <lido-cell layout="landscape.row, portrait.wrap" id="option-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.5%" width="landscape.90%, portrait.106%" bg-Color="transparent" margin="landscape.65px 0px 65px 0px,portrait.-160px -65px 500px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.opacity='1';" gap="landscape.20px,portrait.5px">
+                ${dragCells}
+            </lido-cell>
+        </lido-container>
+    </main>
   `;
 }