@elice/material-quiz 1.241010.0 → 1.241015.0

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

@@ -35,6 +35,7 @@ var MaterialQuizAnswerExplanation = function MaterialQuizAnswerExplanation() {
     margintop: "1rem",
     children: jsxRuntime.jsx(StyledAccordion, {
       dark: true,
+      defaultExpanded: true,
       header: jsxRuntime.jsx(blocks.Text, {
         bold: true,
         role: "navy0",

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

@@ -19,6 +19,7 @@ require('../shared/question-radio/QuestionRadio.js');
 require('../shared/question-radio/QuestionRadioOption.js');
 var QuestionCheckbox = require('../shared/question-checkbox/QuestionCheckbox.js');
 var QuestionCheckboxOption = require('../shared/question-checkbox/QuestionCheckboxOption.js');
+require('../shared/contexts/MaterialQuizApiContext.js');
 var QuestionBox = require('../shared/QuestionBox.js');
 var StyledMarkdown = require('../shared/StyledMarkdown.js');
 var MaterialQuizContext = require('./context/MaterialQuizContext.js');
@@ -249,7 +250,8 @@ var MaterialQuizSelectMultiple = function MaterialQuizSelectMultiple(_ref) {
               var materialQuizResponseAnswer = materialQuizResponse.answer;
               return (_a = materialQuizResponseAnswer.includes(index)) !== null && _a !== void 0 ? _a : false;
             };
-            var status = index.getOptionStatus({
+            var checked = selectedAnswer.includes(index$1);
+            var status = !checked ? undefined : index.getQuizSelectMultipleOptionResultStatus(index$1, materialQuizResponse) || index.getOptionStatus({
               materialQuizResponse: materialQuizResponse,
               isSelected: getIsSelected(index$1, materialQuizResponse),
               isActive: isActive

package/cjs/components/material-quiz/MaterialQuizSelectMultipleOrder.d.ts

@@ -1,4 +1,15 @@
 import React from 'react';
+interface Option {
+    initialOrder: number;
+    order: number;
+    value: string;
+}
+interface Dummy {
+    initialOrder: null;
+    order: null;
+    value: null;
+}
+export type Answer = Option | Dummy;
 declare const MaterialQuizSelectMultipleOrder: React.FC<{
     hasInlinePassage: boolean;
 }>;

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

@@ -505,10 +505,11 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
     return jsxRuntime.jsx(StyledQuizAnswersDropZone, {
       children: answerList.map(function (option, index$1) {
         var getRole = function getRole() {
+          var _a;
           if (isActive) {
             return 'default';
           }
-          var status = index.getQuizResultStatus(materialQuizResponse);
+          var status = (_a = index.getQuizSelectMultipleOrderOptionResultStatus(option, materialQuizResponse)) !== null && _a !== void 0 ? _a : index.getQuizResultStatus(materialQuizResponse);
           switch (status) {
             case index.QuizResultStatus.Correct:
               return 'correct';

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

@@ -19,6 +19,7 @@ var QuestionRadio = require('../shared/question-radio/QuestionRadio.js');
 var QuestionRadioOption = require('../shared/question-radio/QuestionRadioOption.js');
 require('../shared/question-checkbox/QuestionCheckbox.js');
 require('../shared/question-checkbox/QuestionCheckboxOption.js');
+require('../shared/contexts/MaterialQuizApiContext.js');
 var QuestionBox = require('../shared/QuestionBox.js');
 var StyledMarkdown = require('../shared/StyledMarkdown.js');
 var MaterialQuizContext = require('./context/MaterialQuizContext.js');

package/cjs/components/material-quiz/locales/ko.json.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var messageKo = {"materialQuiz.anchorLabel.question":"지문","materialQuiz.anchorLabel.answer":"답안","materialQuiz.error":"퀴즈를 불러오는데 실패했습니다.\n잠시 후 다시 시도해주세요.","materialQuiz.submit":"제출","materialQuiz.resubmit":"다시 제출","materialQuiz.submittedAnswer":"제출한 답","materialQuiz.answer":"정답","materialQuiz.next":"다음 문제로 이동 >","materialQuiz.selectOne.answer.title":"아래 보기에서 골라주세요.","materialQuiz.selectMultiple.answer.title":"아래 보기에서 골라주세요. (중복 선택 가능)","materialQuiz.selectMultipleOrder.answer.title":"답안을 드래그 앤 드롭하세요.","materialQuiz.text.answer.title":"답안을 작성해 주세요.","materialQuiz.empty.title":"퀴즈가 준비 중 입니다.","materialQuiz.empty.description":"퀴즈 게시 후 다시 확인해주세요!","materialQuiz.survey.empty.title":"설문조사 준비 중 입니다.","materialQuiz.survey.empty.description":"설문지 게시 후 다시 확인해주세요!","materialQuiz.submitStatus.success":"제출되었습니다.","materialQuiz.submitStatus.failure":"제출에 실패하였습니다.","materialQuiz.resultStatus.correct":"정답","materialQuiz.resultStatus.wrong":"다시 한번 풀어보세요.","materialQuiz.resultStatus.submitted":"제출완료","materialQuiz.explanation.close":"퀴즈해설 닫기","materialQuiz.explanation.show":"퀴즈 해설 보기","materialQuiz.explanation.empty":"작성된 해설이 없습니다.","materialQuiz.text.placeholder":"답안을 작성해 주세요.","materialQuiz.text.correct":"정답입니다.","materialQuiz.text.wrong":"오답입니다. 다시 답안을 제출해보세요.","materialQuiz.order.answerEmpty":"항목을 다시 이곳으로 옮길 수 있습니다.","materialQuiz.bottomSheet.title":"보기","materialQuiz.bottomSheet.optionEmpty":"모든 보기를 그룹에 배치하였습니다.","materialQuiz.dropzone.desktop.answerEmpty":"보기를 영역에 끌어 넣어주세요.","materialQuiz.dropzone.mobile.answerEmpty":"이곳을 클릭하여 보기를 넣어주세요.","materialQuiz.dropzone.optionEmpty":"보기","materialQuiz.dropzone.optionReset":"답안 초기화"};
+var messageKo = {"materialQuiz.anchorLabel.question":"지문","materialQuiz.anchorLabel.answer":"답안","materialQuiz.error":"퀴즈를 불러오는데 실패했습니다.\n잠시 후 다시 시도해주세요.","materialQuiz.submit":"제출","materialQuiz.resubmit":"다시 제출","materialQuiz.submittedAnswer":"제출한 답","materialQuiz.answer":"정답","materialQuiz.next":"다음 문제로 이동 >","materialQuiz.selectOne.answer.title":"아래 보기에서 골라주세요.","materialQuiz.selectMultiple.answer.title":"아래 보기에서 골라주세요. (중복 선택 가능)","materialQuiz.selectMultipleOrder.answer.title":"답안을 드래그 앤 드롭하세요.","materialQuiz.text.answer.title":"답안을 작성해 주세요.","materialQuiz.empty.title":"퀴즈가 준비 중 입니다.","materialQuiz.empty.description":"퀴즈 게시 후 다시 확인해주세요!","materialQuiz.survey.empty.title":"설문조사 준비 중 입니다.","materialQuiz.survey.empty.description":"설문지 게시 후 다시 확인해주세요!","materialQuiz.submitStatus.success":"제출되었습니다.","materialQuiz.submitStatus.failure":"제출에 실패하였습니다.","materialQuiz.resultStatus.correct":"정답","materialQuiz.resultStatus.wrong":"다시 한번 풀어보세요.","materialQuiz.resultStatus.submitted":"제출완료","materialQuiz.explanation.close":"퀴즈해설 닫기","materialQuiz.explanation.show":"퀴즈 해설 보기","materialQuiz.explanation.empty":"작성된 해설이 없습니다.","materialQuiz.text.placeholder":"답안을 작성해 주세요.","materialQuiz.text.correct":"정답입니다.","materialQuiz.text.wrong":"오답입니다. 다시 답안을 제출해보세요.","materialQuiz.order.answerEmpty":"항목을 다시 이곳으로 옮길 수 있습니다.","materialQuiz.bottomSheet.title":"보기","materialQuiz.bottomSheet.optionEmpty":"모든 보기를 그룹에 배치하였습니다.","materialQuiz.dropzone.desktop.answerEmpty":"보기를 영역에 끌어 넣어 주세요.","materialQuiz.dropzone.mobile.answerEmpty":"이곳을 클릭하여 보기를 넣어 주세요.","materialQuiz.dropzone.optionEmpty":"보기","materialQuiz.dropzone.optionReset":"답안 초기화"};
 
 exports.default = messageKo;

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

@@ -64,18 +64,22 @@ var MaterialQuizGroup = function MaterialQuizGroup() {
     _React$useState8 = _rollupPluginBabelHelpers.slicedToArray(_React$useState7, 2),
     currentOptionList = _React$useState8[0],
     setCurrentOptionList = _React$useState8[1];
-  var _React$useState9 = React__default.default.useState(),
+  var _React$useState9 = React__default.default.useState(false),
     _React$useState10 = _rollupPluginBabelHelpers.slicedToArray(_React$useState9, 2),
-    materialQuizResponse = _React$useState10[0],
-    setMaterialQuizResponse = _React$useState10[1];
-  var _React$useState11 = React__default.default.useState('idle'),
+    isActive = _React$useState10[0],
+    setIsActive = _React$useState10[1];
+  var _React$useState11 = React__default.default.useState(),
     _React$useState12 = _rollupPluginBabelHelpers.slicedToArray(_React$useState11, 2),
-    submitStatus = _React$useState12[0],
-    setSubmitStatus = _React$useState12[1];
-  var _React$useState13 = React__default.default.useState(false),
+    materialQuizResponse = _React$useState12[0],
+    setMaterialQuizResponse = _React$useState12[1];
+  var _React$useState13 = React__default.default.useState('idle'),
     _React$useState14 = _rollupPluginBabelHelpers.slicedToArray(_React$useState13, 2),
-    hasSubmitted = _React$useState14[0],
-    setHasSubmitted = _React$useState14[1];
+    submitStatus = _React$useState14[0],
+    setSubmitStatus = _React$useState14[1];
+  var _React$useState15 = React__default.default.useState(false),
+    _React$useState16 = _rollupPluginBabelHelpers.slicedToArray(_React$useState15, 2),
+    hasSubmitted = _React$useState16[0],
+    setHasSubmitted = _React$useState16[1];
   var isNextActive = hasSubmitted && typeof onNext === 'function';
   var isDisabled = !flattenDeep__default.default(currentAnswerList).length || !!userId;
   var _useCaculatePassage = useCaculatePassage.useCaculatePassage(),
@@ -182,19 +186,20 @@ var MaterialQuizGroup = function MaterialQuizGroup() {
             onSubmit(true, index.getQuizResult(quizResponse));
             setSubmitStatus('resolved');
             onDirty(false);
-            _context.next = 25;
+            setIsActive(false);
+            _context.next = 26;
             break;
-          case 20:
-            _context.prev = 20;
+          case 21:
+            _context.prev = 21;
             _context.t0 = _context["catch"](3);
             console.error(_context.t0);
             onSubmit(false);
             setSubmitStatus('rejected');
-          case 25:
+          case 26:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[3, 20]]);
+      }, _callee, null, [[3, 21]]);
     }));
     return function handleSubmit() {
       return _ref.apply(this, arguments);
@@ -243,6 +248,7 @@ var MaterialQuizGroup = function MaterialQuizGroup() {
     });
     onDirty(true);
     setHasSubmitted(false);
+    setIsActive(true);
   };
   /**
    *
@@ -271,6 +277,7 @@ var MaterialQuizGroup = function MaterialQuizGroup() {
       return [].concat(_rollupPluginBabelHelpers.toConsumableArray(prevOptionList), [selectedOption]);
     });
     onDirty(true);
+    setIsActive(true);
   };
   //
   //
@@ -388,9 +395,15 @@ var MaterialQuizGroup = function MaterialQuizGroup() {
       }],
       children: [renderQuizInfo(), vertical || isVisibleSideBySide ? jsxRuntime.jsx("div", {
         id: element.MATERIAL_QUIZ_ANSWER_ID,
-        children: jsxRuntime.jsx(MaterialQuizGroupMobile.default, {})
+        children: jsxRuntime.jsx(MaterialQuizGroupMobile.default, {
+          isActive: isActive,
+          materialQuizResponse: materialQuizResponse
+        })
       }) : jsxRuntime.jsx(jsxRuntime.Fragment, {
-        children: jsxRuntime.jsx(MaterialQuizGroupDesktop.default, {})
+        children: jsxRuntime.jsx(MaterialQuizGroupDesktop.default, {
+          isActive: isActive,
+          materialQuizResponse: materialQuizResponse
+        })
       }), jsxRuntime.jsx(MaterialQuizAnswerExplanation.default, {})]
     })
   });

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

@@ -1,3 +1,8 @@
 import React from 'react';
-declare const MaterialQuizGroupDesktop: React.FC;
+import type { GetOrgMaterialQuizResponseGetResponses } from '@elice/types';
+interface MaterialQuizGroupDesktopProps {
+    isActive: boolean;
+    materialQuizResponse?: GetOrgMaterialQuizResponseGetResponses['quizResponse'];
+}
+declare const MaterialQuizGroupDesktop: React.FC<MaterialQuizGroupDesktopProps>;
 export default MaterialQuizGroupDesktop;

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

@@ -10,6 +10,7 @@ var designTokens = require('@elice/design-tokens');
 var icons = require('@elice/icons');
 var intl = require('@elice/intl');
 var styled = require('styled-components');
+var index = require('../../../helpers/index.js');
 var EbDroppable = require('../../eb-sortable/EbDroppable.js');
 var MaterialQuizContext = require('../context/MaterialQuizContext.js');
 var context = require('./context/context.js');
@@ -51,7 +52,9 @@ var StyledQuizOptionsDropzone = styled__default.default(EbDroppable.default).wit
 //
 //
 //
-var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop() {
+var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop(_ref3) {
+  var isActive = _ref3.isActive,
+    materialQuizResponse = _ref3.materialQuizResponse;
   var intl$1 = intl.useRawEliceIntl();
   var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
     userId = _useMaterialQuizState.userId;
@@ -118,10 +121,12 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop() {
         accept: ".quiz-answer",
         disabled: !!userId,
         isGroupAnswer: isGroupAnswer,
-        children: isGroupAnswer ? (_b = currentAnswerList[dropzoneIndex]) === null || _b === void 0 ? void 0 : _b.map(function (answer, index) {
+        children: isGroupAnswer ? (_b = currentAnswerList[dropzoneIndex]) === null || _b === void 0 ? void 0 : _b.map(function (answer, index$1) {
+          var status = isActive ? undefined : index.getQuizGroupOptionResultStatus(dropzoneIndex, index$1, materialQuizResponse);
           return jsxRuntime.jsx(MaterialQuizGroupOptionItem.default, {
+            status: status,
             option: answer
-          }, index);
+          }, index$1);
         }) : jsxRuntime.jsx(blocks.Text, {
           role: "gray5",
           bold: true,

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

@@ -1,3 +1,8 @@
 import React from 'react';
-declare const MaterialQuizGroupMobile: React.FC;
+import type { GetOrgMaterialQuizResponseGetResponses } from '@elice/types';
+interface MaterialQuizGroupMobileProps {
+    isActive: boolean;
+    materialQuizResponse?: GetOrgMaterialQuizResponseGetResponses['quizResponse'];
+}
+declare const MaterialQuizGroupMobile: React.FC<MaterialQuizGroupMobileProps>;
 export default MaterialQuizGroupMobile;

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

@@ -9,6 +9,7 @@ var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var intl = require('@elice/intl');
 var styled = require('styled-components');
+var index = require('../../../helpers/index.js');
 var MaterialQuizContext = require('../context/MaterialQuizContext.js');
 var context = require('./context/context.js');
 var MaterialQuizGroupOptionItem = require('./MaterialQuizGroupOptionItem.js');
@@ -18,6 +19,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
+//
+//
+//
 var StyledQuizGroupWrapper = styled__default.default.div.withConfig({
   componentId: "sc-bftjpj-0"
 })(["display:flex;flex-direction:column;overflow:hidden;width:100%;padding:1rem;background:", ";border-radius:0.5rem;&:hover{cursor:pointer;}&:not(:last-child){margin-bottom:1rem;}"], designTokens.base.color.white);
@@ -37,7 +41,9 @@ var StyledBottomSheetWrapper = styled__default.default(StyledQuizOptionList).wit
     isCurrentOptionList = _ref2.isCurrentOptionList;
   return vertical && isCurrentOptionList ? 'flex-start' : 'center';
 });
-var MaterialQuizGroupMobile = function MaterialQuizGroupMobile() {
+var MaterialQuizGroupMobile = function MaterialQuizGroupMobile(_ref3) {
+  var isActive = _ref3.isActive,
+    materialQuizResponse = _ref3.materialQuizResponse;
   var intl$1 = intl.useRawEliceIntl();
   // context
   var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
@@ -79,12 +85,12 @@ var MaterialQuizGroupMobile = function MaterialQuizGroupMobile() {
   var renderGroupList = function renderGroupList() {
     var _a;
     return jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: (_a = materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.groups) === null || _a === void 0 ? void 0 : _a.map(function (group, index) {
+      children: (_a = materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.groups) === null || _a === void 0 ? void 0 : _a.map(function (group, index$1) {
         var _a;
-        var isCurrentOptionList = Boolean((_a = currentAnswerList === null || currentAnswerList === void 0 ? void 0 : currentAnswerList[index]) === null || _a === void 0 ? void 0 : _a.length);
+        var isCurrentOptionList = Boolean((_a = currentAnswerList === null || currentAnswerList === void 0 ? void 0 : currentAnswerList[index$1]) === null || _a === void 0 ? void 0 : _a.length);
         return jsxRuntime.jsxs(StyledQuizGroupWrapper, {
           onClick: function onClick() {
-            return setDropzoneIndex(index);
+            return setDropzoneIndex(index$1);
           },
           children: [jsxRuntime.jsx(blocks.Text, {
             size: "small",
@@ -94,9 +100,11 @@ var MaterialQuizGroupMobile = function MaterialQuizGroupMobile() {
             height: 0.5
           }), jsxRuntime.jsx(StyledQuizOptionList, {
             isCurrentOptionList: isCurrentOptionList,
-            children: isCurrentOptionList ? currentAnswerList[index].map(function (answer) {
+            children: isCurrentOptionList ? currentAnswerList[index$1].map(function (answer, answerIndex) {
+              var status = isActive ? undefined : index.getQuizGroupOptionResultStatus(index$1, answerIndex, materialQuizResponse);
               return jsxRuntime.jsx(MaterialQuizGroupOptionItem.default, {
                 option: answer,
+                status: status,
                 onClose: function onClose() {
                   var targetId = answer.order;
                   updateCurrentOption(targetId);
@@ -113,7 +121,7 @@ var MaterialQuizGroupMobile = function MaterialQuizGroupMobile() {
               })
             })
           })]
-        }, index);
+        }, index$1);
       })
     });
   };

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

@@ -1,7 +1,9 @@
 import React from 'react';
 import type { QuizGroupOption } from './context/context';
+type Status = 'correct' | 'wrong' | 'answer';
 interface MaterialQuizGroupOptionProps {
     option: QuizGroupOption;
+    status?: Status;
     onClose?: () => void;
 }
 declare const MaterialQuizGroupOptionItem: React.FC<MaterialQuizGroupOptionProps>;

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

@@ -2,55 +2,92 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
-var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
-var icons = require('@elice/icons');
 var markdown = require('@elice/markdown');
-var styled = require('styled-components');
+var muiElements = require('@elice/mui-elements');
+var muiSystem = require('@elice/mui-system');
+var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
+var material = require('@mui/material');
 var index = require('../../../helpers/index.js');
 var EbDraggable = require('../../eb-sortable/EbDraggable.js');
 var MaterialQuizContext = require('../context/MaterialQuizContext.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 
-var StyledDraggbleOption = styled__default.default(EbDraggable.default).withConfig({
-  componentId: "sc-1b3vxse-0"
-})(["display:flex;flex-direction:column;flex-shrink:", ";overflow:hidden;max-width:", ";height:fit-content;border-radius:0.5rem;background:", ";"], function (_ref) {
+//
+//
+//
+var StyledDraggbleOption = /*#__PURE__*/_styled__default.default(EbDraggable.default, {
+  target: "ex64yhy3"
+})("display:flex;flex-direction:column;position:relative;flex-shrink:", function (_ref) {
   var vertical = _ref.vertical;
   return vertical ? 0 : 1;
-}, function (_ref2) {
+}, ";overflow:hidden;max-width:", function (_ref2) {
   var vertical = _ref2.vertical;
   return vertical ? '10.25rem' : '11.5rem';
-}, designTokens.base.color.navy8);
-var StyledOptionTitle = styled__default.default.div.withConfig({
-  componentId: "sc-1b3vxse-1"
-})(["display:flex;justify-content:center;align-items:center;width:", ";height:", ";padding:0.5rem;background:", ";"], function (_ref3) {
-  var vertical = _ref3.vertical,
-    isOptionContent = _ref3.isOptionContent;
-  return isOptionContent ? '100%' : vertical ? '10.25rem' : '11.5rem';
-}, function (_ref4) {
+}, ";height:fit-content;border-radius:0.75rem;border:", function (_ref3) {
+  var status = _ref3.status,
+    theme = _ref3.theme;
+  switch (status) {
+    case 'correct':
+      return "3px solid ".concat(theme.palette.success.light);
+    case 'wrong':
+      return "3px solid ".concat(theme.palette.error.light);
+    default:
+      return '3px solid transparent';
+  }
+}, ";");
+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) {
+  var vertical = _ref5.vertical,
+    isOptionContent = _ref5.isOptionContent;
   return isOptionContent ? 'auto' : vertical ? '10.25rem' : '11.5rem';
-}, designTokens.base.color.white);
-var StyledOptionContent = styled__default.default.div.withConfig({
-  componentId: "sc-1b3vxse-2"
-})(["display:flex;align-items:center;width:", ";height:", ";background:", ";& p{line-height:1;}"], function (_ref5) {
-  var vertical = _ref5.vertical;
+}, ";padding:0.5rem;background:", designTokens.base.color.white, ";background-color:", function (_ref6) {
+  var status = _ref6.status,
+    isOptionContent = _ref6.isOptionContent;
+  if (!isOptionContent) {
+    return 'auto';
+  }
+  switch (status) {
+    case 'correct':
+      return muiSystem.colors.green[50];
+    case 'wrong':
+      return muiSystem.colors.red[50];
+    default:
+      return 'auto';
+  }
+}, ";");
+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';
-}, function (_ref6) {
-  var vertical = _ref6.vertical;
+}, ";height:", function (_ref8) {
+  var vertical = _ref8.vertical;
   return vertical ? '10.25rem' : '11.5rem';
-}, designTokens.base.color.navy8);
-var StyledOptionRemoveIcon = styled__default.default(blocks.IconButton).withConfig({
-  componentId: "sc-1b3vxse-3"
-})(["position:absolute;top:0.5rem;right:0.5rem;border-radius:1rem;"]);
-var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref7) {
-  var option = _ref7.option,
-    onClose = _ref7.onClose;
+}, ";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;
+  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 _a;
   var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
     vertical = _useMaterialQuizState.vertical,
@@ -64,14 +101,17 @@ var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref7) {
     if (!!userId) {
       return null;
     }
-    return jsxRuntime.jsx(StyledOptionRemoveIcon, {
-      icon: icons.eilMathsignMultiplyBasic,
-      role: "gray1",
-      size: "micro",
+    return jsxRuntime.jsx(StyledIconButton, {
+      size: "small",
+      color: "inverse",
       onClick: function onClick(e) {
         e.stopPropagation();
         onClose();
-      }
+      },
+      children: jsxRuntime.jsx(muiElements.EliceIcon, {
+        icon: proSolidSvgIcons.faXmark,
+        fontSize: "inherit"
+      })
     });
   };
   //
@@ -82,7 +122,8 @@ var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref7) {
     id: option.order.toString(),
     className: "quiz-answer",
     vertical: vertical,
-    children: [isOptionContent ? jsxRuntime.jsx(StyledOptionContent, {
+    status: status,
+    children: [renderRemoveItem(), isOptionContent ? jsxRuntime.jsx(StyledOptionContent, {
       vertical: vertical,
       children: jsxRuntime.jsx(markdown.MarkdownSSR, {
         children: (_a = index.addAltTextToImage(option.options)) !== null && _a !== void 0 ? _a : '',
@@ -92,15 +133,19 @@ var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref7) {
       })
     }) : null, isOptionTitle ? jsxRuntime.jsx(StyledOptionTitle, {
       vertical: vertical,
+      status: status,
       isOptionContent: isOptionContent,
-      children: jsxRuntime.jsx(blocks.Text, {
-        size: vertical ? 'small' : 'default',
+      children: jsxRuntime.jsx(material.Typography, {
+        variant: vertical ? 'body2' : 'body1',
         textAlign: "center",
-        wordBreak: "break-all",
-        bold: true,
+        fontWeight: "bold",
+        color: status === 'correct' ? 'success.main' : status === 'wrong' ? 'error.main' : 'unset',
+        sx: {
+          wordBreak: 'break-all'
+        },
         children: option.options.title
       })
-    }) : null, renderRemoveItem()]
+    }) : null]
   });
 };
 

package/cjs/components/material-quiz-edit/MaterialQuizEdit.d.ts

@@ -2,9 +2,10 @@ import React from 'react';
 import type { MarkdownEditorFileUploadReqFn } from '@elice/markdown';
 import type { GetOrgMaterialQuizGetResponses } from '@elice/types';
 import type { FormState } from 'react-hook-form';
+import type { MaterialQuizApiProviderProps } from '../shared';
 export type MaterialQuizEditValue = Pick<GetOrgMaterialQuizGetResponses['materialQuiz'], 'id' | 'questionTitle' | 'questionDescription' | 'optionType' | 'optionsDefault' | 'answerInfoDefault' | 'answerHint' | 'isAutoGrade' | 'explanationInfo' | 'groups' | 'optionsSetEnabled'>;
 export type MaterialQuizEditFormState = Pick<FormState<Record<string, any>>, 'isDirty' | 'isValid'>;
-export interface MaterialQuizEditProps {
+export interface MaterialQuizEditProps extends MaterialQuizApiProviderProps {
     /** Value of material quiz edit form. */
     value: MaterialQuizEditValue;
     /**

package/cjs/components/material-quiz-edit/MaterialQuizEdit.js

@@ -7,6 +7,14 @@ var React = require('react');
 var reactHookForm = require('react-hook-form');
 var intl = require('@elice/intl');
 var materialSharedUtils = require('@elice/material-shared-utils');
+require('../shared/QuizDraggbleDroppedOption.js');
+require('../shared/QuizDraggbleDummyOption.js');
+require('../shared/QuizDraggbleOption.js');
+require('../shared/question-radio/QuestionRadio.js');
+require('../shared/question-radio/QuestionRadioOption.js');
+require('../shared/question-checkbox/QuestionCheckbox.js');
+require('../shared/question-checkbox/QuestionCheckboxOption.js');
+var MaterialQuizApiContext = require('../shared/contexts/MaterialQuizApiContext.js');
 var editValue = require('./utils/editValue.js');
 var context = require('./context.js');
 var en = require('./locales/en.json.js');
@@ -18,7 +26,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var MaterialQuizEdit = React.forwardRef(function (_ref, ref) {
-  var value = _ref.value,
+  var eliceCourseApiConfiguration = _ref.eliceCourseApiConfiguration,
+    value = _ref.value,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     onChange = _ref.onChange,
@@ -82,18 +91,21 @@ var MaterialQuizEdit = React.forwardRef(function (_ref, ref) {
   //
   //
   //
-  return jsxRuntime.jsx(intl.RawEliceIntlProvider, {
-    value: __intl,
-    children: jsxRuntime.jsx("form", {
-      ref: formElRef,
-      children: jsxRuntime.jsx(context.default.Provider, {
-        value: {
-          disabled: disabled,
-          onFileUploadRequest: onFileUploadRequest
-        },
-        children: jsxRuntime.jsx(reactHookForm.FormProvider, Object.assign({}, useFormMethods, {
-          children: jsxRuntime.jsx(MaterialQuizEditContent.default, {})
-        }))
+  return jsxRuntime.jsx(MaterialQuizApiContext.MaterialQuizApiProvider, {
+    eliceCourseApiConfiguration: eliceCourseApiConfiguration,
+    children: jsxRuntime.jsx(intl.RawEliceIntlProvider, {
+      value: __intl,
+      children: jsxRuntime.jsx("form", {
+        ref: formElRef,
+        children: jsxRuntime.jsx(context.default.Provider, {
+          value: {
+            disabled: disabled,
+            onFileUploadRequest: onFileUploadRequest
+          },
+          children: jsxRuntime.jsx(reactHookForm.FormProvider, Object.assign({}, useFormMethods, {
+            children: jsxRuntime.jsx(MaterialQuizEditContent.default, {})
+          }))
+        })
       })
     })
   });