lido-player 0.0.2-beta-11 → 0.0.2-beta-13

package/dist/cjs/{decode-COuOLWQt.js → decode-BunxKYHJ.js}

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

package/dist/cjs/{index-CPFtlL1n.js → index-1rmY-0pT.js}

@@ -140,6 +140,7 @@ function toSerializableDetail(detail) {
 function dispatchActivityEndEvent(totalIndex, currentIndex, score, rightMoves, wrongMoves, timeSpentForActivity, lessonTrackingParams, gameCompleted) {
     dispatchCustomEvent(ActivityEndKey, Object.assign(Object.assign({ currentIndex, totalIndex, score, rightMoves, wrongMoves, timeSpentForActivity }, lessonTrackingParams), { gameCompleted }));
     dispatchCustomEvent(MicroProblemEndKey, Object.assign(Object.assign({ currentIndex, totalIndex, score, rightMoves, wrongMoves, timeSpentForActivity }, lessonTrackingParams), { gameCompleted }));
+    console.log(`[Activity End]Activity ${currentIndex + 1}/${totalIndex} - Time Spent: ${timeSpentForActivity}`);
 }
 function dispatchLessonEndEvent(totalIndex, rightMoves, wrongMoves, finalScore, timeSpendForLesson, lessonTrackingParams) {
     dispatchCustomEvent(MicroLessonEndKey, Object.assign({ totalIndex, rightMoves, wrongMoves, finalScore, score: finalScore, timeSpendForLesson }, lessonTrackingParams));
@@ -147,6 +148,7 @@ function dispatchLessonEndEvent(totalIndex, rightMoves, wrongMoves, finalScore,
         return;
     }
     dispatchCustomEvent(LessonEndKey, Object.assign({ totalIndex, rightMoves, wrongMoves, finalScore, score: finalScore, timeSpendForLesson }, lessonTrackingParams));
+    console.log(`[Lesson End]  Lesson: ${lessonTrackingParams === null || lessonTrackingParams === void 0 ? void 0 : lessonTrackingParams.lessonName} (${lessonTrackingParams === null || lessonTrackingParams === void 0 ? void 0 : lessonTrackingParams.lessonId}) - Total Time Spent: ${timeSpendForLesson}`);
 }
 function dispatchNextContainerEvent() {
     dispatchCustomEvent(NextContainerKey, {});
@@ -305,8 +307,8 @@ function dragDropAnimation(container, dragElement, dropElement) {
                         // isCorrect=true;
                         const onCorrect = (container === null || container === void 0 ? void 0 : container.getAttribute('onCorrect')) || '';
                         await executeActions(onCorrect, container);
-                        window.dispatchEvent(new CustomEvent(NextContainerKey));
                         calculateScore();
+                        triggerNextContainer();
                         tempVanishedValues.length = 0;
                     })();
                 }
@@ -1242,8 +1244,8 @@ const appendingDragElementsInDrop = () => {
             if (isAllowOnlyCorrect === true) {
                 if (drop['value'] === drag['value']) {
                     drag.style.transform = 'translate(0,0)';
-                    // drag.style.width = "stretch";
-                    // drag.style.padding = '0'
+                    drag.style.width = "stretch";
+                    drag.style.padding = '0';
                     drop.appendChild(drag);
                     appendedDragIds.add(drag.id);
                     drag.style.pointerEvents = 'none';
@@ -71759,8 +71761,8 @@ async function handleElementClick(element) {
             container.style.pointerEvents = 'none';
             if (!container.getAttribute('game-completed') || container.getAttribute('game-completed') === 'false' || container.getAttribute('game-completed') === null || container.getAttribute('game-completed') === undefined || container.getAttribute('game-completed') === '') {
                 container.setAttribute('game-completed', 'true');
-                triggerNextContainer();
                 calculateScore();
+                triggerNextContainer();
             }
         }
         else {
@@ -73055,11 +73057,12 @@ const storeActivityScore = (score) => {
     const activityScoreKey = index.toString();
     activityScore[activityScoreKey] = score;
     //send Custom Event to parent
-    // window.dispatchEvent(new CustomEvent(ActivityEndKey, { detail: { index: index, totalIndex: totalIndex, score: score } }));
-    const timeSpendForActivity = Math.floor(Timer.getI().getElapsed() / 1000);
-    ACTIVYTY_TIME_SPEND_ARRAY.push(timeSpendForActivity);
+    // window.dispatchEvent(new CustomEvent(ActivityEndKey, { detail: { index: index, totalIndex: totalIndex, score: score } })); 
+    const actualActivitySeconds = Math.ceil(Timer.getI().getElapsed() / 1000);
+    ACTIVYTY_TIME_SPEND_ARRAY.push(actualActivitySeconds);
+    console.log(`[Utils][Activity Time] Activity ${index + 1}/${totalIndex} - Time spent: ${actualActivitySeconds}s`);
     const lessonTrackingParams = getLessonTrackingParams();
-    dispatchActivityEndEvent(totalIndex, index, score, gameScore.rightMoves, gameScore.wrongMoves, timeSpendForActivity, lessonTrackingParams, true);
+    dispatchActivityEndEvent(totalIndex, index, score, gameScore.rightMoves, gameScore.wrongMoves, actualActivitySeconds, lessonTrackingParams, true);
     localStorage.setItem(ActivityScoreKey, JSON.stringify(activityScore));
     if (totalIndex - 1 == index) {
         const scoresArray = Object.values(activityScore);
@@ -73068,11 +73071,13 @@ const storeActivityScore = (score) => {
         console.log('Total Score : ', gameScore.finalScore);
         // window.dispatchEvent(new CustomEvent(LessonEndKey, { detail: { score: finalScore } }));
         const timeSpendForLesson = ACTIVYTY_TIME_SPEND_ARRAY.reduce((sum, current) => sum + current, 0);
+        console.log(`[Utils][Lesson Time] Total lesson time spent: ${timeSpendForLesson}s`);
         dispatchLessonEndEvent(totalIndex, gameScore.totalRightMovesCount, gameScore.totalWrongMovesCount, finalScore, timeSpendForLesson, lessonTrackingParams);
         gameScore.totalRightMovesCount = 0;
         gameScore.totalWrongMovesCount = 0;
         dispatchGameCompletedEvent();
         localStorage.removeItem(ActivityScoreKey);
+        ACTIVYTY_TIME_SPEND_ARRAY.length = 0;
     }
 };
 const handleShowCheck = () => {
@@ -73117,6 +73122,7 @@ const validateObjectiveStatus = async () => {
             }
             storingEachActivityScore(true);
             storeActivityScore(100);
+            gameScore.totalRightMovesCount++;
             gameScore.rightMoves = 0;
             gameScore.wrongMoves = 0;
             triggerNextContainer();
@@ -73173,8 +73179,8 @@ const validateObjectiveStatus = async () => {
         }
         if (!isContinueOnCorrect) {
             container.setAttribute("game-completed", "true");
-            calculateScore();
             await executeActions(onCorrect, container);
+            calculateScore();
             triggerNextContainer();
         }
         else {

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CPFtlL1n.js');
+var index = require('./index-1rmY-0pT.js');
 require('./index-Dy19zuTX.js');
 
 

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-Dy19zuTX.js');
-var index$1 = require('./index-CPFtlL1n.js');
+var index$1 = require('./index-1rmY-0pT.js');
 
 var rive$1 = {exports: {}};
 
@@ -8539,7 +8539,7 @@ const LidoCalculator = class {
             if (!hasScrollAction) {
                 if (!isMultiObjective) {
                     index$1.calculateScore();
-                    window.dispatchEvent(new CustomEvent(index$1.NextContainerKey));
+                    index$1.triggerNextContainer();
                 }
                 else {
                     const objectives = this.objective.split(',').map(obj => obj.trim());
@@ -8547,7 +8547,7 @@ const LidoCalculator = class {
                     if (allSolved) {
                         container.setAttribute("game-completed", "true");
                         index$1.calculateScore();
-                        window.dispatchEvent(new CustomEvent(index$1.NextContainerKey));
+                        index$1.triggerNextContainer();
                     }
                 }
             }
@@ -8575,7 +8575,7 @@ const LidoCalculator = class {
     }
     render() {
         const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '←', '0', 'OK'];
-        return (index.h(index.Host, { key: '2e60f0da19650e88a036b50d84168dda4e00ca8d', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, index.h("lido-cell", { key: 'abb0f62067cc68913820dd357a4bcc0c939af4ff', visible: "true", height: "94px", width: "60px" }, index.h("lido-text", { key: 'e3893471439cd62c07c81ab0de15f8d89025bc49', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "204%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, index.h("img", { key: '27b308fdf641828dd3960e94ddee5dbe098c756b', src: index$1.convertUrlToRelative(this.penIcon), alt: "pen", style: { width: '100%', height: '100%' } }))), index.h("div", { key: '6db194349b7d44ee922d2b28d61bfec7a8e01bf9', class: "lido-calculator-displayParent" }, index.h("div", { key: 'a836fc5b663796c3e86c860f6737ed8b08a9b7b1', class: "lido-calculator-display" }, this.displayValue)), index.h("div", { key: '69ec7d35b0c0d0ed5010568d8cd3d604aac2652b', class: "lido-calculator-buttons" }, numbers.map((num, i) => (index.h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
+        return (index.h(index.Host, { key: '63cfc3e353a89b76ad809a921cc7b51ce6d06e93', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, index.h("lido-cell", { key: '66cc572079209533f8fd4f6c4ca76fdb9435b3b8', visible: "true", height: "94px", width: "60px" }, index.h("lido-text", { key: 'aca3392da8c74ab136268296f2ff584bf5cacd61', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "204%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, index.h("img", { key: '46275d788f7bb3132e657d4902d4471cc7928b39', src: index$1.convertUrlToRelative(this.penIcon), alt: "pen", style: { width: '100%', height: '100%' } }))), index.h("div", { key: '5adb6fbdefa7d9d8c4bd2ada68f580c8c1af298e', class: "lido-calculator-displayParent" }, index.h("div", { key: 'cca5a9c232f9d4dfa31e193e8d9eaddcd83a5052', class: "lido-calculator-display" }, this.displayValue)), index.h("div", { key: '64b70b100e8165dfe6d0dd9522b0362f12856a9e', class: "lido-calculator-buttons" }, numbers.map((num, i) => (index.h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
                 'lido-calculator-btn-special': num === '←' || num === 'OK',
                 'lido-calculator-btn-default': num !== '←' && num !== 'OK'
             }, onClick: () => this.handleClick(num) }))))));
@@ -12301,10 +12301,12 @@ const LidoContainer = class {
     componentDidLoad() {
         this.scaleContainer(this.el);
         const backGroundImage = this.bgImage ? index$1.convertUrlToRelative(this.bgImage) : '';
+        const standalone = this.el.closest('lido-standalone');
+        const backgroundTarget = (standalone === null || standalone === void 0 ? void 0 : standalone.getAttribute('bg-image')) === 'true' ? standalone : document.body;
+        backgroundTarget.style.backgroundColor = this.bgColor;
+        backgroundTarget.style.backgroundImage = backGroundImage ? `url(${backGroundImage})` : 'none';
+        backgroundTarget.style.backgroundPosition = backGroundImage ? 'bottom' : 'none';
         document.body.style.pointerEvents = 'auto';
-        document.body.style.backgroundColor = this.bgColor;
-        document.body.style.backgroundImage = backGroundImage ? `url(${backGroundImage})` : 'none';
-        document.body.style.backgroundPosition = backGroundImage ? `bottom` : 'none';
         // Re-scale the container on window resize or load events
         window.addEventListener('resize', this.handleWindowResize);
         window.addEventListener('load', this.handleWindowLoad);
@@ -12350,7 +12352,7 @@ const LidoContainer = class {
             margin: this.margin,
             userSelect: 'none', // Prevent any field selection
         };
-        return (index.h(index.Host, { key: 'a1aa6af93fb959603c8933dd7bf9e89d1503a680', 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, "highlight-word-by-word": `${this.highlightWordByWord}` }, index.h("lido-text", { key: 'eca0b8de68af79f568e26874cee5b0ed08e14ef7', visible: "false", id: this.templateId, audio: "", string: this.instructName }), index.h("slot", { key: '7ded098722481551600005ded8aeda20f8df409e' })));
+        return (index.h(index.Host, { key: '104e6cc49ab78121a9b7e9939e5def1952567a53', 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, "highlight-word-by-word": `${this.highlightWordByWord}` }, index.h("lido-text", { key: 'ec5e3d78fbf2b8a0cf4b6f918b41c22dc18b2484', visible: "false", id: this.templateId, audio: "", string: this.instructName }), index.h("slot", { key: '384172d5224ae11a20983cda82a3761da456ba2a' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -12827,7 +12829,6 @@ const LidoHome = class {
             this.exitFlag = false;
             if (alertElement) {
                 if (comment === 'exit') {
-                    index$1.dispatchGameExitEvent();
                     index$1.AudioPlayer.getI().stop();
                     index$1.Timer.getI().stop();
                     gameScore.rightMoves = 0;
@@ -12838,6 +12839,7 @@ const LidoHome = class {
                     // clearmemoryStorage();
                     alertElement.remove();
                     this.currentContainerIndex = 0;
+                    index$1.dispatchGameExitEvent();
                 }
                 else {
                     alertElement.remove();
@@ -12950,7 +12952,7 @@ const LidoHome = class {
         }
         // Pure-JS fallback (no wasm asset required)
         try {
-            const brotliDecodeModule = await Promise.resolve().then(function () { return require('./decode-COuOLWQt.js'); }).then(function (n) { return n.decode; });
+            const brotliDecodeModule = await Promise.resolve().then(function () { return require('./decode-BunxKYHJ.js'); }).then(function (n) { return n.decode; });
             const brotliDecompressBuffer = brotliDecodeModule.BrotliDecompressBuffer || ((_a = brotliDecodeModule.default) === null || _a === void 0 ? void 0 : _a.BrotliDecompressBuffer);
             if (typeof brotliDecompressBuffer !== 'function') {
                 throw new Error('BrotliDecompressBuffer function not found in brotli/dec/decode');
@@ -16598,10 +16600,10 @@ const LidoKeyboard = class {
                 this.numberOfClick++;
                 localStorage.removeItem(index$1.SelectedValuesKey);
                 if (this.numberOfClick === this.letterLength) {
-                    index$1.calculateScore();
                     const onCorrrect = container.getAttribute('onCorrect');
                     container.style.pointerEvents = 'none';
                     await index$1.executeActions(onCorrrect, this.el);
+                    index$1.calculateScore();
                     index$1.triggerNextContainer();
                 }
                 else {
@@ -16666,10 +16668,10 @@ const LidoKeyboard = class {
         const keysArray = this.keys.split(',').map(k => k.trim());
         const container = document.getElementById(index$1.LidoContainer);
         const showCheck = container.getAttribute('show-check') === 'true';
-        return (index.h(index.Host, { key: 'e32ea54de44a871db6413fba3447c183dfa6a4f5', class: "lido-keyboard", style: { width: this.style.width, height: this.style.height, position: 'relative', margin: this.style.margin, zIndex: this.z } }, this.keyboardInput && (index.h("div", { key: '65785f434547b1be3f3292c278609b3e54d4e8d2', class: "input-area" }, index.h("input", { key: '4e7d33403852d7e5553cd2fcc571382d97e64073', type: "text", value: this.inputString, class: "input-area", readonly: true }), index.h("lido-text", { key: 'c6f11d777d79605729534aa90d71947db3b66c5d', visible: showCheck ? 'true' : 'false', string: "<<", "bg-color": "black", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "100px", height: "70px", type: "click", onClick: () => {
+        return (index.h(index.Host, { key: '4de3b75fa2905744ad610d147d9b4fe9912dd732', class: "lido-keyboard", style: { width: this.style.width, height: this.style.height, position: 'relative', margin: this.style.margin, zIndex: this.z } }, this.keyboardInput && (index.h("div", { key: '7b5d293c52747700cde9c1069cfbbdae065e64f9', class: "input-area" }, index.h("input", { key: '03a91cd87e6bb4f09bf698087258426dd9232f67', type: "text", value: this.inputString, class: "input-area", readonly: true }), index.h("lido-text", { key: 'd30e033a055df52b30b2f2775c2b3410ee37df63', visible: showCheck ? 'true' : 'false', string: "<<", "bg-color": "black", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "100px", height: "70px", type: "click", onClick: () => {
                 this.inputString = this.inputString.slice(0, -1);
                 this.inputValidation(event);
-            } }), index.h("lido-text", { key: 'def84c7b5a034795f568128488131808e02b1b23', visible: showCheck ? 'true' : 'false', id: "lido-checkButton", string: "Enter", "bg-color": "green", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "150px", height: "70px", type: "click" }))), this.letterLength && (index.h("lido-text", { key: 'c3ddd605afe01356fa977b039e3a7f4903d5512d', visible: "true", string: `${this.numberOfClick}/${this.letterLength}`, "font-size": "60px", "font-color": "white", onEntry: "this.position='absolute'; this.right='0'; this.fontWeight='800';", x: "unset" })), index.h("div", { key: '5f2ae627968e064efc9a9c1db3195900e1d3240e', class: "keyboard-wrapper", style: {
+            } }), index.h("lido-text", { key: '70d78aed7dedbe7d03a05c13c4c320029280bb03', visible: showCheck ? 'true' : 'false', id: "lido-checkButton", string: "Enter", "bg-color": "green", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "150px", height: "70px", type: "click" }))), this.letterLength && (index.h("lido-text", { key: '19306cd12bd98dc8dc7b54b20bad3f2f0318116f', visible: "true", string: `${this.numberOfClick}/${this.letterLength}`, "font-size": "60px", "font-color": "white", onEntry: "this.position='absolute'; this.right='0'; this.fontWeight='800';", x: "unset" })), index.h("div", { key: '826900d6ba26175eb45d2e7e4c02fccce2004db3', class: "keyboard-wrapper", style: {
                 display: 'flex',
                 flexWrap: 'wrap',
                 justifyContent: 'center',
@@ -18796,13 +18798,13 @@ const LidoTrace = class {
             }
             return;
         }
-        index$1.calculateScore();
         const container = document.querySelector(index$1.LidoContainer);
         const containerOnCorrect = container.getAttribute("onCorrect");
         if (container && containerOnCorrect) {
             await new Promise(resolve => setTimeout(resolve, delay));
             await index$1.executeActions(containerOnCorrect, this.el);
         }
+        index$1.calculateScore();
         index$1.triggerNextContainer();
     }
     // Get the pointer position relative to the SVG
@@ -19074,7 +19076,7 @@ const LidoTrace = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '41d9d2ebe01a9a8bb16329558e6b5182857f508d', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, index.h("div", { key: '96c02c2db9961bb13c7c148dfbbb080ae3f1c920', style: this.style, id: "lido-svgContainer" })));
+        return (index.h(index.Host, { key: '31f7f62d73ed98ce0a3b224435e7b64574cf506c', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, index.h("div", { key: '6cf11b7d5f9aeb3c58cbb462e63d3f340384a403', style: this.style, id: "lido-svgContainer" })));
     }
     static get assetsDirs() { return ["svg", "images"]; }
     get el() { return index.getElement(this); }

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

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { executeActions, equationCheck, storingEachActivityScore, calculateScore, triggerNextContainer, convertUrlToRelative } from "../../utils/utils";
-import { NextContainerKey, SelectedValuesKey, CalculatorOk } from "../../utils/constants";
+import { SelectedValuesKey, CalculatorOk } from "../../utils/constants";
 import { AudioPlayer } from "../../utils/audioPlayer";
 export class LidoCalculator {
     constructor() {
@@ -146,7 +146,7 @@ export class LidoCalculator {
             if (!hasScrollAction) {
                 if (!isMultiObjective) {
                     calculateScore();
-                    window.dispatchEvent(new CustomEvent(NextContainerKey));
+                    triggerNextContainer();
                 }
                 else {
                     const objectives = this.objective.split(',').map(obj => obj.trim());
@@ -154,7 +154,7 @@ export class LidoCalculator {
                     if (allSolved) {
                         container.setAttribute("game-completed", "true");
                         calculateScore();
-                        window.dispatchEvent(new CustomEvent(NextContainerKey));
+                        triggerNextContainer();
                     }
                 }
             }
@@ -182,7 +182,7 @@ export class LidoCalculator {
     }
     render() {
         const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '←', '0', 'OK'];
-        return (h(Host, { key: '2e60f0da19650e88a036b50d84168dda4e00ca8d', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, h("lido-cell", { key: 'abb0f62067cc68913820dd357a4bcc0c939af4ff', visible: "true", height: "94px", width: "60px" }, h("lido-text", { key: 'e3893471439cd62c07c81ab0de15f8d89025bc49', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "204%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, h("img", { key: '27b308fdf641828dd3960e94ddee5dbe098c756b', src: convertUrlToRelative(this.penIcon), alt: "pen", style: { width: '100%', height: '100%' } }))), h("div", { key: '6db194349b7d44ee922d2b28d61bfec7a8e01bf9', class: "lido-calculator-displayParent" }, h("div", { key: 'a836fc5b663796c3e86c860f6737ed8b08a9b7b1', class: "lido-calculator-display" }, this.displayValue)), h("div", { key: '69ec7d35b0c0d0ed5010568d8cd3d604aac2652b', class: "lido-calculator-buttons" }, numbers.map((num, i) => (h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
+        return (h(Host, { key: '63cfc3e353a89b76ad809a921cc7b51ce6d06e93', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, h("lido-cell", { key: '66cc572079209533f8fd4f6c4ca76fdb9435b3b8', visible: "true", height: "94px", width: "60px" }, h("lido-text", { key: 'aca3392da8c74ab136268296f2ff584bf5cacd61', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "204%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, h("img", { key: '46275d788f7bb3132e657d4902d4471cc7928b39', src: convertUrlToRelative(this.penIcon), alt: "pen", style: { width: '100%', height: '100%' } }))), h("div", { key: '5adb6fbdefa7d9d8c4bd2ada68f580c8c1af298e', class: "lido-calculator-displayParent" }, h("div", { key: 'cca5a9c232f9d4dfa31e193e8d9eaddcd83a5052', class: "lido-calculator-display" }, this.displayValue)), h("div", { key: '64b70b100e8165dfe6d0dd9522b0362f12856a9e', class: "lido-calculator-buttons" }, numbers.map((num, i) => (h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
                 'lido-calculator-btn-special': num === '←' || num === 'OK',
                 'lido-calculator-btn-default': num !== '←' && num !== 'OK'
             }, onClick: () => this.handleClick(num) }))))));

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

@@ -401,10 +401,12 @@ export class LidoContainer {
     componentDidLoad() {
         this.scaleContainer(this.el);
         const backGroundImage = this.bgImage ? convertUrlToRelative(this.bgImage) : '';
+        const standalone = this.el.closest('lido-standalone');
+        const backgroundTarget = (standalone === null || standalone === void 0 ? void 0 : standalone.getAttribute('bg-image')) === 'true' ? standalone : document.body;
+        backgroundTarget.style.backgroundColor = this.bgColor;
+        backgroundTarget.style.backgroundImage = backGroundImage ? `url(${backGroundImage})` : 'none';
+        backgroundTarget.style.backgroundPosition = backGroundImage ? 'bottom' : 'none';
         document.body.style.pointerEvents = 'auto';
-        document.body.style.backgroundColor = this.bgColor;
-        document.body.style.backgroundImage = backGroundImage ? `url(${backGroundImage})` : 'none';
-        document.body.style.backgroundPosition = backGroundImage ? `bottom` : 'none';
         // Re-scale the container on window resize or load events
         window.addEventListener('resize', this.handleWindowResize);
         window.addEventListener('load', this.handleWindowLoad);
@@ -450,7 +452,7 @@ export class LidoContainer {
             margin: this.margin,
             userSelect: 'none', // Prevent any field selection
         };
-        return (h(Host, { key: 'a1aa6af93fb959603c8933dd7bf9e89d1503a680', 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, "highlight-word-by-word": `${this.highlightWordByWord}` }, h("lido-text", { key: 'eca0b8de68af79f568e26874cee5b0ed08e14ef7', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: '7ded098722481551600005ded8aeda20f8df409e' })));
+        return (h(Host, { key: '104e6cc49ab78121a9b7e9939e5def1952567a53', 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, "highlight-word-by-word": `${this.highlightWordByWord}` }, h("lido-text", { key: 'ec5e3d78fbf2b8a0cf4b6f918b41c22dc18b2484', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: '384172d5224ae11a20983cda82a3761da456ba2a' })));
     }
     static get is() { return "lido-container"; }
     static get originalStyleUrls() {

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

@@ -192,7 +192,6 @@ export class LidoHome {
             this.exitFlag = false;
             if (alertElement) {
                 if (comment === 'exit') {
-                    dispatchGameExitEvent();
                     AudioPlayer.getI().stop();
                     Timer.getI().stop();
                     gameScore.rightMoves = 0;
@@ -203,6 +202,7 @@ export class LidoHome {
                     // clearmemoryStorage();
                     alertElement.remove();
                     this.currentContainerIndex = 0;
+                    dispatchGameExitEvent();
                 }
                 else {
                     alertElement.remove();

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

@@ -71,10 +71,10 @@ export class LidoKeyboard {
                 this.numberOfClick++;
                 localStorage.removeItem(SelectedValuesKey);
                 if (this.numberOfClick === this.letterLength) {
-                    calculateScore();
                     const onCorrrect = container.getAttribute('onCorrect');
                     container.style.pointerEvents = 'none';
                     await executeActions(onCorrrect, this.el);
+                    calculateScore();
                     triggerNextContainer();
                 }
                 else {
@@ -139,10 +139,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: 'e32ea54de44a871db6413fba3447c183dfa6a4f5', 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: '65785f434547b1be3f3292c278609b3e54d4e8d2', class: "input-area" }, h("input", { key: '4e7d33403852d7e5553cd2fcc571382d97e64073', type: "text", value: this.inputString, class: "input-area", readonly: true }), h("lido-text", { key: 'c6f11d777d79605729534aa90d71947db3b66c5d', 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: '4de3b75fa2905744ad610d147d9b4fe9912dd732', 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: '7b5d293c52747700cde9c1069cfbbdae065e64f9', class: "input-area" }, h("input", { key: '03a91cd87e6bb4f09bf698087258426dd9232f67', type: "text", value: this.inputString, class: "input-area", readonly: true }), h("lido-text", { key: 'd30e033a055df52b30b2f2775c2b3410ee37df63', 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: 'def84c7b5a034795f568128488131808e02b1b23', 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: 'c3ddd605afe01356fa977b039e3a7f4903d5512d', 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: '5f2ae627968e064efc9a9c1db3195900e1d3240e', class: "keyboard-wrapper", style: {
+            } }), h("lido-text", { key: '70d78aed7dedbe7d03a05c13c4c320029280bb03', 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: '19306cd12bd98dc8dc7b54b20bad3f2f0318116f', 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: '826900d6ba26175eb45d2e7e4c02fccce2004db3', class: "keyboard-wrapper", style: {
                 display: 'flex',
                 flexWrap: 'wrap',
                 justifyContent: 'center',

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

@@ -769,13 +769,13 @@ export class LidoTrace {
             }
             return;
         }
-        calculateScore();
         const container = document.querySelector(LidoContainer);
         const containerOnCorrect = container.getAttribute("onCorrect");
         if (container && containerOnCorrect) {
             await new Promise(resolve => setTimeout(resolve, delay));
             await executeActions(containerOnCorrect, this.el);
         }
+        calculateScore();
         triggerNextContainer();
     }
     // Get the pointer position relative to the SVG
@@ -1047,7 +1047,7 @@ export class LidoTrace {
         };
     }
     render() {
-        return (h(Host, { key: '41d9d2ebe01a9a8bb16329558e6b5182857f508d', 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: '96c02c2db9961bb13c7c148dfbbb080ae3f1c920', style: this.style, id: "lido-svgContainer" })));
+        return (h(Host, { key: '31f7f62d73ed98ce0a3b224435e7b64574cf506c', 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: '6cf11b7d5f9aeb3c58cbb462e63d3f340384a403', style: this.style, id: "lido-svgContainer" })));
     }
     static get is() { return "lido-trace"; }
     static get originalStyleUrls() {

package/dist/collection/utils/customEvents.js

@@ -24,6 +24,7 @@ function toSerializableDetail(detail) {
 export function dispatchActivityEndEvent(totalIndex, currentIndex, score, rightMoves, wrongMoves, timeSpentForActivity, lessonTrackingParams, gameCompleted) {
     dispatchCustomEvent(ActivityEndKey, Object.assign(Object.assign({ currentIndex, totalIndex, score, rightMoves, wrongMoves, timeSpentForActivity }, lessonTrackingParams), { gameCompleted }));
     dispatchCustomEvent(MicroProblemEndKey, Object.assign(Object.assign({ currentIndex, totalIndex, score, rightMoves, wrongMoves, timeSpentForActivity }, lessonTrackingParams), { gameCompleted }));
+    console.log(`[Activity End]Activity ${currentIndex + 1}/${totalIndex} - Time Spent: ${timeSpentForActivity}`);
 }
 export function dispatchLessonEndEvent(totalIndex, rightMoves, wrongMoves, finalScore, timeSpendForLesson, lessonTrackingParams) {
     dispatchCustomEvent(MicroLessonEndKey, Object.assign({ totalIndex, rightMoves, wrongMoves, finalScore, score: finalScore, timeSpendForLesson }, lessonTrackingParams));
@@ -31,6 +32,7 @@ export function dispatchLessonEndEvent(totalIndex, rightMoves, wrongMoves, final
         return;
     }
     dispatchCustomEvent(LessonEndKey, Object.assign({ totalIndex, rightMoves, wrongMoves, finalScore, score: finalScore, timeSpendForLesson }, lessonTrackingParams));
+    console.log(`[Lesson End]  Lesson: ${lessonTrackingParams === null || lessonTrackingParams === void 0 ? void 0 : lessonTrackingParams.lessonName} (${lessonTrackingParams === null || lessonTrackingParams === void 0 ? void 0 : lessonTrackingParams.lessonId}) - Total Time Spent: ${timeSpendForLesson}`);
 }
 export function dispatchNextContainerEvent() {
     dispatchCustomEvent(NextContainerKey, {});

package/dist/collection/utils/utils.js

@@ -702,11 +702,12 @@ const storeActivityScore = (score) => {
     const activityScoreKey = index.toString();
     activityScore[activityScoreKey] = score;
     //send Custom Event to parent
-    // window.dispatchEvent(new CustomEvent(ActivityEndKey, { detail: { index: index, totalIndex: totalIndex, score: score } }));
-    const timeSpendForActivity = Math.floor(Timer.getI().getElapsed() / 1000);
-    ACTIVYTY_TIME_SPEND_ARRAY.push(timeSpendForActivity);
+    // window.dispatchEvent(new CustomEvent(ActivityEndKey, { detail: { index: index, totalIndex: totalIndex, score: score } })); 
+    const actualActivitySeconds = Math.ceil(Timer.getI().getElapsed() / 1000);
+    ACTIVYTY_TIME_SPEND_ARRAY.push(actualActivitySeconds);
+    console.log(`[Utils][Activity Time] Activity ${index + 1}/${totalIndex} - Time spent: ${actualActivitySeconds}s`);
     const lessonTrackingParams = getLessonTrackingParams();
-    dispatchActivityEndEvent(totalIndex, index, score, gameScore.rightMoves, gameScore.wrongMoves, timeSpendForActivity, lessonTrackingParams, true);
+    dispatchActivityEndEvent(totalIndex, index, score, gameScore.rightMoves, gameScore.wrongMoves, actualActivitySeconds, lessonTrackingParams, true);
     localStorage.setItem(ActivityScoreKey, JSON.stringify(activityScore));
     if (totalIndex - 1 == index) {
         const scoresArray = Object.values(activityScore);
@@ -715,11 +716,13 @@ const storeActivityScore = (score) => {
         console.log('Total Score : ', gameScore.finalScore);
         // window.dispatchEvent(new CustomEvent(LessonEndKey, { detail: { score: finalScore } }));
         const timeSpendForLesson = ACTIVYTY_TIME_SPEND_ARRAY.reduce((sum, current) => sum + current, 0);
+        console.log(`[Utils][Lesson Time] Total lesson time spent: ${timeSpendForLesson}s`);
         dispatchLessonEndEvent(totalIndex, gameScore.totalRightMovesCount, gameScore.totalWrongMovesCount, finalScore, timeSpendForLesson, lessonTrackingParams);
         gameScore.totalRightMovesCount = 0;
         gameScore.totalWrongMovesCount = 0;
         dispatchGameCompletedEvent();
         localStorage.removeItem(ActivityScoreKey);
+        ACTIVYTY_TIME_SPEND_ARRAY.length = 0;
     }
 };
 export const handleShowCheck = () => {
@@ -765,6 +768,7 @@ export const validateObjectiveStatus = async () => {
             }
             storingEachActivityScore(true);
             storeActivityScore(100);
+            gameScore.totalRightMovesCount++;
             gameScore.rightMoves = 0;
             gameScore.wrongMoves = 0;
             triggerNextContainer();
@@ -821,8 +825,8 @@ export const validateObjectiveStatus = async () => {
         }
         if (!isContinueOnCorrect) {
             container.setAttribute("game-completed", "true");
-            calculateScore();
             await executeActions(onCorrect, container);
+            calculateScore();
             triggerNextContainer();
         }
         else {

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

@@ -1,5 +1,5 @@
-import { NextContainerKey, SelectedValuesKey } from "../constants";
-import { calculateScore, executeActions } from "../utils";
+import { SelectedValuesKey } from "../constants";
+import { calculateScore, executeActions, triggerNextContainer } from "../utils";
 const tempVanishedValues = [];
 export function dragDropAnimation(container, dragElement, dropElement) {
     container.style.pointerEvents = "none";
@@ -47,8 +47,8 @@ export function dragDropAnimation(container, dragElement, dropElement) {
                         // isCorrect=true;
                         const onCorrect = (container === null || container === void 0 ? void 0 : container.getAttribute('onCorrect')) || '';
                         await executeActions(onCorrect, container);
-                        window.dispatchEvent(new CustomEvent(NextContainerKey));
                         calculateScore();
+                        triggerNextContainer();
                         tempVanishedValues.length = 0;
                     })();
                 }

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

@@ -943,8 +943,8 @@ export const appendingDragElementsInDrop = () => {
             if (isAllowOnlyCorrect === true) {
                 if (drop['value'] === drag['value']) {
                     drag.style.transform = 'translate(0,0)';
-                    // drag.style.width = "stretch";
-                    // drag.style.padding = '0'
+                    drag.style.width = "stretch";
+                    drag.style.padding = '0';
                     drop.appendChild(drag);
                     appendedDragIds.add(drag.id);
                     drag.style.pointerEvents = 'none';

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

@@ -29,8 +29,8 @@ export async function handleElementClick(element) {
             container.style.pointerEvents = 'none';
             if (!container.getAttribute('game-completed') || container.getAttribute('game-completed') === 'false' || container.getAttribute('game-completed') === null || container.getAttribute('game-completed') === undefined || container.getAttribute('game-completed') === '') {
                 container.setAttribute('game-completed', 'true');
-                triggerNextContainer();
                 calculateScore();
+                triggerNextContainer();
             }
         }
         else {