lido-player 0.0.2-alpha-55-dev → 0.0.2-alpha-57-dev

package/dist/cjs/{utils-4b44610b.js → utils-a61cfc6b.js}

@@ -18,6 +18,8 @@ const DropLength = 'dropLength';
 const DropToAttr = 'drop-to';
 const DropTimeAttr = 'drop-time';
 const LidoContainer = 'lido-container';
+const LIDO_COMMON_AUDIO_PATH = '__LIDO_COMMON_AUDIO_PATH__';
+const LIDO_COMMON_AUDIO_READY_EVENT = 'lidoCommonAudioPathReady';
 exports.TraceMode = void 0;
 (function (TraceMode) {
     TraceMode["NoFlow"] = "noFlow";
@@ -175,7 +177,7 @@ function updateBalanceOnDrop(dragElement, dropElement) {
 }
 function calculateValue(elements, operation) {
     if (elements.length === 0)
-        return 0;
+        return null;
     if (operation === "count") {
         return elements.length;
     }
@@ -207,18 +209,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 ? '<' : '=';
@@ -553,9 +552,12 @@ function enableDraggingWithScaling(element) {
                             otherElement.style.border = ''; // Reset border
                             otherElement.style.backgroundColor = 'transparent'; // Reset background color
                         }
-                        if (otherElement.tagName.toLowerCase() === 'lido-image') {
+                        else if (otherElement.tagName.toLowerCase() === 'lido-image') {
                             otherElement.style.opacity = '0';
                         }
+                        else {
+                            otherElement.style.opacity = '1';
+                        }
                     }
                 }
                 else {
@@ -3151,7 +3153,7 @@ function onTouchListenerForOnTouch(element) {
         return;
     const container = document.getElementById('lido-container');
     // const container = element.closest('lido-container') as HTMLElement;
-    if (container && container.getAttribute('disableSpeak') === 'true') {
+    if (container && container.getAttribute('disable-speak') === 'true') {
         return;
     }
     // if (element.closest('[disableSpeak="true"]')) {
@@ -69222,6 +69224,7 @@ const validateObjectiveStatus = async () => {
             if (attach === 'true') {
                 appendingDragElementsInDrop();
             }
+            storingEachActivityScore(true);
             await executeActions(onCorrect, container);
         }
         if (container.getAttribute('dropAttr') === 'EnableAnimation') {
@@ -69237,12 +69240,12 @@ const validateObjectiveStatus = async () => {
     else {
         const isContinueOnCorrect = container.getAttribute('is-continue-on-correct') === 'true';
         if (!isContinueOnCorrect) {
-            triggerNextContainer();
             await calculateScore();
             triggerNextContainer();
         }
         else {
             const onInCorrect = container.getAttribute('onInCorrect');
+            storingEachActivityScore(false);
             await executeActions(onInCorrect, container);
         }
     }
@@ -69265,6 +69268,9 @@ function convertUrlToRelative(url) {
     if ((url === null || url === void 0 ? void 0 : url.startsWith('http')) || (url === null || url === void 0 ? void 0 : url.startsWith('blob')) || (url === null || url === void 0 ? void 0 : url.startsWith('data'))) {
         return url;
     }
+    if (url.startsWith('/Lido-CommonAudios/')) {
+        return url;
+    }
     if (baseUrl) {
         const newUrl = url.startsWith('/') ? url.slice(1) : url;
         if (newUrl.startsWith(baseUrl.replace(/^\/+|\/+$/g, '')))
@@ -69899,6 +69905,8 @@ const updateCalculatorAnswer = (el) => {
 
 exports.ActivityScoreKey = ActivityScoreKey;
 exports.AudioPlayer = AudioPlayer;
+exports.LIDO_COMMON_AUDIO_PATH = LIDO_COMMON_AUDIO_PATH;
+exports.LIDO_COMMON_AUDIO_READY_EVENT = LIDO_COMMON_AUDIO_READY_EVENT;
 exports.LidoContainer = LidoContainer;
 exports.NextContainerKey = NextContainerKey;
 exports.PrevContainerKey = PrevContainerKey;

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { SelectedValuesKey, NextContainerKey, PrevContainerKey, LidoContainer, exitUrl, prevUrl, nextUrl, speakUrl, ActivityScoreKey, } from "../../utils/constants";
+import { SelectedValuesKey, NextContainerKey, PrevContainerKey, LidoContainer, exitUrl, prevUrl, nextUrl, speakUrl, ActivityScoreKey, LIDO_COMMON_AUDIO_PATH } from "../../utils/constants";
 import { dispatchActivityChangeEvent, dispatchGameCompletedEvent, dispatchGameExitEvent } from "../../utils/customEvents";
 import { calculateScale, getCancelBtnPopup, setCancelBtnPopup, executeActions, triggerPrevcontainer, convertUrlToRelative, triggerNextContainer, matchStringPattern } from "../../utils/utils";
 import { AudioPlayer } from "../../utils/audioPlayer";
@@ -31,7 +31,6 @@ export class LidoHome {
             if (index != undefined && index < this.containers.length) {
                 // Move to the next container
                 this.currentContainerIndex = index;
-                console.log('container index ; ', this.currentContainerIndex);
                 // window.dispatchEvent(new CustomEvent('activityChange', { detail: { index: this.currentContainerIndex } }));
                 dispatchActivityChangeEvent(this.currentContainerIndex);
             }
@@ -109,6 +108,7 @@ export class LidoHome {
                 }
             }
         };
+        this.commonAudioPath = undefined;
         this.showNav = true;
         this.activeContainerIndexes = [];
         this.locale = '';
@@ -140,6 +140,9 @@ export class LidoHome {
         // Trigger re-render of containers to update <lido-text> dynamically
         this.containers = [...this.containers];
     }
+    onCommonAudioPathChange(path) {
+        this.publishCommonAudioPath(path);
+    }
     /**
      * Lifecycle method that runs before the component is loaded. It sets up event listeners for transitioning
      * between containers and parses the XML data into containers.
@@ -175,6 +178,7 @@ export class LidoHome {
         });
     }
     componentDidLoad() {
+        this.publishCommonAudioPath(this.commonAudioPath);
         setTimeout(() => {
             this.showDotsandbtn = true;
         }, 10);
@@ -190,6 +194,15 @@ export class LidoHome {
             this.scaleNavbarContainer(); // re-scale navbar on resize
         });
     }
+    publishCommonAudioPath(path) {
+        if (!path)
+            return;
+        const cleanPath = path.replace(/\/+$/, "");
+        window[LIDO_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'));
+    }
     async handleIcons() {
         var _a;
         const checkUrl = async (url, containerUrl, fallback) => {
@@ -341,20 +354,16 @@ export class LidoHome {
     parseContainers(rootElement) {
         const containerElements = rootElement.querySelectorAll('lido-container');
         const containers = Array.from(containerElements).map((container, index) => {
-            console.log("nammadhaaaaaaa", this.activeContainerIndexes.length && !this.activeContainerIndexes.includes(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
         this.containers = containers;
-        console.log("container :::", containers);
     }
     areAllDropsFilled() {
         const drops = Array.from(document.querySelectorAll('[type="drop"]'));
         const drags = Array.from(document.querySelectorAll('[type="drag"]')).filter(drag => drag.getAttribute('drop-to'));
-        console.log('drops', drops);
-        console.log('drags', drags);
         return drops.every(drop => {
             const dropId = drop.id;
             return drags.some(drag => drag.getAttribute('drop-to') === dropId);
@@ -473,6 +482,23 @@ export class LidoHome {
     }
     static get properties() {
         return {
+            "commonAudioPath": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "common-audio-path",
+                "reflect": false
+            },
             "showNav": {
                 "type": "boolean",
                 "mutable": false,
@@ -734,6 +760,9 @@ export class LidoHome {
         return [{
                 "propName": "locale",
                 "methodName": "onLangChange"
+            }, {
+                "propName": "commonAudioPath",
+                "methodName": "onCommonAudioPathChange"
             }, {
                 "propName": "xmlData",
                 "methodName": "onXmlDataChange"

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

@@ -2,8 +2,8 @@ import { Host, h } from "@stencil/core";
 import { convertUrlToRelative, initEventsForElement, parseProp, validateObjectiveStatus } from "../../utils/utils";
 export class LidoMathMatrix {
     constructor() {
-        this.rows = "7";
-        this.cols = "5";
+        this.rows = "10";
+        this.cols = "10";
         this.defualtFill = 0;
         this.leftIndex = false;
         this.topIndex = false;
@@ -80,8 +80,10 @@ export class LidoMathMatrix {
         const fristElement = this.el.querySelector('.slot');
         if (!slotElement.length || !fristElement)
             return;
-        const slotMaxValues = fristElement.offsetWidth < fristElement.offsetHeight ? fristElement.offsetWidth : fristElement.offsetHeight;
+        const elementSize = Number(this.rows) < Number(this.cols) ? this.el.offsetHeight : this.el.offsetWidth;
+        const numberOfSlots = Number(this.rows) > Number(this.cols) ? Number(this.rows) : Number(this.cols);
         const slotParent = this.el.querySelectorAll('.slot-parent');
+        const slotMaxValues = elementSize / numberOfSlots;
         slotParent.forEach(parent => {
             parent.style.width = `${slotMaxValues}px`;
             Array.from(parent.children).forEach(el => {
@@ -185,7 +187,7 @@ export class LidoMathMatrix {
     render() {
         let slotNumber = 1;
         const slotData = this.getSlotData();
-        return (h(Host, { key: '8232965fc3fb0b298233d21d7f50412508dc2256', class: "math-matrix", style: {
+        return (h(Host, { key: 'bbd76954f0a4b67cd89dd10e3c26ce4f7e7712bd', class: "math-matrix", style: {
                 height: this.style.height,
                 width: this.style.width,
                 z: this.style.z,
@@ -230,7 +232,7 @@ export class LidoMathMatrix {
                 },
                 "attribute": "rows",
                 "reflect": false,
-                "defaultValue": "\"7\""
+                "defaultValue": "\"10\""
             },
             "cols": {
                 "type": "string",
@@ -248,7 +250,7 @@ export class LidoMathMatrix {
                 },
                 "attribute": "cols",
                 "reflect": false,
-                "defaultValue": "\"5\""
+                "defaultValue": "\"10\""
             },
             "defualtFill": {
                 "type": "number",

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

@@ -4,6 +4,8 @@
   left: var(--x);
   display: var(--display);
   z-index: var(--z);
+  justify-content: center;
+  align-items: center;
 }
 
 .lido-rectangle {
@@ -53,6 +55,52 @@
   transform: skew(20deg);
 }
 
+.lido-trapezoid {
+  width: var(--trapezoidWidth);
+  height: var(--trapezoidHeight);
+  background-color: var(--bgColor);
+  clip-path: polygon(
+    20% 0%,   /* top left */
+    80% 0%,   /* top right */
+    100% 100%,/* bottom right */
+    0% 100%  /* bottom left */
+  );
+}
+
+.lido-hexagon {
+  width: var(--hexagonWidth);
+  height: var(--hexagonHeight);
+  background-color: var(--bgColor);
+  clip-path: polygon(
+    25% 0%,   /* top left */
+    75% 0%,   /* top right */
+    100% 50%, /* right */
+    75% 100%, /* bottom right */
+    25% 100%, /* bottom left */
+    0% 50%   /* left */
+  );
+}
+
+.lido-cone {
+  width: var(--coneWidth);
+  height: var(--coneHeight);
+  background-color: var(--bgColor);
+  clip-path: polygon(
+    /* Curved top (approximated arc) */
+    15% 10%,
+    25% 4%,
+    35% 1%,
+    50% 0%,
+    65% 1%,
+    75% 4%,
+    85% 10%,
+
+    /* Bottom tip */
+    50% 100%
+  );
+}
+
+
 .lido-star {
   width: var(--starWidth);
   height: var(--starHeight);
@@ -94,3 +142,45 @@
   border-image: radial-gradient(var(--heartBgColor) 69%, #0000 70%) 84.5%/50%;
   clip-path: polygon(-41% 0, 50% 91%, 141% 0);
 }
+
+/* cube */
+
+.cube {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transform-style: preserve-3d;
+  /* animation: spin 6s infinite linear; */
+  transform: rotateX(-20deg) rotateY(45deg);
+}
+
+/* all faces */
+.face {
+  position: absolute;
+  width: var(--face-width,150px);
+  height: var(--face-width,150px);
+  background: var(--face-bg-color,150px); /* cube color */
+  box-shadow: inset -20px -20px 40px rgba(0,0,0,0.3);
+}
+
+/* move faces into a cube shape */
+.front  { transform: rotateY(  0deg) translateZ(var(--face-translate, 75px)); }
+.back   { transform: rotateY(180deg) translateZ(var(--face-translate, 75px)); }
+.right  { transform: rotateY( 90deg) translateZ(var(--face-translate, 75px)); }
+.left   { transform: rotateY(-90deg) translateZ(var(--face-translate, 75px)); }
+.top    { transform: rotateX( 90deg) translateZ(var(--face-translate, 75px)); }
+.bottom { transform: rotateX(-90deg) translateZ(var(--face-translate, 75px)); }
+
+
+
+/* Cylinder */
+.lido-cylinder {
+  /* whatever values/units you want */
+  width: var(--width);
+  height: var(--height);
+  border-radius: 100% / 80px;
+  background: 
+    radial-gradient(50% 40px at 50% 40px, #0003 99.99%, #0000 0),
+    radial-gradient(50% 40px at 50% calc(100% - 40px), #fff3 99.99%, #0000 0),
+    red;
+}

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { initEventsForElement, setVisibilityWithDelay } from "../../utils/utils";
+import { initEventsForElement, setVisibilityWithDelay, parseProp } from "../../utils/utils";
 /**
  * @component LidoShape
  *
@@ -33,6 +33,7 @@ export class LidoShape {
         this.margin = '';
         this.delayVisible = '';
         this.disableSpeak = false;
+        this.style = {};
     }
     /**
      * Lifecycle hook that runs after the component is loaded into the DOM.
@@ -41,20 +42,49 @@ export class LidoShape {
     componentDidLoad() {
         setVisibilityWithDelay(this.el, this.delayVisible);
         initEventsForElement(this.el, this.type);
+        this.updateStyles();
+        this.lido3DShapes();
+    }
+    updateStyles() {
+        const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+        this.style = {
+            x: parseProp(`${this.x}`, orientation),
+            y: parseProp(`${this.y}`, orientation),
+            height: parseProp(`${this.height}`, orientation),
+            width: parseProp(`${this.width}`, orientation),
+        };
+    }
+    lido3DShapes() {
+        const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+        if (this.shapeType === "lido-cube") {
+            const faces = this.el.querySelectorAll(".face");
+            faces.forEach(item => {
+                const face = item;
+                face.style.setProperty("--face-width", parseProp(`${this.width}`, orientation));
+                const translateValue = parseInt(parseProp(`${this.width}`, orientation)) / 2;
+                console.log("translate : ", translateValue);
+                face.style.setProperty("--face-translate", `${translateValue}px`);
+                face.style.setProperty("--face-bg-color", this.bgColor);
+            });
+        }
+        if (this.shapeType === "lido-cylinder") {
+            const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+        }
     }
     render() {
         // Inline styles to position and size the shape component
         const style = {
-            height: this.shapeType !== 'polygon' ? this.height : undefined, // Set height unless it's a polygon
-            width: this.shapeType !== 'polygon' ? this.width : undefined, // Set width unless it's a polygon
-            top: this.y,
-            left: this.x,
+            height: this.shapeType !== 'polygon' ? this.style.height : undefined, // Set height unless it's a polygon
+            width: this.shapeType !== 'polygon' ? this.style.width : undefined, // Set width unless it's a polygon
+            top: this.style.y,
+            left: this.style.x,
             display: this.visible ? 'block' : 'none', // Toggle visibility
             zIndex: this.z,
             backgroundColor: this.shapeType !== 'polygon' ? this.bgColor : 'transparent', // Apply background only if not a polygon
             margin: this.margin,
         };
-        return (h(Host, { key: '7a626d9f00854cf190c08524153086d0e9f139af', 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 }));
+        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" }))));
     }
     static get is() { return "lido-shape"; }
     static get originalStyleUrls() {
@@ -503,5 +533,10 @@ export class LidoShape {
             }
         };
     }
+    static get states() {
+        return {
+            "style": {}
+        };
+    }
     static get elementRef() { return "el"; }
 }

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

@@ -190,7 +190,7 @@ export class LidoSlideFill {
         }
     }
     render() {
-        return (h(Host, { key: '3918ed476b3de4977c53ff0bf576253f68e8c84f', 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: '8f54b0e5de490a162aaa1d7ac9ed485d1628c484', innerHTML: this.svgContent, class: "svg-element" })));
+        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" })));
     }
     static get is() { return "lido-slide-fill"; }
     static get originalStyleUrls() {

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

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { initEventsForElement, convertUrlToRelative, parseProp, setVisibilityWithDelay, attachSpeakIcon } from "../../utils/utils";
 import i18next from "../../utils/i18n";
+import { LIDO_COMMON_AUDIO_PATH, LIDO_COMMON_AUDIO_READY_EVENT } from "../../utils/constants";
 /**
  * @component LidoText
  *
@@ -59,6 +60,30 @@ export class LidoText {
         if (this.showSpeakIcon) {
             attachSpeakIcon(this.el);
         }
+        if (!this.audio || this.audio.trim() === "") {
+            const applyAutoAudio = () => {
+                const autoAudio = this.resolveAutoAudio();
+                if (autoAudio) {
+                    this.audio = autoAudio;
+                    console.log("[LidoText] Auto audio applied:", autoAudio);
+                }
+            };
+            // If path is already available, apply immediately
+            if (window.__LIDO_COMMON_AUDIO_PATH__) {
+                applyAutoAudio();
+            }
+            else {
+                // Otherwise, wait for it
+                window.addEventListener(LIDO_COMMON_AUDIO_READY_EVENT, applyAutoAudio, { once: true });
+            }
+        }
+    }
+    resolveAutoAudio() {
+        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, "");
+        return `${base}/${fileName}.mp3`;
     }
     /**
      * Lifecycle method that runs before the component is rendered.
@@ -124,7 +149,7 @@ export class LidoText {
         }
     }
     render() {
-        return (h(Host, { key: '89ed432cbbf1f3ca2cdcaf4df80628350badef6d', 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: '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)));
     }
     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 } 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 {
@@ -386,7 +386,7 @@ export class LidoTrace {
         });
     }
     // Modified handlePointerMove function
-    handlePointerMove(state) {
+    async handlePointerMove(state) {
         var _a, _b, _c, _d, _e, _f;
         if (!state.isDragging)
             return;
@@ -533,13 +533,15 @@ export class LidoTrace {
             }
             (_f = currentPath.greenPath) === null || _f === void 0 ? void 0 : _f.setAttribute('stroke-dashoffset', (state.totalPathLength - state.lastLength).toString());
             // Completion logic for closed paths: only allow completion if almost all points are traced
-            const COMPLETION_THRESHOLD = 0.90; // 90% of the path must be traced
+            const COMPLETION_THRESHOLD = 0.95; // 95% of the path must be traced
             let percentComplete = state.lastLength / state.totalPathLength;
             let startPoint = currentPath.getPointAtLength(0);
             let endPoint = currentPath.getPointAtLength(currentPath.getTotalLength());
             let pathIsClosed = this.getDistanceSquared(startPoint, endPoint) < 200; // threshold for overlap
             if (pathIsClosed && state.totalPathLength > 50) {
                 if (percentComplete >= COMPLETION_THRESHOLD) {
+                    // Animate the draggable circle & green trace to the very end, then proceed
+                    await this.animatePathToEnd(state, currentPath);
                     if (state.currentPathIndex < state.paths.length - 1) {
                         this.moveToNextPath(state);
                     }
@@ -560,6 +562,55 @@ export class LidoTrace {
         }
         // this.resetIdleTimer(state); // ← keep timer alive
     }
+    // Smoothly animate the draggable circle + green stroke from current lastLength to totalPathLength
+    animatePathToEnd(state, path, duration = 300) {
+        if (!path || !state.svg)
+            return Promise.resolve();
+        if (state._animatingToEnd)
+            return Promise.resolve();
+        state._animatingToEnd = true;
+        const start = state.lastLength || 0;
+        const end = path.getTotalLength();
+        const startTime = performance.now();
+        // get greenPath safely: prefer the attached property, otherwise query by class near the original path
+        const greenPath = path.greenPath ||
+            (path.parentNode && path.parentNode.querySelector('.lido-trace-path-green'));
+        return new Promise(resolve => {
+            const step = (now) => {
+                const t = Math.min(1, (now - startTime) / duration);
+                const eased = t; // linear easing
+                const currentLen = start + (end - start) * eased;
+                state.lastLength = currentLen;
+                // update circle position and green path dashoffset
+                const pt = path.getPointAtLength(currentLen);
+                if (state.circle) {
+                    state.circle.setAttribute('cx', pt.x.toString());
+                    state.circle.setAttribute('cy', pt.y.toString());
+                }
+                if (greenPath) {
+                    greenPath.setAttribute('stroke-dashoffset', (state.totalPathLength - currentLen).toString());
+                }
+                if (t < 1) {
+                    requestAnimationFrame(step);
+                }
+                else {
+                    // ensure fully complete
+                    state.lastLength = end;
+                    if (state.circle) {
+                        const finalPt = path.getPointAtLength(end);
+                        state.circle.setAttribute('cx', finalPt.x.toString());
+                        state.circle.setAttribute('cy', finalPt.y.toString());
+                    }
+                    if (greenPath) {
+                        greenPath.setAttribute('stroke-dashoffset', '0');
+                    }
+                    state._animatingToEnd = false;
+                    resolve();
+                }
+            };
+            requestAnimationFrame(step);
+        });
+    }
     // Move to the next container after completing the current SVG
     async moveToNextContainer() {
         this.isDragging = false;
@@ -572,6 +623,7 @@ export class LidoTrace {
         if (this.animationTrace) {
             await this.playTraceAnimation();
         }
+        storingEachActivityScore(true);
         console.log(`Moving to next container after SVG index: ${this.currentSvgIndex}`);
         const delay = 1000; // milliseconds
         if (this.currentSvgIndex < this.svgUrls.length - 1) {
@@ -586,6 +638,7 @@ export class LidoTrace {
         if (this.el && this.onCorrect) {
             await executeActions(this.onCorrect, this.el);
         }
+        calculateScore();
         console.log('All SVGs completed, hiding component.');
         triggerNextContainer();
     }
@@ -786,7 +839,7 @@ export class LidoTrace {
         };
     }
     render() {
-        return (h(Host, { key: '3f12119394502b6750874aaa50f43bf42e9f63cc', 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: '4fddd90d12251c4020006690f8c769ab452c8f6a', style: this.style, id: "lido-svgContainer" })));
+        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" })));
     }
     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: '50bc5770105477d0ef7cb080957c8d00198c8b09', 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: 'fcd1f5801e34171d1925e39f6c543f229a5d42bd' })));
+        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' })));
     }
     static get is() { return "lido-wrap"; }
     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 -->