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

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

@@ -1,6 +1,8 @@
 import { Host, h } from "@stencil/core";
 import { convertUrlToRelative, initEventsForElement, calculateScale } from "../../utils/utils";
 import i18next from "../../utils/i18n";
+import { highlightElement } from "../../utils/utilsHandlers/highlightHandler";
+import { TemplateID } from "../../utils/constants";
 /**
  * @component LidoContainer
  *
@@ -48,6 +50,9 @@ export class LidoContainer {
         this.showNextButton = 'false';
         this.delayVisible = '';
         this.disableSpeak = false;
+        this.templateId = '';
+        this.instructName = '';
+        this.speakFlag = false;
     }
     languageChanged(newLang) {
         const langToApply = newLang || this.resolveLanguage();
@@ -56,6 +61,25 @@ export class LidoContainer {
     componentWillLoad() {
         const langToApply = this.resolveLanguage();
         this.updateChildTextLanguage(langToApply);
+        this.resolveInstructionAudio();
+    }
+    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 home = document.querySelector('lido-home');
+        if (!home)
+            return;
+        const existing = home.getAttribute(TemplateID) || '';
+        this.speakFlag = existing.includes(this.templateId);
+        if (!this.speakFlag) {
+            home.setAttribute(TemplateID, [existing, this.templateId].filter(Boolean).join(','));
+        }
     }
     resolveLanguage() {
         var _a, _b;
@@ -161,7 +185,15 @@ export class LidoContainer {
         // Re-scale the container on window resize or load events
         window.addEventListener('resize', () => this.scaleContainer(this.el));
         window.addEventListener('load', () => this.scaleContainer(this.el));
-        initEventsForElement(this.el, this.type);
+        if (this.templateId) {
+            setTimeout(() => {
+                this.el.setAttribute("onEntry", `${this.templateId}.speak='${!this.speakFlag}'; ` + this.el.getAttribute("onEntry"));
+                initEventsForElement(this.el, this.type);
+            }, 100);
+        }
+        else {
+            initEventsForElement(this.el, this.type);
+        }
         if (this.customStyle) {
             const styleElement = document.createElement('style');
             styleElement.innerHTML = this.customStyle;
@@ -169,6 +201,9 @@ export class LidoContainer {
         }
         const langToApply = this.resolveLanguage();
         this.updateChildTextLanguage(langToApply);
+        setTimeout(() => {
+            highlightElement();
+        }, 100);
     }
     disconnectedCallback() {
         window.removeEventListener('resize', () => this.scaleContainer(this.el));
@@ -188,7 +223,7 @@ export class LidoContainer {
             userSelect: 'none', // Prevent any field selection
         };
         console.log('🚀 ~ LidoContainer ~ canplay:', this.canplay);
-        return (h(Host, { key: '338ef0be8cc9d052764785ce9314254be7c8a7f8', 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 }, h("slot", { key: '59d66b47f4749a99ece4da48dbaebaf720cb0b2b' })));
+        return (h(Host, { key: 'bdae7c7d24046fc0f726668b9b1bbb84f3ddd3dd', id: "lido-container", locale: this.locale, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": this.disableSpeak, "template-id": this.templateId, audio: this.audio }, h("lido-text", { key: 'aa5d73493b429f0d99c5737aed89488c565e1699', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: 'd251b1fed4468aabd66a6f6c14b3de234329ab64' })));
     }
     static get is() { return "lido-container"; }
     static get originalStyleUrls() {
@@ -877,14 +912,38 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "When set to true, disables the speak functionality of long press for this component and its children."
+                    "text": "When set to true, disables the speak functionality of long press for this component and all its child components."
                 },
                 "attribute": "disable-speak",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "templateId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifies the template type used by this component (e.g., mcq, flashcard, tracing, dragAndDrop)."
+                },
+                "attribute": "template-id",
+                "reflect": false,
+                "defaultValue": "''"
             }
         };
     }
+    static get states() {
+        return {
+            "instructName": {},
+            "speakFlag": {}
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{

package/dist/collection/components/flashCard/lido-flash-card.js

@@ -67,6 +67,15 @@ export class LidoFlash {
     }
     componentDidLoad() {
         setVisibilityWithDelay(this.el, this.delayVisible);
+        const card = this.el.querySelector('.card');
+        if (card) {
+            setTimeout(() => {
+                card.classList.add('flipped');
+                setTimeout(() => {
+                    card.classList.remove('flipped');
+                }, 500);
+            }, 500);
+        }
         initEventsForElement(this.el, this.type);
         // handlingChildElements(this.el, this.minLength, this.maxLength, this.childElementsLength, 'inline-block');
     }
@@ -76,7 +85,7 @@ export class LidoFlash {
     }
     /* ---------- Render ---------- */
     render() {
-        return (h(Host, { key: 'b8f000d4e9d04d9954f81dc7e05b109dc16cb223', value: this.value, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, type: this.type, onClick: this.handleFlip, "disable-speak": this.disableSpeak }, h("div", { key: 'cea63b67d1b6a925ab0520eaa7c5166288bcd71e', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: '3517e09bb91ac4c6fb2c066539f2d4f51436938f', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: '5a14a4ab70898852046f1128c99e5a285c1c37f7', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
+        return (h(Host, { key: 'feb4183de8377349b990563bf7f2e6a999d8a1c5', value: this.value, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, type: this.type, onClick: this.handleFlip, "disable-speak": this.disableSpeak }, h("div", { key: 'e1a8a03fb07fba6f7d44f207a1ef7081bb188bcf', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: 'fc8df309a9e6bf2b44198ca6c41c0e1a3ee6dcf9', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: 'e707168ae9e3fc8518b635c8e10b83305f569f5c', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
     }
     static get is() { return "lido-flash-card"; }
     static get originalStyleUrls() {

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

@@ -57,7 +57,7 @@ export class LidoFloat {
         };
     }
     render() {
-        return (h(Host, { key: 'e8bc37c1220b708872748bd49c2d7fc448bdd01c', class: "lido-float", "float-direction": this.floatDirection, id: this.id, "tab-index": this.tabIndex, style: this.style, onEntry: this.onEntry }, h("slot", { key: '991afa719c6fc35f489fae30f77bad81cf2b4c3e' })));
+        return (h(Host, { key: 'd12c96be36eb27c4b46cb2b494f1de3352634feb', class: "lido-float", "float-direction": this.floatDirection, id: this.id, "tab-index": this.tabIndex, style: this.style, onEntry: this.onEntry }, h("slot", { key: '5c2b330b5fb5c27ead76a0a9514750d4dd3ef820' })));
     }
     static get is() { return "lido-float"; }
     static get originalStyleUrls() {

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
-import { SelectedValuesKey, NextContainerKey, PrevContainerKey, LidoContainer, exitUrl, prevUrl, nextUrl, speakUrl, ActivityScoreKey, LIDO_COMMON_AUDIO_PATH } from "../../utils/constants";
+import { SelectedValuesKey, NextContainerKey, PrevContainerKey, LidoContainer, exitUrl, prevUrl, nextUrl, speakUrl, ActivityScoreKey, LIDO_COMMON_AUDIO_PATH, TemplateID, } from "../../utils/constants";
 import { dispatchActivityChangeEvent, dispatchGameCompletedEvent, dispatchGameExitEvent } from "../../utils/customEvents";
-import { calculateScale, getCancelBtnPopup, setCancelBtnPopup, executeActions, triggerPrevcontainer, convertUrlToRelative, triggerNextContainer, matchStringPattern } from "../../utils/utils";
+import { calculateScale, getCancelBtnPopup, setCancelBtnPopup, executeActions, triggerPrevcontainer, convertUrlToRelative, triggerNextContainer, matchStringPattern, } from "../../utils/utils";
 import { AudioPlayer } from "../../utils/audioPlayer";
 import { generateUUIDFallback } from "../../utils/utils";
 import i18next from "../../utils/i18n";
@@ -108,7 +108,7 @@ export class LidoHome {
                 }
             }
         };
-        this.commonAudioPath = undefined;
+        this.commonAudioPath = "";
         this.showNav = true;
         this.activeContainerIndexes = [];
         this.locale = '';
@@ -197,9 +197,9 @@ export class LidoHome {
     publishCommonAudioPath(path) {
         if (!path)
             return;
-        const cleanPath = path.replace(/\/+$/, "");
+        const cleanPath = path.replace(/\/+$/, '');
         window[LIDO_COMMON_AUDIO_PATH] = cleanPath;
-        console.log("[LidoHome] Published common audio path:", cleanPath);
+        console.log('[LidoHome] Published common audio path:', cleanPath);
         // Dispatch a global event so LidoText knows the path is ready
         window.dispatchEvent(new Event('lidoCommonAudioPathReady'));
     }
@@ -353,12 +353,14 @@ export class LidoHome {
      */
     parseContainers(rootElement) {
         const containerElements = rootElement.querySelectorAll('lido-container');
-        const containers = Array.from(containerElements).map((container, index) => {
+        const containers = Array.from(containerElements)
+            .map((container, index) => {
             if (this.activeContainerIndexes.length && !this.activeContainerIndexes.includes(index))
                 return;
             // Return a factory function that generates a fresh JSX node each time
             return () => this.parseElement(container);
-        }).filter(Boolean); // Remove any undefined entries
+        })
+            .filter(Boolean); // Remove any undefined entries
         this.containers = containers;
     }
     areAllDropsFilled() {
@@ -374,6 +376,13 @@ export class LidoHome {
         await AudioPlayer.getI().stop();
         const container = document.getElementById(LidoContainer);
         const allele = container.querySelectorAll('*');
+        const templateId = container.getAttribute(TemplateID);
+        if (templateId) {
+            const instructEl = this.el.querySelector(`#${templateId}`);
+            if (instructEl) {
+                await executeActions("this.speak='true';", instructEl);
+            }
+        }
         for (const el of Array.from(allele)) {
             if (getCancelBtnPopup())
                 break;
@@ -438,14 +447,14 @@ export class LidoHome {
         return (h("div", { id: "lido-dot-indicator", class: "lido-dot-container" }, h("div", { class: "lido-exit-button popup\r\n        -button", onClick: () => {
                 this.exitFlag = true;
                 AudioPlayer.getI().stop();
-            }, style: { visibility: this.showNav ? "visible" : "hidden" } }, h("lido-image", { src: this.navBarIcons.exit })), h("div", { class: "lido-btn-dot-container" }, h("div", { id: "lido-arrow-left", onClick: () => {
+            }, style: { visibility: this.showNav ? 'visible' : 'hidden' } }, h("lido-image", { src: this.navBarIcons.exit })), h("div", { class: "lido-btn-dot-container" }, h("div", { id: "lido-arrow-left", onClick: () => {
                 triggerPrevcontainer();
-            }, style: { visibility: this.showNav ? "visible" : "hidden" } }, h("lido-image", { src: this.navBarIcons.prev })), this.containers.map((_, index) => (h("div", { class: "parent_dots" }, h("span", { class: `lido-dot ${index < this.currentContainerIndex ? 'completed' : index === this.currentContainerIndex ? 'current' : ''}`, onClick: () => this.jumpToContainer(index), style: style })))), h("div", { id: "lido-arrow-right", onClick: event => {
+            }, style: { visibility: this.showNav ? 'visible' : 'hidden' } }, h("lido-image", { src: this.navBarIcons.prev })), this.containers.map((_, index) => (h("div", { class: "parent_dots" }, h("span", { class: `lido-dot ${index < this.currentContainerIndex ? 'completed' : index === this.currentContainerIndex ? 'current' : ''}`, onClick: () => this.jumpToContainer(index), style: style })))), h("div", { id: "lido-arrow-right", onClick: event => {
                 console.log('Target:', event.target); // What was clicked
                 console.log('Current Target:', event.currentTarget); // Where the onClick is bound
                 console.log('✅ Button clicked - nextBtn action triggered');
                 executeActions("this.nextBtn='true'", event.currentTarget);
-            }, style: { visibility: this.showNav ? "visible" : "hidden" } }, h("lido-image", { src: this.navBarIcons.next }))), h("div", { id: "main-audio", class: "popup-button", onClick: () => this.btnpopup(), style: { visibility: this.showNav ? "visible" : "hidden" } }, h("lido-image", { visible: "true", src: this.navBarIcons.speak }))));
+            }, style: { visibility: this.showNav ? 'visible' : 'hidden' } }, h("lido-image", { src: this.navBarIcons.next }))), h("div", { id: "main-audio", class: "popup-button", onClick: () => this.btnpopup(), style: { visibility: this.showNav ? 'visible' : 'hidden' } }, h("lido-image", { visible: "true", src: this.navBarIcons.speak }))));
     }
     /**
      * Jumps to a specific container based on the index of the dot clicked.
@@ -467,7 +476,7 @@ export class LidoHome {
         const style = {
             userSelect: 'none', // Prevent any field selection
         };
-        return (h(Host, { class: "lido-home", uuid: this.uuid, index: this.currentContainerIndex, totalIndex: this.containers.length, style: style }, h("div", { key: this.currentContainerIndex }, (_b = (_a = this.containers)[this.currentContainerIndex]) === null || _b === void 0 ? void 0 : _b.call(_a)), this.renderDots(), this.exitFlag && (h("div", { class: "lido-alert-parent" }, h("div", { class: "lido-alert-popup" }, h("lido-cell", { class: "lido-alert-content", visible: "true", layout: "col", width: "340px", height: "210px", "bg-color": "#fff", "border-radius": "16px", onEntry: "this.box-shadow= '0 4px 8px 0 rgba(0, 0, 0, 0.25)';" }, h("lido-text", { visible: "true", string: "Do you want to exit?", width: "294px", height: "38px", class: "popup-exit-text", "font-size": "22px", onEntry: "this.margin-bottom =' -36px';" }), h("lido-cell", { visible: "true", layout: "row", width: "294px", class: "btn-cell" }, h("lido-text", { visible: "true", string: "Exit", width: "92px", height: "53px", "font-size": "16px", margin: "0px 50px 0px 0px", class: "popup-button", onClick: () => this.popUpClick('exit'), borderRadius: "16px", onEntry: 'this.color="#F34D08"; this.font-weight="700"; this.box-shadow="0 2px 0 #F34D08";', fontFamily: "Baloo Bhai 2", "font-weight": "700", bgColor: "white", "border-radius": "16px" }), h("lido-text", { visible: "true", string: "Continue playing", width: "155px", height: "53px", "font-size": "16px", class: "popup-button", onClick: () => this.popUpClick('cancel'), borderRadius: "16px", onEntry: 'this.color=white; this.font-weight="700"; this.box-shadow="0 2px 0 #F34D08";', "font-family": "Baloo Bhai 2", "font-weight": "700", bgColor: "#F34D08", "border-radius": "16px" }))))))));
+        return (h(Host, { class: "lido-home", uuid: this.uuid, "template-id": "", index: this.currentContainerIndex, totalIndex: this.containers.length, style: style }, h("div", { key: this.currentContainerIndex }, (_b = (_a = this.containers)[this.currentContainerIndex]) === null || _b === void 0 ? void 0 : _b.call(_a)), this.renderDots(), this.exitFlag && (h("div", { class: "lido-alert-parent" }, h("div", { class: "lido-alert-popup" }, h("lido-cell", { class: "lido-alert-content", visible: "true", layout: "col", width: "340px", height: "210px", "bg-color": "#fff", "border-radius": "16px", onEntry: "this.box-shadow= '0 4px 8px 0 rgba(0, 0, 0, 0.25)';" }, h("lido-text", { visible: "true", string: "Do you want to exit?", width: "294px", height: "38px", class: "popup-exit-text", "font-size": "22px", onEntry: "this.margin-bottom =' -36px';" }), h("lido-cell", { visible: "true", layout: "row", width: "294px", class: "btn-cell" }, h("lido-text", { visible: "true", string: "Exit", width: "92px", height: "53px", "font-size": "16px", margin: "0px 50px 0px 0px", class: "popup-button", onClick: () => this.popUpClick('exit'), borderRadius: "16px", onEntry: 'this.color="#F34D08"; this.font-weight="700"; this.box-shadow="0 2px 0 #F34D08";', fontFamily: "Baloo Bhai 2", "font-weight": "700", bgColor: "white", "border-radius": "16px" }), h("lido-text", { visible: "true", string: "Continue playing", width: "155px", height: "53px", "font-size": "16px", class: "popup-button", onClick: () => this.popUpClick('cancel'), borderRadius: "16px", onEntry: 'this.color=white; this.font-weight="700"; this.box-shadow="0 2px 0 #F34D08";', "font-family": "Baloo Bhai 2", "font-weight": "700", bgColor: "#F34D08", "border-radius": "16px" }))))))));
     }
     static get is() { return "lido-home"; }
     static get originalStyleUrls() {
@@ -497,7 +506,8 @@ export class LidoHome {
                     "text": ""
                 },
                 "attribute": "common-audio-path",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "\"\""
             },
             "showNav": {
                 "type": "boolean",

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

@@ -115,10 +115,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: '030937c20c1e5652a528e9f5e3335faafe18fff1', 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: '4c928db14ba00f8aa20dcdb9e220f0486949e861', class: "input-area" }, h("input", { key: 'f8db5e6f76aba08fb5893fd3fff7e6739dd5f854', type: "text", value: this.inputString, class: "input-area", readonly: true, onInput: (e) => (this.inputString = e.target.value) }), h("lido-text", { key: '58156eabbdd1fe9d06fa0ff3e192ab0f434fcd9e', 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: 'd57a587171b8525147e31228779e8503f5b7e854', 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: 'bc4242fca443e2fe0821b6b5e3559bfdf231ab30', class: "input-area" }, h("input", { key: '046989156e5f4c61d52d187c74570a95d8ebe6ab', type: "text", value: this.inputString, class: "input-area", readonly: true, onInput: (e) => (this.inputString = e.target.value) }), h("lido-text", { key: '72ab0afbebb9789c5cde9ed7624ef22bae5d2901', 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: '79538fe14d2645dc7ae62f4e24da2300a680b1cc', 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: '0d09084f44fe8a69e19006daccd1029e291b43e5', 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: '9b2686af38ffed8e792f93f8302f01d59dbd2748', class: "keyboard-wrapper", style: {
+            } }), h("lido-text", { key: 'b6028375fb0e56b3c32821894f199e2c96726261', 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: 'f9b109fe36a6e0fcef459bdaf69ccbad6f827fc9', 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: '1a3047db0048f49429bd344625a15d3c94b173d4', class: "keyboard-wrapper", style: {
                 display: 'flex',
                 flexWrap: 'wrap',
                 justifyContent: 'center',

package/dist/collection/components/mathMatrix/lido-math-matrix.js

@@ -187,7 +187,7 @@ export class LidoMathMatrix {
     render() {
         let slotNumber = 1;
         const slotData = this.getSlotData();
-        return (h(Host, { key: 'bbd76954f0a4b67cd89dd10e3c26ce4f7e7712bd', class: "math-matrix", style: {
+        return (h(Host, { key: '3da93fe1224f166febc7da07a7ef301a66d88997', class: "math-matrix", style: {
                 height: this.style.height,
                 width: this.style.width,
                 z: this.style.z,

package/dist/collection/components/position/lido-pos.js

@@ -66,7 +66,7 @@ export class LidoPos {
         };
     }
     render() {
-        return (h(Host, { key: '0eea8147ee3845668e83bed01164dce740aae785', id: this.id, class: "lido-pos", type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'ca9378dc185eeb4d495ab3045d6b17424de908dc' })));
+        return (h(Host, { key: '0ab10d21eccd24db07fb6b87d21f75be32801013', id: this.id, class: "lido-pos", type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: '11a3f2fc1b08007601879c9cae2f2736dd511499' })));
     }
     static get is() { return "lido-pos"; }
     static get originalStyleUrls() {

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

@@ -78,7 +78,7 @@ export class LidoRandom {
             backgroundColor: this.bgColor,
             margin: this.margin,
         };
-        return (h(Host, { key: 'cc8bb9d31ff6c36201d266f5579288c92c05bf82', class: "lido-random", 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, minDrops: this.minDrops, maxDrops: this.maxDrops, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'd91a2403fa78320cbae40456dc0c86b44493bb5a' })));
+        return (h(Host, { key: 'e6978f97eaac048e12c50e048a8392c1125282f9', class: "lido-random", 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, minDrops: this.minDrops, maxDrops: this.maxDrops, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: '2f513356dac9d0f6df3ab695b9fa1bcf82c379de' })));
     }
     static get is() { return "lido-random"; }
     static get originalStyleUrls() {

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

@@ -78,7 +78,7 @@ export class LidoRow {
         };
     }
     render() {
-        return (h(Host, { key: '2d2f701dda922276d2485e91f15c8912c90d7b8d', class: "lido-row", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }, h("slot", { key: 'b00002ecc9d5de422094beffc33ae5137b958fa3' })));
+        return (h(Host, { key: 'ca01c603f76bc544d8660427d004c2ddb2de66ca', class: "lido-row", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }, h("slot", { key: '08ef314cd12489030c1e9d428c88cc0a76355d1d' })));
     }
     static get is() { return "lido-row"; }
     static get originalStyleUrls() {

package/dist/collection/components/scale/lido-balance.js

@@ -124,7 +124,7 @@ export class LidoBalance {
         };
     }
     render() {
-        return (h(Host, { key: 'd1da72f1bf298dd7c81b0cfefa0e9e563ccbfff1', id: "lido-balance", "bg-color": "red", onEntry: this.onEntry, class: "lido-balance", tilt: this.tilt.toString(), style: this.style, operation: this.operation.toString() }, h("div", { key: '737ab206a5156b402d4477a38567480f10419c14', innerHTML: this.pivotSvg, id: "pivotimg", class: "pivot" }), h("div", { key: '8bc60136950858d5d1b96c38ec4c0635024f8d24', innerHTML: this.scaleSvg, id: "scaleimg", class: "scale", ref: (el) => (this.scaleEl = el) }), h("div", { key: '07049a6b5c8e75d831c9287b2b4a0e633791174b', innerHTML: this.handlerSvg, id: "handlerimg", class: "handler", ref: (el) => (this.leftHandleEl = el) }), h("div", { key: '85361c27b1ab6fcc86969bfc9d4dff1df6040165', innerHTML: this.handlerSvg, id: "handimg", class: "hand", ref: (el) => (this.rightHandleEl = el) }), h("div", { key: 'c4208582bfa1b63e4381d44d9a95e9c537dfbc84', id: "balanceSymbol", class: "lido-balance-symbol", "aria-hidden": !this.showSymbol }, this.showSymbol ? this.balanceSymbol : '')));
+        return (h(Host, { key: 'e1cdc8aab0b18f3cc654a52a1e315ba6d708adb3', id: "lido-balance", "bg-color": "red", onEntry: this.onEntry, class: "lido-balance", tilt: this.tilt.toString(), style: this.style, operation: this.operation.toString() }, h("div", { key: '98ed1d2b6eb29e0fcf2ac656f8bb87cbe4420dfa', innerHTML: this.pivotSvg, id: "pivotimg", class: "pivot" }), h("div", { key: '8139021fec3f6d19a8fc711f02dc9e61197e5e5c', innerHTML: this.scaleSvg, id: "scaleimg", class: "scale", ref: (el) => (this.scaleEl = el) }), h("div", { key: '3f7621e16932c862ea50e3ed6e941efb3b77c292', innerHTML: this.handlerSvg, id: "handlerimg", class: "handler", ref: (el) => (this.leftHandleEl = el) }), h("div", { key: '939e0df96916eb3259e6adcefa0c9a786aeccdef', innerHTML: this.handlerSvg, id: "handimg", class: "hand", ref: (el) => (this.rightHandleEl = el) }), h("div", { key: 'c4de234c5058cb5d6bef94b1c75f67ca85ee7fc9', id: "balanceSymbol", class: "lido-balance-symbol", "aria-hidden": !this.showSymbol }, this.showSymbol ? this.balanceSymbol : '')));
     }
     static get is() { return "lido-balance"; }
     static get originalStyleUrls() {

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

@@ -83,8 +83,8 @@ export class LidoShape {
             backgroundColor: this.shapeType !== 'polygon' ? this.bgColor : 'transparent', // Apply background only if not a polygon
             margin: this.margin,
         };
-        return (h(Host, { key: 'fde795dbc7c3a295a84bb1e5e74ff57cf3fe103a', class: `lido-shape ${this.shapeType}`, value: this.value, type: this.type, "tab-index": this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }, this.shapeType === "lido-cube" &&
-            h("div", { key: '620b82948d6eea342a2e00fab780696fcd2d6794', class: "cube" }, h("div", { key: 'b505a156896edd12c8d686966945168c5eb056d7', class: "face top" }), h("div", { key: '806b4d6aec720340d7a207854b20f910bb845829', class: "face bottom" }), h("div", { key: 'd2619804cabb2761e624139e33d759992d632468', class: "face left" }), h("div", { key: '3874ba7bcbe3eebc133b107a4bfefb38638eeb0f', class: "face right" }), h("div", { key: '0e19cfb0feba399b9a98336b0f6c349ff22e29ed', class: "face front" }), h("div", { key: '9b1d9d75d8897756f32bc023533eb1dc025d8e2f', class: "face back" }))));
+        return (h(Host, { key: '687d13d8361df73e2757dce2865ee1835804e645', class: `lido-shape ${this.shapeType}`, value: this.value, type: this.type, "tab-index": this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }, this.shapeType === "lido-cube" &&
+            h("div", { key: 'bd9958c2095029a03eb76aef2f721e5883649dca', class: "cube" }, h("div", { key: 'bd8f4c9a4af6663dc6d642a80e3c0ebbb60471c9', class: "face top" }), h("div", { key: '0bbd21bab7efb5e91ab4067f22d9febe670748f6', class: "face bottom" }), h("div", { key: 'a3ca4f53a93994bef257b5637c2e603abc89c13e', class: "face left" }), h("div", { key: '0122526c9001632c412bbf27ac92a73f1a3bf000', class: "face right" }), h("div", { key: '5d3521dd261e79c9f3170539642be0c31e78e0b3', class: "face front" }), h("div", { key: '026145187bd4c68b8a73646c7e948ab81f75a16f', class: "face back" }))));
     }
     static get is() { return "lido-shape"; }
     static get originalStyleUrls() {

package/dist/collection/components/slideFill/lido-slide-fill.js

@@ -190,7 +190,7 @@ export class LidoSlideFill {
         }
     }
     render() {
-        return (h(Host, { key: '12b0ded699dde182bca178f2a58e5dea40536f18', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, h("div", { key: '623f23b8b00bd4d83e99eb264dbb810aaf990ddd', innerHTML: this.svgContent, class: "svg-element" })));
+        return (h(Host, { key: '9addda03d3a509cb0b23e88c59ad22c64dcd0044', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, h("div", { key: 'e0d62ba6795bf0ac28e9e6b7dee5df04c2015ed5', innerHTML: this.svgContent, class: "svg-element" })));
     }
     static get is() { return "lido-slide-fill"; }
     static get originalStyleUrls() {

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

@@ -149,7 +149,7 @@ export class LidoText {
         }
     }
     render() {
-        return (h(Host, { key: '87d82cc0bf52e1eaba8f44d1bdd80c98e896ddbf', 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: '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)));
     }
     static get is() { return "lido-text"; }
     static get originalStyleUrls() {

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { convertUrlToRelative, executeActions, triggerNextContainer, speakIcon, setVisibilityWithDelay, parseProp, storingEachActivityScore, calculateScore } from "../../utils/utils";
+import { convertUrlToRelative, executeActions, triggerNextContainer, speakIcon, setVisibilityWithDelay, parseProp, storingEachActivityScore, calculateScore, } from "../../utils/utils";
 import { fingerUrl, LidoContainer, TraceMode } from "../../utils/constants";
 // Enum for different tracing modes
 export class LidoTrace {
@@ -329,7 +329,7 @@ export class LidoTrace {
         circle.setAttribute('cx', firstPathStart.x.toString());
         circle.setAttribute('cy', firstPathStart.y.toString());
         circle.setAttribute('r', `calc(20)`); // Radius of the draggable circle
-        circle.setAttribute('fill', '#CF1565'); // fill the color for the circle 
+        circle.setAttribute('fill', '#CF1565'); // fill the color for the circle
         (_a = state.svg) === null || _a === void 0 ? void 0 : _a.appendChild(circle);
         state.circle = circle;
         this.resetIdleTimer(state); // ← start idle timer once the SVG is ready
@@ -457,9 +457,7 @@ export class LidoTrace {
                 state.currentFreePath[state.currentPathIndex] = newPolyline;
                 // Store points array for this polyline
                 state.currentFreePolylinePoints = state.currentFreePolylinePoints || [];
-                state.currentFreePolylinePoints[state.currentPathIndex] = [
-                    { x: pointerPos.x, y: pointerPos.y }
-                ];
+                state.currentFreePolylinePoints[state.currentPathIndex] = [{ x: pointerPos.x, y: pointerPos.y }];
                 // Reset lastPointerPos for the new path
                 state.lastPointerPos = pointerPos;
                 // Add a points counter to limit path growth
@@ -630,6 +628,8 @@ export class LidoTrace {
             await new Promise(resolve => setTimeout(resolve, delay));
             this.currentSvgIndex++;
             await this.initializeSVG();
+            const svgContainer = document.getElementById('lido-svgContainer');
+            svgContainer.style.visibility = 'visible';
             this.moving = false;
             return;
         }
@@ -804,7 +804,18 @@ export class LidoTrace {
             // Highlight the current letter keeping the previous ones highlighted
             const letter = letters[index];
             if (letter) {
-                letter.classList.add('letter-highlight');
+                const svgContainer = traceElement.querySelector('#lido-svgContainer');
+                await executeActions("this.alignMatch='true';", textElem, svgContainer);
+                svgContainer.style.animation = 'trace-animation 0.4s forwards';
+                svgContainer.style.setProperty('--trace-width', `${letter.offsetWidth - 5}px`);
+                svgContainer.style.setProperty('--trace-height', `${letter.offsetHeight - 5}px`);
+                await executeActions("this.alignMatch='true';", letter, svgContainer);
+                setTimeout(() => {
+                    letter.classList.add('letter-highlight');
+                    svgContainer.style.transform = '';
+                    svgContainer.style.animation = '';
+                    svgContainer.style.visibility = 'hidden';
+                }, 500);
                 if (this.audioUrls[this.currentSvgIndex]) {
                     console.log('Playing audio:', this.audioUrls[this.currentSvgIndex]);
                     const audio = new Audio(convertUrlToRelative(this.audioUrls[this.currentSvgIndex]));
@@ -839,7 +850,7 @@ export class LidoTrace {
         };
     }
     render() {
-        return (h(Host, { key: 'aef0bf373de0c1d6ac49e7782838d9679c2b093f', 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: 'f5223ad78568213f7965b3ea7eeb56b1b965fe78', style: this.style, id: "lido-svgContainer" })));
+        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" })));
     }
     static get is() { return "lido-trace"; }
     static get originalStyleUrls() {

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

@@ -80,7 +80,7 @@ export class LidoWrap {
         };
     }
     render() {
-        return (h(Host, { key: 'ba0767c8fb70d3c20dbcc0835794ec58d62078b3', class: "lido-wrap", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, disableSpeak: this.disableSpeak }, h("slot", { key: '359ff37390f0d20e650481cd8d531ad4da55b308' })));
+        return (h(Host, { key: '2ac7204f5d41605322ba9545ac3689bdd5f49bcd', class: "lido-wrap", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, disableSpeak: this.disableSpeak }, h("slot", { key: '06a0dcfa475467e094d93e986c63c4cfc9974ac8' })));
     }
     static get is() { return "lido-wrap"; }
     static get originalStyleUrls() {

package/dist/collection/css/animation.css

@@ -34,6 +34,13 @@
     transform: translateX(-2000px);
   }
 }
+@keyframes placeToRight {
+  from {
+  }
+  to {
+    transform: translateX(2000px);
+  }
+}
 
 @keyframes leftToPlace {
   from {
@@ -192,4 +199,14 @@
             drop-shadow(0 0 20px yellow)
             drop-shadow(0 0 30px orange);
   }
+}
+
+@keyframes trace-animation {
+  0% {
+    
+  }
+  100% {
+    width: var(--trace-width, 100px);
+    height: var(--trace-height, 100px);
+  }
 }

package/dist/collection/css/index.css

@@ -44,7 +44,7 @@ body {
 
 .highlight-element {
   border: 2px solid white;
-  box-shadow: 0 2px 4px rgba(151, 150, 150, 0.1) !important;
+  box-shadow: rgb(243, 77, 8) 0px 0px 40px !important;
 }
 
 .drop-element.empty {

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

@@ -136,12 +136,12 @@ function getContainerXml(args) {
     return `<main>
     <lido-container id="lido-container" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="this.sleep='2000';" is-allow-only-correct="${args.PracticeMode}" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4},${args.correct5}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/bg-image.png" dropAttr="EnableAnimation">
 				<!-- Chimple Avatar -->
-		<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="landscape.205px,portrait.195px" width="landscape.209px,portrait.209px" x="landscape.2%,portrait.80%" y="landscape.85px,portrait.146px" ariaHidden="true" bgColor="transparent" visible="true"  onEntry="">
+		<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="landscape.205px,portrait.195px" width="landscape.209px,portrait.209px" x="landscape.-30px,portrait.80%" y="landscape.700px,portrait.146px" ariaHidden="true" bgColor="transparent" visible="true" z="1"  onEntry="">
 				<lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="100%"  width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}">
 				</lido-avatar>
 		</lido-cell>
 			<!-- heading -->
-			<lido-text id="heading" show-speak-icon="true" audio="${args.questionAudio}" width="landscape.auto,portrait.70%" tabIndex="20" visible="true" string="${args.question}" font-family="'Baloo Bhai 2'" fontColor="#323232" font-size="landscape.36px,portrait.36px" bg-Color="transparent" onEntry="this.padding='0px 45px';this.fontWeight='600';"  margin="landscape.120px 0px -25px 0px, portrait.160px 0px -39px 0px" >
+			<lido-text id="heading" show-speak-icon="true" audio="${args.questionAudio}" width="landscape.auto,portrait.70%" tabIndex="20" visible="true" string="${args.question}" font-family="'Baloo Bhai 2'" fontColor="#323232" font-size="landscape.36px,portrait.36px" bg-Color="transparent" onEntry="this.padding='0px 45px';this.fontWeight='600';"  margin="landscape.20px 0px 0px 0px, portrait.160px 0px -39px 0px" >
 			</lido-text>
 		<lido-cell visible="true" flex-direction="landscape., portrait.row-reverse" bg-color="transparent" layout="portrait.row,landscape.col" width="100%" height="100%" onEntry="">
 			
@@ -203,7 +203,7 @@ function getContainerXml(args) {
 
 
 
-			<lido-cell visible="true" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" bg-color="transparent" layout="landscape.row,portrait.col" height="landscape.40%,portrait.96%" width="100%" onEntry="">
+			<lido-cell visible="true" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" bg-color="#fbcab5" layout="landscape.row,portrait.col" height="landscape.50%,portrait.96%" width="95%" border-radius="10px" onEntry="">
 				${(args.dragimg1.length === 0 && args.dragtext1.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="">
 					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent">
 						<lido-cell border-radius="8px"  show-speak-icon="true" audio="${args.drag1Audio}" id="option1" value="${args.option1}" tab-index="6" height="landscape.268px,portrait.240px" width="landscape.200px,portrait.178px" type="drag" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';">

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" 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 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>
       <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 -->