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

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

@@ -10,6 +10,7 @@ const meta = {
         choice1ImageUrl: { control: 'file', name: 'Choice 1 Image URL', multiple: true },
         choice2Text: { control: 'text', name: 'Choice 2 Text' },
         choice2ImageUrl: { control: 'file', name: 'Choice 2 Image URL', multiple: true },
+        isAllowOnlyCorrect: { control: 'boolean', name: 'Allow Only Correct' },
     },
     args: {
         objective: 'city',
@@ -20,6 +21,7 @@ const meta = {
         choice1ImageUrl: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/open_window/city.png'],
         choice2Text: 'sun',
         choice2ImageUrl: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/open_window/sun.png'],
+        isAllowOnlyCorrect: true,
     },
 };
 export default meta;
@@ -36,6 +38,7 @@ export const OpenWindow = {
     }
 };
 function getOpenWindowXml(args) {
+    var _a;
     const choices = [
         {
             id: 'choice1',
@@ -48,20 +51,21 @@ function getOpenWindowXml(args) {
             src: args.choice2ImageUrl[0],
         },
     ];
+    const isAllowOnlyCorrect = (_a = args.isAllowOnlyCorrect) !== null && _a !== void 0 ? _a : true;
     const headingLettersXml = args.heading
         .split('')
-        .map((char, i) => `
-        <lido-text id="heading${i + 1}" tab-index="${i + 2}" flexible-width="false" visible="true" border-image="${args.letterBackgroundImage}" bg-color="transparent" width="180px" height="210px" string="${char}" font-color="black" font-family="'Baloo 2', serif" font-size="146px" z="0"
-        onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';"  audio="">
-        </lido-text>
+        .map((char, i) => `
+        <lido-text id="heading${i + 1}" tab-index="${i + 2}" flexible-width="false" visible="true" border-image="${args.letterBackgroundImage}" bg-color="transparent" width="180px" height="210px" string="${char}" font-color="black" font-family="'Baloo 2', serif" font-size="146px" z="0"
+        onEntry="this.borderRadius='unset'; this.boxShadow='unset'; this.fontWeight='800';"  audio="">
+        </lido-text>
       `)
         .join('\n');
     const choicesXml = choices
-        .map(choice => `
-        <lido-cell visible="true" layout="col" width="250px" height="180px" value="${choice.value}" type="click" onEntry="this.background='white'; this.background-color='white !important'; this.box-shadow='white !important'; this.borderRadius='8px';" onInCorrect="this.vibrate='horizontal-shake';" onCorrect="this.cellBorderAnimate='#65BC46';">
-          <lido-image id="${choice.id}" visible="true" src="${choice.src}">
-          </lido-image>
-        </lido-cell>
+        .map(choice => `
+        <lido-cell visible="true" layout="col" width="250px" height="180px" value="${choice.value}" type="click" onEntry="this.background='white'; this.background-color='white !important'; this.box-shadow='white !important'; this.borderRadius='8px';" onInCorrect="this.vibrate='horizontal-shake';" onCorrect="this.cellBorderAnimate='#65BC46';">
+          <lido-image id="${choice.id}" visible="true" src="${choice.src}">
+          </lido-image>
+        </lido-cell>
       `)
         .join('\n');
     const speakLettersSequence = args.heading
@@ -69,45 +73,45 @@ function getOpenWindowXml(args) {
         .map((_, i) => `heading${i + 1}.speak='true'; this.sleep='500';`)
         .join(' ');
     const speakSequence = `heading0.speak='true'; this.sleep='800'; ${speakLettersSequence}`;
-    return `
-  <main>
-    <lido-container id="lido-container" tab-index="1" bg-image="${args.backgroundImage}" height="100%" width="100%" visible="true" is-continue-on-correct="true" onCorrect="${speakSequence} lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="${speakSequence}" objective="${args.objective}" >
-      <lido-cell layout="row" visible="true" width="landscape.auto, portrait.80%" height="landscape.30%, portrait.10%" bg-color="transparent" margin="5%" onEntry="this.gap='45px';">
-        <lido-cell layout="row" visible="false">
-          <lido-text id="heading0" string="${args.objective}">
-          </lido-text>
-        </lido-cell>
-        ${headingLettersXml}
-		  </lido-cell>
-      <lido-cell layout="row" visible="true" width="75%" height="25%" bg-color="transparent" margin="5%">
-        <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="landscape.620px, portrait.270px" y="landscape.440px, portrait.1200px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.padding-right=100px">
-          <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/open_window/door.png" bg-color="transparent" width="195px" height="285px" x="landscape.80px, portrait.80px" y="landscape.90px, portrait.90px" alt-text="{shadowImage}">
-          </lido-image>
-          <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="480px" width="220px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" x="65px" y="-25px">
-          </lido-avatar>
-        </lido-cell>
-        ${choicesXml}
-      </lido-cell>
-    </lido-container>
-
-    <lido-container id="lido-container" tab-index="1" bg-image="${args.backgroundImage}" height="100%" width="100%" visible="true" is-continue-on-correct="true" onCorrect="${speakSequence} lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="${speakSequence}" objective="${args.objective}" >
-      <lido-cell layout="row" visible="true" width="landscape.auto, portrait.80%" height="landscape.30%, portrait.10%" bg-color="transparent" margin="5%" onEntry="this.gap='45px';">
-        <lido-cell layout="row" visible="false">
-          <lido-text id="heading0" string="${args.objective}">
-          </lido-text>
-        </lido-cell>
-        ${headingLettersXml}
-		  </lido-cell>
-      <lido-cell layout="row" visible="true" width="75%" height="25%" bg-color="transparent" margin="5%">
-        <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="landscape.620px, portrait.270px" y="landscape.440px, portrait.1200px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.padding-right=100px">
-          <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/open_window/door.png" bg-color="transparent" width="195px" height="285px" x="landscape.80px, portrait.80px" y="landscape.90px, portrait.90px" alt-text="{shadowImage}">
-          </lido-image>
-          <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="480px" width="220px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" x="65px" y="-25px">
-          </lido-avatar>
-        </lido-cell>
-        ${choicesXml}
-      </lido-cell>
-    </lido-container>
-  </main>
+    return `
+  <main>
+    <lido-container id="lido-container" tab-index="1" bg-image="${args.backgroundImage}" height="100%" width="100%" visible="true" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}" onCorrect="${speakSequence} lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="${speakSequence}" objective="${args.objective}" >
+      <lido-cell layout="row" visible="true" width="landscape.auto, portrait.80%" height="landscape.30%, portrait.10%" bg-color="transparent" margin="5%" onEntry="this.gap='45px';">
+        <lido-cell layout="row" visible="false">
+          <lido-text id="heading0" string="${args.objective}">
+          </lido-text>
+        </lido-cell>
+        ${headingLettersXml}
+		  </lido-cell>
+      <lido-cell layout="row" visible="true" width="75%" height="25%" bg-color="transparent" margin="5%">
+        <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="landscape.620px, portrait.270px" y="landscape.440px, portrait.1200px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.padding-right=100px">
+          <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/open_window/door.png" bg-color="transparent" width="195px" height="285px" x="landscape.80px, portrait.80px" y="landscape.90px, portrait.90px" alt-text="{shadowImage}">
+          </lido-image>
+          <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="480px" width="220px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" x="65px" y="-25px">
+          </lido-avatar>
+        </lido-cell>
+        ${choicesXml}
+      </lido-cell>
+    </lido-container>
+
+    <lido-container id="lido-container" tab-index="1" bg-image="${args.backgroundImage}" height="100%" width="100%" visible="true" is-continue-on-correct="true" onCorrect="${speakSequence} lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="${speakSequence}" objective="${args.objective}" >
+      <lido-cell layout="row" visible="true" width="landscape.auto, portrait.80%" height="landscape.30%, portrait.10%" bg-color="transparent" margin="5%" onEntry="this.gap='45px';">
+        <lido-cell layout="row" visible="false">
+          <lido-text id="heading0" string="${args.objective}">
+          </lido-text>
+        </lido-cell>
+        ${headingLettersXml}
+		  </lido-cell>
+      <lido-cell layout="row" visible="true" width="75%" height="25%" bg-color="transparent" margin="5%">
+        <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="landscape.620px, portrait.270px" y="landscape.440px, portrait.1200px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.padding-right=100px">
+          <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/open_window/door.png" bg-color="transparent" width="195px" height="285px" x="landscape.80px, portrait.80px" y="landscape.90px, portrait.90px" alt-text="{shadowImage}">
+          </lido-image>
+          <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="480px" width="220px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" x="65px" y="-25px">
+          </lido-avatar>
+        </lido-cell>
+        ${choicesXml}
+      </lido-cell>
+    </lido-container>
+  </main>
   `;
 }

package/dist/collection/stories/Templates/openwindow/openwindow2.stories.js

@@ -9,6 +9,7 @@ const meta = {
         choice1ImageUrl: { control: 'file', name: 'Choice 1 Image URL', multiple: true },
         choice2Text: { control: 'text', name: 'Choice 2 Text' },
         choice2ImageUrl: { control: 'file', name: 'Choice 2 Image URL', multiple: true },
+        isAllowOnlyCorrect: { control: 'boolean', name: 'Allow Only Correct' },
     },
     args: {
         objective: 'city',
@@ -18,6 +19,7 @@ const meta = {
         choice1ImageUrl: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/open_window/city.png'],
         choice2Text: 'sun',
         choice2ImageUrl: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/open_window/sun.png'],
+        isAllowOnlyCorrect: true,
     },
 };
 export default meta;
@@ -34,6 +36,7 @@ export const OpenWindow = {
     }
 };
 function getOpenWindowXml(args) {
+    var _a;
     const choices = [
         {
             id: 'choice1',
@@ -46,49 +49,50 @@ function getOpenWindowXml(args) {
             src: args.choice2ImageUrl[0],
         },
     ];
+    const isAllowOnlyCorrect = (_a = args.isAllowOnlyCorrect) !== null && _a !== void 0 ? _a : true;
     const choicesXml = choices
-        .map(choice => `
-        <lido-cell visible="true" layout="col" width="250px" height="180px" value="${choice.value}" type="click" onEntry="this.background='white'; this.background-color='white !important'; this.box-shadow='white !important'; this.borderRadius='8px';" onInCorrect="this.vibrate='horizontal-shake';" onCorrect="this.cellBorderAnimate='#65BC46';">
-          <lido-image id="${choice.id}" visible="true" src="${choice.src}">
-          </lido-image>
-        </lido-cell>
+        .map(choice => `
+        <lido-cell visible="true" layout="col" width="250px" height="180px" value="${choice.value}" type="click" onEntry="this.background='white'; this.background-color='white !important'; this.box-shadow='white !important'; this.borderRadius='8px';" onInCorrect="this.vibrate='horizontal-shake';" onCorrect="this.cellBorderAnimate='#65BC46';">
+          <lido-image id="${choice.id}" visible="true" src="${choice.src}">
+          </lido-image>
+        </lido-cell>
       `)
         .join('\n');
     const speakSequence = `heading.speak='true'; this.sleep='800';`;
-    return `
-  <main>
-    <lido-container id="lido-container" tab-index="1" bg-image="${args.backgroundImage}" height="100%" width="100%" visible="true" is-continue-on-correct="true" onCorrect="${speakSequence} lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="${speakSequence}" objective="${args.objective}" >
-      <lido-cell layout="row" visible="true" width="landscape.auto, portrait.80%" height="landscape.30%, portrait.10%" bg-color="transparent" margin="5%" onEntry="">
-        <lido-text id="heading" tab-index="2" visible="true" border-image="" bg-color="transparent" width="350px" height="210px" string="${args.heading}" font-color="black" font-family="'Baloo 2', serif" font-size="146px" z="0"
-        onEntry="this.borderRadius='6px'; this.boxShadow='unset'; this.fontWeight='800';"  audio="">
-        </lido-text>
-		  </lido-cell>
-      <lido-cell layout="row" visible="true" width="75%" height="25%" bg-color="transparent" margin="5%">
-        <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="landscape.620px, portrait.270px" y="landscape.440px, portrait.1200px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.padding-right=100px">
-          <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/open_window/door.png" bg-color="transparent" width="195px" height="285px" x="landscape.80px, portrait.80px" y="landscape.90px, portrait.90px" alt-text="{shadowImage}">
-          </lido-image>
-          <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="480px" width="220px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" x="65px" y="-25px">
-          </lido-avatar>
-        </lido-cell>
-        ${choicesXml}
-      	</lido-cell>
-    </lido-container>
-
-    <lido-container id="lido-container" tab-index="1" bg-image="${args.backgroundImage}" height="100%" width="100%" visible="true" is-continue-on-correct="true" onCorrect="${speakSequence} lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="${speakSequence}" objective="${args.objective}" >
-      <lido-cell layout="row" visible="true" width="landscape.auto, portrait.80%" height="landscape.30%, portrait.10%" bg-color="transparent" margin="5%" onEntry="">
-        <lido-text id="heading" tab-index="2" visible="true" border-image="" bg-color="transparent" width="350px" height="210px" string="${args.heading}" font-color="black" font-family="'Baloo 2', serif" font-size="146px" z="0"
-        onEntry="this.borderRadius='6px'; this.boxShadow='unset'; this.fontWeight='800';"  audio="">
-        </lido-text>
-		  </lido-cell>
-      <lido-cell layout="row" visible="true" width="75%" height="25%" bg-color="transparent" margin="5%">
-        <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="landscape.620px, portrait.270px" y="landscape.440px, portrait.1200px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.padding-right=100px">
-          <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/open_window/door.png" bg-color="transparent" width="195px" height="285px" x="landscape.80px, portrait.80px" y="landscape.90px, portrait.90px" alt-text="{shadowImage}">
-          </lido-image>
-          <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="480px" width="220px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" x="65px" y="-25px">
-          </lido-avatar>
-        </lido-cell>
-        ${choicesXml}
-      	</lido-cell>
-    </lido-container>
+    return `
+  <main>
+    <lido-container id="lido-container" tab-index="1" bg-image="${args.backgroundImage}" height="100%" width="100%" visible="true" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}" onCorrect="${speakSequence} lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="${speakSequence}" objective="${args.objective}" >
+      <lido-cell layout="row" visible="true" width="landscape.auto, portrait.80%" height="landscape.30%, portrait.10%" bg-color="transparent" margin="5%" onEntry="">
+        <lido-text id="heading" tab-index="2" visible="true" border-image="" bg-color="transparent" width="350px" height="210px" string="${args.heading}" font-color="black" font-family="'Baloo 2', serif" font-size="146px" z="0"
+        onEntry="this.borderRadius='6px'; this.boxShadow='unset'; this.fontWeight='800';"  audio="">
+        </lido-text>
+		  </lido-cell>
+      <lido-cell layout="row" visible="true" width="75%" height="25%" bg-color="transparent" margin="5%">
+        <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="landscape.620px, portrait.270px" y="landscape.440px, portrait.1200px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.padding-right=100px">
+          <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/open_window/door.png" bg-color="transparent" width="195px" height="285px" x="landscape.80px, portrait.80px" y="landscape.90px, portrait.90px" alt-text="{shadowImage}">
+          </lido-image>
+          <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="480px" width="220px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" x="65px" y="-25px">
+          </lido-avatar>
+        </lido-cell>
+        ${choicesXml}
+      	</lido-cell>
+    </lido-container>
+
+    <lido-container id="lido-container" tab-index="1" bg-image="${args.backgroundImage}" height="100%" width="100%" visible="true" is-continue-on-correct="true" onCorrect="${speakSequence} lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="${speakSequence}" objective="${args.objective}" >
+      <lido-cell layout="row" visible="true" width="landscape.auto, portrait.80%" height="landscape.30%, portrait.10%" bg-color="transparent" margin="5%" onEntry="">
+        <lido-text id="heading" tab-index="2" visible="true" border-image="" bg-color="transparent" width="350px" height="210px" string="${args.heading}" font-color="black" font-family="'Baloo 2', serif" font-size="146px" z="0"
+        onEntry="this.borderRadius='6px'; this.boxShadow='unset'; this.fontWeight='800';"  audio="">
+        </lido-text>
+		  </lido-cell>
+      <lido-cell layout="row" visible="true" width="75%" height="25%" bg-color="transparent" margin="5%">
+        <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="landscape.620px, portrait.270px" y="landscape.440px, portrait.1200px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.padding-right=100px">
+          <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/open_window/door.png" bg-color="transparent" width="195px" height="285px" x="landscape.80px, portrait.80px" y="landscape.90px, portrait.90px" alt-text="{shadowImage}">
+          </lido-image>
+          <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="480px" width="220px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" x="65px" y="-25px">
+          </lido-avatar>
+        </lido-cell>
+        ${choicesXml}
+      	</lido-cell>
+    </lido-container>
   </main>`;
 }

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

@@ -26,101 +26,101 @@ export const OrderTractorAscending = {
     },
 };
 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';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="">
-
-				<!-- 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.178px -44px -11px -87px"></lido-image>
-			<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>
-
-			<!-- 1  -->
-			<lido-cell visible="true" layout="col" bg-color="transparent" padding="0" margin="landscape.90px -121px 0px -189px,portrait.80px 0px 0px 42px" >
-
-				<lido-image visible="true" id="drop5" onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'" tab-index="1" type="drop" 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 -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>
-
-			<!-- 2  -->
-			<lido-cell visible="true" layout="col" bg-color="transparent" margin="landscape.70px -110px 0px -174px,portrait.60px 0px 0px -25px" >
-
-				<lido-image visible="true" id="drop4" onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'" tab-index="2" type="drop" 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 -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>
-
-				<!-- 3  -->
-			<lido-cell visible="true" layout="col" bg-color="transparent" margin=" landscape.50px -101px 0px -201px,portrait.40px 0px 0px -40px" >
-
-				<lido-image visible="true" id="drop3" onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'" tab-index="3" type="drop" 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>
-
-			<!-- 4  -->
-			<lido-cell visible="true" layout="col" bg-color="transparent" margin="landscape.30px -165px 0px -199px ,portrait.20px -55px 0px -25px" padding="0px" >
-
-				<lido-image visible="true" id="drop2" onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'" tab-index="4" type="drop" 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 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>
-
-			<!-- 5  -->
-			<lido-cell visible="true" layout="col" bg-color="transparent" margin="landscape.0px -56px 0px -132px,portrait.0px 10px 0px 30px"  >
-
-				<lido-image visible="true" id="drop1" onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'" tab-index="5" type="drop" 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 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>
-		
-
-		<!-- 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="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';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="">
+
+				<!-- 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.178px -44px -11px -87px"></lido-image>
+			<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>
+
+			<!-- 1  -->
+			<lido-cell visible="true" layout="col" bg-color="transparent" padding="0" margin="landscape.90px -121px 0px -189px,portrait.80px 0px 0px 42px" >
+
+				<lido-image visible="true" id="drop5" onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'" tab-index="1" type="drop" 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 -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>
+
+			<!-- 2  -->
+			<lido-cell visible="true" layout="col" bg-color="transparent" margin="landscape.70px -110px 0px -174px,portrait.60px 0px 0px -25px" >
+
+				<lido-image visible="true" id="drop4" onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'" tab-index="2" type="drop" 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 -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>
+
+				<!-- 3  -->
+			<lido-cell visible="true" layout="col" bg-color="transparent" margin=" landscape.50px -101px 0px -201px,portrait.40px 0px 0px -40px" >
+
+				<lido-image visible="true" id="drop3" onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'" tab-index="3" type="drop" 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>
+
+			<!-- 4  -->
+			<lido-cell visible="true" layout="col" bg-color="transparent" margin="landscape.30px -165px 0px -199px ,portrait.20px -55px 0px -25px" padding="0px" >
+
+				<lido-image visible="true" id="drop2" onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'" tab-index="4" type="drop" 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 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>
+
+			<!-- 5  -->
+			<lido-cell visible="true" layout="col" bg-color="transparent" margin="landscape.0px -56px 0px -132px,portrait.0px 10px 0px 30px"  >
+
+				<lido-image visible="true" id="drop1" onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'" tab-index="5" type="drop" 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 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>
+		
+
+		<!-- 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>
   `;
 }