touchstudy-core 0.1.187 → 0.1.189

package/dist/index.js

@@ -16,6 +16,13 @@ var moment = _interopDefault(require('moment'));
 var fa = require('react-icons/fa');
 var io = require('react-icons/io');
 var io5 = require('react-icons/io5');
+var _$a = _interopDefault(require('lodash'));
+var reactRedux = require('react-redux');
+var axios = _interopDefault(require('axios'));
+var reactGoogleLogin = require('@leecheuk/react-google-login');
+require('moment/locale/ko.js');
+require('moment/locale/en-au.js');
+var reactVirtualized = require('react-virtualized');
 var MButton = _interopDefault(require('@mui/material/Button'));
 var DialogTitle = _interopDefault(require('@mui/material/DialogTitle'));
 var DialogContent = _interopDefault(require('@mui/material/DialogContent'));
@@ -26,13 +33,6 @@ var formik = require('formik');
 var Select = require('react-select');
 var Select__default = _interopDefault(Select);
 var CreatableSelect = _interopDefault(require('react-select/creatable'));
-var _$a = _interopDefault(require('lodash'));
-var reactRedux = require('react-redux');
-var axios = _interopDefault(require('axios'));
-var reactGoogleLogin = require('@leecheuk/react-google-login');
-require('moment/locale/ko.js');
-require('moment/locale/en-au.js');
-var reactVirtualized = require('react-virtualized');
 var tinymce = _interopDefault(require('tinymce'));
 require('@wiris/mathtype-tinymce6');
 var tinymceReact = require('@tinymce/tinymce-react');
@@ -5910,402 +5910,6 @@ var ConfirmDeleteDialogDefaultProps = {
   isDelete: true
 };
 
-var ConfirmDialog = function ConfirmDialog(_ref) {
-  var open = _ref.open,
-    text = _ref.text,
-    cancelText = _ref.cancelText,
-    okText = _ref.okText,
-    isDelete = _ref.isDelete,
-    title = _ref.title,
-    confirmText = _ref.confirmText,
-    titleStyle = _ref.titleStyle,
-    titleClassName = _ref.titleClassName,
-    contentStyle = _ref.contentStyle,
-    cancelButtonStyle = _ref.cancelButtonStyle,
-    contentTextStyle = _ref.contentTextStyle,
-    okButtonStyle = _ref.okButtonStyle,
-    actionStyle = _ref.actionStyle,
-    _ref$okButtonVariant = _ref.okButtonVariant,
-    okButtonVariant = _ref$okButtonVariant === void 0 ? "contained" : _ref$okButtonVariant,
-    _ref$cancelButtonVari = _ref.cancelButtonVariant,
-    cancelButtonVariant = _ref$cancelButtonVari === void 0 ? "contained" : _ref$cancelButtonVari,
-    _ref$zIndex = _ref.zIndex,
-    zIndex = _ref$zIndex === void 0 ? 1102 : _ref$zIndex,
-    toggle = _ref.toggle,
-    onConfirm = _ref.onConfirm;
-  var _useState = React.useState(),
-    confirmTextValue = _useState[0],
-    setConfirmTextValue = _useState[1];
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var handleConfirm = function handleConfirm() {
-    onConfirm();
-  };
-  var handleChangeConfirmText = function handleChangeConfirmText(e) {
-    setConfirmTextValue(e.target.value);
-  };
-  var handlePaste = function handlePaste(_) {};
-  React.useEffect(function () {
-    !open && setConfirmTextValue(undefined);
-  }, [open]);
-  var isValid = !!confirmText && !!confirmTextValue && confirmTextValue.trim() === confirmText.trim();
-  var isDisableDelete = !!confirmText && (confirmTextValue === null || confirmTextValue === void 0 ? void 0 : confirmTextValue.trim()) !== confirmText.trim();
-  return React__default.createElement(material.Dialog, {
-    open: open,
-    onClose: toggle,
-    sx: {
-      zIndex: zIndex
-    }
-  }, React__default.createElement(React.Fragment, null, React__default.createElement(material.DialogTitle, {
-    className: "border border-start-0 border-end-0 border-top-0 border-1 " + titleClassName,
-    sx: _extends({
-      fontSize: 16
-    }, titleStyle)
-  }, title || t('confirmation')), React__default.createElement(material.IconButton, {
-    "aria-label": "close",
-    onClick: toggle,
-    sx: {
-      position: "absolute",
-      right: 8,
-      top: 8,
-      color: function color(theme) {
-        return theme.palette.grey[500];
-      }
-    }
-  }, React__default.createElement(io5.IoClose, null))), React__default.createElement(material.DialogContent, {
-    sx: _extends({
-      pt: 0.5
-    }, contentStyle)
-  }, React__default.createElement(material.Typography, {
-    className: "mb-1",
-    sx: _extends({
-      fontWeight: 700
-    }, contentTextStyle)
-  }, text), !!confirmText && React__default.createElement("div", {
-    className: "w-100"
-  }, React__default.createElement("p", {
-    className: "mb-3"
-  }, t("enter_text_to_confirm_delete", {
-    text: confirmText
-  })), React__default.createElement(material.TextField, {
-    className: "w-100",
-    sx: {
-      "& input": {
-        py: 1
-      }
-    },
-    value: confirmTextValue,
-    onChange: handleChangeConfirmText,
-    placeholder: t('please_enter'),
-    onPaste: handlePaste,
-    error: !isValid && confirmTextValue !== undefined,
-    color: isValid ? "success" : confirmTextValue !== undefined ? "error" : undefined
-  }))), React__default.createElement(material.DialogActions, {
-    className: "border border-start-0 border-end-0 border-bottom-0 border-1 " + titleClassName,
-    sx: _extends({
-      paddingTop: 1
-    }, actionStyle)
-  }, React__default.createElement(material.Button, {
-    variant: cancelButtonVariant,
-    color: cancelButtonVariant !== "contained" ? "primary" : "secondary",
-    className: "px-3 " + (cancelButtonVariant !== "contained" ? "primary" : "bg-secondary"),
-    onClick: toggle,
-    sx: cancelButtonStyle
-  }, cancelText || t("no")), React__default.createElement(material.Button, {
-    variant: okButtonVariant,
-    color: isDelete ? "error" : "primary",
-    className: "px-3",
-    disabled: isDisableDelete,
-    onClick: handleConfirm,
-    sx: _extends({}, okButtonStyle, isDelete && {
-      backgroundColor: "#db4d4d",
-      color: "#FFFFFF",
-      "&:hover": {
-        backgroundColor: "#C41414"
-      }
-    })
-  }, okText || t('yes'))));
-};
-
-var ConfirmDeleteDialog = function ConfirmDeleteDialog(props) {
-  return React__default.createElement(ConfirmDialog, Object.assign({}, ConfirmDeleteDialogDefaultProps, props));
-};
-
-var iconCloseDialog = function iconCloseDialog(_ref) {
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "24" : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? "25" : _ref$height,
-    color = _ref.color;
-  return React__default.createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 24 25",
-    fill: color,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, React__default.createElement("path", {
-    d: "M13.5909 12.5L18.0441 8.04687C18.2554 7.8359 18.3743 7.54962 18.3745 7.25099C18.3748 6.95237 18.2564 6.66587 18.0455 6.45453C17.8345 6.24319 17.5482 6.12431 17.2496 6.12404C16.951 6.12378 16.6645 6.24215 16.4531 6.45312L12 10.9062L7.54687 6.45312C7.33553 6.24178 7.04888 6.12305 6.75 6.12305C6.45111 6.12305 6.16447 6.24178 5.95312 6.45312C5.74178 6.66447 5.62305 6.95111 5.62305 7.25C5.62305 7.54888 5.74178 7.83553 5.95312 8.04687L10.4062 12.5L5.95312 16.9531C5.74178 17.1645 5.62305 17.4511 5.62305 17.75C5.62305 18.0489 5.74178 18.3355 5.95312 18.5469C6.16447 18.7582 6.45111 18.8769 6.75 18.8769C7.04888 18.8769 7.33553 18.7582 7.54687 18.5469L12 14.0937L16.4531 18.5469C16.6645 18.7582 16.9511 18.8769 17.25 18.8769C17.5489 18.8769 17.8355 18.7582 18.0469 18.5469C18.2582 18.3355 18.3769 18.0489 18.3769 17.75C18.3769 17.4511 18.2582 17.1645 18.0469 16.9531L13.5909 12.5Z",
-    fill: "#202B37"
-  }));
-};
-
-var iconWarning = function iconWarning(_ref) {
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "17" : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? "16" : _ref$height,
-    color = _ref.color;
-  return React__default.createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 17 16",
-    fill: color,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, React__default.createElement("path", {
-    d: "M14.5335 12.4712L9.20754 2.58062C8.83004 1.87937 7.82441 1.87937 7.4466 2.58062L2.12097 12.4712C2.03901 12.6235 1.99792 12.7944 2.00171 12.9672C2.00549 13.1401 2.05404 13.309 2.14259 13.4575C2.23115 13.606 2.3567 13.729 2.50698 13.8145C2.65726 13.9 2.82714 13.9451 3.00004 13.9453H13.6529C13.8259 13.9453 13.996 13.9005 14.1465 13.8151C14.2969 13.7297 14.4227 13.6067 14.5115 13.4582C14.6002 13.3096 14.6489 13.1406 14.6527 12.9676C14.6566 12.7946 14.6155 12.6236 14.5335 12.4712ZM8.32722 12.4141C8.20361 12.4141 8.08277 12.3774 7.97999 12.3087C7.87721 12.2401 7.7971 12.1424 7.7498 12.0282C7.7025 11.914 7.69012 11.7884 7.71423 11.6671C7.73835 11.5459 7.79787 11.4345 7.88528 11.3471C7.97269 11.2597 8.08405 11.2002 8.20529 11.1761C8.32653 11.152 8.4522 11.1643 8.5664 11.2116C8.6806 11.2589 8.77822 11.3391 8.84689 11.4418C8.91557 11.5446 8.95222 11.6654 8.95222 11.7891C8.95222 11.8711 8.93606 11.9524 8.90465 12.0282C8.87324 12.1041 8.8272 12.173 8.76917 12.231C8.71113 12.289 8.64223 12.3351 8.5664 12.3665C8.49057 12.3979 8.4093 12.4141 8.32722 12.4141ZM9.00597 6.12813L8.8266 9.94063C8.8266 10.0732 8.77392 10.2004 8.68015 10.2942C8.58638 10.3879 8.45921 10.4406 8.3266 10.4406C8.19399 10.4406 8.06681 10.3879 7.97305 10.2942C7.87928 10.2004 7.8266 10.0732 7.8266 9.94063L7.64722 6.12969C7.64319 6.03862 7.65754 5.94768 7.6894 5.86227C7.72127 5.77687 7.77 5.69875 7.8327 5.63259C7.8954 5.56642 7.97078 5.51355 8.05434 5.47713C8.13791 5.44072 8.22795 5.4215 8.3191 5.42063H8.32566C8.41743 5.42058 8.50826 5.43912 8.59267 5.47515C8.67708 5.51117 8.75331 5.56392 8.81677 5.63021C8.88023 5.6965 8.92961 5.77497 8.96191 5.86087C8.99421 5.94676 9.00878 6.03832 9.00472 6.13L9.00597 6.12813Z",
-    fill: "#DB4D4D"
-  }));
-};
-
-var styles$1 = {"lighter":"#F0FFF6","light":"#89F0B2","less_dark":"#3DC674","dark":"#349056","darker":"#18442A","gray_50":"#FBFBF9","gray_100":"#EAEAE5","gray_300":"#D0D0C8","gray_500":"#9A9A98","gray_700":"#5D5D5B","gray_900":"#363634","red_900":"#DB4D4D","green_support_900":"#3ACB46","yellow_900":"#FEAF06","purple_900":"#C3099A","titleBox":"_2mYOt","title":"_1H9qR","point":"_2rTfh","buttonGroup":"_W5dic","btnFeedback":"_FmMYN","btnTerminate":"_3kv6J","myanswer":"_1jZV7","titleMyAnswer1":"_1aYD1","titleMyAnswer2":"_2Oc4x","contentMyAnswer":"__LRYW","myAnswerItem":"_1U-Kx","time":"_2PXiz","timeCol":"_1zcfJ","answer-response":"_18ZNf","answer-response-0":"_3nbRi","answer-response-1":"_3NEHk","answer-response-2":"_Et0ih","answer-response-3":"_5Vc3v","answer-response-4":"_2SMBR","overall-response-1":"_1ImE5","overall-response-2":"_1oVKC","overall-response-3":"_2wXCw","answerCorrect":"_gE8qM","answerIncorrect":"_3kRqE","answerNograss":"_22Pi3","answerEasy":"_1C7aw","answerDiscrimination":"__YGYX","answerTrap":"_3AkGb","answerNoTime":"_3l-yC","questionOrder":"_2mK7U","myTimeLabel":"_3ZOZs","myPoolTime":"_1Gajr","topTimeLabel":"_62PzE","topTime":"_3HUx1","meanTimeLabel":"_Yu8Oq","meanTime":"_18kZu","compareChart":"_2MTOH","prevChart":"_JoHQL","chart":"_29iCQ","nextChart":"_3hjxI","titleChart":"_2Z42z","titleCompareGrass":"_34RN_","tableCompareGrass":"_2lzlQ","thcolumn1":"_2MSIH","tdcolumn1":"_1I06v","tdcolumn3":"_VpMQ5","classification":"_3t41M","wrapperProblem":"_2vh8v","titleProblem":"_3YfGm","titleProblemClose":"_34388","titleTrickyProblem":"_INxbh","wrongQuestions":"_35DcB","question":"_10SAW","assignedQuestions":"_oEGQ_","wrapperContent":"_zhZ1O","content":"_NGHD4","contentColumn1":"_v5SKe","span1":"_28SHT","span2":"_1raLd","contentColumn2":"_-xJ34","duration":"_1YGAg","topDuration":"_3DiyY","overallCorrectRate":"_DnkyV","answer":"_29MTE","contentVulnerable":"_3x1PG","wrappContentProblem":"_2saM2","contentProblem":"_1hTJx","labelProblem":"_3BXO9","name":"_1cUZW","percent":"_3CLEc","slider":"_3LCEY","track":"_3I8mi","noData":"_1oZ-s","loading":"_Nm201","table-responsive":"_3zQL-","form-label":"_3Vpmh","form-control":"_DafKE","form-label-dialog":"_3NjaH","btn-cancel":"_sLxwL","btn-register":"_4ZKQY","pdfBtnBox":"_2zUJf","pdfBtn":"_y_Cr7","form-select":"_HCIxD","loader":"_3aDIU","dot":"_JGCIL","bounce":"_3M62i"};
-
-var DropdownIndicator = function DropdownIndicator(props) {
-  return React__default.createElement(Select.components.DropdownIndicator, Object.assign({}, props), React__default.createElement(fa.FaCaretDown, {
-    size: 20,
-    color: styles.darker
-  }));
-};
-var CustomOption = function CustomOption(props) {
-  return React__default.createElement(Select.components.Option, Object.assign({}, props), React__default.createElement("div", {
-    style: {
-      fontSize: "14px",
-      fontWeight: 500
-    }
-  }, props.data.label));
-};
-
-var customStyles = {
-  control: function control(baseStyles, state) {
-    return _extends({}, baseStyles, {
-      fontSize: "14px",
-      fontWeight: 700,
-      color: styles.darker,
-      borderColor: state.isFocused || state.hasValue ? styles.dark : styles.less_dark,
-      boxShadow: state.isFocused ? "0 0 0 1px " + styles.dark + "4D" : baseStyles.boxShadow,
-      "&:active": {
-        borderColor: state.isFocused || state.hasValue ? styles.dark : styles.less_dark
-      },
-      "&:hover": {
-        borderColor: state.isFocused || state.hasValue ? styles.dark : styles.less_dark
-      }
-    });
-  },
-  input: function input(baseStyles, _) {
-    return _extends({}, baseStyles, {
-      fontSize: "14px",
-      fontWeight: 700,
-      color: styles.darker
-    });
-  },
-  placeholder: function placeholder(baseStyles, _) {
-    return _extends({}, baseStyles, {
-      whiteSpace: "nowrap"
-    });
-  },
-  singleValue: function singleValue(baseStyles) {
-    return _extends({}, baseStyles, {
-      fontSize: "14px",
-      fontWeight: 700,
-      color: styles.darker
-    });
-  },
-  option: function option(baseStyles, state) {
-    return _extends({}, baseStyles, {
-      zIndex: 999,
-      backgroundColor: state.isSelected ? styles.dark : state.isFocused ? styles.light : 'white',
-      "&:active": {
-        backgroundColor: state.isSelected ? styles.dark : state.isFocused ? styles.less_dark : baseStyles.backgroundColor
-      }
-    });
-  },
-  menuPortal: function menuPortal(base) {
-    return _extends({}, base, {
-      zIndex: 99
-    });
-  }
-};
-
-var _excluded = ["isDefault", "defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti"];
-var CustomAsyncSelect = function CustomAsyncSelect(_ref) {
-  var _value$;
-  var isDefault = _ref.isDefault,
-    options = _ref.options,
-    isDisabled = _ref.isDisabled,
-    scrollBottom = _ref.scrollBottom,
-    value = _ref.value,
-    isMulti = _ref.isMulti,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var isOptionValue = (value === null || value === void 0 ? void 0 : value.value) || (value === null || value === void 0 ? void 0 : (_value$ = value[0]) === null || _value$ === void 0 ? void 0 : _value$.value);
-  var initialValues = isOptionValue ? value : Array.isArray(value) ? options.filter(function (i) {
-    return value.includes(i.value);
-  }) : isMulti ? options.filter(function (i) {
-    return i.value == value;
-  }) : options.find(function (i) {
-    return i.value == value;
-  });
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  return React__default.createElement(Select__default, Object.assign({
-    isDisabled: isDisabled,
-    options: options,
-    value: !isDefault ? initialValues : undefined,
-    defaultValue: isDefault ? initialValues : undefined,
-    menuPlacement: scrollBottom ? "top" : "auto",
-    isMulti: isMulti,
-    components: {
-      IndicatorSeparator: function IndicatorSeparator() {
-        return null;
-      },
-      DropdownIndicator: DropdownIndicator,
-      Option: CustomOption
-    },
-    styles: customStyles,
-    placeholder: t("select_placeholder")
-  }, rest));
-};
-
-var _excluded$1 = ["defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti"];
-var CustomCreatable = function CustomCreatable(_ref) {
-  var options = _ref.options,
-    isDisabled = _ref.isDisabled,
-    scrollBottom = _ref.scrollBottom,
-    value = _ref.value,
-    isMulti = _ref.isMulti,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  var initialValues = Array.isArray(value) ? options.filter(function (i) {
-    return value.includes(i.value);
-  }) : isMulti ? options.filter(function (i) {
-    return i.value == value;
-  }) : options.find(function (i) {
-    return i.value == value;
-  });
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  return React__default.createElement(CreatableSelect, Object.assign({
-    isClearable: true,
-    isDisabled: isDisabled,
-    options: options,
-    value: initialValues,
-    menuPlacement: scrollBottom ? "top" : "auto",
-    isMulti: isMulti,
-    components: {
-      IndicatorSeparator: function IndicatorSeparator() {
-        return null;
-      },
-      DropdownIndicator: DropdownIndicator,
-      Option: CustomOption
-    },
-    styles: customStyles,
-    placeholder: t("select_placeholder")
-  }, rest));
-};
-
-var _excluded$2 = ["isDefault", "defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti", "optionValue", "styles"];
-var CustomSelect = function CustomSelect(_ref) {
-  var isDefault = _ref.isDefault,
-    options = _ref.options,
-    isDisabled = _ref.isDisabled,
-    scrollBottom = _ref.scrollBottom,
-    value = _ref.value,
-    isMulti = _ref.isMulti,
-    optionValue = _ref.optionValue,
-    styles = _ref.styles,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var initialValues = optionValue != null ? optionValue : value === undefined || value === null ? null : Array.isArray(value) ? options.filter(function (i) {
-    return value.includes(i.value);
-  }) : isMulti ? options === null || options === void 0 ? void 0 : options.filter(function (i) {
-    return i.value == value;
-  }) : options === null || options === void 0 ? void 0 : options.find(function (i) {
-    return i.value == value;
-  });
-  return React__default.createElement(Select__default, Object.assign({
-    isDisabled: isDisabled,
-    options: options,
-    value: !isDefault ? initialValues != null ? initialValues : null : undefined,
-    defaultValue: isDefault ? initialValues : undefined,
-    menuPlacement: scrollBottom ? "top" : "auto",
-    components: {
-      IndicatorSeparator: function IndicatorSeparator() {
-        return null;
-      },
-      DropdownIndicator: DropdownIndicator,
-      Option: CustomOption
-    },
-    styles: _extends({}, customStyles, styles),
-    isMulti: isMulti,
-    placeholder: t("select_placeholder")
-  }, rest));
-};
-
-var _excluded$3 = ["defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti", "valueById", "isTextbook"];
-var CustomSelectOption = function CustomSelectOption(_ref) {
-  var defaultValue = _ref.defaultValue,
-    options = _ref.options,
-    isDisabled = _ref.isDisabled,
-    scrollBottom = _ref.scrollBottom,
-    value = _ref.value,
-    isMulti = _ref.isMulti,
-    valueById = _ref.valueById,
-    isTextbook = _ref.isTextbook,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var initialValues = defaultValue !== null && typeof defaultValue !== "undefined" ? (options === null || options === void 0 ? void 0 : options.find(function (option) {
-    return option.value === defaultValue;
-  })) || null : null;
-  var optionValue = valueById !== null && typeof valueById !== "undefined" ? (options === null || options === void 0 ? void 0 : options.find(function (option) {
-    return option.value == valueById;
-  })) || {
-    label: valueById,
-    value: valueById
-  } : null;
-  return isTextbook ? React__default.createElement(CreatableSelect, Object.assign({
-    isDisabled: isDisabled,
-    options: options,
-    value: optionValue || value,
-    defaultValue: initialValues,
-    menuPlacement: scrollBottom ? "top" : "auto",
-    isMulti: isMulti,
-    components: {
-      IndicatorSeparator: function IndicatorSeparator() {
-        return null;
-      },
-      DropdownIndicator: DropdownIndicator,
-      Option: CustomOption
-    },
-    styles: customStyles,
-    placeholder: t("select_placeholder")
-  }, rest)) : React__default.createElement(Select__default, Object.assign({
-    isDisabled: isDisabled,
-    options: options,
-    value: optionValue || value,
-    defaultValue: initialValues,
-    menuPlacement: scrollBottom ? "top" : "auto",
-    isMulti: isMulti,
-    components: {
-      IndicatorSeparator: function IndicatorSeparator() {
-        return null;
-      },
-      DropdownIndicator: DropdownIndicator,
-      Option: CustomOption
-    },
-    styles: customStyles,
-    placeholder: t("select_placeholder")
-  }, rest));
-};
-
 (function (PreparedType) {
   PreparedType[PreparedType["csat_past_questions"] = 1] = "csat_past_questions";
   PreparedType[PreparedType["official_mock_exam"] = 2] = "official_mock_exam";
@@ -6757,6 +6361,10 @@ var handleKeyDown = function handleKeyDown(e) {
     e.preventDefault();
   }
 };
+var getPercentage = function getPercentage(current, max) {
+  if (!max) return 0;
+  return current * 100 / max;
+};
 
 var isTextType = function isTextType(type) {
   return type === exports.QuestionAnswerType.ShortAnswer || type === exports.QuestionAnswerType.OrderMatters || type === exports.QuestionAnswerType.OrderDoesNotMatters || type === exports.QuestionAnswerType.SynonymProcessing;
@@ -7008,7 +6616,7 @@ var useCountDownTimer = function useCountDownTimer(props) {
       !!requestRef.current && cancelAnimationFrame(requestRef.current);
       setRemainTime(undefined);
     };
-  }, [startTime, duration]);
+  }, [startTime, duration, status]);
   React.useEffect(function () {
     if (typeof remainTime === "number" && remainTime <= 0) checkLiveExamStatus();
   }, [remainTime, checkLiveExamStatus]);
@@ -7069,7 +6677,7 @@ var useKeyboardVisible = function useKeyboardVisible() {
   var isTabletUp = material.useMediaQuery(theme.breakpoints.up('lg'));
   var isFullScreen = !!document.fullscreenElement;
   var pageSxProps = _extends({}, !isTabletUp && isKeyboardVisible && isFullScreen && {
-    marginBlock: "3rem 50vh"
+    marginBlock: "3rem 50dvh"
   });
   var handleInputFocus = function handleInputFocus() {
     setIsKeyboardVisible(true);
@@ -7713,6 +7321,412 @@ var useVirtualizeList = function useVirtualizeList(totalItems, rowHeight, offset
   OrderBy["DESC"] = "DESC";
 })(exports.OrderBy || (exports.OrderBy = {}));
 
+var ConfirmDialog = function ConfirmDialog(_ref) {
+  var open = _ref.open,
+    text = _ref.text,
+    cancelText = _ref.cancelText,
+    okText = _ref.okText,
+    isDelete = _ref.isDelete,
+    title = _ref.title,
+    confirmText = _ref.confirmText,
+    titleStyle = _ref.titleStyle,
+    titleClassName = _ref.titleClassName,
+    contentStyle = _ref.contentStyle,
+    cancelButtonStyle = _ref.cancelButtonStyle,
+    contentTextStyle = _ref.contentTextStyle,
+    okButtonStyle = _ref.okButtonStyle,
+    actionStyle = _ref.actionStyle,
+    _ref$okButtonVariant = _ref.okButtonVariant,
+    okButtonVariant = _ref$okButtonVariant === void 0 ? "contained" : _ref$okButtonVariant,
+    _ref$cancelButtonVari = _ref.cancelButtonVariant,
+    cancelButtonVariant = _ref$cancelButtonVari === void 0 ? "contained" : _ref$cancelButtonVari,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? 1102 : _ref$zIndex,
+    toggle = _ref.toggle,
+    onConfirm = _ref.onConfirm;
+  var _useState = React.useState(),
+    confirmTextValue = _useState[0],
+    setConfirmTextValue = _useState[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useKeyboardVisible = useKeyboardVisible(),
+    pageSxProps = _useKeyboardVisible.pageSxProps,
+    handleInputFocus = _useKeyboardVisible.handleInputFocus,
+    handleInputBlur = _useKeyboardVisible.handleInputBlur;
+  var handleConfirm = function handleConfirm() {
+    onConfirm();
+  };
+  var handleChangeConfirmText = function handleChangeConfirmText(e) {
+    setConfirmTextValue(e.target.value);
+  };
+  var handlePaste = function handlePaste(_) {};
+  React.useEffect(function () {
+    !open && setConfirmTextValue(undefined);
+  }, [open]);
+  var isValid = !!confirmText && !!confirmTextValue && confirmTextValue.trim() === confirmText.trim();
+  var isDisableDelete = !!confirmText && (confirmTextValue === null || confirmTextValue === void 0 ? void 0 : confirmTextValue.trim()) !== confirmText.trim();
+  return React__default.createElement(material.Dialog, {
+    open: open,
+    onClose: toggle,
+    sx: {
+      zIndex: zIndex
+    },
+    scroll: "body",
+    PaperProps: {
+      sx: _extends({}, pageSxProps)
+    }
+  }, React__default.createElement(React.Fragment, null, React__default.createElement(material.DialogTitle, {
+    className: "border border-start-0 border-end-0 border-top-0 border-1 " + titleClassName,
+    sx: _extends({
+      fontSize: 16
+    }, titleStyle)
+  }, title || t('confirmation')), React__default.createElement(material.IconButton, {
+    "aria-label": "close",
+    onClick: toggle,
+    sx: {
+      position: "absolute",
+      right: 8,
+      top: 8,
+      color: function color(theme) {
+        return theme.palette.grey[500];
+      }
+    }
+  }, React__default.createElement(io5.IoClose, null))), React__default.createElement(material.DialogContent, {
+    sx: _extends({
+      pt: 0.5
+    }, contentStyle)
+  }, React__default.createElement(material.Typography, {
+    className: "mb-1",
+    sx: _extends({
+      fontWeight: 700
+    }, contentTextStyle)
+  }, text), !!confirmText && React__default.createElement("div", {
+    className: "w-100"
+  }, React__default.createElement("p", {
+    className: "mb-3"
+  }, t("enter_text_to_confirm_delete", {
+    text: confirmText
+  })), React__default.createElement(material.TextField, {
+    className: "w-100",
+    sx: {
+      "& input": {
+        py: 1
+      }
+    },
+    value: confirmTextValue,
+    onChange: handleChangeConfirmText,
+    placeholder: t('please_enter'),
+    onPaste: handlePaste,
+    error: !isValid && confirmTextValue !== undefined,
+    color: isValid ? "success" : confirmTextValue !== undefined ? "error" : undefined,
+    onFocus: handleInputFocus,
+    onBlur: handleInputBlur
+  }))), React__default.createElement(material.DialogActions, {
+    className: "border border-start-0 border-end-0 border-bottom-0 border-1 " + titleClassName,
+    sx: _extends({
+      paddingTop: 1
+    }, actionStyle)
+  }, React__default.createElement(material.Button, {
+    variant: cancelButtonVariant,
+    color: cancelButtonVariant !== "contained" ? "primary" : "secondary",
+    className: "px-3 " + (cancelButtonVariant !== "contained" ? "primary" : "bg-secondary"),
+    onClick: toggle,
+    sx: cancelButtonStyle
+  }, cancelText || t("no")), React__default.createElement(material.Button, {
+    variant: okButtonVariant,
+    color: isDelete ? "error" : "primary",
+    className: "px-3",
+    disabled: isDisableDelete,
+    onClick: handleConfirm,
+    sx: _extends({}, okButtonStyle, isDelete && {
+      backgroundColor: "#db4d4d",
+      color: "#FFFFFF",
+      "&:hover": {
+        backgroundColor: "#C41414"
+      }
+    })
+  }, okText || t('yes'))));
+};
+
+var ConfirmDeleteDialog = function ConfirmDeleteDialog(props) {
+  return React__default.createElement(ConfirmDialog, Object.assign({}, ConfirmDeleteDialogDefaultProps, props));
+};
+
+var iconCloseDialog = function iconCloseDialog(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "24" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "25" : _ref$height,
+    color = _ref.color;
+  return React__default.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 25",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("path", {
+    d: "M13.5909 12.5L18.0441 8.04687C18.2554 7.8359 18.3743 7.54962 18.3745 7.25099C18.3748 6.95237 18.2564 6.66587 18.0455 6.45453C17.8345 6.24319 17.5482 6.12431 17.2496 6.12404C16.951 6.12378 16.6645 6.24215 16.4531 6.45312L12 10.9062L7.54687 6.45312C7.33553 6.24178 7.04888 6.12305 6.75 6.12305C6.45111 6.12305 6.16447 6.24178 5.95312 6.45312C5.74178 6.66447 5.62305 6.95111 5.62305 7.25C5.62305 7.54888 5.74178 7.83553 5.95312 8.04687L10.4062 12.5L5.95312 16.9531C5.74178 17.1645 5.62305 17.4511 5.62305 17.75C5.62305 18.0489 5.74178 18.3355 5.95312 18.5469C6.16447 18.7582 6.45111 18.8769 6.75 18.8769C7.04888 18.8769 7.33553 18.7582 7.54687 18.5469L12 14.0937L16.4531 18.5469C16.6645 18.7582 16.9511 18.8769 17.25 18.8769C17.5489 18.8769 17.8355 18.7582 18.0469 18.5469C18.2582 18.3355 18.3769 18.0489 18.3769 17.75C18.3769 17.4511 18.2582 17.1645 18.0469 16.9531L13.5909 12.5Z",
+    fill: "#202B37"
+  }));
+};
+
+var iconWarning = function iconWarning(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "17" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "16" : _ref$height,
+    color = _ref.color;
+  return React__default.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 17 16",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("path", {
+    d: "M14.5335 12.4712L9.20754 2.58062C8.83004 1.87937 7.82441 1.87937 7.4466 2.58062L2.12097 12.4712C2.03901 12.6235 1.99792 12.7944 2.00171 12.9672C2.00549 13.1401 2.05404 13.309 2.14259 13.4575C2.23115 13.606 2.3567 13.729 2.50698 13.8145C2.65726 13.9 2.82714 13.9451 3.00004 13.9453H13.6529C13.8259 13.9453 13.996 13.9005 14.1465 13.8151C14.2969 13.7297 14.4227 13.6067 14.5115 13.4582C14.6002 13.3096 14.6489 13.1406 14.6527 12.9676C14.6566 12.7946 14.6155 12.6236 14.5335 12.4712ZM8.32722 12.4141C8.20361 12.4141 8.08277 12.3774 7.97999 12.3087C7.87721 12.2401 7.7971 12.1424 7.7498 12.0282C7.7025 11.914 7.69012 11.7884 7.71423 11.6671C7.73835 11.5459 7.79787 11.4345 7.88528 11.3471C7.97269 11.2597 8.08405 11.2002 8.20529 11.1761C8.32653 11.152 8.4522 11.1643 8.5664 11.2116C8.6806 11.2589 8.77822 11.3391 8.84689 11.4418C8.91557 11.5446 8.95222 11.6654 8.95222 11.7891C8.95222 11.8711 8.93606 11.9524 8.90465 12.0282C8.87324 12.1041 8.8272 12.173 8.76917 12.231C8.71113 12.289 8.64223 12.3351 8.5664 12.3665C8.49057 12.3979 8.4093 12.4141 8.32722 12.4141ZM9.00597 6.12813L8.8266 9.94063C8.8266 10.0732 8.77392 10.2004 8.68015 10.2942C8.58638 10.3879 8.45921 10.4406 8.3266 10.4406C8.19399 10.4406 8.06681 10.3879 7.97305 10.2942C7.87928 10.2004 7.8266 10.0732 7.8266 9.94063L7.64722 6.12969C7.64319 6.03862 7.65754 5.94768 7.6894 5.86227C7.72127 5.77687 7.77 5.69875 7.8327 5.63259C7.8954 5.56642 7.97078 5.51355 8.05434 5.47713C8.13791 5.44072 8.22795 5.4215 8.3191 5.42063H8.32566C8.41743 5.42058 8.50826 5.43912 8.59267 5.47515C8.67708 5.51117 8.75331 5.56392 8.81677 5.63021C8.88023 5.6965 8.92961 5.77497 8.96191 5.86087C8.99421 5.94676 9.00878 6.03832 9.00472 6.13L9.00597 6.12813Z",
+    fill: "#DB4D4D"
+  }));
+};
+
+var styles$1 = {"lighter":"#F0FFF6","light":"#89F0B2","less_dark":"#3DC674","dark":"#349056","darker":"#18442A","gray_50":"#FBFBF9","gray_100":"#EAEAE5","gray_300":"#D0D0C8","gray_500":"#9A9A98","gray_700":"#5D5D5B","gray_900":"#363634","red_900":"#DB4D4D","green_support_900":"#3ACB46","yellow_900":"#FEAF06","purple_900":"#C3099A","titleBox":"_2mYOt","title":"_1H9qR","point":"_2rTfh","buttonGroup":"_W5dic","btnFeedback":"_FmMYN","btnTerminate":"_3kv6J","myanswer":"_1jZV7","titleMyAnswer1":"_1aYD1","titleMyAnswer2":"_2Oc4x","contentMyAnswer":"__LRYW","myAnswerItem":"_1U-Kx","time":"_2PXiz","timeCol":"_1zcfJ","answer-response":"_18ZNf","answer-response-0":"_3nbRi","answer-response-1":"_3NEHk","answer-response-2":"_Et0ih","answer-response-3":"_5Vc3v","answer-response-4":"_2SMBR","overall-response-1":"_1ImE5","overall-response-2":"_1oVKC","overall-response-3":"_2wXCw","answerCorrect":"_gE8qM","answerIncorrect":"_3kRqE","answerNograss":"_22Pi3","answerEasy":"_1C7aw","answerDiscrimination":"__YGYX","answerTrap":"_3AkGb","answerNoTime":"_3l-yC","questionOrder":"_2mK7U","myTimeLabel":"_3ZOZs","myPoolTime":"_1Gajr","topTimeLabel":"_62PzE","topTime":"_3HUx1","meanTimeLabel":"_Yu8Oq","meanTime":"_18kZu","compareChart":"_2MTOH","prevChart":"_JoHQL","chart":"_29iCQ","nextChart":"_3hjxI","titleChart":"_2Z42z","titleCompareGrass":"_34RN_","tableCompareGrass":"_2lzlQ","thcolumn1":"_2MSIH","tdcolumn1":"_1I06v","tdcolumn3":"_VpMQ5","classification":"_3t41M","wrapperProblem":"_2vh8v","titleProblem":"_3YfGm","titleProblemClose":"_34388","titleTrickyProblem":"_INxbh","wrongQuestions":"_35DcB","question":"_10SAW","assignedQuestions":"_oEGQ_","wrapperContent":"_zhZ1O","content":"_NGHD4","contentColumn1":"_v5SKe","span1":"_28SHT","span2":"_1raLd","contentColumn2":"_-xJ34","duration":"_1YGAg","topDuration":"_3DiyY","overallCorrectRate":"_DnkyV","answer":"_29MTE","contentVulnerable":"_3x1PG","wrappContentProblem":"_2saM2","contentProblem":"_1hTJx","labelProblem":"_3BXO9","name":"_1cUZW","percent":"_3CLEc","slider":"_3LCEY","track":"_3I8mi","noData":"_1oZ-s","loading":"_Nm201","table-responsive":"_3zQL-","form-label":"_3Vpmh","form-control":"_DafKE","form-label-dialog":"_3NjaH","btn-cancel":"_sLxwL","btn-register":"_4ZKQY","pdfBtnBox":"_2zUJf","pdfBtn":"_y_Cr7","form-select":"_HCIxD","loader":"_3aDIU","dot":"_JGCIL","bounce":"_3M62i"};
+
+var DropdownIndicator = function DropdownIndicator(props) {
+  return React__default.createElement(Select.components.DropdownIndicator, Object.assign({}, props), React__default.createElement(fa.FaCaretDown, {
+    size: 20,
+    color: styles.darker
+  }));
+};
+var CustomOption = function CustomOption(props) {
+  return React__default.createElement(Select.components.Option, Object.assign({}, props), React__default.createElement("div", {
+    style: {
+      fontSize: "14px",
+      fontWeight: 500
+    }
+  }, props.data.label));
+};
+
+var customStyles = {
+  control: function control(baseStyles, state) {
+    return _extends({}, baseStyles, {
+      fontSize: "14px",
+      fontWeight: 700,
+      color: styles.darker,
+      borderColor: state.isFocused || state.hasValue ? styles.dark : styles.less_dark,
+      boxShadow: state.isFocused ? "0 0 0 1px " + styles.dark + "4D" : baseStyles.boxShadow,
+      "&:active": {
+        borderColor: state.isFocused || state.hasValue ? styles.dark : styles.less_dark
+      },
+      "&:hover": {
+        borderColor: state.isFocused || state.hasValue ? styles.dark : styles.less_dark
+      }
+    });
+  },
+  input: function input(baseStyles, _) {
+    return _extends({}, baseStyles, {
+      fontSize: "14px",
+      fontWeight: 700,
+      color: styles.darker
+    });
+  },
+  placeholder: function placeholder(baseStyles, _) {
+    return _extends({}, baseStyles, {
+      whiteSpace: "nowrap"
+    });
+  },
+  singleValue: function singleValue(baseStyles) {
+    return _extends({}, baseStyles, {
+      fontSize: "14px",
+      fontWeight: 700,
+      color: styles.darker
+    });
+  },
+  option: function option(baseStyles, state) {
+    return _extends({}, baseStyles, {
+      zIndex: 999,
+      backgroundColor: state.isSelected ? styles.dark : state.isFocused ? styles.light : 'white',
+      "&:active": {
+        backgroundColor: state.isSelected ? styles.dark : state.isFocused ? styles.less_dark : baseStyles.backgroundColor
+      }
+    });
+  },
+  menuPortal: function menuPortal(base) {
+    return _extends({}, base, {
+      zIndex: 99
+    });
+  }
+};
+
+var _excluded = ["isDefault", "defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti"];
+var CustomAsyncSelect = function CustomAsyncSelect(_ref) {
+  var _value$;
+  var isDefault = _ref.isDefault,
+    options = _ref.options,
+    isDisabled = _ref.isDisabled,
+    scrollBottom = _ref.scrollBottom,
+    value = _ref.value,
+    isMulti = _ref.isMulti,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var isOptionValue = (value === null || value === void 0 ? void 0 : value.value) || (value === null || value === void 0 ? void 0 : (_value$ = value[0]) === null || _value$ === void 0 ? void 0 : _value$.value);
+  var initialValues = isOptionValue ? value : Array.isArray(value) ? options.filter(function (i) {
+    return value.includes(i.value);
+  }) : isMulti ? options.filter(function (i) {
+    return i.value == value;
+  }) : options.find(function (i) {
+    return i.value == value;
+  });
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  return React__default.createElement(Select__default, Object.assign({
+    isDisabled: isDisabled,
+    options: options,
+    value: !isDefault ? initialValues : undefined,
+    defaultValue: isDefault ? initialValues : undefined,
+    menuPlacement: scrollBottom ? "top" : "auto",
+    isMulti: isMulti,
+    components: {
+      IndicatorSeparator: function IndicatorSeparator() {
+        return null;
+      },
+      DropdownIndicator: DropdownIndicator,
+      Option: CustomOption
+    },
+    styles: customStyles,
+    placeholder: t("select_placeholder")
+  }, rest));
+};
+
+var _excluded$1 = ["defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti"];
+var CustomCreatable = function CustomCreatable(_ref) {
+  var options = _ref.options,
+    isDisabled = _ref.isDisabled,
+    scrollBottom = _ref.scrollBottom,
+    value = _ref.value,
+    isMulti = _ref.isMulti,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  var initialValues = Array.isArray(value) ? options.filter(function (i) {
+    return value.includes(i.value);
+  }) : isMulti ? options.filter(function (i) {
+    return i.value == value;
+  }) : options.find(function (i) {
+    return i.value == value;
+  });
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  return React__default.createElement(CreatableSelect, Object.assign({
+    isClearable: true,
+    isDisabled: isDisabled,
+    options: options,
+    value: initialValues,
+    menuPlacement: scrollBottom ? "top" : "auto",
+    isMulti: isMulti,
+    components: {
+      IndicatorSeparator: function IndicatorSeparator() {
+        return null;
+      },
+      DropdownIndicator: DropdownIndicator,
+      Option: CustomOption
+    },
+    styles: customStyles,
+    placeholder: t("select_placeholder")
+  }, rest));
+};
+
+var _excluded$2 = ["isDefault", "defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti", "optionValue", "styles"];
+var CustomSelect = function CustomSelect(_ref) {
+  var isDefault = _ref.isDefault,
+    options = _ref.options,
+    isDisabled = _ref.isDisabled,
+    scrollBottom = _ref.scrollBottom,
+    value = _ref.value,
+    isMulti = _ref.isMulti,
+    optionValue = _ref.optionValue,
+    styles = _ref.styles,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var initialValues = optionValue != null ? optionValue : value === undefined || value === null ? null : Array.isArray(value) ? options.filter(function (i) {
+    return value.includes(i.value);
+  }) : isMulti ? options === null || options === void 0 ? void 0 : options.filter(function (i) {
+    return i.value == value;
+  }) : options === null || options === void 0 ? void 0 : options.find(function (i) {
+    return i.value == value;
+  });
+  return React__default.createElement(Select__default, Object.assign({
+    isDisabled: isDisabled,
+    options: options,
+    value: !isDefault ? initialValues != null ? initialValues : null : undefined,
+    defaultValue: isDefault ? initialValues : undefined,
+    menuPlacement: scrollBottom ? "top" : "auto",
+    components: {
+      IndicatorSeparator: function IndicatorSeparator() {
+        return null;
+      },
+      DropdownIndicator: DropdownIndicator,
+      Option: CustomOption
+    },
+    styles: _extends({}, customStyles, styles),
+    isMulti: isMulti,
+    placeholder: t("select_placeholder")
+  }, rest));
+};
+
+var _excluded$3 = ["defaultValue", "options", "isDisabled", "scrollBottom", "value", "isMulti", "valueById", "isTextbook"];
+var CustomSelectOption = function CustomSelectOption(_ref) {
+  var defaultValue = _ref.defaultValue,
+    options = _ref.options,
+    isDisabled = _ref.isDisabled,
+    scrollBottom = _ref.scrollBottom,
+    value = _ref.value,
+    isMulti = _ref.isMulti,
+    valueById = _ref.valueById,
+    isTextbook = _ref.isTextbook,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var initialValues = defaultValue !== null && typeof defaultValue !== "undefined" ? (options === null || options === void 0 ? void 0 : options.find(function (option) {
+    return option.value === defaultValue;
+  })) || null : null;
+  var optionValue = valueById !== null && typeof valueById !== "undefined" ? (options === null || options === void 0 ? void 0 : options.find(function (option) {
+    return option.value == valueById;
+  })) || {
+    label: valueById,
+    value: valueById
+  } : null;
+  return isTextbook ? React__default.createElement(CreatableSelect, Object.assign({
+    isDisabled: isDisabled,
+    options: options,
+    value: optionValue || value,
+    defaultValue: initialValues,
+    menuPlacement: scrollBottom ? "top" : "auto",
+    isMulti: isMulti,
+    components: {
+      IndicatorSeparator: function IndicatorSeparator() {
+        return null;
+      },
+      DropdownIndicator: DropdownIndicator,
+      Option: CustomOption
+    },
+    styles: customStyles,
+    placeholder: t("select_placeholder")
+  }, rest)) : React__default.createElement(Select__default, Object.assign({
+    isDisabled: isDisabled,
+    options: options,
+    value: optionValue || value,
+    defaultValue: initialValues,
+    menuPlacement: scrollBottom ? "top" : "auto",
+    isMulti: isMulti,
+    components: {
+      IndicatorSeparator: function IndicatorSeparator() {
+        return null;
+      },
+      DropdownIndicator: DropdownIndicator,
+      Option: CustomOption
+    },
+    styles: customStyles,
+    placeholder: t("select_placeholder")
+  }, rest));
+};
+
 function CommonCreateNewQuestionDialog(_ref) {
   var handleCreateQuestion = _ref.handleCreateQuestion,
     openDialog = _ref.openDialog,
@@ -16331,9 +16345,6 @@ var DEFAULT_HEXAGON_OPTIONS = {
         fontSize: "14px",
         fontFamily: "Pretendard,sans-serif",
         colors: [grey[700], grey[700], grey[700], grey[700], grey[700], grey[700]]
-      },
-      formatter: function formatter(val) {
-        return val.length > 4 ? val.slice(0, 4) + '...' : val;
       }
     }
   },
@@ -22211,9 +22222,13 @@ var HexagonChart = function HexagonChart(_ref2) {
       }),
       xaxis: _extends({}, DEFAULT_HEXAGON_OPTIONS.xaxis, {
         categories: normalizeArray(categories, 6, ''),
-        labels: _extends({}, DEFAULT_HEXAGON_OPTIONS.xaxis.labels, xAxisLabelFormatter && {
+        labels: _extends({}, DEFAULT_HEXAGON_OPTIONS.xaxis.labels, xAxisLabelFormatter && _extends({
           formatter: xAxisLabelFormatter
-        })
+        }, isPrint && {
+          style: _extends({}, DEFAULT_HEXAGON_OPTIONS.xaxis.labels.style, {
+            fontSize: "12px"
+          })
+        }))
       }),
       tooltip: _extends({}, DEFAULT_HEXAGON_OPTIONS.tooltip, !!customTooltip && {
         custom: customTooltip
@@ -22497,7 +22512,7 @@ var OverallChartContainer = function OverallChartContainer(_ref) {
     categories: shortCategories,
     customTooltip: formatTooltip,
     xAxisLabelFormatter: xAxisLabelFormatter,
-    height: isPrint ? 300 : 400,
+    height: isPrint ? 350 : 400,
     isPrint: isPrint,
     onRendered: onRendered
   }));
@@ -22532,7 +22547,7 @@ var CategoriesOverallChartContainer = function CategoriesOverallChartContainer(_
     categories: shortCategories,
     customTooltip: formatTooltip,
     xAxisLabelFormatter: xAxisLabelFormatter,
-    height: isPrint ? 300 : 400,
+    height: isPrint ? 350 : 400,
     onRendered: onRendered,
     isPrint: isPrint
   }));
@@ -23971,20 +23986,20 @@ var useOverallChartContainer = function useOverallChartContainer(isStudent, exam
   }, [examCode, isStudent, code, examSessionId, studentId]);
   var myData = React.useMemo(function () {
     if (!overallData || !overallData.data[0]) return [0, 0, 0, 0, 0, 0];
-    var highLevelQuestions = overallData.data[0].highLevelQuestions * 100 / overallData.maxData.highLevelQuestions;
-    var lowLevelQuestions = overallData.data[0].lowLevelQuestions * 100 / overallData.maxData.lowLevelQuestions;
-    var questionLongestTime = overallData.data[0].questionLongestTime * 100 / overallData.maxData.questionLongestTime;
-    var problemSolvingTime = overallData.data[0].problemSolvingTime * 100 / overallData.maxData.problemSolvingTime;
-    var totalAsteriskQuestions = overallData.data[0].totalAsteriskQuestions * 100 / overallData.maxData.totalAsteriskQuestions;
+    var highLevelQuestions = getPercentage(overallData.data[0].highLevelQuestions, overallData.maxData.highLevelQuestions);
+    var lowLevelQuestions = getPercentage(overallData.data[0].lowLevelQuestions, overallData.maxData.lowLevelQuestions);
+    var questionLongestTime = getPercentage(overallData.data[0].questionLongestTime, overallData.maxData.questionLongestTime);
+    var problemSolvingTime = getPercentage(overallData.data[0].problemSolvingTime, overallData.maxData.problemSolvingTime);
+    var totalAsteriskQuestions = getPercentage(overallData.data[0].totalAsteriskQuestions, overallData.maxData.totalAsteriskQuestions);
     return [overallData.data[0].correctRate, highLevelQuestions, questionLongestTime, problemSolvingTime, totalAsteriskQuestions, lowLevelQuestions];
   }, [JSON.stringify(overallData)]);
   var avgData = React.useMemo(function () {
     if (!overallData || !overallData.data[1]) return [0, 0, 0, 0, 0, 0];
-    var highLevelQuestions = overallData.data[1].highLevelQuestions * 100 / overallData.maxData.highLevelQuestions;
-    var lowLevelQuestions = overallData.data[1].lowLevelQuestions * 100 / overallData.maxData.lowLevelQuestions;
-    var questionLongestTime = overallData.data[1].questionLongestTime * 100 / overallData.maxData.questionLongestTime;
-    var problemSolvingTime = overallData.data[1].problemSolvingTime * 100 / overallData.maxData.problemSolvingTime;
-    var totalAsteriskQuestions = overallData.data[1].totalAsteriskQuestions * 100 / overallData.maxData.totalAsteriskQuestions;
+    var highLevelQuestions = getPercentage(overallData.data[1].highLevelQuestions, overallData.maxData.highLevelQuestions);
+    var lowLevelQuestions = getPercentage(overallData.data[1].lowLevelQuestions, overallData.maxData.lowLevelQuestions);
+    var questionLongestTime = getPercentage(overallData.data[1].questionLongestTime, overallData.maxData.questionLongestTime);
+    var problemSolvingTime = getPercentage(overallData.data[1].problemSolvingTime, overallData.maxData.problemSolvingTime);
+    var totalAsteriskQuestions = getPercentage(overallData.data[1].totalAsteriskQuestions, overallData.maxData.totalAsteriskQuestions);
     return [overallData.data[1].correctRate, highLevelQuestions, questionLongestTime, problemSolvingTime, totalAsteriskQuestions, lowLevelQuestions];
   }, [JSON.stringify(overallData)]);
   var categories = [t("correct_rate"), t("high_level"), t("longest_time"), t("solving_time"), t("asterisks"), t("low_level")];
@@ -23992,8 +24007,12 @@ var useOverallChartContainer = function useOverallChartContainer(isStudent, exam
     return i.slice(0, 4) + "...";
   });
   var xAxisLabelFormatter = React.useCallback(function (_, _ref) {
+    var _categories$dataPoint, _categories$dataPoint2;
     var dataPointIndex = _ref.dataPointIndex;
-    return categories[dataPointIndex];
+    if (dataPointIndex === 0 || dataPointIndex === 3) return categories[dataPointIndex];
+    var texts = (_categories$dataPoint = (_categories$dataPoint2 = categories[dataPointIndex]) === null || _categories$dataPoint2 === void 0 ? void 0 : _categories$dataPoint2.split(" ")) != null ? _categories$dataPoint : [];
+    var middle = Math.floor(texts.length / 2);
+    return [texts.slice(0, middle), texts.slice(middle)];
   }, [JSON.stringify(categories)]);
   var formatTooltip = React.useCallback(function (_ref2) {
     var _overallData$data$0$h, _overallData$data$, _overallData$data$1$h, _overallData$data$2, _overallData$data$2$h, _overallData$data$0$q, _overallData$data$3, _overallData$data$1$q, _overallData$data$4, _overallData$data$0$p, _overallData$data$5, _overallData$data$1$p, _overallData$data$6, _overallData$data$0$t, _overallData$data$7, _overallData$data$1$t, _overallData$data$8, _overallData$data$8$t, _overallData$data$0$l, _overallData$data$9, _overallData$data$1$l, _overallData$data$10, _overallData$data$10$, _overallData$data$0$c, _overallData$data$11, _overallData$data$11$, _overallData$data$1$c, _overallData$data$12, _overallData$data$12$;
@@ -24100,13 +24119,13 @@ var useCategoriesOverallChartContainer = function useCategoriesOverallChartConta
   var myData = React.useMemo(function () {
     if (!(overallData !== null && overallData !== void 0 && overallData.length)) return [0, 0, 0, 0, 0, 0];
     return overallData.map(function (i) {
-      return !i.totalQuestions ? 0 : i.totalCorrectQuestions * 100 / i.totalQuestions;
+      return getPercentage(i.totalCorrectQuestions, i.totalQuestions);
     });
   }, [JSON.stringify(overallData)]);
   var avgData = React.useMemo(function () {
     if (!(overallData !== null && overallData !== void 0 && overallData.length)) return [0, 0, 0, 0, 0, 0];
     return overallData.map(function (i) {
-      return !i.totalQuestions ? 0 : i.avgCorrectQuestions * 100 / i.totalQuestions;
+      return getPercentage(i.avgCorrectQuestions, i.totalQuestions);
     });
   }, [JSON.stringify(overallData)]);
   var categories = React.useMemo(function () {
@@ -24122,8 +24141,12 @@ var useCategoriesOverallChartContainer = function useCategoriesOverallChartConta
     });
   }, [overallData]);
   var xAxisLabelFormatter = React.useCallback(function (_, _ref) {
+    var _categories$dataPoint, _categories$dataPoint2;
     var dataPointIndex = _ref.dataPointIndex;
-    return categories[dataPointIndex];
+    if (dataPointIndex === 0 || dataPointIndex === 3) return categories[dataPointIndex];
+    var texts = (_categories$dataPoint = (_categories$dataPoint2 = categories[dataPointIndex]) === null || _categories$dataPoint2 === void 0 ? void 0 : _categories$dataPoint2.split(" ")) != null ? _categories$dataPoint : [];
+    var middle = Math.floor(texts.length / 2);
+    return [texts.slice(0, middle), texts.slice(middle)];
   }, [JSON.stringify(categories)]);
   var formatTooltip = React.useCallback(function (_ref2) {
     var _toFixed, _ref3, _toFixed2, _ref4;
@@ -39308,6 +39331,7 @@ exports.getLanguage = getLanguage;
 exports.getLearningSpace = getLearningSpace;
 exports.getLocalDayOfWeek = getLocalDayOfWeek;
 exports.getOrdinalSuffix = getOrdinalSuffix;
+exports.getPercentage = getPercentage;
 exports.getPreviousQuestinGroupCategory = getPreviousQuestinGroupCategory;
 exports.getQuestionGroupsAfterQuestionCountChanged = getQuestionGroupsAfterQuestionCountChanged;
 exports.getRecentUserActionListApi = getRecentUserActionListApi;