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

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

@@ -1,6 +1,7 @@
 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 { useSensors, useSensor, MouseSensor, TouchSensor, DndContext } from '@dnd-kit/core';
 import { getOrgMaterialQuizResponseGet, getOrgMaterialQuizResponseList, postOrgMaterialQuizResponseAdd } from '@elice/api-client';
 import { Icon, Flex, Text } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
@@ -22,6 +23,9 @@ import MaterialQuizInfo from './MaterialQuizInfo.js';
 import QuizResultBadge from './QuizResultBadge.js';
 import QuizSubmitStatusText from './QuizSubmitStatusText.js';
 
+//
+//
+//
 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;", ""], function (_ref) {
@@ -46,6 +50,9 @@ var StyledOptionBox = styled.div.withConfig({
   var vertical = _ref3.vertical;
   return vertical ? "\n          flex-direction: column;\n        " : '';
 });
+//
+//
+//
 var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_ref4) {
   var hasInlinePassage = _ref4.hasInlinePassage;
   // context
@@ -100,52 +107,16 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
   }).length || !!userId;
   // ref
   var optionBoxRef = React.useRef(null);
-  // to make jquery touchable
-  React.useEffect(function () {
-    var optionBoxElement = optionBoxRef.current;
-    if (!optionBoxElement) {
-      return;
+  var sensors = useSensors(useSensor(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();
+  }), useSensor(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.useEffect(function () {
     var _a, _b;
@@ -161,10 +132,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 : ''
           };
         }, []);
@@ -173,6 +145,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;
             }),
@@ -191,6 +166,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 : ''
         };
@@ -199,6 +175,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
         };
@@ -229,6 +206,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 : ''
           };
@@ -236,6 +214,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 : ''
           };
@@ -245,6 +224,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;
             }),
@@ -262,7 +244,9 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
       };
     }
   }, [materialQuiz, userId]);
-  // submit handler
+  /**
+   * submit handler
+   */
   var handleSubmit = /*#__PURE__*/function () {
     var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       var _yield$postOrgMateria, quizResponseId, _yield$getOrgMaterial, quizResponse;
@@ -281,8 +265,8 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
             return postOrgMaterialQuizResponseAdd({
               materialQuizId: materialQuiz.id,
               answer: answerList.map(function (answer) {
-                return answer.order;
-              }) // FIXME: Type mismatch
+                return answer.initialOrder;
+              })
             });
           case 6:
             _yield$postOrgMateria = _context.sent;
@@ -319,48 +303,175 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
       return _ref5.apply(this, arguments);
     };
   }();
+  /**
+   *
+   */
+  var handleDragEnd = function handleDragEnd(event) {
+    var _a;
+    if (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 = _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 = _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 = _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 = _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 = _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 = _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 = _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 = _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 jsxs(StyledQuizOptionsDropZone, {
+      id: "quiz-options-dropzone",
       disabled: !!userId,
       accept: ".quiz-answer",
-      onDrop: function onDrop(event, ui) {
-        if (checkUserLectureTestEnded(lecture)) {
-          return;
-        }
-        setIsActive(true);
-        setHasSubmitted(false);
-        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(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 jsx(QuizDraggbleOption, {
           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 ? jsx(Flex, {
         align: "center",
         justify: "center",
@@ -378,6 +489,9 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
       }) : null]
     });
   };
+  /**
+   *
+   */
   var renderQuizDragAnswers = function renderQuizDragAnswers() {
     return jsx(StyledQuizAnswersDropZone, {
       children: answerList.map(function (option, index) {
@@ -400,70 +514,24 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
             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;
-                    }
-                  });
-                });
-              }
-            }
-          }, index);
+            indexOrder: index + 1
+          }, "quiz-dummy-".concat(index));
         } else {
           return jsx(QuizDraggbleDroppedOption, {
-            id: option.order.toString(),
+            id: "option-answer-".concat(index),
             content: option.value,
             role: getRole(),
             disabled: !!userId,
             indexOrder: index + 1,
             isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
-          }, index);
+          }, "option-answer-".concat(index));
         }
       })
     });
   };
+  //
+  //
+  //
   return jsx(QuestionBox, {
     title: materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionTitle,
     titlePrefix: "Q.",
@@ -500,47 +568,52 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
         children: jsx(MaterialQuizInfo, {
           renderWithBox: false
         })
-      }), jsxs("div", {
-        id: MATERIAL_QUIZ_ANSWER_ID,
-        children: [jsxs(StyledOptionBox, {
-          ref: optionBoxRef,
-          vertical: vertical,
-          children: [renderQuizDragOption(), jsx(StyledVerticalDivider, {
+      }), jsx(DndContext, {
+        sensors: sensors,
+        onDragEnd: handleDragEnd,
+        children: jsxs("div", {
+          id: MATERIAL_QUIZ_ANSWER_ID,
+          children: [jsxs(StyledOptionBox, {
+            ref: optionBoxRef,
             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'
+            children: [renderQuizDragOption(), jsx(StyledVerticalDivider, {
+              vertical: vertical,
+              children: jsx(Icon, {
+                size: "elephant",
+                icon: eilSortItem,
+                rotate: 90,
+                style: {
+                  color: base.color.navy3
+                }
               })
-            }), 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, {})]
+            }), jsx(StyledHorizontalDivider, {
+              vertical: vertical
+            }), renderQuizDragAnswers()]
+          }), !!userId ? jsx(Flex, {
+            margintop: "1rem",
+            column: true,
+            children: jsxs(StyledQuizOptionsDropZone, {
+              id: "quiz-answers-dropzone",
+              disabled: true,
+              children: [jsx(Text, {
+                role: "white",
+                size: "small",
+                children: intl.formatMessage({
+                  id: 'materialQuiz.answer'
+                })
+              }), correctAnswerList.map(function (correctAnswer, index) {
+                return jsx(QuizDraggbleDroppedOption, {
+                  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, jsx(MaterialQuizAnswerExplanation, {})]
+        })
       })]
     })
   });

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

@@ -8,8 +8,9 @@ import { useTheme, Stack } from '@mui/material';
 import { MATERIAL_QUIZ_PASSIVE_ID, MATERIAL_QUIZ_ANSWER_ID } from '../../constant/element.js';
 import { checkUserLectureTestEnded, getOptionStatus, getQuizResult } from '../../helpers/index.js';
 import { useCaculatePassage } from '../../hooks/useCaculatePassage.js';
-import '../shared/QuizDraggbleOption.js';
+import '../shared/QuizDraggbleDroppedOption.js';
 import '../shared/QuizDraggbleDummyOption.js';
+import '../shared/QuizDraggbleOption.js';
 import QuestionRadio from '../shared/question-radio/QuestionRadio.js';
 import QuestionRadioOption from '../shared/question-radio/QuestionRadioOption.js';
 import '../shared/question-checkbox/QuestionCheckbox.js';

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

@@ -1,5 +1,6 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
+import { useSensors, useSensor, MouseSensor, TouchSensor, DndContext } from '@dnd-kit/core';
 import { Flex, Button, Vspace, Text, Icon } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eilSortItem } from '@elice/icons';
@@ -10,7 +11,13 @@ import { useMaterialQuizState } from '../context/MaterialQuizContext.js';
 import QuizGroupContext from './context/context.js';
 import MaterialQuizGroupOptionItem from './MaterialQuizGroupOptionItem.js';
 
+//
+//
+//
 var QUIZ_OPTIONS_CONTENT_WIDTH = 534;
+//
+//
+//
 var StyledQuizAnswerWrapper = styled.div.withConfig({
   componentId: "sc-18trt81-0"
 })(["display:flex;flex-direction:column;flex:0 0 calc((100% - ", "px) / 2);"], QUIZ_OPTIONS_CONTENT_WIDTH);
@@ -32,6 +39,9 @@ var StyledQuizOptions = styled.div.withConfig({
 var StyledQuizOptionsDropzone = styled(EbDroppable).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 ", ";}"], base.color.navy4, base.color.gray4);
+//
+//
+//
 var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop() {
   var intl = useRawEliceIntl();
   var _useMaterialQuizState = useMaterialQuizState(),
@@ -43,6 +53,29 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop() {
     updateCurrentAnswer = _React$useContext.updateCurrentAnswer,
     updateCurrentOption = _React$useContext.updateCurrentOption,
     handleAnswerReset = _React$useContext.handleAnswerReset;
+  var sensors = useSensors(useSensor(MouseSensor, {
+    activationConstraint: {
+      distance: 10
+    }
+  }), useSensor(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);
+  };
   /**
    *
    */
@@ -72,13 +105,10 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop() {
       }), jsx(Vspace, {
         height: 1
       }), 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 jsx(MaterialQuizGroupOptionItem, {
             option: answer
@@ -139,11 +169,8 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop() {
         }), jsx(Vspace, {
           height: 1
         }), 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 jsx(MaterialQuizGroupOptionItem, {
               option: option
@@ -168,10 +195,14 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop() {
   //
   //
   //
-  return jsxs(Flex, {
+  return jsx(Flex, {
     width: "100%",
     height: "100%",
-    children: [renderQuizContentLeft(), renderQuizContentOption(), renderQuizContentRight()]
+    children: jsxs(DndContext, {
+      sensors: sensors,
+      onDragEnd: handleDragEnd,
+      children: [renderQuizContentLeft(), renderQuizContentOption(), renderQuizContentRight()]
+    })
   });
 };
 

package/es/components/shared/QuizDraggbleDroppedOption.d.ts

@@ -5,7 +5,7 @@ interface QuizDraggbleDroppedOptionProps {
     content: string;
     disabled: boolean;
     role: QuizDraggbleOptionRole;
-    indexOrder?: number;
+    indexOrder: number;
     isMarkdown?: boolean;
 }
 declare const QuizDraggbleDroppedOption: React.FC<QuizDraggbleDroppedOptionProps>;