catchup-library-web 2.1.1 → 2.1.2

package/dist/index.d.mts

@@ -135,7 +135,6 @@ interface IOrderingActivityProps {
     changeAnswer: (e: any) => void;
     isPreview: boolean;
     showCorrectAnswer: boolean;
-    isFullScreen: boolean;
 }
 interface IDropdownActivityProps {
     answerMap: any;
@@ -255,7 +254,7 @@ declare const MCSAActivityContent: ({ answerMap, data, canAnswerQuestion, change
 
 declare const OpenEndedActivityContent: ({ answerMap, data, changeAnswer, canAnswerQuestion, showMaterialContent, isPreview, isFullScreen, }: IOpenEndedActivityProps) => react_jsx_runtime.JSX.Element;
 
-declare const OrderingActivityContent: ({ answerMap, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, isFullScreen, }: IOrderingActivityProps) => react_jsx_runtime.JSX.Element;
+declare const OrderingActivityContent: ({ answerMap, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, }: IOrderingActivityProps) => react_jsx_runtime.JSX.Element;
 
 declare const TrueFalseActivityContent: ({ answerMap, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, isFullScreen, }: ITrueFalseActivityProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -135,7 +135,6 @@ interface IOrderingActivityProps {
     changeAnswer: (e: any) => void;
     isPreview: boolean;
     showCorrectAnswer: boolean;
-    isFullScreen: boolean;
 }
 interface IDropdownActivityProps {
     answerMap: any;
@@ -255,7 +254,7 @@ declare const MCSAActivityContent: ({ answerMap, data, canAnswerQuestion, change
 
 declare const OpenEndedActivityContent: ({ answerMap, data, changeAnswer, canAnswerQuestion, showMaterialContent, isPreview, isFullScreen, }: IOpenEndedActivityProps) => react_jsx_runtime.JSX.Element;
 
-declare const OrderingActivityContent: ({ answerMap, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, isFullScreen, }: IOrderingActivityProps) => react_jsx_runtime.JSX.Element;
+declare const OrderingActivityContent: ({ answerMap, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, }: IOrderingActivityProps) => react_jsx_runtime.JSX.Element;
 
 declare const TrueFalseActivityContent: ({ answerMap, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, isFullScreen, }: ITrueFalseActivityProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -2298,7 +2298,19 @@ var retrieveActivityTemplateDTOOptionList = (activityTemplateSet) => {
 };
 var retrieveDefaultOrderingDataMap = (orderingMaterialMap) => {
   const dataMap = {};
-  Object.keys(orderingMaterialMap).sort(() => 0.5 - Math.random()).forEach((key, index) => {
+  const originalKeys = Object.keys(orderingMaterialMap);
+  const shuffledKeys = [...originalKeys];
+  for (let i = shuffledKeys.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [shuffledKeys[i], shuffledKeys[j]] = [shuffledKeys[j], shuffledKeys[i]];
+  }
+  const isSameOrder = shuffledKeys.every(
+    (key, index) => key === originalKeys[index]
+  );
+  if (isSameOrder && shuffledKeys.length >= 2) {
+    [shuffledKeys[0], shuffledKeys[1]] = [shuffledKeys[1], shuffledKeys[0]];
+  }
+  shuffledKeys.forEach((key, index) => {
     dataMap[index] = key;
   });
   return dataMap;
@@ -5227,7 +5239,6 @@ var GroupingActivityMaterialContent = ({
   const [draggedElement, setDraggedElement] = (0, import_react20.useState)(
     null
   );
-  const [isShuffled, setIsShuffled] = (0, import_react20.useState)(false);
   const [shuffledMaterialList, setShuffledMaterialList] = (0, import_react20.useState)([]);
   const dragElementRef = (0, import_react20.useRef)(null);
   const [mousePosition, setMousePosition] = (0, import_react20.useState)({
@@ -5240,18 +5251,16 @@ var GroupingActivityMaterialContent = ({
   });
   const ref = (0, import_react20.useRef)(null);
   const dropZoneRefs = (0, import_react20.useRef)({});
+  const hasShuffledRef = (0, import_react20.useRef)(false);
   (0, import_react20.useEffect)(() => {
+    if (hasShuffledRef.current) return;
     const shuffleArray2 = (array) => {
-      if (!isShuffled) {
-        const copyArray = JSON.parse(JSON.stringify(array));
-        for (let i = copyArray.length - 1; i > 0; i--) {
-          const j = Math.floor(Math.random() * (i + 1));
-          [copyArray[i], copyArray[j]] = [copyArray[j], copyArray[i]];
-        }
-        setIsShuffled(true);
-        return copyArray;
+      const copyArray = JSON.parse(JSON.stringify(array));
+      for (let i = copyArray.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [copyArray[i], copyArray[j]] = [copyArray[j], copyArray[i]];
       }
-      return array;
+      return copyArray;
     };
     const materialList = [];
     Object.keys(materialMap).forEach((materialKey) => {
@@ -5260,7 +5269,8 @@ var GroupingActivityMaterialContent = ({
       }
     });
     setShuffledMaterialList(shuffleArray2(materialList));
-  }, [materialMap, isShuffled]);
+    hasShuffledRef.current = true;
+  }, [materialMap]);
   (0, import_react20.useEffect)(() => {
     if (!showCorrectAnswer) return;
     answerMap = materialMap;
@@ -6825,8 +6835,7 @@ var OrderingActivityContent = ({
   canAnswerQuestion,
   changeAnswer,
   isPreview,
-  showCorrectAnswer,
-  isFullScreen
+  showCorrectAnswer
 }) => {
   const contentMap = parseContentMapFromData(data);
   const orderingBodyMap = parseBodyMapFromData(data, "ORDERING");
@@ -7301,8 +7310,7 @@ var ActivityPreviewByData = ({
         },
         data,
         isPreview: true,
-        showCorrectAnswer: true,
-        isFullScreen
+        showCorrectAnswer: true
       }
     ) : selectedType === "DROPDOWN" && data["dropdownBodyMap"] != null && data["dropdownMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       DropdownActivityContent_default,

package/dist/index.mjs

@@ -2074,7 +2074,19 @@ var retrieveActivityTemplateDTOOptionList = (activityTemplateSet) => {
 };
 var retrieveDefaultOrderingDataMap = (orderingMaterialMap) => {
   const dataMap = {};
-  Object.keys(orderingMaterialMap).sort(() => 0.5 - Math.random()).forEach((key, index) => {
+  const originalKeys = Object.keys(orderingMaterialMap);
+  const shuffledKeys = [...originalKeys];
+  for (let i = shuffledKeys.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [shuffledKeys[i], shuffledKeys[j]] = [shuffledKeys[j], shuffledKeys[i]];
+  }
+  const isSameOrder = shuffledKeys.every(
+    (key, index) => key === originalKeys[index]
+  );
+  if (isSameOrder && shuffledKeys.length >= 2) {
+    [shuffledKeys[0], shuffledKeys[1]] = [shuffledKeys[1], shuffledKeys[0]];
+  }
+  shuffledKeys.forEach((key, index) => {
     dataMap[index] = key;
   });
   return dataMap;
@@ -5003,7 +5015,6 @@ var GroupingActivityMaterialContent = ({
   const [draggedElement, setDraggedElement] = useState19(
     null
   );
-  const [isShuffled, setIsShuffled] = useState19(false);
   const [shuffledMaterialList, setShuffledMaterialList] = useState19([]);
   const dragElementRef = useRef5(null);
   const [mousePosition, setMousePosition] = useState19({
@@ -5016,18 +5027,16 @@ var GroupingActivityMaterialContent = ({
   });
   const ref = useRef5(null);
   const dropZoneRefs = useRef5({});
+  const hasShuffledRef = useRef5(false);
   useEffect10(() => {
+    if (hasShuffledRef.current) return;
     const shuffleArray2 = (array) => {
-      if (!isShuffled) {
-        const copyArray = JSON.parse(JSON.stringify(array));
-        for (let i = copyArray.length - 1; i > 0; i--) {
-          const j = Math.floor(Math.random() * (i + 1));
-          [copyArray[i], copyArray[j]] = [copyArray[j], copyArray[i]];
-        }
-        setIsShuffled(true);
-        return copyArray;
+      const copyArray = JSON.parse(JSON.stringify(array));
+      for (let i = copyArray.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [copyArray[i], copyArray[j]] = [copyArray[j], copyArray[i]];
       }
-      return array;
+      return copyArray;
     };
     const materialList = [];
     Object.keys(materialMap).forEach((materialKey) => {
@@ -5036,7 +5045,8 @@ var GroupingActivityMaterialContent = ({
       }
     });
     setShuffledMaterialList(shuffleArray2(materialList));
-  }, [materialMap, isShuffled]);
+    hasShuffledRef.current = true;
+  }, [materialMap]);
   useEffect10(() => {
     if (!showCorrectAnswer) return;
     answerMap = materialMap;
@@ -6601,8 +6611,7 @@ var OrderingActivityContent = ({
   canAnswerQuestion,
   changeAnswer,
   isPreview,
-  showCorrectAnswer,
-  isFullScreen
+  showCorrectAnswer
 }) => {
   const contentMap = parseContentMapFromData(data);
   const orderingBodyMap = parseBodyMapFromData(data, "ORDERING");
@@ -7077,8 +7086,7 @@ var ActivityPreviewByData = ({
         },
         data,
         isPreview: true,
-        showCorrectAnswer: true,
-        isFullScreen
+        showCorrectAnswer: true
       }
     ) : selectedType === "DROPDOWN" && data["dropdownBodyMap"] != null && data["dropdownMaterialMap"] != null ? /* @__PURE__ */ jsx47(
       DropdownActivityContent_default,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/components/activities/ActivityPreviewByData.tsx

@@ -120,7 +120,6 @@ const ActivityPreviewByData = ({
               data={data}
               isPreview={true}
               showCorrectAnswer={true}
-              isFullScreen={isFullScreen}
             />
           ) : selectedType === "DROPDOWN" &&
             data["dropdownBodyMap"] != null &&

package/src/components/activities/OrderingActivityContent.tsx

@@ -15,7 +15,6 @@ const OrderingActivityContent = ({
   changeAnswer,
   isPreview,
   showCorrectAnswer,
-  isFullScreen,
 }: IOrderingActivityProps) => {
   const contentMap = parseContentMapFromData(data);
   const orderingBodyMap = parseBodyMapFromData(data, "ORDERING");

package/src/components/activities/material-contents/GroupingActivityMaterialContent.tsx

@@ -21,7 +21,6 @@ const GroupingActivityMaterialContent = ({
   const [draggedElement, setDraggedElement] = useState<HTMLElement | null>(
     null
   );
-  const [isShuffled, setIsShuffled] = useState(false);
   const [shuffledMaterialList, setShuffledMaterialList] = useState<any[]>([]);
   const dragElementRef = useRef<HTMLDivElement>(null);
   const [mousePosition, setMousePosition] = useState<{ x: number; y: number }>({
@@ -34,28 +33,30 @@ const GroupingActivityMaterialContent = ({
   });
   const ref = useRef<HTMLDivElement>(null);
   const dropZoneRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
+  const hasShuffledRef = useRef<boolean>(false);
 
   useEffect(() => {
+    if (hasShuffledRef.current) return;
+
     const shuffleArray = (array: any) => {
-      if (!isShuffled) {
-        const copyArray = JSON.parse(JSON.stringify(array));
-        for (let i = copyArray.length - 1; i > 0; i--) {
-          const j = Math.floor(Math.random() * (i + 1));
-          [copyArray[i], copyArray[j]] = [copyArray[j], copyArray[i]];
-        }
-        setIsShuffled(true);
-        return copyArray;
+      const copyArray = JSON.parse(JSON.stringify(array));
+      for (let i = copyArray.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [copyArray[i], copyArray[j]] = [copyArray[j], copyArray[i]];
       }
-      return array;
+      return copyArray;
     };
+
     const materialList: any = [];
     Object.keys(materialMap).forEach((materialKey) => {
       for (const materialValue of materialMap[materialKey]) {
         materialList.push(materialValue);
       }
     });
+
     setShuffledMaterialList(shuffleArray(materialList));
-  }, [materialMap, isShuffled]);
+    hasShuffledRef.current = true;
+  }, [materialMap]);
 
   useEffect(() => {
     if (!showCorrectAnswer) return;
@@ -68,7 +69,6 @@ const GroupingActivityMaterialContent = ({
     const dropZoneElement = dropZoneRefs.current[dropTargetKey];
     if (!dropZoneElement) return;
 
-    // Find the scrollable parent container
     const findScrollableParent = (element: HTMLElement): HTMLElement | null => {
       let parent = element.parentElement;
 
@@ -155,7 +155,6 @@ const GroupingActivityMaterialContent = ({
     return "INCORRECT";
   };
 
-  // Mouse drag handlers
   const handleMouseDown = (
     e: React.MouseEvent,
     materialValue: string
@@ -172,7 +171,6 @@ const GroupingActivityMaterialContent = ({
 
     setMousePosition({ x: e.clientX, y: e.clientY });
 
-    // Find the element under the mouse point
     const elementUnder = document.elementFromPoint(e.clientX, e.clientY);
     const dropZone = elementUnder?.closest("[data-grouping-drop-zone]");
 
@@ -193,7 +191,6 @@ const GroupingActivityMaterialContent = ({
     setMousePosition({ x: 0, y: 0 });
   };
 
-  // Touch drag handlers
   const handleTouchStart = (
     e: React.TouchEvent,
     materialValue: string,
@@ -213,7 +210,6 @@ const GroupingActivityMaterialContent = ({
     const touch = e.touches[0];
     setTouchPosition({ x: touch.clientX, y: touch.clientY });
 
-    // Find the element under the touch point
     const elementUnder = document.elementFromPoint(
       touch.clientX,
       touch.clientY
@@ -238,7 +234,6 @@ const GroupingActivityMaterialContent = ({
     setTouchPosition({ x: 0, y: 0 });
   };
 
-  // Click/tap to select (for easier mobile interaction)
   const handleSelectItem = (materialValue: string): void => {
     if (!checkCanAnswerQuestion()) return;
     setSelectedValue(materialValue);

package/src/components/activities/material-contents/OrderingActivityMaterialContent.tsx

@@ -78,7 +78,6 @@ const OrderingActivityMaterialContent = ({
     return 0;
   };
 
-  // Mouse drag handlers
   const handleMouseDown = (e: React.MouseEvent, materialKey: string): void => {
     if (!checkCanAnswerQuestion()) return;
     e.preventDefault();
@@ -117,7 +116,6 @@ const OrderingActivityMaterialContent = ({
     setMousePosition({ x: 0, y: 0 });
   };
 
-  // Touch drag handlers
   const handleTouchStart = (
     e: React.TouchEvent,
     materialKey: string,
@@ -166,7 +164,6 @@ const OrderingActivityMaterialContent = ({
     setTouchPosition({ x: 0, y: 0 });
   };
 
-  // Click/tap to select (for easier mobile interaction)
   const handleSelectItem = (materialKey: string): void => {
     if (!checkCanAnswerQuestion()) return;
 
@@ -187,7 +184,6 @@ const OrderingActivityMaterialContent = ({
       onMouseMove={handleMouseMove}
       onMouseUp={handleMouseUp}
     >
-      {/* Floating drag preview for mouse */}
       {draggedKey && mousePosition.x > 0 && (
         <div
           className="fixed pointer-events-none z-50 opacity-80"
@@ -233,7 +229,6 @@ const OrderingActivityMaterialContent = ({
         </div>
       )}
 
-      {/* Floating drag preview for touch */}
       {draggedKey && touchPosition.x > 0 && (
         <div
           className="fixed pointer-events-none z-50 opacity-80"

package/src/properties/ActivityProperties.ts

@@ -26,7 +26,6 @@ export interface IOrderingActivityProps {
   changeAnswer: (e: any) => void;
   isPreview: boolean;
   showCorrectAnswer: boolean;
-  isFullScreen: boolean;
 }
 
 export interface IOrderingActivityMaterialProps {

package/src/utilization/CatchtivityUtilization.ts

@@ -1112,11 +1112,25 @@ export const retrieveActivityTemplateDTOOptionList = (
 
 const retrieveDefaultOrderingDataMap = (orderingMaterialMap: any) => {
   const dataMap: any = {};
-  Object.keys(orderingMaterialMap)
-    .sort(() => 0.5 - Math.random())
-    .forEach((key, index) => {
-      dataMap[index] = key;
-    });
+  const originalKeys = Object.keys(orderingMaterialMap);
+  const shuffledKeys = [...originalKeys];
+
+  for (let i = shuffledKeys.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [shuffledKeys[i], shuffledKeys[j]] = [shuffledKeys[j], shuffledKeys[i]];
+  }
+
+  const isSameOrder = shuffledKeys.every(
+    (key, index) => key === originalKeys[index]
+  );
+
+  if (isSameOrder && shuffledKeys.length >= 2) {
+    [shuffledKeys[0], shuffledKeys[1]] = [shuffledKeys[1], shuffledKeys[0]];
+  }
+
+  shuffledKeys.forEach((key, index) => {
+    dataMap[index] = key;
+  });
 
   return dataMap;
 };