lido-player 0.0.2-alpha-62 → 0.0.2-alpha-64

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const utils = require('./utils-b13cba29.js');
+const utils = require('./utils-becabee2.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-b13cba29.js');
+const utils = require('./utils-becabee2.js');
 
 var rive = {exports: {}};
 
@@ -9810,7 +9810,34 @@ const instruction$4 = {
 	dragAndDrop: "Match the items by dragging and dropping them into the correct places.",
 	mcq: "Select the correct answer from the options provided.",
 	tracing: "Trace the shape by following the outline carefully.",
-	flashcards: "Review the flashcards to reinforce your learning."
+	flashcards: "Review the flashcards to reinforce your learning.",
+	substractionWithImage: "substractionWithImageEngAudio",
+	substractionWithoutImage: "substractionWithoutImageEngAudio",
+	numberIdentificationWithImage: "numberIdentificationWithImageEngAudio",
+	numberIdentificationWithoutImage: "numberIdentificationWithoutImageEngAudio",
+	wordBuildingWithImage: "wordBuildingWithImageEngAudio",
+	wordBuildingWithoutImage: "wordBuildingWithoutImageEngAudio",
+	pictureClues: "pictureCluesEngAudio",
+	pictureWordMatchMultipleImages: "pictureWordMatchMultipleImagesEngAudio",
+	pictureWordMatchSingleImage: "pictureWordMatchSingleImageEngAudio",
+	sentenceMatch: "sentenceMatchEngAudio",
+	imageMatch: "imageMatchEngAudio",
+	palStoryTale: "palStoryTaleEngAudio",
+	palEgmaPatternMatching: "palEgmaPatternMatchingEngAudio",
+	palEgmaWordProblemDragnDrop: "palEgmaWordProblemDragnDropEngAudio",
+	palEgmaWordProblemClick: "palEgmaWordProblemClickEngAudio",
+	palEgraOddOneOut: "palEgraOddOneOutEngAudio",
+	palEgraArrangePictures: "palEgraArrangePicturesEngAudio",
+	palEgraBuildWord: "palEgraBuildWordEngAudio",
+	palEgraWordFormation: "palEgraWordFormationEngAudio",
+	palInventedSpelling: "palInventedSpellingEngAudio",
+	palLetterIdentification: "palLetterIdentificationEngAudio",
+	palStoryMaking: "palStoryMakingEngAudio",
+	palegmasumtogether: "palegmasumtogetherEngAudio",
+	palegmamultioption: "palegmamultioptionEngAudio",
+	palegraoptionaudio: "palegraoptionaudioEngAudio",
+	palegrawordmatch: "palegrawordmatchEngAudio",
+	palegramcqimages: "palegramcqimagesEngAudio"
 };
 const en = {
 	"Do you want to exit?": "Do you want to exit?",
@@ -9839,10 +9866,37 @@ const fr = {
 
 const Exit$3 = "बाहर निकलें";
 const instruction$2 = {
-	dragAndDrop: "वस्तुओं को सही स्थानों पर खींचकर और छोड़कर मिलाएँ।",
-	mcq: "दिए गए विकल्पों में से सही उत्तर चुनें।",
-	tracing: "रेखा का सावधानीपूर्वक अनुसरण करते हुए आकृति बनाएँ।",
-	flashcards: "सीख को मजबूत करने के लिए फ्लैशकार्ड देखें।"
+	dragAndDrop: "Match the items by dragging and dropping them into the correct places.",
+	mcq: "Select the correct answer from the options provided.",
+	tracing: "Trace the shape by following the outline carefully.",
+	flashcards: "Review the flashcards to reinforce your learning.",
+	substractionWithImage: "substractionWithImageHiAudio",
+	substractionWithoutImage: "substractionWithoutImageHiAudio",
+	numberIdentificationWithImage: "numberIdentificationWithImageHiAudio",
+	numberIdentificationWithoutImage: "numberIdentificationWithoutImageHiAudio",
+	wordBuildingWithImage: "wordBuildingWithImageHiAudio",
+	wordBuildingWithoutImage: "wordBuildingWithoutImageHiAudio",
+	pictureClues: "pictureCluesHiAudio",
+	pictureWordMatchMultipleImages: "pictureWordMatchMultipleImagesHiAudio",
+	pictureWordMatchSingleImage: "pictureWordMatchSingleImageHiAudio",
+	sentenceMatch: "sentenceMatchHiAudio",
+	imageMatch: "imageMatchHiAudio",
+	palStoryTale: "palStoryTaleHiAudio",
+	palEgmaPatternMatching: "palEgmaPatternMatchingHiAudio",
+	palEgmaWordProblemDragnDrop: "palEgmaWordProblemDragnDropHiAudio",
+	palEgmaWordProblemClick: "palEgmaWordProblemClickHiAudio",
+	palEgraOddOneOut: "palEgraOddOneOutHiAudio",
+	palEgraArrangePictures: "palEgraArrangePicturesHiAudio",
+	palEgraBuildWord: "palEgraBuildWordHiAudio",
+	palEgraWordFormation: "palEgraWordFormationHiAudio",
+	palInventedSpelling: "palInventedSpellingHiAudio",
+	palLetterIdentification: "palLetterIdentificationHiAudio",
+	palStoryMaking: "palStoryMakingHiAudio",
+	palegmasumtogether: "palegmasumtogetherHiAudio",
+	palegmamultioption: "palegmamultioptionHiAudio",
+	palegraoptionaudio: "palegraoptionaudioHiAudio",
+	palegrawordmatch: "palegrawordmatchHiAudio",
+	palegramcqimages: "palegramcqimagesHiAudio"
 };
 const hi = {
 	"Do you want to exit?": "क्या आप बाहर निकलना चाहते हैं?",
@@ -9855,10 +9909,37 @@ const hi = {
 
 const Exit$2 = "ನಿರ್ಗಮಿಸು";
 const instruction$1 = {
-	dragAndDrop: "ವಸ್ತುಗಳನ್ನು ಸರಿಯಾದ ಸ್ಥಳಗಳಿಗೆ ಎಳೆದು ಬಿಟ್ಟು ಹೊಂದಿಸಿ.",
-	mcq: "ನೀಡಿದ ಆಯ್ಕೆಗಳಲ್ಲಿ ಸರಿಯಾದ ಉತ್ತರವನ್ನು ಆಯ್ಕೆಮಾಡಿ.",
-	tracing: "ರೆಖೆಯನ್ನು ಗಮನದಿಂದ ಅನುಸರಿಸಿ ಆಕಾರವನ್ನು ಬಿಡಿಸಿ.",
-	flashcards: "ಕಲಿಕೆಯನ್ನು ಬಲಪಡಿಸಲು ಫ್ಲ್ಯಾಶ್ ಕಾರ್ಡ್‌ಗಳನ್ನು ನೋಡಿ."
+	dragAndDrop: "Match the items by dragging and dropping them into the correct places.",
+	mcq: "Select the correct answer from the options provided.",
+	tracing: "Trace the shape by following the outline carefully.",
+	flashcards: "Review the flashcards to reinforce your learning.",
+	substractionWithImage: "substractionWithImageKaAudio",
+	substractionWithoutImage: "substractionWithoutImageKaAudio",
+	numberIdentificationWithImage: "numberIdentificationWithImageKaAudio",
+	numberIdentificationWithoutImage: "numberIdentificationWithoutImageKaAudio",
+	wordBuildingWithImage: "wordBuildingWithImageKaAudio",
+	wordBuildingWithoutImage: "wordBuildingWithoutImageKaAudio",
+	pictureClues: "pictureCluesKaAudio",
+	pictureWordMatchMultipleImages: "pictureWordMatchMultipleImagesKaAudio",
+	pictureWordMatchSingleImage: "pictureWordMatchSingleImageKaAudio",
+	sentenceMatch: "sentenceMatchKaAudio",
+	imageMatch: "imageMatchKaAudio",
+	palStoryTale: "palStoryTaleKaAudio",
+	palEgmaPatternMatching: "palEgmaPatternMatchingKaAudio",
+	palEgmaWordProblemDragnDrop: "palEgmaWordProblemDragnDropKaAudio",
+	palEgmaWordProblemClick: "palEgmaWordProblemClickKaAudio",
+	palEgraOddOneOut: "palEgraOddOneOutKaAudio",
+	palEgraArrangePictures: "palEgraArrangePicturesKaAudio",
+	palEgraBuildWord: "palEgraBuildWordKaAudio",
+	palEgraWordFormation: "palEgraWordFormationKaAudio",
+	palInventedSpelling: "palInventedSpellingKaAudio",
+	palLetterIdentification: "palLetterIdentificationKaAudio",
+	palStoryMaking: "palStoryMakingKaAudio",
+	palegmasumtogether: "palegmasumtogetherKaAudio",
+	palegmamultioption: "palegmamultioptionKaAudio",
+	palegraoptionaudio: "palegraoptionaudioKaAudio",
+	palegrawordmatch: "palegrawordmatchKaAudio",
+	palegramcqimages: "palegramcqimagesKaAudio"
 };
 const ka = {
 	"Do you want to exit?": "ನೀವು ನಿರ್ಗಮಿಸಲು ಬಯಸುವಿರಾ?",
@@ -9888,10 +9969,37 @@ const port = {
 };
 
 const instruction = {
-	dragAndDrop: "वस्तू योग्य ठिकाणी ओढून आणि सोडून जुळवा.",
-	mcq: "दिलेल्या पर्यायांमधून योग्य उत्तर निवडा.",
-	tracing: "रेषेचा काळजीपूर्वक मागोवा घेत आकृती काढा.",
-	flashcards: "तुमचे शिक्षण मजबूत करण्यासाठी फ्लॅशकार्ड्स पाहा."
+	dragAndDrop: "Match the items by dragging and dropping them into the correct places.",
+	mcq: "Select the correct answer from the options provided.",
+	tracing: "Trace the shape by following the outline carefully.",
+	flashcards: "Review the flashcards to reinforce your learning.",
+	substractionWithImage: "substractionWithImageMaAudio  ",
+	substractionWithoutImage: "substractionWithoutImageMaAudio",
+	numberIdentificationWithImage: "numberIdentificationWithImageMaAudio",
+	numberIdentificationWithoutImage: "numberIdentificationWithoutImageMaAudio",
+	wordBuildingWithImage: "wordBuildingWithImageMaAudio",
+	wordBuildingWithoutImage: "wordBuildingWithoutImageMaAudio",
+	pictureClues: "pictureCluesMaAudio",
+	pictureWordMatchMultipleImages: "pictureWordMatchMultipleImagesMaAudio",
+	pictureWordMatchSingleImage: "pictureWordMatchSingleImageMaAudio",
+	sentenceMatch: "sentenceMatchMaAudio",
+	imageMatch: "imageMatchMaAudio",
+	palStoryTale: "palStoryTaleMaAudio",
+	palEgmaPatternMatching: "palEgmaPatternMatchingMaAudio",
+	palEgmaWordProblemDragnDrop: "palEgmaWordProblemDragnDropMaAudio",
+	palEgmaWordProblemClick: "palEgmaWordProblemClickMaAudio",
+	palEgraOddOneOut: "palEgraOddOneOutMaAudio",
+	palEgraArrangePictures: "palEgraArrangePicturesMaAudio",
+	palEgraBuildWord: "palEgraBuildWordMaAudio",
+	palEgraWordFormation: "palEgraWordFormationMaAudio",
+	palInventedSpelling: "palInventedSpellingMaAudio",
+	palLetterIdentification: "palLetterIdentificationMaAudio",
+	palStoryMaking: "palStoryMakingMaAudio",
+	palegmasumtogether: "palegmasumtogetherMaAudio",
+	palegmamultioption: "palegmamultioptionMaAudio",
+	palegraoptionaudio: "palegraoptionaudioMaAudio",
+	palegrawordmatch: "palegrawordmatchMaAudio",
+	palegramcqimages: "palegramcqimagesMaAudio"
 };
 const ma = {
 	instruction: instruction
@@ -9985,6 +10093,33 @@ const LidoContainer = class {
             mcq: "instruction.mcq" /* templateAudio.mcq */,
             tracing: "instruction.tracing" /* templateAudio.tracing */,
             dragAndDrop: "instruction.dragAndDrop" /* templateAudio.dragAndDrop */,
+            substractionWithImage: "instruction.substractionWithImage" /* templateAudio.substractionWithImage */,
+            "substractionWithoutImage": "instruction.substractionWithoutImage" /* templateAudio.substractionWithoutImage */,
+            "numberIdentificationWithImage": "instruction.numberIdentificationWithImage" /* templateAudio.numberIdentificationWithImage */,
+            "numberIdentificationWithoutImage": "instruction.numberIdentificationWithoutImage" /* templateAudio.numberIdentificationWithoutImage */,
+            "wordBuildingWithImage": "instruction.wordBuildingWithImage" /* templateAudio.wordBuildingWithImage */,
+            "wordBuildingWithoutImage": "instruction.wordBuildingWithoutImage" /* templateAudio.wordBuildingWithoutImage */,
+            "pictureClues": "instruction.pictureClues" /* templateAudio.pictureClues */,
+            "pictureWordMatchMultipleImages": "instruction.pictureWordMatchMultipleImages" /* templateAudio.pictureWordMatchMultipleImages */,
+            "pictureWordMatchSingleImage": "instruction.pictureWordMatchSingleImage" /* templateAudio.pictureWordMatchSingleImage */,
+            "sentenceMatch": "instruction.sentenceMatch" /* templateAudio.sentenceMatch */,
+            "imageMatch": "instruction.imageMatch" /* templateAudio.imageMatch */,
+            "palStoryTale": "instruction.palStoryTale" /* templateAudio.palStoryTale */,
+            "palEgmaPatternMatching": "instruction.palEgmaPatternMatching" /* templateAudio.palEgmaPatternMatching */,
+            "palEgmaWordProblemDragnDrop": "instruction.palEgmaWordProblemDragnDrop" /* templateAudio.palEgmaWordProblemDragnDrop */,
+            "palEgmaWordProblemClick": "instruction.palEgmaWordProblemClick" /* templateAudio.palEgmaWordProblemClick */,
+            "palEgraOddOneOut": "instruction.palEgraOddOneOut" /* templateAudio.palEgraOddOneOut */,
+            "palEgraArrangePictures": "instruction.palEgraArrangePictures" /* templateAudio.palEgraArrangePictures */,
+            "palEgraBuildWord": "instruction.palEgraBuildWord" /* templateAudio.palEgraBuildWord */,
+            "palEgraWordFormation": "instruction.palEgraWordFormation" /* templateAudio.palEgraWordFormation */,
+            "palInventedSpelling": "instruction.palInventedSpelling" /* templateAudio.palInventedSpelling */,
+            "palLetterIdentification": "instruction.palLetterIdentification" /* templateAudio.palLetterIdentification */,
+            "palStoryMaking": "instruction.palStoryMaking" /* templateAudio.palStoryMaking */,
+            "palegmasumtogether": "instruction.palegmasumtogether" /* templateAudio.palegmasumtogether */,
+            "palegmamultioption": "instruction.palegmamultioption" /* templateAudio.palegmamultioption */,
+            "palegraoptionaudio": "instruction.palegraoptionaudio" /* templateAudio.palegraoptionaudio */,
+            "palegrawordmatch": "instruction.palegrawordmatch" /* templateAudio.palegrawordmatch */,
+            "palegramcqimages": "instruction.palegramcqimages" /* templateAudio.palegramcqimages */,
         }[this.templateId]) !== null && _a !== void 0 ? _a : '';
         this.instructName = key ? instance.t(key) : '';
         const home = document.querySelector('lido-home');
@@ -10140,7 +10275,7 @@ const LidoContainer = class {
             userSelect: 'none', // Prevent any field selection
         };
         console.log('🚀 ~ LidoContainer ~ canplay:', this.canplay);
-        return (index.h(index.Host, { key: 'b2b35ac6c3be99cabf0eeaf2708611bfd4c3360c', id: "lido-container", Lang: this.Lang, "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: 'ebd91c0603caa4e52d583dd86a1692b57b99afb4', visible: "false", id: this.templateId, audio: "", string: this.instructName }), index.h("slot", { key: '76f7f53558af814bbd0ce4516b80d4fa970e3c48' })));
+        return (index.h(index.Host, { key: '63931aa1e8ffe4b1b427f851f7a7f0197f4c0c33', id: "lido-container", Lang: this.Lang, "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: 'b8857a16147d8eac74f8c4bc70eec2558ddc888b', visible: "false", id: this.templateId, audio: "", string: this.instructName }), index.h("slot", { key: '7b6369dd2d859ee824d3fca53486aa8f5dd6fa34' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{utils-b13cba29.js → utils-becabee2.js}

@@ -1202,12 +1202,12 @@ function highlightElement() {
     if (!container)
         return;
     const dropElements = buildDropHasDragFromDOM();
+    const dropEls = container.querySelectorAll(`[type="drop"]`);
+    dropEls.forEach(dropEl => {
+        dropEl.classList.remove('highlight-element');
+    });
     let firstFalse = Object.values(dropElements).find(item => !item.isFull);
     if (firstFalse) {
-        const dropEls = container.querySelectorAll(`[type="drop"]`);
-        dropEls.forEach(dropEl => {
-            dropEl.classList.remove('highlight-element');
-        });
         const dropEle = container.querySelector(`#${firstFalse.drop}`);
         if (dropEle) {
             dropEle.classList.add('highlight-element');
@@ -1245,6 +1245,10 @@ function highlightElement() {
 }
 
 class AudioPlayer {
+    isSpeakDisabled(element) {
+        const text = element.closest('lido-text');
+        return (text === null || text === void 0 ? void 0 : text.getAttribute('disable-speak')) === 'true';
+    }
     constructor() {
         this.handleUserClick = () => {
             this.stop();
@@ -3342,9 +3346,7 @@ function addClickListenerForClickType(element) {
             // storingEachActivityScore(isCorrect);
             // }
             highlightElement();
-            if (!container.getAttribute("click-completed")) {
-                handleShowCheck();
-            }
+            handleShowCheck();
             return;
         }
         if (showCheck) {
@@ -68973,6 +68975,7 @@ const afterDropDragHandling = (dragElement, dropElement) => {
                 dummyElement.classList.remove('dropped');
                 dummyElement.removeAttribute('drop-to');
                 dummyElement.removeAttribute('drop-time');
+                dummyElement.style.opacity = "1";
                 dragElement.style.width = dropElement.style.width;
                 dragElement.style.height = dropElement.style.height;
                 dragElement.setAttribute('hasDummy', 'true');
@@ -69048,6 +69051,7 @@ function cloneElementWithComputedStyles(originalEl) {
     clone.style.margin = originalEl.style.margin;
     clone.style.opacity = originalEl.style.opacity;
     clone.style.transform = originalEl.style.transform;
+    clone.style.borderRadius = originalEl.style.borderRadius;
     clone.setAttribute("visible", "true");
     clone.setAttribute("data-dummy", "true");
     if (tag === "lido-math-matrix") {
@@ -69198,10 +69202,10 @@ async function onActivityComplete(dragElement, dropElement) {
     drag[index].push(dragElement.id);
     const allElements = document.querySelectorAll("[type='drop']");
     allElements.forEach(otherElement => {
-        var _a;
+        var _a, _b;
         const storedTabIndexes = Object.keys(dragScore).map(Number);
         if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
-            if (!(((_a = otherElement.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
+            if (!(((_a = otherElement.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal) && !(((_b = container.getAttribute('drop-action')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === DropMode.InfiniteDrop)) {
                 if (otherElement) {
                     otherElement.style.opacity = "0";
                 }
@@ -69242,7 +69246,6 @@ const storeActivityScore = (score) => {
 const handleShowCheck = () => {
     var _a, _b;
     const container = document.getElementById(LidoContainer);
-    container.setAttribute("click-completed", "true");
     const objectiveString = container['objective'];
     const selectValues = (_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '';
     const checkButton = document.querySelector('#lido-checkButton');
@@ -69267,7 +69270,10 @@ const handleShowCheck = () => {
         }
     }
     else {
-        validateObjectiveStatus();
+        if (!container.getAttribute("game-completed")) {
+            validateObjectiveStatus();
+        }
+        container.setAttribute("game-completed", "true");
     }
 };
 let res;
@@ -69317,7 +69323,9 @@ const validateObjectiveStatus = async () => {
             if (attach === 'true') {
                 appendingDragElementsInDrop();
             }
-            storingEachActivityScore(true);
+            if (container.querySelectorAll("[type='click']").length > 0) {
+                storingEachActivityScore(true);
+            }
             await executeActions(onCorrect, container);
         }
         if (container.getAttribute('dropAttr') === 'EnableAnimation') {
@@ -69343,7 +69351,7 @@ const validateObjectiveStatus = async () => {
             const onInCorrect = container.getAttribute('onInCorrect');
             storingEachActivityScore(false);
             await executeActions(onInCorrect, container);
-            container.removeAttribute("click-completed");
+            container.removeAttribute("game-completed");
         }
     }
 };
@@ -69826,20 +69834,18 @@ const questionBoxAnimation = async (element, value) => {
     const dragElements = Array.from(element.querySelectorAll("[type='drag']"));
     // Ensure all drag childrens which is dropped disappear
     dragElements.forEach(dragElement => {
-        if (dragElement.hasAttribute('drop-to')) {
+        const dropToAttr = dragElement.getAttribute('drop-to');
+        if (dropToAttr && dropToAttr !== '') {
             dragElement.style.transition = 'opacity 0.5s ease';
             dragElement.style.opacity = '0'; // Fade out
-            setTimeout(() => {
-                dragElement.remove(); // Remove from view after fade-out
-            }, 500);
-        }
-    });
-    // Reveal all drop childrens which is hidden
-    const dropElements = Array.from(element.querySelectorAll("[type='drop']"));
-    dropElements.forEach(dropEl => {
-        const dropVal = dropEl.getAttribute("value");
-        if (dropVal && dropEl.innerText.trim() === "?") {
-            dropEl.innerText = dropVal;
+            const dropEl = document.getElementById(dropToAttr);
+            const dragVal = dragElement.getAttribute("value");
+            if (dragVal && dropEl.innerText.trim() === "?") {
+                dropEl.innerText = dragVal;
+            }
+            // setTimeout(() => {
+            //   // dragElement.remove() // Remove from view after fade-out
+            // }, 500); 
         }
     });
 };

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

@@ -71,6 +71,33 @@ export class LidoContainer {
             mcq: "instruction.mcq" /* templateAudio.mcq */,
             tracing: "instruction.tracing" /* templateAudio.tracing */,
             dragAndDrop: "instruction.dragAndDrop" /* templateAudio.dragAndDrop */,
+            substractionWithImage: "instruction.substractionWithImage" /* templateAudio.substractionWithImage */,
+            "substractionWithoutImage": "instruction.substractionWithoutImage" /* templateAudio.substractionWithoutImage */,
+            "numberIdentificationWithImage": "instruction.numberIdentificationWithImage" /* templateAudio.numberIdentificationWithImage */,
+            "numberIdentificationWithoutImage": "instruction.numberIdentificationWithoutImage" /* templateAudio.numberIdentificationWithoutImage */,
+            "wordBuildingWithImage": "instruction.wordBuildingWithImage" /* templateAudio.wordBuildingWithImage */,
+            "wordBuildingWithoutImage": "instruction.wordBuildingWithoutImage" /* templateAudio.wordBuildingWithoutImage */,
+            "pictureClues": "instruction.pictureClues" /* templateAudio.pictureClues */,
+            "pictureWordMatchMultipleImages": "instruction.pictureWordMatchMultipleImages" /* templateAudio.pictureWordMatchMultipleImages */,
+            "pictureWordMatchSingleImage": "instruction.pictureWordMatchSingleImage" /* templateAudio.pictureWordMatchSingleImage */,
+            "sentenceMatch": "instruction.sentenceMatch" /* templateAudio.sentenceMatch */,
+            "imageMatch": "instruction.imageMatch" /* templateAudio.imageMatch */,
+            "palStoryTale": "instruction.palStoryTale" /* templateAudio.palStoryTale */,
+            "palEgmaPatternMatching": "instruction.palEgmaPatternMatching" /* templateAudio.palEgmaPatternMatching */,
+            "palEgmaWordProblemDragnDrop": "instruction.palEgmaWordProblemDragnDrop" /* templateAudio.palEgmaWordProblemDragnDrop */,
+            "palEgmaWordProblemClick": "instruction.palEgmaWordProblemClick" /* templateAudio.palEgmaWordProblemClick */,
+            "palEgraOddOneOut": "instruction.palEgraOddOneOut" /* templateAudio.palEgraOddOneOut */,
+            "palEgraArrangePictures": "instruction.palEgraArrangePictures" /* templateAudio.palEgraArrangePictures */,
+            "palEgraBuildWord": "instruction.palEgraBuildWord" /* templateAudio.palEgraBuildWord */,
+            "palEgraWordFormation": "instruction.palEgraWordFormation" /* templateAudio.palEgraWordFormation */,
+            "palInventedSpelling": "instruction.palInventedSpelling" /* templateAudio.palInventedSpelling */,
+            "palLetterIdentification": "instruction.palLetterIdentification" /* templateAudio.palLetterIdentification */,
+            "palStoryMaking": "instruction.palStoryMaking" /* templateAudio.palStoryMaking */,
+            "palegmasumtogether": "instruction.palegmasumtogether" /* templateAudio.palegmasumtogether */,
+            "palegmamultioption": "instruction.palegmamultioption" /* templateAudio.palegmamultioption */,
+            "palegraoptionaudio": "instruction.palegraoptionaudio" /* templateAudio.palegraoptionaudio */,
+            "palegrawordmatch": "instruction.palegrawordmatch" /* templateAudio.palegrawordmatch */,
+            "palegramcqimages": "instruction.palegramcqimages" /* templateAudio.palegramcqimages */,
         }[this.templateId]) !== null && _a !== void 0 ? _a : '';
         this.instructName = key ? i18next.t(key) : '';
         const home = document.querySelector('lido-home');
@@ -226,7 +253,7 @@ export class LidoContainer {
             userSelect: 'none', // Prevent any field selection
         };
         console.log('🚀 ~ LidoContainer ~ canplay:', this.canplay);
-        return (h(Host, { key: 'b2b35ac6c3be99cabf0eeaf2708611bfd4c3360c', id: "lido-container", Lang: this.Lang, "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: 'ebd91c0603caa4e52d583dd86a1692b57b99afb4', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: '76f7f53558af814bbd0ce4516b80d4fa970e3c48' })));
+        return (h(Host, { key: '63931aa1e8ffe4b1b427f851f7a7f0197f4c0c33', id: "lido-container", Lang: this.Lang, "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: 'b8857a16147d8eac74f8c4bc70eec2558ddc888b', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: '7b6369dd2d859ee824d3fca53486aa8f5dd6fa34' })));
     }
     static get is() { return "lido-container"; }
     static get originalStyleUrls() {

package/dist/collection/stories/Templates/matchingCard/matching-card.stories.js

@@ -10,11 +10,11 @@ const meta = {
     },
 };
 export default meta;
-export const OrderTractor = {
+export const matchCard = {
     args: {
         answer: 'correct',
         option1: 'incorrect', option2: 'correct', option3: 'incorrect',
-        isAllowOnlyCorrect: 'true',
+        isAllowOnlyCorrect: true,
     },
     render: args => {
         const xml = getContainerXml(args);
@@ -24,26 +24,34 @@ export const OrderTractor = {
 function getContainerXml(args) {
     return `
     <main>
-     <lido-container id="lido-container" is-allow-only-correct="${args.isAllowOnlyCorrect}"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Matching%20card.png" objective="${args.answer}" width="100%" bg-color="transparent" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; truck.animation='placeToLeft 2.5s linear'; imgs.animation='placeToLeft 2.5s linear'; dragEle.animation='placeToLeft 2.5s linear'; this.sleep='2000';  " onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false" custom-style="#dropEle{border: none !important} #drag1,#drag2,#drag3{box-shadow: none !important}">
-	<!-- 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.1px, portrait.20px" y="landscape.5px, portrait.318px" 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-container id="lido-container" is-allow-only-correct="${args.isAllowOnlyCorrect}"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Matching%20card.png" objective="${args.answer}" width="100%" bg-color="transparent" visible="true" onCorrect="drag1.disableType='true'; drag2.disableType='true'; drag3.disableType='true'; lido-avatar.avatarAnimate='Success'; this.sleep='2000'; truck.animation='placeToLeft 2.5s linear'; imgs.animation='placeToLeft 2.5s linear'; dragEle.animation='placeToLeft 2.5s linear'; trainAudio.speak='true'; this.sleep='2000';  " onEntry="trainAudio.speak='true'; invisible-text.speak='true'; this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="${args.isAllowOnlyCorrect}" after-drop="false" custom-style="#dropEle{border: none !important} #drag1,#drag2,#drag3{box-shadow: none !important}">
 
-	<lido-text id="trainAudio" visible="false" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/train1%20(1).m4a" onEntry="this.speak='true';"></lido-text>
-    <lido-image id="truck"  height="60%" width="landscape.100%,portrait.200%" visible="true"  bg-Color="transparent" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/train.svg" margin="landscape.14px 0px 0px 0px,portrait.452px 0px 0px 0px" onEntry="this.animation='rightToPlace 2.5s linear';" onCorrect="this.animation='placeToLeft 2.5s linear';"></lido-image>
-		<lido-cell id="imgs" visible="true" x="landscape.-158px,portrait.0" y="landscape.-495px,portrait.-652px" layout="row" height="80%" width="landscape.35%,portrait.70%" bg-color="transparent" margin="landscape.-115px 0px 0px 345px,portrait.0px 0px 0px 95px" onEntry="this.position='relative';this.animation='rightToPlace 2.5s linear';" onCorrect="this.animation='placeToLeft 2.5s linear';">
-		   	<lido-image id="qn" height="landscape.320px,portrait.320px" value="${args.answer}" width="landscape.320px,portrait.320px" tab-index="2" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/Group%2047094.png"></lido-image>
-		   	<lido-image id="dropEle" height="landscape.320px,portrait.320px" value="${args.answer}" width="landscape.320px,portrait.320px" tab-index="1" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/dropbox-%20matching%20card.png" type="drop"></lido-image>
-		</lido-cell>
-	<lido-cell id="dragEle" visible="true" layout="row" width="100%" height="40%" bg-color="transparent" margin="landscape.-580px 0px 50px 0px,portrait.-532px 0px 162px 0px" onEntry="this.animation='rightToPlace 2.5s linear';" onCorrect="this.animation='placeToLeft 2.5s linear';">
-	   	<lido-image id="drag1" height="landscape.320px,portrait.320px" width="landscape.273px,portrait.320px" tab-index="1" value="${args.option1}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/Group%2047093.png" type="drag"></lido-image>
-		<lido-image id="drag2" height="landscape.320px,portrait.320px" width="landscape.273px,portrait.320px" tab-index="2" value="${args.option2}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/Group%2047094.png" type="drag"></lido-image>
-		<lido-image id="drag3" height="landscape.320px,portrait.320px" width="landscape.273px,portrait.320px" tab-index="3" value="${args.option3}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/Group%2047095.png" type="drag"></lido-image>
-	</lido-cell>
+        <!-- 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.1px, portrait.20px" y="landscape.5px, portrait.318px" 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-container>
+        <lido-text id="trainAudio" visible="false" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/train1%20(1).m4a" onEntry="">
+        </lido-text>
+
+        <lido-text id="invisible-text" visible="false" value="match the correct card from the drag option to the given drop place" string="match the correct card from the drag option to the given drop place" onEntry="">
+        </lido-text>
+
+          <lido-image id="truck"  height="60%" width="landscape.100%,portrait.200%" visible="true"  bg-Color="transparent" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/train.svg" margin="landscape.14px 0px 0px 0px,portrait.452px 0px 0px 0px" onEntry="this.animation='rightToPlace 2.5s linear';" onCorrect="this.animation='placeToLeft 2.5s linear';">
+          </lido-image>
+
+          <lido-cell id="imgs" visible="true" x="landscape.-158px,portrait.0" y="landscape.-495px,portrait.-652px" layout="row" height="80%" width="landscape.35%,portrait.70%" bg-color="transparent" margin="landscape.-115px 0px 0px 345px,portrait.0px 0px 0px 95px" onEntry="this.position='relative';this.animation='rightToPlace 2.5s linear';" onCorrect="this.animation='placeToLeft 2.5s linear';">
+              <lido-image id="qn" height="landscape.320px,portrait.320px" value="${args.answer}" width="landscape.320px,portrait.320px" tab-index="2" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/Group%2047094.png"></lido-image>
+              <lido-image id="dropEle" height="landscape.320px,portrait.320px" value="${args.answer}" width="landscape.320px,portrait.320px" tab-index="1" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/dropbox-%20matching%20card.png" type="drop"></lido-image>
+          </lido-cell>
+
+        <lido-cell id="dragEle" delay-visible="2500" visible="true" layout="row" width="100%" height="40%" bg-color="transparent" margin="landscape.-580px 0px 50px 0px,portrait.-532px 0px 162px 0px" onEntry="this.animation='rightToPlace 2.5s linear';" onCorrect="this.animation='placeToLeft 2.5s linear';">
+          <lido-image id="drag1" height="landscape.320px,portrait.320px" width="landscape.273px,portrait.320px" tab-index="1" value="${args.option1}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/Group%2047093.png" type="drag"></lido-image>
+          <lido-image id="drag2" height="landscape.320px,portrait.320px" width="landscape.273px,portrait.320px" tab-index="2" value="${args.option2}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/Group%2047094.png" type="drag"></lido-image>
+          <lido-image id="drag3" height="landscape.320px,portrait.320px" width="landscape.273px,portrait.320px" tab-index="3" value="${args.option3}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/Group%2047095.png" type="drag"></lido-image>
+        </lido-cell>
+      </lido-container>
     </main>
   `;
 }

package/dist/collection/stories/Templates/numberIdentification/numberIdentificationimageTotext.stories.js

@@ -58,14 +58,14 @@ function getContainerXml(args) {
 		
 				<lido-cell layout="row" visible="true" margin="" onEntry="this.border-radius='24px';" height="228px" width="landscape.280px,portrait.300px" bg-color="orange"  type="click" value="${args.option1}">
 					
-					<lido-text id="text1" tab-index="3" disable-speak="true" visible="true"  string="${args.option1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="orange" 
+					<lido-text id="text1" tab-index="3" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/fill-upAudio.mp3" disable-speak="true" visible="true"  string="${args.option1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="orange" 
 					onEntry="this.fontWeight='700';">
 					</lido-text>
 				</lido-cell>
 
 				<lido-cell layout="row" visible="true" margin="" onEntry="this.border-radius='24px';" height="228px" width="landscape.280px,portrait.300px" bg-color="orange"  type="click" value="${args.option2}">
 					
-					<lido-text id="text2" tab-index="4" disable-speak="true" visible="true"  string="${args.option2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="orange" 
+					<lido-text id="text2" tab-index="4" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/fill-upAudio.mp3" disable-speak="true" visible="true"  string="${args.option2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="orange" 
 					onEntry="this.fontWeight='700';">
 					</lido-text>
 				</lido-cell>
@@ -73,14 +73,14 @@ function getContainerXml(args) {
 		
 				<lido-cell layout="row" visible="true" margin="" onEntry="this.border-radius='24px';" height="228px" width="landscape.280px,portrait.300px" bg-color="orange"  type="click" value="${args.option3}">
 					
-					<lido-text id="text3" tab-index="5" disable-speak="true" visible="true" string="${args.option3}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="orange" 
+					<lido-text id="text3" tab-index="5" disable-speak="true" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/fill-upAudio.mp3" visible="true" string="${args.option3}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.140px, portrait.100px"  bg-color="orange" 
 					onEntry="this.fontWeight='700';">
 					</lido-text>
 				</lido-cell>
 
 				<lido-cell layout="row" visible="true" margin="" onEntry="this.border-radius='24px';" height="228px" width="landscape.280px,portrait.300px" bg-color="orange"  type="click" value="${args.option4}">
 					
-					<lido-text id="text4" tab-index="6" disable-speak="true" visible="true" string="${args.option4}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.130px, portrait.100px"  bg-color="orange" 
+					<lido-text id="text4" tab-index="6" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/fill-upAudio.mp3" disable-speak="true" visible="true" string="${args.option4}" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.130px, portrait.100px"  bg-color="orange" 
 					onEntry="this.fontWeight='800';">
 					</lido-text>
 				</lido-cell>	

package/dist/collection/stories/Templates/substraction/substractionWithimg.stories.js

@@ -96,10 +96,10 @@ function getContainerXml(args) {
 						
 			</lido-cell>
 			<lido-cell layout="row" visible="true" width="84%" height="300px">
-				<lido-text visible="true" disable-speak="true" value="${args.option1}" type="click" id="option1" tab-index="8" bg-color="#FFAC4C" height="212.4px" width="280px" string="${args.option1}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
-				<lido-text visible="true" disable-speak="true" value="${args.option2}" type="click" id="option2" tab-index="9" bg-color="#FFAC4C" height="212.4px" width="280px" string="${args.option2}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
-				<lido-text visible="true" disable-speak="true" value="${args.option3}" type="click" id="option3" tab-index="10" bg-color="#FFAC4C" height="212.4px" width="280px" string="${args.option3}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
-				<lido-text visible="true" disable-speak="true" type="click" value="${args.option4}" id="option4" tab-index="11" bg-color="#FFAC4C" height="212.4px" width="280px" string="${args.option4}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/fill-upAudio.mp3" disable-speak="true" value="${args.option1}" type="click" id="option1" tab-index="8" bg-color="#FFAC4C" height="212.4px" width="280px" string="${args.option1}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/fill-upAudio.mp3" disable-speak="true" value="${args.option2}" type="click" id="option2" tab-index="9" bg-color="#FFAC4C" height="212.4px" width="280px" string="${args.option2}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/fill-upAudio.mp3" disable-speak="true" value="${args.option3}" type="click" id="option3" tab-index="10" bg-color="#FFAC4C" height="212.4px" width="280px" string="${args.option3}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/fill-upAudio.mp3" disable-speak="true" type="click" value="${args.option4}" id="option4" tab-index="11" bg-color="#FFAC4C" height="212.4px" width="280px" string="${args.option4}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
 				
 
 

package/dist/collection/stories/Templates/wordBuilding/wordBuildingwithimg.stories.js

@@ -38,7 +38,7 @@ export const wordBuildingwithimg = {
 function getContainerXml(args) {
     const { isAllowOnlyCorrect = true } = args;
     return `<main>
-   <lido-container disable-speak="true" visible="true" id="lido-container" template-id="mcq"  objective="${args.answer}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/WordBuilding/bgImage.png"  onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='1200';data.z-index='100'; data.boxShadow='0 0 40px #FFC107';this.sleep='300'; this.sleep='400'; data.boxShadow='none';this.sleep='2000';" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="blank.z-index='12';">
+   <lido-container lang="ka" disable-speak="true" visible="true" id="lido-container" template-id="wordBuildingWithImage"  objective="${args.answer}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/WordBuilding/bgImage.png"  onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='1200';data.z-index='100'; data.boxShadow='0 0 40px #FFC107';this.sleep='300'; this.sleep='400'; data.boxShadow='none';this.sleep='2000';" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="blank.z-index='12';">
 <!-- Chimple Avatar -->
 		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape. 373px,portrait.402px" width="landscape.304px,portrait.398px" x="landscape.0%, portrait.28%" y="landscape.51%, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" >
 			<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}">

package/dist/collection/stories/Templates/wordBuilding/wordBuildingwithoutimg.stories.js

@@ -37,7 +37,7 @@ export const wordBuildingwithoutimg = {
 function getContainerXml(args) {
     const { isAllowOnlyCorrect = true } = args;
     return `<main>
-   <lido-container disable-speak="true" visible="true" id="lido-container" template-id="mcq"  objective="${args.answer}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/WordBuilding/bgImage.png"  onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';data.speak='true';this.sleep='1200';data.z-index='100'; data.boxShadow='0 0 40px #FFC107';this.sleep='300'; this.sleep='400'; data.boxShadow='none';this.sleep='2000';" is-continue-on-correct="${isAllowOnlyCorrect}" is-allow-only-correct="true" onEntry="blank.z-index='12';">
+   <lido-container disable-speak="true" visible="true" id="lido-container" template-id="wordBuildingWithoutImage"  objective="${args.answer}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/WordBuilding/bgImage.png"  onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';data.speak='true';this.sleep='1200';data.z-index='100'; data.boxShadow='0 0 40px #FFC107';this.sleep='300'; this.sleep='400'; data.boxShadow='none';this.sleep='2000';" is-continue-on-correct="${isAllowOnlyCorrect}" is-allow-only-correct="true" onEntry="blank.z-index='12';">
 <!-- Chimple Avatar -->
 		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape. 373px,portrait.402px" width="landscape.304px,portrait.398px" x="landscape.0%, portrait.28%" y="landscape.51%, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" >
 			<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}">

package/dist/collection/utils/audioPlayer.js

@@ -3,6 +3,10 @@ import { highlightSpeakingElement, stopHighlightForSpeakingElement } from "./uti
 import { setDraggingDisabled } from "./utilsHandlers/dragDropHandler";
 import { NextContainerKey, PrevContainerKey, ActivityChangeKey, GameCompletedKey, GameExitKey, ActivityEndKey, LessonEndKey } from "./constants";
 export class AudioPlayer {
+    isSpeakDisabled(element) {
+        const text = element.closest('lido-text');
+        return (text === null || text === void 0 ? void 0 : text.getAttribute('disable-speak')) === 'true';
+    }
     constructor() {
         this.handleUserClick = () => {
             this.stop();