lido-player 0.0.2-alpha-49 → 0.0.2-alpha-43-dev

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

@@ -0,0 +1,59 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/multiplyBeeds',
+    argTypes: {
+        number: { control: 'text', name: 'number1', description: 'number. (E.g. 9)' },
+        multiplicationFactor: { control: 'text', name: 'multiplication factor', description: '(E.g. 9)' },
+        answer: { control: 'text', name: 'answer', description: 'answer. (E.g. 81)' }
+    },
+    args: {
+        number: '9',
+        multiplicationFactor: '9',
+        answer: '81',
+    }
+};
+export default meta;
+export const MultiplyBeeds = {
+    render: (args) => {
+        const xml = getContainerXml(args);
+        return html `<lido-home xml-data="${xml}" xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    const number = args.number;
+    const multiplicationFactor = args.multiplicationFactor;
+    const answer = args.answer;
+    let str_val = "";
+    for (let i = 0; i < Number(multiplicationFactor); i++) {
+        str_val += number + '+';
+    }
+    str_val = str_val.slice(0, -1) + '=';
+    return `
+        <main>
+            <lido-container id="multiply-beads" disableSpeak="true" show-drop-border="false" equationCheck="$#mat1,==,$#answer-multiply-beeds" objective="" tab-index="1"  value="multiply-beads" bgImage="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.png"  height="100%" width="100%" bgColor="transparent"  visible="true" onCorrect="answer-multiply-beeds.addText='${answer}'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" showCheck="false" isContinueOnCorrect="true">
+
+                <!-- Chimple Avatar -->
+                <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.570px, portrait.700px" width="landscape.380px, portrait.485px" x="landscape.1045px, portrait.220px" y="landscape.525px, portrait.1075px" ariaHidden="true" bgColor="transparent" visible="true"  onEntry="this.flex-shrink='0'; this.z-index='0';">
+                    <lido-avatar id="lido-avatar" disable-edit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}" onEntry="">
+                    </lido-avatar>
+                </lido-cell>
+                
+                <!-- Question Start Section -->
+                <lido-text visible="false" id="txt1" font-family="'Baloo 2', serif" font-size="52px" font-color="black" string="click the right slot of the beeds column and count the sum of all the beeds" onEntry="this.speak='true';" >
+                </lido-text>
+
+                <!-- Bottom display Section -->
+                <lido-cell layout="pos" id="pos2"  value="pos2" height="auto" width="landscape.815px, portrait.815px" x="landscape.775px, portrait.48px" y="landscape.300px, portrait.945px" ariaHidden="true" bgColor="transparent" visible="true" onEntry="this.flex-shrink='0'; this.animation='bottomToPlace 2s linear';">
+                    <lido-text id="answer-multiply-beeds"  value="${answer}" height="inherit" width="inherit" string="${str_val}" font-size="84px" font-weight="600" bgColor="#FFF4CD" visible="true" onEntry="this.word-wrap='break-word'; this.fontWeight='600'; this.textAlign='center';">
+                    </lido-text>
+                </lido-cell>
+
+                <!-- Beeds Section -->
+                <lido-cell layout="pos" id="pos3"  height="landscape.1100px, portrait.900px" width="landscape.700px,portrait.825px" x="landscape.40px, portrait.15px" y="landscape.-80px,portrait.45px" ariaHidden="true" z="0" bgColor="transparent" visible="true" onEntry="this.opacity='1';">
+                    <lido-math-matrix id="mat1" visible="true" rows="9" cols="9" top-index="true" left-index="true" bottom-index="false" clickable="true" active-only-visible="false" active-bg-color="#C23E06" deactive-bg-color="#F57139" border="2px solid #F34D08" defualt-fill="0" matrix-image="">
+                    </lido-math-matrix>
+                </lido-cell>
+            </lido-container>
+        </main>
+    `;
+}

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

@@ -0,0 +1,93 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/nimbleTable',
+    argTypes: {
+        equations: { control: 'object' },
+        values: { control: 'object' },
+        isContinueOnCorrect: { control: 'boolean' },
+    },
+};
+export default meta;
+export const nimbletable = {
+    args: {
+        equations: [
+            "1 + 1 = ?",
+            "2 + 2 = ?",
+            "3 + 3 = ?",
+            "4 + 4 = ?",
+            "5 + 5 = ?",
+            "6 + 6 = ?",
+            "3 + 2 = ?"
+        ],
+        answers: ["2", "4", "6", "8", "10", "12", "5"],
+        isContinueOnCorrect: true,
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    let tabCounter = 1;
+    const { equations = [], answers = [], isContinueOnCorrect = true } = args;
+    const SlidingEquationCells = equations
+        .map((equation, index) => {
+        const answer = answers[index]; // one-to-one mapping
+        return `
+      <lido-text visible="true" audio="" onTouch="" type="calculate"
+        id="equation${index + 1}" tab-index="${tabCounter++}"
+        height="landscape.140px, portrait.126px" width="landscape.100%, portrait.96%"
+        bg-Color="transparent" font-family="'Baloo Bhai 2'" font-size="84px"
+        value="${answer}" string="${equation}"
+        margin="landscape.-4px 10px 22px -116px,portrait.6px 0 20px 0 "
+        onEntry="this.color='white';this.fontWeight='500';this.borderRadius='10px';
+                 this.flex-shrink='0';this.textShadow='3px 0 white, -3px 0 white, 0 3px white, 0 -3px white';
+                 this.justifyContent='center'; this.alignItems='center'"
+        onCorrect="">
+      </lido-text>
+    `;
+    })
+        .join('');
+    return `<main>
+ <lido-container id="lido-container" is-allow-only-correct="true" tab-index="1" value="mainContainer1"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/letterboard/bg.png" objective="${answers.join(',')}" height="100%" width="100%" bg-color="transparent" visible="true" onCorrect="this.scrollCellAfterEquationSolved='true'; this.sleep='1000';lido-avatar.avatarAnimate='Success';this.sleep='2000'; " onEntry="this.justifyContent='space-around'; audio.speak='true';" onInCorrect="this.scrollCellAfterEquationSolved='true'; lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" 
+ is-continue-on-correct="${isContinueOnCorrect}">
+
+   <!-- Audio -->
+  <lido-text visible="false" id="audio" onEntry="this.display='none';" string="Solve the question at the third board and select the correct answer from the calculator."></lido-text>
+
+<!-- Chimple Avatar -->
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.448px,portrait.402px" width="landscape.350px,portrait.398px" x="landscape.718px, portrait.-8%" y="landscape.502px, portrait.73%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
+			<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{{chimpleCharacterRive}}">
+			</lido-avatar>
+	</lido-cell>
+
+
+		<lido-cell visible="true" id="xx"  layout="landscape.row,portrait.col" height="90%" width="102%" bg-Color="transparent" margin="landscape.56px -56px 0px 110px,portrait.0px" onEntry="" justify-content="space-evenly">
+			  <lido-cell layout="landscape.col,portrait.col" visible="true" height="landscape.96%,portrait.51%" width="landscape.614px,portrait.68%" bg-color="rgb(158 82 15 / 97%)" onEntry="" margin="landscape.27px 0px 0px -906px,portrait.-660px 0px 18px 0px" border-radius="10px">
+            <lido-text visible="true" id="" audio="" onTouch="" tab-index="${tabCounter++}" height="landscape.140px, portrait.126px" width="landscape.100%, portrait.96%" bg-Color="#b27641" margin="landscape.0px 0px 10px 0px,portrait.0 " onEntry="this.borderRadius='18px 18px 0px 0px'; this.flex-shrink='0';">
+            </lido-text>	
+            <lido-text visible="true" audio="" onTouch="" tab-index="${tabCounter++}" height="landscape.140px, portrait.126px" width="landscape.100%, portrait.96%" bg-Color="#b27641" margin="landscape.0px 0px 10px 0px,portrait.0 " onEntry="this.flex-shrink='0';">
+            </lido-text>
+            <lido-text visible="true" audio="" onTouch="" tab-index="${tabCounter++}" height="landscape.140px,portrait.124px" width="landscape.90%, portrait.86%" bg-Color="#9e5310" margin="landscape.0px 0px 10px 0px,portrait.0 " onEntry="this.flex-shrink='0'; this.border = 16px solid #82420a">
+            </lido-text>
+            <lido-text visible="true" audio="" onTouch="" tab-index="${tabCounter++}" height="landscape.140px, portrait.126px" width="landscape.100%, portrait.96%" bg-Color="#b27641" margin="landscape.0px 0px 10px 0px,portrait.0 " onEntry="this.flex-shrink='0';">
+            </lido-text>
+            <lido-text visible="true" audio="" onTouch="" tab-index="${tabCounter++}" height="landscape.140px, portrait.126px" width="landscape.100%, portrait.96%" bg-Color="#b27641" margin="landscape.0px 0px 10px 0px,portrait.0 " onEntry="this.borderRadius='0px 0px 18px 18px'; this.flex-shrink='0';">
+            </lido-text>				
+			   </lido-cell>
+
+			<lido-cell id="cellParent" layout="landscape.col,portrait.col" visible="true" height="landscape.94%,portrait.92%" width="landscape.40%,portrait.71%" bg-color="transparent" onEntry="this.position= 'fixed'; this.justifyContent='flex-start'" margin="landscape.101px 0px 0px 166px,portrait.80px 0px 0px 124px" border-radius="10px" display="flex">
+        <lido-text visible="true" audio="" onTouch="" id="dummy111" class="dummy-1" tab-index="" height="landscape.140px, portrait.126px" width="landscape.100%, portrait.96%" bg-Color="transparent" font-family="'Baloo Bhai 2'" font-size="88px" string="" margin="landscape.-4px 10px 22px -116px,portrait.6px 0 20px 0 " onEntry="this.color='white';this.fontWeight='500';this.borderRadius='10px'; this.flex-shrink='0';this.textShadow = '3px 0 white, -3px 0 white, 0 3px white, 0 -3px white'; this.justifyContent='center'" onCorrect="">
+				</lido-text>
+				<lido-text visible="true" audio="" onTouch="" id="dummy112" class="dummy-2" tab-index="" height="landscape.140px, portrait.126px" width="landscape.100%, portrait.96%" bg-Color="transparent" font-family="'Baloo Bhai 2'" font-size="88px" string="" margin="landscape.-4px 10px 22px -116px,portrait.6px 0 20px 0 " onEntry="this.color='white';this.fontWeight='500';this.borderRadius='10px'; this.flex-shrink='0';this.textShadow = '3px 0 white, -3px 0 white, 0 3px white, 0 -3px white'; this.justifyContent='center'" onCorrect="">
+				</lido-text>
+        ${SlidingEquationCells}
+
+       <lido-cell visible="true" height="landscape.84%,portrait.732px" width="landscape.530px,portrait.62%" bg-color="transparent"  onEntry="this.display='flex'; this.position='fixed'" margin="landscape.98px 0px 106px 1027px, portrait.860px 0px 0px 280px">
+				<lido-calculator visible="true" height="100%"></lido-calculator>
+			</lido-cell>				
+			</lido-cell>
+    </lido-cell>
+</lido-container>
+</main>`;
+}

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

@@ -0,0 +1,100 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/numberBoardTwo',
+    argTypes: {
+        options: { control: 'object' },
+        answers: { control: 'object' },
+        colors: {
+            control: 'object',
+            description: 'Array of colors for the letters',
+            defaultValue: ['#F34D08', '#81C127', '#FFC805', '#F55376', '#5D44BD'],
+        },
+    },
+};
+export default meta;
+export const numberBoard = {
+    args: {
+        options: [
+            "1",
+            "2",
+            "3",
+            "4",
+            "5",
+            "6",
+            "7",
+            "8",
+            "9",
+            "10"
+        ],
+        answers: [
+            "1",
+            "2",
+            "3",
+            "4",
+            "5",
+            "6",
+            "7",
+            "8",
+            "9",
+            "10"
+        ],
+        colors: ['#CF1565', '#409F5C', '#02C1C1', '#AD3184', '#F55376', '#81C127', '#5D44BD'],
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    let tabCounter = 1;
+    const { options = [], answers = [] } = args;
+    const pickedColors = args.colors;
+    const DropCells = answers.map(answer => {
+        return `
+		<!-- drop --> 	
+        <lido-cell id="drop${tabCounter}" layout="col" visible="true" margin="landscape.0,portrait.72px 0px -95px 0px" height="landscape.345px,portrait.350px" width="121px" bg-Color="#DFF2F2" onEntry="this.position='relative';this.align-items='center';this.justify-content='center';this.borderRadius='10px';">
+					<lido-math-matrix id="mat1" rows="2" cols="5"  defualtFill="${answer}" leftIndex="false" topIndex="false" clickable="true" matrixImage="" activeBgColor="#922E05" inactiveBgColor="transparent" border="5px soild transparent" height="70%" width="100%" visible="true" margin="landscape.0,portrait.-26px 0px 0px 0px"></lido-math-matrix>
+					<lido-cell visible="true" height="landscape.110px,portrait.110px" width="landscape.110px,portrait.110px" bg-color="white" tab-index="${tabCounter++}" value="${answer}" string="${answer}" type="drop" onCorrect="lido-avatar.avatarAnimate='Success';" ></lido-cell>
+		</lido-cell>
+      `;
+    }).join('');
+    const DragCells = options
+        .map((option) => {
+        const color = pickedColors[Math.floor(Math.random() * pickedColors.length)];
+        return `
+		<lido-text visible="true"  onTouch="this.speak='true';" type="drag" id="drag${tabCounter}" tab-index="${tabCounter++}" height="landscape.110px,portrait.110px" width="landscape.110px,portrait.110px" bg-Color="white" font-family="'Baloo Bhai 2'" font-size="100px" font-weigth="500" value="${option}" string="${option}" margin="landscape.0 0 127px 0,portrait.0 135px 0 0 " onEntry="this.color='${color}';this.fontWeight='800';this.borderRadius='10px'; this.flex-shrink='0';this.textShadow = '3px 0 white, -3px 0 white, 0 3px white, 0 -3px white ">
+		</lido-text>
+      `;
+    })
+        .join('');
+    return `<main>
+<lido-container id="lido-container" show-drop-border="false" appendToDropOnCompletion="false" is-allow-only-correct="true" drop-action="move" tab-index="1" value="mainContainer1"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/letterboard/bg.png" objective="${answers.join(',')}" height="100%" width="100%" bg-color="transparent" visible="true" onCorrect="this.sleep='1000';lido-avatar.avatarAnimate='Success';xx.animation='placeToLeft 2s linear';tyre.animation='placeToLeft 2s linear';trainAudio.speak='true';" onEntry="this.justifyContent='space-around'; this.animation='rightToPlace 2.5 linear';this.overflow='hidden';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false">
+		<!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.417px,portrait.363px" width="landscape.280px,portrait.340px" x="landscape.1360px, portrait.597px" y="landscape.637px, portrait.1370px" 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="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+			</lido-avatar>
+			
+		</lido-cell>
+		<lido-image visible="true" id="tyre" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/letterboard/wheel.png" height="119px" width="131px" onEntry=" this.position='relative'; this.animation='rightToPlace 2.5s linear';" x="landscape.299px, portrait.293px" y="landscape.768px, portrait.1092px" margin="">
+			</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>
+			
+		<lido-cell visible="true" id="xx"  layout="landscape.row,portrait.col" height="90%" width="90%" bg-Color="transparent" margin="landscape.56px 0px 0px 0px,portrait.0px" onEntry="">
+			<lido-cell visible="true" id="truck" layout="row" height="90%" width="1377px" bg-Color="transparent" margin="landscape.-169px 114px 39px -195px,portrait.-115px 0px 0px 0px" onEntry="this.animation='rightToPlace 2.5s linear';">
+			<lido-image visible="true"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/letterboard/truck.png" height="583px" width="502px" onEntry=" " margin="landscape.345px -40px 0px 55px,portrait.408px 67px -179px -107px">
+			</lido-image>
+			<lido-cell visible="true" height="landscape.100%,portrait.858px" width="landscape.858px,portrait.62%" bg-color="#F78315" margin="landscape.0px 0px 0px -18px,portrait.-124px 252px -238px -114px" onEntry=" this.place-items='center';this.gap='1px'; this.padding='0px'; this.gridTemplateColumns='repeat(auto-fill, minmax(143px, auto))';   this.gridTemplateRows='repeat(auto-fit, 362px)';  this.flexWrap='wrap';">
+				${DropCells}
+			</lido-cell>
+			</lido-cell>
+			
+			<lido-cell layout="landscape.col,portrait.row" visible="true" height="landscape.71%,portrait.185px" width="landscape.12%,portrait.71%" bg-color="transparent" onEntry="  this.animation='rightToPlace 2.7s linear';" margin="landscape.-280px 102px 0px -73px,portrait.-108px 0px 151px -50px">
+				${DragCells}
+			</lido-cell>
+			</lido-cell>
+			
+		
+</lido-container>
+</main>`;
+}

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

@@ -0,0 +1,212 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/numberPair',
+    argTypes: {
+        question: { control: 'text' },
+        questionAudio: { control: {
+                type: 'file',
+                accept: '.mp3, .wav, .ogg, audio/*'
+            } },
+        dropimg1: { control: 'file' },
+        droptext1: { control: 'text' },
+        dropimg2: { control: 'file' },
+        droptext2: { control: 'text' },
+        dropimg3: { control: 'file' },
+        droptext3: { control: 'text' },
+        dropimg4: { control: 'file' },
+        droptext4: { control: 'text' },
+        dropimg5: { control: 'file' },
+        droptext5: { control: 'text' },
+        dragimg1: { control: 'file' },
+        dragtext1: { control: 'text' },
+        dragimg2: { control: 'file' },
+        dragtext2: { control: 'text' },
+        dragimg3: { control: 'file' },
+        dragtext3: { control: 'text' },
+        dragimg4: { control: 'file' },
+        dragtext4: { control: 'text' },
+        dragimg5: { control: 'file' },
+        dragtext5: { control: 'text' },
+        option1: { control: 'text' },
+        option2: { control: 'text' },
+        option3: { control: 'text' },
+        option4: { control: 'text' },
+        option5: { control: 'text' },
+        correct1: { control: 'text' },
+        correct2: { control: 'text' },
+        correct3: { control: 'text' },
+        correct4: { control: 'text' },
+        correct5: { control: 'text' },
+    },
+};
+export default meta;
+export const NumberPair = {
+    args: {
+        question: 'Match the number cards with the same number together.',
+        dropimg1: '',
+        droptext1: '1',
+        dropimg2: '',
+        droptext2: '2',
+        dropimg3: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/NumberPair/dice3.png',
+        droptext3: '',
+        dropimg4: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/NumberPair/dice4.png',
+        droptext4: '',
+        dropimg5: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/NumberPair/dice5.png',
+        droptext5: '',
+        dragimg1: '',
+        dragtext1: '1',
+        dragimg2: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/NumberPair/2sticks.png',
+        dragtext2: '',
+        dragimg3: '',
+        dragtext3: '3',
+        dragimg4: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/NumberPair/4sticks.png',
+        dragtext4: "",
+        dragimg5: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/NumberPair/dice5.png',
+        dragtext5: '',
+        correct1: '1',
+        correct2: '2',
+        correct3: '3',
+        correct4: '4',
+        correct5: '5',
+        option1: '1',
+        option2: '2',
+        option3: '3',
+        option4: '4',
+        option5: '5',
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    return `<main>
+    <lido-container id="lido-container" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" is-allow-only-correct="true" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4},${args.correct5}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/bg-image.png" dropAttr="EnableAnimation" custom-style="#heading,#drag1,#drag2,#drag3,#drag4,#drag5,#drag6,#drag7,#drop1,#drop2,#drop3,#drop4,#drop5,#drop6,#drop7{box-shadow: none !important;}">
+				<!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="landscape.205px,portrait.195px" width="landscape.209px,portrait.209px" x="landscape.2%,portrait.80%" y="landscape.85px,portrait.146px" 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>
+			<!-- heading -->
+			<lido-text id="heading" audio="" width="landscape.auto,portrait.70%" tabIndex="20" visible="true" string="${args.question}" font-family="'Baloo Bhai 2'" fontColor="#323232" font-size="landscape.36px,portrait.36px" bg-Color="transparent" onEntry="this.padding='0px 45px';this.fontWeight='600';this.speak='true'"  margin="landscape.120px 0px -25px 0px, portrait.160px 0px -39px 0px">
+			</lido-text>
+		<lido-cell visible="true" flex-direction="landscape., portrait.row-reverse" bg-color="transparent" layout="portrait.row,landscape.col" width="100%" height="100%" onEntry="">
+			
+			<lido-cell visible="true" margin="20px 0px 0px 0px" bg-color="transparent" layout="landscape.row,portrait.col" height="landscape.50%,portrait.96%" width="landscape.100%,portrait.100%" onEntry="this.gap='10px';">
+				
+				${(args.dropimg1.length === 0 && args.droptext1.length === 0) ? '' : `<lido-cell layout="row" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="">
+						<lido-cell id="image1" audio="" value="${args.correct1}" tab-index="1" height="landscape.270px,portrait.240px" width="landscape.200px,portrait.180px" type="drop" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px'; this.borderRadius='8px';" 
+						onCorrect="${args.dragtext1.length === 0 ? "drop1.speak='true'" : "drag1.speak='true'"};">
+							${!args.dropimg1 || args.dropimg1.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.202px,portrait.180px" height="landscape.200px,portrait.180px" bg-color="transparent" src="${args.dropimg1}"></lido-image>`}
+
+							${!args.droptext1 || args.droptext1 === "" ? '' : `<lido-text id="drop1" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.160px,portrait.160px" string="${args.droptext1}" bg-Color="transparent" onEntry="this.fontWeight='600';"></lido-text>`}
+							
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+
+				${(args.dropimg2.length === 0 && args.droptext2.length === 0) ? '' : `<lido-cell layout="row" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='6px';">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="">
+						<lido-cell id="image2" class="boxShadow" audio="" value="${args.correct2}" tab-index="2" isAllowOnlyOneDrop="true" disable-edit="true" height="landscape.268px,portrait.240px" width="landscape.200px,portrait.178px" type="drop" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';this.borderRadius='8px';" 
+						onCorrect="${args.dragtext2.length === 0 ? "drop2.speak='true';" : "drag2.speak='true'"};">
+							${!args.dropimg2 || args.dropimg2.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.202px,portrait.180px" height="landscape.200px,portrait.180px" bg-color="transparent" src="${args.dropimg2}"></lido-image>`}
+
+							${!args.droptext2 || args.droptext2 === "" ? '' : `<lido-text id="drop2" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.160px,portrait.160px" string="${args.droptext2}" bg-Color="transparent" onEntry="this.fontWeight='600';"></lido-text>`}
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+
+				${(args.dropimg3.length === 0 && args.droptext3.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.50px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='5px';">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="">
+						<lido-cell type="drop" audio="" id="image3" tab-index="3" isAllowOnlyOneDrop="true" disable-edit="true" value="${args.correct3}" height="landscape.268px,portrait.240px" width="landscape.200px,portrait.178px" layout="col" visible="true" bg-Color="white" 
+						onEntry="this.padding='0px';this.borderRadius='8px';" onCorrect="${args.dragtext3.length === 0 ?
+        "drop3.speak='true'" : "drag3.speak='true'"}">
+							${!args.dropimg3 || args.dropimg3.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.202px,portrait.180px" height="landscape.200px,portrait.180px" bg-color="transparent" src="${args.dropimg3}"></lido-image>`}
+
+							${!args.droptext3 || args.droptext3 === "" ? '' : `<lido-text id="drop3" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.160px,portrait.160px" string="${args.droptext3}" bg-Color="transparent" onEntry="this.fontWeight='600';" ></lido-text>`}
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+
+
+				${(args.dropimg4.length === 0 && args.droptext4.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='6px';">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="this.display='flex';">
+						<lido-cell id="image4" audio="" value="${args.correct4}" isAllowOnlyOneDrop="true" disable-edit="true" tab-index="4" height="landscape.270px,portrait.240px" width="landscape.200px,portrait.178px" type="drop" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';this.borderRadius='8px';"
+						onCorrect="${args.dragtext4.length === 0 ? "drop4.speak='true'" : "drag4.speak='true'"}">
+							${!args.dropimg4 || args.dropimg4.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.202px,portrait.180px" height="landscape.200px,portrait.180px" bg-color="transparent" src="${args.dropimg4}"></lido-image>`}
+
+							${!args.droptext4 || args.droptext4 === "" ? '' : `<lido-text id="drop4" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.160px,portrait.160px" string="${args.droptext4}" bg-Color="transparent" onEntry="this.fontWeight='600';" ></lido-text>`}
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+
+				${(args.dropimg5.length === 0 && args.droptext5.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='6px';">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="this.display='flex';">
+						<lido-cell type="drop" audio="" id="image5" value="${args.correct5}" tab-index="5" isAllowOnlyOneDrop="true" disable-edit="true" width="landscape.200px,portrait.178px" height="landscape.268px,portrait.240px" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';this.borderRadius='8px';" onCorrect="${args.dragtext5.length === 0 ? "drop5.speak='true'" : "drag5.speak='true'"}">
+							${!args.dropimg5 || args.dropimg5.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.202px,portrait.180px" height="landscape.200px,portrait.180px" bg-color="transparent" src="${args.dropimg5}"></lido-image>`}
+
+							${!args.droptext5 || args.droptext5 === "" ? '' : `<lido-text id="drop5" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.160px,portrait.160px" string="${args.droptext5}" bg-Color="transparent" onEntry="this.fontWeight='600';" ></lido-text>`}
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+			</lido-cell>
+
+
+
+
+			<lido-cell visible="true" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" bg-color="transparent" layout="landscape.row,portrait.col" height="landscape.40%,portrait.96%" width="100%" onEntry="">
+				${(args.dragimg1.length === 0 && args.dragtext1.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent">
+						<lido-cell border-radius="8px" class="boxShadow" audio="" id="option1" value="${args.option1}" tab-index="6" height="landscape.268px,portrait.240px" width="landscape.200px,portrait.178px" type="drag" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';">
+							${!args.dragimg1 || args.dragimg1.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.202px,portrait.180px" height="landscape.200px,portrait.180px" bg-color="transparent" src="${args.dragimg1}"></lido-image>`}
+
+							${!args.dragtext1 || args.dragtext1 === "" ? '' : `<lido-text id="drag1" class="boxShadow" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.160px,portrait.160px" string="${args.dragtext1}" bg-Color="transparent" onEntry="this.fontWeight='600';"></lido-text>`}
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+
+				${(args.dragimg2.length === 0 && args.dragtext2.length === 0) ? '' : `<lido-cell layout="row" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='2px';">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="">
+						<lido-cell border-radius="8px" audio="" id="option2" value="${args.option2}" tab-index="7" height="landscape.268px,portrait.240px" width="landscape.200px,portrait.178px" type="drag" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';this.justifyContent='center'; ">
+							${!args.dragimg2 || args.dragimg2.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.202px,portrait.180px" height="landscape.200px,portrait.180px" bg-color="transparent" src="${args.dragimg2}"></lido-image>`}
+
+							${!args.dragtext2 || args.dragtext2 === "" ? '' : `<lido-text id="drag2" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.160px,portrait.160px" string="${args.dragtext2}" bg-Color="transparent" onEntry="this.fontWeight='600';"></lido-text>`}
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+
+				${(args.dragimg3.length === 0 && args.dragtext3.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='2px';">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="this.display='flex';">
+						<lido-cell border-radius="8px" id="option3" audio="" value="${args.option3}" tab-index="8" height="landscape.268px,portrait.240px" width="landscape.200px,portrait.178px" type="drag" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px'; ">
+							${!args.dragimg3 || args.dragimg3.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.202px,portrait.180px" height="landscape.200px,portrait.180px" bg-color="transparent" src="${args.dragimg3}"></lido-image>`}
+
+							${!args.dragtext3 || args.dragtext3 === "" ? '' : `<lido-text id="drag3" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.160px,portrait.160px" string="${args.dragtext3}" bg-Color="transparent" onEntry="this.fontWeight='600';" ></lido-text>`}
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+
+				${(args.dragimg4.length === 0 && args.dragtext4.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='2px';">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="this.display='flex';">
+						<lido-cell border-radius="8px" id="option4" audio="" value="${args.option4}" tab-index="9" height="landscape.268px,portrait.240px" width="landscape.200px,portrait.178px" type="drag" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';">
+							${!args.dragimg4 || args.dragimg4.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.202px,portrait.180px" height="landscape.200px,portrait.180px" bg-color="transparent" src="${args.dragimg4}"></lido-image>`}
+
+							${!args.dragtext4 || args.dragtext4 === "" ? '' : `<lido-text id="drag4" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.160px,portrait.160px" string="${args.dragtext4}" bg-Color="transparent" onEntry="this.fontWeight='600';"></lido-text>`}
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+
+				${(args.dragimg5.length === 0 && args.dragtext5.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='2px';">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="">
+						<lido-cell border-radius="8px"  id="option5" audio="" value="${args.option5}" tab-index="10" height="landscape.268px,portrait.240px" width="landscape.200px,portrait.178px" type="drag" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px'; ">
+							${!args.dragimg5 || args.dragimg5.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.202px,portrait.180px" height="landscape.200px,portrait.180px" bg-color="transparent" src="${args.dragimg5}"></lido-image>`}
+
+							${!args.dragtext5 || args.dragtext5 === "" ? '' : `<lido-text id="drag5" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.160px,portrait.160px" string="${args.dragtext5}" bg-Color="transparent" onEntry="this.fontWeight='600';"></lido-text>`}
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+			</lido-cell>
+		</lido-cell>
+	</lido-container>
+	</main>`;
+}

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

@@ -26,13 +26,12 @@ export const OrderTractorAscending = {
     },
 };
 function getContainerXml(args) {
-    // ${args.answer1, args.answer2, args.answer3, args.answer4, args.answer5}
     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.50px,portrait.10px" y="landscape.120px,portrait.230px" ariaHidden="true" bgColor="transparent" visible="true"  onEntry="this.animation='rightToPlace 2.5s linear';">
+		<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>
@@ -45,7 +44,7 @@ function getContainerXml(args) {
 			<!-- 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" 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" 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>
@@ -55,7 +54,7 @@ function getContainerXml(args) {
 			<!-- 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" 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"
+				<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>
@@ -67,7 +66,7 @@ function getContainerXml(args) {
 				<!-- 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" 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" 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>
@@ -79,7 +78,7 @@ function getContainerXml(args) {
 			<!-- 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" 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" 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>
@@ -91,7 +90,7 @@ function getContainerXml(args) {
 			<!-- 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" 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" 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>