lido-player 0.0.2-alpha-50 → 0.0.2-alpha-43-dev

package/dist/cjs/{utils-c3e7cbcc.js → utils-079a5e7d.js}

@@ -1,8 +1,7 @@
 'use strict';
 
-const index$1 = require('./index-fe562525.js');
+const index$1 = require('./index-6a69c33a.js');
 
-const DragSelectedMapKey = 'lidoDragSelectedMap';
 const DragMapKey = 'lidoDragMap';
 const SelectedValuesKey = 'lidoSelectedValues';
 const ActivityScoreKey = 'lidoActivityScore';
@@ -16,7 +15,6 @@ const GameExitKey = 'lidoGameExit';
 const ElementDropKey = 'lidoElementDrop';
 const ElementClickKey = 'lidoElementClick';
 const DropLength = 'dropLength';
-const DropHasDrag = 'dropHasDrag';
 const DropToAttr = 'drop-to';
 const DropTimeAttr = 'drop-time';
 const LidoContainer = 'lido-container';
@@ -161,6 +159,88 @@ function stopHighlightForSpeakingElement(element) {
     // element.style.border = '';
 }
 
+function updateBalanceOnDrop(dragElement, dropElement) {
+    const balanceEl = document.querySelector('lido-balance');
+    if (!balanceEl)
+        return;
+    const leftDrag = Array.from(document.querySelectorAll('[drop-to^="lefthandle"]'));
+    const rightDrag = Array.from(document.querySelectorAll('[drop-to^="righthandle"]'));
+    balanceEl.leftVal = calculateValue(leftDrag, balanceEl.operation);
+    balanceEl.rightVal = calculateValue(rightDrag, balanceEl.operation);
+    console.log("leftpan:", balanceEl.leftVal, "rightpan:", balanceEl.rightVal);
+    if (balanceEl.updateTilt) {
+        balanceEl.updateTilt(balanceEl.leftVal, balanceEl.rightVal);
+    }
+}
+function calculateValue(elements, operation) {
+    if (elements.length === 0)
+        return 0;
+    if (operation === "count") {
+        return elements.length;
+    }
+    const ADD = ["add", "+"];
+    const SUBTRACT = ["subtract", "-"];
+    const MULTIPLY = ["multiply", "*"];
+    const DIVIDE = ["divide", "/"];
+    const expr = elements
+        .map(el => el.getAttribute("value") || "0")
+        .join(ADD.includes(operation) ? " + " :
+        SUBTRACT.includes(operation) ? " - " :
+            MULTIPLY.includes(operation) ? " * " :
+                DIVIDE.includes(operation) ? " / " : " + ");
+    try {
+        const res = equationCheck(expr);
+        if (typeof res === "number") {
+            return res;
+        }
+        else if (typeof res === "boolean") {
+            return res ? 1 : 0;
+        }
+        else {
+            return parseFloat(expr) || 0;
+        }
+    }
+    catch (e) {
+        console.warn("invalid exp", expr);
+        return 0;
+    }
+}
+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) && leftVal !== 0;
+    const hasRight = !isNaN(rightVal) && rightVal !== 0;
+    if (!hasLeft || !hasRight) {
+        return false;
+    }
+    const symbol = leftVal > rightVal ? '>' : leftVal < rightVal ? '<' : '=';
+    const res = objectiveString === symbol;
+    console.log("Result:", res);
+    return res;
+}
+
+function buildDropHasDragFromDOM() {
+    const dropHasDrag = {};
+    const dropElements = document.querySelectorAll("[type='drop']");
+    dropElements.forEach(drop => {
+        const tabIndex = drop.getAttribute("tab-index") || drop.id;
+        const assignedDrag = document.querySelector(`[${DropToAttr}="${drop.id}"]`);
+        const isFull = !!assignedDrag;
+        drop.setAttribute("is-full", String(isFull));
+        dropHasDrag[tabIndex] = {
+            drop: drop.id,
+            isFull
+        };
+    });
+    return dropHasDrag;
+}
 // Function to get the scale of an element
 const getElementScale$1 = (el) => {
     el.style.animation = 'unset';
@@ -211,7 +291,7 @@ function enableDraggingWithScaling(element) {
             isDragging = false;
             return;
         }
-        AudioPlayer.getI().stop();
+        // AudioPlayer.getI().stop();
         removeHighlight(element);
         isDragging = true;
         isClicked = true;
@@ -315,7 +395,6 @@ function enableDraggingWithScaling(element) {
     // Start observing the element
     observer.observe(container, observerConfig);
     const onMove = (event) => {
-        console.log("moved");
         if (!isDragging)
             return;
         if (isDraggingDisabled) {
@@ -324,7 +403,7 @@ function enableDraggingWithScaling(element) {
         }
         isClicked = false;
         element.style.transition = 'none';
-        const containerScale = calculateScale();
+        const containerScale = getElementScale$1(container);
         let dx = 0;
         let dy = 0;
         if (event instanceof MouseEvent) {
@@ -346,7 +425,7 @@ function enableDraggingWithScaling(element) {
         // Reset styles for all elements
         allElements.forEach(otherElement => {
             var _a;
-            const dropObject = JSON.parse(localStorage.getItem(DragSelectedMapKey)) || {};
+            const dropObject = buildDragSelectedMapFromDOM();
             const storedTabIndexes = Object.keys(dropObject).map(Number);
             if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
                 if (!(((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
@@ -404,7 +483,7 @@ function enableDraggingWithScaling(element) {
         allElements.forEach(otherElement => {
             allElements.forEach(otherElement => {
                 var _a;
-                const dropObject = JSON.parse(localStorage.getItem(DragSelectedMapKey)) || {};
+                const dropObject = buildDragSelectedMapFromDOM();
                 const storedTabIndexes = Object.keys(dropObject).map(Number);
                 if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
                     if (!(((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
@@ -568,14 +647,18 @@ function handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedV
         let prevDropItem = Object.values(dropHasDrag).find(item => document.getElementById(item.drop) === currentDrop);
         if (prevDropItem) {
             prevDropItem.isFull = false;
-            localStorage.setItem(DropHasDrag, JSON.stringify(dropHasDrag));
+            // container.setAttribute(DropHasDrag, JSON.stringify(dropHasDrag));
+            const dropEl = document.getElementById(prevDropItem.drop);
+            if (dropEl) {
+                dropEl.removeAttribute('is-full');
+            }
         }
         dragToDropMap.delete(dragElement);
     }
     if (selectedValueData) {
         let selectedValue = JSON.parse(selectedValueData);
         selectedValue = selectedValue.filter(value => value != dragElement['value']);
-        localStorage.setItem(SelectedValuesKey, JSON.stringify(selectedValue));
+        container.setAttribute(SelectedValuesKey, JSON.stringify(selectedValue));
     }
     if (dragSelectedData) {
         let dragSelected = JSON.parse(dragSelectedData);
@@ -583,14 +666,15 @@ function handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedV
         if (dragPreDropElement) {
             delete dragSelected[dragPreDropElement.getAttribute('tab-index')];
         }
-        localStorage.setItem(DragSelectedMapKey, JSON.stringify(dragSelected));
+        //  container.setAttribute(DragSelectedMapKey, JSON.stringify(dragSelected));
         dragElement.removeAttribute(DropToAttr);
         updateDropBorder(currentDrop);
+        updateBalanceOnDrop();
     }
     const allElements = document.querySelectorAll("[type='drop']");
     allElements.forEach(otherElement => {
         var _a;
-        const dropObject = JSON.parse(localStorage.getItem(DragSelectedMapKey)) || {};
+        const dropObject = buildDragSelectedMapFromDOM();
         const storedTabIndexes = Object.keys(dropObject).map(Number);
         if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
             if (!(((_a = otherElement.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
@@ -615,20 +699,22 @@ function handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedV
     });
     handleShowCheck();
 }
+const tempVanishedValues = [];
 async function onElementDropComplete(dragElement, dropElement) {
-    var _a, _b, _c, _d, _e;
-    const selectedValueData = localStorage.getItem(SelectedValuesKey) || '';
-    const dragSelectedData = localStorage.getItem(DragSelectedMapKey);
-    localStorage.getItem(DragMapKey);
-    console.log("dragggedddd elem", { value: dragElement.getAttribute("value") });
-    let dropHasDrag = JSON.parse(localStorage.getItem(DropHasDrag) || ' {}');
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const container = document.getElementById(LidoContainer);
+    const selectedValueData = (_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : "[]";
+    const dragSelectedData = JSON.stringify(buildDragSelectedMapFromDOM());
+    const dropSelectedDataobject = buildDragSelectedMapFromDOM();
+    JSON.stringify(dropSelectedDataobject);
+    console.log("dragggedddd elem", { value: dragElement.getAttribute("value") });
+    let dropHasDrag = buildDropHasDragFromDOM();
     if (!dropElement) {
         handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
         return;
     }
     const dropTabIndex = dropElement.getAttribute('tab-index');
-    if ((_a = dropHasDrag[dropTabIndex]) === null || _a === void 0 ? void 0 : _a.isFull) {
+    if ((_b = dropHasDrag[dropTabIndex]) === null || _b === void 0 ? void 0 : _b.isFull) {
         handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
         return;
     }
@@ -640,9 +726,10 @@ async function onElementDropComplete(dragElement, dropElement) {
             handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
             return;
         }
+        // let isCorrect = dropElement.getAttribute('value').toLowerCase().includes(dragElement.getAttribute('value').toLowerCase());
         let isCorrect;
-        const dragValue = ((_b = dragElement.getAttribute('value')) === null || _b === void 0 ? void 0 : _b.trim()) || "";
-        const dropValue = ((_c = dropElement.getAttribute('value')) === null || _c === void 0 ? void 0 : _c.trim()) || "";
+        const dragValue = ((_c = dragElement.getAttribute('value')) === null || _c === void 0 ? void 0 : _c.trim()) || "";
+        const dropValue = ((_d = dropElement.getAttribute('value')) === null || _d === void 0 ? void 0 : _d.trim()) || "";
         if (Number(dragValue)) {
             const dragNum = Number(dragValue);
             //array of numbers
@@ -656,8 +743,7 @@ async function onElementDropComplete(dragElement, dropElement) {
             }
         }
         else {
-            //strings
-            isCorrect = dropValue.toLowerCase().includes(dragValue.toLowerCase());
+            isCorrect = dropElement.getAttribute('value').toLowerCase().includes(dragElement.getAttribute('value').toLowerCase());
         }
         if (!isCorrect) {
             dragElement.style.transition = 'transform 0.5s ease';
@@ -672,7 +758,7 @@ async function onElementDropComplete(dragElement, dropElement) {
                 //   delete stored[oldDropIndex];
                 //   localStorage.setItem(localStorageKey, JSON.stringify(stored));
                 // }
-                // handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData, dropSelectedData);
+                handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
             }, 500);
             if (dragElement['type'] === 'option') {
                 const childs = Array.from(container.querySelectorAll(`[value="${dragElement['value']}"]`));
@@ -691,6 +777,7 @@ async function onElementDropComplete(dragElement, dropElement) {
             if (checkdropAttr && checkdropAttr.toLowerCase() === DropMode.EnableAnimation.toLowerCase()) {
                 container.style.pointerEvents = "none";
                 setTimeout(() => {
+                    var _a, _b, _c;
                     const div = document.createElement('div');
                     container.append(div);
                     div.classList.add('after-drop-popup-container');
@@ -699,6 +786,11 @@ async function onElementDropComplete(dragElement, dropElement) {
                     const allDragElements = container.querySelectorAll('[type="drag"]');
                     const dragParents = Array.from(allDragElements).map(el => el.parentElement);
                     const allSameParent = dragParents.every(parent => parent === dragElement.parentElement);
+                    JSON.parse((_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '[]');
+                    const vanishedValue = (_b = dragElement.getAttribute('value')) !== null && _b !== void 0 ? _b : (_c = dragElement.textContent) === null || _c === void 0 ? void 0 : _c.trim();
+                    if (vanishedValue) {
+                        tempVanishedValues.push(vanishedValue);
+                    }
                     // Remove from old parents
                     if (allSameParent) {
                         dragElement.remove();
@@ -722,6 +814,16 @@ async function onElementDropComplete(dragElement, dropElement) {
                         setTimeout(() => {
                             div.remove();
                             container.style.pointerEvents = 'auto';
+                            const objective = container.getAttribute('objective');
+                            if (objective && tempVanishedValues.map(v => v.trim()).sort().join(',') === objective.split(',').map(v => v.trim()).sort().join(',')) {
+                                (async () => {
+                                    isCorrect = true;
+                                    const onCorrect = (container === null || container === void 0 ? void 0 : container.getAttribute('onCorrect')) || '';
+                                    await executeActions(onCorrect, container);
+                                    window.dispatchEvent(new CustomEvent(NextContainerKey));
+                                    tempVanishedValues.length = 0;
+                                })();
+                            }
                         }, 800); // match animation duration
                     }, 2000); // stay for 2 seconds
                 }, 250);
@@ -729,6 +831,12 @@ async function onElementDropComplete(dragElement, dropElement) {
         }
     }
     if (dropElement) {
+        let selectedValues = JSON.parse((_e = container.getAttribute(SelectedValuesKey)) !== null && _e !== void 0 ? _e : "[]");
+        const dragValue = dragElement.getAttribute('value');
+        if (dragValue && !selectedValues.includes(dragValue)) {
+            selectedValues.push(dragValue);
+        }
+        container.setAttribute(SelectedValuesKey, JSON.stringify(selectedValues));
         if (dropElement.getAttribute('drop-attr') === 'stretch') {
             if (!dropElement.hasAttribute('data-original-width')) {
                 const computedStyle = window.getComputedStyle(dropElement);
@@ -737,15 +845,16 @@ async function onElementDropComplete(dragElement, dropElement) {
             const dragWidth = dragElement.offsetWidth;
             dropElement.style.width = `${dragWidth}px`;
         }
-        if (!(((_d = dropElement.getAttribute('dropAttr')) === null || _d === void 0 ? void 0 : _d.toLowerCase()) === DropMode.Diagonal) && (dropElement.getAttribute('minDrops') === '1' || !dropElement.getAttribute('minDrops'))) {
+        if (!(((_f = dropElement.getAttribute('dropAttr')) === null || _f === void 0 ? void 0 : _f.toLowerCase()) === DropMode.Diagonal) && (dropElement.getAttribute('minDrops') === '1' || !dropElement.getAttribute('minDrops'))) {
             const isisFull = Object.values(dropHasDrag).find(item => document.getElementById(item.drop) === dropElement);
             if (isisFull) {
                 isisFull.isFull = true;
+                dropElement.setAttribute('is-full', 'true');
             }
             else {
                 console.warn('No matching drop item found for', dropElement);
             }
-            localStorage.setItem(DropHasDrag, JSON.stringify(dropHasDrag));
+            //  container.setAttribute(DropHasDrag, JSON.stringify(dropHasDrag));
             if (dragSelectedData) {
                 let dragSelected = JSON.parse(dragSelectedData);
                 for (const key in dragSelected) {
@@ -758,7 +867,7 @@ async function onElementDropComplete(dragElement, dropElement) {
                         }
                     }
                 }
-                localStorage.setItem(DragSelectedMapKey, JSON.stringify(dragSelected));
+                //  container.setAttribute(DragSelectedMapKey, JSON.stringify(dragSelected));
             }
             dragElement.classList.add('dropped');
             if (dragElement) {
@@ -771,7 +880,7 @@ async function onElementDropComplete(dragElement, dropElement) {
                 dragElement.setAttribute(DropTimeAttr, new Date().getTime().toString());
             }
             // Check for overlaps and highlight only the most overlapping element
-            if (dropElement && !((_e = dropHasDrag[dropTabIndex]) === null || _e === void 0 ? void 0 : _e.isFull)) {
+            if (dropElement && !((_g = dropHasDrag[dropTabIndex]) === null || _g === void 0 ? void 0 : _g.isFull)) {
                 let mostOverlappedElement = findMostoverlappedElement$1(dragElement, 'drag');
                 const isAllowOnlyOneDrop = dropElement.getAttribute('is-allow-only-one-drop') === 'true' || '';
                 if (mostOverlappedElement && isAllowOnlyOneDrop) {
@@ -780,7 +889,7 @@ async function onElementDropComplete(dragElement, dropElement) {
                     const allElements = document.querySelectorAll("[type='drop']");
                     allElements.forEach(otherElement => {
                         var _a;
-                        const dropObject = JSON.parse(localStorage.getItem(DragSelectedMapKey)) || {};
+                        const dropObject = buildDragSelectedMapFromDOM();
                         const storedTabIndexes = Object.keys(dropObject).map(Number);
                         if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
                             if (!(((_a = otherElement.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
@@ -812,13 +921,14 @@ async function onElementDropComplete(dragElement, dropElement) {
         handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
         return;
     }
+    updateBalanceOnDrop();
     if (dragSelectedData) {
         let currentDrop = dragToDropMap.get(dragElement);
         if (currentDrop) {
             let prevDropItem = Object.values(dropHasDrag).find(item => document.getElementById(item.drop) === currentDrop);
             if (prevDropItem) {
                 prevDropItem.isFull = false;
-                localStorage.setItem(DropHasDrag, JSON.stringify(dropHasDrag));
+                // container.setAttribute(DropHasDrag, JSON.stringify(dropHasDrag));
                 reduceSizeToOriginal();
             }
         }
@@ -831,9 +941,9 @@ async function onElementDropComplete(dragElement, dropElement) {
         // }
         // localStorage.setItem(DragSelectedMapKey, JSON.stringify(dragSelected));
     }
-    let dropLength = JSON.parse(localStorage.getItem(DropLength)) || 0;
+    let dropLength = parseInt((_h = container.getAttribute(DropLength)) !== null && _h !== void 0 ? _h : '0');
     dropLength += 1;
-    localStorage.setItem(DropLength, JSON.stringify(dropLength));
+    container.setAttribute(DropLength, String(dropLength));
     if (dropLength === countPatternWords(dropElement['value'])) {
         const isisFull = Object.values(dropHasDrag).find(item => document.getElementById(item.drop) === dropElement);
         if (isisFull) {
@@ -842,9 +952,10 @@ async function onElementDropComplete(dragElement, dropElement) {
         else {
             console.warn('No matching drop item found for', dropElement);
         }
-        localStorage.setItem(DropHasDrag, JSON.stringify(dropHasDrag));
+        // memoryStorage[DropHasDrag] = dropHasDrag;
+        //  container.setAttribute(DropHasDrag, JSON.stringify(dropHasDrag));
         dropLength = 0;
-        localStorage.setItem(DropLength, JSON.stringify(dropLength));
+        container.setAttribute(DropLength, String(dropLength));
     }
     dragToDropMap.set(dragElement, dropElement);
     // Add pulse and highlight effect for a successful match
@@ -852,9 +963,9 @@ async function onElementDropComplete(dragElement, dropElement) {
     dispatchElementDropEvent(dragElement, dropElement, isCorrect);
     storingEachActivityScore(isCorrect);
     dragElement.style.opacity = '1';
+    await onActivityComplete(dragElement, dropElement);
     const allDropElements = document.querySelectorAll('.drop-element');
     allDropElements.forEach(el => updateDropBorder(el));
-    await onActivityComplete(dragElement, dropElement);
 }
 function updateDropBorder(element) {
     if (!element || !element.classList.contains('drop-element'))
@@ -873,7 +984,9 @@ function updateDropBorder(element) {
         element.classList.remove('empty');
     }
     else {
-        element.classList.add('empty');
+        if (!element.classList.contains('math-matrix')) {
+            element.classList.add('empty');
+        }
         element.classList.remove('filled');
     }
 }
@@ -881,15 +994,12 @@ function handleDropElement(element) {
     // let nextIndex = Object.keys(dropHas).length; // Get next index
     // dropHas[nextIndex] = { drop: element, isFull: false };
     element.classList.add('drop-element');
-    let dropHas = JSON.parse(localStorage.getItem(DropHasDrag) || '{}');
-    const tabIndex = element.getAttribute('tab-index');
-    if (typeof dropHas !== 'object' || dropHas === null) {
-        dropHas = {};
-    }
-    if (!dropHas[tabIndex]) {
-        dropHas[tabIndex] = { drop: element.id, isFull: false };
-        localStorage.setItem(DropHasDrag, JSON.stringify(dropHas));
-    }
+    buildDragSelectedMapFromDOM();
+    element.getAttribute('tab-index');
+    // if (!dropHas[tabIndex]) {
+    //   dropHas[tabIndex] = { drop: element.id, isFull: false };
+    //   // localStorage.setItem(DropHasDrag, JSON.stringify(dropHas));
+    // }
     element.onclick = () => {
         onClickDropOrDragElement(element, 'drop');
     };
@@ -956,7 +1066,7 @@ async function onClickDropOrDragElement(element, type) {
 const dragToDropMap = new Map();
 async function onClickDragElement(element) {
     AudioPlayer.getI().stop();
-    const dropElements = JSON.parse(localStorage.getItem(DropHasDrag) || '{}');
+    const dropElements = buildDropHasDragFromDOM();
     const dragEl = element;
     if (!dragEl) {
         console.error('Element not found');
@@ -1002,9 +1112,12 @@ const appendingDragElementsInDrop = () => {
         });
     });
 };
+const container = document.getElementById(LidoContainer);
 const reduceSizeToOriginal = () => {
     const dropItems = document.querySelectorAll("[type='drop']");
-    let dropHasDrag = JSON.parse(localStorage.getItem(DropHasDrag) || ' {}');
+    let dropHasDrag = buildDragSelectedMapFromDOM();
+    if (!dropItems || !container)
+        return;
     if (!dropHasDrag || !dropItems)
         return;
     dropItems.forEach(dropElement => {
@@ -1013,6 +1126,7 @@ const reduceSizeToOriginal = () => {
         const tabIndex = drop.getAttribute('tab-index');
         if (((_a = drop === null || drop === void 0 ? void 0 : drop.getAttribute('drop-attr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Stretch && dropHasDrag[tabIndex].isFull === false) {
             const originalWidth = drop.getAttribute('data-original-width');
+            dropElement.removeAttribute('is-full');
             if (originalWidth) {
                 drop.style.width = originalWidth;
                 drop.removeAttribute('data-original-width');
@@ -1203,7 +1317,7 @@ function enableReorderDrag(element) {
         isClicked = false;
         event.preventDefault();
         const containerRect = container.getBoundingClientRect();
-        const containerScale = calculateScale();
+        const containerScale = getElementScale(container);
         const newLeft = (point.clientX - containerRect.left - offsetXInElement) / containerScale;
         const newTop = (point.clientY - containerRect.top - offsetYInElement) / containerScale;
         element.style.left = `${newLeft}px`;
@@ -1270,16 +1384,18 @@ function enableReorderDrag(element) {
             else {
                 if (element.parentElement['type'] !== 'category') {
                     executeActions('this.alignMatch=true', divEl, element);
-                    divEl.replaceWith(element);
+                    setTimeout(() => {
+                        divEl.replaceWith(element);
+                    }, 500);
                 }
                 else {
                     const categoryElement = element.parentElement;
-                    const dragValues = JSON.parse(localStorage.getItem(DragSelectedMapKey)) || {};
+                    const dragValues = buildDragSelectedMapFromDOM();
                     const tabKey = categoryElement.getAttribute('tab-index');
                     const targetValue = element['value'];
                     if (dragValues[tabKey]) {
                         dragValues[tabKey] = dragValues[tabKey].filter((el) => el !== targetValue);
-                        localStorage.setItem(DragSelectedMapKey, JSON.stringify(dragValues));
+                        // localStorage.setItem(DragSelectedMapKey, JSON.stringify(dragValues));
                     }
                     optionArea.scrollTo({
                         top: optionArea.scrollHeight,
@@ -1287,6 +1403,7 @@ function enableReorderDrag(element) {
                     });
                     optionArea.appendChild(element);
                     element.classList.remove('dropped');
+                    element.removeAttribute('drop-to');
                     if (dummy) {
                         dummy.remove();
                     }
@@ -1325,12 +1442,12 @@ function enableReorderDrag(element) {
                 category = categoryArr[0];
             }
             if (element.parentElement.getAttribute('type') === 'category') {
-                const dragValues = JSON.parse(localStorage.getItem(DragSelectedMapKey)) || {};
+                const dragValues = buildDragSelectedMapFromDOM();
                 const tabKey = category.getAttribute('tab-index');
                 const targetValue = element['value'];
                 if (dragValues[tabKey]) {
                     dragValues[tabKey] = dragValues[tabKey].filter((el) => el !== targetValue);
-                    localStorage.setItem(DragSelectedMapKey, JSON.stringify(dragValues));
+                    // localStorage.setItem(DragSelectedMapKey, JSON.stringify(dragValues));
                 }
                 const dummy = createDummyElement(element);
                 optionArea.appendChild(dummy);
@@ -1344,6 +1461,7 @@ function enableReorderDrag(element) {
                     resetElementStyles(element);
                     dummy.replaceWith(element);
                     element.classList.remove('dropped');
+                    element.removeAttribute('drop-to');
                 }, 100);
                 return;
             }
@@ -1492,13 +1610,15 @@ function moveWithAnimation(target, overlapped) {
 }
 // Drop Completed
 const wordDropComplete = (block, element) => {
+    var _a;
+    console.log("worddrop");
     const container = document.getElementById(LidoContainer);
     const objective = container.getAttribute('objective');
     const objectiveArray = objective.split(',');
-    let wordArray = JSON.parse(localStorage.getItem(SelectedValuesKey)) || [];
+    let wordArray = JSON.parse((_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '[]');
     const wordBlock = block.children;
     wordArray = Array.from(wordBlock).map(child => child.getAttribute('value'));
-    localStorage.setItem(SelectedValuesKey, JSON.stringify(wordArray));
+    container.setAttribute(SelectedValuesKey, JSON.stringify(wordArray));
     const elementIndex = wordArray.indexOf(element['value']);
     if (elementIndex >= 0) {
         const res = matchStringPattern(element['value'], [objectiveArray[elementIndex].trim()]);
@@ -1513,7 +1633,7 @@ const wordDropComplete = (block, element) => {
 };
 async function onDropToCategory(dragElement, categoryElement) {
     dragElement.classList.add('dropped');
-    let dragSelected = JSON.parse(localStorage.getItem(DragSelectedMapKey)) || {};
+    let dragSelected = buildDragSelectedMapFromDOM();
     let elementArr = dragSelected[categoryElement.getAttribute('tab-index')];
     if (Array.isArray(elementArr)) {
         if (elementArr.includes(dragElement['value']))
@@ -1525,7 +1645,10 @@ async function onDropToCategory(dragElement, categoryElement) {
             dragSelected[key].splice(index, 1);
         }
     }
-    localStorage.setItem(DragSelectedMapKey, JSON.stringify(dragSelected));
+    if (categoryElement === null || categoryElement === void 0 ? void 0 : categoryElement.id) {
+        dragElement.setAttribute(DropToAttr, categoryElement.id);
+    }
+    // localStorage.setItem(DragSelectedMapKey, JSON.stringify(dragSelected));
     await onActivityComplete(dragElement, categoryElement);
 }
 
@@ -1744,13 +1867,15 @@ function slidingWithScaling(element) {
     });
 }
 const slideCompleted = (slideElement) => {
-    const slideArr = JSON.parse(localStorage.getItem(SelectedValuesKey)) || [];
+    var _a;
+    const container = document.getElementById(LidoContainer);
+    const slideArr = JSON.parse((_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '[]');
     const allSlideElements = document.querySelectorAll("[type='slide']");
     let index = 0;
     allSlideElements.forEach(item => {
         slideArr[index++] = item['value'];
     });
-    localStorage.setItem(SelectedValuesKey, JSON.stringify(slideArr));
+    container.setAttribute(SelectedValuesKey, JSON.stringify(slideArr));
     const objectiveString = document.getElementById(LidoContainer)['objective'];
     const objectiveArray = objectiveString.split(',');
     const elementIndex = slideArr.indexOf(slideElement['value']);
@@ -3012,6 +3137,7 @@ function addClickListenerForClickType(element) {
         return;
     }
     const onClick = async () => {
+        var _a;
         const lido_buttons = element.getAttribute('id');
         if (lido_buttons === 'lido-arrow-left' || lido_buttons === 'lido-arrow-right') {
             return;
@@ -3028,25 +3154,15 @@ function addClickListenerForClickType(element) {
         }
         if (container['objective'].length === 0)
             return;
-        // element.style.border = '2px solid yellow';
-        // element.style.boxShadow = '0px 0px 10px rgba(255, 255, 0, 0.7)';
-        // element.style.transition = 'transform 0.2s ease, border 0.5s ease';
-        // element.style.transform = 'scale(1.1)';
-        // element.style.transform = 'scale(1)';
-        // element.style.border = '';
-        // element.style.boxShadow = '';
         const isActivated = element.classList.contains('lido-element-selected');
-        let selectedValue = JSON.parse(localStorage.getItem(SelectedValuesKey)) || [];
+        let selectedValue = JSON.parse((_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '[]');
         if (objective.length === 1) {
-            localStorage.setItem(SelectedValuesKey, JSON.stringify([element['value']]));
+            container.setAttribute(SelectedValuesKey, JSON.stringify([element['value']]));
             const isCorrect = objective.includes(element['value']);
             dispatchClickEvent(element, isCorrect);
             if (isCorrect) {
                 const onCorrect = element.getAttribute('onCorrect');
-                if (!(element.id && element.id.startsWith('key-button'))) {
-                    element.style.pointerEvents = 'none';
-                }
-                document.body.style.pointerEvents = 'none';
+                // element.style.pointerEvents = 'none';
                 await executeActions(onCorrect, element);
             }
             else {
@@ -3054,7 +3170,11 @@ function addClickListenerForClickType(element) {
                 await executeActions(onInCorrect, element);
                 // showWrongAnswerAnimation([element]);
             }
-            storingEachActivityScore(isCorrect);
+            // const calciEl=document.querySelector('#lidoCalculator') as any; 
+            const isInsideCalculator = element.closest('#lidoCalculator') !== null;
+            if (!isInsideCalculator) {
+                storingEachActivityScore(isCorrect);
+            }
             handleShowCheck();
             return;
         }
@@ -3065,8 +3185,8 @@ function addClickListenerForClickType(element) {
             element.classList.remove('lido-element-selected');
             executeActions(element.getAttribute('onEntry'), element);
             selectedValue = selectedValue.filter(item => item != element['value']);
-            localStorage.setItem(SelectedValuesKey, JSON.stringify(selectedValue));
-            let multiOptionScore = JSON.parse(localStorage.getItem(DragSelectedMapKey)) || {};
+            container.setAttribute(SelectedValuesKey, JSON.stringify([element['value']]));
+            let multiOptionScore = buildDragSelectedMapFromDOM();
             const valueToRemove = element['value'];
             const keyToRemove = Object.keys(multiOptionScore).find(key => multiOptionScore[key].includes(valueToRemove));
             if (keyToRemove) {
@@ -3074,10 +3194,9 @@ function addClickListenerForClickType(element) {
                 if (multiOptionScore[keyToRemove].length === 0) {
                     delete multiOptionScore[keyToRemove];
                 }
-                localStorage.setItem(DragSelectedMapKey, JSON.stringify(multiOptionScore));
                 const sortedKeys = Object.keys(multiOptionScore).sort((a, b) => parseInt(a) - parseInt(b));
                 const sortedValues = sortedKeys.reduce((acc, key) => acc.concat(multiOptionScore[key]), []);
-                localStorage.setItem(SelectedValuesKey, JSON.stringify(sortedValues));
+                container.setAttribute(SelectedValuesKey, JSON.stringify(sortedValues));
             }
             if (showCheck && selectedValue.length === 0) {
                 checkButton.classList.add('lido-disable-check-button');
@@ -3088,20 +3207,18 @@ function addClickListenerForClickType(element) {
             element.classList.add('lido-element-selected');
             const valueToFind = element['value'];
             const key = Object.keys(objective).find(key => objective[key] === valueToFind);
-            let multiOptionScore = JSON.parse(localStorage.getItem(DragSelectedMapKey)) || {};
+            let multiOptionScore = buildDragSelectedMapFromDOM();
             if (!key) {
                 multiOptionScore[objective.length + selectedValue.length] = [valueToFind];
             }
             else {
                 multiOptionScore[key] = [valueToFind];
             }
-            localStorage.setItem(DragSelectedMapKey, JSON.stringify(multiOptionScore));
             const sortedKeys = Object.keys(multiOptionScore).sort((a, b) => parseInt(a) - parseInt(b));
             const sortedValues = sortedKeys.reduce((acc, key) => acc.concat(multiOptionScore[key]), []);
-            localStorage.setItem(SelectedValuesKey, JSON.stringify(sortedValues));
+            container.setAttribute(SelectedValuesKey, JSON.stringify(sortedValues));
             const isCorrect = objective.includes(element['value']);
             dispatchClickEvent(element, isCorrect);
-            AudioPlayer.getI().stop();
             if (isCorrect) {
                 const onCorrect = element.getAttribute('onCorrect');
                 await executeActions(onCorrect, element);
@@ -3113,8 +3230,11 @@ function addClickListenerForClickType(element) {
             }
             storingEachActivityScore(isCorrect);
         }
-        if (!showCheck && countPatternWords(objective) === countPatternWords(selectedValue)) {
-            validateObjectiveStatus();
+        const isInsideCalculator = element.closest('#lidoCalculator') !== null;
+        if (!isInsideCalculator) {
+            if (!showCheck && countPatternWords(objective) === countPatternWords(selectedValue)) {
+                validateObjectiveStatus();
+            }
         }
     };
     element.addEventListener('click', onClick);
@@ -67932,7 +68052,431 @@ function calculateFill(input, currentFill = 0) {
     return Math.max(0, Math.min(100, value));
 }
 
+// Helper to animate and remove the active equation cell
+const animationToRemoveEquationSolvedCellForNimbleTable = (activeCell, allCalculateTypes) => {
+    return new Promise((resolve) => {
+        const keyframes = `
+      @keyframes widthDecrease {
+        0% { 
+          background-color: ${activeCell.style.backgroundColor};
+          height: ${activeCell.style.height};
+          margin: ${activeCell.style.margin};
+          ${activeCell.innerHTML = ""}
+        }
+        100% { background-color: transparent; height: 0px; margin: 0px; }
+      }`;
+        const styleSheet = document.styleSheets[0];
+        styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
+        activeCell.style.animation = `widthDecrease 0.1s`;
+        activeCell.addEventListener('animationend', () => {
+            activeCell.style.height = '0px';
+            activeCell.style.margin = '0px';
+            activeCell.style.backgroundColor = 'transparent';
+            activeCell.remove();
+            // Trigger next container if last cell
+            if (allCalculateTypes.length === 1) {
+                setTimeout(() => triggerNextContainer(), 2000);
+            }
+            resolve();
+        });
+    });
+};
+// Function: checks and animates equation when correct
+const checkEquationOfActiveCell = async (container) => {
+    var _a;
+    const calculatorValue = (_a = container.querySelector("#lidoCalculator")) === null || _a === void 0 ? void 0 : _a.getAttribute("value");
+    const allCalculateTypes = document.querySelectorAll("[type='calculate']");
+    const activeCell = allCalculateTypes[0];
+    const activeCellValue = Number(activeCell["value"]);
+    const calculteValue = Number(calculatorValue);
+    if (!activeCell || calculteValue !== activeCellValue)
+        return;
+    const equation = activeCell["string"];
+    // Replace equation after a short delay
+    //await new Promise(r => setTimeout(r, 200));
+    activeCell.innerHTML = equation.replaceAll("?", calculteValue);
+    const element2 = container.querySelector("#dummy112");
+    element2.innerHTML = activeCell.innerHTML;
+    // Animate and clean up
+    await animationToRemoveEquationSolvedCellForNimbleTable(activeCell, allCalculateTypes);
+};
+// Function: handles equation check when clicked on OK
+let score = 0;
+const handleSolvedEquationSubmissionAndScoreUpdate = async () => {
+    var _a;
+    const container = document.getElementById('lido-container');
+    const calculatorValue = (_a = container.querySelector("#lidoCalculator")) === null || _a === void 0 ? void 0 : _a.getAttribute("value");
+    const allCalculateTypes = document.querySelectorAll("[type='calculate']");
+    const activeCell = allCalculateTypes[0];
+    const isContinueOnCorrect = container.getAttribute("is-continue-on-correct") === "true";
+    const activeCellValue = Number(activeCell["value"]);
+    const calculteValue = Number(calculatorValue);
+    const element1 = container.querySelector("#dummy111");
+    const element2 = container.querySelector("#dummy112");
+    // PRACTICE MODE (continue only if correct)
+    if (isContinueOnCorrect) {
+        if (element2.innerHTML.length > 0 && activeCellValue === calculteValue) {
+            element1.innerHTML = element2.innerHTML;
+        }
+        await checkEquationOfActiveCell(container);
+    }
+    // TEST MODE (store all, animate regardless of correctness)
+    else {
+        if (calculatorValue.length > 0) {
+            if (calculatorValue === activeCell["value"]) {
+                score++;
+                console.log("SCOREEEE", score);
+            }
+            else {
+                if (score > 0) {
+                    score--;
+                }
+                console.log("SCOREEEE", score);
+            }
+            if (element2.innerHTML.length > 0) {
+                element1.innerHTML = element2.innerHTML;
+            }
+            const equation = activeCell["string"];
+            // Replace value visually
+            activeCell.innerHTML = equation.replaceAll("?", calculteValue);
+            element2.innerHTML = activeCell.innerHTML;
+            // Animate
+            await animationToRemoveEquationSolvedCellForNimbleTable(activeCell, allCalculateTypes);
+        }
+    }
+};
+
+function handlingMatrix(element) {
+    const container = document.querySelector(LidoContainer);
+    if (!container)
+        return;
+    const defualtMatrix = element;
+    adjustSizeForSlots(container, defualtMatrix);
+    splitSlots(container, defualtMatrix);
+}
+const splitSlots = (container, defualtMatrix) => {
+    const defualtElements = defualtMatrix.querySelectorAll('.slot');
+    const allDropMatrixes = container.querySelectorAll('lido-math-matrix[type="drop"]');
+    const allDragMatrixes = container.querySelectorAll('lido-math-matrix[type="drag"]');
+    let slot = 1;
+    for (let i = 0; i < allDropMatrixes.length; i++) {
+        const el = allDropMatrixes[i];
+        const rowCount = el.getAttribute('rows') ? parseInt(el.getAttribute('rows')) : 1;
+        const colCount = el.getAttribute('cols') ? parseInt(el.getAttribute('cols')) : 1;
+        if (rowCount === 1 || colCount === 1) {
+            if (rowCount === colCount) {
+                const numbers = Array.from({ length: 100 }, (_, i) => i + 1)
+                    .sort(() => Math.random() - 0.5) // Shuffle
+                    .slice(0, 10); // Take first 10 unique numbers
+                allDropMatrixes.forEach((item, index) => {
+                    const dropElement = item;
+                    const dropPosition = defualtElements[numbers[index]];
+                    // Safeguard if index > available numbers
+                    if (!dropPosition)
+                        return;
+                    postioningDropElement(dropElement, dropPosition);
+                    const dragElement = allDragMatrixes[index];
+                    dragElement.setAttribute('text', (numbers[index] + 1).toString());
+                });
+                // return;
+            }
+            if (rowCount === 2 && colCount === 1) {
+                const pairs = generateDoubleSquares(10);
+                console.log('pairs double : ', pairs);
+                allDropMatrixes.forEach((item, index) => {
+                    const dropElement = item;
+                    const dropPosition = defualtElements[pairs[index][0] - 1];
+                    postioningDropElement(dropElement, dropPosition);
+                });
+                allDragMatrixes.forEach((item, index) => {
+                    const dragElement = item;
+                    dragElement.setAttribute('text', pairs[index].toString());
+                });
+                break;
+            }
+            if (rowCount === 5) {
+                const dropPositionElements = generateHalfHorizontalStripes(i);
+                const dropPosition = defualtElements[dropPositionElements[0] - 1];
+                const dragElement = allDragMatrixes[i];
+                dragElement.setAttribute('text', dropPositionElements.toString());
+                postioningDropElement(el, dropPosition);
+            }
+            if (rowCount === 10) {
+                const dropPosition = defualtElements[slot];
+                const dragElement = allDragMatrixes[i];
+                dragElement.setAttribute('text', Array.from({ length: 10 }, (_, i) => slot + 1 + i * 10).toString());
+                postioningDropElement(el, dropPosition);
+                slot = slot + 2;
+            }
+            else if (colCount === 10) {
+                const dropPosition = defualtElements[10 + (slot - 1)];
+                const dragElement = allDragMatrixes[i];
+                dragElement.setAttribute('text', Array.from({ length: 10 }, (_, i) => i + 10 + slot).toString());
+                postioningDropElement(el, dropPosition);
+                slot = slot + 20;
+            }
+        }
+        else if (rowCount === 3 || colCount === 3) {
+            const slotCell = generateSlotsFromDrops(container);
+            const cellNumbers = Object.keys(slotCell).map(key => slotCell[key].cells);
+            allDragMatrixes.forEach((matrix, index) => {
+                const dragElement = matrix;
+                // let dragTextAttr = dragElement.getAttribute('text');
+                if (dragElement) {
+                    dragElement.setAttribute('text', cellNumbers[index].toString());
+                }
+            });
+            allDropMatrixes.forEach((matrix, index) => {
+                const dropElement = matrix;
+                const dropPosition = defualtElements[slotCell[`slot-${index + 1}`].cells[0] - 1];
+                postioningDropElement(dropElement, dropPosition);
+            });
+            break; // stops the loop immediately
+        }
+        else if (rowCount === 2 || colCount === 2) {
+            if (rowCount === colCount) {
+                const pairs = generate2by2Squares(10);
+                allDropMatrixes.forEach((item, index) => {
+                    const dropElement = item;
+                    const dropPosition = defualtElements[pairs[index][0] - 1];
+                    postioningDropElement(dropElement, dropPosition);
+                });
+                allDragMatrixes.forEach((item, index) => {
+                    const dragElement = item;
+                    dragElement.setAttribute('text', pairs[index].toString());
+                });
+                break;
+            }
+        }
+    }
+};
+function generateSlotsFromDrops(container) {
+    const gridSize = 10;
+    let availableCells = Array.from({ length: 100 }, (_, i) => i + 1);
+    const occupied = new Set();
+    const slots = {};
+    let generated = 0;
+    const getCell = (row, col) => row * gridSize + col + 1;
+    // Get all <lido-math-matrix type="drop">
+    const allDropMatrixes = container.querySelectorAll('lido-math-matrix[type="drop"]');
+    for (const matrix of Array.from(allDropMatrixes)) {
+        const width = parseInt(matrix.getAttribute('cols') || '1');
+        const height = parseInt(matrix.getAttribute('rows') || '1');
+        const possiblePositions = [];
+        // generate all possible top-left positions
+        for (let row = 0; row <= gridSize - height; row++) {
+            for (let col = 0; col <= gridSize - width; col++) {
+                const cells = [];
+                let canPlace = true;
+                for (let r = 0; r < height; r++) {
+                    for (let c = 0; c < width; c++) {
+                        const cell = getCell(row + r, col + c);
+                        if (occupied.has(cell)) {
+                            canPlace = false;
+                            break;
+                        }
+                        cells.push(cell);
+                    }
+                    if (!canPlace)
+                        break;
+                }
+                if (canPlace)
+                    possiblePositions.push(cells);
+            }
+        }
+        if (possiblePositions.length === 0) {
+            console.warn(`No space left for matrix ${generated + 1}`);
+            continue;
+        }
+        // Pick a random valid position
+        const randomCells = possiblePositions[Math.floor(Math.random() * possiblePositions.length)];
+        // Mark as occupied & remove from available
+        randomCells.forEach(c => {
+            occupied.add(c);
+            availableCells = availableCells.filter(x => x !== c);
+        });
+        generated++;
+        slots[`slot-${generated}`] = { cells: randomCells, width, height };
+    }
+    return slots;
+}
+const postioningDropElement = (dropElement, dropPosition) => {
+    const container = document.getElementById(LidoContainer);
+    const containerScale = getElementScale$1(container);
+    dropElement.style.transform = 'translate(0,0)';
+    const posRect = dropPosition.getBoundingClientRect();
+    const dropRect = dropElement.getBoundingClientRect();
+    const posCenterX = posRect.left + posRect.width / 2;
+    const posCenterY = posRect.top + posRect.height / 2;
+    const dropCenterX = dropRect.left + dropRect.width / 2;
+    const dropCenterY = dropRect.top + dropRect.height / 2;
+    const scaledLeft = (posCenterX - dropCenterX) / containerScale;
+    const scaledTop = (posCenterY - dropCenterY) / containerScale;
+    const rowCount = dropElement.getAttribute('rows') ? parseInt(dropElement.getAttribute('rows')) : 1;
+    const colCount = dropElement.getAttribute('cols') ? parseInt(dropElement.getAttribute('cols')) : 1;
+    const elementWidth = parseInt(dropPosition.style.width);
+    if (rowCount === 1 || colCount === 1) {
+        if (rowCount === colCount) {
+            dropElement.style.transform = `translate(${scaledLeft}px, ${scaledTop}px)`;
+            return;
+        }
+        else if (rowCount > colCount) {
+            if (rowCount === 10) {
+                dropElement.style.transform = `translate(${scaledLeft + (elementWidth * 4 + elementWidth / 2)}px, ${scaledTop}px)`;
+            }
+            else if (rowCount === 5) {
+                dropElement.style.transform = `translate(${scaledLeft + elementWidth * 2}px, ${scaledTop}px)`;
+            }
+            else if (rowCount === 2) {
+                dropElement.style.transform = `translate(${scaledLeft + elementWidth / 2}px, ${scaledTop}px)`;
+            }
+        }
+        else if (rowCount < colCount) {
+            if (colCount === 10) {
+                dropElement.style.transform = `translate(${scaledLeft}px, ${scaledTop + elementWidth * 4 + elementWidth * 0.2 + elementWidth / 2}px)`;
+            }
+            else if (colCount === 5) {
+                dropElement.style.transform = `translate(${scaledLeft}px, ${scaledTop + elementWidth * 2 + elementWidth * 0.0921}px)`;
+            }
+        }
+        return;
+    }
+    if (rowCount === colCount) {
+        if (rowCount === 2) {
+            dropElement.style.transform = `translate(${scaledLeft + elementWidth / 2}px, ${scaledTop + elementWidth / 2 + 4}px)`;
+            return;
+        }
+        dropElement.style.transform = `translate(${scaledLeft + elementWidth}px, ${scaledTop + elementWidth + 4}px)`;
+        return;
+    }
+    if (rowCount === 3) {
+        if (colCount === 2) {
+            dropElement.style.transform = `translate(${scaledLeft + elementWidth}px, ${scaledTop + elementWidth / 2 + 4}px)`;
+            return;
+        }
+        else if (colCount === 1) {
+            dropElement.style.transform = `translate(${scaledLeft + elementWidth}px, ${scaledTop}px)`;
+            return;
+        }
+    }
+    if (rowCount === 2) {
+        if (colCount === 3) {
+            dropElement.style.transform = `translate(${scaledLeft + elementWidth / 2}px, ${scaledTop + elementWidth + 4}px)`;
+            return;
+        }
+        else if (colCount === 1) {
+            dropElement.style.transform = `translate(${scaledLeft + elementWidth / 2}px, ${scaledTop}px)`;
+            return;
+        }
+    }
+};
+const adjustSizeForSlots = (container, defualtMatrix) => {
+    const defualtElement = defualtMatrix.querySelector('.slot');
+    const width = defualtElement.style.width;
+    const allDropMatrixes = container.querySelectorAll('lido-math-matrix[type="drop"]');
+    const allDragMatrixes = container.querySelectorAll('lido-math-matrix[type="drag"]');
+    allDragMatrixes.forEach(item => {
+        const el = item;
+        Array.from(el.querySelectorAll('.slot')).forEach(slot => {
+            const slotEl = slot;
+            slotEl.parentElement.style.width = width;
+            slotEl.style.width = width;
+            slotEl.style.height = width;
+        });
+    });
+    allDropMatrixes.forEach(item => {
+        const el = item;
+        Array.from(el.querySelectorAll('.slot')).forEach(slot => {
+            const slotEl = slot;
+            slotEl.parentElement.style.width = width;
+            slotEl.style.width = width;
+            slotEl.style.height = width;
+        });
+    });
+};
+function generateHalfHorizontalStripes(index) {
+    const numbers = Array.from({ length: 10 }, (_, i) => index + 1 + i * 10);
+    const randomPlace = Math.floor(Math.random() * 6);
+    const startSlot = numbers[randomPlace];
+    console.log('kedachuruchu', Array.from({ length: 5 }, (_, i) => startSlot + i * 10));
+    return Array.from({ length: 5 }, (_, i) => startSlot + i * 10);
+}
+function generate2by2Squares(count = 16) {
+    const gridSize = 10;
+    const squares = [];
+    const usedCells = new Set();
+    function getCell(row, col) {
+        return (row - 1) * gridSize + col;
+    }
+    while (squares.length < count) {
+        const row = Math.floor(Math.random() * (gridSize - 1)) + 1; // 1–9
+        const col = Math.floor(Math.random() * (gridSize - 1)) + 1; // 1–9
+        const square = [getCell(row, col), getCell(row, col + 1), getCell(row + 1, col), getCell(row + 1, col + 1)];
+        // Skip if overlapping with previous
+        if (square.some(cell => usedCells.has(cell)))
+            continue;
+        // Mark cells as used
+        square.forEach(cell => usedCells.add(cell));
+        squares.push(square);
+    }
+    return squares;
+}
+function generateDoubleSquares(count = 16) {
+    const gridSize = 10;
+    const pairs = [];
+    const usedCells = new Set();
+    function getCell(row, col) {
+        return (row - 1) * gridSize + col;
+    }
+    while (pairs.length < count) {
+        const row = Math.floor(Math.random() * (gridSize - 1)) + 1; // 1–9
+        const col = Math.floor(Math.random() * gridSize) + 1; // 1–10
+        const top = getCell(row, col);
+        const bottom = getCell(row + 1, col);
+        // Skip if already used
+        if (usedCells.has(top) || usedCells.has(bottom))
+            continue;
+        pairs.push([top, bottom]);
+        usedCells.add(top);
+        usedCells.add(bottom);
+    }
+    return pairs;
+}
+
 const gameScore = new GameScore();
+function buildDragSelectedMapFromDOM() {
+    const map = {};
+    const draggedEls = document.querySelectorAll(`[${DropToAttr}]`);
+    draggedEls.forEach(dragEl => {
+        var _a, _b, _c;
+        const to = dragEl.getAttribute(DropToAttr);
+        if (!to)
+            return;
+        const dropEl = document.getElementById(to);
+        if (!dropEl)
+            return;
+        const tabIndex = (_a = dropEl.getAttribute('tab-index')) !== null && _a !== void 0 ? _a : to;
+        if (!map[tabIndex])
+            map[tabIndex] = [];
+        const value = (_c = (_b = dragEl.getAttribute('value')) !== null && _b !== void 0 ? _b : dragEl.value) !== null && _c !== void 0 ? _c : '';
+        map[tabIndex].push(value);
+    });
+    return map;
+}
+function getSortedValuesArrayFromMap(map) {
+    const sortedKeys = Object.keys(map).sort((a, b) => parseInt(a) - parseInt(b));
+    const sortedValues = sortedKeys.reduce((acc, key) => {
+        const values = map[key];
+        if (values.length > 1) {
+            acc.push(`(${values.join('|')})`);
+        }
+        else {
+            acc.push(values[0]);
+        }
+        return acc;
+    }, []);
+    return sortedValues;
+}
 function format(first, middle, last) {
     return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
 }
@@ -67977,14 +68521,17 @@ const initEventsForElement = async (element, type) => {
             enableOptionArea(element);
             break;
         }
+        case 'checkerBlock': {
+            handlingMatrix(element);
+            break;
+        }
     }
     onTouchListenerForOnTouch(element);
 };
 // Function to execute actions parsed from the onMatch string
 const executeActions = async (actionsString, thisElement, element) => {
-    var _a;
+    var _a, _b, _c, _d, _e, _f, _g;
     const actions = parseActions(actionsString);
-    body.style.pointerEvents = 'none';
     for (let i = 0; i < actions.length; i++) {
         const action = actions[i];
         const queriedElement = document.querySelector(action.actor);
@@ -67997,13 +68544,25 @@ const executeActions = async (actionsString, thisElement, element) => {
                     targetElement.style.transform = currentTransform !== 'none' ? `${currentTransform} ${action.value}` : action.value;
                     break;
                 }
+                case 'revealImageValue': {
+                    if (targetElement) {
+                        revealImageValue(targetElement); // call your function here
+                    }
+                    break;
+                }
+                case 'scrollCellAfterEquationSolved': {
+                    if (targetElement) {
+                        handleSolvedEquationSubmissionAndScoreUpdate();
+                    }
+                    break;
+                }
                 case 'alignMatch': {
                     const dropElement = targetElement;
                     const dragElement = element;
                     const container = document.getElementById(LidoContainer);
                     const containerScale = getElementScale$1(container);
                     dragElement.style.transform = 'translate(0,0)';
-                    console.log('logg alinmatch');
+                    console.log("logg alinmatch");
                     const dropRect = dropElement.getBoundingClientRect();
                     const dragRect = dragElement.getBoundingClientRect();
                     const dropCenterX = dropRect.left + dropRect.width / 2;
@@ -68049,7 +68608,7 @@ const executeActions = async (actionsString, thisElement, element) => {
                     if (container.getAttribute('is-continue-on-correct') !== 'true') {
                         targetElement.style.pointerEvents = 'none';
                     }
-                    await validateObjectiveStatus();
+                    validateObjectiveStatus();
                     break;
                 }
                 case 'prevBtn': {
@@ -68089,10 +68648,76 @@ const executeActions = async (actionsString, thisElement, element) => {
                     }
                     break;
                 }
+                case 'highlightStarsAndDisapper': {
+                    const value = action.value;
+                    if (value && targetElement) {
+                        console.log('highlightStar action triggered');
+                        console.log('Target Element:', targetElement);
+                        await HighlightStarsOneByOne(targetElement, value);
+                    }
+                    break;
+                }
+                case 'boxAnimationOneByOne': {
+                    const value = action.value;
+                    if (value && targetElement) {
+                        await animateBoxCells(targetElement, value);
+                    }
+                    break;
+                }
+                case 'questionBoxAnimate': {
+                    const value = action.value;
+                    if (value && targetElement) {
+                        await questionBoxAnimation(targetElement, value);
+                    }
+                    break;
+                }
                 case 'slideAnimation': {
                     slideAnimation();
                     break;
                 }
+                case 'showBalanceSymbol': {
+                    const balanceEl = document.querySelector('lido-balance');
+                    if (!balanceEl)
+                        break;
+                    const leftVal = Number((_b = balanceEl.leftVal) !== null && _b !== void 0 ? _b : Number((_d = (_c = balanceEl.dataset) === null || _c === void 0 ? void 0 : _c.leftVal) !== null && _d !== void 0 ? _d : 0));
+                    const rightVal = Number((_e = balanceEl.rightVal) !== null && _e !== void 0 ? _e : Number((_g = (_f = balanceEl.dataset) === null || _f === void 0 ? void 0 : _f.rightVal) !== null && _g !== void 0 ? _g : 0));
+                    const symbol = leftVal > rightVal ? '>' : leftVal < rightVal ? '<' : '=';
+                    balanceEl.balanceSymbol = symbol;
+                    balanceEl.dataset.balanceSymbol = symbol;
+                    if (balanceEl.revealSymbol) {
+                        await balanceEl.revealSymbol();
+                    }
+                    else {
+                        balanceEl.showSymbol = true;
+                    }
+                    break;
+                }
+                case 'hideBalanceSymbol': {
+                    const balanceEl = document.querySelector('lido-balance');
+                    if (!balanceEl)
+                        break;
+                    if (balanceEl.hideSymbol) {
+                        await balanceEl.hideSymbol();
+                    }
+                    else {
+                        balanceEl.showSymbol = false;
+                    }
+                    break;
+                }
+                case 'sumTogetherAnimation': {
+                    const value = action.value;
+                    if (value) {
+                        SumTogetherAnimation(targetElement, value);
+                    }
+                    break;
+                }
+                case 'addText': {
+                    const value = action.value;
+                    if (value) {
+                        targetElement.textContent += value;
+                    }
+                    break;
+                }
                 default: {
                     targetElement.style[action.action] = action.value;
                     break;
@@ -68100,7 +68725,6 @@ const executeActions = async (actionsString, thisElement, element) => {
             }
         }
     }
-    body.style.pointerEvents = 'auto';
 };
 const afterDropDragHandling = (dragElement, dropElement) => {
     const container = document.getElementById(LidoContainer);
@@ -68191,6 +68815,9 @@ const matchStringPattern = (pattern, arr) => {
     const patternGroups = pattern.split(',').map(group => group.trim());
     let arrIndex = 0;
     let options = new Set();
+    if (patternGroups.length == 0) { // If pattern is empty
+        return true;
+    }
     if (patternGroups.length > 0) {
         if (arr.length === 0)
             return false; // If pattern is not empty but user provided array is empty, return false
@@ -68275,38 +68902,36 @@ const calculateScore = () => {
     gameScore.wrongMoves = 0;
 };
 async function onActivityComplete(dragElement, dropElement) {
-    var _a, _b;
+    var _a;
     const container = document.getElementById(LidoContainer);
     if (!container)
         return;
     await executeActions("this.alignMatch='true'", dropElement, dragElement);
-    let dragScore = JSON.parse((_a = localStorage.getItem(DragSelectedMapKey)) !== null && _a !== void 0 ? _a : '{}');
-    const tabindex = dropElement.getAttribute('tab-index');
-    if (!dragScore[tabindex]) {
-        dragScore[tabindex] = [];
+    if (dragElement && dropElement) {
+        const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
+        if (isCorrect) {
+            const onCorrect = dropElement.getAttribute('onCorrect');
+            if (onCorrect) {
+                await executeActions(onCorrect, dropElement, dragElement);
+            }
+        }
+        else {
+            const onInCorrect = dropElement.getAttribute('onInCorrect');
+            await executeActions(onInCorrect, dropElement, dragElement);
+        }
     }
-    dragScore[tabindex].push(dragElement['value']);
-    localStorage.setItem(DragSelectedMapKey, JSON.stringify(dragScore));
+    let dragScore = buildDragSelectedMapFromDOM();
+    const sortedValues = getSortedValuesArrayFromMap(dragScore);
+    container.setAttribute(SelectedValuesKey, JSON.stringify(sortedValues));
     //localStorage
-    let drag = JSON.parse((_b = localStorage.getItem(DragMapKey)) !== null && _b !== void 0 ? _b : '{}');
+    let drag = JSON.parse((_a = localStorage.getItem(DragMapKey)) !== null && _a !== void 0 ? _a : '{}');
     const index = dropElement.getAttribute('tab-index');
     if (!drag[index]) {
         drag[index] = [];
     }
     drag[index].push(dragElement.id);
     // localStorage.setItem(DragMapKey, JSON.stringify(drag));
-    const sortedKeys = Object.keys(dragScore).sort((a, b) => parseInt(a) - parseInt(b));
-    const sortedValues = sortedKeys.reduce((acc, key) => {
-        const values = dragScore[key];
-        if (values.length > 1) {
-            acc.push(`(${values.join('|')})`);
-        }
-        else {
-            acc.push(values[0]);
-        }
-        return acc;
-    }, []);
-    localStorage.setItem(SelectedValuesKey, JSON.stringify(sortedValues));
+    Object.keys(dragScore).sort((a, b) => parseInt(a) - parseInt(b));
     if (dragElement && dropElement) {
         const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
         if (isCorrect) {
@@ -68323,8 +68948,7 @@ async function onActivityComplete(dragElement, dropElement) {
     const allElements = document.querySelectorAll("[type='drop']");
     allElements.forEach(otherElement => {
         var _a;
-        const dropObject = JSON.parse(localStorage.getItem(DragSelectedMapKey)) || {};
-        const storedTabIndexes = Object.keys(dropObject).map(Number);
+        const storedTabIndexes = Object.keys(dragScore).map(Number);
         if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
             if (!(((_a = otherElement.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
                 if (otherElement.tagName.toLowerCase() === 'lido-text') {
@@ -68376,77 +69000,97 @@ const handleShowCheck = () => {
     var _a, _b;
     const container = document.getElementById(LidoContainer);
     const objectiveString = container['objective'];
-    const selectValues = (_a = localStorage.getItem(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '';
+    const selectValues = (_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '';
     const checkButton = document.querySelector('#lido-checkButton');
-    if (!selectValues || countPatternWords(selectValues) !== countPatternWords(objectiveString)) {
+    if (!selectValues || countPatternWords(selectValues) < countPatternWords(objectiveString)) {
         executeActions("this.addClass='lido-disable-check-button'", checkButton);
         return;
     }
     const showCheck = container.getAttribute('show-check') == 'true';
     if (showCheck) {
         (_b = checkButton === null || checkButton === void 0 ? void 0 : checkButton.classList) === null || _b === void 0 ? void 0 : _b.remove('lido-disable-check-button');
+        const balanceEl = document.querySelector('lido-balance');
+        if (balanceEl) {
+            if (!checkButton.hasAttribute('data-balance-listener')) {
+                checkButton.addEventListener('click', async function onClick() {
+                    if (balanceResult && res) {
+                        await executeActions("this.showBalanceSymbol='true'", checkButton);
+                        checkButton.removeEventListener('click', onClick);
+                    }
+                });
+                checkButton.setAttribute('data-balance-listener', 'true');
+            }
+        }
     }
     else {
         validateObjectiveStatus();
     }
 };
-const body = document.body;
+let res;
 const validateObjectiveStatus = async () => {
-    var _a;
+    var _a, _b;
     const container = document.getElementById(LidoContainer);
     if (!container)
         return;
     const objectiveString = container['objective'];
+    const additionalCheck = container.getAttribute('equationCheck');
+    console.log('🚀 ~ validateObjectiveStatus ~ additionalCheck:', additionalCheck);
+    let equationGiven = false;
     if (objectiveString == null || objectiveString.length === 0) {
-        body.style.pointerEvents = 'none';
-        const onCorrect = container.getAttribute('onCorrect');
-        if (onCorrect) {
-            await executeActions(onCorrect, container);
+        if (additionalCheck) {
+            equationGiven = true;
+        }
+        if (!equationGiven) {
+            const onCorrect = container.getAttribute('onCorrect');
+            if (onCorrect) {
+                await executeActions(onCorrect, container);
+            }
+            storeActivityScore(100);
+            storingEachActivityScore(true);
+            triggerNextContainer();
+            return;
         }
-        storeActivityScore(100);
-        storingEachActivityScore(true);
-        triggerNextContainer();
-        return;
     }
-    else {
-        const objectiveArray = (_a = JSON.parse(localStorage.getItem(SelectedValuesKey))) !== null && _a !== void 0 ? _a : [];
-        let res;
-        const additionalCheck = container.getAttribute('equationCheck');
-        if (!!additionalCheck) {
+    const objectiveArray = (_b = JSON.parse((_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '[]')) !== null && _b !== void 0 ? _b : [];
+    if (!!additionalCheck) {
+        const balanceEl = document.querySelector('lido-balance');
+        if (!balanceEl) {
             res = equationCheck(additionalCheck);
-            console.log('🚀 ~ handleShowCheck ~ res:', res);
         }
         else {
-            res = matchStringPattern(objectiveString, objectiveArray);
+            res = balanceResult(container, objectiveString);
         }
-        if (res) {
-            const attach = container.getAttribute('appendToDropOnCompletion');
-            body.style.pointerEvents = 'none';
-            const onCorrect = container.getAttribute('onCorrect');
-            if (onCorrect) {
-                if (attach === 'true') {
-                    appendingDragElementsInDrop();
-                }
-                await executeActions(onCorrect, container);
-            }
-            if (container.getAttribute('dropAttr') === 'EnableAnimation') {
-                setTimeout(() => {
-                    triggerNextContainer();
-                }, 2000);
+        console.log('🚀 ~ handleShowCheck ~ res:', res);
+    }
+    else {
+        res = matchStringPattern(objectiveString, objectiveArray);
+    }
+    if (res) {
+        const attach = container.getAttribute('appendToDropOnCompletion');
+        const onCorrect = container.getAttribute('onCorrect');
+        if (onCorrect) {
+            if (attach === 'true') {
+                appendingDragElementsInDrop();
             }
-            else {
+            await executeActions(onCorrect, container);
+        }
+        if (container.getAttribute('dropAttr') === 'EnableAnimation') {
+            setTimeout(() => {
                 triggerNextContainer();
-            }
-            await calculateScore();
+            }, 2000);
         }
         else {
-            const onInCorrect = container.getAttribute('onInCorrect');
-            await executeActions(onInCorrect, container);
-            const isContinueOnCorrect = container.getAttribute('is-continue-on-correct') === 'true';
-            if (!isContinueOnCorrect) {
-                triggerNextContainer();
-                await calculateScore();
-            }
+            triggerNextContainer();
+        }
+        await calculateScore();
+    }
+    else {
+        const onInCorrect = container.getAttribute('onInCorrect');
+        await executeActions(onInCorrect, container);
+        const isContinueOnCorrect = container.getAttribute('is-continue-on-correct') === 'true';
+        if (!isContinueOnCorrect) {
+            triggerNextContainer();
+            await calculateScore();
         }
     }
 };
@@ -68465,16 +69109,16 @@ const triggerPrevcontainer = () => {
 function convertUrlToRelative(url) {
     const container = document.getElementById(LidoContainer);
     const baseUrl = container.getAttribute('baseUrl');
-    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'))) {
+    if ((url === null || url === void 0 ? void 0 : url.startsWith('http')) || (url === null || url === void 0 ? void 0 : url.startsWith('blob'))) {
         return url;
     }
-    if (baseUrl) {
-        const newUrl = url.startsWith('/') ? url.slice(1) : url;
-        if (newUrl.startsWith(baseUrl.replace(/^\/+|\/+$/g, '')))
-            return newUrl;
-        return baseUrl.endsWith('/') ? baseUrl + newUrl : `${baseUrl}/${newUrl}`;
+    else if (baseUrl) {
+        const newUrl = !url.startsWith('/') ? url : url.substring(1);
+        return baseUrl + (baseUrl.endsWith('/') ? newUrl : '/' + newUrl);
+    }
+    else {
+        return index$1.getAssetPath(url);
     }
-    return index$1.getAssetPath(url);
 }
 /**
  * Asynchronously speaks the given text using the browser's text-to-speech API.
@@ -68663,7 +69307,10 @@ const equationCheck = (additionalCheck) => {
     });
     // 3. Join the modified parts back into one string
     const resultString = modifiedParts.join('');
+    console.log('🚀 ~ equationCheck ~ resultString:', resultString);
+    // 4. Evaluate the final string as a mathematical expression
     const finalRes = evaluate(resultString);
+    console.log('🚀 ~ equationCheck ~ finalRes:', finalRes);
     return finalRes;
 };
 const getElementsForQueries = (query) => {
@@ -68731,13 +69378,6 @@ const attachSpeakIcon = async (element) => {
     }
     element.appendChild(speakIconElement);
 };
-const clearLocalStorage = () => {
-    localStorage.removeItem(DragSelectedMapKey);
-    localStorage.removeItem(DragMapKey);
-    localStorage.removeItem(SelectedValuesKey);
-    localStorage.removeItem(DropHasDrag);
-    localStorage.removeItem(DropLength);
-};
 /**
  * Applies a delay to the element's visibility based on `delayVisible`.
  */
@@ -68823,6 +69463,230 @@ function generateUUIDFallback() {
         return v.toString(16);
     });
 }
+const revealImageValue = (imageEl) => {
+    if (!imageEl)
+        return;
+    const value = imageEl.getAttribute('value');
+    if (!value)
+        return;
+    let valueElement = imageEl.querySelector('.lido-display-hiddenvalue');
+    if (!valueElement) {
+        valueElement = document.createElement('div');
+        valueElement.classList.add('lido-display-hiddenvalue');
+        imageEl.style.position = 'relative';
+        imageEl.appendChild(valueElement);
+    }
+    valueElement.innerText = value;
+};
+const setImageBackground = (el, color) => {
+    if (!el)
+        return;
+    el.classList.add('lido-image-colorize');
+    const img = el.querySelector('img');
+    if (img) {
+        // use same image as mask
+        el.style.setProperty('--mask-url', `url(${img.src})`);
+    }
+    if (color === 'red') {
+        el.style.setProperty('--tint-color', '#ff0000');
+    }
+    else if (color === 'green') {
+        el.style.setProperty('--tint-color', '#00c853');
+    }
+    else {
+        el.style.removeProperty('--tint-color');
+        el.style.removeProperty('--mask-url');
+    }
+};
+const HighlightStarsOneByOne = async (element, value) => {
+    if (!element)
+        return;
+    if (!value)
+        return;
+    // Dynamically find the parent row of stars
+    const stars = Array.from(element.children);
+    console.log('starRow', stars);
+    for (const star of stars) {
+        // Highlight the star
+        star.classList.add('lido-glow');
+        // Play star sound
+        await AudioPlayer.getI().play(star);
+        // Fade out the star (disappear)
+        star.style.opacity = '0';
+        star.style.visibility = 'hidden';
+        await new Promise(resolve => setTimeout(resolve, 300)); // Wait for fade-out to complete
+        // Remove the highlight
+        star.classList.remove('lido-glow');
+    }
+};
+const animateBoxCells = async (element, value) => {
+    if (!element)
+        return;
+    if (!value)
+        return;
+    // Select all cells with the attribute type="box"
+    const boxCells = Array.from(element.children);
+    console.log('boxCells', boxCells);
+    if (!boxCells)
+        return;
+    boxCells.forEach(cell => {
+        // Reset any previous styles
+        cell.style.visibility = 'hidden';
+    });
+    // Animate each cell one by one
+    for (const cell of boxCells) {
+        cell.style.visibility = 'visible';
+        cell.style.opacity = '1';
+        // Apply the "come from top" animation
+        cell.classList.add('lido-box-highlight');
+        // Delay for each cell to come one after another
+        await new Promise(resolve => setTimeout(resolve, 600)); // Adjust delay as needed
+        cell.classList.remove('lido-box-highlight');
+    }
+    // After all cells have come down, apply the bounce animation
+    for (const cell of boxCells) {
+        // play the text child inside cell
+        await AudioPlayer.getI().play(cell);
+    }
+};
+const questionBoxAnimation = async (element, value) => {
+    if (!element)
+        return;
+    if (!value)
+        return;
+    // Select all drag elements and drop elements
+    const dragElements = Array.from(element.querySelectorAll("[type='drag']"));
+    // Ensure all drag childrens which is dropped disappear
+    dragElements.forEach(dragElement => {
+        if (dragElement.hasAttribute('drop-to')) {
+            dragElement.style.transition = 'opacity 0.5s ease';
+            dragElement.style.opacity = '0'; // Fade out
+            setTimeout(() => {
+                dragElement.remove(); // Remove from view after fade-out
+            }, 500);
+        }
+    });
+    // Reveal all drop childrens which is hidden
+    const dropElements = Array.from(element.querySelectorAll("[type='drop']"));
+    let check = false;
+    dropElements.forEach(dropEl => {
+        const dropVal = dropEl.getAttribute("value");
+        if (dropVal && dropEl.innerText.trim() === "?") {
+            dropEl.innerText = dropVal;
+            if (dropElements.length > 1 && check == false) {
+                if (window.innerWidth > window.innerHeight) {
+                    dropEl.style.marginRight = "-45px";
+                }
+                else {
+                    dropEl.style.marginRight = "-65px";
+                }
+                check = true;
+            }
+        }
+    });
+};
+const SumTogetherAnimation = async (element, value) => {
+    if (!element)
+        return;
+    if (!value)
+        return;
+    const container = document.getElementById(LidoContainer);
+    if (!container)
+        return;
+    // Expecting structure: [_, TopRow, questionRow, optionRow, ...]
+    const TopRow = Array.from(element.children)[1];
+    const questionRow = Array.from(element.children)[2];
+    const optionRow = Array.from(element.children)[3];
+    if (!TopRow || !questionRow || !optionRow)
+        return;
+    const topRowChildren = Array.from(TopRow.children);
+    const questionRowChildren = Array.from(questionRow.children);
+    const firstNumberEl = questionRowChildren[0];
+    const signElement = questionRowChildren[1];
+    const secondNumberEl = questionRowChildren[2];
+    const equalElement = questionRowChildren[3];
+    const answerElement = questionRowChildren[4];
+    // helper functions
+    const showElement = (el) => {
+        if (!el)
+            return;
+        el.style.visibility = 'visible';
+        el.style.display = '';
+        el.style.opacity = '1';
+    };
+    const readNumber = (el) => {
+        if (!el)
+            return 0;
+        const v = (el.getAttribute && (el.getAttribute('value') || el.getAttribute('string'))) || el.textContent || '';
+        return parseInt(String(v).trim(), 10) || 0;
+    };
+    const elementAppearance = async (flag) => {
+        if (flag) {
+            if (firstNumberEl) {
+                await new Promise(r => setTimeout(r, 200));
+                showElement(firstNumberEl);
+            }
+            if (signElement) {
+                await new Promise(r => setTimeout(r, 200));
+                showElement(signElement);
+            }
+        }
+        else {
+            if (secondNumberEl) {
+                await new Promise(r => setTimeout(r, 200));
+                showElement(secondNumberEl);
+            }
+            if (equalElement) {
+                await new Promise(r => setTimeout(r, 300));
+                showElement(equalElement);
+            }
+            if (optionRow) {
+                await new Promise(r => setTimeout(r, 300));
+                showElement(optionRow);
+            }
+            if (answerElement) {
+                await new Promise(r => setTimeout(r, 200));
+                showElement(answerElement);
+            }
+        }
+    };
+    const number1 = readNumber(firstNumberEl);
+    const number2 = readNumber(secondNumberEl);
+    const sign = ((signElement && ((signElement.getAttribute('string') || signElement.textContent) || '')).toString().trim() === '+') ? '+' : '-';
+    if (sign === '-') {
+        // '-' flow: reveal one by one then change bgColor of last B to red
+        for (let i = 0; i < topRowChildren.length; i++) {
+            await new Promise(resolve => setTimeout(resolve, 75));
+            showElement(topRowChildren[i]);
+        }
+        elementAppearance(true);
+        await new Promise(r => setTimeout(r, 500));
+        for (let k = 0; k < Math.min(number2, topRowChildren.length); k++) {
+            const idx = topRowChildren.length - 1 - k;
+            setImageBackground(topRowChildren[idx], 'red');
+            await new Promise(r => setTimeout(r, 200));
+        }
+        elementAppearance(false);
+    }
+    else {
+        // '+' flow: hide all, then showElement first A, then showElement next B in green
+        for (let i = 0; i < Math.min(number1, topRowChildren.length); i++) {
+            await new Promise(resolve => setTimeout(resolve, 120));
+            showElement(topRowChildren[i]);
+        }
+        elementAppearance(true);
+        await new Promise(r => setTimeout(r, 500));
+        for (let j = 0; j < Math.min(number2, Math.max(0, topRowChildren.length - number1)); j++) {
+            const idx = number1 + j;
+            if (topRowChildren[idx]) {
+                showElement(topRowChildren[idx]);
+                setImageBackground(topRowChildren[idx], 'green');
+            }
+            await new Promise(r => setTimeout(r, 80));
+        }
+        elementAppearance(false);
+    }
+};
 
 exports.ActivityScoreKey = ActivityScoreKey;
 exports.AudioPlayer = AudioPlayer;
@@ -68833,12 +69697,12 @@ exports.RiveService = RiveService;
 exports.SelectedValuesKey = SelectedValuesKey;
 exports.attachSpeakIcon = attachSpeakIcon;
 exports.calculateScale = calculateScale;
-exports.clearLocalStorage = clearLocalStorage;
 exports.commonjsGlobal = commonjsGlobal;
 exports.convertUrlToRelative = convertUrlToRelative;
 exports.dispatchActivityChangeEvent = dispatchActivityChangeEvent;
 exports.dispatchGameCompletedEvent = dispatchGameCompletedEvent;
 exports.dispatchGameExitEvent = dispatchGameExitEvent;
+exports.equationCheck = equationCheck;
 exports.executeActions = executeActions;
 exports.exitUrl = exitUrl;
 exports.fingerUrl = fingerUrl;
@@ -68851,7 +69715,6 @@ exports.handleElementClick = handleElementClick;
 exports.handleFloatElementPosition = handleFloatElementPosition;
 exports.handlingChildElements = handlingChildElements;
 exports.initEventsForElement = initEventsForElement;
-exports.matchStringPattern = matchStringPattern;
 exports.nextUrl = nextUrl;
 exports.parseProp = parseProp;
 exports.prevUrl = prevUrl;
@@ -68863,3 +69726,4 @@ exports.storingEachActivityScore = storingEachActivityScore;
 exports.tinyColor = tinyColor;
 exports.triggerNextContainer = triggerNextContainer;
 exports.triggerPrevcontainer = triggerPrevcontainer;
+exports.validateObjectiveStatus = validateObjectiveStatus;