@elice/material-quiz 1.241127.0 → 1.241128.0

package/cjs/components/material-quiz/MaterialQuizSelectMultipleOrder.js

@@ -114,7 +114,7 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
   var isNextActive = hasSubmitted && typeof onNext === 'function';
   var isDisabled = (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.correctOptionCount) !== answerList.filter(function (answer) {
     return answer.order !== null;
-  }).length || !!userId;
+  }).length || index.checkUserLectureTestEnded(lecture) || !!userId;
   var isTestLecture = (lecture === null || lecture === void 0 ? void 0 : lecture.lectureType) === types.enums.LectureType.Test;
   // ref
   var optionBoxRef = React__default.default.useRef(null);
@@ -473,11 +473,11 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
   var renderQuizDragOption = function renderQuizDragOption() {
     return jsxRuntime.jsxs(StyledQuizOptionsDropZone, {
       id: "quiz-options-dropzone",
-      disabled: !!userId,
+      disabled: isDisabled,
       accept: ".quiz-answer",
       children: [optionList.map(function (option, index) {
         return jsxRuntime.jsx(QuizDraggbleOption.default, {
-          disabled: !!userId,
+          disabled: isDisabled,
           id: "quiz-option-".concat(index),
           className: "quiz-option",
           content: option.value,
@@ -534,7 +534,7 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
             id: "option-answer-".concat(index$1),
             content: option.value,
             role: getRole(),
-            disabled: !!userId,
+            disabled: isDisabled,
             indexOrder: index$1 + 1,
             isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
           }, "option-answer-".concat(index$1));

package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroup.js

@@ -41,7 +41,8 @@ var MaterialQuizGroup = function MaterialQuizGroup() {
     materialQuiz = _useMaterialQuizState.materialQuiz,
     userId = _useMaterialQuizState.userId,
     vertical = _useMaterialQuizState.vertical,
-    isLongPassage = _useMaterialQuizState.isLongPassage;
+    isLongPassage = _useMaterialQuizState.isLongPassage,
+    lecture = _useMaterialQuizState.lecture;
   var _useMaterialQuizDispa = MaterialQuizContext.useMaterialQuizDispatch(),
     onSubmit = _useMaterialQuizDispa.onSubmit,
     onNext = _useMaterialQuizDispa.onNext,
@@ -81,7 +82,7 @@ var MaterialQuizGroup = function MaterialQuizGroup() {
     hasSubmitted = _React$useState16[0],
     setHasSubmitted = _React$useState16[1];
   var isNextActive = hasSubmitted && typeof onNext === 'function';
-  var isDisabled = !flattenDeep__default.default(currentAnswerList).length || !!userId;
+  var isDisabled = !flattenDeep__default.default(currentAnswerList).length || index.checkUserLectureTestEnded(lecture) || !!userId;
   var _useCaculatePassage = useCaculatePassage.useCaculatePassage(),
     questionRef = _useCaculatePassage.questionRef,
     containerRef = _useCaculatePassage.containerRef;
@@ -358,6 +359,7 @@ var MaterialQuizGroup = function MaterialQuizGroup() {
       optionList: optionList,
       currentOptionList: currentOptionList,
       currentAnswerList: currentAnswerList,
+      isDisabled: isDisabled,
       onUpdateAnswer: setCurrentAnswerList,
       onUpdateOption: setCurrentOptionList,
       onUpdateHasSubmitted: setHasSubmitted,

package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroupDesktop.js

@@ -65,6 +65,7 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop(_ref3) {
     groupList = _React$useContext.groupList,
     currentAnswerList = _React$useContext.currentAnswerList,
     currentOptionList = _React$useContext.currentOptionList,
+    isDisabled = _React$useContext.isDisabled,
     updateCurrentAnswer = _React$useContext.updateCurrentAnswer,
     updateCurrentOption = _React$useContext.updateCurrentOption,
     handleAnswerReset = _React$useContext.handleAnswerReset;
@@ -123,12 +124,13 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop(_ref3) {
       }), jsxRuntime.jsx(StyledQuizAnswerDropzone, {
         id: "quiz-answer-dropzone-".concat(dropzoneIndex),
         accept: ".quiz-answer",
-        disabled: !!userId,
+        disabled: isDisabled,
         isGroupAnswer: isGroupAnswer,
         children: isGroupAnswer ? (_b = currentAnswerList[dropzoneIndex]) === null || _b === void 0 ? void 0 : _b.map(function (answer, index$1) {
           var isHideStatus = !userId && (isActive || isTestLecture);
           var status = isHideStatus ? undefined : index.getQuizGroupOptionResultStatus(dropzoneIndex, index$1, answer.order, materialQuizResponse, materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.answerInfo);
           return jsxRuntime.jsx(MaterialQuizGroupOptionItem.default, {
+            disabled: isDisabled,
             status: status,
             option: answer
           }, index$1);
@@ -180,7 +182,7 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop(_ref3) {
         children: [jsxRuntime.jsx(blocks.Button, {
           role: "white",
           size: "small",
-          disabled: !!userId,
+          disabled: isDisabled,
           onClick: handleAnswerReset,
           children: intl$1.formatMessage({
             id: 'materialQuiz.dropzone.optionReset'
@@ -192,7 +194,8 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop(_ref3) {
           accept: ".quiz-answer",
           children: currentOptionList.length ? currentOptionList.map(function (option, index) {
             return jsxRuntime.jsx(MaterialQuizGroupOptionItem.default, {
-              option: option
+              option: option,
+              disabled: isDisabled
             }, index);
           }) : jsxRuntime.jsx(blocks.Flex, {
             justify: "center",

package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroupMobile.js

@@ -55,6 +55,7 @@ var MaterialQuizGroupMobile = function MaterialQuizGroupMobile(_ref3) {
   var _React$useContext = React__default.default.useContext(context.default),
     currentOptionList = _React$useContext.currentOptionList,
     currentAnswerList = _React$useContext.currentAnswerList,
+    isDisabled = _React$useContext.isDisabled,
     updateCurrentAnswer = _React$useContext.updateCurrentAnswer,
     updateCurrentOption = _React$useContext.updateCurrentOption,
     handleAnswerReset = _React$useContext.handleAnswerReset;
@@ -71,7 +72,7 @@ var MaterialQuizGroupMobile = function MaterialQuizGroupMobile(_ref3) {
       children: [jsxRuntime.jsx(blocks.Button, {
         role: "white",
         size: "small",
-        disabled: !!userId,
+        disabled: isDisabled,
         onClick: handleAnswerReset,
         block: true,
         children: intl$1.formatMessage({
@@ -108,6 +109,7 @@ var MaterialQuizGroupMobile = function MaterialQuizGroupMobile(_ref3) {
               var status = isHideStatus ? undefined : index.getQuizGroupOptionResultStatus(index$1, answerIndex, answer.order, materialQuizResponse, materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.answerInfo);
               return jsxRuntime.jsx(MaterialQuizGroupOptionItem.default, {
                 option: answer,
+                disabled: isDisabled,
                 status: status,
                 onClose: function onClose() {
                   var targetId = answer.order;
@@ -160,7 +162,8 @@ var MaterialQuizGroupMobile = function MaterialQuizGroupMobile(_ref3) {
               updateCurrentAnswer(targetId, dropzoneIndex);
             },
             children: jsxRuntime.jsx(MaterialQuizGroupOptionItem.default, {
-              option: option
+              option: option,
+              disabled: isDisabled
             }, index)
           }, index);
         }) : jsxRuntime.jsx(blocks.Text, {

package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroupOptionItem.d.ts

@@ -3,6 +3,7 @@ import type { QuizGroupOption } from './context/context';
 type Status = 'correct' | 'wrong' | 'answer';
 interface MaterialQuizGroupOptionProps {
     option: QuizGroupOption;
+    disabled?: boolean;
     status?: Status;
     onClose?: () => void;
 }

package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroupOptionItem.js

@@ -40,20 +40,23 @@ var StyledDraggbleOption = /*#__PURE__*/_styled__default.default(EbDraggable.def
     default:
       return '3px solid transparent';
   }
+}, ";cursor:", function (_ref4) {
+  var disabled = _ref4.disabled;
+  return disabled ? 'not-allowed !important' : 'auto';
 }, ";");
 var StyledOptionTitle = /*#__PURE__*/_styled__default.default("div", {
   target: "ex64yhy2"
-})("display:flex;justify-content:center;align-items:center;width:", function (_ref4) {
-  var vertical = _ref4.vertical,
-    isOptionContent = _ref4.isOptionContent;
-  return isOptionContent ? '100%' : vertical ? '10.25rem' : '11.5rem';
-}, ";height:", function (_ref5) {
+})("display:flex;justify-content:center;align-items:center;width:", function (_ref5) {
   var vertical = _ref5.vertical,
     isOptionContent = _ref5.isOptionContent;
-  return isOptionContent ? 'auto' : vertical ? '10.25rem' : '11.5rem';
-}, ";padding:0.5rem;background:", designTokens.base.color.white, ";background-color:", function (_ref6) {
-  var status = _ref6.status,
+  return isOptionContent ? '100%' : vertical ? '10.25rem' : '11.5rem';
+}, ";height:", function (_ref6) {
+  var vertical = _ref6.vertical,
     isOptionContent = _ref6.isOptionContent;
+  return isOptionContent ? 'auto' : vertical ? '10.25rem' : '11.5rem';
+}, ";padding:0.5rem;background:", designTokens.base.color.white, ";background-color:", function (_ref7) {
+  var status = _ref7.status,
+    isOptionContent = _ref7.isOptionContent;
   if (!isOptionContent) {
     return 'auto';
   }
@@ -68,26 +71,27 @@ var StyledOptionTitle = /*#__PURE__*/_styled__default.default("div", {
 }, ";");
 var StyledOptionContent = /*#__PURE__*/_styled__default.default("div", {
   target: "ex64yhy1"
-})("display:flex;align-items:center;width:", function (_ref7) {
-  var vertical = _ref7.vertical;
-  return vertical ? '10.25rem' : '11.5rem';
-}, ";height:", function (_ref8) {
+})("display:flex;align-items:center;width:", function (_ref8) {
   var vertical = _ref8.vertical;
   return vertical ? '10.25rem' : '11.5rem';
+}, ";height:", function (_ref9) {
+  var vertical = _ref9.vertical;
+  return vertical ? '10.25rem' : '11.5rem';
 }, ";background:", designTokens.base.color.navy8, ";& p{line-height:1;}");
 var StyledIconButton = /*#__PURE__*/_styled__default.default(material.IconButton, {
   target: "ex64yhy0"
-})("border-radius:50%;width:1.5rem;height:1.5rem;position:absolute;top:0.5rem;right:0.5rem;background-color:", function (_ref9) {
-  var theme = _ref9.theme;
+})("border-radius:50%;width:1.5rem;height:1.5rem;position:absolute;top:0.5rem;right:0.5rem;background-color:", function (_ref10) {
+  var theme = _ref10.theme;
   return theme.palette.action.active;
 }, ";align-self:flex-end;");
 //
 //
 //
-var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref10) {
-  var option = _ref10.option,
-    status = _ref10.status,
-    onClose = _ref10.onClose;
+var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref11) {
+  var option = _ref11.option,
+    status = _ref11.status,
+    disabled = _ref11.disabled,
+    onClose = _ref11.onClose;
   var _a;
   var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
     vertical = _useMaterialQuizState.vertical,
@@ -118,7 +122,7 @@ var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref10) {
   //
   //
   return jsxRuntime.jsxs(StyledDraggbleOption, {
-    disabled: !!userId || vertical,
+    disabled: disabled || vertical,
     id: option.order.toString(),
     className: "quiz-answer",
     vertical: vertical,

package/cjs/components/material-quiz/material-quiz-group/context/context.d.ts

@@ -11,6 +11,7 @@ interface QuizGroupContextValue {
     optionList: QuizGroupOption[];
     currentOptionList: QuizGroupOption[];
     currentAnswerList: QuizGroupOption[][];
+    isDisabled: boolean;
     onDirty: (value: boolean) => void;
     onUpdateAnswer: (value: React.SetStateAction<QuizGroupOption[][]>) => void;
     onUpdateOption: (value: React.SetStateAction<QuizGroupOption[]>) => void;

package/cjs/components/shared/QuizDraggbleOption.js

@@ -47,8 +47,11 @@ var StyledOrder = styled__default.default.div.withConfig({
 })(["width:1.5rem;height:1.5rem;display:flex;border-radius:4px;align-items:center;justify-content:center;color:", ";background-color:", ";flex:none;margin-left:0.5rem;"], designTokens.base.color.navy0, designTokens.base.color.navy4);
 var StyledQuizDraggbleOption = styled__default.default(EbDraggable.default).withConfig({
   componentId: "sc-19b0zkq-3"
-})(["display:flex;border-radius:8px;border:1px solid ", ";background-color:", ";overflow:hidden;&:not(:last-of-type){margin-bottom:1rem;}", "{background-color:", ";color:", ";}", "{background-color:", ";& *{color:", ";}}", "{background-color:", ";color:", ";}&.ui-draggable-dragging{z-index:1000 !important;color:", " !important;border:none !important;", "{background-color:", ";}", "{background-color:", ";border:1px solid ", " !important;}", "{color:", ";background-color:", ";}& *{color:", " !important;}}&.ui-draggable-dragging.quiz-answer{width:calc(100% - 1rem * 2);}"], designTokens.base.color.navy4, designTokens.base.color.navy5, StyledQuizDraggbleOptionHandle, function (_ref3) {
-  var role = _ref3.role;
+})(["display:flex;border-radius:8px;border:1px solid ", ";background-color:", ";overflow:hidden;cursor:", ";&:not(:last-of-type){margin-bottom:1rem;}", "{background-color:", ";color:", ";}", "{background-color:", ";& *{color:", ";}}", "{background-color:", ";color:", ";}&.ui-draggable-dragging{z-index:1000 !important;color:", " !important;border:none !important;", "{background-color:", ";}", "{background-color:", ";border:1px solid ", " !important;}", "{color:", ";background-color:", ";}& *{color:", " !important;}}&.ui-draggable-dragging.quiz-answer{width:calc(100% - 1rem * 2);}"], designTokens.base.color.navy4, designTokens.base.color.navy5, function (_ref3) {
+  var disabled = _ref3.disabled;
+  return disabled ? 'not-allowed !important' : 'auto';
+}, StyledQuizDraggbleOptionHandle, function (_ref4) {
+  var role = _ref4.role;
   switch (role) {
     case 'answer':
       return designTokens.base.color.primary4;
@@ -60,8 +63,8 @@ var StyledQuizDraggbleOption = styled__default.default(EbDraggable.default).with
     default:
       return designTokens.base.color.navy3;
   }
-}, function (_ref4) {
-  var role = _ref4.role;
+}, function (_ref5) {
+  var role = _ref5.role;
   switch (role) {
     case 'answer':
       return designTokens.base.color.primary9;
@@ -73,8 +76,8 @@ var StyledQuizDraggbleOption = styled__default.default(EbDraggable.default).with
     default:
       return designTokens.base.color.navy5;
   }
-}, StyledQuizDraggbleOptionContent, function (_ref5) {
-  var role = _ref5.role;
+}, StyledQuizDraggbleOptionContent, function (_ref6) {
+  var role = _ref6.role;
   switch (role) {
     case 'answer':
       return designTokens.base.color.primary1;
@@ -86,8 +89,8 @@ var StyledQuizDraggbleOption = styled__default.default(EbDraggable.default).with
     default:
       return designTokens.base.color.navy5;
   }
-}, function (_ref6) {
-  var role = _ref6.role;
+}, function (_ref7) {
+  var role = _ref7.role;
   switch (role) {
     case 'answer':
       return designTokens.base.color.primary9;
@@ -99,8 +102,8 @@ var StyledQuizDraggbleOption = styled__default.default(EbDraggable.default).with
     default:
       return designTokens.base.color.navy0;
   }
-}, StyledOrder, function (_ref7) {
-  var role = _ref7.role;
+}, StyledOrder, function (_ref8) {
+  var role = _ref8.role;
   switch (role) {
     case 'answer':
       return designTokens.base.color.primary3;
@@ -112,8 +115,8 @@ var StyledQuizDraggbleOption = styled__default.default(EbDraggable.default).with
     default:
       return designTokens.base.color.navy4;
   }
-}, function (_ref8) {
-  var role = _ref8.role;
+}, function (_ref9) {
+  var role = _ref9.role;
   switch (role) {
     case 'answer':
       return designTokens.base.color.primary9;
@@ -129,17 +132,17 @@ var StyledQuizDraggbleOption = styled__default.default(EbDraggable.default).with
 //
 //
 //
-var QuizDraggbleOption = function QuizDraggbleOption(_ref9) {
-  var id = _ref9.id,
-    className = _ref9.className,
-    content = _ref9.content,
-    _ref9$disabled = _ref9.disabled,
-    disabled = _ref9$disabled === void 0 ? false : _ref9$disabled,
-    _ref9$role = _ref9.role,
-    role = _ref9$role === void 0 ? 'default' : _ref9$role,
-    indexOrder = _ref9.indexOrder,
-    _ref9$isMarkdown = _ref9.isMarkdown,
-    isMarkdown = _ref9$isMarkdown === void 0 ? false : _ref9$isMarkdown;
+var QuizDraggbleOption = function QuizDraggbleOption(_ref10) {
+  var id = _ref10.id,
+    className = _ref10.className,
+    content = _ref10.content,
+    _ref10$disabled = _ref10.disabled,
+    disabled = _ref10$disabled === void 0 ? false : _ref10$disabled,
+    _ref10$role = _ref10.role,
+    role = _ref10$role === void 0 ? 'default' : _ref10$role,
+    indexOrder = _ref10.indexOrder,
+    _ref10$isMarkdown = _ref10.isMarkdown,
+    isMarkdown = _ref10$isMarkdown === void 0 ? false : _ref10$isMarkdown;
   var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
     vertical = _useMaterialQuizState.vertical;
   //

package/es/components/material-quiz/MaterialQuizSelectMultipleOrder.js

@@ -105,7 +105,7 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
   var isNextActive = hasSubmitted && typeof onNext === 'function';
   var isDisabled = (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.correctOptionCount) !== answerList.filter(function (answer) {
     return answer.order !== null;
-  }).length || !!userId;
+  }).length || checkUserLectureTestEnded(lecture) || !!userId;
   var isTestLecture = (lecture === null || lecture === void 0 ? void 0 : lecture.lectureType) === enums.LectureType.Test;
   // ref
   var optionBoxRef = React.useRef(null);
@@ -464,11 +464,11 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
   var renderQuizDragOption = function renderQuizDragOption() {
     return jsxs(StyledQuizOptionsDropZone, {
       id: "quiz-options-dropzone",
-      disabled: !!userId,
+      disabled: isDisabled,
       accept: ".quiz-answer",
       children: [optionList.map(function (option, index) {
         return jsx(QuizDraggbleOption, {
-          disabled: !!userId,
+          disabled: isDisabled,
           id: "quiz-option-".concat(index),
           className: "quiz-option",
           content: option.value,
@@ -525,7 +525,7 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
             id: "option-answer-".concat(index),
             content: option.value,
             role: getRole(),
-            disabled: !!userId,
+            disabled: isDisabled,
             indexOrder: index + 1,
             isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
           }, "option-answer-".concat(index));

package/es/components/material-quiz/material-quiz-group/MaterialQuizGroup.js

@@ -9,7 +9,7 @@ import { useTheme } from '@mui/material';
 import cloneDeep from 'lodash-es/cloneDeep';
 import flattenDeep from 'lodash-es/flattenDeep';
 import { MATERIAL_QUIZ_ANSWER_ID, MATERIAL_QUIZ_PASSIVE_ID } from '../../../constant/element.js';
-import { getQuizResult } from '../../../helpers/index.js';
+import { checkUserLectureTestEnded, getQuizResult } from '../../../helpers/index.js';
 import { useCaculatePassage } from '../../../hooks/useCaculatePassage.js';
 import QuestionBox from '../../shared/QuestionBox.js';
 import { useMaterialQuizState, useMaterialQuizDispatch } from '../context/MaterialQuizContext.js';
@@ -31,7 +31,8 @@ var MaterialQuizGroup = function MaterialQuizGroup() {
     materialQuiz = _useMaterialQuizState.materialQuiz,
     userId = _useMaterialQuizState.userId,
     vertical = _useMaterialQuizState.vertical,
-    isLongPassage = _useMaterialQuizState.isLongPassage;
+    isLongPassage = _useMaterialQuizState.isLongPassage,
+    lecture = _useMaterialQuizState.lecture;
   var _useMaterialQuizDispa = useMaterialQuizDispatch(),
     onSubmit = _useMaterialQuizDispa.onSubmit,
     onNext = _useMaterialQuizDispa.onNext,
@@ -71,7 +72,7 @@ var MaterialQuizGroup = function MaterialQuizGroup() {
     hasSubmitted = _React$useState16[0],
     setHasSubmitted = _React$useState16[1];
   var isNextActive = hasSubmitted && typeof onNext === 'function';
-  var isDisabled = !flattenDeep(currentAnswerList).length || !!userId;
+  var isDisabled = !flattenDeep(currentAnswerList).length || checkUserLectureTestEnded(lecture) || !!userId;
   var _useCaculatePassage = useCaculatePassage(),
     questionRef = _useCaculatePassage.questionRef,
     containerRef = _useCaculatePassage.containerRef;
@@ -348,6 +349,7 @@ var MaterialQuizGroup = function MaterialQuizGroup() {
       optionList: optionList,
       currentOptionList: currentOptionList,
       currentAnswerList: currentAnswerList,
+      isDisabled: isDisabled,
       onUpdateAnswer: setCurrentAnswerList,
       onUpdateOption: setCurrentOptionList,
       onUpdateHasSubmitted: setHasSubmitted,

package/es/components/material-quiz/material-quiz-group/MaterialQuizGroupDesktop.js

@@ -56,6 +56,7 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop(_ref3) {
     groupList = _React$useContext.groupList,
     currentAnswerList = _React$useContext.currentAnswerList,
     currentOptionList = _React$useContext.currentOptionList,
+    isDisabled = _React$useContext.isDisabled,
     updateCurrentAnswer = _React$useContext.updateCurrentAnswer,
     updateCurrentOption = _React$useContext.updateCurrentOption,
     handleAnswerReset = _React$useContext.handleAnswerReset;
@@ -114,12 +115,13 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop(_ref3) {
       }), jsx(StyledQuizAnswerDropzone, {
         id: "quiz-answer-dropzone-".concat(dropzoneIndex),
         accept: ".quiz-answer",
-        disabled: !!userId,
+        disabled: isDisabled,
         isGroupAnswer: isGroupAnswer,
         children: isGroupAnswer ? (_b = currentAnswerList[dropzoneIndex]) === null || _b === void 0 ? void 0 : _b.map(function (answer, index) {
           var isHideStatus = !userId && (isActive || isTestLecture);
           var status = isHideStatus ? undefined : getQuizGroupOptionResultStatus(dropzoneIndex, index, answer.order, materialQuizResponse, materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.answerInfo);
           return jsx(MaterialQuizGroupOptionItem, {
+            disabled: isDisabled,
             status: status,
             option: answer
           }, index);
@@ -171,7 +173,7 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop(_ref3) {
         children: [jsx(Button, {
           role: "white",
           size: "small",
-          disabled: !!userId,
+          disabled: isDisabled,
           onClick: handleAnswerReset,
           children: intl.formatMessage({
             id: 'materialQuiz.dropzone.optionReset'
@@ -183,7 +185,8 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop(_ref3) {
           accept: ".quiz-answer",
           children: currentOptionList.length ? currentOptionList.map(function (option, index) {
             return jsx(MaterialQuizGroupOptionItem, {
-              option: option
+              option: option,
+              disabled: isDisabled
             }, index);
           }) : jsx(Flex, {
             justify: "center",

package/es/components/material-quiz/material-quiz-group/MaterialQuizGroupMobile.js

@@ -46,6 +46,7 @@ var MaterialQuizGroupMobile = function MaterialQuizGroupMobile(_ref3) {
   var _React$useContext = React.useContext(QuizGroupContext),
     currentOptionList = _React$useContext.currentOptionList,
     currentAnswerList = _React$useContext.currentAnswerList,
+    isDisabled = _React$useContext.isDisabled,
     updateCurrentAnswer = _React$useContext.updateCurrentAnswer,
     updateCurrentOption = _React$useContext.updateCurrentOption,
     handleAnswerReset = _React$useContext.handleAnswerReset;
@@ -62,7 +63,7 @@ var MaterialQuizGroupMobile = function MaterialQuizGroupMobile(_ref3) {
       children: [jsx(Button, {
         role: "white",
         size: "small",
-        disabled: !!userId,
+        disabled: isDisabled,
         onClick: handleAnswerReset,
         block: true,
         children: intl.formatMessage({
@@ -99,6 +100,7 @@ var MaterialQuizGroupMobile = function MaterialQuizGroupMobile(_ref3) {
               var status = isHideStatus ? undefined : getQuizGroupOptionResultStatus(index, answerIndex, answer.order, materialQuizResponse, materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.answerInfo);
               return jsx(MaterialQuizGroupOptionItem, {
                 option: answer,
+                disabled: isDisabled,
                 status: status,
                 onClose: function onClose() {
                   var targetId = answer.order;
@@ -151,7 +153,8 @@ var MaterialQuizGroupMobile = function MaterialQuizGroupMobile(_ref3) {
               updateCurrentAnswer(targetId, dropzoneIndex);
             },
             children: jsx(MaterialQuizGroupOptionItem, {
-              option: option
+              option: option,
+              disabled: isDisabled
             }, index)
           }, index);
         }) : jsx(Text, {

package/es/components/material-quiz/material-quiz-group/MaterialQuizGroupOptionItem.d.ts

@@ -3,6 +3,7 @@ import type { QuizGroupOption } from './context/context';
 type Status = 'correct' | 'wrong' | 'answer';
 interface MaterialQuizGroupOptionProps {
     option: QuizGroupOption;
+    disabled?: boolean;
     status?: Status;
     onClose?: () => void;
 }

package/es/components/material-quiz/material-quiz-group/MaterialQuizGroupOptionItem.js

@@ -32,20 +32,23 @@ var StyledDraggbleOption = /*#__PURE__*/_styled(EbDraggable, {
     default:
       return '3px solid transparent';
   }
+}, ";cursor:", function (_ref4) {
+  var disabled = _ref4.disabled;
+  return disabled ? 'not-allowed !important' : 'auto';
 }, ";");
 var StyledOptionTitle = /*#__PURE__*/_styled("div", {
   target: "ex64yhy2"
-})("display:flex;justify-content:center;align-items:center;width:", function (_ref4) {
-  var vertical = _ref4.vertical,
-    isOptionContent = _ref4.isOptionContent;
-  return isOptionContent ? '100%' : vertical ? '10.25rem' : '11.5rem';
-}, ";height:", function (_ref5) {
+})("display:flex;justify-content:center;align-items:center;width:", function (_ref5) {
   var vertical = _ref5.vertical,
     isOptionContent = _ref5.isOptionContent;
-  return isOptionContent ? 'auto' : vertical ? '10.25rem' : '11.5rem';
-}, ";padding:0.5rem;background:", base.color.white, ";background-color:", function (_ref6) {
-  var status = _ref6.status,
+  return isOptionContent ? '100%' : vertical ? '10.25rem' : '11.5rem';
+}, ";height:", function (_ref6) {
+  var vertical = _ref6.vertical,
     isOptionContent = _ref6.isOptionContent;
+  return isOptionContent ? 'auto' : vertical ? '10.25rem' : '11.5rem';
+}, ";padding:0.5rem;background:", base.color.white, ";background-color:", function (_ref7) {
+  var status = _ref7.status,
+    isOptionContent = _ref7.isOptionContent;
   if (!isOptionContent) {
     return 'auto';
   }
@@ -60,26 +63,27 @@ var StyledOptionTitle = /*#__PURE__*/_styled("div", {
 }, ";");
 var StyledOptionContent = /*#__PURE__*/_styled("div", {
   target: "ex64yhy1"
-})("display:flex;align-items:center;width:", function (_ref7) {
-  var vertical = _ref7.vertical;
-  return vertical ? '10.25rem' : '11.5rem';
-}, ";height:", function (_ref8) {
+})("display:flex;align-items:center;width:", function (_ref8) {
   var vertical = _ref8.vertical;
   return vertical ? '10.25rem' : '11.5rem';
+}, ";height:", function (_ref9) {
+  var vertical = _ref9.vertical;
+  return vertical ? '10.25rem' : '11.5rem';
 }, ";background:", base.color.navy8, ";& p{line-height:1;}");
 var StyledIconButton = /*#__PURE__*/_styled(IconButton, {
   target: "ex64yhy0"
-})("border-radius:50%;width:1.5rem;height:1.5rem;position:absolute;top:0.5rem;right:0.5rem;background-color:", function (_ref9) {
-  var theme = _ref9.theme;
+})("border-radius:50%;width:1.5rem;height:1.5rem;position:absolute;top:0.5rem;right:0.5rem;background-color:", function (_ref10) {
+  var theme = _ref10.theme;
   return theme.palette.action.active;
 }, ";align-self:flex-end;");
 //
 //
 //
-var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref10) {
-  var option = _ref10.option,
-    status = _ref10.status,
-    onClose = _ref10.onClose;
+var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref11) {
+  var option = _ref11.option,
+    status = _ref11.status,
+    disabled = _ref11.disabled,
+    onClose = _ref11.onClose;
   var _a;
   var _useMaterialQuizState = useMaterialQuizState(),
     vertical = _useMaterialQuizState.vertical,
@@ -110,7 +114,7 @@ var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref10) {
   //
   //
   return jsxs(StyledDraggbleOption, {
-    disabled: !!userId || vertical,
+    disabled: disabled || vertical,
     id: option.order.toString(),
     className: "quiz-answer",
     vertical: vertical,

package/es/components/material-quiz/material-quiz-group/context/context.d.ts

@@ -11,6 +11,7 @@ interface QuizGroupContextValue {
     optionList: QuizGroupOption[];
     currentOptionList: QuizGroupOption[];
     currentAnswerList: QuizGroupOption[][];
+    isDisabled: boolean;
     onDirty: (value: boolean) => void;
     onUpdateAnswer: (value: React.SetStateAction<QuizGroupOption[][]>) => void;
     onUpdateOption: (value: React.SetStateAction<QuizGroupOption[]>) => void;

package/es/components/shared/QuizDraggbleOption.js

@@ -39,8 +39,11 @@ var StyledOrder = styled.div.withConfig({
 })(["width:1.5rem;height:1.5rem;display:flex;border-radius:4px;align-items:center;justify-content:center;color:", ";background-color:", ";flex:none;margin-left:0.5rem;"], base.color.navy0, base.color.navy4);
 var StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
   componentId: "sc-19b0zkq-3"
-})(["display:flex;border-radius:8px;border:1px solid ", ";background-color:", ";overflow:hidden;&:not(:last-of-type){margin-bottom:1rem;}", "{background-color:", ";color:", ";}", "{background-color:", ";& *{color:", ";}}", "{background-color:", ";color:", ";}&.ui-draggable-dragging{z-index:1000 !important;color:", " !important;border:none !important;", "{background-color:", ";}", "{background-color:", ";border:1px solid ", " !important;}", "{color:", ";background-color:", ";}& *{color:", " !important;}}&.ui-draggable-dragging.quiz-answer{width:calc(100% - 1rem * 2);}"], base.color.navy4, base.color.navy5, StyledQuizDraggbleOptionHandle, function (_ref3) {
-  var role = _ref3.role;
+})(["display:flex;border-radius:8px;border:1px solid ", ";background-color:", ";overflow:hidden;cursor:", ";&:not(:last-of-type){margin-bottom:1rem;}", "{background-color:", ";color:", ";}", "{background-color:", ";& *{color:", ";}}", "{background-color:", ";color:", ";}&.ui-draggable-dragging{z-index:1000 !important;color:", " !important;border:none !important;", "{background-color:", ";}", "{background-color:", ";border:1px solid ", " !important;}", "{color:", ";background-color:", ";}& *{color:", " !important;}}&.ui-draggable-dragging.quiz-answer{width:calc(100% - 1rem * 2);}"], base.color.navy4, base.color.navy5, function (_ref3) {
+  var disabled = _ref3.disabled;
+  return disabled ? 'not-allowed !important' : 'auto';
+}, StyledQuizDraggbleOptionHandle, function (_ref4) {
+  var role = _ref4.role;
   switch (role) {
     case 'answer':
       return base.color.primary4;
@@ -52,8 +55,8 @@ var StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
     default:
       return base.color.navy3;
   }
-}, function (_ref4) {
-  var role = _ref4.role;
+}, function (_ref5) {
+  var role = _ref5.role;
   switch (role) {
     case 'answer':
       return base.color.primary9;
@@ -65,8 +68,8 @@ var StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
     default:
       return base.color.navy5;
   }
-}, StyledQuizDraggbleOptionContent, function (_ref5) {
-  var role = _ref5.role;
+}, StyledQuizDraggbleOptionContent, function (_ref6) {
+  var role = _ref6.role;
   switch (role) {
     case 'answer':
       return base.color.primary1;
@@ -78,8 +81,8 @@ var StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
     default:
       return base.color.navy5;
   }
-}, function (_ref6) {
-  var role = _ref6.role;
+}, function (_ref7) {
+  var role = _ref7.role;
   switch (role) {
     case 'answer':
       return base.color.primary9;
@@ -91,8 +94,8 @@ var StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
     default:
       return base.color.navy0;
   }
-}, StyledOrder, function (_ref7) {
-  var role = _ref7.role;
+}, StyledOrder, function (_ref8) {
+  var role = _ref8.role;
   switch (role) {
     case 'answer':
       return base.color.primary3;
@@ -104,8 +107,8 @@ var StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
     default:
       return base.color.navy4;
   }
-}, function (_ref8) {
-  var role = _ref8.role;
+}, function (_ref9) {
+  var role = _ref9.role;
   switch (role) {
     case 'answer':
       return base.color.primary9;
@@ -121,17 +124,17 @@ var StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
 //
 //
 //
-var QuizDraggbleOption = function QuizDraggbleOption(_ref9) {
-  var id = _ref9.id,
-    className = _ref9.className,
-    content = _ref9.content,
-    _ref9$disabled = _ref9.disabled,
-    disabled = _ref9$disabled === void 0 ? false : _ref9$disabled,
-    _ref9$role = _ref9.role,
-    role = _ref9$role === void 0 ? 'default' : _ref9$role,
-    indexOrder = _ref9.indexOrder,
-    _ref9$isMarkdown = _ref9.isMarkdown,
-    isMarkdown = _ref9$isMarkdown === void 0 ? false : _ref9$isMarkdown;
+var QuizDraggbleOption = function QuizDraggbleOption(_ref10) {
+  var id = _ref10.id,
+    className = _ref10.className,
+    content = _ref10.content,
+    _ref10$disabled = _ref10.disabled,
+    disabled = _ref10$disabled === void 0 ? false : _ref10$disabled,
+    _ref10$role = _ref10.role,
+    role = _ref10$role === void 0 ? 'default' : _ref10$role,
+    indexOrder = _ref10.indexOrder,
+    _ref10$isMarkdown = _ref10.isMarkdown,
+    isMarkdown = _ref10$isMarkdown === void 0 ? false : _ref10$isMarkdown;
   var _useMaterialQuizState = useMaterialQuizState(),
     vertical = _useMaterialQuizState.vertical;
   //

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-quiz",
-  "version": "1.241127.0",
+  "version": "1.241128.0",
   "description": "User view and editing components of Elice material quiz",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -65,19 +65,19 @@
   "devDependencies": {
     "@dnd-kit/core": "^6.1.0",
     "@elice/file-client": "^1.241120.0-quizimage.0",
-    "@elice/api-client": "^1.241120.0-quizimage.0",
+    "@elice/api-client": "^1.241127.0",
     "@elice/blocks": "1.241007.0",
     "@elice/design-tokens": "^1.220803.0",
     "@elice/icons": "^1.230814.0",
     "@elice/icons-legacy": "npm:@elice/icons@0.230814.0",
-    "@elice/intl": "0.240710.0",
+    "@elice/intl": "0.241127.0",
     "@elice/markdown": "1.241015.0",
-    "@elice/material-shared-types": "1.241127.0",
-    "@elice/material-shared-utils": "1.241127.0",
+    "@elice/material-shared-types": "1.241128.0",
+    "@elice/material-shared-utils": "1.241128.0",
     "@elice/mui-elements": "^5.240820.0",
     "@elice/mui-system": "^5.240820.0",
     "@elice/openapi-client-course": "^1.230814.0",
-    "@elice/types": "1.241120.0-quizimage.0",
+    "@elice/types": "1.241127.0",
     "@elice/wysiwyg": "1.241015.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",