lido-player 0.0.2-beta-23-dev → 0.0.2-beta-24-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);
     }
@@ -105,10 +105,10 @@ export function stopHighlightForSpeakingElement(element) {
 }
 export function highlightElement() {
     const container = document.querySelector(LidoContainer);
-    if (container.getAttribute("template-id") === "blender")
-        return;
     if (!container)
         return;
+    if (container.getAttribute("template-id") === "blender")
+        return;
     const dropElements = buildDropHasDragFromDOM();
     const dropEls = container.querySelectorAll(`[type="drop"]`);
     dropEls.forEach(dropEl => {

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

@@ -21,6 +21,20 @@ const slideNumbers = (element) => {
     }
 };
 const delay = (ms) => new Promise(res => setTimeout(res, ms));
+const isArrangeLettersContainer = (container) => container.getAttribute('template-id') === 'arrangeLetters';
+const isReorderContainer = (container) => container.getAttribute('template-id') === 'reorder';
+export const getSlideValuesForValidation = (container, slideElements) => {
+    if (isReorderContainer(container)) {
+        return slideElements.map(element => element.id);
+    }
+    return slideElements.map(element => element['value']);
+};
+const syncSlideOrder = (container) => {
+    const slideElements = Array.from(container.querySelectorAll("[type='slide']"));
+    const slideOrder = getSlideValuesForValidation(container, slideElements);
+    container.setAttribute(SelectedValuesKey, JSON.stringify(slideOrder));
+    return slideOrder;
+};
 export const slideAnimation = async () => {
     const container = document.getElementById(LidoContainer);
     if (!container)
@@ -81,6 +95,9 @@ export 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);
     let verticalDistance;
     let horizontalDistance;
     const onStart = (event) => {
@@ -262,14 +279,6 @@ export function slidingWithScaling(element) {
     element.addEventListener('touchstart', onStart);
     element.addEventListener(LIDO_INTERACTION_CLEANUP_EVENT, cleanup);
 }
-const isArrangeLettersContainer = (container) => container.getAttribute('template-id') === 'arrangeLetters';
-const isReorderContainer = (container) => container.getAttribute('template-id') === 'reorder';
-export const getSlideValuesForValidation = (container, slideElements) => {
-    if (isReorderContainer(container)) {
-        return slideElements.map(element => element.id);
-    }
-    return slideElements.map(element => element['value']);
-};
 export const updateArrangeLettersCorrectness = (container, slideValues, objectiveValues) => {
     const slideElements = Array.from(container.querySelectorAll('[type="slide"]'));
     slideElements.forEach((element, index) => {

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');