lido-player 0.0.2-beta-24 → 0.0.2-beta-26-dev

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

@@ -8,32 +8,32 @@ export function showWrongAnswerAnimation(elements) {
     if (!document.querySelector(styleId)) {
         const style = document.createElement('style');
         style.id = styleId;
-        style.innerHTML = `
-          @keyframes enhanced-shake {
-              0% { left: 0; }
-              10% { left: -8px; }
-              20% { left: 8px; }
-              30% { left: -8px; }
-              40% { left: 8px; }
-              50% { left: -6px; }
-              60% { left: 6px; }
-              70% { left: -4px; }
-              80% { left: 4px; }
-              90% { left: -2px; }
-              100% { left: 0; }
-          }
-
-          
-          .wrong-answer {
-              position: relative; /* Enable relative positioning to move the element */
-              animation: enhanced-shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
-              background-color: #ffdddd; /* Flash red background to indicate wrong answer */
-              box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); /* Subtle red shadow */
-
-              border: 4px solid red;
-          }
-
-          
+        style.innerHTML = `
+          @keyframes enhanced-shake {
+              0% { left: 0; }
+              10% { left: -8px; }
+              20% { left: 8px; }
+              30% { left: -8px; }
+              40% { left: 8px; }
+              50% { left: -6px; }
+              60% { left: 6px; }
+              70% { left: -4px; }
+              80% { left: 4px; }
+              90% { left: -2px; }
+              100% { left: 0; }
+          }
+
+          
+          .wrong-answer {
+              position: relative; /* Enable relative positioning to move the element */
+              animation: enhanced-shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
+              background-color: #ffdddd; /* Flash red background to indicate wrong answer */
+              box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); /* Subtle red shadow */
+
+              border: 4px solid red;
+          }
+
+          
       `;
         document.head.appendChild(style);
     }
@@ -61,34 +61,34 @@ export 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);
     }

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

@@ -160,6 +160,7 @@ export function slidingWithScaling(element) {
     };
     // Start observing the element
     observer.observe(parentElement, observerConfig);
+    let mostOverlappedElement;
     const onMove = (event) => {
         if (!isDragging)
             return;
@@ -180,12 +181,14 @@ export function slidingWithScaling(element) {
         // Get the dimensions and scale-corrected position of the container and element
         const containerRect = parentElement.getBoundingClientRect();
         const elementRect = element.getBoundingClientRect();
-        const numbers = element.style.transform.match(/-?\d+(\.\d+)?/g);
-        const result = numbers.map(Number);
-        const initialElementLeftPx = elementRect.left / parentElementScale - result[0];
-        const initialElementTopPx = elementRect.top - result[1];
-        const initialElementRightPx = elementRect.right / parentElementScale - result[0];
-        const initialElementBottomPx = elementRect.bottom - result[1];
+        // Firefox serializes translate(x, 0) as translate(x), so parsing the
+        // inline string can lose Y and produce NaN. Read the computed matrix instead.
+        const transform = window.getComputedStyle(element).transform;
+        const translation = new DOMMatrixReadOnly(transform === 'none' ? undefined : transform);
+        const initialElementLeftPx = elementRect.left / parentElementScale - translation.m41;
+        const initialElementTopPx = elementRect.top - translation.m42;
+        const initialElementRightPx = elementRect.right / parentElementScale - translation.m41;
+        const initialElementBottomPx = elementRect.bottom - translation.m42;
         const maxRight = containerRect.right - initialElementRightPx;
         const maxLeft = containerRect.left - initialElementLeftPx;
         const maxTop = containerRect.top - initialElementTopPx;
@@ -195,7 +198,7 @@ export function slidingWithScaling(element) {
         // Apply transform with translation within boundaries
         element.style.transform = `translate(${newLeftClamp}px, ${newTopClamp}px)`;
         // Check for overlaps and highlight only the most overlapping element
-        let mostOverlappedElement = findMostoverlappedElement(element, 'slide');
+        mostOverlappedElement = findMostoverlappedElement(element, 'slide');
         // Apply styles only to the most overlapped element
         if (mostOverlappedElement) {
             if (mostOverlappedElement != element) {
@@ -256,6 +259,7 @@ export function slidingWithScaling(element) {
         setTimeout(() => {
             if (overlapElement) {
                 void slideCompleted(element);
+                updateReorderCorrectness(container, element, mostOverlappedElement);
                 overlapElement = false;
             }
         }, 300);
@@ -298,18 +302,50 @@ export const isArrangeLettersComplete = (slideValues, objectiveString) => {
     return slideValues.length === objectiveValues.length
         && slideValues.every((value, index) => value === objectiveValues[index]);
 };
-export 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');
-        }
-    });
+export const updateReorderCorrectness = (container, slideElement, overlappedElement) => {
+    const allSlideElements = Array.from(container.querySelectorAll('[type="slide"]'));
+    const elementIndex = allSlideElements.indexOf(slideElement);
+    const overlappedElementIndex = allSlideElements.indexOf(overlappedElement);
+    const objectiveString = document.getElementById(LidoContainer)['objective'];
+    const objectiveArray = objectiveString.split(',');
+    const slideValues = getSlideValuesForValidation(container, allSlideElements);
+    const isCorrect = elementIndex >= 0 && elementIndex < objectiveArray.length
+        ? matchStringPattern(slideValues[elementIndex], [objectiveArray[elementIndex].trim()])
+        : false;
+    const isCorrectOverlap = overlappedElementIndex >= 0 && overlappedElementIndex < objectiveArray.length
+        ? matchStringPattern(slideValues[overlappedElementIndex], [objectiveArray[overlappedElementIndex].trim()])
+        : false;
+    if (isCorrect && isCorrectOverlap) {
+        updateElementCategoryClass(slideElement, true);
+        updateElementCategoryClass(overlappedElement, true);
+    }
+    else if (isCorrect) {
+        updateElementCategoryClass(slideElement, true);
+        updateElementCategoryClass(overlappedElement, false);
+    }
+    else if (isCorrectOverlap) {
+        updateElementCategoryClass(slideElement, false);
+        updateElementCategoryClass(overlappedElement, true);
+    }
+    else {
+        updateElementCategoryClass(slideElement, false);
+        updateElementCategoryClass(overlappedElement, false);
+    }
 };
+function updateElementCategoryClass(element, isCorrect) {
+    if (!element)
+        return;
+    const correctClass = 'category-dropped-onCorrect';
+    const incorrectClass = 'category-dropped-onInCorrect';
+    if (isCorrect) {
+        element.classList.add(correctClass);
+        element.classList.remove(incorrectClass);
+    }
+    else {
+        element.classList.add(incorrectClass);
+        element.classList.remove(correctClass);
+    }
+}
 export const isReorderComplete = (slideValues, objectiveString) => {
     if (!objectiveString)
         return false;
@@ -337,7 +373,10 @@ const slideCompleted = async (slideElement) => {
         updateArrangeLettersCorrectness(container, slideValues, objectiveArray);
     }
     else if (isReorderContainer(container)) {
-        updateReorderCorrectness(container, slideValues, objectiveArray);
+        if (isReorderComplete(slideValues, objectiveString)) {
+            allSlideElements.forEach(item => updateElementCategoryClass(item, true));
+        }
+        // updateReorderCorrectness(container, slideValues, objectiveArray);
     }
     if (container.getAttribute('is-continue-on-correct') === 'true') {
         storingEachActivityScore(true);

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

@@ -163,11 +163,11 @@ export 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);
@@ -390,11 +390,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');