@elice/material-quiz 1.240719.1 → 1.240722.0-dev2.0

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var core = require('@dnd-kit/core');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
@@ -31,6 +32,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
+//
+//
+//
 var StyledVerticalDivider = styled__default.default.div.withConfig({
   componentId: "sc-10067nt-0"
 })(["display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none !important;padding:1rem;", ""], function (_ref) {
@@ -55,6 +59,9 @@ var StyledOptionBox = styled__default.default.div.withConfig({
   var vertical = _ref3.vertical;
   return vertical ? "\n          flex-direction: column;\n        " : '';
 });
+//
+//
+//
 var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_ref4) {
   var hasInlinePassage = _ref4.hasInlinePassage;
   // context
@@ -109,52 +116,16 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
   }).length || !!userId;
   // ref
   var optionBoxRef = React__default.default.useRef(null);
-  // to make jquery touchable
-  React__default.default.useEffect(function () {
-    var optionBoxElement = optionBoxRef.current;
-    if (!optionBoxElement) {
-      return;
+  var sensors = core.useSensors(core.useSensor(core.MouseSensor, {
+    activationConstraint: {
+      distance: 10
     }
-    /**
-     * Lightweight script to convert touch handlers to mouse handlers
-     * credit: http://stackoverflow.com/a/6141093
-     */
-    function touchHandler(event) {
-      var touches = event.changedTouches;
-      var first = touches[0];
-      var type = '';
-      switch (event.type) {
-        case 'touchstart':
-          type = 'mousedown';
-          break;
-        case 'touchmove':
-          type = 'mousemove';
-          break;
-        case 'touchend':
-          type = 'mouseup';
-          break;
-        default:
-          return;
-      }
-      // initMouseEvent(type, canBubble, cancelable, view, clickCount,
-      //                screenX, screenY, clientX, clientY, ctrlKey,
-      //                altKey, shiftKey, metaKey, button, relatedTarget);
-      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();
+  }), core.useSensor(core.TouchSensor, {
+    activationConstraint: {
+      delay: 50,
+      tolerance: 5
     }
-    optionBoxElement.addEventListener('touchstart', touchHandler, true);
-    optionBoxElement.addEventListener('touchmove', touchHandler, true);
-    optionBoxElement.addEventListener('touchend', touchHandler, true);
-    optionBoxElement.addEventListener('touchcancel', touchHandler, true);
-    return function () {
-      optionBoxElement.removeEventListener('touchstart', touchHandler, true);
-      optionBoxElement.removeEventListener('touchmove', touchHandler, true);
-      optionBoxElement.removeEventListener('touchend', touchHandler, true);
-      optionBoxElement.removeEventListener('touchcancel', touchHandler, true);
-    };
-  }, []);
+  }));
   // quiz response fetcher
   React__default.default.useEffect(function () {
     var _a, _b;
@@ -170,10 +141,11 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
         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) {
+        var answerList = answer.map(function (answer, index) {
           var _a, _b;
           return {
-            order: answer,
+            initialOrder: answer,
+            order: index,
             value: (_b = (_a = options[answer]) === null || _a === void 0 ? void 0 : _a.content) !== null && _b !== void 0 ? _b : ''
           };
         }, []);
@@ -182,6 +154,9 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
         }).map(function (option) {
           var _a;
           return {
+            initialOrder: options.findIndex(function (optionInfo) {
+              return optionInfo === option;
+            }),
             order: options.findIndex(function (optionInfo) {
               return optionInfo === option;
             }),
@@ -200,6 +175,7 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
       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 {
+          initialOrder: index,
           order: index,
           value: (_a = option === null || option === void 0 ? void 0 : option.content) !== null && _a !== void 0 ? _a : ''
         };
@@ -208,6 +184,7 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
         length: (_b = materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.correctOptionCount) !== null && _b !== void 0 ? _b : 0
       }, function () {
         return {
+          initialOrder: null,
           order: null,
           value: null
         };
@@ -238,6 +215,7 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
         var correctAnswerList = Array.isArray(materialQuizAnswerInfo) ? (_c = materialQuizAnswerInfo === null || materialQuizAnswerInfo === void 0 ? void 0 : materialQuizAnswerInfo.map(function (answerInfo) {
           var _a, _b, _c;
           return {
+            initialOrder: answerInfo,
             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 : ''
           };
@@ -245,6 +223,7 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
         var answerList = answer.map(function (answer) {
           var _a, _b;
           return {
+            initialOrder: answer,
             order: answer,
             value: (_b = (_a = options[answer]) === null || _a === void 0 ? void 0 : _a.content) !== null && _b !== void 0 ? _b : ''
           };
@@ -254,6 +233,9 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
         }).map(function (option) {
           var _a;
           return {
+            initialOrder: options.findIndex(function (optionInfo) {
+              return optionInfo === option;
+            }),
             order: options.findIndex(function (optionInfo) {
               return optionInfo === option;
             }),
@@ -271,7 +253,9 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
       };
     }
   }, [materialQuiz, userId]);
-  // submit handler
+  /**
+   * submit handler
+   */
   var handleSubmit = /*#__PURE__*/function () {
     var _ref5 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee() {
       var _yield$postOrgMateria, quizResponseId, _yield$getOrgMaterial, quizResponse;
@@ -290,8 +274,8 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
             return apiClient.postOrgMaterialQuizResponseAdd({
               materialQuizId: materialQuiz.id,
               answer: answerList.map(function (answer) {
-                return answer.order;
-              }) // FIXME: Type mismatch
+                return answer.initialOrder;
+              })
             });
           case 6:
             _yield$postOrgMateria = _context.sent;
@@ -328,48 +312,175 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
       return _ref5.apply(this, arguments);
     };
   }();
+  /**
+   *
+   */
+  var handleDragEnd = function handleDragEnd(event) {
+    var _a;
+    if (index.checkUserLectureTestEnded(lecture)) {
+      return;
+    }
+    var targetId = Number(event.active.id.split('-').pop());
+    var dropzoneId = (_a = event.over) === null || _a === void 0 ? void 0 : _a.id.toString();
+    setIsActive(true);
+    setHasSubmitted(false);
+    dropzoneId === 'quiz-options-dropzone' && onDirty(true);
+    if (dropzoneId === 'quiz-options-dropzone') {
+      handleDropOptionZone(event, targetId);
+    } else if (dropzoneId === null || dropzoneId === void 0 ? void 0 : dropzoneId.includes('quiz-dummy-zone')) {
+      handleDropDummyZone(event, targetId);
+    } else if (dropzoneId === null || dropzoneId === void 0 ? void 0 : dropzoneId.includes('quiz-answer-zone')) {
+      handleDropAnswerZone(event, targetId);
+    }
+  };
+  /**
+   *
+   */
+  var handleDropOptionZone = function handleDropOptionZone(event, targetId) {
+    var _a;
+    var isAnswerTarget = event.active.id.toString().includes('answer');
+    // option to option
+    if (!isAnswerTarget) {
+      return;
+    }
+    // answer to option
+    else {
+      var from = targetId;
+      var to = ((_a = event.over) === null || _a === void 0 ? void 0 : _a.id) === 'quiz-options-dropzone' ? optionList.length : 0;
+      setOptionList(function (prevOptionList) {
+        var _a, _b, _c;
+        var newState = _rollupPluginBabelHelpers.toConsumableArray(prevOptionList);
+        newState[to] = {
+          initialOrder: (_a = answerList[from]) === null || _a === void 0 ? void 0 : _a.initialOrder,
+          order: to,
+          value: (_c = (_b = answerList[from]) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : ''
+        };
+        return newState;
+      });
+      setAnswerList(function (prevAnswerList) {
+        var newState = _rollupPluginBabelHelpers.toConsumableArray(prevAnswerList);
+        newState[from] = {
+          initialOrder: null,
+          order: null,
+          value: null
+        };
+        return newState;
+      });
+    }
+  };
+  /**
+   *
+   */
+  var handleDropAnswerZone = function handleDropAnswerZone(event, targetId) {
+    var _a;
+    var isAnswerTarget = event.active.id.toString().includes('answer');
+    var dropzoneIndex = Number(((_a = event.over) === null || _a === void 0 ? void 0 : _a.id).split('-').pop());
+    var from = targetId;
+    var to = dropzoneIndex;
+    // answer to answer
+    if (isAnswerTarget) {
+      setAnswerList(function (prevAnswerList) {
+        var newState = _rollupPluginBabelHelpers.toConsumableArray(prevAnswerList);
+        newState[from].order = to;
+        newState[to].order = from;
+        var temp = newState[from];
+        newState[from] = newState[to];
+        newState[to] = temp;
+        return newState;
+      });
+    }
+    // option to answer
+    else {
+      setOptionList(function (prevOptionList) {
+        var _a, _b;
+        var newState = _rollupPluginBabelHelpers.toConsumableArray(prevOptionList);
+        newState[from] = {
+          initialOrder: (_a = answerList[to]) === null || _a === void 0 ? void 0 : _a.initialOrder,
+          order: from,
+          value: (_b = answerList[to]) === null || _b === void 0 ? void 0 : _b.value
+        };
+        return newState;
+      });
+      setAnswerList(function (prevAnswerList) {
+        var _a, _b, _c;
+        var newState = _rollupPluginBabelHelpers.toConsumableArray(prevAnswerList);
+        newState[to] = {
+          initialOrder: (_a = optionList[from]) === null || _a === void 0 ? void 0 : _a.initialOrder,
+          order: to,
+          value: (_c = (_b = optionList[from]) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : null
+        };
+        return newState;
+      });
+    }
+  };
+  /**
+   *
+   */
+  var handleDropDummyZone = function handleDropDummyZone(event, targetId) {
+    var _a;
+    var isAnswerTarget = event.active.id.toString().includes('answer');
+    var dropzoneIndex = Number(((_a = event.over) === null || _a === void 0 ? void 0 : _a.id).split('-').pop());
+    var from = targetId;
+    var to = dropzoneIndex;
+    // option to dummy
+    if (!isAnswerTarget) {
+      setAnswerList(function (prevAnswerList) {
+        var _a, _b, _c;
+        var newState = _rollupPluginBabelHelpers.toConsumableArray(prevAnswerList);
+        newState[dropzoneIndex] = {
+          initialOrder: (_a = optionList[from]) === null || _a === void 0 ? void 0 : _a.initialOrder,
+          order: to,
+          value: (_c = (_b = optionList[from]) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : null
+        };
+        return newState;
+      });
+      setOptionList(function (prevOptionList) {
+        var newState = _rollupPluginBabelHelpers.toConsumableArray(prevOptionList);
+        // reorder
+        newState.splice(from, 1);
+        newState.forEach(function (option, index) {
+          if (option.order > targetId) {
+            newState[index].order -= 1;
+          }
+        });
+        return newState;
+      });
+    }
+    // answer to dummy
+    else {
+      setAnswerList(function (prevAnswerList) {
+        var _a, _b;
+        var newState = _rollupPluginBabelHelpers.toConsumableArray(prevAnswerList);
+        newState[to] = {
+          initialOrder: (_a = newState[from]) === null || _a === void 0 ? void 0 : _a.initialOrder,
+          order: to,
+          value: (_b = newState[from]) === null || _b === void 0 ? void 0 : _b.value
+        };
+        newState[from] = {
+          initialOrder: null,
+          order: null,
+          value: null
+        };
+        return newState;
+      });
+    }
+  };
+  /**
+   *
+   */
   var renderQuizDragOption = function renderQuizDragOption() {
     return jsxRuntime.jsxs(StyledQuizOptionsDropZone, {
+      id: "quiz-options-dropzone",
       disabled: !!userId,
       accept: ".quiz-answer",
-      onDrop: function 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;
-          });
-        });
-        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,
-                value: null
-              };
-            } else {
-              return answer;
-            }
-          });
-        });
-      },
       children: [optionList.map(function (option, index) {
         return jsxRuntime.jsx(QuizDraggbleOption.default, {
           disabled: !!userId,
-          id: option.order.toString(),
+          id: "quiz-option-".concat(index),
           className: "quiz-option",
           content: option.value,
           isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
-        }, option.order);
+        }, "quiz-option-".concat(index));
       }), optionList.length === 0 && !userId ? jsxRuntime.jsx(blocks.Flex, {
         align: "center",
         justify: "center",
@@ -387,6 +498,9 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
       }) : null]
     });
   };
+  /**
+   *
+   */
   var renderQuizDragAnswers = function renderQuizDragAnswers() {
     return jsxRuntime.jsx(StyledQuizAnswersDropZone, {
       children: answerList.map(function (option, index$1) {
@@ -409,70 +523,24 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
             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;
-                    }
-                  });
-                });
-              }
-            }
-          }, index$1);
+            indexOrder: index$1 + 1
+          }, "quiz-dummy-".concat(index$1));
         } else {
           return jsxRuntime.jsx(QuizDraggbleDroppedOption.default, {
-            id: option.order.toString(),
+            id: "option-answer-".concat(index$1),
             content: option.value,
             role: getRole(),
             disabled: !!userId,
             indexOrder: index$1 + 1,
             isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
-          }, index$1);
+          }, "option-answer-".concat(index$1));
         }
       })
     });
   };
+  //
+  //
+  //
   return jsxRuntime.jsx(QuestionBox.default, {
     title: materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionTitle,
     titlePrefix: "Q.",
@@ -509,47 +577,52 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
         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, {
+      }), jsxRuntime.jsx(core.DndContext, {
+        sensors: sensors,
+        onDragEnd: handleDragEnd,
+        children: jsxRuntime.jsxs("div", {
+          id: element.MATERIAL_QUIZ_ANSWER_ID,
+          children: [jsxRuntime.jsxs(StyledOptionBox, {
+            ref: optionBoxRef,
             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'
+            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
+                }
               })
-            }), 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, {})]
+            }), jsxRuntime.jsx(StyledHorizontalDivider, {
+              vertical: vertical
+            }), renderQuizDragAnswers()]
+          }), !!userId ? jsxRuntime.jsx(blocks.Flex, {
+            margintop: "1rem",
+            column: true,
+            children: jsxRuntime.jsxs(StyledQuizOptionsDropZone, {
+              id: "quiz-answers-dropzone",
+              disabled: true,
+              children: [jsxRuntime.jsx(blocks.Text, {
+                role: "white",
+                size: "small",
+                children: intl$1.formatMessage({
+                  id: 'materialQuiz.answer'
+                })
+              }), correctAnswerList.map(function (correctAnswer, index) {
+                return jsxRuntime.jsx(QuizDraggbleDroppedOption.default, {
+                  id: "option-answer-".concat(index),
+                  content: correctAnswer.value,
+                  disabled: true,
+                  role: "correct",
+                  indexOrder: index + 1,
+                  isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
+                }, "dropped-option-answer-".concat(index));
+              })]
+            })
+          }) : null, jsxRuntime.jsx(MaterialQuizAnswerExplanation.default, {})]
+        })
       })]
     })
   });

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

@@ -12,8 +12,9 @@ var material = require('@mui/material');
 var element = require('../../constant/element.js');
 var index = require('../../helpers/index.js');
 var useCaculatePassage = require('../../hooks/useCaculatePassage.js');
-require('../shared/QuizDraggbleOption.js');
+require('../shared/QuizDraggbleDroppedOption.js');
 require('../shared/QuizDraggbleDummyOption.js');
+require('../shared/QuizDraggbleOption.js');
 var QuestionRadio = require('../shared/question-radio/QuestionRadio.js');
 var QuestionRadioOption = require('../shared/question-radio/QuestionRadioOption.js');
 require('../shared/question-checkbox/QuestionCheckbox.js');

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var core = require('@dnd-kit/core');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var icons = require('@elice/icons');
@@ -19,7 +20,13 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
+//
+//
+//
 var QUIZ_OPTIONS_CONTENT_WIDTH = 534;
+//
+//
+//
 var StyledQuizAnswerWrapper = styled__default.default.div.withConfig({
   componentId: "sc-18trt81-0"
 })(["display:flex;flex-direction:column;flex:0 0 calc((100% - ", "px) / 2);"], QUIZ_OPTIONS_CONTENT_WIDTH);
@@ -41,6 +48,9 @@ var StyledQuizOptions = styled__default.default.div.withConfig({
 var StyledQuizOptionsDropzone = styled__default.default(EbDroppable.default).withConfig({
   componentId: "sc-18trt81-4"
 })(["display:flex;flex-wrap:wrap;gap:1rem;min-height:10.25rem;border-radius:0.5rem;outline:1px dashed ", ";&.ui-droppable-hover{outline:1px dashed ", ";}"], designTokens.base.color.navy4, designTokens.base.color.gray4);
+//
+//
+//
 var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop() {
   var intl$1 = intl.useRawEliceIntl();
   var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
@@ -52,6 +62,29 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop() {
     updateCurrentAnswer = _React$useContext.updateCurrentAnswer,
     updateCurrentOption = _React$useContext.updateCurrentOption,
     handleAnswerReset = _React$useContext.handleAnswerReset;
+  var sensors = core.useSensors(core.useSensor(core.MouseSensor, {
+    activationConstraint: {
+      distance: 10
+    }
+  }), core.useSensor(core.TouchSensor, {
+    activationConstraint: {
+      delay: 50,
+      tolerance: 5
+    }
+  }));
+  /**
+   *
+   */
+  var handleDragEnd = function handleDragEnd(e) {
+    var _a, _b, _c;
+    if (!e.over) {
+      return;
+    }
+    var targetId = Number(e.active.id);
+    var isOverOptionZone = ((_a = e.over) === null || _a === void 0 ? void 0 : _a.id) === 'quiz-options-dropzone';
+    var dropzoneIndex = Number((_c = (_b = e.over) === null || _b === void 0 ? void 0 : _b.id) === null || _c === void 0 ? void 0 : _c.split('-').pop());
+    isOverOptionZone ? updateCurrentOption(targetId) : updateCurrentAnswer(targetId, dropzoneIndex);
+  };
   /**
    *
    */
@@ -81,13 +114,10 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop() {
       }), jsxRuntime.jsx(blocks.Vspace, {
         height: 1
       }), jsxRuntime.jsx(StyledQuizAnswerDropzone, {
+        id: "quiz-answer-dropzone-".concat(dropzoneIndex),
         accept: ".quiz-answer",
         disabled: !!userId,
         isGroupAnswer: isGroupAnswer,
-        onDrop: function onDrop(event, ui) {
-          var targetId = Number(ui.draggable[0].id);
-          updateCurrentAnswer(targetId, dropzoneIndex);
-        },
         children: isGroupAnswer ? (_b = currentAnswerList[dropzoneIndex]) === null || _b === void 0 ? void 0 : _b.map(function (answer, index) {
           return jsxRuntime.jsx(MaterialQuizGroupOptionItem.default, {
             option: answer
@@ -148,11 +178,8 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop() {
         }), jsxRuntime.jsx(blocks.Vspace, {
           height: 1
         }), jsxRuntime.jsx(StyledQuizOptionsDropzone, {
+          id: "quiz-options-dropzone",
           accept: ".quiz-answer",
-          onDrop: function onDrop(event, ui) {
-            var targetId = Number(ui.draggable[0].id);
-            updateCurrentOption(targetId);
-          },
           children: currentOptionList.length ? currentOptionList.map(function (option, index) {
             return jsxRuntime.jsx(MaterialQuizGroupOptionItem.default, {
               option: option
@@ -177,10 +204,14 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop() {
   //
   //
   //
-  return jsxRuntime.jsxs(blocks.Flex, {
+  return jsxRuntime.jsx(blocks.Flex, {
     width: "100%",
     height: "100%",
-    children: [renderQuizContentLeft(), renderQuizContentOption(), renderQuizContentRight()]
+    children: jsxRuntime.jsxs(core.DndContext, {
+      sensors: sensors,
+      onDragEnd: handleDragEnd,
+      children: [renderQuizContentLeft(), renderQuizContentOption(), renderQuizContentRight()]
+    })
   });
 };