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

package/dist/esm/{utils-9ce243d8.js → utils-5df09162.js}

@@ -1,6 +1,5 @@
-import { g as getAssetPath } from './index-f47852d4.js';
+import { g as getAssetPath } from './index-170e58c7.js';
 
-const DragSelectedMapKey = 'lidoDragSelectedMap';
 const DragMapKey = 'lidoDragMap';
 const SelectedValuesKey = 'lidoSelectedValues';
 const ActivityScoreKey = 'lidoActivityScore';
@@ -14,7 +13,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';
@@ -159,6 +157,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';
@@ -209,7 +289,7 @@ function enableDraggingWithScaling(element) {
             isDragging = false;
             return;
         }
-        AudioPlayer.getI().stop();
+        // AudioPlayer.getI().stop();
         removeHighlight(element);
         isDragging = true;
         isClicked = true;
@@ -313,7 +393,6 @@ function enableDraggingWithScaling(element) {
     // Start observing the element
     observer.observe(container, observerConfig);
     const onMove = (event) => {
-        console.log("moved");
         if (!isDragging)
             return;
         if (isDraggingDisabled) {
@@ -322,7 +401,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) {
@@ -344,7 +423,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)) {
@@ -402,7 +481,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)) {
@@ -566,14 +645,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);
@@ -581,14 +664,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)) {
@@ -613,20 +697,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;
     }
@@ -638,9 +724,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
@@ -654,8 +741,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';
@@ -670,7 +756,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']}"]`));
@@ -689,6 +775,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');
@@ -697,6 +784,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();
@@ -720,6 +812,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);
@@ -727,6 +829,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);
@@ -735,15 +843,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) {
@@ -756,7 +865,7 @@ async function onElementDropComplete(dragElement, dropElement) {
                         }
                     }
                 }
-                localStorage.setItem(DragSelectedMapKey, JSON.stringify(dragSelected));
+                //  container.setAttribute(DragSelectedMapKey, JSON.stringify(dragSelected));
             }
             dragElement.classList.add('dropped');
             if (dragElement) {
@@ -769,7 +878,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) {
@@ -778,7 +887,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)) {
@@ -810,13 +919,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();
             }
         }
@@ -829,9 +939,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) {
@@ -840,9 +950,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
@@ -850,9 +961,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'))
@@ -871,7 +982,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');
     }
 }
@@ -879,15 +992,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');
     };
@@ -954,7 +1064,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');
@@ -1000,9 +1110,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 => {
@@ -1011,6 +1124,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');
@@ -1201,7 +1315,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`;
@@ -1268,16 +1382,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,
@@ -1285,6 +1401,7 @@ function enableReorderDrag(element) {
                     });
                     optionArea.appendChild(element);
                     element.classList.remove('dropped');
+                    element.removeAttribute('drop-to');
                     if (dummy) {
                         dummy.remove();
                     }
@@ -1323,12 +1440,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);
@@ -1342,6 +1459,7 @@ function enableReorderDrag(element) {
                     resetElementStyles(element);
                     dummy.replaceWith(element);
                     element.classList.remove('dropped');
+                    element.removeAttribute('drop-to');
                 }, 100);
                 return;
             }
@@ -1490,13 +1608,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()]);
@@ -1511,7 +1631,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']))
@@ -1523,7 +1643,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);
 }
 
@@ -1742,13 +1865,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']);
@@ -3010,6 +3135,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;
@@ -3026,24 +3152,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';
-                }
+                // element.style.pointerEvents = 'none';
                 await executeActions(onCorrect, element);
             }
             else {
@@ -3051,7 +3168,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;
         }
@@ -3062,8 +3183,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) {
@@ -3071,10 +3192,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');
@@ -3085,20 +3205,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);
@@ -3110,8 +3228,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);
@@ -67929,7 +68050,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}` : '');
 }
@@ -67974,12 +68519,16 @@ 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);
     for (let i = 0; i < actions.length; i++) {
         const action = actions[i];
@@ -67993,13 +68542,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;
@@ -68085,10 +68646,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;
@@ -68186,6 +68813,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
@@ -68270,38 +68900,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) {
@@ -68318,8 +68946,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') {
@@ -68371,81 +68998,101 @@ 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) {
-        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();
         }
     }
 };
 const triggerNextContainer = () => {
-    body.style.pointerEvents = 'auto';
     AudioPlayer.getI().stop();
     // const event = new CustomEvent('nextContainer');
     console.log('🚀 ~ triggerNextContainer ~ event:', event);
@@ -68460,16 +69107,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 getAssetPath(url);
     }
-    return getAssetPath(url);
 }
 /**
  * Asynchronously speaks the given text using the browser's text-to-speech API.
@@ -68658,7 +69305,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) => {
@@ -68726,13 +69376,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`.
  */
@@ -68818,5 +69461,229 @@ 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);
+    }
+};
 
-export { ActivityScoreKey as A, setCancelBtnPopup as B, getDefaultExportFromCjs as C, tinyColor as D, storingEachActivityScore as E, DropAction as F, fraction as G, speakIcon as H, fingerUrl as I, LidoContainer as L, NextContainerKey as N, PrevContainerKey as P, RiveService as R, SelectedValuesKey as S, TraceMode as T, convertUrlToRelative as a, attachSpeakIcon as b, commonjsGlobal as c, calculateScale as d, handleFloatElementPosition as e, format as f, handleElementClick as g, handlingChildElements as h, initEventsForElement as i, clearLocalStorage as j, dispatchActivityChangeEvent as k, dispatchGameCompletedEvent as l, dispatchGameExitEvent as m, AudioPlayer as n, generateUUIDFallback as o, parseProp as p, exitUrl as q, prevUrl as r, setVisibilityWithDelay as s, nextUrl as t, speakUrl as u, getCancelBtnPopup as v, matchStringPattern as w, triggerNextContainer as x, triggerPrevcontainer as y, executeActions as z };
+export { ActivityScoreKey as A, getDefaultExportFromCjs as B, tinyColor as C, triggerNextContainer as D, DropAction as E, validateObjectiveStatus as F, fraction as G, speakIcon as H, fingerUrl as I, LidoContainer as L, NextContainerKey as N, PrevContainerKey as P, RiveService as R, SelectedValuesKey as S, TraceMode as T, convertUrlToRelative as a, storingEachActivityScore as b, commonjsGlobal as c, executeActions as d, equationCheck as e, format as f, attachSpeakIcon as g, handlingChildElements as h, initEventsForElement as i, calculateScale as j, handleFloatElementPosition as k, handleElementClick as l, dispatchActivityChangeEvent as m, dispatchGameCompletedEvent as n, dispatchGameExitEvent as o, parseProp as p, AudioPlayer as q, generateUUIDFallback as r, setVisibilityWithDelay as s, exitUrl as t, prevUrl as u, nextUrl as v, speakUrl as w, getCancelBtnPopup as x, triggerPrevcontainer as y, setCancelBtnPopup as z };