lido-player 0.0.2-alpha-59-dev → 0.0.2-alpha-60-dev

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const utils = require('./utils-03573882.js');
+const utils = require('./utils-28faa755.js');
 require('./index-baff5c15.js');
 
 

package/dist/cjs/lido-avatar_22.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-baff5c15.js');
-const utils = require('./utils-03573882.js');
+const utils = require('./utils-28faa755.js');
 
 var rive = {exports: {}};
 
@@ -10077,7 +10077,9 @@ const LidoContainer = class {
         }
         const langToApply = this.resolveLanguage();
         this.updateChildTextLanguage(langToApply);
-        utils.highlightElement();
+        setTimeout(() => {
+            utils.highlightElement();
+        }, 100);
     }
     disconnectedCallback() {
         window.removeEventListener('resize', () => this.scaleContainer(this.el));
@@ -10097,7 +10099,7 @@ const LidoContainer = class {
             userSelect: 'none', // Prevent any field selection
         };
         console.log('🚀 ~ LidoContainer ~ canplay:', this.canplay);
-        return (index.h(index.Host, { key: '062e67bfc3b71a1dca4502d9a233b312e20d5b0e', id: "lido-container", locale: this.locale, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": this.disableSpeak, "template-id": this.templateId, audio: this.audio }, index.h("lido-text", { key: 'a297a1aad38160b3bbf13386c92a3b9623bd7276', visible: "false", id: this.templateId, audio: "", string: this.instructName }), index.h("slot", { key: '49d014ea8cbda57b9b7b683a4b8150df5c3d9b40' })));
+        return (index.h(index.Host, { key: 'bdae7c7d24046fc0f726668b9b1bbb84f3ddd3dd', id: "lido-container", locale: this.locale, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": this.disableSpeak, "template-id": this.templateId, audio: this.audio }, index.h("lido-text", { key: 'aa5d73493b429f0d99c5737aed89488c565e1699', visible: "false", id: this.templateId, audio: "", string: this.instructName }), index.h("slot", { key: 'd251b1fed4468aabd66a6f6c14b3de234329ab64' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{utils-03573882.js → utils-28faa755.js}

@@ -700,7 +700,6 @@ async function onElementDropComplete(dragElement, dropElement) {
     const dragSelectedData = JSON.stringify(buildDragSelectedMapFromDOM());
     const dropSelectedDataobject = buildDragSelectedMapFromDOM();
     JSON.stringify(dropSelectedDataobject);
-    console.log("dragggedddd elem", { value: dragElement.getAttribute("value") });
     let dropHasDrag = buildDropHasDragFromDOM();
     if (!dropElement) {
         handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
@@ -933,6 +932,7 @@ function updateDropBorder(element) {
     if (dragSelectedElements.length > 0) {
         element.classList.add('filled');
         element.classList.remove('empty');
+        element.classList.remove('highlight-element');
     }
     else {
         if (!element.classList.contains('math-matrix')) {
@@ -1164,7 +1164,7 @@ function highlightElement() {
         }
         // Highlight corresponding drag elements if mistakes are more than 2
         const dragElements = container.querySelectorAll(`[type="drag"]`);
-        if (countOfMistakes > 2) {
+        if (countOfMistakes > 2 && container.getAttribute("is-continue-on-correct") === "true") {
             dragElements.forEach(dragEl => {
                 dragEl.classList.remove('highlight-element');
                 if (dragEl.getAttribute('value') === dropEle.getAttribute('value')) {
@@ -1181,7 +1181,7 @@ function highlightElement() {
         }
     }
     else {
-        if (countOfMistakes <= 2)
+        if (countOfMistakes <= 2 || container.getAttribute("is-continue-on-correct") === "false")
             return;
         const clickTemplate = container.querySelectorAll("[type='click']");
         clickTemplate.forEach(clickEl => {

package/dist/collection/components/container/lido-container.js

@@ -201,7 +201,9 @@ export class LidoContainer {
         }
         const langToApply = this.resolveLanguage();
         this.updateChildTextLanguage(langToApply);
-        highlightElement();
+        setTimeout(() => {
+            highlightElement();
+        }, 100);
     }
     disconnectedCallback() {
         window.removeEventListener('resize', () => this.scaleContainer(this.el));
@@ -221,7 +223,7 @@ export class LidoContainer {
             userSelect: 'none', // Prevent any field selection
         };
         console.log('🚀 ~ LidoContainer ~ canplay:', this.canplay);
-        return (h(Host, { key: '062e67bfc3b71a1dca4502d9a233b312e20d5b0e', id: "lido-container", locale: this.locale, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": this.disableSpeak, "template-id": this.templateId, audio: this.audio }, h("lido-text", { key: 'a297a1aad38160b3bbf13386c92a3b9623bd7276', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: '49d014ea8cbda57b9b7b683a4b8150df5c3d9b40' })));
+        return (h(Host, { key: 'bdae7c7d24046fc0f726668b9b1bbb84f3ddd3dd', id: "lido-container", locale: this.locale, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": this.disableSpeak, "template-id": this.templateId, audio: this.audio }, h("lido-text", { key: 'aa5d73493b429f0d99c5737aed89488c565e1699', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: 'd251b1fed4468aabd66a6f6c14b3de234329ab64' })));
     }
     static get is() { return "lido-container"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,79 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/imageMatch',
+    argTypes: {
+        questionText: { control: 'text' },
+        option1: { control: 'text' },
+        option2: { control: 'text' },
+        option3: { control: 'text' },
+        option4: { control: 'text' },
+        answer: { control: 'text' },
+        image: { control: 'file' },
+        isAllowOnlyCorrect: { control: 'boolean' },
+    },
+};
+export default meta;
+export const imageMatch = {
+    args: {
+        isAllowOnlyCorrect: true,
+        option1: "रमन के स्कूल में खेल दिवस है।",
+        option2: "रमन के स्कूल में खेल दिवस हैं।",
+        option3: "रमन की स्कूल में खेल दिवस है।",
+        option4: "रमन के स्कूल खेल दिवस है।",
+        answer: "रमन के स्कूल में खेल दिवस है।",
+        questionText: "रमन के स्कूल में खेल दिवस है। रमन के स्कूल में खेल दिवस है।",
+        image: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palStory/f2.png'],
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    let tabCounter = 1;
+    const { isAllowOnlyCorrect = true } = args;
+    return `<main>
+  <lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answer}"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Quiz%20literacy.png"  onEntry="" is-allow-only-correct="${isAllowOnlyCorrect}" is-Continue-On-Correct="true" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';">
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.415px,portrait.401px" width="landscape.374px,portrait.401px" x="landscape.25%, portrait.24%" y="landscape.52%, portrait.83%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
+		<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/temp1/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" bg-color="transparent">
+		</lido-avatar>
+		<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/Shadow.png" bg-color="transparent" width="203px" height="32px" x="landscape.87px,portrait.111px" y="landscape.338px,portrait.344px" alt-text="{shadowImgae}">
+		</lido-image>
+	</lido-cell>
+    <lido-cell layout="col" visible="true" bg-Color="transparent" width="landscape.100%,portrait.90%" height="68%" margin="landscape.0px,portrait.-107px 0px 0px 0px">
+
+    
+          
+			<lido-text id="text1" tab-index="1" disable-edit="true" margin="landscape.0px 0px 0px 27px,portrait.0px 0px 60px 0px" value="text1" visible="true" width="landscape.100%,portrait.90%" height="18%" bg-color="#FFF5BB" font-family="'Baloo 2', serif" font-size="60px" font-color="#000" string="${args.questionText}" y="-13%" onEntry="this.position='relative';this.fontWeight='500';this.padding='20px';this.border='2px solid #FFB612'; this.boxShadow='unset';this.border-radius='16px'; this.textAlign='start'; this.speak='true';">
+			</lido-text>
+		  
+   <lido-cell layout="landscape.row,portrait.col" visible="true" bg-Color="transparent" width="landscape.130%,portrait.90%" height="68%" margin="landscape.0px,portrait.-107px 0px 0px 0px">
+		
+			<lido-cell visible="true" height="landscape.553px,portrait.62%" width="landscape.553px,portrait.681px" border-radius="7px"
+          bg-color="white" margin="landscape.0px 0px 0px 0px, portrait.-149px 0px 25px 0px"
+          onEntry="this.display='flex'; this.align-items='center'; this.justifyContent='center';">
+			<lido-image visible="true"
+            width="landscape.553px,portrait.100%"
+            height="landscape.553px,portrait.100%"
+            border-radius="7px" bg-color="white"
+            src="${args.image}">
+          </lido-image>
+		  </lido-cell>
+		
+		<lido-cell layout="col" visible="true"  width="landscape.53%,portrait.108%" height="216px" bg-Color="transparent" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" onEntry="this.align-items='center'; this.justify-content='center'; this.gap='40px';">
+            <lido-text visible="true" audio="" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';"  id="option1" font-family="'Baloo Bhai 2'" tab-index="2" font-size="62px" border-radius="12px" font-color="black" height="120px" width="788px" string="${args.option1}" value="${args.option1}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+			<lido-text visible="true" audio=""  id="option2" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" font-family="'Baloo Bhai 2'" tab-index="3" font-size="62px" border-radius="12px" font-color="black" height="120px" width="788px" string="${args.option2}" value="${args.option2}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+			<lido-text visible="true" audio=""  id="option3" font-family="'Baloo Bhai 2'" tab-index="4" font-size="62px" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" border-radius="12px" font-color="black" height="120px" width="788px" string="${args.option3}" value="${args.option3}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+			<lido-text visible="true" audio=""  id="option4" font-family="'Baloo Bhai 2'" tab-index="5" font-size="62px" border-radius="12px" font-color="black" height="120px" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" width="788px" string="${args.option4}" value="${args.option4}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+		</lido-cell>
+
+	</lido-cell>
+	</lido-cell>
+
+</lido-container>
+  </main>`;
+}

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

@@ -45,13 +45,13 @@ function getContainerXml(args) {
         .join('\n');
     const clickCells = options
         .map((digit, i) => `
-      <lido-text id="click-${digit}" tab-index="${50 + i}" height="landscape.212px, portrait.125px" width="landscape.270px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="click" font-size="104px"  bg-color="#FFAC4C"  onEntry="this.fontWeight='800'; this.borderRadius='24px'; this.flex-shrink='0';" border-image="" onCorrect="this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" >
+      <lido-text id="click-${digit}" tab-index="${50 + i}" height="landscape.212px, portrait.125px" width="landscape.270px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="click" font-size="104px"  bg-color="#FFAC4C"  onEntry="this.fontWeight='800'; this.borderRadius='24px'; this.flex-shrink='0';" border-image="" onCorrect="" onInCorrect="" >
       </lido-text>
     `)
         .join('\n');
     return `
     <main>
-        <lido-container id="lido-container" objective="${objective}" tab-index="1" template-id="mcq" show-drop-border="false" is-continue-on-correct="true"  is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/pal_egma_temp_3.png" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; invisibleText.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false">
+        <lido-container id="lido-container" objective="${objective}" tab-index="1" show-drop-border="false" is-continue-on-correct="${isAllowOnlyCorrect}"  is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/pal_egma_temp_3.png" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false">
 
             <!-- Chimple Avatar -->
             <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.1310px, portrait.450px" y="landscape.418px, portrait.1020px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">

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

@@ -37,10 +37,8 @@ function getContainerXml(args) {
     const objectiveArray = missingNumber.split('');
     const dropCells = objectiveArray
         .map((cell, i) => `
-      <lido-image is-slice="true" height="225px" width="175px" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png" onEntry="this.opacity='1';">
-        <lido-text id="drop-${cell}" tab-index="${25 + i}" disable-edit="true" height="landscape.215px, portrait.125px" width="135px" visible="true" value="${cell}" string="?" font-family="'Baloo Bhai 2'" font-color="black" type="drop" font-size="landscape.140px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='700'; this.borderRadius='16px';" border-image="">
-        </lido-text>
-      </lido-image>
+      <lido-text visible="true" id="drop-${i}" type="drop" tab-index="${25 + i}" height="212px" width="130px" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="#FFF5BBB2" value="${cell}" onEntry="this.fontWeight='700';this.border='2px solid #FFB612';this.border-radius='16px';" >
+      </lido-text>	
       `)
         .join('\n');
     const dragCells = options

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

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

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

@@ -0,0 +1,78 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/palEgraArrangePictures',
+    argTypes: {
+        options: { control: 'object' },
+        PracticeMode: { control: 'boolean' },
+    },
+};
+export default meta;
+export const palEgraArrangePictures = {
+    args: {
+        question_text: 'एक बिल्ली मेज के ऊपर बैठी थी।  मेज के ऊपर एक गिलास में शरबत था। बिल्ली मेज के ऊपर शरबत पीने चढ़ी। उसने शरबत मेज पर गिरा दिया।',
+        images: [{ id: '1', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/cat_playing_outside.webp' },
+            { id: '2', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/glass_on_table.webp' },
+            { id: '3', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/cat_on_table.jpg' },
+            { id: '4', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/juice_on_table_spilled.webp' }],
+        PracticeMode: true,
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    const drop_cells = args.images.map((img, index) => {
+        return `
+    <lido-cell layout="landscape.col, portrait.col" visible="true" margin="landscape.0px,portrait.0" onEntry="this.border-radius='16px';" height="landscape.auto,portrait.35%" width="landscape.auto,portrait.100%" bg-color="transparent" padding="0px 13px 0px 17px" gap="12px">
+		<lido-text visible="true" id="label${index + 1}" tab-index="" value="" string="${img.id}" font-family="'Baloo Bhai 2'" width="72px" height="72px" font-color="#030028" font-size="landscape.60px, portrait.100px"  bg-color="#FFF5BB" onEntry="this.fontWeight='600'; this.border-radius='100%';">
+		</lido-text>
+		<lido-text visible="true" id="drop${index + 1}" tab-index="${11 + index}" value="${img.id}" string="" font-family="'Baloo Bhai 2'" width="215px" height="215px" font-color="#030028" font-size="landscape.140px, portrait.100px"  bg-color="#FFFFFF"  type="drop" onEntry="this.fontWeight='700'; this.border-radius='16px';">
+		</lido-text>
+	</lido-cell>
+  `;
+    }).join('');
+    const shuffledOptions = [...args.images].sort(() => Math.random() - 0.5);
+    const drag_cells = shuffledOptions.map((img, index) => {
+        return `
+      <lido-image visible="true" id="drag${index + 1}" value="${img.id}" bg-color="transparent" width="215px" height="215px" src="${img.src}" type="drag"></lido-image>
+  `;
+    }).join('');
+    // ---------------------- FINAL XML ----------------------
+    return `
+<main>
+<lido-container  visible="true" id="lido-container" onEntry="lido-question.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" template-id="dragAndDrop" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/palEgraTemp6_bg.png" objective="${args.images.map(img => img.id).join(',')}" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" custom-style= "#drop1, #drop2, #drop3, #drop4, #drop5 {
+        border: none !important;
+		box-shadow:
+			inset -10px 10px 10px 0 rgba(0, 0, 0, 0.25);
+        }">
+	 <!-- Chimple Avatar -->
+      <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.330px,portrait.378px" width="landscape.300px,portrait.382px"
+       x="landscape.86%, portrait.30%" y="landscape.34%, portrait.78%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
+        <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+        </lido-avatar>
+		<lido-image id="image" disableEdit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bgColor="transparent" width="inherit" height="20px" x="landscape.-1px, portrait.-7px" y="landscape.280px, portrait.535px" altText="{shadowImage}"></lido-image>
+      </lido-cell>
+
+        <lido-cell layout="landscape.col, portrait.row" aria-hidden="true" visible="true" height="landscape.95%,portrait.150px" width="landscape.98%, portrait.80%" bg-Color="transparent" margin="landscape.102px 0px 0px 0px,portrait.20px 0px 0px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.alignItems='center'; this.gap='12px';">
+            <!-- question cell -->				
+            <lido-text tab-index="111" visible="true" id="lido-question" width="landscape.103%, portrait.80%" height="auto" bg-color="#FFF5BB" string="${args.question_text}" border-radius="16px" onEntry="this.border='2px solid #FFB612'; this.fontWeight='700';" font-size="48px" font-color="#07004E" font-family="'Baloo Bhai 2'" padding="7px 0px 0px 0px">
+      		</lido-text>
+          
+
+          <!--drop cells -->
+	      	<lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px 84px 0px 0px,portrait.0" onEntry="this.border-radius='26px';" height="landscape.auto,portrait.35%" width="landscape.auto,portrait.100%" bg-color="transparent">		
+				${drop_cells}
+			</lido-cell>
+
+
+			<lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px 50px 0px 0px,portrait.0" onEntry="this.border-radius='16px'; this.justify-content='space-evenly';" height="landscape.auto,portrait.35%" width="landscape.100%,portrait.100%" bg-color="transparent">
+                ${drag_cells}
+			</lido-cell>        
+             
+        </lido-cell>                  
+
+</lido-container>
+</main>
+`;
+}

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

@@ -0,0 +1,78 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/palEgraBuildWord',
+    argTypes: {
+        options: { control: 'object' },
+        PracticeMode: { control: 'boolean' },
+    },
+};
+export default meta;
+export const palEgraBuildWord = {
+    args: {
+        question_text: 'Listen to the word and build it with the letters below',
+        question_word: ['dance'],
+        PracticeMode: true,
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    const word = args.question_word[0]; // "dance"
+    const letters = [...word]; // ["d", "a", "n", "c", "e"]
+    const drop_cells = letters.map((q, index) => {
+        return `
+    <lido-text visible="true" id="drop${index + 1}" tab-index="${12 + index}" value="${q}" string="?" font-family="'Baloo Bhai 2'" width="172px" height="189px" font-color="#030028" font-size="landscape.140px, portrait.100px"  bg-color="#FFFFFF"  type="drop" onEntry="this.fontWeight='700'; this.border-radius='16px';">
+	</lido-text>
+  `;
+    }).join('');
+    const shuffledOptions = [...letters].sort(() => Math.random() - 0.5);
+    const drag_cells = shuffledOptions.map((q, index) => {
+        return `
+    <lido-text visible="true" id="drag${index + 1}" tab-index="${16 + index}" value="${q}" string="${q}" font-family="'Baloo Bhai 2'" width="173px" height="189px" font-color="#FFFFFF" font-size="landscape.140px, portrait.100px"  bg-color="#A05730"  type="drag" onEntry="this.fontWeight='700'; this.border-radius='16px'; this.justifyContent='center'; this.alignItems='center';">
+	</lido-text>
+  `;
+    }).join('');
+    // ---------------------- FINAL XML ----------------------
+    return `
+<main>
+<lido-container  visible="true" id="lido-container" onEntry="lido-question.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" template-id="dragAndDrop" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/palEgraTemp6_bg.png" objective="${args.question_word.join(',')}" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" custom-style= "#drop1, #drop2, #drop3, #drop4, #drop5 {
+        border: 2px solid #FFB612 !important;
+        }">
+	   <!-- Chimple Avatar -->
+      <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.330px,portrait.378px" width="landscape.300px,portrait.382px"
+       x="landscape.82%, portrait.30%" y="landscape.32%, portrait.78%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
+        <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+        </lido-avatar>
+		<lido-image id="image" disableEdit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bgColor="transparent" width="inherit" height="20px" x="landscape.-1px, portrait.-7px" y="landscape.280px, portrait.535px" altText="{shadowImage}"></lido-image>
+      </lido-cell>
+
+        <lido-cell layout="landscape.col, portrait.row" aria-hidden="true" visible="true" height="landscape.82%,portrait.150px" width="landscape.98%, portrait.80%" bg-Color="transparent" margin="landscape.94px 0px 0px 0px,portrait.20px 0px 0px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.alignItems='center'; this.gap='73px';">
+            <!-- question cell -->				
+            <lido-text tab-index="111" visible="true" id="lido-question" width="landscape.93%, portrait.80%" height="60px" bg-color="#FFF5BB" string="${args.question_text}" border-radius="16px" onEntry="this.border='2px solid #FFB612'; this.fontWeight='700'; this.padding='50px';" font-size="60px" font-color="#07004E" font-family="'Baloo Bhai 2'">
+      		</lido-text>
+          
+
+          <!-- options cells -->
+	      	<lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.-18px 91px 31px -100px,portrait.0" onEntry="this.border-radius='26px';" height="landscape.auto,portrait.35%" width="landscape.auto,portrait.100%" bg-color="transparent" gap="60px">
+				<lido-text layout="landscape.row, portrait.col" visible="true" margin="landscape.0px,portrait.0" onEntry="this.border-radius='100%'; this.border='2px solid #FFB612';" height="landscape.190px,portrait.35%" width="landscape.184px,portrait.100%" bg-color="white" font-size="1px" onTouch="this.speak='true';" string="${word}">
+					<lido-image visible="true" bg-color="transparent" width="100px" height="100px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Icons/palAudioIcon.png"></lido-image>
+				</lido-text>
+				
+				<!-- drop cells -->
+				<lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px,portrait.0" onEntry="this.border-radius='16px';" height="landscape.239px,portrait.35%" width="landscape.auto,portrait.100%" bg-color="#FFFFFF99" padding="0px 13px 0px 17px" gap="12px">
+					${drop_cells}
+				</lido-cell>
+			</lido-cell>
+
+
+			<lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.-46px 0px 0px 0px,portrait.0" onEntry="this.border-radius='16px';" height="landscape.239px,portrait.35%" width="landscape.auto,portrait.100%" bg-color="transparent" gap="23px">
+                ${drag_cells}
+			</lido-cell>        
+             
+        </lido-cell>
+</lido-container>
+</main>
+`;
+}

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

@@ -0,0 +1,35 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/palStorytale',
+};
+export default meta;
+export const AmazingStories = {
+    args: {
+        content: 'One hot day, a crow was very thirsty.It flew here and there looking for water. At last, it found a pitcher with a little water at the bottom. The crow tried to drink but could not reach the water. Then the crow had an idea. It dropped small stones into the pitcher. Slowly, the water rose up. The crow drank the water and flew away happily.',
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    return `<main>
+    <lido-container show-prev-button="false" show-next-button="true" id="lido-container" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palStory/bgImage.png" height="1600px" width="900px" value="mainContainer4" objective="" aria-label="" x="0" y="0" z="0" visible="true" audio="" onTouch="" onCorrect="" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true">
+		<lido-cell layout="row" id="cell1" visible="true" margin="82px 203px 0px 0px"  value="cell1" width="landscape.100%,portrait.86%" height="landscape.82%,portrait.80%" x="50px" y="50px" bg-color="transparent"  onEntry="" >
+				
+			<lido-text id="text1" tab-index="1"   value="text1" visible="true" width="landscape.100%,portrait.90%" height="100%" bg-color="#FFF5BB" font-family="Baloo Bhai 2" font-size="60px" font-color="#000" string='${args.content}' onEntry="this.border='2px solid #FFB612'; this.fontWeight='600';this.padding='0px 40px 0px 40px'; this.boxShadow='unset'; this.border-radius='16px'; this.textAlign='start'; this.speak='true';">
+			</lido-text>
+		</lido-cell>
+			
+		<!-- below is the code for avatar -->
+
+		<lido-pos id="pos1" disable-edit="true" value="pos1" height="350px" width="350px" x="landscape.91%, portrait.580px" y="landscape.56%, portrait.1350px" aria-hidden="true" z="1" bg-color="transparent" type="" visible="true" audio="col1.mp3" onTouch="" onCorrect="">
+			<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="350px" width="350px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+			</lido-avatar>
+				<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="186px" height="20px" x="77px" y="305px" alt-text="{shadowImage}">
+				</lido-image>
+		</lido-pos>
+	</lido-container>
+
+	</main>`;
+}

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

@@ -40,7 +40,7 @@ function renderSentencePart(text, id) {
     if (text.startsWith('#')) {
         const value = text.replace('#', '').trim();
         return `
-      <lido-text type="drop" drop-attr="stretch" value="${value}" id="${id}" visible="true" height="136px" width="200px" onEntry="this.margin-right='40px';this.border='4px solid #A8B53A';this.border-radius='16px';"></lido-text>
+      <lido-text type="drop" drop-attr="stretch" value="${value}" id="${id}" visible="true" height="136px" width="200px" y="19px" onEntry="this.position='relative';this.margin-right='40px';this.border='4px solid #A8B53A';this.border-radius='16px';"></lido-text>
     `;
     }
     // NORMAL TEXT case
@@ -68,7 +68,7 @@ function getContainerXml(args) {
             <lido-image   tab-index="8"  visible="true" height="auto" width="auto" src="${args.img1}"></lido-image>
     
             </lido-cell>
-        <lido-cell layout="row" visible="true" height="270px" width="auto" bg-color="transparent">
+        <lido-cell layout="flex" visible="true" height="270px" width="auto" onEntry="this.display='ruby';" bg-color="transparent">
           ${sentenceParts
         .map((part, index) => renderSentencePart(part, `sentence-${index}`))
         .join('')}

package/dist/collection/utils/utilsHandlers/dragDropHandler.js

@@ -502,7 +502,6 @@ export async function onElementDropComplete(dragElement, dropElement) {
     const dragSelectedData = JSON.stringify(buildDragSelectedMapFromDOM());
     const dropSelectedDataobject = buildDragSelectedMapFromDOM();
     const dropSelectedData = JSON.stringify(dropSelectedDataobject);
-    console.log("dragggedddd elem", { value: dragElement.getAttribute("value") });
     let dropHasDrag = buildDropHasDragFromDOM();
     if (!dropElement) {
         handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData, dropSelectedData);
@@ -742,6 +741,7 @@ export function updateDropBorder(element) {
     if (dragSelectedElements.length > 0) {
         element.classList.add('filled');
         element.classList.remove('empty');
+        element.classList.remove('highlight-element');
     }
     else {
         if (!element.classList.contains('math-matrix')) {

package/dist/collection/utils/utilsHandlers/highlightHandler.js

@@ -120,7 +120,7 @@ export function highlightElement() {
         }
         // Highlight corresponding drag elements if mistakes are more than 2
         const dragElements = container.querySelectorAll(`[type="drag"]`);
-        if (countOfMistakes > 2) {
+        if (countOfMistakes > 2 && container.getAttribute("is-continue-on-correct") === "true") {
             dragElements.forEach(dragEl => {
                 dragEl.classList.remove('highlight-element');
                 if (dragEl.getAttribute('value') === dropEle.getAttribute('value')) {
@@ -137,7 +137,7 @@ export function highlightElement() {
         }
     }
     else {
-        if (countOfMistakes <= 2)
+        if (countOfMistakes <= 2 || container.getAttribute("is-continue-on-correct") === "false")
             return;
         const clickTemplate = container.querySelectorAll("[type='click']");
         clickTemplate.forEach(clickEl => {

package/dist/components/index.js

@@ -1 +1 @@
-export { f as format, g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-3513b1f3.js';
+export { f as format, g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-235091a1.js';

package/dist/components/lido-avatar.js

@@ -1,4 +1,4 @@
-import { L as LidoAvatar$1, d as defineCustomElement$1 } from './p-99fcbae4.js';
+import { L as LidoAvatar$1, d as defineCustomElement$1 } from './p-4d01394c.js';
 
 const LidoAvatar = LidoAvatar$1;
 const defineCustomElement = defineCustomElement$1;