@elice/material-quiz 1.241007.0-aidt.8 → 1.241007.0-focusring.0

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

@@ -35,7 +35,6 @@ 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,7 +19,6 @@ 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');
@@ -250,8 +249,7 @@ var MaterialQuizSelectMultiple = function MaterialQuizSelectMultiple(_ref) {
               var materialQuizResponseAnswer = materialQuizResponse.answer;
               return (_a = materialQuizResponseAnswer.includes(index)) !== null && _a !== void 0 ? _a : false;
             };
-            var checked = selectedAnswer.includes(index$1);
-            var status = !checked ? undefined : index.getQuizSelectMultipleOptionResultStatus(index$1, materialQuizResponse) || index.getOptionStatus({
+            var status = index.getOptionStatus({
               materialQuizResponse: materialQuizResponse,
               isSelected: getIsSelected(index$1, materialQuizResponse),
               isActive: isActive

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

@@ -1,15 +1,4 @@
 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,11 +505,10 @@ 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 = (_a = index.getQuizSelectMultipleOrderOptionResultStatus(option, materialQuizResponse)) !== null && _a !== void 0 ? _a : index.getQuizResultStatus(materialQuizResponse);
+          var status = index.getQuizResultStatus(materialQuizResponse);
           switch (status) {
             case index.QuizResultStatus.Correct:
               return 'correct';

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

@@ -19,7 +19,6 @@ 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/locales/th.json.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var th = {"materialQuiz.anchorLabel.question":"ทางเดิน","materialQuiz.anchorLabel.answer":"ดคำตอบ","materialQuiz.error":"ไม่สามารถดึงควิซได้","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 th = {"materialQuiz.anchorLabel.question":"ทางเดิน","materialQuiz.anchorLabel.answer":"ดคำตอบ","materialQuiz.error":"เกิดข้อผิดพลาดในการโหลดข้อสอบ กรุณาลองอีกครั้งในภายหลัง","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 = th;

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

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

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

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

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

@@ -10,7 +10,6 @@ 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');
@@ -52,9 +51,7 @@ var StyledQuizOptionsDropzone = styled__default.default(EbDroppable.default).wit
 //
 //
 //
-var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop(_ref3) {
-  var isActive = _ref3.isActive,
-    materialQuizResponse = _ref3.materialQuizResponse;
+var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop() {
   var intl$1 = intl.useRawEliceIntl();
   var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
     userId = _useMaterialQuizState.userId;
@@ -121,12 +118,10 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop(_ref3) {
         accept: ".quiz-answer",
         disabled: !!userId,
         isGroupAnswer: isGroupAnswer,
-        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);
+        children: isGroupAnswer ? (_b = currentAnswerList[dropzoneIndex]) === null || _b === void 0 ? void 0 : _b.map(function (answer, index) {
           return jsxRuntime.jsx(MaterialQuizGroupOptionItem.default, {
-            status: status,
             option: answer
-          }, index$1);
+          }, index);
         }) : jsxRuntime.jsx(blocks.Text, {
           role: "gray5",
           bold: true,

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

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

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

@@ -9,7 +9,6 @@ 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');
@@ -19,9 +18,6 @@ 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);
@@ -41,9 +37,7 @@ var StyledBottomSheetWrapper = styled__default.default(StyledQuizOptionList).wit
     isCurrentOptionList = _ref2.isCurrentOptionList;
   return vertical && isCurrentOptionList ? 'flex-start' : 'center';
 });
-var MaterialQuizGroupMobile = function MaterialQuizGroupMobile(_ref3) {
-  var isActive = _ref3.isActive,
-    materialQuizResponse = _ref3.materialQuizResponse;
+var MaterialQuizGroupMobile = function MaterialQuizGroupMobile() {
   var intl$1 = intl.useRawEliceIntl();
   // context
   var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
@@ -85,12 +79,12 @@ var MaterialQuizGroupMobile = function MaterialQuizGroupMobile(_ref3) {
   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$1) {
+      children: (_a = materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.groups) === null || _a === void 0 ? void 0 : _a.map(function (group, index) {
         var _a;
-        var isCurrentOptionList = Boolean((_a = currentAnswerList === null || currentAnswerList === void 0 ? void 0 : currentAnswerList[index$1]) === null || _a === void 0 ? void 0 : _a.length);
+        var isCurrentOptionList = Boolean((_a = currentAnswerList === null || currentAnswerList === void 0 ? void 0 : currentAnswerList[index]) === null || _a === void 0 ? void 0 : _a.length);
         return jsxRuntime.jsxs(StyledQuizGroupWrapper, {
           onClick: function onClick() {
-            return setDropzoneIndex(index$1);
+            return setDropzoneIndex(index);
           },
           children: [jsxRuntime.jsx(blocks.Text, {
             size: "small",
@@ -100,11 +94,9 @@ var MaterialQuizGroupMobile = function MaterialQuizGroupMobile(_ref3) {
             height: 0.5
           }), jsxRuntime.jsx(StyledQuizOptionList, {
             isCurrentOptionList: isCurrentOptionList,
-            children: isCurrentOptionList ? currentAnswerList[index$1].map(function (answer, answerIndex) {
-              var status = isActive ? undefined : index.getQuizGroupOptionResultStatus(index$1, answerIndex, materialQuizResponse);
+            children: isCurrentOptionList ? currentAnswerList[index].map(function (answer) {
               return jsxRuntime.jsx(MaterialQuizGroupOptionItem.default, {
                 option: answer,
-                status: status,
                 onClose: function onClose() {
                   var targetId = answer.order;
                   updateCurrentOption(targetId);
@@ -121,7 +113,7 @@ var MaterialQuizGroupMobile = function MaterialQuizGroupMobile(_ref3) {
               })
             })
           })]
-        }, index$1);
+        }, index);
       })
     });
   };

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

@@ -1,9 +1,7 @@
 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,92 +2,55 @@
 
 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 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 styled = require('styled-components');
 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 = /*#__PURE__*/_styled__default.default(EbDraggable.default, {
-  target: "ex64yhy3"
-})("display:flex;flex-direction:column;flex-shrink:", function (_ref) {
+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 vertical = _ref.vertical;
   return vertical ? 0 : 1;
-}, ";overflow:hidden;max-width:", function (_ref2) {
+}, function (_ref2) {
   var vertical = _ref2.vertical;
   return vertical ? '10.25rem' : '11.5rem';
-}, ";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) {
+}, 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) {
   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';
-}, ";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;
+}, 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;
   return vertical ? '10.25rem' : '11.5rem';
-}, ";height:", function (_ref8) {
-  var vertical = _ref8.vertical;
+}, function (_ref6) {
+  var vertical = _ref6.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:relative;top:0.5rem;right:0.5rem;background-color:", function (_ref9) {
-  var theme = _ref9.theme;
-  return theme.palette.action.active;
-}, ";");
-//
-//
-//
-var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref10) {
-  var option = _ref10.option,
-    status = _ref10.status,
-    onClose = _ref10.onClose;
+}, 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;
   var _a;
   var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
     vertical = _useMaterialQuizState.vertical,
@@ -101,17 +64,14 @@ var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref10) {
     if (!!userId) {
       return null;
     }
-    return jsxRuntime.jsx(StyledIconButton, {
-      size: "small",
-      color: "inverse",
+    return jsxRuntime.jsx(StyledOptionRemoveIcon, {
+      icon: icons.eilMathsignMultiplyBasic,
+      role: "gray1",
+      size: "micro",
       onClick: function onClick(e) {
         e.stopPropagation();
         onClose();
-      },
-      children: jsxRuntime.jsx(muiElements.EliceIcon, {
-        icon: proSolidSvgIcons.faXmark,
-        fontSize: "inherit"
-      })
+      }
     });
   };
   //
@@ -122,13 +82,7 @@ var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref10) {
     id: option.order.toString(),
     className: "quiz-answer",
     vertical: vertical,
-    status: status,
-    children: [jsxRuntime.jsx(material.Stack, {
-      width: "100%",
-      direction: "row",
-      justifyContent: "flex-end",
-      children: renderRemoveItem()
-    }), isOptionContent ? jsxRuntime.jsx(StyledOptionContent, {
+    children: [isOptionContent ? jsxRuntime.jsx(StyledOptionContent, {
       vertical: vertical,
       children: jsxRuntime.jsx(markdown.MarkdownSSR, {
         children: (_a = index.addAltTextToImage(option.options)) !== null && _a !== void 0 ? _a : '',
@@ -138,19 +92,15 @@ var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref10) {
       })
     }) : null, isOptionTitle ? jsxRuntime.jsx(StyledOptionTitle, {
       vertical: vertical,
-      status: status,
       isOptionContent: isOptionContent,
-      children: jsxRuntime.jsx(material.Typography, {
-        variant: vertical ? 'body2' : 'body1',
+      children: jsxRuntime.jsx(blocks.Text, {
+        size: vertical ? 'small' : 'default',
         textAlign: "center",
-        fontWeight: "bold",
-        color: status === 'correct' ? 'success.main' : status === 'wrong' ? 'error.main' : 'unset',
-        sx: {
-          wordBreak: 'break-all'
-        },
+        wordBreak: "break-all",
+        bold: true,
         children: option.options.title
       })
-    }) : null]
+    }) : null, renderRemoveItem()]
   });
 };
 

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

@@ -2,10 +2,9 @@ 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 extends MaterialQuizApiProviderProps {
+export interface MaterialQuizEditProps {
     /** Value of material quiz edit form. */
     value: MaterialQuizEditValue;
     /**

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

@@ -7,14 +7,6 @@ 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');
@@ -26,8 +18,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var MaterialQuizEdit = React.forwardRef(function (_ref, ref) {
-  var eliceCourseApiConfiguration = _ref.eliceCourseApiConfiguration,
-    value = _ref.value,
+  var value = _ref.value,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     onChange = _ref.onChange,
@@ -91,21 +82,18 @@ var MaterialQuizEdit = React.forwardRef(function (_ref, ref) {
   //
   //
   //
-  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, {})
-          }))
-        })
+  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, {})
+        }))
       })
     })
   });