@elice/material-quiz 1.240718.0-trasncript.2 → 1.240718.2

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

@@ -2,8 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
@@ -26,92 +24,80 @@ var MaterialQuizInfo = require('./MaterialQuizInfo.js');
 var QuizResultBadge = require('./QuizResultBadge.js');
 var QuizSubmitStatusText = require('./QuizSubmitStatusText.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-var StyledVerticalDivider = styled__default.default.div.withConfig({
+const StyledVerticalDivider = styled.div.withConfig({
   componentId: "sc-10067nt-0"
-})(["display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none !important;padding:1rem;", ""], function (_ref) {
-  var vertical = _ref.vertical;
-  return vertical ? "\n          display: none;\n        " : '';
+})(["display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none !important;padding:1rem;", ""], ({
+  vertical
+}) => {
+  return vertical ? `
+          display: none;
+        ` : '';
 });
-var StyledHorizontalDivider = styled__default.default.hr.withConfig({
+const StyledHorizontalDivider = styled.hr.withConfig({
   componentId: "sc-10067nt-1"
-})(["display:none;", ""], function (_ref2) {
-  var vertical = _ref2.vertical;
-  return vertical ? "\n          display: block;\n          margin: 1rem 0;\n          width: 100%;\n          border: solid 1px ".concat(designTokens.base.color.navy5, ";\n        ") : '';
+})(["display:none;", ""], ({
+  vertical
+}) => {
+  return vertical ? `
+          display: block;
+          margin: 1rem 0;
+          width: 100%;
+          border: solid 1px ${designTokens.base.color.navy5};
+        ` : '';
 });
-var StyledQuizOptionsDropZone = styled__default.default(EbDroppable.default).withConfig({
+const StyledQuizOptionsDropZone = styled(EbDroppable.default).withConfig({
   componentId: "sc-10067nt-2"
 })(["display:flex;flex-direction:column;flex:1 1 50%;padding:1rem;border-radius:8px;background-color:", ";&.ui-droppable-hover{outline:1px dashed ", ";margin:1px 0;}"], designTokens.base.color.navy7, designTokens.base.color.gray4);
-var StyledQuizAnswersDropZone = styled__default.default.div.withConfig({
+const StyledQuizAnswersDropZone = styled.div.withConfig({
   componentId: "sc-10067nt-3"
 })(["position:relative;display:flex;flex-direction:column;flex:1 1 50%;padding:1rem;border-radius:8px;background-color:", ";"], designTokens.base.color.navy6);
-var StyledOptionBox = styled__default.default.div.withConfig({
+const StyledOptionBox = styled.div.withConfig({
   componentId: "sc-10067nt-4"
-})(["display:flex;", ""], function (_ref3) {
-  var vertical = _ref3.vertical;
-  return vertical ? "\n          flex-direction: column;\n        " : '';
+})(["display:flex;", ""], ({
+  vertical
+}) => {
+  return vertical ? `
+          flex-direction: column;
+        ` : '';
 });
-var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_ref4) {
-  var hasInlinePassage = _ref4.hasInlinePassage;
+const MaterialQuizSelectMultipleOrder = ({
+  hasInlinePassage
+}) => {
   // context
-  var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
-    lecture = _useMaterialQuizState.lecture,
-    materialQuiz = _useMaterialQuizState.materialQuiz,
-    userId = _useMaterialQuizState.userId,
-    vertical = _useMaterialQuizState.vertical,
-    course = _useMaterialQuizState.course;
-  var _useMaterialQuizDispa = MaterialQuizContext.useMaterialQuizDispatch(),
-    onSubmit = _useMaterialQuizDispa.onSubmit,
-    onNext = _useMaterialQuizDispa.onNext,
-    refreshOrgMaterialQuiz = _useMaterialQuizDispa.refreshOrgMaterialQuiz,
-    onDirty = _useMaterialQuizDispa.onDirty;
-  var theme = material.useTheme();
+  const {
+    lecture,
+    materialQuiz,
+    userId,
+    vertical,
+    course
+  } = MaterialQuizContext.useMaterialQuizState();
+  const {
+    onSubmit,
+    onNext,
+    refreshOrgMaterialQuiz,
+    onDirty
+  } = MaterialQuizContext.useMaterialQuizDispatch();
+  const theme = material.useTheme();
   // state
-  var intl$1 = intl.useRawEliceIntl();
-  var _React$useState = React__default.default.useState(),
-    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
-    materialQuizResponse = _React$useState2[0],
-    setMaterialQuizResponse = _React$useState2[1];
-  var _React$useState3 = React__default.default.useState('idle'),
-    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
-    submitStatus = _React$useState4[0],
-    setSubmitStatus = _React$useState4[1];
-  var _React$useState5 = React__default.default.useState(false),
-    _React$useState6 = _rollupPluginBabelHelpers.slicedToArray(_React$useState5, 2),
-    isActive = _React$useState6[0],
-    setIsActive = _React$useState6[1];
-  var _useCaculatePassage = useCaculatePassage.useCaculatePassage(),
-    containerRef = _useCaculatePassage.containerRef,
-    questionRef = _useCaculatePassage.questionRef;
-  var _React$useState7 = React__default.default.useState([]),
-    _React$useState8 = _rollupPluginBabelHelpers.slicedToArray(_React$useState7, 2),
-    optionList = _React$useState8[0],
-    setOptionList = _React$useState8[1];
-  var _React$useState9 = React__default.default.useState([]),
-    _React$useState10 = _rollupPluginBabelHelpers.slicedToArray(_React$useState9, 2),
-    answerList = _React$useState10[0],
-    setAnswerList = _React$useState10[1];
-  var _React$useState11 = React__default.default.useState([]),
-    _React$useState12 = _rollupPluginBabelHelpers.slicedToArray(_React$useState11, 2),
-    correctAnswerList = _React$useState12[0],
-    setCorrectAnswerList = _React$useState12[1];
-  var _React$useState13 = React__default.default.useState(false),
-    _React$useState14 = _rollupPluginBabelHelpers.slicedToArray(_React$useState13, 2),
-    hasSubmitted = _React$useState14[0],
-    setHasSubmitted = _React$useState14[1];
-  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;
+  const intl$1 = intl.useRawEliceIntl();
+  const [materialQuizResponse, setMaterialQuizResponse] = React.useState();
+  const [submitStatus, setSubmitStatus] = React.useState('idle');
+  const [isActive, setIsActive] = React.useState(false);
+  const {
+    containerRef,
+    questionRef
+  } = useCaculatePassage.useCaculatePassage();
+  const [optionList, setOptionList] = React.useState([]);
+  const [answerList, setAnswerList] = React.useState([]);
+  const [correctAnswerList, setCorrectAnswerList] = React.useState([]);
+  const [hasSubmitted, setHasSubmitted] = React.useState(false);
+  const isNextActive = hasSubmitted && typeof onNext === 'function';
+  const isDisabled = (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.correctOptionCount) !== answerList.filter(answer => answer.order !== null).length || !!userId;
   // ref
-  var optionBoxRef = React__default.default.useRef(null);
+  const optionBoxRef = React.useRef(null);
   // to make jquery touchable
-  React__default.default.useEffect(function () {
-    var optionBoxElement = optionBoxRef.current;
+  React.useEffect(() => {
+    const optionBoxElement = optionBoxRef.current;
     if (!optionBoxElement) {
       return;
     }
@@ -120,9 +106,9 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
      * credit: http://stackoverflow.com/a/6141093
      */
     function touchHandler(event) {
-      var touches = event.changedTouches;
-      var first = touches[0];
-      var type = '';
+      const touches = event.changedTouches;
+      const first = touches[0];
+      let type = '';
       switch (event.type) {
         case 'touchstart':
           type = 'mousedown';
@@ -139,7 +125,7 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
       // initMouseEvent(type, canBubble, cancelable, view, clickCount,
       //                screenX, screenY, clientX, clientY, ctrlKey,
       //                altKey, shiftKey, metaKey, button, relatedTarget);
-      var simulatedEvent = document.createEvent('MouseEvent');
+      const simulatedEvent = document.createEvent('MouseEvent');
       simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0 /*left*/, null);
       first.target.dispatchEvent(simulatedEvent);
       event.preventDefault();
@@ -148,7 +134,7 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
     optionBoxElement.addEventListener('touchmove', touchHandler, true);
     optionBoxElement.addEventListener('touchend', touchHandler, true);
     optionBoxElement.addEventListener('touchcancel', touchHandler, true);
-    return function () {
+    return () => {
       optionBoxElement.removeEventListener('touchstart', touchHandler, true);
       optionBoxElement.removeEventListener('touchmove', touchHandler, true);
       optionBoxElement.removeEventListener('touchend', touchHandler, true);
@@ -156,48 +142,44 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
     };
   }, []);
   // quiz response fetcher
-  React__default.default.useEffect(function () {
+  React.useEffect(() => {
     var _a, _b;
     if (!userId && (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.lastQuizResponseId)) {
-      var controller = new AbortController();
-      var signal = controller.signal;
+      const controller = new AbortController();
+      const {
+        signal
+      } = controller;
       apiClient.getOrgMaterialQuizResponseGet({
         quizResponseId: materialQuiz.lastQuizResponseId
       }, {
-        signal: signal
-      }).then(function (response) {
+        signal
+      }).then(response => {
         var _a;
         setMaterialQuizResponse(response.quizResponse);
-        var answer = response.quizResponse.answer; // user submitted
-        var options = (_a = materialQuiz.options) !== null && _a !== void 0 ? _a : []; // options
-        var answerList = answer.map(function (answer) {
+        const answer = response.quizResponse.answer; // user submitted
+        const options = (_a = materialQuiz.options) !== null && _a !== void 0 ? _a : []; // options
+        const answerList = answer.map(answer => {
           var _a, _b;
           return {
             order: answer,
             value: (_b = (_a = options[answer]) === null || _a === void 0 ? void 0 : _a.content) !== null && _b !== void 0 ? _b : ''
           };
         }, []);
-        var optionList = options.filter(function (item, index) {
-          return !answer.includes(index);
-        }).map(function (option) {
+        const optionList = options.filter((item, index) => !answer.includes(index)).map(option => {
           var _a;
           return {
-            order: options.findIndex(function (optionInfo) {
-              return optionInfo === option;
-            }),
+            order: options.findIndex(optionInfo => optionInfo === option),
             value: (_a = option === null || option === void 0 ? void 0 : option.content) !== null && _a !== void 0 ? _a : ''
           };
         });
         setAnswerList(answerList);
         setOptionList(optionList);
-      }).catch(function (error) {
+      }).catch(error => {
         console.error(error);
       });
-      return function () {
-        return controller.abort();
-      };
+      return () => controller.abort();
     } else {
-      setOptionList(((_a = materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.options) === null || _a === void 0 ? void 0 : _a.map(function (option, index) {
+      setOptionList(((_a = materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.options) === null || _a === void 0 ? void 0 : _a.map((option, index) => {
         var _a;
         return {
           order: index,
@@ -206,19 +188,19 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
       })) || []);
       setAnswerList(Array.from({
         length: (_b = materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.correctOptionCount) !== null && _b !== void 0 ? _b : 0
-      }, function () {
-        return {
-          order: null,
-          value: null
-        };
-      }));
+      }, () => ({
+        order: null,
+        value: null
+      })));
     }
   }, [materialQuiz, userId]);
   // quiz response fetcher
-  React__default.default.useEffect(function () {
+  React.useEffect(() => {
     if (userId && materialQuiz) {
-      var controller = new AbortController();
-      var signal = controller.signal;
+      const controller = new AbortController();
+      const {
+        signal
+      } = controller;
       apiClient.getOrgMaterialQuizResponseList({
         materialQuizId: materialQuiz.id,
         filterUserIds: [userId],
@@ -227,130 +209,93 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
         offset: 0,
         count: 1
       }, {
-        signal: signal
-      }).then(function (response) {
+        signal
+      }).then(response => {
         var _a, _b, _c;
-        var quizResponse = response.quizResponses[0];
+        const quizResponse = response.quizResponses[0];
         setMaterialQuizResponse(quizResponse);
-        var answer = (_a = quizResponse === null || quizResponse === void 0 ? void 0 : quizResponse.answer) !== null && _a !== void 0 ? _a : []; // user submitted
-        var options = (_b = materialQuiz.options) !== null && _b !== void 0 ? _b : []; // options
-        var materialQuizAnswerInfo = materialQuiz.answerInfo;
-        var correctAnswerList = Array.isArray(materialQuizAnswerInfo) ? (_c = materialQuizAnswerInfo === null || materialQuizAnswerInfo === void 0 ? void 0 : materialQuizAnswerInfo.map(function (answerInfo) {
+        const answer = (_a = quizResponse === null || quizResponse === void 0 ? void 0 : quizResponse.answer) !== null && _a !== void 0 ? _a : []; // user submitted
+        const options = (_b = materialQuiz.options) !== null && _b !== void 0 ? _b : []; // options
+        const materialQuizAnswerInfo = materialQuiz.answerInfo;
+        const correctAnswerList = Array.isArray(materialQuizAnswerInfo) ? (_c = materialQuizAnswerInfo === null || materialQuizAnswerInfo === void 0 ? void 0 : materialQuizAnswerInfo.map(answerInfo => {
           var _a, _b, _c;
           return {
             order: answerInfo,
             value: (_c = (_b = (_a = materialQuiz.options) === null || _a === void 0 ? void 0 : _a[answerInfo]) === null || _b === void 0 ? void 0 : _b.content) !== null && _c !== void 0 ? _c : ''
           };
         })) !== null && _c !== void 0 ? _c : [] : [];
-        var answerList = answer.map(function (answer) {
+        const answerList = answer.map(answer => {
           var _a, _b;
           return {
             order: answer,
             value: (_b = (_a = options[answer]) === null || _a === void 0 ? void 0 : _a.content) !== null && _b !== void 0 ? _b : ''
           };
         }, []);
-        var optionList = options.filter(function (item, index) {
-          return !answer.includes(index);
-        }).map(function (option) {
+        const optionList = options.filter((item, index) => !answer.includes(index)).map(option => {
           var _a;
           return {
-            order: options.findIndex(function (optionInfo) {
-              return optionInfo === option;
-            }),
+            order: options.findIndex(optionInfo => optionInfo === option),
             value: (_a = option === null || option === void 0 ? void 0 : option.content) !== null && _a !== void 0 ? _a : ''
           };
         });
         setCorrectAnswerList(correctAnswerList);
         setAnswerList(answerList);
         setOptionList(optionList);
-      }).catch(function (error) {
+      }).catch(error => {
         console.error(error);
       });
-      return function () {
-        return controller.abort();
-      };
+      return () => controller.abort();
     }
   }, [materialQuiz, userId]);
   // submit handler
-  var handleSubmit = /*#__PURE__*/function () {
-    var _ref5 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee() {
-      var _yield$postOrgMateria, quizResponseId, _yield$getOrgMaterial, quizResponse;
-      return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            if (materialQuiz) {
-              _context.next = 2;
-              break;
-            }
-            return _context.abrupt("return");
-          case 2:
-            setSubmitStatus('pending');
-            _context.prev = 3;
-            _context.next = 6;
-            return apiClient.postOrgMaterialQuizResponseAdd({
-              materialQuizId: materialQuiz.id,
-              answer: answerList.map(function (answer) {
-                return answer.order;
-              }) // FIXME: Type mismatch
-            });
-          case 6:
-            _yield$postOrgMateria = _context.sent;
-            quizResponseId = _yield$postOrgMateria.quizResponseId;
-            _context.next = 10;
-            return apiClient.getOrgMaterialQuizResponseGet({
-              quizResponseId: quizResponseId
-            });
-          case 10:
-            _yield$getOrgMaterial = _context.sent;
-            quizResponse = _yield$getOrgMaterial.quizResponse;
-            setIsActive(false);
-            setHasSubmitted(true);
-            setMaterialQuizResponse(quizResponse);
-            void refreshOrgMaterialQuiz();
-            onSubmit(true, index.getQuizResult(quizResponse));
-            setSubmitStatus('resolved');
-            onDirty(false);
-            _context.next = 26;
-            break;
-          case 21:
-            _context.prev = 21;
-            _context.t0 = _context["catch"](3);
-            console.error(_context.t0);
-            onSubmit(false);
-            setSubmitStatus('rejected');
-          case 26:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[3, 21]]);
-    }));
-    return function handleSubmit() {
-      return _ref5.apply(this, arguments);
-    };
-  }();
-  var renderQuizDragOption = function renderQuizDragOption() {
-    return jsxRuntime.jsxs(StyledQuizOptionsDropZone, {
+  const handleSubmit = async () => {
+    if (!materialQuiz) {
+      return;
+    }
+    setSubmitStatus('pending');
+    try {
+      const {
+        quizResponseId
+      } = await apiClient.postOrgMaterialQuizResponseAdd({
+        materialQuizId: materialQuiz.id,
+        answer: answerList.map(answer => answer.order) // FIXME: Type mismatch
+      });
+
+      const {
+        quizResponse
+      } = await apiClient.getOrgMaterialQuizResponseGet({
+        quizResponseId
+      });
+      setIsActive(false);
+      setHasSubmitted(true);
+      setMaterialQuizResponse(quizResponse);
+      void refreshOrgMaterialQuiz();
+      onSubmit(true, index.getQuizResult(quizResponse));
+      setSubmitStatus('resolved');
+      onDirty(false);
+    } catch (error) {
+      console.error(error);
+      onSubmit(false);
+      setSubmitStatus('rejected');
+    }
+  };
+  const renderQuizDragOption = () => {
+    return React.createElement(StyledQuizOptionsDropZone, {
       disabled: !!userId,
       accept: ".quiz-answer",
-      onDrop: function onDrop(event, ui) {
+      onDrop: (event, ui) => {
         if (index.checkUserLectureTestEnded(lecture)) {
           return;
         }
         setIsActive(true);
         setHasSubmitted(false);
-        var targetId = Number(ui.draggable[0].id);
-        setOptionList(function (prevOptionList) {
-          return [].concat(_rollupPluginBabelHelpers.toConsumableArray(prevOptionList), [answerList.find(function (answer) {
-            return answer.order === targetId;
-          })]).sort(function (a, b) {
-            return a.order - b.order;
-          });
+        const targetId = Number(ui.draggable[0].id);
+        setOptionList(prevOptionList => {
+          return [...prevOptionList, answerList.find(answer => answer.order === targetId)].sort((a, b) => a.order - b.order);
         });
-        setAnswerList(function (prevAnswerList) {
-          var removingIndex = prevAnswerList.findIndex(function (answer) {
-            return answer.order === targetId;
-          });
-          return prevAnswerList.map(function (answer, answerIndex) {
+        setAnswerList(prevAnswerList => {
+          const removingIndex = prevAnswerList.findIndex(answer => answer.order === targetId);
+          return prevAnswerList.map((answer, answerIndex) => {
             if (answerIndex === removingIndex) {
               return {
                 order: null,
@@ -361,127 +306,117 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
             }
           });
         });
-      },
-      children: [optionList.map(function (option, index) {
-        return jsxRuntime.jsx(QuizDraggbleOption.default, {
-          disabled: !!userId,
-          id: option.order.toString(),
-          className: "quiz-option",
-          content: option.value,
-          isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
-        }, option.order);
-      }), optionList.length === 0 && !userId ? jsxRuntime.jsx(blocks.Flex, {
-        align: "center",
-        justify: "center",
-        style: {
-          minWidth: '200px',
-          height: '100%'
-        },
-        children: jsxRuntime.jsx(blocks.Text, {
-          size: "tiny",
-          role: "white",
-          children: intl$1.formatMessage({
-            id: 'materialQuiz.order.answerEmpty'
-          })
-        })
-      }) : null]
-    });
+      }
+    }, optionList.map((option, index) => {
+      return React.createElement(QuizDraggbleOption.default, {
+        disabled: !!userId,
+        key: option.order,
+        id: option.order.toString(),
+        className: "quiz-option",
+        content: option.value,
+        isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
+      });
+    }), optionList.length === 0 && !userId ? React.createElement(blocks.Flex, {
+      align: "center",
+      justify: "center",
+      style: {
+        minWidth: '200px',
+        height: '100%'
+      }
+    }, React.createElement(blocks.Text, {
+      size: "tiny",
+      role: "white"
+    }, intl$1.formatMessage({
+      id: 'materialQuiz.order.answerEmpty'
+    }))) : null);
   };
-  var renderQuizDragAnswers = function renderQuizDragAnswers() {
-    return jsxRuntime.jsx(StyledQuizAnswersDropZone, {
-      children: answerList.map(function (option, index$1) {
-        var getRole = function getRole() {
-          if (isActive) {
+  const renderQuizDragAnswers = () => {
+    return React.createElement(StyledQuizAnswersDropZone, null, answerList.map((option, index$1) => {
+      const getRole = () => {
+        if (isActive) {
+          return 'default';
+        }
+        const status = index.getQuizResultStatus(materialQuizResponse);
+        switch (status) {
+          case index.QuizResultStatus.Correct:
+            return 'correct';
+          case index.QuizResultStatus.Wrong:
+            return 'wrong';
+          default:
             return 'default';
-          }
-          var status = index.getQuizResultStatus(materialQuizResponse);
-          switch (status) {
-            case index.QuizResultStatus.Correct:
-              return 'correct';
-            case index.QuizResultStatus.Wrong:
-              return 'wrong';
-            default:
-              return 'default';
-          }
-        };
-        if (option.value === null) {
-          return jsxRuntime.jsx(QuizDraggbleDummyOption.default, {
-            children: intl$1.formatMessage({
-              id: 'materialQuiz.selectMultipleOrder.answer.title'
-            }),
-            indexOrder: index$1 + 1,
-            onDrop: function onDrop(event, ui) {
-              if (index.checkUserLectureTestEnded(lecture)) {
-                return;
-              }
-              setIsActive(true);
-              setHasSubmitted(false);
-              onDirty(true);
-              // from answerList to answerList
-              if (ui.draggable[0].classList.contains('quiz-answer')) {
-                var targetOptionId = Number(ui.draggable[0].id);
-                setAnswerList(function (prevAnswerList) {
-                  var newState = _rollupPluginBabelHelpers.toConsumableArray(prevAnswerList);
-                  var from = newState.find(function (prevAnswer) {
-                    return prevAnswer.order === targetOptionId;
-                  });
-                  var fromIndex = newState.findIndex(function (prevAnswer) {
-                    return prevAnswer.order === targetOptionId;
-                  });
-                  var to = newState[index$1];
-                  newState[index$1] = from;
-                  newState[fromIndex] = to;
-                  return newState;
-                });
-              }
-              // from option-list to answerList-list
-              else {
-                var _targetOptionId = Number(ui.draggable[0].id);
-                setOptionList(function (prevOptions) {
-                  return prevOptions.filter(function (prevOption) {
-                    return prevOption.order !== _targetOptionId;
-                  });
-                });
-                setAnswerList(function (prevAnswerList) {
-                  return prevAnswerList.map(function (prevAnswer, prevAnswerIndex) {
-                    var _a, _b;
-                    if (index$1 === prevAnswerIndex) {
-                      return {
-                        order: _targetOptionId,
-                        value: (_b = (_a = optionList.find(function (option) {
-                          return option.order === _targetOptionId;
-                        })) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ''
-                      };
-                    } else {
-                      return prevAnswer;
-                    }
-                  });
+        }
+      };
+      if (option.value === null) {
+        return React.createElement(QuizDraggbleDummyOption.default, {
+          children: intl$1.formatMessage({
+            id: 'materialQuiz.selectMultipleOrder.answer.title'
+          }),
+          key: index$1,
+          indexOrder: index$1 + 1,
+          onDrop: (event, ui) => {
+            if (index.checkUserLectureTestEnded(lecture)) {
+              return;
+            }
+            setIsActive(true);
+            setHasSubmitted(false);
+            onDirty(true);
+            // from answerList to answerList
+            if (ui.draggable[0].classList.contains('quiz-answer')) {
+              const targetOptionId = Number(ui.draggable[0].id);
+              setAnswerList(prevAnswerList => {
+                const newState = [...prevAnswerList];
+                const from = newState.find(prevAnswer => prevAnswer.order === targetOptionId);
+                const fromIndex = newState.findIndex(prevAnswer => prevAnswer.order === targetOptionId);
+                const to = newState[index$1];
+                newState[index$1] = from;
+                newState[fromIndex] = to;
+                return newState;
+              });
+            }
+            // from option-list to answerList-list
+            else {
+              const targetOptionId = Number(ui.draggable[0].id);
+              setOptionList(prevOptions => {
+                return prevOptions.filter(prevOption => prevOption.order !== targetOptionId);
+              });
+              setAnswerList(prevAnswerList => {
+                return prevAnswerList.map((prevAnswer, prevAnswerIndex) => {
+                  var _a, _b;
+                  if (index$1 === prevAnswerIndex) {
+                    return {
+                      order: targetOptionId,
+                      value: (_b = (_a = optionList.find(option => option.order === targetOptionId)) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ''
+                    };
+                  } else {
+                    return prevAnswer;
+                  }
                 });
-              }
+              });
             }
-          }, index$1);
-        } else {
-          return jsxRuntime.jsx(QuizDraggbleDroppedOption.default, {
-            id: option.order.toString(),
-            content: option.value,
-            role: getRole(),
-            disabled: !!userId,
-            indexOrder: index$1 + 1,
-            isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
-          }, index$1);
-        }
-      })
-    });
+          }
+        });
+      } else {
+        return React.createElement(QuizDraggbleDroppedOption.default, {
+          key: index$1,
+          id: option.order.toString(),
+          content: option.value,
+          role: getRole(),
+          disabled: !!userId,
+          indexOrder: index$1 + 1,
+          isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
+        });
+      }
+    }));
   };
-  return jsxRuntime.jsx(QuestionBox.default, {
+  return React.createElement(QuestionBox.default, {
     title: materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionTitle,
     titlePrefix: "Q.",
     onNext: onNext,
     isNextActive: isNextActive,
-    submitStatus: jsxRuntime.jsx(QuizSubmitStatusText.default, {
+    submitStatus: React.createElement(QuizSubmitStatusText.default, {
       status: submitStatus
     }),
-    submitResult: jsxRuntime.jsx(QuizResultBadge.default, {
+    submitResult: React.createElement(QuizResultBadge.default, {
       materialQuizResponse: materialQuizResponse
     }),
     bodyContainerRef: containerRef,
@@ -499,60 +434,51 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
         backgroundColor: isNextActive ? theme.palette.secondary.main : isDisabled ? designTokens.base.color.gray6 : theme.palette.primary.main,
         color: isNextActive ? theme.palette.secondary.contrastText : isDisabled ? designTokens.base.color.gray3 : theme.palette.primary.contrastText
       }
-    }],
-    children: jsxRuntime.jsxs(material.Stack, {
-      height: "100%",
-      gap: "1rem",
-      children: [hasInlinePassage && jsxRuntime.jsx("div", {
-        id: element.MATERIAL_QUIZ_PASSIVE_ID,
-        ref: questionRef,
-        children: jsxRuntime.jsx(MaterialQuizInfo.default, {
-          renderWithBox: false
-        })
-      }), jsxRuntime.jsxs("div", {
-        id: element.MATERIAL_QUIZ_ANSWER_ID,
-        children: [jsxRuntime.jsxs(StyledOptionBox, {
-          ref: optionBoxRef,
-          vertical: vertical,
-          children: [renderQuizDragOption(), jsxRuntime.jsx(StyledVerticalDivider, {
-            vertical: vertical,
-            children: jsxRuntime.jsx(blocks.Icon, {
-              size: "elephant",
-              icon: icons.eilSortItem,
-              rotate: 90,
-              style: {
-                color: designTokens.base.color.navy3
-              }
-            })
-          }), jsxRuntime.jsx(StyledHorizontalDivider, {
-            vertical: vertical
-          }), renderQuizDragAnswers()]
-        }), !!userId ? jsxRuntime.jsx(blocks.Flex, {
-          margintop: "1rem",
-          column: true,
-          children: jsxRuntime.jsxs(StyledQuizOptionsDropZone, {
-            children: [jsxRuntime.jsx(blocks.Text, {
-              role: "white",
-              size: "small",
-              children: intl$1.formatMessage({
-                id: 'materialQuiz.answer'
-              })
-            }), correctAnswerList.map(function (correctAnswer, index) {
-              var _a;
-              return jsxRuntime.jsx(QuizDraggbleDroppedOption.default, {
-                id: (_a = correctAnswer.order) === null || _a === void 0 ? void 0 : _a.toString(),
-                content: correctAnswer.value,
-                disabled: true,
-                role: "correct",
-                indexOrder: index + 1,
-                isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
-              }, correctAnswer.order);
-            })]
-          })
-        }) : null, jsxRuntime.jsx(MaterialQuizAnswerExplanation.default, {})]
-      })]
-    })
-  });
+    }]
+  }, React.createElement(material.Stack, {
+    height: "100%",
+    gap: "1rem"
+  }, hasInlinePassage && React.createElement("div", {
+    id: element.MATERIAL_QUIZ_PASSIVE_ID,
+    ref: questionRef
+  }, React.createElement(MaterialQuizInfo.default, {
+    renderWithBox: false
+  })), React.createElement("div", {
+    id: element.MATERIAL_QUIZ_ANSWER_ID
+  }, React.createElement(StyledOptionBox, {
+    ref: optionBoxRef,
+    vertical: vertical
+  }, renderQuizDragOption(), React.createElement(StyledVerticalDivider, {
+    vertical: vertical
+  }, React.createElement(blocks.Icon, {
+    size: "elephant",
+    icon: icons.eilSortItem,
+    rotate: 90,
+    style: {
+      color: designTokens.base.color.navy3
+    }
+  })), React.createElement(StyledHorizontalDivider, {
+    vertical: vertical
+  }), renderQuizDragAnswers()), !!userId ? React.createElement(blocks.Flex, {
+    margintop: "1rem",
+    column: true
+  }, React.createElement(StyledQuizOptionsDropZone, null, React.createElement(blocks.Text, {
+    role: "white",
+    size: "small"
+  }, intl$1.formatMessage({
+    id: 'materialQuiz.answer'
+  })), correctAnswerList.map((correctAnswer, index) => {
+    var _a;
+    return React.createElement(QuizDraggbleDroppedOption.default, {
+      key: correctAnswer.order,
+      id: (_a = correctAnswer.order) === null || _a === void 0 ? void 0 : _a.toString(),
+      content: correctAnswer.value,
+      disabled: true,
+      role: "correct",
+      indexOrder: index + 1,
+      isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
+    });
+  }))) : null, React.createElement(MaterialQuizAnswerExplanation.default, null))));
 };
 
 exports.default = MaterialQuizSelectMultipleOrder;