catchup-library-web 2.5.16 → 2.5.17

package/dist/index.js

@@ -4658,10 +4658,10 @@ var DropdownActivityMaterialContent = ({
     }
     return "INCORRECT";
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-row flex-wrap items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_dropdown_text") }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(displayAnswerMap).map(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_dropdown_text") }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(displayAnswerMap).map(
       (materialKey, index) => {
         const answerKey = Object.keys(materialMap[materialKey])[0];
         const learnerAnswerState = checkAnswerState(
@@ -4768,7 +4768,7 @@ var DropdownActivityMaterialContent = ({
           ] })
         ] }) }) }, index);
       }
-    ) })
+    ) }) })
   ] });
 };
 var DropdownActivityMaterialContent_default = DropdownActivityMaterialContent;
@@ -4987,12 +4987,12 @@ var FillInTheBlanksActivityMaterialContent = ({
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
-      className: "flex flex-row flex-wrap items-center",
+      className: "flex flex-col h-full",
       onMouseMove: handleMouseMove,
       onMouseUp: handleMouseUp,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DividerLine_default, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DividerLine_default, {}) }),
         draggedOption && mousePosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "div",
           {
@@ -5045,148 +5045,150 @@ var FillInTheBlanksActivityMaterialContent = ({
             ) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2", children: shuffleOptionList.map(
-          (option, index) => checkAnswerProvided(displayAnswerMap, option) ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            ShowMaterialMediaByContentType_default,
-            {
-              contentType: contentMap.type,
-              src: option,
-              canFullScreen: true
-            },
-            `${uniqueValue}-${index}`
-          ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            "div",
-            {
-              ref: draggedOption === option ? dragElementRef : null,
-              className: `${draggedOption === option ? "opacity-40" : selectedOption === option ? "ring-2 ring-blue-500" : "opacity-100"} transition-all duration-200`,
-              onMouseDown: (e) => handleMouseDown(e, option),
-              onTouchStart: (e) => handleTouchStart(e, option, e.currentTarget),
-              onTouchMove: handleTouchMove,
-              onTouchEnd: handleTouchEnd,
-              children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                "div",
-                {
-                  className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer select-none",
-                  onClick: () => handleSelectOption(option),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                    InputWithSpecialExpression_default,
-                    {
-                      value: option,
-                      showSpecialOnly: false
-                    }
-                  ) })
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                "div",
-                {
-                  className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer select-none",
-                  onClick: () => handleSelectOption(option),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                    ShowMaterialMediaByContentType_default,
-                    {
-                      contentType: contentMap.type,
-                      src: option,
-                      canFullScreen: true
-                    },
-                    `${uniqueValue}-${index}`
-                  )
-                }
-              )
-            },
-            index
-          )
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(displayAnswerMap).map((materialKey, index) => {
-          const learnerAnswerState = checkAnswerState(
-            JSON.parse(materialMap[materialKey]),
-            displayAnswerMap[materialKey]
-          );
-          return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            "div",
-            {
-              "data-drop-zone": materialKey,
-              onMouseEnter: () => draggedOption && setDropTargetIndex(materialKey),
-              onMouseLeave: () => setDropTargetIndex(null),
-              onClick: () => handleDropZoneClick(materialKey),
-              className: `${dropTargetIndex === materialKey ? "ring-2 ring-blue-400 bg-blue-50" : ""} transition-all duration-200 rounded-lg`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "my-auto", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("p", { className: "text-xl", children: [
-                  parseFloat(materialKey) + 1,
-                  "."
-                ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "relative", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                    "div",
-                    {
-                      className: `w-full min-h-[44px] border rounded-lg ${displayAnswerMap[materialKey] ? "border-catchup-blue-400 px-2 cursor-pointer" : "bg-catchup-gray-50 border-catchup-gray-200 border-dashed py-2 px-4"}`,
-                      onClick: (e) => {
-                        if (displayAnswerMap[materialKey]) {
-                          e.stopPropagation();
-                          onChange(answerMap, materialKey, "");
-                        }
-                      },
-                      children: displayAnswerMap[materialKey] ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                        InputWithSpecialExpression_default,
-                        {
-                          value: displayAnswerMap[materialKey],
-                          showSpecialOnly: false
-                        }
-                      ) : null
-                    }
-                  ) }),
-                  learnerAnswerState === "CORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                    BaseImage_default,
-                    {
-                      src: "/icons/checkbox.webp",
-                      alt: "checkbox",
-                      size: "small"
-                    }
-                  ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                    BaseImage_default,
-                    {
-                      src: "/icons/cross-red.webp",
-                      alt: "cross-red",
-                      size: "small"
-                    }
-                  ) }) : null
-                ] }) : displayAnswerMap[materialKey] === "" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2", children: shuffleOptionList.map(
+            (option, index) => checkAnswerProvided(displayAnswerMap, option) ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              ShowMaterialMediaByContentType_default,
+              {
+                contentType: contentMap.type,
+                src: option,
+                canFullScreen: true
+              },
+              `${uniqueValue}-${index}`
+            ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              "div",
+              {
+                ref: draggedOption === option ? dragElementRef : null,
+                className: `${draggedOption === option ? "opacity-40" : selectedOption === option ? "ring-2 ring-blue-500" : "opacity-100"} transition-all duration-200`,
+                onMouseDown: (e) => handleMouseDown(e, option),
+                onTouchStart: (e) => handleTouchStart(e, option, e.currentTarget),
+                onTouchMove: handleTouchMove,
+                onTouchEnd: handleTouchEnd,
+                children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   "div",
                   {
-                    className: `w-catchup-activity-media-box-item h-catchup-activity-media-box-item border rounded-catchup-xlarge border-dashed ${learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
+                    className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer select-none",
+                    onClick: () => handleSelectOption(option),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                      InputWithSpecialExpression_default,
+                      {
+                        value: option,
+                        showSpecialOnly: false
+                      }
+                    ) })
                   }
                 ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   "div",
                   {
-                    className: "flex-1 cursor-pointer",
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      onChange(answerMap, materialKey, "");
-                    },
+                    className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer select-none",
+                    onClick: () => handleSelectOption(option),
                     children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                       ShowMaterialMediaByContentType_default,
                       {
                         contentType: contentMap.type,
-                        src: displayAnswerMap[materialKey],
+                        src: option,
                         canFullScreen: true
                       },
                       `${uniqueValue}-${index}`
                     )
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
-                  displayAnswerMap[materialKey]
-                ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                  "span",
-                  {
-                    className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_katex4.InlineMath, { math: inputPart.value }) }) : inputPart.value
-                  },
-                  index2
-                )) }, materialKey) })
-              ] })
-            }
-          ) }) }, index);
-        }) })
+                )
+              },
+              index
+            )
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(displayAnswerMap).map((materialKey, index) => {
+            const learnerAnswerState = checkAnswerState(
+              JSON.parse(materialMap[materialKey]),
+              displayAnswerMap[materialKey]
+            );
+            return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              "div",
+              {
+                "data-drop-zone": materialKey,
+                onMouseEnter: () => draggedOption && setDropTargetIndex(materialKey),
+                onMouseLeave: () => setDropTargetIndex(null),
+                onClick: () => handleDropZoneClick(materialKey),
+                className: `${dropTargetIndex === materialKey ? "ring-2 ring-blue-400 bg-blue-50" : ""} transition-all duration-200 rounded-lg`,
+                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "my-auto", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("p", { className: "text-xl", children: [
+                    parseFloat(materialKey) + 1,
+                    "."
+                  ] }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "relative", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                      "div",
+                      {
+                        className: `w-full min-h-[44px] border rounded-lg ${displayAnswerMap[materialKey] ? "border-catchup-blue-400 px-2 cursor-pointer" : "bg-catchup-gray-50 border-catchup-gray-200 border-dashed py-2 px-4"}`,
+                        onClick: (e) => {
+                          if (displayAnswerMap[materialKey]) {
+                            e.stopPropagation();
+                            onChange(answerMap, materialKey, "");
+                          }
+                        },
+                        children: displayAnswerMap[materialKey] ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                          InputWithSpecialExpression_default,
+                          {
+                            value: displayAnswerMap[materialKey],
+                            showSpecialOnly: false
+                          }
+                        ) : null
+                      }
+                    ) }),
+                    learnerAnswerState === "CORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                      BaseImage_default,
+                      {
+                        src: "/icons/checkbox.webp",
+                        alt: "checkbox",
+                        size: "small"
+                      }
+                    ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                      BaseImage_default,
+                      {
+                        src: "/icons/cross-red.webp",
+                        alt: "cross-red",
+                        size: "small"
+                      }
+                    ) }) : null
+                  ] }) : displayAnswerMap[materialKey] === "" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                    "div",
+                    {
+                      className: `w-catchup-activity-media-box-item h-catchup-activity-media-box-item border rounded-catchup-xlarge border-dashed ${learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                    "div",
+                    {
+                      className: "flex-1 cursor-pointer",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onChange(answerMap, materialKey, "");
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                        ShowMaterialMediaByContentType_default,
+                        {
+                          contentType: contentMap.type,
+                          src: displayAnswerMap[materialKey],
+                          canFullScreen: true
+                        },
+                        `${uniqueValue}-${index}`
+                      )
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
+                    displayAnswerMap[materialKey]
+                  ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                    "span",
+                    {
+                      className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_katex4.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                    },
+                    index2
+                  )) }, materialKey) })
+                ] })
+              }
+            ) }) }, index);
+          }) })
+        ] })
       ]
     }
   );
@@ -5472,7 +5474,7 @@ var GroupingActivityMaterialContent = ({
     }
   };
   const filteredMaterialList = retrieveFilteredMaterialList(displayAnswerMap);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col h-full", onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
     draggedValue && mousePosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "div",
       {
@@ -5532,7 +5534,7 @@ var GroupingActivityMaterialContent = ({
       }
     ),
     filteredMaterialList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex-1 flex flex-row gap-x-4 overflow-x-auto py-2", children: filteredMaterialList.map((materialValue, index) => {
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex-shrink-0 flex flex-row gap-x-4 overflow-x-auto py-2", children: filteredMaterialList.map((materialValue, index) => {
         return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "div",
           {
@@ -5571,9 +5573,9 @@ var GroupingActivityMaterialContent = ({
           index
         );
       }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DividerLine_default, {})
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DividerLine_default, {}) })
     ] }) : null,
-    Object.keys(displayAnswerMap).map((answerMapKey, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-row w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: Object.keys(displayAnswerMap).map((answerMapKey, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-row w-full", children: [
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-1/3", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "div",
         {
@@ -5657,7 +5659,7 @@ var GroupingActivityMaterialContent = ({
           ) }) })
         }
       ) }) })
-    ] }, index))
+    ] }, index)) })
   ] });
 };
 var GroupingActivityMaterialContent_default = GroupingActivityMaterialContent;
@@ -5686,28 +5688,40 @@ var GroupingActivityContent = ({
     changeAnswer(answerMap2);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-row flex-wrap h-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[30%] md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-      ActivityBodyContent_default,
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "div",
       {
-        bodyMap: groupingBodyMap,
-        templateType: "GROUPING"
+        className: `${isFullScreen ? "w-full" : "w-full md:w-[40%] md:overflow-y-auto"}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          ActivityBodyContent_default,
+          {
+            bodyMap: groupingBodyMap,
+            templateType: "GROUPING"
+          }
+        )
       }
-    ) }),
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DividerLine_default, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-      GroupingActivityMaterialContent_default,
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "div",
       {
-        uniqueValue: JSON.stringify(data.contentMap),
-        answerMap,
-        materialMap: groupingMaterialMap,
-        contentMap,
-        checkCanAnswerQuestion: canAnswerQuestion,
-        onChange: handleGroupingAnswerOnChange,
-        isPreview,
-        showCorrectAnswer
+        className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          GroupingActivityMaterialContent_default,
+          {
+            uniqueValue: JSON.stringify(data.contentMap),
+            answerMap,
+            materialMap: groupingMaterialMap,
+            contentMap,
+            checkCanAnswerQuestion: canAnswerQuestion,
+            onChange: handleGroupingAnswerOnChange,
+            isPreview,
+            showCorrectAnswer
+          }
+        )
       }
-    ) })
+    )
   ] });
 };
 var GroupingActivityContent_default = GroupingActivityContent;
@@ -5903,7 +5917,7 @@ var MatchingActivityMaterialContent = ({
     }
   };
   const filteredMaterialList = retrieveFilteredMaterialList(displayAnswerMap);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col h-full", onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
     draggedValue && mousePosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "div",
       {
@@ -6009,7 +6023,7 @@ var MatchingActivityMaterialContent = ({
       ),
       /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DividerLine_default, {}) })
     ] }) : null,
-    Object.keys(displayAnswerMap).map((answerMapKey, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: Object.keys(displayAnswerMap).map((answerMapKey, index) => {
       const learnerAnswerState = checkAnswerState(
         materialMap[answerMapKey],
         displayAnswerMap[answerMapKey]
@@ -6075,7 +6089,7 @@ var MatchingActivityMaterialContent = ({
           }
         ) })
       ] }, index);
-    })
+    }) })
   ] });
 };
 var MatchingActivityMaterialContent_default = MatchingActivityMaterialContent;
@@ -6100,28 +6114,40 @@ var MatchingActivityContent = ({
     changeAnswer(answerMap2);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-row flex-wrap h-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[30%] md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-      ActivityBodyContent_default,
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      "div",
       {
-        bodyMap: matchingBodyMap,
-        templateType: "MATCHING"
+        className: `${isFullScreen ? "w-full" : "w-full md:w-[40%] md:overflow-y-auto"}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          ActivityBodyContent_default,
+          {
+            bodyMap: matchingBodyMap,
+            templateType: "MATCHING"
+          }
+        )
       }
-    ) }),
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DividerLine_default, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-      MatchingActivityMaterialContent_default,
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      "div",
       {
-        uniqueValue: JSON.stringify(data.contentMap),
-        answerMap,
-        materialMap: matchingMaterialMap,
-        contentMap,
-        checkCanAnswerQuestion: canAnswerQuestion,
-        onChange: handleMatchingAnswerOnChange,
-        isPreview,
-        showCorrectAnswer
+        className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          MatchingActivityMaterialContent_default,
+          {
+            uniqueValue: JSON.stringify(data.contentMap),
+            answerMap,
+            materialMap: matchingMaterialMap,
+            contentMap,
+            checkCanAnswerQuestion: canAnswerQuestion,
+            onChange: handleMatchingAnswerOnChange,
+            isPreview,
+            showCorrectAnswer
+          }
+        )
       }
-    ) })
+    )
   ] });
 };
 var MatchingActivityContent_default = MatchingActivityContent;
@@ -6167,11 +6193,11 @@ var MCMAActivityMaterialContent = ({
     return "INCORRECT";
   };
   const correctAnswerList = retrieveCorrectAnswerList();
-  return Object.keys(materialMap).map((materialKey, index) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcma_text") }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DividerLine_default, {}) }),
-      checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex flex-row w-full flex-wrap ", children: materialMap[materialKey].map(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex flex-col h-full", children: Object.keys(materialMap).map((materialKey, index) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex-1 flex flex-col border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0 min-h-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcma_text") }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DividerLine_default, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex flex-row w-full flex-wrap ", children: materialMap[materialKey].map(
         (materialSubKey, index2) => {
           const foundAnswer = displayAnswerMap[materialKey].find(
             (learnerAnswer) => learnerAnswer === materialSubKey
@@ -6234,9 +6260,9 @@ var MCMAActivityMaterialContent = ({
           children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_katex7.InlineMath, { math: inputPart.value }) }) : inputPart.value
         },
         index2
-      )) }, materialKey)
+      )) }, materialKey) })
     ] }) }, index);
-  });
+  }) });
 };
 var MCMAActivityMaterialContent_default = MCMAActivityMaterialContent;
 
@@ -6322,11 +6348,11 @@ var MCSAActivityMaterialContent = ({
     return "INCORRECT";
   };
   const correctAnswer = retrieveCorrectAnswer();
-  return Object.keys(materialMap).map((materialKey, index) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcsa_text") }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DividerLine_default, {}) }),
-      checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex flex-col h-full", children: Object.keys(materialMap).map((materialKey, index) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex-1 flex flex-col border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0 min-h-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcsa_text") }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DividerLine_default, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "div",
         {
           className: `flex flex-row w-full ${Object.keys(materialMap[materialKey]).length <= 4 ? "justify-center" : ""} flex-wrap`,
@@ -6389,9 +6415,9 @@ var MCSAActivityMaterialContent = ({
           children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_katex8.InlineMath, { math: inputPart.value }) }) : inputPart.value
         },
         index2
-      )) })
+      )) }) })
     ] }) }, index);
-  });
+  }) });
 };
 var MCSAActivityMaterialContent_default = MCSAActivityMaterialContent;
 
@@ -6605,11 +6631,11 @@ var OpenEndedActivityMaterialContent = ({
       }
     ) });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_open_ended_text") }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DividerLine_default, {}) }),
-    contentMap.type === "TEXT" ? RenderTextContent(answerMap) : contentMap.type === "IMAGE" ? RenderImageContent(answerMap) : contentMap.type === "AUDIO" ? RenderAudioContent(answerMap) : null
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_open_ended_text") }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: contentMap.type === "TEXT" ? RenderTextContent(answerMap) : contentMap.type === "IMAGE" ? RenderImageContent(answerMap) : contentMap.type === "AUDIO" ? RenderAudioContent(answerMap) : null })
+  ] });
 };
 var OpenEndedActivityMaterialContent_default = OpenEndedActivityMaterialContent;
 
@@ -6791,7 +6817,7 @@ var OrderingActivityMaterialContent = ({
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     "div",
     {
-      className: "flex flex-row flex-wrap",
+      className: "flex flex-col h-full",
       onMouseMove: handleMouseMove,
       onMouseUp: handleMouseUp,
       children: [
@@ -6853,7 +6879,7 @@ var OrderingActivityMaterialContent = ({
             ) })
           }
         ),
-        Object.keys(displayAnswerMap).map((materialKey, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: Object.keys(displayAnswerMap).map((materialKey, index) => {
           const learnerAnswerState = checkAnswerState(
             displayAnswerMap[materialKey] + "",
             index + ""
@@ -6912,7 +6938,7 @@ var OrderingActivityMaterialContent = ({
               ]
             }
           ) }, index);
-        })
+        }) })
       ]
     }
   );
@@ -6941,28 +6967,40 @@ var OrderingActivityContent = ({
     changeAnswer(answerMap2);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-row flex-wrap h-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[30%] md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-      ActivityBodyContent_default,
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      "div",
       {
-        bodyMap: orderingBodyMap,
-        templateType: "ORDERING"
+        className: `${isFullScreen ? "w-full" : "w-full md:w-[40%] md:overflow-y-auto"}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          ActivityBodyContent_default,
+          {
+            bodyMap: orderingBodyMap,
+            templateType: "ORDERING"
+          }
+        )
       }
-    ) }),
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DividerLine_default, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-      OrderingActivityMaterialContent_default,
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      "div",
       {
-        uniqueValue: JSON.stringify(data.contentMap),
-        answerMap,
-        materialMap: orderingMaterialMap,
-        contentMap,
-        checkCanAnswerQuestion: canAnswerQuestion,
-        onChange: handleOrderingAnswerOnChange,
-        isPreview,
-        showCorrectAnswer
+        className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          OrderingActivityMaterialContent_default,
+          {
+            uniqueValue: JSON.stringify(data.contentMap),
+            answerMap,
+            materialMap: orderingMaterialMap,
+            contentMap,
+            checkCanAnswerQuestion: canAnswerQuestion,
+            onChange: handleOrderingAnswerOnChange,
+            isPreview,
+            showCorrectAnswer
+          }
+        )
       }
-    ) })
+    )
   ] });
 };
 var OrderingActivityContent_default = OrderingActivityContent;
@@ -7007,14 +7045,14 @@ var TrueFalseActivityMaterialContent = ({
     }
     return "INCORRECT";
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_true_false_text") }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-row justify-end items-center gap-x-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_true_false_text") }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-row justify-end items-center gap-x-2 flex-shrink-0", children: [
       /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "font-bold text-lg", children: i18n_default.t("true") }) }),
       /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "font-bold text-lg", children: i18n_default.t("false") }) })
     ] }),
-    checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: `flex flex-row w-full justify-center flex-wrap`, children: shuffleOptionList.map((shuffleOption, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: `flex flex-row w-full justify-center flex-wrap`, children: shuffleOptionList.map((shuffleOption, index) => {
       const correctAnswer = materialMap.trueList.find(
         (trueItem) => trueItem === shuffleOption
       ) !== void 0 ? "TRUE" : "FALSE";
@@ -7085,7 +7123,7 @@ var TrueFalseActivityMaterialContent = ({
         /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { children: item }) }),
         /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "underline", children: i18n_default.t("false") }) })
       ] }))
-    ] })
+    ] }) })
   ] });
 };
 var TrueFalseActivityMaterialContent_default = TrueFalseActivityMaterialContent;