catchup-library-web 2.5.16 → 2.5.18

package/package.json

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

package/src/components/activities/GroupingActivityContent.tsx

@@ -26,7 +26,7 @@ const GroupingActivityContent = ({
     answerMap: any,
     key: any,
     value: string | null,
-    index: number | null
+    index: number | null,
   ) => {
     if (isPreview) return;
     if (value) {
@@ -39,7 +39,9 @@ const GroupingActivityContent = ({
 
   return (
     <div className="flex flex-row flex-wrap h-full">
-      <div className={`${isFullScreen ? "w-full" : "w-full md:w-[30%] md:overflow-y-auto"}`}>
+      <div
+        className={`${isFullScreen ? "w-full" : "w-full md:w-[40%] md:overflow-y-auto"}`}
+      >
         <ActivityBodyContent
           bodyMap={groupingBodyMap}
           templateType={"GROUPING"}
@@ -51,7 +53,9 @@ const GroupingActivityContent = ({
       <div className={`${isFullScreen ? "hidden" : "hidden md:block"}`}>
         <VerticalDividerLine />
       </div>
-      <div className={`${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`}>
+      <div
+        className={`${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`}
+      >
         <GroupingActivityMaterialContent
           uniqueValue={JSON.stringify(data.contentMap)}
           answerMap={answerMap}

package/src/components/activities/MatchingActivityContent.tsx

@@ -25,7 +25,7 @@ const MatchingActivityContent = ({
   const handleMatchingAnswerOnChange = (
     answerMap: any,
     key: any,
-    value: string | null
+    value: string | null,
   ) => {
     if (isPreview) return;
     answerMap[key] = value;
@@ -34,7 +34,9 @@ const MatchingActivityContent = ({
 
   return (
     <div className="flex flex-row flex-wrap h-full">
-      <div className={`${isFullScreen ? "w-full" : "w-full md:w-[30%] md:overflow-y-auto"}`}>
+      <div
+        className={`${isFullScreen ? "w-full" : "w-full md:w-[40%] md:overflow-y-auto"}`}
+      >
         <ActivityBodyContent
           bodyMap={matchingBodyMap}
           templateType={"MATCHING"}
@@ -46,7 +48,9 @@ const MatchingActivityContent = ({
       <div className={`${isFullScreen ? "hidden" : "hidden md:block"}`}>
         <VerticalDividerLine />
       </div>
-      <div className={`${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`}>
+      <div
+        className={`${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`}
+      >
         <MatchingActivityMaterialContent
           uniqueValue={JSON.stringify(data.contentMap)}
           answerMap={answerMap}

package/src/components/activities/OrderingActivityContent.tsx

@@ -25,7 +25,7 @@ const OrderingActivityContent = ({
   const handleOrderingAnswerOnChange = (
     answerMap: any,
     primaryKey: any,
-    secondaryKey: any
+    secondaryKey: any,
   ) => {
     if (isPreview) return;
     const prevValue = answerMap[primaryKey];
@@ -36,7 +36,9 @@ const OrderingActivityContent = ({
 
   return (
     <div className="flex flex-row flex-wrap h-full">
-      <div className={`${isFullScreen ? "w-full" : "w-full md:w-[30%] md:overflow-y-auto"}`}>
+      <div
+        className={`${isFullScreen ? "w-full" : "w-full md:w-[40%] md:overflow-y-auto"}`}
+      >
         <ActivityBodyContent
           bodyMap={orderingBodyMap}
           templateType={"ORDERING"}
@@ -48,7 +50,9 @@ const OrderingActivityContent = ({
       <div className={`${isFullScreen ? "hidden" : "hidden md:block"}`}>
         <VerticalDividerLine />
       </div>
-      <div className={`${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`}>
+      <div
+        className={`${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`}
+      >
         <OrderingActivityMaterialContent
           uniqueValue={JSON.stringify(data.contentMap)}
           answerMap={answerMap}

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

@@ -47,15 +47,16 @@ const DropdownActivityMaterialContent = ({
   };
 
   return (
-    <div className="flex flex-row flex-wrap items-center">
-      <div className="hidden md:block">
+    <div className="flex flex-col h-full">
+      <div className="hidden md:block flex-shrink-0">
         <span className="font-semibold text-xl opacity-60">
           {i18n.t("please_select_dropdown_text")}
         </span>
       </div>
-      <div className="hidden md:contents">
+      <div className="hidden md:block flex-shrink-0">
         <DividerLine />
       </div>
+      <div className="flex-1 min-h-0 overflow-y-auto">
       <div className="w-full flex flex-row flex-wrap">
         {Object.keys(displayAnswerMap).map(
           (materialKey: string, index: number) => {
@@ -215,6 +216,7 @@ const DropdownActivityMaterialContent = ({
           }
         )}
       </div>
+      </div>
     </div>
   );
 };

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

@@ -175,16 +175,16 @@ const FillInTheBlanksActivityMaterialContent = ({
 
   return (
     <div
-      className="flex flex-row flex-wrap items-center"
+      className="flex flex-col h-full"
       onMouseMove={handleMouseMove}
       onMouseUp={handleMouseUp}
     >
-      <div className="hidden md:block">
+      <div className="hidden md:block flex-shrink-0">
         <span className="font-semibold text-xl opacity-60">
           {i18n.t("please_select_fill_in_the_blanks_text")}
         </span>
       </div>
-      <div className="hidden md:contents">
+      <div className="hidden md:block flex-shrink-0">
         <DividerLine />
       </div>
 
@@ -252,6 +252,7 @@ const FillInTheBlanksActivityMaterialContent = ({
         </div>
       )}
 
+      <div className="flex-1 min-h-0 overflow-y-auto">
       <div className="w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2">
         {shuffleOptionList.map((option, index) =>
           checkAnswerProvided(displayAnswerMap, option) ? (
@@ -439,6 +440,7 @@ const FillInTheBlanksActivityMaterialContent = ({
           );
         })}
       </div>
+      </div>
     </div>
   );
 };

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

@@ -254,7 +254,7 @@ const GroupingActivityMaterialContent = ({
   const filteredMaterialList = retrieveFilteredMaterialList(displayAnswerMap);
 
   return (
-    <div onMouseMove={handleMouseMove} onMouseUp={handleMouseUp}>
+    <div className="flex flex-col h-full" onMouseMove={handleMouseMove} onMouseUp={handleMouseUp}>
       {/* Floating drag preview for mouse */}
       {draggedValue && mousePosition.x > 0 && (
         <div
@@ -353,7 +353,7 @@ const GroupingActivityMaterialContent = ({
 
       {filteredMaterialList.length > 0 ? (
         <>
-          <div className="flex-1 flex flex-row gap-x-4 overflow-x-auto py-2">
+          <div className="flex-shrink-0 flex flex-row gap-x-4 overflow-x-auto py-2">
             {filteredMaterialList.map((materialValue, index) => {
               return (
                 <div
@@ -421,9 +421,10 @@ const GroupingActivityMaterialContent = ({
               );
             })}
           </div>
-          <DividerLine />
+          <div className="flex-shrink-0"><DividerLine /></div>
         </>
       ) : null}
+      <div className="flex-1 min-h-0 overflow-y-auto">
       {Object.keys(displayAnswerMap).map((answerMapKey, index) => (
         <div key={index} className="flex flex-row w-full">
           <div className="w-1/3">
@@ -569,6 +570,7 @@ const GroupingActivityMaterialContent = ({
           </div>
         </div>
       ))}
+      </div>
     </div>
   );
 };

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

@@ -55,18 +55,19 @@ const MCMAActivityMaterialContent = ({
 
   const correctAnswerList = retrieveCorrectAnswerList();
 
-  return Object.keys(materialMap).map((materialKey, index) => {
+  return (<div className="flex flex-col h-full">{Object.keys(materialMap).map((materialKey, index) => {
     return (
-      <div key={index} className="flex flex-row items-center my-1">
-        <div className="flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0">
-          <div className="hidden md:block">
+      <div key={index} className="flex flex-col flex-1 min-h-0">
+        <div className="flex-1 flex flex-col border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0 min-h-0">
+          <div className="hidden md:block flex-shrink-0">
             <span className="font-semibold text-xl opacity-60">
               {i18n.t("please_select_mcma_text")}
             </span>
           </div>
-          <div className="hidden md:contents">
+          <div className="hidden md:block flex-shrink-0">
             <DividerLine />
           </div>
+          <div className="flex-1 min-h-0 overflow-y-auto">
           {checkCanAnswerQuestion() ? (
             <div className="flex flex-row w-full flex-wrap ">
               {materialMap[materialKey].map(
@@ -165,10 +166,11 @@ const MCMAActivityMaterialContent = ({
               ))}
             </p>
           )}
+          </div>
         </div>
       </div>
     );
-  });
+  })}</div>);
 };
 
 export default MCMAActivityMaterialContent;

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

@@ -47,18 +47,19 @@ const MCSAActivityMaterialContent = ({
 
   const correctAnswer = retrieveCorrectAnswer();
 
-  return Object.keys(materialMap).map((materialKey, index) => {
+  return (<div className="flex flex-col h-full">{Object.keys(materialMap).map((materialKey, index) => {
     return (
-      <div className="flex flex-row items-center my-1" key={index}>
-        <div className="flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0">
-          <div className="hidden md:block">
+      <div className="flex flex-col flex-1 min-h-0" key={index}>
+        <div className="flex-1 flex flex-col border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0 min-h-0">
+          <div className="hidden md:block flex-shrink-0">
             <span className="font-semibold text-xl opacity-60">
               {i18n.t("please_select_mcsa_text")}
             </span>
           </div>
-          <div className="hidden md:contents">
+          <div className="hidden md:block flex-shrink-0">
             <DividerLine />
           </div>
+          <div className="flex-1 min-h-0 overflow-y-auto">
           {checkCanAnswerQuestion() ? (
             <div
               className={`flex flex-row w-full ${
@@ -159,10 +160,11 @@ const MCSAActivityMaterialContent = ({
               ))}
             </p>
           )}
+          </div>
         </div>
       </div>
     );
-  });
+  })}</div>);
 };
 
 export default MCSAActivityMaterialContent;

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

@@ -253,7 +253,7 @@ const MatchingActivityMaterialContent = ({
   const filteredMaterialList = retrieveFilteredMaterialList(displayAnswerMap);
 
   return (
-    <div onMouseMove={handleMouseMove} onMouseUp={handleMouseUp}>
+    <div className="flex flex-col h-full" onMouseMove={handleMouseMove} onMouseUp={handleMouseUp}>
       {draggedValue && mousePosition.x > 0 && (
         <div
           className="fixed pointer-events-none z-50 opacity-80"
@@ -425,6 +425,7 @@ const MatchingActivityMaterialContent = ({
         </>
       ) : null}
 
+      <div className="flex-1 min-h-0 overflow-y-auto">
       {Object.keys(displayAnswerMap).map((answerMapKey, index) => {
         const learnerAnswerState = checkAnswerState(
           materialMap[answerMapKey],
@@ -551,6 +552,7 @@ const MatchingActivityMaterialContent = ({
           </div>
         );
       })}
+      </div>
     </div>
   );
 };

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

@@ -101,16 +101,16 @@ const OpenEndedActivityMaterialContent = ({
   };
 
   return (
-    <>
-      <div className="">
-        <div className="hidden md:block">
+      <div className="flex flex-col h-full">
+        <div className="hidden md:block flex-shrink-0">
           <span className="font-semibold text-xl opacity-60">
             {i18n.t("please_select_open_ended_text")}
           </span>
         </div>
-        <div className="hidden md:contents">
+        <div className="hidden md:block flex-shrink-0">
           <DividerLine />
         </div>
+        <div className="flex-1 min-h-0 overflow-y-auto">
         {contentMap.type === "TEXT"
           ? RenderTextContent(answerMap)
           : contentMap.type === "IMAGE"
@@ -118,8 +118,8 @@ const OpenEndedActivityMaterialContent = ({
           : contentMap.type === "AUDIO"
           ? RenderAudioContent(answerMap)
           : null}
+        </div>
       </div>
-    </>
   );
 };
 

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

@@ -153,7 +153,7 @@ const OrderingActivityMaterialContent = ({
 
   return (
     <div
-      className="flex flex-row flex-wrap"
+      className="flex flex-col h-full"
       onMouseMove={handleMouseMove}
       onMouseUp={handleMouseUp}
     >
@@ -247,6 +247,7 @@ const OrderingActivityMaterialContent = ({
         </div>
       )}
 
+      <div className="flex-1 min-h-0 overflow-y-auto">
       {Object.keys(displayAnswerMap).map((materialKey, index) => {
         const learnerAnswerState = checkAnswerState(
           displayAnswerMap[materialKey] + "",
@@ -347,6 +348,7 @@ const OrderingActivityMaterialContent = ({
           </div>
         );
       })}
+      </div>
     </div>
   );
 };

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

@@ -49,16 +49,16 @@ const TrueFalseActivityMaterialContent = ({
   };
 
   return (
-    <div className="">
-      <div className="hidden md:block">
+    <div className="flex flex-col h-full">
+      <div className="hidden md:block flex-shrink-0">
         <span className="font-semibold text-xl opacity-60">
           {i18n.t("please_select_true_false_text")}
         </span>
       </div>
-      <div className="hidden md:contents">
+      <div className="hidden md:block flex-shrink-0">
         <DividerLine />
       </div>
-      <div className="flex flex-row justify-end items-center gap-x-2">
+      <div className="flex flex-row justify-end items-center gap-x-2 flex-shrink-0">
         <div className="w-[50px]">
           <p className="font-bold text-lg">{i18n.t("true")}</p>
         </div>
@@ -66,6 +66,7 @@ const TrueFalseActivityMaterialContent = ({
           <p className="font-bold text-lg">{i18n.t("false")}</p>
         </div>
       </div>
+      <div className="flex-1 min-h-0 overflow-y-auto">
       {checkCanAnswerQuestion() ? (
         <div className={`flex flex-row w-full justify-center flex-wrap`}>
           {shuffleOptionList.map((shuffleOption, index) => {
@@ -191,6 +192,7 @@ const TrueFalseActivityMaterialContent = ({
           ))}
         </>
       )}
+      </div>
     </div>
   );
 };