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

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

@@ -12,13 +12,14 @@ const meta = {
         answer3: { control: 'text' },
         answer4: { control: 'text' },
         answer5: { control: 'text' },
+        isAllowOnlyCorrect: { control: 'boolean' },
     },
 };
 export default meta;
 export const OrderTractor = {
     args: {
         option1: '1', option2: '2', option3: '3', option4: '4', option5: '5',
-        answer1: '5', answer2: '4', answer3: '3', answer4: '2', answer5: '1',
+        answer1: '5', answer2: '4', answer3: '3', answer4: '2', answer5: '1', isAllowOnlyCorrect: 'true',
     },
     render: args => {
         const xml = getContainerXml(args);
@@ -26,95 +27,95 @@ export const OrderTractor = {
     },
 };
 function getContainerXml(args) {
-    return `
-    <main>
-	<lido-container id="lido-container" is-allow-only-correct="true" 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/Ordered%20Tractor/Spring.png" custom-style="#drop1, #drop2,#drop3,#drop4,#drop5{border: none !important;}" onCorrect="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" 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'" 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'" 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'" 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'" 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'" 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" layout="row" height="40%" width="100%" bg-color="transparent" onEntry="this.alignItems='center';this.justify-content='space-around'"  >
-			
-				<lido-text id="drg1"  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="6" 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"  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="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="drg3"   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="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="drg4"   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="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="drg5"   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="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-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/Ordered%20Tractor/Spring.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" 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="6" 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="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="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="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="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="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="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="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-cell>
+		
+
+	</lido-container>
+    </main>
   `;
 }

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

@@ -5,6 +5,7 @@ const meta = {
         text1: { control: 'text' },
         options: { control: 'object' },
         answers: { control: 'object' },
+        isAllowOnlyCorrect: { control: 'boolean', name: 'Allow Only Correct' },
     },
 };
 export default meta;
@@ -13,6 +14,7 @@ export const PhonicTractor = {
         text1: 'fox',
         options: ['f', 'o', 'x'],
         answers: ['f', 'o', 'x'],
+        isAllowOnlyCorrect: true,
     },
     render: args => {
         const xml = getContainerXml(args);
@@ -21,60 +23,60 @@ export const PhonicTractor = {
 };
 function getContainerXml(args) {
     let tabCounter = 1;
-    const { text1, options = [], answers = [] } = args;
+    const { text1, options = [], answers = [], isAllowOnlyCorrect } = args;
     const trolleyCells = answers
         .map((answer) => {
-        return `
-		<!-- drop and trolley -->
-		<lido-cell height="237px" width="200px" visible="true" bg-color="transparent" layout="col" >
-			<lido-text id="drop${tabCounter}" type="drop" tab-index="${tabCounter++}" bg-color="transparent" height="132px" width="132px" value="${answer}" is-allow-only-one-drop="true" margin="-25px 0px 16px 0px" onEntry=" this.borderRadius='6px';this.display='flex'; this.alignItems='center'; this.justifyContent='center';">
-			</lido-text>
-			<lido-image id="img${tabCounter}" visible="true"  disable-edit="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/phonictractor_tractor_holder.png" height="97px" width="220px" >
-			</lido-image>
-		</lido-cell>
+        return `
+		<!-- drop and trolley -->
+		<lido-cell height="237px" width="200px" visible="true" bg-color="transparent" layout="col" >
+			<lido-text id="drop${tabCounter}" type="drop" tab-index="${tabCounter++}" bg-color="transparent" height="132px" width="132px" value="${answer}" is-allow-only-one-drop="${isAllowOnlyCorrect}" margin="-25px 0px 16px 0px" onEntry=" this.borderRadius='6px';this.display='flex'; this.alignItems='center'; this.justifyContent='center';">
+			</lido-text>
+			<lido-image id="img${tabCounter}" visible="true"  disable-edit="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/phonictractor_tractor_holder.png" height="97px" width="220px" >
+			</lido-image>
+		</lido-cell>
       `;
     })
         .join('');
     const optionCells = options
         .map((option) => {
-        return `
-		<lido-text id="option${tabCounter}" tab-index="${tabCounter++}" width="132px"  height="132px" value="${option}"  visible="true" string="${option}" font-family="'Baloo Bhai 2'" font-color="white" type="drag" font-size="landscape.96px, portrait.96px" bg-color="transparent" onEntry="  this.fontWeight='600';this.borderRadius='10px';"  margin="landscape.150px 0px 112px 0px, portrait.0px 0px 0px 0px"  border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/box.png" onTouch="this.speak='true';"  >
-		</lido-text>
+        return `
+		<lido-text id="option${tabCounter}" tab-index="${tabCounter++}" width="132px"  height="132px" value="${option}"  visible="true" string="${option}" font-family="'Baloo Bhai 2'" font-color="white" type="drag" font-size="landscape.96px, portrait.96px" bg-color="transparent" onEntry="  this.fontWeight='600';this.borderRadius='10px';"  margin="landscape.150px 0px 112px 0px, portrait.0px 0px 0px 0px"  border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/box.png" onTouch="this.speak='true';"  >
+		</lido-text>
       `;
     })
         .join('');
-    return `
-    <main>
-	<lido-container id="lido-container" appendToDropOnCompletion="true" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/bg-image.png"  bg-color="transparent" objective="${answers.join(',')}" height="100%" width="100%" visible="true" show-check="false" is-continue-on-correct="true" after-drop="false" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='1000';  b1.animation='placeToLeft 2s linear'; this.sleep='2000';"  onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';"   > 
-
-	    <!-- Chimple Avatar -->
-		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="landscape.1274px, portrait.576px" y="landscape.591px, portrait.236px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
-			<lido-avatar id="lido-avatar" disable-edit="true" visible="true"  height="462px"  width="356px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
-			</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="186px" height="20px" x="landscape.7px, portrait.77px" y="landscape.305px, portrait.365px" alt-text="{shadowImage}">
-			</lido-image>
-		</lido-cell>
-		<!-- parent cell -->
-		<lido-cell layout="col" visible="true" width="100%" height="100%"  bg-color="transparent" margin="landscape.-38px 0px -122px 0px, portrait.0px 0px 0px 0px">
-			<!-- question -->
-			<lido-image visible="true" onTouch="this.speak='true';" id="img1" height="140px" width="361px"  disable-edit="true" is-slice="true" bg-color="transparent" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/board.png" margin="landscape.42px 0px -126px 0px, portrait.-58px 0px 60px 0px"  >
-				<lido-text id="heading"  tab-index="1" height="100px"  visible="true" string="${text1}" font-family="'Baloo Bhai 2'" font-color="white" font-size="landscape.96px, portrait.96px" bg-color="transparent" onEntry="  this.fontWeight='600';"   margin="landscape.0px 0px 0px 0px, portrait.0px 0px 0px 0px" >
-				</lido-text>
-			</lido-image>
-			<!-- tractor -->
-			<lido-cell layout="row" id="b1" visible="true" width="landscape.100%, portrait.850px" height="landscape.245px, portrait.30%" bg-color="transparent" onEntry="this.align-items='center'; this.animation='rightToPlace 3s linear'; this.justifyContent='center';" margin="landscape.215px 0px 0px 0px, portrait.0px 0px 0px 0px">
-				<!-- tractor head -->
-				<lido-image id="img2" visible="true"  disable-edit="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/phonictractor_tractor_head.png" height="landscape.154px, portrait.154px" width="197px" onEntry="" margin="landscape.86px -11px 0px 89px, portrait.80px 0px 0px 0px" >
-				</lido-image>
-				${trolleyCells}
-			</lido-cell>
-			<!-- options -->
-			<lido-cell layout="landscape.row,portrait.wrap" width="80%" height="landscpe.275px, portrait.150px" visible="true" delay-visible="3000" bg-color="transparent" onEntry="this.gap=35px; this.justify-content='center';" >
-				${optionCells}				
-			</lido-cell>	
-		</lido-cell>	
-
-    </lido-container>
-    </main>
+    return `
+    <main>
+	<lido-container id="lido-container" appendToDropOnCompletion="true" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/bg-image.png"  bg-color="transparent" objective="${answers.join(',')}" height="100%" width="100%" visible="true" show-check="false" is-continue-on-correct="true" after-drop="false" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='1000';  b1.animation='placeToLeft 2s linear'; this.sleep='2000';"  onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" is-allow-only-correct="${isAllowOnlyCorrect}"> 
+
+	    <!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="landscape.1274px, portrait.576px" y="landscape.591px, portrait.236px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
+			<lido-avatar id="lido-avatar" disable-edit="true" visible="true"  height="462px"  width="356px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+			</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="186px" height="20px" x="landscape.7px, portrait.77px" y="landscape.305px, portrait.365px" alt-text="{shadowImage}">
+			</lido-image>
+		</lido-cell>
+		<!-- parent cell -->
+		<lido-cell layout="col" visible="true" width="100%" height="100%"  bg-color="transparent" margin="landscape.-38px 0px -122px 0px, portrait.0px 0px 0px 0px">
+			<!-- question -->
+			<lido-image visible="true" onTouch="this.speak='true';" id="img1" height="140px" width="361px"  disable-edit="true" is-slice="true" bg-color="transparent" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/board.png" margin="landscape.42px 0px -126px 0px, portrait.-58px 0px 60px 0px"  >
+				<lido-text id="heading"  tab-index="1" height="100px"  visible="true" string="${text1}" font-family="'Baloo Bhai 2'" font-color="white" font-size="landscape.96px, portrait.96px" bg-color="transparent" onEntry="  this.fontWeight='600';"   margin="landscape.0px 0px 0px 0px, portrait.0px 0px 0px 0px" >
+				</lido-text>
+			</lido-image>
+			<!-- tractor -->
+			<lido-cell layout="row" id="b1" visible="true" width="landscape.100%, portrait.850px" height="landscape.245px, portrait.30%" bg-color="transparent" onEntry="this.align-items='center'; this.animation='rightToPlace 3s linear'; this.justifyContent='center';" margin="landscape.215px 0px 0px 0px, portrait.0px 0px 0px 0px">
+				<!-- tractor head -->
+				<lido-image id="img2" visible="true"  disable-edit="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/phonictractor_tractor_head.png" height="landscape.154px, portrait.154px" width="197px" onEntry="" margin="landscape.86px -11px 0px 89px, portrait.80px 0px 0px 0px" >
+				</lido-image>
+				${trolleyCells}
+			</lido-cell>
+			<!-- options -->
+			<lido-cell layout="landscape.row,portrait.wrap" width="80%" height="landscpe.275px, portrait.150px" visible="true" delay-visible="3000" bg-color="transparent" onEntry="this.gap=35px; this.justify-content='center';" >
+				${optionCells}				
+			</lido-cell>	
+		</lido-cell>	
+
+    </lido-container>
+    </main>
   `;
 }

package/dist/collection/stories/Templates/picturemeaning/pictureMeaningCocos.stories.js

@@ -18,25 +18,25 @@ export const Default = {
     },
 };
 function getContainerXml(args) {
-    return `<main>	
-  <lido-container id="lido-container" is-allow-only-correct="true" objective="${args.drop1},${args.drop2},${args.drop3}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" dropAttr="EnableAnimation">
-				<!-- Chimple Avatar -->
-		<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="300px" width="300px" x="landscape.870px,portrait.300px" y="landscape.560px,portrait.1400px" ariaHidden="true" bgColor="transparent" visible="true"  onEntry="">
-				<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>
-		<lido-cell visible="true" layout="row" width="landscape.90%, portrait.100%" height="100%" bg-color="transparent" onEntry="this.justifyContent='space-between';">
-			<lido-cell visible="true" layout="col" width="landscape.45%, portrait.60%" height="90%" bg-color="transparent">
-				<lido-text visible="true" id="drag1" width="landscape.700px, portrait.470px" tab-index="1" audio="" string="${args.drag1}" value="${args.drag1}" font-size="landscape.72px, portrait.62px" font-color="black" onEntry="this.fontWeight='500'; this.lineHeight='80px';" border-radius="16px" bg-color="white" type="drag" padding="10px"></lido-text>
-				<lido-text visible="true" id="drag2" width="landscape.700px, portrait.470px" tab-index="2" audio="" string="${args.drag2}" value="${args.drag2}" font-size="landscape.72px, portrait.62px" font-color="black" onEntry="this.fontWeight='500'; this.lineHeight='80px';" border-radius="16px" bg-color="white" type="drag" padding="10px"></lido-text>
-				<lido-text visible="true" id="drag3" width="landscape.700px, portrait.470px" tab-index="3" audio="" string="${args.drag3}" value="${args.drag3}" font-size="landscape.72px, portrait.62px" font-color="black" onEntry="this.fontWeight='500'; this.lineHeight='80px';" border-radius="16px" bg-color="white" type="drag" padding="10px"></lido-text>
-			</lido-cell>
-			<lido-cell visible="true" layout="col" width="landscape.30%, portrait.40%" height="90%" bg-color="transparent" onEntry="this.alignItems='end';">
-				<lido-image visible="true" id="drop1" width="landscape.240px, portrait.300px" tab-index="4" audio="" height="landscape.240px, portrait.300px" type="drop" border-radius="6px" value="${args.drop1}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picturemeaning/hygiene%201.png" bg-color="white"></lido-image>
-				<lido-image visible="true" id="drop2" width="landscape.240px, portrait.300px" tab-index="5" audio="" height="landscape.240px, portrait.300px" type="drop" border-radius="6px" value="${args.drop2}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picturemeaning/healthy_food.png" bg-color="white"></lido-image>
-				<lido-image visible="true" id="drop3" width="landscape.240px, portrait.300px" tab-index="6" audio="" height="landscape.240px, portrait.300px" type="drop" border-radius="6px" value="${args.drop3}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picturemeaning/hospital_with_patients.png" bg-color="white"></lido-image>
-			</lido-cell>
-		</lido-cell>
-	</lido-container>
+    return `<main>	
+  <lido-container id="lido-container" is-allow-only-correct="true" objective="${args.drop1},${args.drop2},${args.drop3}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" dropAttr="EnableAnimation">
+				<!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="300px" width="300px" x="landscape.870px,portrait.300px" y="landscape.560px,portrait.1400px" ariaHidden="true" bgColor="transparent" visible="true"  onEntry="">
+				<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>
+		<lido-cell visible="true" layout="row" width="landscape.90%, portrait.100%" height="100%" bg-color="transparent" onEntry="this.justifyContent='space-between';">
+			<lido-cell visible="true" layout="col" width="landscape.45%, portrait.60%" height="90%" bg-color="transparent">
+				<lido-text visible="true" id="drag1" width="landscape.700px, portrait.470px" tab-index="1" audio="" string="${args.drag1}" value="${args.drag1}" font-size="landscape.72px, portrait.62px" font-color="black" onEntry="this.fontWeight='500'; this.lineHeight='80px';" border-radius="16px" bg-color="white" type="drag" padding="10px"></lido-text>
+				<lido-text visible="true" id="drag2" width="landscape.700px, portrait.470px" tab-index="2" audio="" string="${args.drag2}" value="${args.drag2}" font-size="landscape.72px, portrait.62px" font-color="black" onEntry="this.fontWeight='500'; this.lineHeight='80px';" border-radius="16px" bg-color="white" type="drag" padding="10px"></lido-text>
+				<lido-text visible="true" id="drag3" width="landscape.700px, portrait.470px" tab-index="3" audio="" string="${args.drag3}" value="${args.drag3}" font-size="landscape.72px, portrait.62px" font-color="black" onEntry="this.fontWeight='500'; this.lineHeight='80px';" border-radius="16px" bg-color="white" type="drag" padding="10px"></lido-text>
+			</lido-cell>
+			<lido-cell visible="true" layout="col" width="landscape.30%, portrait.40%" height="90%" bg-color="transparent" onEntry="this.alignItems='end';">
+				<lido-image visible="true" id="drop1" width="landscape.240px, portrait.300px" tab-index="4" audio="" height="landscape.240px, portrait.300px" type="drop" border-radius="6px" value="${args.drop1}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picturemeaning/hygiene%201.png" bg-color="white"></lido-image>
+				<lido-image visible="true" id="drop2" width="landscape.240px, portrait.300px" tab-index="5" audio="" height="landscape.240px, portrait.300px" type="drop" border-radius="6px" value="${args.drop2}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picturemeaning/healthy_food.png" bg-color="white"></lido-image>
+				<lido-image visible="true" id="drop3" width="landscape.240px, portrait.300px" tab-index="6" audio="" height="landscape.240px, portrait.300px" type="drop" border-radius="6px" value="${args.drop3}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picturemeaning/hospital_with_patients.png" bg-color="white"></lido-image>
+			</lido-cell>
+		</lido-cell>
+	</lido-container>
   </main>`;
 }

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

@@ -20,22 +20,22 @@ export const PuzzleGame = {
     },
 };
 function getContainerXml(args) {
-    return `<main>
- <lido-container  id="lido-container" show-drop-border="false" tab-index="1" is-continue-on-correct="true" objective="i1,i2" bgImage="" bgColor="grey" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" showCheck="false" visible="true">
-    	<lido-image  id="img1" disableEdit="true"  visible="true" width="landscape.68%,portrait.134%" margin="landscape.-5px 0px 188px,portrait.-5px 0px 188px -133px" height="landscape.59%,portrait.53%" src="${args.dropimg}" z="0"  onEntry="this.backgroundImage='none';" > 
-			 <!-- drop elements -->
-			  <lido-text id="t1" tab-index="2" type="drop" tabIndex="2" value="i1" border-image="transparent"  bgColor="transparent" z="5" height="132px" width="132px" is-allow-only-one-drop="true" x="landscape.583px,portrait.643px" y="-97px"  onEntry=" this.position='relative';"></lido-text>
-			<lido-text id="t2" tab-index="3" type="drop" bgColor="transparent" value="i2" border-image="none" tabIndex="3" z="10" height="132px" width="132px"  is-allow-only-one-drop="true" x="landscape.449px,portrait.498px" y="119px"   onEntry=" this.border='none';this.position='relative';"></lido-text>
-		</lido-image>  
-		
-		<!-- draggabel images -->
-		 <lido-cell layout="row" width="80%" height="34%" bgColor="transparent" visible="true" margin="-158px 0px -31px 0px" > 
-			<lido-image id="img2" tab-index="4" width="374px" height="279px" disableEdit="true" value="i1"  bgColor="transparent" visible="true"  type="drag"  margin="0px 0px 0px 0px"  src="${args.dragimg1}" z="1"  onEntry="this.boxShadow='unset';" >
-			</lido-image>
-			
-			<lido-image id="img3" tab-index="5" disableEdit="true" value="i2" bgColor="transparent" visible="true" width="landscape.304px,portrait.310px" height="310px" type="drag"  margin="0px 0px 0px 0px"  src="${args.dragimg2}" z="1" onEntry="this.boxShadow='unset';" >
-			</lido-image>
-		</lido-cell>
-	</lido-container>
+    return `<main>
+ <lido-container  id="lido-container" show-drop-border="false" tab-index="1" is-continue-on-correct="true" objective="i1,i2" bgImage="" bgColor="grey" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" showCheck="false" visible="true">
+    	<lido-image  id="img1" disableEdit="true"  visible="true" width="landscape.68%,portrait.134%" margin="landscape.-5px 0px 188px,portrait.-5px 0px 188px -133px" height="landscape.59%,portrait.53%" src="${args.dropimg}" z="0"  onEntry="this.backgroundImage='none';" > 
+			 <!-- drop elements -->
+			  <lido-text id="t1" tab-index="2" type="drop" tabIndex="2" value="i1" border-image="transparent"  bgColor="transparent" z="5" height="132px" width="132px" is-allow-only-one-drop="true" x="landscape.583px,portrait.643px" y="-97px"  onEntry=" this.position='relative';"></lido-text>
+			<lido-text id="t2" tab-index="3" type="drop" bgColor="transparent" value="i2" border-image="none" tabIndex="3" z="10" height="132px" width="132px"  is-allow-only-one-drop="true" x="landscape.449px,portrait.498px" y="119px"   onEntry=" this.border='none';this.position='relative';"></lido-text>
+		</lido-image>  
+		
+		<!-- draggabel images -->
+		 <lido-cell layout="row" width="80%" height="34%" bgColor="transparent" visible="true" margin="-158px 0px -31px 0px" > 
+			<lido-image id="img2" tab-index="4" width="374px" height="279px" disableEdit="true" value="i1"  bgColor="transparent" visible="true"  type="drag"  margin="0px 0px 0px 0px"  src="${args.dragimg1}" z="1"  onEntry="this.boxShadow='unset';" >
+			</lido-image>
+			
+			<lido-image id="img3" tab-index="5" disableEdit="true" value="i2" bgColor="transparent" visible="true" width="landscape.304px,portrait.310px" height="310px" type="drag"  margin="0px 0px 0px 0px"  src="${args.dragimg2}" z="1" onEntry="this.boxShadow='unset';" >
+			</lido-image>
+		</lido-cell>
+	</lido-container>
 </main>`;
 }