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

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

@@ -1,3 +1,5 @@
+import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { getOrgMaterialQuizResponseGet, getOrgMaterialQuizResponseList, postOrgMaterialQuizResponseAdd } from '@elice/api-client';
 import { Icon, Flex, Text } from '@elice/blocks';
@@ -7,7 +9,7 @@ import { useRawEliceIntl } from '@elice/intl';
 import { useTheme, Stack } from '@mui/material';
 import styled from 'styled-components';
 import { MATERIAL_QUIZ_PASSIVE_ID, MATERIAL_QUIZ_ANSWER_ID } from '../../constant/element.js';
-import { getQuizResult, checkUserLectureTestEnded, getQuizResultStatus, QuizResultStatus } from '../../helpers/index.js';
+import { checkUserLectureTestEnded, getQuizResultStatus, QuizResultStatus, getQuizResult } from '../../helpers/index.js';
 import { useCaculatePassage } from '../../hooks/useCaculatePassage.js';
 import EbDroppable from '../eb-sortable/EbDroppable.js';
 import QuestionBox from '../shared/QuestionBox.js';
@@ -20,80 +22,87 @@ import MaterialQuizInfo from './MaterialQuizInfo.js';
 import QuizResultBadge from './QuizResultBadge.js';
 import QuizSubmitStatusText from './QuizSubmitStatusText.js';
 
-const StyledVerticalDivider = styled.div.withConfig({
+var StyledVerticalDivider = styled.div.withConfig({
   componentId: "sc-10067nt-0"
-})(["display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none !important;padding:1rem;", ""], ({
-  vertical
-}) => {
-  return vertical ? `
-          display: none;
-        ` : '';
+})(["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        " : '';
 });
-const StyledHorizontalDivider = styled.hr.withConfig({
+var StyledHorizontalDivider = styled.hr.withConfig({
   componentId: "sc-10067nt-1"
-})(["display:none;", ""], ({
-  vertical
-}) => {
-  return vertical ? `
-          display: block;
-          margin: 1rem 0;
-          width: 100%;
-          border: solid 1px ${base.color.navy5};
-        ` : '';
+})(["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(base.color.navy5, ";\n        ") : '';
 });
-const StyledQuizOptionsDropZone = styled(EbDroppable).withConfig({
+var StyledQuizOptionsDropZone = styled(EbDroppable).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;}"], base.color.navy7, base.color.gray4);
-const StyledQuizAnswersDropZone = styled.div.withConfig({
+var 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:", ";"], base.color.navy6);
-const StyledOptionBox = styled.div.withConfig({
+var StyledOptionBox = styled.div.withConfig({
   componentId: "sc-10067nt-4"
-})(["display:flex;", ""], ({
-  vertical
-}) => {
-  return vertical ? `
-          flex-direction: column;
-        ` : '';
+})(["display:flex;", ""], function (_ref3) {
+  var vertical = _ref3.vertical;
+  return vertical ? "\n          flex-direction: column;\n        " : '';
 });
-const MaterialQuizSelectMultipleOrder = ({
-  hasInlinePassage
-}) => {
+var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_ref4) {
+  var hasInlinePassage = _ref4.hasInlinePassage;
   // context
-  const {
-    lecture,
-    materialQuiz,
-    userId,
-    vertical,
-    course
-  } = useMaterialQuizState();
-  const {
-    onSubmit,
-    onNext,
-    refreshOrgMaterialQuiz,
-    onDirty
-  } = useMaterialQuizDispatch();
-  const theme = useTheme();
+  var _useMaterialQuizState = useMaterialQuizState(),
+    lecture = _useMaterialQuizState.lecture,
+    materialQuiz = _useMaterialQuizState.materialQuiz,
+    userId = _useMaterialQuizState.userId,
+    vertical = _useMaterialQuizState.vertical,
+    course = _useMaterialQuizState.course;
+  var _useMaterialQuizDispa = useMaterialQuizDispatch(),
+    onSubmit = _useMaterialQuizDispa.onSubmit,
+    onNext = _useMaterialQuizDispa.onNext,
+    refreshOrgMaterialQuiz = _useMaterialQuizDispa.refreshOrgMaterialQuiz,
+    onDirty = _useMaterialQuizDispa.onDirty;
+  var theme = useTheme();
   // state
-  const intl = useRawEliceIntl();
-  const [materialQuizResponse, setMaterialQuizResponse] = React.useState();
-  const [submitStatus, setSubmitStatus] = React.useState('idle');
-  const [isActive, setIsActive] = React.useState(false);
-  const {
-    containerRef,
-    questionRef
-  } = 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;
+  var intl = useRawEliceIntl();
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    materialQuizResponse = _React$useState2[0],
+    setMaterialQuizResponse = _React$useState2[1];
+  var _React$useState3 = React.useState('idle'),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    submitStatus = _React$useState4[0],
+    setSubmitStatus = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    isActive = _React$useState6[0],
+    setIsActive = _React$useState6[1];
+  var _useCaculatePassage = useCaculatePassage(),
+    containerRef = _useCaculatePassage.containerRef,
+    questionRef = _useCaculatePassage.questionRef;
+  var _React$useState7 = React.useState([]),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    optionList = _React$useState8[0],
+    setOptionList = _React$useState8[1];
+  var _React$useState9 = React.useState([]),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    answerList = _React$useState10[0],
+    setAnswerList = _React$useState10[1];
+  var _React$useState11 = React.useState([]),
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    correctAnswerList = _React$useState12[0],
+    setCorrectAnswerList = _React$useState12[1];
+  var _React$useState13 = React.useState(false),
+    _React$useState14 = _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;
   // ref
-  const optionBoxRef = React.useRef(null);
+  var optionBoxRef = React.useRef(null);
   // to make jquery touchable
-  React.useEffect(() => {
-    const optionBoxElement = optionBoxRef.current;
+  React.useEffect(function () {
+    var optionBoxElement = optionBoxRef.current;
     if (!optionBoxElement) {
       return;
     }
@@ -102,9 +111,9 @@ const MaterialQuizSelectMultipleOrder = ({
      * credit: http://stackoverflow.com/a/6141093
      */
     function touchHandler(event) {
-      const touches = event.changedTouches;
-      const first = touches[0];
-      let type = '';
+      var touches = event.changedTouches;
+      var first = touches[0];
+      var type = '';
       switch (event.type) {
         case 'touchstart':
           type = 'mousedown';
@@ -121,7 +130,7 @@ const MaterialQuizSelectMultipleOrder = ({
       // initMouseEvent(type, canBubble, cancelable, view, clickCount,
       //                screenX, screenY, clientX, clientY, ctrlKey,
       //                altKey, shiftKey, metaKey, button, relatedTarget);
-      const simulatedEvent = document.createEvent('MouseEvent');
+      var 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();
@@ -130,7 +139,7 @@ const MaterialQuizSelectMultipleOrder = ({
     optionBoxElement.addEventListener('touchmove', touchHandler, true);
     optionBoxElement.addEventListener('touchend', touchHandler, true);
     optionBoxElement.addEventListener('touchcancel', touchHandler, true);
-    return () => {
+    return function () {
       optionBoxElement.removeEventListener('touchstart', touchHandler, true);
       optionBoxElement.removeEventListener('touchmove', touchHandler, true);
       optionBoxElement.removeEventListener('touchend', touchHandler, true);
@@ -138,44 +147,48 @@ const MaterialQuizSelectMultipleOrder = ({
     };
   }, []);
   // quiz response fetcher
-  React.useEffect(() => {
+  React.useEffect(function () {
     var _a, _b;
     if (!userId && (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.lastQuizResponseId)) {
-      const controller = new AbortController();
-      const {
-        signal
-      } = controller;
+      var controller = new AbortController();
+      var signal = controller.signal;
       getOrgMaterialQuizResponseGet({
         quizResponseId: materialQuiz.lastQuizResponseId
       }, {
-        signal
-      }).then(response => {
+        signal: signal
+      }).then(function (response) {
         var _a;
         setMaterialQuizResponse(response.quizResponse);
-        const answer = response.quizResponse.answer; // user submitted
-        const options = (_a = materialQuiz.options) !== null && _a !== void 0 ? _a : []; // options
-        const answerList = answer.map(answer => {
+        var answer = response.quizResponse.answer; // user submitted
+        var options = (_a = materialQuiz.options) !== null && _a !== void 0 ? _a : []; // options
+        var answerList = answer.map(function (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 : ''
           };
         }, []);
-        const optionList = options.filter((item, index) => !answer.includes(index)).map(option => {
+        var optionList = options.filter(function (item, index) {
+          return !answer.includes(index);
+        }).map(function (option) {
           var _a;
           return {
-            order: options.findIndex(optionInfo => optionInfo === option),
+            order: options.findIndex(function (optionInfo) {
+              return optionInfo === option;
+            }),
             value: (_a = option === null || option === void 0 ? void 0 : option.content) !== null && _a !== void 0 ? _a : ''
           };
         });
         setAnswerList(answerList);
         setOptionList(optionList);
-      }).catch(error => {
+      }).catch(function (error) {
         console.error(error);
       });
-      return () => controller.abort();
+      return function () {
+        return controller.abort();
+      };
     } else {
-      setOptionList(((_a = materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.options) === null || _a === void 0 ? void 0 : _a.map((option, index) => {
+      setOptionList(((_a = materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.options) === null || _a === void 0 ? void 0 : _a.map(function (option, index) {
         var _a;
         return {
           order: index,
@@ -184,19 +197,19 @@ const MaterialQuizSelectMultipleOrder = ({
       })) || []);
       setAnswerList(Array.from({
         length: (_b = materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.correctOptionCount) !== null && _b !== void 0 ? _b : 0
-      }, () => ({
-        order: null,
-        value: null
-      })));
+      }, function () {
+        return {
+          order: null,
+          value: null
+        };
+      }));
     }
   }, [materialQuiz, userId]);
   // quiz response fetcher
-  React.useEffect(() => {
+  React.useEffect(function () {
     if (userId && materialQuiz) {
-      const controller = new AbortController();
-      const {
-        signal
-      } = controller;
+      var controller = new AbortController();
+      var signal = controller.signal;
       getOrgMaterialQuizResponseList({
         materialQuizId: materialQuiz.id,
         filterUserIds: [userId],
@@ -205,93 +218,130 @@ const MaterialQuizSelectMultipleOrder = ({
         offset: 0,
         count: 1
       }, {
-        signal
-      }).then(response => {
+        signal: signal
+      }).then(function (response) {
         var _a, _b, _c;
-        const quizResponse = response.quizResponses[0];
+        var quizResponse = response.quizResponses[0];
         setMaterialQuizResponse(quizResponse);
-        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 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) {
           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 : [] : [];
-        const answerList = answer.map(answer => {
+        var answerList = answer.map(function (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 : ''
           };
         }, []);
-        const optionList = options.filter((item, index) => !answer.includes(index)).map(option => {
+        var optionList = options.filter(function (item, index) {
+          return !answer.includes(index);
+        }).map(function (option) {
           var _a;
           return {
-            order: options.findIndex(optionInfo => optionInfo === option),
+            order: options.findIndex(function (optionInfo) {
+              return 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(error => {
+      }).catch(function (error) {
         console.error(error);
       });
-      return () => controller.abort();
+      return function () {
+        return controller.abort();
+      };
     }
   }, [materialQuiz, userId]);
   // submit handler
-  const handleSubmit = async () => {
-    if (!materialQuiz) {
-      return;
-    }
-    setSubmitStatus('pending');
-    try {
-      const {
-        quizResponseId
-      } = await postOrgMaterialQuizResponseAdd({
-        materialQuizId: materialQuiz.id,
-        answer: answerList.map(answer => answer.order) // FIXME: Type mismatch
-      });
-
-      const {
-        quizResponse
-      } = await getOrgMaterialQuizResponseGet({
-        quizResponseId
-      });
-      setIsActive(false);
-      setHasSubmitted(true);
-      setMaterialQuizResponse(quizResponse);
-      void refreshOrgMaterialQuiz();
-      onSubmit(true, getQuizResult(quizResponse));
-      setSubmitStatus('resolved');
-      onDirty(false);
-    } catch (error) {
-      console.error(error);
-      onSubmit(false);
-      setSubmitStatus('rejected');
-    }
-  };
-  const renderQuizDragOption = () => {
-    return React.createElement(StyledQuizOptionsDropZone, {
+  var handleSubmit = /*#__PURE__*/function () {
+    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var _yield$postOrgMateria, quizResponseId, _yield$getOrgMaterial, quizResponse;
+      return _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 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 getOrgMaterialQuizResponseGet({
+              quizResponseId: quizResponseId
+            });
+          case 10:
+            _yield$getOrgMaterial = _context.sent;
+            quizResponse = _yield$getOrgMaterial.quizResponse;
+            setIsActive(false);
+            setHasSubmitted(true);
+            setMaterialQuizResponse(quizResponse);
+            void refreshOrgMaterialQuiz();
+            onSubmit(true, 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 jsxs(StyledQuizOptionsDropZone, {
       disabled: !!userId,
       accept: ".quiz-answer",
-      onDrop: (event, ui) => {
+      onDrop: function onDrop(event, ui) {
         if (checkUserLectureTestEnded(lecture)) {
           return;
         }
         setIsActive(true);
         setHasSubmitted(false);
-        const targetId = Number(ui.draggable[0].id);
-        setOptionList(prevOptionList => {
-          return [...prevOptionList, answerList.find(answer => answer.order === targetId)].sort((a, b) => a.order - b.order);
+        var targetId = Number(ui.draggable[0].id);
+        setOptionList(function (prevOptionList) {
+          return [].concat(_toConsumableArray(prevOptionList), [answerList.find(function (answer) {
+            return answer.order === targetId;
+          })]).sort(function (a, b) {
+            return a.order - b.order;
+          });
         });
-        setAnswerList(prevAnswerList => {
-          const removingIndex = prevAnswerList.findIndex(answer => answer.order === targetId);
-          return prevAnswerList.map((answer, answerIndex) => {
+        setAnswerList(function (prevAnswerList) {
+          var removingIndex = prevAnswerList.findIndex(function (answer) {
+            return answer.order === targetId;
+          });
+          return prevAnswerList.map(function (answer, answerIndex) {
             if (answerIndex === removingIndex) {
               return {
                 order: null,
@@ -302,117 +352,127 @@ const MaterialQuizSelectMultipleOrder = ({
             }
           });
         });
-      }
-    }, optionList.map((option, index) => {
-      return React.createElement(QuizDraggbleOption, {
-        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(Flex, {
-      align: "center",
-      justify: "center",
-      style: {
-        minWidth: '200px',
-        height: '100%'
-      }
-    }, React.createElement(Text, {
-      size: "tiny",
-      role: "white"
-    }, intl.formatMessage({
-      id: 'materialQuiz.order.answerEmpty'
-    }))) : null);
+      },
+      children: [optionList.map(function (option, index) {
+        return jsx(QuizDraggbleOption, {
+          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 ? jsx(Flex, {
+        align: "center",
+        justify: "center",
+        style: {
+          minWidth: '200px',
+          height: '100%'
+        },
+        children: jsx(Text, {
+          size: "tiny",
+          role: "white",
+          children: intl.formatMessage({
+            id: 'materialQuiz.order.answerEmpty'
+          })
+        })
+      }) : null]
+    });
   };
-  const renderQuizDragAnswers = () => {
-    return React.createElement(StyledQuizAnswersDropZone, null, answerList.map((option, index) => {
-      const getRole = () => {
-        if (isActive) {
-          return 'default';
-        }
-        const status = getQuizResultStatus(materialQuizResponse);
-        switch (status) {
-          case QuizResultStatus.Correct:
-            return 'correct';
-          case QuizResultStatus.Wrong:
-            return 'wrong';
-          default:
+  var renderQuizDragAnswers = function renderQuizDragAnswers() {
+    return jsx(StyledQuizAnswersDropZone, {
+      children: answerList.map(function (option, index) {
+        var getRole = function getRole() {
+          if (isActive) {
             return 'default';
-        }
-      };
-      if (option.value === null) {
-        return React.createElement(QuizDraggbleDummyOption, {
-          children: intl.formatMessage({
-            id: 'materialQuiz.selectMultipleOrder.answer.title'
-          }),
-          key: index,
-          indexOrder: index + 1,
-          onDrop: (event, ui) => {
-            if (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];
-                newState[index] = 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 === 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;
-                  }
+          }
+          var status = getQuizResultStatus(materialQuizResponse);
+          switch (status) {
+            case QuizResultStatus.Correct:
+              return 'correct';
+            case QuizResultStatus.Wrong:
+              return 'wrong';
+            default:
+              return 'default';
+          }
+        };
+        if (option.value === null) {
+          return jsx(QuizDraggbleDummyOption, {
+            children: intl.formatMessage({
+              id: 'materialQuiz.selectMultipleOrder.answer.title'
+            }),
+            indexOrder: index + 1,
+            onDrop: function onDrop(event, ui) {
+              if (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 = _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];
+                  newState[index] = 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 === 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;
+                    }
+                  });
+                });
+              }
             }
-          }
-        });
-      } else {
-        return React.createElement(QuizDraggbleDroppedOption, {
-          key: index,
-          id: option.order.toString(),
-          content: option.value,
-          role: getRole(),
-          disabled: !!userId,
-          indexOrder: index + 1,
-          isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
-        });
-      }
-    }));
+          }, index);
+        } else {
+          return jsx(QuizDraggbleDroppedOption, {
+            id: option.order.toString(),
+            content: option.value,
+            role: getRole(),
+            disabled: !!userId,
+            indexOrder: index + 1,
+            isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
+          }, index);
+        }
+      })
+    });
   };
-  return React.createElement(QuestionBox, {
+  return jsx(QuestionBox, {
     title: materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionTitle,
     titlePrefix: "Q.",
     onNext: onNext,
     isNextActive: isNextActive,
-    submitStatus: React.createElement(QuizSubmitStatusText, {
+    submitStatus: jsx(QuizSubmitStatusText, {
       status: submitStatus
     }),
-    submitResult: React.createElement(QuizResultBadge, {
+    submitResult: jsx(QuizResultBadge, {
       materialQuizResponse: materialQuizResponse
     }),
     bodyContainerRef: containerRef,
@@ -430,51 +490,60 @@ const MaterialQuizSelectMultipleOrder = ({
         backgroundColor: isNextActive ? theme.palette.secondary.main : isDisabled ? base.color.gray6 : theme.palette.primary.main,
         color: isNextActive ? theme.palette.secondary.contrastText : isDisabled ? base.color.gray3 : theme.palette.primary.contrastText
       }
-    }]
-  }, React.createElement(Stack, {
-    height: "100%",
-    gap: "1rem"
-  }, hasInlinePassage && React.createElement("div", {
-    id: MATERIAL_QUIZ_PASSIVE_ID,
-    ref: questionRef
-  }, React.createElement(MaterialQuizInfo, {
-    renderWithBox: false
-  })), React.createElement("div", {
-    id: MATERIAL_QUIZ_ANSWER_ID
-  }, React.createElement(StyledOptionBox, {
-    ref: optionBoxRef,
-    vertical: vertical
-  }, renderQuizDragOption(), React.createElement(StyledVerticalDivider, {
-    vertical: vertical
-  }, React.createElement(Icon, {
-    size: "elephant",
-    icon: eilSortItem,
-    rotate: 90,
-    style: {
-      color: base.color.navy3
-    }
-  })), React.createElement(StyledHorizontalDivider, {
-    vertical: vertical
-  }), renderQuizDragAnswers()), !!userId ? React.createElement(Flex, {
-    margintop: "1rem",
-    column: true
-  }, React.createElement(StyledQuizOptionsDropZone, null, React.createElement(Text, {
-    role: "white",
-    size: "small"
-  }, intl.formatMessage({
-    id: 'materialQuiz.answer'
-  })), correctAnswerList.map((correctAnswer, index) => {
-    var _a;
-    return React.createElement(QuizDraggbleDroppedOption, {
-      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, null))));
+    }],
+    children: jsxs(Stack, {
+      height: "100%",
+      gap: "1rem",
+      children: [hasInlinePassage && jsx("div", {
+        id: MATERIAL_QUIZ_PASSIVE_ID,
+        ref: questionRef,
+        children: jsx(MaterialQuizInfo, {
+          renderWithBox: false
+        })
+      }), jsxs("div", {
+        id: MATERIAL_QUIZ_ANSWER_ID,
+        children: [jsxs(StyledOptionBox, {
+          ref: optionBoxRef,
+          vertical: vertical,
+          children: [renderQuizDragOption(), jsx(StyledVerticalDivider, {
+            vertical: vertical,
+            children: jsx(Icon, {
+              size: "elephant",
+              icon: eilSortItem,
+              rotate: 90,
+              style: {
+                color: base.color.navy3
+              }
+            })
+          }), jsx(StyledHorizontalDivider, {
+            vertical: vertical
+          }), renderQuizDragAnswers()]
+        }), !!userId ? jsx(Flex, {
+          margintop: "1rem",
+          column: true,
+          children: jsxs(StyledQuizOptionsDropZone, {
+            children: [jsx(Text, {
+              role: "white",
+              size: "small",
+              children: intl.formatMessage({
+                id: 'materialQuiz.answer'
+              })
+            }), correctAnswerList.map(function (correctAnswer, index) {
+              var _a;
+              return jsx(QuizDraggbleDroppedOption, {
+                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, jsx(MaterialQuizAnswerExplanation, {})]
+      })]
+    })
+  });
 };
 
 export { MaterialQuizSelectMultipleOrder as default };