lido-player 0.0.2-beta-17 → 0.0.2-beta-18-dev

package/dist/esm/{index-CEJsA_x_.js → index-D-29PaRa.js}

@@ -1,4 +1,4 @@
-import { c as getAssetPath } from './index-Dnvog_Mm.js';
+import { c as getAssetPath } from './index-BeHFCsWf.js';
 
 const DragMapKey = 'lidoDragMap';
 const SelectedValuesKey = 'lidoSelectedValues';
@@ -338,6 +338,7 @@ function dragDropAnimation(container, dragElement, dropElement) {
     }, 250);
 }
 
+const isBlenderTemplate = (container) => (container === null || container === void 0 ? void 0 : container.getAttribute('template-id')) === 'blender';
 function buildDropHasDragFromDOM() {
     const dropHasDrag = {};
     const dropElements = document.querySelectorAll("[type='drop']");
@@ -395,7 +396,6 @@ function enableDraggingWithScaling(element) {
     let mutationFlag = false;
     // Fetch the container element
     const container = document.getElementById(LidoContainer);
-    const templateId = container.getAttribute("template-id");
     if (!container) {
         console.error(`Container with ID "container" not found.`);
         return;
@@ -556,7 +556,7 @@ function enableDraggingWithScaling(element) {
         allElements.forEach(otherElement => {
             var _a;
             if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
-                if (!(((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal) && container.getAttribute("template-id") !== "blender") {
+                if (!(((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal) && !isBlenderTemplate(container)) {
                     if (otherElement) {
                         setOpacityIfChanged(otherElement, "0.3");
                     }
@@ -644,7 +644,7 @@ function enableDraggingWithScaling(element) {
         else {
             onElementDropComplete(element, mostOverlappedElement);
         }
-        if (templateId === "blender" && element && mostOverlappedElement) {
+        if (isBlenderTemplate(container) && element && mostOverlappedElement) {
             const allElements = document.querySelectorAll(`*`);
             allElements.forEach(el => {
                 removeHighlight(el);
@@ -872,7 +872,7 @@ async function handleResetDragElement(dragElement, dropElement, dropHasDrag, sel
     highlightElement();
 }
 async function onElementDropComplete(dragElement, dropElement) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const container = document.getElementById(LidoContainer);
     const selectedValueData = (_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : "[]";
     const dragSelectedData = JSON.stringify(buildDragSelectedMapFromDOM());
@@ -1094,28 +1094,48 @@ async function onElementDropComplete(dragElement, dropElement) {
     // Add pulse and highlight effect for a successful match
     const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
     dispatchElementDropEvent(dragElement, dropElement, isCorrect);
-    if (container.getAttribute("template-id") !== "blender") {
+    if (!isBlenderTemplate(container)) {
         storingEachActivityScore(isCorrect);
     }
     dragElement.style.opacity = '1';
     const allDropElements = document.querySelectorAll('.drop-element');
     allDropElements.forEach(el => updateDropBorder(el));
+    if (isBlenderTemplate(container)) {
+        const requiredDrops = Number((_j = dropElement.getAttribute('required-drops')) !== null && _j !== void 0 ? _j : 0);
+        const placedDrops = document.querySelectorAll(`[${DropToAttr}="${dropElement.id}"]`).length;
+        const action = placedDrops > 0 && placedDrops <= requiredDrops
+            ? dropElement.getAttribute('onCorrect')
+            : dropElement.getAttribute('onInCorrect');
+        if (action) {
+            await executeActions(action, dropElement, dragElement);
+        }
+    }
     highlightElement();
     await onActivityComplete(dragElement, dropElement);
 }
 function updateDropBorder(element) {
+    var _a;
     if (!element || !element.classList.contains('drop-element'))
         return;
     const container = document.getElementById(LidoContainer);
     if (!container)
         return;
     const showBorder = container.getAttribute('show-drop-border');
-    if (showBorder !== 'true') {
+    if (showBorder !== 'true' && !isBlenderTemplate(container)) {
         return;
     }
     const dropId = element.id;
     const dragSelectedElements = document.querySelectorAll(`[${DropToAttr}="${dropId}"]`);
-    if (dragSelectedElements.length > 0 && container.getAttribute("template-id") !== "blender") {
+    if (isBlenderTemplate(container)) {
+        const requiredDrops = Number((_a = element.getAttribute('required-drops')) !== null && _a !== void 0 ? _a : 0);
+        const placedDrops = dragSelectedElements.length;
+        const showCorrectBorder = placedDrops > 0 && placedDrops <= requiredDrops;
+        element.classList.toggle('empty', !showCorrectBorder);
+        element.classList.remove('filled');
+        element.style.setProperty('border', showCorrectBorder ? '5px dashed green' : '5px dashed #f34d08', 'important');
+        return;
+    }
+    if (dragSelectedElements.length > 0 && !isBlenderTemplate(container)) {
         element.classList.add('filled');
         element.classList.remove('empty');
         element.classList.remove('highlight-element');
@@ -1157,14 +1177,14 @@ async function onClickDropOrDragElement(element, type) {
     if (!document.querySelector('#dynamic-highlight-style')) {
         const style = document.createElement('style');
         style.id = 'dynamic-highlight-style';
-        style.innerHTML = `
-      .highlight {
-        // border: 4px solid #e74c3c; /* Thicker red border for more visibility */
-        // border-radius: 12px; /* Larger rounded corners */
-        // background-color: rgba(231, 76, 60, 0.3); /* Stronger, more noticeable background */
-        // box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Stronger shadow */
-        // outline: 4px solid rgba(231, 76, 60, 0.6); /* Glow effect */
-      }
+        style.innerHTML = `
+      .highlight {
+        // border: 4px solid #e74c3c; /* Thicker red border for more visibility */
+        // border-radius: 12px; /* Larger rounded corners */
+        // background-color: rgba(231, 76, 60, 0.3); /* Stronger, more noticeable background */
+        // box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Stronger shadow */
+        // outline: 4px solid rgba(231, 76, 60, 0.6); /* Glow effect */
+      }
     `;
         document.head.appendChild(style);
     }
@@ -1202,7 +1222,7 @@ async function onClickDropOrDragElement(element, type) {
         // Move the drag element to the drop position
         selectedDragElement.style.transform = `translate(${translateX}px, ${translateY}px)`;
         // Remove highlights after moving the element
-        if (container.getAttribute("template-id") !== "blender") {
+        if (!isBlenderTemplate(container)) {
             const allElements = document.querySelectorAll(`*`);
             allElements.forEach(el => {
                 removeHighlight(el);
@@ -1352,34 +1372,34 @@ function highlightSpeakingElement(element) {
     if (!document.getElementById(styleId)) {
         const style = document.createElement('style');
         style.id = styleId;
-        style.innerHTML = `
-      .speaking-highlight {
-        --base-transform: ${element.style.transform};
-        box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9) !important; /* Stronger orange glow effect */
-        // border: 3px solid green !important;
-        // transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
-        // transform: scale(1.05); /* Subtle scale effect to pop the element */
-        // animation: pulseEffect 1.5s infinite; /* Pulsing animation */
-        
-      }
-
-      @keyframes pulseEffect {
-        0% {
-          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
-          // transform: var(--base-transform) scale(1.05);
-          // background-color: #FFFF0B;
-        }
-        50% {
-          box-shadow: 0 0 30px 15px rgba(255, 165, 0, 1);
-          // transform: var(--base-transform) scale(1.1);
-          // background-color: #FFFF0B;
-        }
-        100% {
-          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
-          // transform: var(--base-transform) scale(1.05);
-          // background-color: #FFFF0B;
-        }
-      }
+        style.innerHTML = `
+      .speaking-highlight {
+        --base-transform: ${element.style.transform};
+        box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9) !important; /* Stronger orange glow effect */
+        // border: 3px solid green !important;
+        // transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
+        // transform: scale(1.05); /* Subtle scale effect to pop the element */
+        // animation: pulseEffect 1.5s infinite; /* Pulsing animation */
+        
+      }
+
+      @keyframes pulseEffect {
+        0% {
+          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
+          // transform: var(--base-transform) scale(1.05);
+          // background-color: #FFFF0B;
+        }
+        50% {
+          box-shadow: 0 0 30px 15px rgba(255, 165, 0, 1);
+          // transform: var(--base-transform) scale(1.1);
+          // background-color: #FFFF0B;
+        }
+        100% {
+          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
+          // transform: var(--base-transform) scale(1.05);
+          // background-color: #FFFF0B;
+        }
+      }
     `;
         document.head.appendChild(style);
     }
@@ -2091,11 +2111,11 @@ function enableReorderDrag(element) {
                     onDropToCategory(element, category);
                 }
                 if (divEl) {
-                    const keyframes = `
-            @keyframes widthDecrease {
-              0% { width: ${divEl.offsetWidth}px; height: ${divEl.offsetHeight}px; }
-              100% { width: 0px; height: 0px;}
-            }
+                    const keyframes = `
+            @keyframes widthDecrease {
+              0% { width: ${divEl.offsetWidth}px; height: ${divEl.offsetHeight}px; }
+              100% { width: 0px; height: 0px;}
+            }
           `;
                     const styleSheet = document.styleSheets[0];
                     styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
@@ -2308,11 +2328,11 @@ function moveWithAnimation(target, overlapped) {
         const dummy = createDummyElement(target);
         dummy.style.visibility = 'hidden';
         dummy.setAttribute('type', 'dummy');
-        const keyframes = `
-      @keyframes widthIncrease {
-        0% { width: 0px; height: 0px; }
-        100% { width: ${target.offsetWidth}px; height: ${target.offsetHeight}px;}
-      }
+        const keyframes = `
+      @keyframes widthIncrease {
+        0% { width: 0px; height: 0px; }
+        100% { width: ${target.offsetWidth}px; height: ${target.offsetHeight}px;}
+      }
     `;
         if (!overlapped) {
             const overlapCategory = findMostoverlappedElement(target, 'category');
@@ -2379,12 +2399,6 @@ async function onDropToCategory(dragElement, categoryElement) {
 }
 
 const delay = (ms) => new Promise(res => setTimeout(res, ms));
-const syncSlideOrder = (container) => {
-    const slideOrder = Array.from(container.querySelectorAll("[type='slide']"))
-        .map(item => item['value']);
-    container.setAttribute(SelectedValuesKey, JSON.stringify(slideOrder));
-    return slideOrder;
-};
 const slideAnimation = async () => {
     const container = document.getElementById(LidoContainer);
     if (!container)
@@ -2445,10 +2459,10 @@ function slidingWithScaling(element) {
     const container = document.getElementById(LidoContainer);
     if (container.getAttribute('canplay') === 'false')
         return;
-    // Slide activities can start in the correct order. Keep their initial DOM
-    // order available to the Next/check validation before the first swap occurs.
-    syncSlideOrder(container);
     const onStart = (event) => {
+        const templateId = container.getAttribute('template-id');
+        if ((templateId === 'arrangeLetters' || templateId === 'reorder') && container.getAttribute('game-completed') === 'true')
+            return;
         removeHighlight(element);
         isDragging = true;
         elementRect = element.getBoundingClientRect();
@@ -2596,7 +2610,7 @@ function slidingWithScaling(element) {
         element.style.transform = 'translate(0, 0)';
         setTimeout(() => {
             if (overlapElement) {
-                slideCompleted(element);
+                void slideCompleted(element);
                 overlapElement = false;
             }
         }, 300);
@@ -2620,20 +2634,95 @@ function slidingWithScaling(element) {
     element.addEventListener('touchstart', onStart);
     element.addEventListener(LIDO_INTERACTION_CLEANUP_EVENT, cleanup);
 }
-const slideCompleted = (slideElement) => {
+const isArrangeLettersContainer = (container) => container.getAttribute('template-id') === 'arrangeLetters';
+const isReorderContainer = (container) => container.getAttribute('template-id') === 'reorder';
+const getSlideValuesForValidation = (container, slideElements) => {
+    if (isReorderContainer(container)) {
+        return slideElements.map(element => element.id);
+    }
+    return slideElements.map(element => element['value']);
+};
+const updateArrangeLettersCorrectness = (container, slideValues, objectiveValues) => {
+    const slideElements = Array.from(container.querySelectorAll('[type="slide"]'));
+    slideElements.forEach((element, index) => {
+        const isCorrect = index < objectiveValues.length && slideValues[index] === objectiveValues[index].trim();
+        if (isCorrect) {
+            applyBorderToClickableCell(element, '#65BC46');
+        }
+        else {
+            element.style.removeProperty('box-shadow');
+        }
+    });
+};
+const isArrangeLettersComplete = (slideValues, objectiveString) => {
+    if (!objectiveString)
+        return false;
+    const objectiveValues = objectiveString.split(',').map(value => value.trim());
+    return slideValues.length === objectiveValues.length
+        && slideValues.every((value, index) => value === objectiveValues[index]);
+};
+const updateReorderCorrectness = (container, slideValues, objectiveValues) => {
+    const slideElements = Array.from(container.querySelectorAll('[type="slide"]'));
+    slideElements.forEach((element, index) => {
+        const isCorrect = index < objectiveValues.length && slideValues[index] === objectiveValues[index].trim();
+        if (isCorrect) {
+            applyBorderToClickableCell(element, '#65BC46');
+        }
+        else {
+            element.style.removeProperty('box-shadow');
+        }
+    });
+};
+const isReorderComplete = (slideValues, objectiveString) => {
+    if (!objectiveString)
+        return false;
+    const objectiveValues = objectiveString.split(',').map(value => value.trim());
+    return slideValues.length === objectiveValues.length
+        && slideValues.every((value, index) => value === objectiveValues[index]);
+};
+const slideCompleted = async (slideElement) => {
+    var _a;
     const container = document.getElementById(LidoContainer);
-    const slideArr = syncSlideOrder(container);
+    const slideArr = JSON.parse((_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '[]');
+    const allSlideElements = Array.from(document.querySelectorAll("[type='slide']"));
+    const slideValues = getSlideValuesForValidation(container, allSlideElements);
+    slideValues.forEach((value, index) => {
+        slideArr[index] = value;
+    });
+    container.setAttribute(SelectedValuesKey, JSON.stringify(slideArr));
     const objectiveString = document.getElementById(LidoContainer)['objective'];
     const objectiveArray = objectiveString.split(',');
-    const elementIndex = slideArr.indexOf(slideElement['value']);
-    const isCorrect = matchStringPattern(slideElement['value'], [objectiveArray[elementIndex].trim()]);
+    const elementIndex = allSlideElements.indexOf(slideElement);
+    const isCorrect = elementIndex >= 0 && elementIndex < objectiveArray.length
+        ? matchStringPattern(slideValues[elementIndex], [objectiveArray[elementIndex].trim()])
+        : false;
+    if (isArrangeLettersContainer(container)) {
+        updateArrangeLettersCorrectness(container, slideValues, objectiveArray);
+    }
+    else if (isReorderContainer(container)) {
+        updateReorderCorrectness(container, slideValues, objectiveArray);
+    }
     if (container.getAttribute('is-continue-on-correct') === 'true') {
         storingEachActivityScore(true);
-        // validationForSlideHandler();
     }
     else {
         storingEachActivityScore(isCorrect);
     }
+    if (isArrangeLettersContainer(container) || isReorderContainer(container)) {
+        await validationForSlideHandler(slideValues);
+    }
+};
+const validationForSlideHandler = async (slideValues) => {
+    const container = document.getElementById(LidoContainer);
+    if (!container || (!isArrangeLettersContainer(container) && !isReorderContainer(container)) || container.getAttribute('game-completed') === 'true')
+        return;
+    const objectiveString = document.getElementById(LidoContainer)['objective'];
+    const isComplete = isArrangeLettersContainer(container)
+        ? isArrangeLettersComplete(slideValues, objectiveString)
+        : isReorderComplete(slideValues, objectiveString);
+    if (isComplete) {
+        await validateObjectiveStatus();
+    }
 };
 
 const getContainerScale = (container) => {
@@ -72853,9 +72942,11 @@ const executeActions = async (actionsString, thisElement, element) => {
                         if (dropTo === "hundredsDrop")
                             hundreds++;
                     });
-                    const unitsValue = units * 1;
-                    const tensValue = tens * 10;
-                    const hundredsValue = hundreds * 100;
+                    // Blender displays the number of blocks placed in each column.
+                    // Blender's drag/drop values are also the required block counts.
+                    const unitsValue = units;
+                    const tensValue = tens;
+                    const hundredsValue = hundreds;
                     // ✅ Update Lido Text Boxes
                     const unitsBox = document.getElementById("units");
                     const tensBox = document.getElementById("tens");
@@ -72913,11 +73004,11 @@ const afterDropDragHandling = (dragElement, dropElement) => {
             }
             dummyElement.setAttribute('id', dragElement.getAttribute('id'));
             dragElement.replaceWith(dummyElement);
-            const keyframes = `
-      @keyframes widthDecrease {
-        0% { width: ${dragElement.style.width}; height: ${dragElement.style.height}; margin: ${dragElement.style.margin}; }
-        100% { width: 0px; height: 0px; margin: 0px;}
-      }
+            const keyframes = `
+      @keyframes widthDecrease {
+        0% { width: ${dragElement.style.width}; height: ${dragElement.style.height}; margin: ${dragElement.style.margin}; }
+        100% { width: 0px; height: 0px; margin: 0px;}
+      }
     `;
             if (!isInfinite) {
                 dummyElement.style.width = element.style.width;
@@ -73122,13 +73213,21 @@ const calculateScore = () => {
     gameScore.wrongMoves = 0;
 };
 async function onActivityComplete(dragElement, dropElement) {
-    var _a, _b;
+    var _a, _b, _c;
     const container = document.getElementById(LidoContainer);
     if (!container)
         return;
+    const isBlender = container.getAttribute('template-id') === 'blender';
     await executeActions("this.alignMatch='true'", dropElement, dragElement);
     if (dragElement && dropElement) {
-        const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
+        let isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
+        if (isBlender) {
+            const requiredDrops = Number((_a = dropElement.getAttribute('required-drops')) !== null && _a !== void 0 ? _a : 0);
+            const placedDrops = document.querySelectorAll(`[drop-to="${dropElement.id}"]`).length;
+            // Blender accepts every count from 1 through the required count.
+            // Zero or an overfilled drop zone uses the incorrect action.
+            isCorrect = placedDrops > 0 && placedDrops <= requiredDrops;
+        }
         // storing each activity score based on isCorrect for (all drag-drop events)
         // storingEachActivityScore(isCorrect);
         if (isCorrect) {
@@ -73137,10 +73236,10 @@ async function onActivityComplete(dragElement, dropElement) {
                 console.log("Right Moves : ", gameScore.rightMoves);
                 console.log("Wrong Moves : ", gameScore.wrongMoves);
             }
-            const onCorrect = ((_a = container.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.EnableAnimation.toLowerCase()
+            const onCorrect = ((_b = container.getAttribute('dropAttr')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === DropMode.EnableAnimation.toLowerCase()
                 ? ''
                 : dropElement.getAttribute('onCorrect');
-            if (onCorrect) {
+            if (onCorrect && !isBlender) {
                 await executeActions(onCorrect, dropElement, dragElement);
             }
             //for multiply beeds
@@ -73155,7 +73254,7 @@ async function onActivityComplete(dragElement, dropElement) {
                 console.log("Wrong Moves : ", gameScore.wrongMoves);
             }
             const onInCorrect = dropElement.getAttribute('onInCorrect');
-            if (onInCorrect) {
+            if (onInCorrect && !isBlender) {
                 await executeActions(onInCorrect, dropElement, dragElement);
             }
         }
@@ -73164,7 +73263,7 @@ async function onActivityComplete(dragElement, dropElement) {
     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((_c = localStorage.getItem(DragMapKey)) !== null && _c !== void 0 ? _c : '{}');
     const index = dropElement.getAttribute('tab-index');
     if (!drag[index]) {
         drag[index] = [];
@@ -73225,7 +73324,7 @@ const storeActivityScore = (score) => {
     activityScore[activityScoreKey] = score;
     //send Custom Event to parent
     // window.dispatchEvent(new CustomEvent(ActivityEndKey, { detail: { index: index, totalIndex: totalIndex, score: score } })); 
-    const actualActivitySeconds = Number((Timer.getI().getElapsed() / 1000).toFixed(1));
+    const actualActivitySeconds = Math.ceil(Timer.getI().getElapsed() / 1000);
     ACTIVYTY_TIME_SPEND_ARRAY.push(actualActivitySeconds);
     console.log(`[Utils][Activity Time] Activity ${index + 1}/${totalIndex} - Time spent: ${actualActivitySeconds}s`);
     const lessonTrackingParams = getLessonTrackingParams();
@@ -73237,7 +73336,7 @@ const storeActivityScore = (score) => {
         gameScore.finalScore = Math.floor(finalScore);
         console.log('Total Score : ', gameScore.finalScore);
         // window.dispatchEvent(new CustomEvent(LessonEndKey, { detail: { score: finalScore } }));
-        const timeSpendForLesson = Number(ACTIVYTY_TIME_SPEND_ARRAY.reduce((sum, current) => sum + current, 0).toFixed(1));
+        const timeSpendForLesson = ACTIVYTY_TIME_SPEND_ARRAY.reduce((sum, current) => sum + current, 0);
         console.log(`[Utils][Lesson Time] Total lesson time spent: ${timeSpendForLesson}s`);
         dispatchLessonEndEvent(totalIndex, gameScore.totalRightMovesCount, gameScore.totalWrongMovesCount, finalScore, timeSpendForLesson, lessonTrackingParams);
         gameScore.totalRightMovesCount = 0;

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export { $ as format } from './index-CEJsA_x_.js';
-import './index-Dnvog_Mm.js';
+export { $ as format } from './index-D-29PaRa.js';
+import './index-BeHFCsWf.js';