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

package/dist/cjs/{utils-03573882.js → utils-9cf49b55.js}

@@ -55,6 +55,60 @@ const nextUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/publ
 const speakUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/audio.png';
 const fingerUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Tracing-hand.svg';
 
+class Timer {
+    constructor() {
+        this.startTime = 0;
+        this.elapsedTime = 0;
+        this.intervalId = null;
+    }
+    static getI(onTick) {
+        if (!Timer.instance) {
+            Timer.instance = new Timer();
+        }
+        if (onTick) {
+            Timer.instance.onTick = onTick;
+        }
+        return Timer.instance;
+    }
+    start() {
+        if (this.intervalId)
+            return;
+        this.startTime = Date.now() - this.elapsedTime;
+        this.intervalId = window.setInterval(() => {
+            var _a;
+            this.elapsedTime = Date.now() - this.startTime;
+            (_a = this.onTick) === null || _a === void 0 ? void 0 : _a.call(this, this.elapsedTime);
+        }, 1000);
+    }
+    pause() {
+        if (!this.intervalId)
+            return;
+        clearInterval(this.intervalId);
+        this.intervalId = null;
+        this.elapsedTime = Date.now() - this.startTime;
+    }
+    resume() {
+        if (this.intervalId)
+            return;
+        this.start();
+    }
+    stop() {
+        var _a;
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+            this.intervalId = null;
+        }
+        this.startTime = 0;
+        this.elapsedTime = 0;
+        (_a = this.onTick) === null || _a === void 0 ? void 0 : _a.call(this, 0);
+    }
+    getElapsed() {
+        return this.intervalId
+            ? Date.now() - this.startTime
+            : this.elapsedTime;
+    }
+}
+
 function dispatchCustomEvent(eventName, detail) {
     console.log("👍Event Name : ", eventName, "Detail : ", detail.toString());
     const event = new CustomEvent(eventName, { detail });
@@ -64,7 +118,7 @@ function dispatchActivityEndEvent(index, totalIndex, score) {
     dispatchCustomEvent(ActivityEndKey, { index, totalIndex, score });
 }
 function dispatchLessonEndEvent(score) {
-    dispatchCustomEvent(LessonEndKey, { score });
+    dispatchCustomEvent(LessonEndKey, { score, timeSpent: Math.floor(Timer.getI().getElapsed() / 1000) });
 }
 function dispatchNextContainerEvent() {
     dispatchCustomEvent(NextContainerKey, {});
@@ -120,7 +174,7 @@ function updateBalanceOnDrop(dragElement, dropElement) {
 }
 function calculateValue(elements, operation) {
     if (elements.length === 0)
-        return 0;
+        return null;
     if (operation === "count") {
         return elements.length;
     }
@@ -152,18 +206,15 @@ function calculateValue(elements, operation) {
     }
 }
 function balanceResult(container, objectiveString) {
-    var _a, _b, _c, _d, _e, _f;
     const additionalCheck = container.getAttribute('equationCheck');
     if (!additionalCheck)
         return false;
     const balanceEl = document.querySelector('lido-balance');
     if (!balanceEl)
         return false;
-    const leftVal = Number((_c = (_a = balanceEl.leftVal) !== null && _a !== void 0 ? _a : (_b = balanceEl.dataset) === null || _b === void 0 ? void 0 : _b.leftVal) !== null && _c !== void 0 ? _c : 0);
-    const rightVal = Number((_f = (_d = balanceEl.rightVal) !== null && _d !== void 0 ? _d : (_e = balanceEl.dataset) === null || _e === void 0 ? void 0 : _e.rightVal) !== null && _f !== void 0 ? _f : 0);
-    const hasLeft = !isNaN(leftVal);
-    const hasRight = !isNaN(rightVal);
-    if (!hasLeft || !hasRight) {
+    const leftVal = balanceEl.leftVal;
+    const rightVal = balanceEl.rightVal;
+    if (leftVal == null || rightVal == null) {
         return false;
     }
     const symbol = leftVal > rightVal ? '>' : leftVal < rightVal ? '<' : '=';
@@ -291,6 +342,7 @@ function enableDraggingWithScaling(element) {
     handlingElementFlexibleWidth(element, 'drag');
     const onStart = (event) => {
         var _a, _b;
+        console.log("moving start");
         if (isDraggingDisabled) {
             isDragging = false;
             return;
@@ -434,22 +486,24 @@ function enableDraggingWithScaling(element) {
             const storedTabIndexes = Object.keys(dropObject).map(Number);
             if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
                 if (!(((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
-                    if (otherElement.tagName.toLowerCase() === 'lido-text') ;
-                    if (otherElement.tagName.toLowerCase() === 'lido-image') {
-                        otherElement.style.opacity = '0';
+                    if (otherElement) {
+                        otherElement.style.opacity = "0.3";
                     }
                 }
             }
             else {
-                if (otherElement.tagName.toLowerCase() === 'lido-text') ;
-                if (otherElement.tagName.toLowerCase() === 'lido-image' || 'lido-cell') {
-                    otherElement.style.opacity = '1';
+                if (otherElement) {
+                    otherElement.style.opacity = "1";
                 }
             }
         });
         // Apply styles only to the most overlapped element
         if (mostOverlappedElement) {
-            if (mostOverlappedElement.tagName.toLowerCase() === 'lido-text') ;
+            if (mostOverlappedElement.tagName.toLowerCase() === 'lido-text') {
+                // mostOverlappedElement.style.border = '2px dashed #ff0000'; // Red dashed border
+                // mostOverlappedElement.style.backgroundColor = 'rgba(255, 0, 0, 0.1)'; // Light red background
+                mostOverlappedElement.style.opacity = "0.3";
+            }
             else {
                 if (!document.getElementById('unitsDrop') || !document.getElementById('tensDrop') || !document.getElementById('hundredsDrop')) {
                     mostOverlappedElement.style.opacity = '0.3';
@@ -485,9 +539,8 @@ function enableDraggingWithScaling(element) {
                 const storedTabIndexes = Object.keys(dropObject).map(Number);
                 if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
                     if (!(((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
-                        if (otherElement.tagName.toLowerCase() === 'lido-text') ;
-                        else if (otherElement.tagName.toLowerCase() === 'lido-image') {
-                            otherElement.style.opacity = '0';
+                        if (otherElement) {
+                            otherElement.style.opacity = "0";
                         }
                         else {
                             otherElement.style.opacity = '1';
@@ -495,9 +548,8 @@ function enableDraggingWithScaling(element) {
                     }
                 }
                 else {
-                    if (otherElement.tagName.toLowerCase() === 'lido-text') ;
-                    if (otherElement.tagName.toLowerCase() === 'lido-image' || 'lido-cell') {
-                        otherElement.style.opacity = '1';
+                    if (otherElement) {
+                        otherElement.style.opacity = "1";
                     }
                 }
             });
@@ -548,6 +600,7 @@ function enableDraggingWithScaling(element) {
     element.addEventListener('touchstart', onStart);
     element.addEventListener('click', ev => {
         if (isClicked) {
+            console.log("clicked drag elkement");
             onClickDropOrDragElement(element, 'drag');
         }
     });
@@ -675,18 +728,14 @@ function handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedV
         const storedTabIndexes = Object.keys(dropObject).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 (otherElement.tagName.toLowerCase() === 'lido-text') ;
-                if (otherElement.tagName.toLowerCase() === 'lido-image') {
-                    otherElement.style.opacity = '0';
-                    otherElement.style.backgroundColor = 'transparent';
+                if (otherElement.tagName.toLowerCase() === 'lido-text') {
+                    otherElement.style.opacity = "0";
                 }
             }
         }
         else {
-            if (otherElement.tagName.toLowerCase() === 'lido-text') ;
-            if (otherElement.tagName.toLowerCase() === 'lido-image') {
-                otherElement.style.opacity = '1';
-                otherElement.style.backgroundColor = 'transparent';
+            if (otherElement) {
+                otherElement.style.opacity = "1";
             }
         }
     });
@@ -700,16 +749,18 @@ 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);
     }
-    const dropTabIndex = dropElement.getAttribute('tab-index');
-    const isAllowOnlyOneDrop = dropElement.getAttribute('is-allow-only-one-drop') === 'false';
-    if (((_b = dropHasDrag[dropTabIndex]) === null || _b === void 0 ? void 0 : _b.isFull) && !isAllowOnlyOneDrop) {
-        handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
-        return;
+    let dropTabIndex;
+    if (dropElement) {
+        dropTabIndex = dropElement.getAttribute('tab-index');
+        const isAllowOnlyOneDrop = dropElement.getAttribute('is-allow-only-one-drop') === 'false';
+        if (((_b = dropHasDrag[dropTabIndex]) === null || _b === void 0 ? void 0 : _b.isFull) && !isAllowOnlyOneDrop) {
+            handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
+            return;
+        }
     }
     const isAllowOnlyCorrect = container.getAttribute('is-allow-only-correct') === 'true';
     if (isAllowOnlyCorrect) {
@@ -742,7 +793,6 @@ async function onElementDropComplete(dragElement, dropElement) {
             dragElement.style.transition = 'transform 0.5s ease';
             animateDragToTarget(dragElement, dropElement, container);
             const onInCorrect = dropElement.getAttribute('onInCorrect');
-            console.log("onincorrectttt", onInCorrect);
             await executeActions(onInCorrect, dropElement, dragElement);
             setTimeout(() => {
                 dragElement.style.transform = 'translate(0, 0)';
@@ -849,15 +899,13 @@ async function onElementDropComplete(dragElement, dropElement) {
                         const storedTabIndexes = Object.keys(dropObject).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 (otherElement.tagName.toLowerCase() === 'lido-text') ;
-                                if (otherElement.tagName.toLowerCase() === 'lido-image') {
+                                if (otherElement) {
                                     otherElement.style.opacity = '0';
                                 }
                             }
                         }
                         else {
-                            if (otherElement.tagName.toLowerCase() === 'lido-text') ;
-                            if (otherElement.tagName.toLowerCase() === 'lido-image' || 'lido-cell') {
+                            if (otherElement) {
                                 otherElement.style.opacity = '1';
                             }
                         }
@@ -933,6 +981,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')) {
@@ -982,8 +1031,9 @@ async function onClickDropOrDragElement(element, type) {
     element.ariaPressed = 'true';
     const selectedDropElement = type === 'drop' ? element : document.querySelector("[type='drop'].highlight-element");
     const selectedDragElement = type === 'drag' ? element : document.querySelector("[type='drag'].highlight-element");
-    if (!selectedDropElement) {
+    if (!selectedDropElement || element.classList.contains("dropped")) {
         onClickDragElement(element);
+        return;
     }
     if (selectedDropElement && selectedDragElement) {
         if (selectedDragElement.getAttribute('drop-to'))
@@ -1164,7 +1214,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 +1231,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 => {
@@ -1196,6 +1246,9 @@ function highlightElement() {
 
 class AudioPlayer {
     constructor() {
+        this.handleUserClick = () => {
+            this.stop();
+        };
         this.audioElement = document.createElement('audio');
         this.audioElement.id = 'audio';
         document.body.appendChild(this.audioElement);
@@ -1232,6 +1285,10 @@ class AudioPlayer {
         catch (e) {
             console.error('Error stopping audio before speak action:', e);
         }
+        const text = targetElement.closest('lido-text');
+        if (text && text.getAttribute('disable-speak') === 'true') {
+            return;
+        }
         // then play the target element audio.
         let audioUrl = targetElement.getAttribute('audio') || '';
         // If no direct audio attribute, check childrens for audio
@@ -1252,6 +1309,7 @@ class AudioPlayer {
             try {
                 setDraggingDisabled(true);
                 highlightSpeakingElement(targetElement);
+                window.addEventListener('click', this.handleUserClick, true);
                 await this.audioElement.play();
                 await new Promise(resolve => {
                     this.audioElement.onended = () => {
@@ -1263,6 +1321,7 @@ class AudioPlayer {
                 console.log('🎧 Audio play error:', error);
             }
             finally {
+                window.removeEventListener('click', this.handleUserClick, true);
                 this.audioElement.onended = null; // cleanup
                 setDraggingDisabled(false);
                 stopHighlightForSpeakingElement(targetElement);
@@ -1272,6 +1331,7 @@ class AudioPlayer {
         else if (targetElement.textContent) {
             try {
                 highlightSpeakingElement(targetElement);
+                window.addEventListener('click', this.handleUserClick, true);
                 await speakText(targetElement.textContent, targetElement);
                 const highlightedElements = document.querySelectorAll('.speaking-highlight');
                 highlightedElements.forEach(element => stopHighlightForSpeakingElement(element));
@@ -3199,7 +3259,7 @@ function onTouchListenerForOnTouch(element) {
         setDraggingDisabled(false);
     };
     const onPointerDown = (event) => {
-        event.stopPropagation();
+        // event.stopPropagation();
         onholdTriggered = false;
         onholdTimer = setTimeout(() => {
             playAudio();
@@ -3207,13 +3267,18 @@ function onTouchListenerForOnTouch(element) {
     };
     const onPointerUp = async (event) => {
         clearTimeout(onholdTimer);
-        if (!onholdTriggered && onTouch) {
+        // If long-press happened → do nothing else
+        if (onholdTriggered) {
+            setDraggingDisabled(false);
+            return;
+        }
+        // If an onTouch action is defined, execute it on tap.
+        if (onTouch) {
             await executeActions(onTouch, element);
         }
-        else if (!onTouch) {
-            if (['category', 'option'].includes(element.getAttribute('type') || '')) {
-                element.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
-            }
+        const type = element.getAttribute('type') || '';
+        if (['category', 'option', 'click'].includes(type)) {
+            element.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
         }
         setDraggingDisabled(false);
     };
@@ -3259,7 +3324,7 @@ function addClickListenerForClickType(element) {
             container.setAttribute(SelectedValuesKey, JSON.stringify([element['value']]));
             const isCorrect = objective.includes(element['value']);
             dispatchClickEvent(element, isCorrect);
-            if (isCorrect) {
+            if (isCorrect || container.getAttribute('is-continue-on-correct') === 'false') {
                 const onCorrect = element.getAttribute('onCorrect');
                 if (!(element.id && element.id.startsWith('key-button'))) {
                     element.style.pointerEvents = 'none';
@@ -68720,6 +68785,7 @@ const executeActions = async (actionsString, thisElement, element) => {
                     const container = document.getElementById(LidoContainer);
                     if (container.getAttribute('is-continue-on-correct') !== 'true') {
                         targetElement.style.pointerEvents = 'none';
+                        AudioPlayer.getI().stop();
                     }
                     await validateObjectiveStatus();
                     break;
@@ -68951,7 +69017,7 @@ const afterDropDragHandling = (dragElement, dropElement) => {
             const scaledLeft = (dropCenterX - dragCenterX) / containerScale;
             const scaledTop = (dropCenterY - dragCenterY) / containerScale;
             dragElement.style.transform = `translate(${scaledLeft}px, ${scaledTop}px)`;
-        }, 100);
+        }, 700);
     }
 };
 // function cloneElementWithComputedStyles(originalEl: HTMLElement): HTMLElement {
@@ -69135,18 +69201,14 @@ async function onActivityComplete(dragElement, dropElement) {
         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 (otherElement.tagName.toLowerCase() === 'lido-text') ;
-                if (otherElement.tagName.toLowerCase() === 'lido-image') {
-                    otherElement.style.opacity = '0';
-                    otherElement.style.backgroundColor = 'transparent';
+                if (otherElement) {
+                    otherElement.style.opacity = "0";
                 }
             }
         }
         else {
-            if (otherElement.tagName.toLowerCase() === 'lido-text') ;
-            if (otherElement.tagName.toLowerCase() === 'lido-image') {
+            if (otherElement.tagName.toLowerCase() === 'lido-text') {
                 otherElement.style.opacity = '1';
-                otherElement.style.backgroundColor = 'transparent';
             }
         }
     });
@@ -69947,6 +70009,7 @@ exports.PrevContainerKey = PrevContainerKey;
 exports.RiveService = RiveService;
 exports.SelectedValuesKey = SelectedValuesKey;
 exports.TemplateID = TemplateID;
+exports.Timer = Timer;
 exports.attachSpeakIcon = attachSpeakIcon;
 exports.calculateScale = calculateScale;
 exports.calculateScore = calculateScore;

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

@@ -3,6 +3,7 @@ import { convertUrlToRelative, initEventsForElement, calculateScale } from "../.
 import i18next from "../../utils/i18n";
 import { highlightElement } from "../../utils/utilsHandlers/highlightHandler";
 import { TemplateID } from "../../utils/constants";
+import { Timer } from "../../utils/utilsHandlers/timer";
 /**
  * @component LidoContainer
  *
@@ -12,7 +13,7 @@ import { TemplateID } from "../../utils/constants";
  */
 export class LidoContainer {
     constructor() {
-        this.locale = '';
+        this.Lang = '';
         this.showDropBorder = true;
         this.appendToDropOnCompletion = false;
         this.id = '';
@@ -65,13 +66,13 @@ export class LidoContainer {
     }
     resolveInstructionAudio() {
         var _a;
-        this.instructName =
-            (_a = {
-                flashcard: "Review the flashcards to reinforce your learning." /* templateAudio.flashcards */,
-                mcq: "Select the correct answer from the options provided." /* templateAudio.mcq */,
-                tracing: "Trace the shape by following the outline carefully." /* templateAudio.tracing */,
-                dragAndDrop: "Match the items by dragging and dropping them into the correct places." /* templateAudio.dragAndDrop */,
-            }[this.templateId]) !== null && _a !== void 0 ? _a : '';
+        const key = (_a = {
+            flashcard: "instruction.flashcards" /* templateAudio.flashcards */,
+            mcq: "instruction.mcq" /* templateAudio.mcq */,
+            tracing: "instruction.tracing" /* templateAudio.tracing */,
+            dragAndDrop: "instruction.dragAndDrop" /* templateAudio.dragAndDrop */,
+        }[this.templateId]) !== null && _a !== void 0 ? _a : '';
+        this.instructName = key ? i18next.t(key) : '';
         const home = document.querySelector('lido-home');
         if (!home)
             return;
@@ -84,16 +85,16 @@ export class LidoContainer {
     resolveLanguage() {
         var _a, _b;
         const rootEl = this.el.closest('lido-root');
-        const rootLang = (rootEl === null || rootEl === void 0 ? void 0 : rootEl.locale) || '';
+        const rootLang = (rootEl === null || rootEl === void 0 ? void 0 : rootEl.Lang) || '';
         if (rootLang === null || rootLang === void 0 ? void 0 : rootLang.trim())
             return rootLang;
         const homeEl = this.el.closest('lido-home');
-        const homeLang = (homeEl === null || homeEl === void 0 ? void 0 : homeEl.locale) || '';
+        const homeLang = (homeEl === null || homeEl === void 0 ? void 0 : homeEl.Lang) || '';
         if (homeLang === null || homeLang === void 0 ? void 0 : homeLang.trim())
             return homeLang;
-        if ((_a = this.locale) === null || _a === void 0 ? void 0 : _a.trim())
-            return this.locale;
-        const xmlLang = this.el.getAttribute('locale');
+        if ((_a = this.Lang) === null || _a === void 0 ? void 0 : _a.trim())
+            return this.Lang;
+        const xmlLang = this.el.getAttribute('Lang');
         if (xmlLang === null || xmlLang === void 0 ? void 0 : xmlLang.trim())
             return xmlLang;
         return (_b = this.el.textContent) === null || _b === void 0 ? void 0 : _b.trim();
@@ -165,7 +166,7 @@ export class LidoContainer {
         i18next.changeLanguage(appliedLang);
         const texts = this.el.querySelectorAll('lido-text');
         texts.forEach((textEl) => {
-            textEl.locale = appliedLang;
+            textEl.Lang = appliedLang;
             textEl.dispatchEvent(new CustomEvent('languageChanged', { bubbles: true }));
         });
     }
@@ -201,13 +202,17 @@ export class LidoContainer {
         }
         const langToApply = this.resolveLanguage();
         this.updateChildTextLanguage(langToApply);
-        highlightElement();
+        setTimeout(() => {
+            highlightElement();
+        }, 100);
+        Timer.getI().start();
     }
     disconnectedCallback() {
         window.removeEventListener('resize', () => this.scaleContainer(this.el));
         window.removeEventListener('load', () => this.scaleContainer(this.el));
         document.body.style.backgroundColor = '';
         document.body.style.backgroundImage = '';
+        Timer.getI().stop();
     }
     render() {
         // Define the styles for the container element
@@ -221,7 +226,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: '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' })));
     }
     static get is() { return "lido-container"; }
     static get originalStyleUrls() {
@@ -236,7 +241,7 @@ export class LidoContainer {
     }
     static get properties() {
         return {
-            "locale": {
+            "Lang": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -250,7 +255,7 @@ export class LidoContainer {
                     "tags": [],
                     "text": "Language to apply to all texts"
                 },
-                "attribute": "locale",
+                "attribute": "lang",
                 "reflect": false,
                 "defaultValue": "''"
             },
@@ -945,7 +950,7 @@ export class LidoContainer {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "locale",
+                "propName": "Lang",
                 "methodName": "languageChanged"
             }];
     }

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

@@ -111,7 +111,7 @@ export class LidoHome {
         this.commonAudioPath = "";
         this.showNav = true;
         this.activeContainerIndexes = [];
-        this.locale = '';
+        this.Lang = '';
         this.xmlData = '';
         this.initialIndex = 0;
         this.canplay = true;
@@ -543,7 +543,7 @@ export class LidoHome {
                 },
                 "defaultValue": "[]"
             },
-            "locale": {
+            "Lang": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -557,7 +557,7 @@ export class LidoHome {
                     "tags": [],
                     "text": "Language to apply to all texts"
                 },
-                "attribute": "locale",
+                "attribute": "lang",
                 "reflect": false,
                 "defaultValue": "''"
             },
@@ -768,7 +768,7 @@ export class LidoHome {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "locale",
+                "propName": "Lang",
                 "methodName": "onLangChange"
             }, {
                 "propName": "commonAudioPath",

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

@@ -9,7 +9,7 @@ import i18next from "../../utils/i18n";
  */
 export class LidoRoot {
     constructor() {
-        this.locale = '';
+        this.Lang = '';
         this.xmlPath = '';
         this.initialIndex = 0;
         this.margin = '';
@@ -26,7 +26,7 @@ export class LidoRoot {
      * It fetches the XML data from the specified path or URL and sets it to the component's state.
      */
     connectedCallback() {
-        this.setLanguage(this.locale);
+        this.setLanguage(this.Lang);
     }
     onLangChange(newLang) {
         this.setLanguage(newLang);
@@ -80,7 +80,7 @@ export class LidoRoot {
     static get assetsDirs() { return ["assets"]; }
     static get properties() {
         return {
-            "locale": {
+            "Lang": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -94,7 +94,7 @@ export class LidoRoot {
                     "tags": [],
                     "text": "Language to apply to all texts"
                 },
-                "attribute": "locale",
+                "attribute": "lang",
                 "reflect": false,
                 "defaultValue": "''"
             },
@@ -265,7 +265,7 @@ export class LidoRoot {
     }
     static get watchers() {
         return [{
-                "propName": "locale",
+                "propName": "Lang",
                 "methodName": "onLangChange"
             }];
     }

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

@@ -82,7 +82,8 @@ export class LidoText {
         const base = window[LIDO_COMMON_AUDIO_PATH];
         if (!base || !this.string)
             return null;
-        const fileName = this.string.toLowerCase().trim().replace(/\s+/g, "_").replace(/[^\w-]/g, "");
+        const fileName = this.string;
+        console.log(fileName, "filename😂");
         return `${base}/${fileName}.mp3`;
     }
     /**
@@ -149,7 +150,7 @@ export class LidoText {
         }
     }
     render() {
-        return (h(Host, { key: '9635bba385679026c4f90aac9467612f06a21f1b', class: "lido-text", value: this.value, type: this.type, "tab-index": this.tabIndex, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, minDrops: this.minDrops, maxDrops: this.maxDrops, id: this.id, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, "span-type": this.spanType, "disable-speak": this.disableSpeak }, this.spanType !== '' ? h("div", { class: "lido-text-content" }, " ", i18next.t(this.string)) : i18next.t(this.string)));
+        return (h(Host, { key: '7b3c230890775e489b3d2bc2abca683078211377', class: "lido-text", value: this.value, type: this.type, "tab-index": this.tabIndex, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, minDrops: this.minDrops, maxDrops: this.maxDrops, id: this.id, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, "span-type": this.spanType, "disable-speak": this.disableSpeak }, this.spanType !== '' ? h("div", { class: "lido-text-content" }, " ", i18next.t(this.string)) : i18next.t(this.string)));
     }
     static get is() { return "lido-text"; }
     static get originalStyleUrls() {

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

@@ -46,7 +46,7 @@ function getContainerXml(args) {
         </lido-text>
       </lido-pos>
       <!-- question -->
-      <lido-text visible="true" tab-index="12" height="landscape.100px,portrait.175px" font-family="'Baloo Bhai 2'" font-size="60px" width="landscape.auto,portrait.86%" string="Drop the elements to match the given symbol '${objective}'" font-color="black" bg-color="white" y="landscape.0%,portrait.-12%" onEntry="this.font-weight='600'; this.position='relative';">
+      <lido-text visible="true" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/fill-in-the-blanks/fill-upAudio.mp3" id="heading" tab-index="12" height="landscape.100px,portrait.175px" font-family="'Baloo Bhai 2'" font-size="60px" width="landscape.auto,portrait.86%" string="Drop the elements to match the given symbol '${objective}'" font-color="black" bg-color="white" y="landscape.0%,portrait.-12%" onEntry="this.speak='true';this.font-weight='600'; this.position='relative';">
       </lido-text>
       <lido-balance  tilt="0" operation="add" visible="true" height="landscape.456px,portrait.500px" y="landscape.4%,portrait.0%" width="landscape.1136px,portrait.876px">
       <!-- drop Element -->