lido-player 0.0.2-alpha-82 → 0.0.2-alpha-84

package/dist/cjs/{decode-CwZGUwfu.js → decode-DcCOGYxt.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CzDTBZkw.js');
+var index = require('./index-BmGzuXUP.js');
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/cjs/{index-CzDTBZkw.js → index-BmGzuXUP.js}

@@ -980,7 +980,9 @@ async function onElementDropComplete(dragElement, dropElement) {
     // Add pulse and highlight effect for a successful match
     const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
     dispatchElementDropEvent(dragElement, dropElement, isCorrect);
-    storingEachActivityScore(isCorrect);
+    if (container.getAttribute("template-id") !== "blender") {
+        storingEachActivityScore(isCorrect);
+    }
     dragElement.style.opacity = '1';
     const allDropElements = document.querySelectorAll('.drop-element');
     allDropElements.forEach(el => updateDropBorder(el));
@@ -1289,6 +1291,9 @@ class AudioPlayer {
         this.activeWordIndex = -1;
         this.highlightRAF = null;
         this.handleUserClick = () => {
+            const container = document.getElementById(LidoContainer);
+            if ((container === null || container === void 0 ? void 0 : container.getAttribute('game-completed')) === 'true')
+                return;
             this.stop();
         };
         this.audioElement = document.createElement('audio');
@@ -3557,6 +3562,8 @@ function addClickListenerForClickType(element) {
     }
     const onClick = async () => {
         var _a;
+        if (container.getAttribute("game-completed") === "true")
+            return;
         const lido_buttons = element.getAttribute('id');
         if (lido_buttons === 'lido-arrow-left' || lido_buttons === 'lido-arrow-right') {
             return;
@@ -71687,7 +71694,7 @@ const checkEquationOfActiveCell = async (container) => {
 let score = 0;
 const handleSolvedEquationSubmissionAndScoreUpdate = async (container) => {
     var _a;
-    const resolvedContainer = container !== null && container !== void 0 ? container : document.getElementById("lido-container");
+    const resolvedContainer = document.getElementById("lido-container");
     if (!resolvedContainer)
         return;
     const calculatorValue = ((_a = resolvedContainer.querySelector("#lidoCalculator")) === null || _a === void 0 ? void 0 : _a.getAttribute("value")) ||
@@ -72195,7 +72202,7 @@ const executeActions = async (actionsString, thisElement, element) => {
                 }
                 case 'scrollCellAfterEquationSolved': {
                     if (targetElement) {
-                        handleSolvedEquationSubmissionAndScoreUpdate(targetElement);
+                        handleSolvedEquationSubmissionAndScoreUpdate();
                     }
                     break;
                 }
@@ -72822,7 +72829,7 @@ const validateObjectiveStatus = async () => {
             if (attach === 'true') {
                 appendingDragElementsInDrop();
             }
-            if (container.querySelectorAll("[type='click']").length > 0) {
+            if (container.querySelectorAll("[type='click']").length > 0 || container.getAttribute("template-id") === "blender") {
                 storingEachActivityScore(true);
             }
             await executeActions(onCorrect, container);
@@ -72840,7 +72847,7 @@ const validateObjectiveStatus = async () => {
     else {
         const isContinueOnCorrect = container.getAttribute('is-continue-on-correct') === 'true';
         const onCorrect = container.getAttribute('onCorrect');
-        if (container.querySelectorAll("[type='click']").length > 0) {
+        if (container.querySelectorAll("[type='click']").length > 0 || container.getAttribute("template-id") === "blender") {
             storingEachActivityScore(false);
         }
         if (!isContinueOnCorrect) {
@@ -73048,6 +73055,7 @@ const handlingElementFlexibleWidth = (element, type) => {
     });
 };
 const equationCheck = (additionalCheck) => {
+    console.log('🚀 ~ equationCheck ~ additionalCheck:', additionalCheck);
     if (!additionalCheck) {
         console.log('Input string is empty.');
         return undefined;
@@ -73057,9 +73065,12 @@ const equationCheck = (additionalCheck) => {
     // 2. Map through the parts, replacing those that start with '#'
     const modifiedParts = parts.map(part => {
         var _a;
+        console.log('🚀 ~ equationCheck ~ part:', part);
         if (part.startsWith('$')) {
             const cleanWord = part.substring(1);
+            console.log('🚀 ~ equationCheck ~ part starts with $:', cleanWord);
             const dragSelectedElements = getElementsForQueries(cleanWord);
+            console.log('🚀 ~ equationCheck ~ dragSelectedElements:', dragSelectedElements);
             const randomReplacement = isArray(dragSelectedElements)
                 ? dragSelectedElements === null || dragSelectedElements === void 0 ? void 0 : dragSelectedElements.map(val => val.getAttribute('value'))
                 : dragSelectedElements.getAttribute('value') || ((_a = document.getElementById(cleanWord)) === null || _a === void 0 ? void 0 : _a['value']);
@@ -73069,6 +73080,7 @@ const equationCheck = (additionalCheck) => {
             return part;
         }
     });
+    console.log('🚀 ~ equationCheck ~ modifiedParts:', modifiedParts);
     // 3. Join the modified parts back into one string
     const resultString = modifiedParts.join('');
     console.log('🚀 ~ equationCheck ~ resultString:', resultString);

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CzDTBZkw.js');
+var index = require('./index-BmGzuXUP.js');
 require('./index-7Dh-uOww.js');
 
 

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-7Dh-uOww.js');
-var index$1 = require('./index-CzDTBZkw.js');
+var index$1 = require('./index-BmGzuXUP.js');
 
 var rive$1 = {exports: {}};
 
@@ -3390,7 +3390,7 @@ function requireRive () {
 		/* 2 */
 		/***/ ((module) => {
 
-		module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/canvas","version":"2.35.1","description":"Rive\'s canvas based web api.","main":"rive.js","homepage":"https://rive.app","repository":{"type":"git","url":"https://github.com/rive-app/rive-wasm/tree/master/js"},"keywords":["rive","animation"],"author":"Rive","contributors":["Luigi Rosso <luigi@rive.app> (https://rive.app)","Maxwell Talbot <max@rive.app> (https://rive.app)","Arthur Vivian <arthur@rive.app> (https://rive.app)","Umberto Sonnino <umberto@rive.app> (https://rive.app)","Matthew Sullivan <matt.j.sullivan@gmail.com> (mailto:matt.j.sullivan@gmail.com)"],"license":"MIT","files":["rive.js","rive.js.map","rive.wasm","rive_fallback.wasm","rive.d.ts","rive_advanced.mjs.d.ts"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
+		module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/canvas","version":"2.35.2","description":"Rive\'s canvas based web api.","main":"rive.js","homepage":"https://rive.app","repository":{"type":"git","url":"https://github.com/rive-app/rive-wasm/tree/master/js"},"keywords":["rive","animation"],"author":"Rive","contributors":["Luigi Rosso <luigi@rive.app> (https://rive.app)","Maxwell Talbot <max@rive.app> (https://rive.app)","Arthur Vivian <arthur@rive.app> (https://rive.app)","Umberto Sonnino <umberto@rive.app> (https://rive.app)","Matthew Sullivan <matt.j.sullivan@gmail.com> (mailto:matt.j.sullivan@gmail.com)"],"license":"MIT","files":["rive.js","rive.js.map","rive.wasm","rive_fallback.wasm","rive.d.ts","rive_advanced.mjs.d.ts"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
 
 		/***/ }),
 		/* 3 */
@@ -8278,7 +8278,7 @@ const LidoAvatar = class {
             display: this.visible ? 'flex' : 'none',
             zIndex: this.z,
         };
-        return (index.h(index.Host, { key: '8a31ce98213ff51bf7cfc776690b6770bbeae604', id: this.id, type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("canvas", { key: '922568310a3be177e3185f86c54df95d16a0e42b', class: "lido-canvas" })));
+        return (index.h(index.Host, { key: 'e37ca80bf4fce30a13791a1b1dce283966903645', id: this.id, type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, src: this.src }, index.h("canvas", { key: '0b1ac45cfb89c5d88c0720e92664af71b143f274', class: "lido-canvas" })));
     }
     get el() { return index.getElement(this); }
 };
@@ -9556,7 +9556,16 @@ function keysFromSelector(selector, opts) {
   const {
     [PATH_KEY]: path
   } = selector(createProxy());
-  return path.join(opts?.keySeparator ?? '.');
+  const keySeparator = opts?.keySeparator ?? '.';
+  const nsSeparator = opts?.nsSeparator ?? ':';
+  if (path.length > 1 && nsSeparator) {
+    const ns = opts?.ns;
+    const namespaces = ns ? Array.isArray(ns) ? ns : [ns] : [];
+    if (namespaces.includes(path[0])) {
+      return `${path[0]}${nsSeparator}${path.slice(1).join(keySeparator)}`;
+    }
+  }
+  return path.join(keySeparator);
 }
 
 const checkedLoadedFor = {};
@@ -9630,6 +9639,10 @@ class Translator extends EventEmitter {
       ...opt
     });
     if (!Array.isArray(keys)) keys = [String(keys)];
+    keys = keys.map(k => typeof k === 'function' ? keysFromSelector(k, {
+      ...this.options,
+      ...opt
+    }) : String(k));
     const returnDetails = opt.returnDetails !== undefined ? opt.returnDetails : this.options.returnDetails;
     const keySeparator = opt.keySeparator !== undefined ? opt.keySeparator : this.options.keySeparator;
     const {
@@ -9876,6 +9889,10 @@ class Translator extends EventEmitter {
     let usedLng;
     let usedNS;
     if (isString(keys)) keys = [keys];
+    if (Array.isArray(keys)) keys = keys.map(k => typeof k === 'function' ? keysFromSelector(k, {
+      ...this.options,
+      ...opt
+    }) : k);
     keys.forEach(k => {
       if (this.isValidLookup(found)) return;
       const extracted = this.extractFromKey(k, opt);
@@ -10874,7 +10891,7 @@ class I18n extends EventEmitter {
       this.options.overloadTranslationOptionHandler = defOpts.overloadTranslationOptionHandler;
     }
     if (this.options.showSupportNotice !== false && !usesLocize(this) && !getSupportNoticeShown()) {
-      if (typeof console !== 'undefined' && typeof console.info !== 'undefined') console.info('🌐 i18next is maintained with support from Locize — consider powering your project with managed localization (AI, CDN, integrations): https://locize.com 💙');
+      if (typeof console !== 'undefined' && typeof console.info !== 'undefined') console.info('🌐 i18next is made possible by our own product, Locize — consider powering your project with managed localization (AI, CDN, integrations): https://locize.com 💙');
       setSupportNoticeShown();
     }
     const createClassOnDemand = ClassOrObject => {
@@ -12903,7 +12920,7 @@ const LidoHome = class {
         }
         // Pure-JS fallback (no wasm asset required)
         try {
-            const brotliDecodeModule = await Promise.resolve().then(function () { return require('./decode-CwZGUwfu.js'); }).then(function (n) { return n.decode; });
+            const brotliDecodeModule = await Promise.resolve().then(function () { return require('./decode-DcCOGYxt.js'); }).then(function (n) { return n.decode; });
             const brotliDecompressBuffer = brotliDecodeModule.BrotliDecompressBuffer ||
                 ((_a = brotliDecodeModule.default) === null || _a === void 0 ? void 0 : _a.BrotliDecompressBuffer);
             if (typeof brotliDecompressBuffer !== 'function') {
@@ -13152,9 +13169,12 @@ const LidoHome = class {
     }
     async btnpopup() {
         var _a, _b;
+        const container = document.getElementById(index$1.LidoContainer);
+        console.log("game completed !");
+        if (!container || container.getAttribute("game-completed") === "true")
+            return;
         index$1.setCancelBtnPopup(false);
         await index$1.AudioPlayer.getI().stop();
-        const container = document.getElementById(index$1.LidoContainer);
         const allele = container.querySelectorAll('*');
         const templateId = container.getAttribute(index$1.TemplateID);
         if (templateId) {
@@ -16405,39 +16425,37 @@ const LidoKeyboard = class {
     async inputValidation(e) {
         if (this.type !== 'click')
             return;
-        let isOverlapping = false;
         const container = document.getElementById(index$1.LidoContainer);
         const clickedValue = e.target.getAttribute('value');
         if (!clickedValue)
             return;
         let selectedValue = JSON.parse(localStorage.getItem(index$1.SelectedValuesKey)) || '';
         localStorage.setItem(index$1.SelectedValuesKey, JSON.stringify(selectedValue));
+        const bodyRect = document.body.getBoundingClientRect();
         // Get all word bubbles (make sure bubbles have class "bubble-element")
         const bubbles = Array.from(container.querySelectorAll('.bubble-element'));
+        const overlapingBubbles = bubbles.filter(bubble => {
+            const elemRect = bubble.getBoundingClientRect();
+            return elemRect.left < bodyRect.right && elemRect.right > bodyRect.left && elemRect.top < bodyRect.bottom && elemRect.bottom > bodyRect.top;
+        });
         // Find a bubble whose word starts with current progress + clicked letter
-        const matchedBubble = bubbles.find(bubble => {
+        const matchedBubble = overlapingBubbles.find(bubble => {
             const word = bubble.getAttribute('value'); // full word like "one"
             const hasElement = word === null || word === void 0 ? void 0 : word.startsWith(this.inputString.toLowerCase());
             return hasElement ? bubble : null;
         });
-        const bodyRect = document.body.getBoundingClientRect();
         if (matchedBubble) {
-            const elemRect = matchedBubble.getBoundingClientRect();
-            // Ciheck if the matched bubble is overlapping with the target area (you can define the target area as needed, here we use the entire viewport)
-            isOverlapping = matchedBubble && elemRect.left < bodyRect.right && elemRect.right > bodyRect.left && elemRect.top < bodyRect.bottom && elemRect.bottom > bodyRect.top;
-        }
-        if (matchedBubble && isOverlapping) {
             // If full word completed
             if (this.inputString.toLowerCase() === matchedBubble.getAttribute('value').toLowerCase()) {
                 index$1.storingEachActivityScore(true);
                 index$1.AudioPlayer.getI().play(matchedBubble);
                 index$1.stopHighlightForSpeakingElement(matchedBubble);
+                setTimeout(() => { this.inputString = ''; }, 1000);
                 const elementOnCorrect = matchedBubble.getAttribute('onCorrect');
                 await index$1.executeActions(elementOnCorrect, matchedBubble);
                 matchedBubble.style.animation = 'none';
                 matchedBubble.style.pointerEvents = 'none';
                 this.numberOfClick++;
-                setTimeout(() => { this.inputString = ''; }, 1000);
                 localStorage.removeItem(index$1.SelectedValuesKey);
                 if (this.numberOfClick === this.letterLength) {
                     index$1.calculateScore();
@@ -16508,10 +16526,10 @@ const LidoKeyboard = class {
         const keysArray = this.keys.split(',').map(k => k.trim());
         const container = document.getElementById(index$1.LidoContainer);
         const showCheck = container.getAttribute('show-check') === 'true';
-        return (index.h(index.Host, { key: 'db30eeabd3f70dd7753d8c16078cf8bf9af54a8b', class: "lido-keyboard", style: { width: this.style.width, height: this.style.height, position: 'relative', margin: this.style.margin, zIndex: this.z } }, this.keyboardInput && (index.h("div", { key: 'b3a0ca9bc3192c483f6eab60c8f367c4f2897c76', class: "input-area" }, index.h("input", { key: 'b37ef07e190b40624d0f06f38956c45e24be8070', type: "text", value: this.inputString, class: "input-area", readonly: true }), index.h("lido-text", { key: '183d046c44ac1136ee15060feeaaeb8a16eabbdd', visible: showCheck ? 'true' : 'false', string: "<<", "bg-color": "black", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "100px", height: "70px", type: "click", onClick: () => {
+        return (index.h(index.Host, { key: 'ee4b2c3c87f9b38cf024f6f47d40e73dedf64ec1', class: "lido-keyboard", style: { width: this.style.width, height: this.style.height, position: 'relative', margin: this.style.margin, zIndex: this.z } }, this.keyboardInput && (index.h("div", { key: '379cf5601a978a5e52e6245a9484261d852a3bbc', class: "input-area" }, index.h("input", { key: 'de44c37dcdefef362705a1c6a43e909f7c19490d', type: "text", value: this.inputString, class: "input-area", readonly: true }), index.h("lido-text", { key: '79d716f37f67f6162e9fca097d0082986c773f7c', visible: showCheck ? 'true' : 'false', string: "<<", "bg-color": "black", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "100px", height: "70px", type: "click", onClick: () => {
                 this.inputString = this.inputString.slice(0, -1);
                 this.inputValidation(event);
-            } }), index.h("lido-text", { key: 'd394b9dfad91c63988117056abf3c791ac81a34f', visible: showCheck ? 'true' : 'false', id: "lido-checkButton", string: "Enter", "bg-color": "green", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "150px", height: "70px", type: "click" }))), this.letterLength && (index.h("lido-text", { key: 'c69cce204d7436094d4d1b0872a0755113a38266', visible: "true", string: `${this.numberOfClick}/${this.letterLength}`, "font-size": "60px", "font-color": "white", onEntry: "this.position='absolute'; this.right='0'; this.fontWeight='800';", x: "unset" })), index.h("div", { key: 'd7360b8f805b56962c9e615ac4a50fa2fc46b958', class: "keyboard-wrapper", style: {
+            } }), index.h("lido-text", { key: '3252cf615eb880e5b046098fe7d5307a6609b45f', visible: showCheck ? 'true' : 'false', id: "lido-checkButton", string: "Enter", "bg-color": "green", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "150px", height: "70px", type: "click" }))), this.letterLength && (index.h("lido-text", { key: '9159f3cad979873485da0fc04acdbd37d61bb1c8', visible: "true", string: `${this.numberOfClick}/${this.letterLength}`, "font-size": "60px", "font-color": "white", onEntry: "this.position='absolute'; this.right='0'; this.fontWeight='800';", x: "unset" })), index.h("div", { key: '91c190d8a0c93250825640ba5b754f1d8b9b0adb', class: "keyboard-wrapper", style: {
                 display: 'flex',
                 flexWrap: 'wrap',
                 justifyContent: 'center',
@@ -18560,6 +18578,9 @@ const LidoTrace = class {
             await this.playTraceAnimation();
         }
         index$1.storingEachActivityScore(true);
+        if (this.el && this.onCorrect) {
+            await index$1.executeActions(this.onCorrect, this.el);
+        }
         console.log(`Moving to next container after SVG index: ${this.currentSvgIndex}`);
         const delay = 1000; // milliseconds
         if (this.currentSvgIndex < this.svgUrls.length - 1) {
@@ -18571,11 +18592,6 @@ const LidoTrace = class {
             this.moving = false;
             return;
         }
-        console.log('onCorrect:', this.onCorrect);
-        console.log('el :', this.el);
-        if (this.el && this.onCorrect) {
-            await index$1.executeActions(this.onCorrect, this.el);
-        }
         index$1.calculateScore();
         console.log('All SVGs completed, hiding component.');
         index$1.triggerNextContainer();
@@ -18788,7 +18804,7 @@ const LidoTrace = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'b3efc3effa7fbfdb85af80103e2c04689bdd4ef7', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, index.h("div", { key: 'b5a5ac42a3417441940de75cd4e2dfdbe1dc7c47', style: this.style, id: "lido-svgContainer" })));
+        return (index.h(index.Host, { key: '253a2c8840d47f1758eb2e025de799921ba7e972', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, index.h("div", { key: '182018457f29150918f52ef92bc0fc4fc70bb463', style: this.style, id: "lido-svgContainer" })));
     }
     static get assetsDirs() { return ["svg", "images"]; }
     get el() { return index.getElement(this); }

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

@@ -138,7 +138,7 @@ export class LidoAvatar {
             display: this.visible ? 'flex' : 'none',
             zIndex: this.z,
         };
-        return (h(Host, { key: '8a31ce98213ff51bf7cfc776690b6770bbeae604', id: this.id, type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("canvas", { key: '922568310a3be177e3185f86c54df95d16a0e42b', class: "lido-canvas" })));
+        return (h(Host, { key: 'e37ca80bf4fce30a13791a1b1dce283966903645', id: this.id, type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, src: this.src }, h("canvas", { key: '0b1ac45cfb89c5d88c0720e92664af71b143f274', class: "lido-canvas" })));
     }
     static get is() { return "lido-avatar"; }
     static get originalStyleUrls() {

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

@@ -520,9 +520,12 @@ export class LidoHome {
     }
     async btnpopup() {
         var _a, _b;
+        const container = document.getElementById(LidoContainer);
+        console.log("game completed !");
+        if (!container || container.getAttribute("game-completed") === "true")
+            return;
         setCancelBtnPopup(false);
         await AudioPlayer.getI().stop();
-        const container = document.getElementById(LidoContainer);
         const allele = container.querySelectorAll('*');
         const templateId = container.getAttribute(TemplateID);
         if (templateId) {

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

@@ -36,39 +36,37 @@ export class LidoKeyboard {
     async inputValidation(e) {
         if (this.type !== 'click')
             return;
-        let isOverlapping = false;
         const container = document.getElementById(LidoContainer);
         const clickedValue = e.target.getAttribute('value');
         if (!clickedValue)
             return;
         let selectedValue = JSON.parse(localStorage.getItem(SelectedValuesKey)) || '';
         localStorage.setItem(SelectedValuesKey, JSON.stringify(selectedValue));
+        const bodyRect = document.body.getBoundingClientRect();
         // Get all word bubbles (make sure bubbles have class "bubble-element")
         const bubbles = Array.from(container.querySelectorAll('.bubble-element'));
+        const overlapingBubbles = bubbles.filter(bubble => {
+            const elemRect = bubble.getBoundingClientRect();
+            return elemRect.left < bodyRect.right && elemRect.right > bodyRect.left && elemRect.top < bodyRect.bottom && elemRect.bottom > bodyRect.top;
+        });
         // Find a bubble whose word starts with current progress + clicked letter
-        const matchedBubble = bubbles.find(bubble => {
+        const matchedBubble = overlapingBubbles.find(bubble => {
             const word = bubble.getAttribute('value'); // full word like "one"
             const hasElement = word === null || word === void 0 ? void 0 : word.startsWith(this.inputString.toLowerCase());
             return hasElement ? bubble : null;
         });
-        const bodyRect = document.body.getBoundingClientRect();
         if (matchedBubble) {
-            const elemRect = matchedBubble.getBoundingClientRect();
-            // Ciheck if the matched bubble is overlapping with the target area (you can define the target area as needed, here we use the entire viewport)
-            isOverlapping = matchedBubble && elemRect.left < bodyRect.right && elemRect.right > bodyRect.left && elemRect.top < bodyRect.bottom && elemRect.bottom > bodyRect.top;
-        }
-        if (matchedBubble && isOverlapping) {
             // If full word completed
             if (this.inputString.toLowerCase() === matchedBubble.getAttribute('value').toLowerCase()) {
                 storingEachActivityScore(true);
                 AudioPlayer.getI().play(matchedBubble);
                 stopHighlightForSpeakingElement(matchedBubble);
+                setTimeout(() => { this.inputString = ''; }, 1000);
                 const elementOnCorrect = matchedBubble.getAttribute('onCorrect');
                 await executeActions(elementOnCorrect, matchedBubble);
                 matchedBubble.style.animation = 'none';
                 matchedBubble.style.pointerEvents = 'none';
                 this.numberOfClick++;
-                setTimeout(() => { this.inputString = ''; }, 1000);
                 localStorage.removeItem(SelectedValuesKey);
                 if (this.numberOfClick === this.letterLength) {
                     calculateScore();
@@ -139,10 +137,10 @@ export class LidoKeyboard {
         const keysArray = this.keys.split(',').map(k => k.trim());
         const container = document.getElementById(LidoContainer);
         const showCheck = container.getAttribute('show-check') === 'true';
-        return (h(Host, { key: 'db30eeabd3f70dd7753d8c16078cf8bf9af54a8b', class: "lido-keyboard", style: { width: this.style.width, height: this.style.height, position: 'relative', margin: this.style.margin, zIndex: this.z } }, this.keyboardInput && (h("div", { key: 'b3a0ca9bc3192c483f6eab60c8f367c4f2897c76', class: "input-area" }, h("input", { key: 'b37ef07e190b40624d0f06f38956c45e24be8070', type: "text", value: this.inputString, class: "input-area", readonly: true }), h("lido-text", { key: '183d046c44ac1136ee15060feeaaeb8a16eabbdd', visible: showCheck ? 'true' : 'false', string: "<<", "bg-color": "black", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "100px", height: "70px", type: "click", onClick: () => {
+        return (h(Host, { key: 'ee4b2c3c87f9b38cf024f6f47d40e73dedf64ec1', class: "lido-keyboard", style: { width: this.style.width, height: this.style.height, position: 'relative', margin: this.style.margin, zIndex: this.z } }, this.keyboardInput && (h("div", { key: '379cf5601a978a5e52e6245a9484261d852a3bbc', class: "input-area" }, h("input", { key: 'de44c37dcdefef362705a1c6a43e909f7c19490d', type: "text", value: this.inputString, class: "input-area", readonly: true }), h("lido-text", { key: '79d716f37f67f6162e9fca097d0082986c773f7c', visible: showCheck ? 'true' : 'false', string: "<<", "bg-color": "black", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "100px", height: "70px", type: "click", onClick: () => {
                 this.inputString = this.inputString.slice(0, -1);
                 this.inputValidation(event);
-            } }), h("lido-text", { key: 'd394b9dfad91c63988117056abf3c791ac81a34f', visible: showCheck ? 'true' : 'false', id: "lido-checkButton", string: "Enter", "bg-color": "green", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "150px", height: "70px", type: "click" }))), this.letterLength && (h("lido-text", { key: 'c69cce204d7436094d4d1b0872a0755113a38266', visible: "true", string: `${this.numberOfClick}/${this.letterLength}`, "font-size": "60px", "font-color": "white", onEntry: "this.position='absolute'; this.right='0'; this.fontWeight='800';", x: "unset" })), h("div", { key: 'd7360b8f805b56962c9e615ac4a50fa2fc46b958', class: "keyboard-wrapper", style: {
+            } }), h("lido-text", { key: '3252cf615eb880e5b046098fe7d5307a6609b45f', visible: showCheck ? 'true' : 'false', id: "lido-checkButton", string: "Enter", "bg-color": "green", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "150px", height: "70px", type: "click" }))), this.letterLength && (h("lido-text", { key: '9159f3cad979873485da0fc04acdbd37d61bb1c8', visible: "true", string: `${this.numberOfClick}/${this.letterLength}`, "font-size": "60px", "font-color": "white", onEntry: "this.position='absolute'; this.right='0'; this.fontWeight='800';", x: "unset" })), h("div", { key: '91c190d8a0c93250825640ba5b754f1d8b9b0adb', class: "keyboard-wrapper", style: {
                 display: 'flex',
                 flexWrap: 'wrap',
                 justifyContent: 'center',

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

@@ -702,6 +702,9 @@ export class LidoTrace {
             await this.playTraceAnimation();
         }
         storingEachActivityScore(true);
+        if (this.el && this.onCorrect) {
+            await executeActions(this.onCorrect, this.el);
+        }
         console.log(`Moving to next container after SVG index: ${this.currentSvgIndex}`);
         const delay = 1000; // milliseconds
         if (this.currentSvgIndex < this.svgUrls.length - 1) {
@@ -713,11 +716,6 @@ export class LidoTrace {
             this.moving = false;
             return;
         }
-        console.log('onCorrect:', this.onCorrect);
-        console.log('el :', this.el);
-        if (this.el && this.onCorrect) {
-            await executeActions(this.onCorrect, this.el);
-        }
         calculateScore();
         console.log('All SVGs completed, hiding component.');
         triggerNextContainer();
@@ -930,7 +928,7 @@ export class LidoTrace {
         };
     }
     render() {
-        return (h(Host, { key: 'b3efc3effa7fbfdb85af80103e2c04689bdd4ef7', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: 'b5a5ac42a3417441940de75cd4e2dfdbe1dc7c47', style: this.style, id: "lido-svgContainer" })));
+        return (h(Host, { key: '253a2c8840d47f1758eb2e025de799921ba7e972', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: '182018457f29150918f52ef92bc0fc4fc70bb463', style: this.style, id: "lido-svgContainer" })));
     }
     static get is() { return "lido-trace"; }
     static get originalStyleUrls() {

package/dist/collection/utils/audioPlayer.js

@@ -10,6 +10,9 @@ export class AudioPlayer {
         this.activeWordIndex = -1;
         this.highlightRAF = null;
         this.handleUserClick = () => {
+            const container = document.getElementById(LidoContainer);
+            if ((container === null || container === void 0 ? void 0 : container.getAttribute('game-completed')) === 'true')
+                return;
             this.stop();
         };
         this.audioElement = document.createElement('audio');

package/dist/collection/utils/utils.js

@@ -125,7 +125,7 @@ export const executeActions = async (actionsString, thisElement, element) => {
                 }
                 case 'scrollCellAfterEquationSolved': {
                     if (targetElement) {
-                        handleSolvedEquationSubmissionAndScoreUpdate(targetElement);
+                        handleSolvedEquationSubmissionAndScoreUpdate();
                     }
                     break;
                 }
@@ -753,7 +753,7 @@ export const validateObjectiveStatus = async () => {
             if (attach === 'true') {
                 appendingDragElementsInDrop();
             }
-            if (container.querySelectorAll("[type='click']").length > 0) {
+            if (container.querySelectorAll("[type='click']").length > 0 || container.getAttribute("template-id") === "blender") {
                 storingEachActivityScore(true);
             }
             await executeActions(onCorrect, container);
@@ -771,7 +771,7 @@ export const validateObjectiveStatus = async () => {
     else {
         const isContinueOnCorrect = container.getAttribute('is-continue-on-correct') === 'true';
         const onCorrect = container.getAttribute('onCorrect');
-        if (container.querySelectorAll("[type='click']").length > 0) {
+        if (container.querySelectorAll("[type='click']").length > 0 || container.getAttribute("template-id") === "blender") {
             storingEachActivityScore(false);
         }
         if (!isContinueOnCorrect) {
@@ -979,6 +979,7 @@ export const handlingElementFlexibleWidth = (element, type) => {
     });
 };
 export const equationCheck = (additionalCheck) => {
+    console.log('🚀 ~ equationCheck ~ additionalCheck:', additionalCheck);
     if (!additionalCheck) {
         console.log('Input string is empty.');
         return undefined;
@@ -988,9 +989,12 @@ export const equationCheck = (additionalCheck) => {
     // 2. Map through the parts, replacing those that start with '#'
     const modifiedParts = parts.map(part => {
         var _a;
+        console.log('🚀 ~ equationCheck ~ part:', part);
         if (part.startsWith('$')) {
             const cleanWord = part.substring(1);
+            console.log('🚀 ~ equationCheck ~ part starts with $:', cleanWord);
             const dragSelectedElements = getElementsForQueries(cleanWord);
+            console.log('🚀 ~ equationCheck ~ dragSelectedElements:', dragSelectedElements);
             const randomReplacement = isArray(dragSelectedElements)
                 ? dragSelectedElements === null || dragSelectedElements === void 0 ? void 0 : dragSelectedElements.map(val => val.getAttribute('value'))
                 : dragSelectedElements.getAttribute('value') || ((_a = document.getElementById(cleanWord)) === null || _a === void 0 ? void 0 : _a['value']);
@@ -1000,6 +1004,7 @@ export const equationCheck = (additionalCheck) => {
             return part;
         }
     });
+    console.log('🚀 ~ equationCheck ~ modifiedParts:', modifiedParts);
     // 3. Join the modified parts back into one string
     const resultString = modifiedParts.join('');
     console.log('🚀 ~ equationCheck ~ resultString:', resultString);

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

@@ -67,6 +67,8 @@ export function addClickListenerForClickType(element) {
     }
     const onClick = async () => {
         var _a;
+        if (container.getAttribute("game-completed") === "true")
+            return;
         const lido_buttons = element.getAttribute('id');
         if (lido_buttons === 'lido-arrow-left' || lido_buttons === 'lido-arrow-right') {
             return;

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

@@ -714,7 +714,9 @@ export async function onElementDropComplete(dragElement, dropElement) {
     // Add pulse and highlight effect for a successful match
     const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
     dispatchElementDropEvent(dragElement, dropElement, isCorrect);
-    storingEachActivityScore(isCorrect);
+    if (container.getAttribute("template-id") !== "blender") {
+        storingEachActivityScore(isCorrect);
+    }
     dragElement.style.opacity = '1';
     const allDropElements = document.querySelectorAll('.drop-element');
     allDropElements.forEach(el => updateDropBorder(el));