catchup-library-web 1.11.3 → 1.11.5

package/dist/index.js

@@ -3623,6 +3623,7 @@ var InputGroup = ({
 }) => {
   const textAreaRef = (0, import_react10.useRef)(null);
   const mathFieldRef = (0, import_react10.useRef)(null);
+  const [isMathMode, setIsMathMode] = (0, import_react10.useState)(false);
   (0, import_react10.useEffect)(() => {
     if (!textAreaRef) return;
     if (!textAreaRef.current) return;
@@ -3835,60 +3836,64 @@ var InputGroup = ({
     ] });
   };
   const TextInputGroup = () => {
-    if (useMath) {
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "my-1 relative", children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          "div",
-          {
-            className: `w-full border ${errorText ? "border-catchup-red shadow-error" : "border-catchup-gray-100"} rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input ${disabled ? "bg-catchup-lighter-gray" : "bg-white"}`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              "math-field",
-              {
-                ref: mathFieldRef,
-                value: value || "",
-                onInput: handleMathFieldChange,
-                onFocus: handleMathFieldFocus,
-                placeholder: errorText ? errorText : placeholder,
-                disabled,
-                "virtual-keyboard-mode": "onfocus",
-                "smart-fence": true,
-                "smart-mode": true,
-                "smart-superscript": true,
-                style: {
-                  fontSize: "16px",
-                  padding: "8px 16px",
-                  border: "none",
-                  outline: "none",
-                  width: "100%",
-                  minHeight: "44px",
-                  backgroundColor: disabled ? "#f5f5f5" : "transparent",
-                  borderRadius: "16px",
-                  fontFamily: "inherit",
-                  color: disabled ? "#9ca3af" : "#000000"
-                }
-              }
-            )
-          }
-        )
-      ] });
-    }
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "my-1 relative", children: [
       title ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        "input",
+        "div",
         {
-          disabled,
-          className: `w-full py-2 px-4 border ${errorText ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80" : "border-catchup-gray-100"} rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 ${disabled ? "bg-catchup-lighter-gray" : ""} focus:shadow-input`,
-          type,
-          defaultValue,
-          placeholder: errorText ? errorText : placeholder,
-          value,
-          onChange,
-          onFocus,
-          onKeyDown
+          className: `w-full border ${errorText ? "border-catchup-red shadow-error" : "border-catchup-gray-100"} rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input ${disabled ? "bg-catchup-lighter-gray" : "bg-white"}`,
+          children: useMath && isMathMode ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "math-field",
+            {
+              ref: mathFieldRef,
+              value: value || "",
+              onInput: handleMathFieldChange,
+              onFocus: handleMathFieldFocus,
+              placeholder: errorText ? errorText : placeholder,
+              disabled,
+              "virtual-keyboard-mode": "off",
+              "smart-fence": true,
+              "smart-mode": true,
+              "smart-superscript": true,
+              style: {
+                fontSize: "16px",
+                padding: "8px 16px",
+                border: "none",
+                outline: "none",
+                width: "100%",
+                minHeight: "44px",
+                backgroundColor: "transparent",
+                borderRadius: "16px",
+                fontFamily: "inherit",
+                color: disabled ? "#9ca3af" : "#000000"
+              }
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "input",
+            {
+              disabled,
+              className: `w-full py-2 px-4 border-none rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 ${disabled ? "bg-catchup-lighter-gray" : ""} ${errorText ? "placeholder:text-catchup-red placeholder:opacity-80" : ""}`,
+              type,
+              defaultValue,
+              placeholder: errorText ? errorText : placeholder,
+              value,
+              onChange,
+              onFocus,
+              onKeyDown
+            }
+          )
         }
-      )
+      ),
+      useMath && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "absolute right-5 -top-2 z-10 bg-catchup-white border border-catchup-gray-100 rounded-md px-2", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "div",
+        {
+          className: "flex flex-row items-center gap-x-2 cursor-pointer text-md transition-all duration-300 text-catchup-gray-300",
+          onClick: () => {
+            setIsMathMode(!isMathMode);
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex flex-row items-center gap-x-1", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "font-bold", children: isMathMode ? i18n_default.t("text_mode") : i18n_default.t("math_mode") }) })
+        }
+      ) })
     ] });
   };
   const RenderMainContent = () => {

package/dist/index.mjs

@@ -3399,7 +3399,7 @@ import { InlineMath as InlineMath2 } from "react-katex";
 
 // src/components/groups/InputGroup.tsx
 import Select from "react-select";
-import { useEffect as useEffect2, useRef } from "react";
+import { useEffect as useEffect2, useRef, useState as useState10 } from "react";
 import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 var InputGroup = ({
   type,
@@ -3423,6 +3423,7 @@ var InputGroup = ({
 }) => {
   const textAreaRef = useRef(null);
   const mathFieldRef = useRef(null);
+  const [isMathMode, setIsMathMode] = useState10(false);
   useEffect2(() => {
     if (!textAreaRef) return;
     if (!textAreaRef.current) return;
@@ -3635,60 +3636,64 @@ var InputGroup = ({
     ] });
   };
   const TextInputGroup = () => {
-    if (useMath) {
-      return /* @__PURE__ */ jsxs9("div", { className: "my-1 relative", children: [
-        title ? /* @__PURE__ */ jsx16("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
-        /* @__PURE__ */ jsx16(
-          "div",
-          {
-            className: `w-full border ${errorText ? "border-catchup-red shadow-error" : "border-catchup-gray-100"} rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input ${disabled ? "bg-catchup-lighter-gray" : "bg-white"}`,
-            children: /* @__PURE__ */ jsx16(
-              "math-field",
-              {
-                ref: mathFieldRef,
-                value: value || "",
-                onInput: handleMathFieldChange,
-                onFocus: handleMathFieldFocus,
-                placeholder: errorText ? errorText : placeholder,
-                disabled,
-                "virtual-keyboard-mode": "onfocus",
-                "smart-fence": true,
-                "smart-mode": true,
-                "smart-superscript": true,
-                style: {
-                  fontSize: "16px",
-                  padding: "8px 16px",
-                  border: "none",
-                  outline: "none",
-                  width: "100%",
-                  minHeight: "44px",
-                  backgroundColor: disabled ? "#f5f5f5" : "transparent",
-                  borderRadius: "16px",
-                  fontFamily: "inherit",
-                  color: disabled ? "#9ca3af" : "#000000"
-                }
-              }
-            )
-          }
-        )
-      ] });
-    }
     return /* @__PURE__ */ jsxs9("div", { className: "my-1 relative", children: [
       title ? /* @__PURE__ */ jsx16("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
       /* @__PURE__ */ jsx16(
-        "input",
+        "div",
         {
-          disabled,
-          className: `w-full py-2 px-4 border ${errorText ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80" : "border-catchup-gray-100"} rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 ${disabled ? "bg-catchup-lighter-gray" : ""} focus:shadow-input`,
-          type,
-          defaultValue,
-          placeholder: errorText ? errorText : placeholder,
-          value,
-          onChange,
-          onFocus,
-          onKeyDown
+          className: `w-full border ${errorText ? "border-catchup-red shadow-error" : "border-catchup-gray-100"} rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input ${disabled ? "bg-catchup-lighter-gray" : "bg-white"}`,
+          children: useMath && isMathMode ? /* @__PURE__ */ jsx16(
+            "math-field",
+            {
+              ref: mathFieldRef,
+              value: value || "",
+              onInput: handleMathFieldChange,
+              onFocus: handleMathFieldFocus,
+              placeholder: errorText ? errorText : placeholder,
+              disabled,
+              "virtual-keyboard-mode": "off",
+              "smart-fence": true,
+              "smart-mode": true,
+              "smart-superscript": true,
+              style: {
+                fontSize: "16px",
+                padding: "8px 16px",
+                border: "none",
+                outline: "none",
+                width: "100%",
+                minHeight: "44px",
+                backgroundColor: "transparent",
+                borderRadius: "16px",
+                fontFamily: "inherit",
+                color: disabled ? "#9ca3af" : "#000000"
+              }
+            }
+          ) : /* @__PURE__ */ jsx16(
+            "input",
+            {
+              disabled,
+              className: `w-full py-2 px-4 border-none rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 ${disabled ? "bg-catchup-lighter-gray" : ""} ${errorText ? "placeholder:text-catchup-red placeholder:opacity-80" : ""}`,
+              type,
+              defaultValue,
+              placeholder: errorText ? errorText : placeholder,
+              value,
+              onChange,
+              onFocus,
+              onKeyDown
+            }
+          )
         }
-      )
+      ),
+      useMath && /* @__PURE__ */ jsx16("div", { className: "absolute right-5 -top-2 z-10 bg-catchup-white border border-catchup-gray-100 rounded-md px-2", children: /* @__PURE__ */ jsx16(
+        "div",
+        {
+          className: "flex flex-row items-center gap-x-2 cursor-pointer text-md transition-all duration-300 text-catchup-gray-300",
+          onClick: () => {
+            setIsMathMode(!isMathMode);
+          },
+          children: /* @__PURE__ */ jsx16("div", { className: "flex flex-row items-center gap-x-1", children: /* @__PURE__ */ jsx16("p", { className: "font-bold", children: isMathMode ? i18n_default.t("text_mode") : i18n_default.t("math_mode") }) })
+        }
+      ) })
     ] });
   };
   const RenderMainContent = () => {
@@ -3714,7 +3719,7 @@ var InputGroup_default = InputGroup;
 
 // src/components/activities/material-content/DropdownActivityMaterialContent.tsx
 import { useEffect as useEffect4 } from "react";
-import { useState as useState12 } from "react";
+import { useState as useState13 } from "react";
 
 // src/utilization/AppUtilization.ts
 var colors = [
@@ -3814,10 +3819,10 @@ var getColorByIndex = (index) => {
 };
 
 // src/components/dropdowns/MediaDropdown.tsx
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 var MediaDropdown = ({ id, answer, optionList }) => {
-  const [showDropdown, setShowDropdown] = useState10(false);
+  const [showDropdown, setShowDropdown] = useState11(false);
   return /* @__PURE__ */ jsxs10(
     "div",
     {
@@ -3862,7 +3867,7 @@ var MediaDropdown = ({ id, answer, optionList }) => {
 var MediaDropdown_default = MediaDropdown;
 
 // src/components/activities/material-content/ShowMaterialMediaByContentType.tsx
-import { useEffect as useEffect3, useRef as useRef2, useState as useState11 } from "react";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState12 } from "react";
 import Modal3 from "react-modal";
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 var ShowMaterialMediaByContentType = ({
@@ -3871,10 +3876,10 @@ var ShowMaterialMediaByContentType = ({
   src,
   canFullScreen
 }) => {
-  const [showFullScreen, setShowFullScreen] = useState11(false);
-  const [selectedFullScreenItem, setSelectedFullScreenItem] = useState11(null);
-  const [isLoaded, setIsLoaded] = useState11(false);
-  const [isFullHeight, setIsFullHeight] = useState11(false);
+  const [showFullScreen, setShowFullScreen] = useState12(false);
+  const [selectedFullScreenItem, setSelectedFullScreenItem] = useState12(null);
+  const [isLoaded, setIsLoaded] = useState12(false);
+  const [isFullHeight, setIsFullHeight] = useState12(false);
   const imageRef = useRef2(null);
   useEffect3(() => {
     setIsLoaded(false);
@@ -4029,7 +4034,7 @@ var DropdownActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [updated, setUpdated] = useState12(false);
+  const [updated, setUpdated] = useState13(false);
   useEffect4(() => {
     if (!showCorrectAnswer) return;
     const foundAnswer = answer.data.find(
@@ -4173,7 +4178,7 @@ var DropdownActivityMaterialContent = ({
 var DropdownActivityMaterialContent_default = DropdownActivityMaterialContent;
 
 // src/components/activities/DropdownActivityContent.tsx
-import { useState as useState13, useEffect as useEffect5 } from "react";
+import { useState as useState14, useEffect as useEffect5 } from "react";
 import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var DropdownActivityContent = ({
   answer,
@@ -4187,7 +4192,7 @@ var DropdownActivityContent = ({
   const contentMap = parseContentMapFromData(data);
   const dropdownBodyMap = parseBodyMapFromData(data, "DROPDOWN");
   const dropdownMaterialMap = parseMaterialMapFromData(data, "DROPDOWN");
-  const [currentAnswerMap, setCurrentAnswerMap] = useState13(() => {
+  const [currentAnswerMap, setCurrentAnswerMap] = useState14(() => {
     return retrieveCurrentAnswerMap();
   });
   function retrieveCurrentAnswerMap() {
@@ -4247,7 +4252,7 @@ var DropdownActivityContent_default = DropdownActivityContent;
 
 // src/components/activities/material-content/FillInTheBlanksActivityMaterialContent.tsx
 import { InlineMath as InlineMath3 } from "react-katex";
-import { useState as useState14 } from "react";
+import { useState as useState15 } from "react";
 import { useEffect as useEffect6 } from "react";
 import { useDrop as useDrop2 } from "react-dnd";
 
@@ -4334,9 +4339,9 @@ var FillInTheBlanksActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [shuffleOptionList, setShuffleOptionList] = useState14([]);
-  const [selectedOption, setSelectedOption] = useState14(null);
-  const [pasteOptionIndex, setPasteOptionIndex] = useState14(null);
+  const [shuffleOptionList, setShuffleOptionList] = useState15([]);
+  const [selectedOption, setSelectedOption] = useState15(null);
+  const [pasteOptionIndex, setPasteOptionIndex] = useState15(null);
   const [{ isOver, canDrop }, drop] = useDrop2({
     accept: "FILL_IN_THE_BLANKS",
     drop: () => {
@@ -4527,7 +4532,7 @@ var FillInTheBlanksActivityMaterialContent = ({
 var FillInTheBlanksActivityMaterialContent_default = FillInTheBlanksActivityMaterialContent;
 
 // src/components/activities/FillInTheBlanksActivityContent.tsx
-import { useState as useState15, useEffect as useEffect7 } from "react";
+import { useState as useState16, useEffect as useEffect7 } from "react";
 import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 var FillInTheBlanksActivityContent = ({
   answer,
@@ -4548,7 +4553,7 @@ var FillInTheBlanksActivityContent = ({
     "FILL_IN_THE_BLANKS"
   );
   const fillInTheBlanksIncorrectList = data.fillInTheBlanksIncorrectList ? JSON.parse(data.fillInTheBlanksIncorrectList) : [];
-  const [currentAnswerMap, setCurrentAnswerMap] = useState15(() => {
+  const [currentAnswerMap, setCurrentAnswerMap] = useState16(() => {
     return retrieveCurrentAnswerMap();
   });
   function retrieveCurrentAnswerMap() {
@@ -4626,18 +4631,18 @@ var FillInTheBlanksActivityContent = ({
 var FillInTheBlanksActivityContent_default = FillInTheBlanksActivityContent;
 
 // src/components/activities/material-content/GroupingActivityMaterialContent.tsx
-import { useEffect as useEffect9, useRef as useRef4, useState as useState17 } from "react";
+import { useEffect as useEffect9, useRef as useRef4, useState as useState18 } from "react";
 import { useDrop as useDrop3 } from "react-dnd";
 import { InlineMath as InlineMath4 } from "react-katex";
 
 // src/hooks/useScreenSize.ts
-import { useState as useState16, useEffect as useEffect8 } from "react";
+import { useState as useState17, useEffect as useEffect8 } from "react";
 var useScreenSize = () => {
-  const [containerSize, setContainerSize] = useState16({
+  const [containerSize, setContainerSize] = useState17({
     width: 0,
     height: 0
   });
-  const [screenSize, setScreenSize] = useState16({
+  const [screenSize, setScreenSize] = useState17({
     width: window.innerWidth,
     height: window.innerHeight
   });
@@ -4677,10 +4682,10 @@ var GroupingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedValue, setSelectedValue] = useState17(null);
-  const [selectedTargetKey, setSelectedTargetKey] = useState17(null);
-  const [isShuffled, setIsShuffled] = useState17(false);
-  const [shuffledMaterialList, setShuffledMaterialList] = useState17([]);
+  const [selectedValue, setSelectedValue] = useState18(null);
+  const [selectedTargetKey, setSelectedTargetKey] = useState18(null);
+  const [isShuffled, setIsShuffled] = useState18(false);
+  const [shuffledMaterialList, setShuffledMaterialList] = useState18([]);
   const { screenSize, containerSize } = useScreenSize_default();
   const [{ isOver, canDrop }, drop] = useDrop3({
     accept: "GROUPING",
@@ -4693,7 +4698,7 @@ var GroupingActivityMaterialContent = ({
   });
   const ref = useRef4(null);
   const itemsRef = useRef4(null);
-  const [maxWidth, setMaxWidth] = useState17(0);
+  const [maxWidth, setMaxWidth] = useState18(0);
   useEffect9(() => {
     if (!ref) return;
     if (!ref.current) return;
@@ -4995,7 +5000,7 @@ var GroupingActivityContent = ({
 var GroupingActivityContent_default = GroupingActivityContent;
 
 // src/components/activities/material-content/MatchingActivityMaterialContent.tsx
-import { useEffect as useEffect10, useRef as useRef5, useState as useState18 } from "react";
+import { useEffect as useEffect10, useRef as useRef5, useState as useState19 } from "react";
 import { useDrop as useDrop4 } from "react-dnd";
 import { InlineMath as InlineMath5 } from "react-katex";
 import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -5009,10 +5014,10 @@ var MatchingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedValue, setSelectedValue] = useState18(null);
-  const [selectedTargetKey, setSelectedTargetKey] = useState18(null);
-  const [isShuffled, setIsShuffled] = useState18(false);
-  const [shuffledMaterialList, setShuffledMaterialList] = useState18([]);
+  const [selectedValue, setSelectedValue] = useState19(null);
+  const [selectedTargetKey, setSelectedTargetKey] = useState19(null);
+  const [isShuffled, setIsShuffled] = useState19(false);
+  const [shuffledMaterialList, setShuffledMaterialList] = useState19([]);
   const [{ isOver, canDrop }, drop] = useDrop4({
     accept: "MATCHING",
     drop: () => {
@@ -5698,7 +5703,7 @@ var OpenEndedActivityContent = ({
 var OpenEndedActivityContent_default = OpenEndedActivityContent;
 
 // src/components/activities/material-content/OrderingActivityMaterialContent.tsx
-import { useEffect as useEffect11, useState as useState19 } from "react";
+import { useEffect as useEffect11, useState as useState20 } from "react";
 import { useDrop as useDrop6 } from "react-dnd";
 import { InlineMath as InlineMath8 } from "react-katex";
 
@@ -5767,10 +5772,10 @@ var OrderingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedTargetKey, setSelectedTargetKey] = useState19(null);
-  const [selectedKey, setSelectedKey] = useState19(null);
+  const [selectedTargetKey, setSelectedTargetKey] = useState20(null);
+  const [selectedKey, setSelectedKey] = useState20(null);
   const { screenSize } = useScreenSize_default();
-  const [view, setView] = useState19("PC");
+  const [view, setView] = useState20("PC");
   const [{ isOver, canDrop }, drop] = useDrop6({
     accept: "ORDERING",
     drop: () => {
@@ -5965,7 +5970,7 @@ var OrderingActivityContent = ({
 var OrderingActivityContent_default = OrderingActivityContent;
 
 // src/components/activities/material-content/TrueFalseActivityMaterialContent.tsx
-import { useEffect as useEffect12, useState as useState20 } from "react";
+import { useEffect as useEffect12, useState as useState21 } from "react";
 import { InlineMath as InlineMath9 } from "react-katex";
 import { Fragment as Fragment8, jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 var TrueFalseActivityMaterialContent = ({
@@ -5979,7 +5984,7 @@ var TrueFalseActivityMaterialContent = ({
   showCorrectAnswer
 }) => {
   const { screenSize } = useScreenSize_default();
-  const [shuffleOptionList, setShuffleOptionList] = useState20([]);
+  const [shuffleOptionList, setShuffleOptionList] = useState21([]);
   useEffect12(() => {
     const optionList = [];
     optionList.push(...materialMap.trueList);
@@ -6298,7 +6303,7 @@ var ActivityEvaluationRubricContent = ({
 var ActivityEvaluationRubricContent_default = ActivityEvaluationRubricContent;
 
 // src/components/activities/ActivityPreviewByData.tsx
-import { useEffect as useEffect13, useState as useState21 } from "react";
+import { useEffect as useEffect13, useState as useState22 } from "react";
 
 // src/components/boxes/SelectionBox.tsx
 import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
@@ -6350,9 +6355,9 @@ var ActivityPreviewByData = ({
   showTaxonomy,
   isFullScreen
 }) => {
-  const [key, setKey] = useState21((/* @__PURE__ */ new Date()).getTime());
-  const [selectedType, setSelectedType] = useState21(null);
-  const [optionList, setOptionList] = useState21([]);
+  const [key, setKey] = useState22((/* @__PURE__ */ new Date()).getTime());
+  const [selectedType, setSelectedType] = useState22(null);
+  const [optionList, setOptionList] = useState22([]);
   useEffect13(() => {
     if (!data) return;
     setKey((/* @__PURE__ */ new Date()).getTime());
@@ -6577,7 +6582,7 @@ var ActivityPreviewByData = ({
 var ActivityPreviewByData_default = ActivityPreviewByData;
 
 // src/components/activities/ActivityPreviewByAnswerData.tsx
-import { useEffect as useEffect14, useState as useState22 } from "react";
+import { useEffect as useEffect14, useState as useState23 } from "react";
 import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
 var ActivityPreviewByAnswerData = ({
   data,
@@ -6592,10 +6597,10 @@ var ActivityPreviewByAnswerData = ({
   showCorrectAnswer = false
 }) => {
   var _a;
-  const [key, setKey] = useState22((/* @__PURE__ */ new Date()).getTime());
-  const [selectedType, setSelectedType] = useState22(null);
-  const [optionList, setOptionList] = useState22([]);
-  const [answer, setAnswer] = useState22({ data: [] });
+  const [key, setKey] = useState23((/* @__PURE__ */ new Date()).getTime());
+  const [selectedType, setSelectedType] = useState23(null);
+  const [optionList, setOptionList] = useState23([]);
+  const [answer, setAnswer] = useState23({ data: [] });
   useEffect14(() => {
     if (!data) return;
     setKey((/* @__PURE__ */ new Date()).getTime());

package/package.json

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

package/src/components/groups/InputGroup.tsx

@@ -1,6 +1,6 @@
 import Select from "react-select";
 import i18n from "../../language/i18n";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { IInputGroupProps } from "../../properties/GroupProperties";
 import BaseImage from "../images/BaseImage";
 import { IOptionProps } from "../../properties/CommonProperties";
@@ -64,6 +64,8 @@ const InputGroup = ({
 }: IInputGroupProps) => {
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
   const mathFieldRef = useRef<MathfieldElement>(null);
+  const [isMathMode, setIsMathMode] = useState<boolean>(false);
+  const [showMathOverlay, setShowMathOverlay] = useState<boolean>(false);
 
   useEffect(() => {
     if (!textAreaRef) return;
@@ -84,6 +86,24 @@ const InputGroup = ({
     });
   }, [useMath, type, placeholder, title]);
 
+  // Close overlay when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        showMathOverlay &&
+        event.target instanceof Element &&
+        !event.target.closest(".math-overlay")
+      ) {
+        setShowMathOverlay(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showMathOverlay]);
+
   const retrieveNullableOptionList = () => {
     if (!optionList) return [];
     const currentOptionList = {
@@ -132,6 +152,83 @@ const InputGroup = ({
     onFocus && onFocus(syntheticEvent);
   };
 
+  const handleMathModeToggle = (mode: boolean) => {
+    setIsMathMode(mode);
+    setShowMathOverlay(false);
+  };
+
+  const MathModeOverlay = () => {
+    if (!showMathOverlay) return null;
+
+    return (
+      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div className="math-overlay bg-white rounded-lg p-6 shadow-xl max-w-sm w-full mx-4">
+          <h3 className="text-lg font-semibold mb-4 text-catchup-gray-400">
+            {i18n.t("select_input_mode")}
+          </h3>
+          <div className="space-y-3">
+            <button
+              className={`w-full p-3 rounded-lg border-2 transition-all duration-200 ${
+                !isMathMode
+                  ? "border-catchup-blue-400 bg-catchup-blue-50"
+                  : "border-catchup-gray-100 hover:border-catchup-gray-200"
+              }`}
+              onClick={() => handleMathModeToggle(false)}
+            >
+              <div className="flex items-center space-x-3">
+                <div className="w-4 h-4 rounded-full border-2 border-catchup-blue-400 flex items-center justify-center">
+                  {!isMathMode && (
+                    <div className="w-2 h-2 rounded-full bg-catchup-blue-400"></div>
+                  )}
+                </div>
+                <div className="text-left">
+                  <p className="font-medium text-catchup-gray-400">
+                    {i18n.t("text_mode")}
+                  </p>
+                  <p className="text-sm text-catchup-gray-300">
+                    Regular text input
+                  </p>
+                </div>
+              </div>
+            </button>
+            <button
+              className={`w-full p-3 rounded-lg border-2 transition-all duration-200 ${
+                isMathMode
+                  ? "border-catchup-blue-400 bg-catchup-blue-50"
+                  : "border-catchup-gray-100 hover:border-catchup-gray-200"
+              }`}
+              onClick={() => handleMathModeToggle(true)}
+            >
+              <div className="flex items-center space-x-3">
+                <div className="w-4 h-4 rounded-full border-2 border-catchup-blue-400 flex items-center justify-center">
+                  {isMathMode && (
+                    <div className="w-2 h-2 rounded-full bg-catchup-blue-400"></div>
+                  )}
+                </div>
+                <div className="text-left">
+                  <p className="font-medium text-catchup-gray-400">
+                    {i18n.t("math_mode")}
+                  </p>
+                  <p className="text-sm text-catchup-gray-300">
+                    Mathematical expressions
+                  </p>
+                </div>
+              </div>
+            </button>
+          </div>
+          <div className="mt-6 flex justify-end">
+            <button
+              className="px-4 py-2 text-catchup-gray-300 hover:text-catchup-gray-400 transition-colors"
+              onClick={() => setShowMathOverlay(false)}
+            >
+              {i18n.t("cancel")}
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   const CheckboxInputGroup = () => {
     return (
       <div
@@ -324,35 +421,29 @@ const InputGroup = ({
           onFocus={onFocus}
           onKeyDown={onKeyDown}
         />
-        {/* <div
-          className={`${
-            title ? "absolute top-0 right-0" : "absolute top-3 left-5"
-          }`}
-        >
-          <p className="italic text-catchup-red opacity-70">{errorText}</p>
-        </div> */}
       </div>
     );
   };
 
   const TextInputGroup = () => {
-    if (useMath) {
-      return (
-        <div className="my-1 relative">
-          {title ? (
-            <p className="text-md font-semibold pl-2 py-1 text-catchup-gray-400">
-              {title}
-            </p>
-          ) : null}
-          <div
-            className={`w-full border ${
-              errorText
-                ? "border-catchup-red shadow-error"
-                : "border-catchup-gray-100"
-            } rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input ${
-              disabled ? "bg-catchup-lighter-gray" : "bg-white"
-            }`}
-          >
+    return (
+      <div className="my-1 relative">
+        {title ? (
+          <p className="text-md font-semibold pl-2 py-1 text-catchup-gray-400">
+            {title}
+          </p>
+        ) : null}
+
+        <div
+          className={`w-full border ${
+            errorText
+              ? "border-catchup-red shadow-error"
+              : "border-catchup-gray-100"
+          } rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input ${
+            disabled ? "bg-catchup-lighter-gray" : "bg-white"
+          }`}
+        >
+          {useMath && isMathMode ? (
             <math-field
               ref={mathFieldRef}
               value={value || ""}
@@ -360,7 +451,7 @@ const InputGroup = ({
               onFocus={handleMathFieldFocus}
               placeholder={errorText ? errorText : placeholder}
               disabled={disabled}
-              virtual-keyboard-mode="onfocus"
+              virtual-keyboard-mode="off"
               smart-fence={true}
               smart-mode={true}
               smart-superscript={true}
@@ -371,49 +462,59 @@ const InputGroup = ({
                 outline: "none",
                 width: "100%",
                 minHeight: "44px",
-                backgroundColor: disabled ? "#f5f5f5" : "transparent",
+                backgroundColor: "transparent",
                 borderRadius: "16px",
                 fontFamily: "inherit",
                 color: disabled ? "#9ca3af" : "#000000",
               }}
             />
-          </div>
+          ) : (
+            <input
+              disabled={disabled}
+              className={`w-full py-2 px-4 border-none rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 ${
+                disabled ? "bg-catchup-lighter-gray" : ""
+              } ${
+                errorText
+                  ? "placeholder:text-catchup-red placeholder:opacity-80"
+                  : ""
+              }`}
+              type={type}
+              defaultValue={defaultValue}
+              placeholder={errorText ? errorText : placeholder}
+              value={value}
+              onChange={onChange}
+              onFocus={onFocus}
+              onKeyDown={onKeyDown}
+            />
+          )}
         </div>
-      );
-    }
 
-    return (
-      <div className="my-1 relative">
-        {title ? (
-          <p className="text-md font-semibold pl-2 py-1 text-catchup-gray-400">
-            {title}
-          </p>
-        ) : null}
-        <input
-          disabled={disabled}
-          className={`w-full py-2 px-4 border ${
-            errorText
-              ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80"
-              : "border-catchup-gray-100"
-          } rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 ${
-            disabled ? "bg-catchup-lighter-gray" : ""
-          } focus:shadow-input`}
-          type={type}
-          defaultValue={defaultValue}
-          placeholder={errorText ? errorText : placeholder}
-          value={value}
-          onChange={onChange}
-          onFocus={onFocus}
-          onKeyDown={onKeyDown}
-        />
-
-        {/* <div
-          className={`${
-            title ? "absolute top-0 right-0" : "absolute top-3 left-5"
-          }`}
-        >
-          <p className="italic text-catchup-red opacity-70">{errorText}</p>
-        </div> */}
+        {useMath && (
+          <button
+            className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-white border border-catchup-gray-100 rounded-md px-3 py-1 shadow-sm hover:shadow-md transition-shadow duration-200"
+            onClick={() => setShowMathOverlay(true)}
+            type="button"
+          >
+            <div className="flex items-center gap-x-1">
+              <span className="text-sm font-medium text-catchup-gray-400">
+                {isMathMode ? "𝑓(x)" : "Aa"}
+              </span>
+              <svg
+                className="w-3 h-3 text-catchup-gray-300"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M19 9l-7 7-7-7"
+                />
+              </svg>
+            </div>
+          </button>
+        )}
       </div>
     );
   };
@@ -436,7 +537,12 @@ const InputGroup = ({
     }
   };
 
-  return RenderMainContent();
+  return (
+    <>
+      {RenderMainContent()}
+      <MathModeOverlay />
+    </>
+  );
 };
 
 export default InputGroup;