@elice/material-quiz 1.240130.1 → 1.240206.0-template.0

package/cjs/components/material-quiz/context/MaterialQuizContext.js

@@ -26,11 +26,19 @@ function MaterialQuizProvider({
     materialQuiz,
     materialLecturePage,
     refetch: refreshOrgMaterialQuiz
-  } = materialSharedUtils.useMaterialFetchRaw(types.enums.LectureMaterialType.Quiz, React.useCallback(signal => apiClient.getOrgMaterialQuizGet({
-    materialQuizId
-  }, {
-    signal
-  }), [materialQuizId]), canInit);
+  } = materialSharedUtils.useMaterialFetchRaw(types.enums.LectureMaterialType.Quiz, React.useCallback(async signal => {
+    await apiClient.postOrgMaterialQuizOptionsSetSelect({
+      materialQuizId
+    }, {
+      signal
+    });
+    return await apiClient.getOrgMaterialQuizGet({
+      materialQuizId,
+      userId
+    }, {
+      signal
+    });
+  }, [materialQuizId, userId]), canInit);
   const init = React.useCallback(async () => {
     const controller = new AbortController();
     const {

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

@@ -2,7 +2,7 @@ import React from 'react';
 import type { MarkdownEditorFileUploadReqFn } from '@elice/markdown';
 import type { GetOrgMaterialQuizGetResponses } from '@elice/types';
 import type { FormState } from 'react-hook-form';
-export type MaterialQuizEditValue = Pick<GetOrgMaterialQuizGetResponses['materialQuiz'], 'id' | 'questionTitle' | 'questionDescription' | 'optionType' | 'options' | 'answerInfo' | 'answerHint' | 'isAutoGrade' | 'explanationInfo' | 'groups'>;
+export type MaterialQuizEditValue = Pick<GetOrgMaterialQuizGetResponses['materialQuiz'], 'id' | 'questionTitle' | 'questionDescription' | 'optionType' | 'optionsDefault' | 'answerInfoDefault' | 'answerHint' | 'isAutoGrade' | 'explanationInfo' | 'groups' | 'optionsSetEnabled'>;
 export type MaterialQuizEditFormState = Pick<FormState<Record<string, any>>, 'isDirty' | 'isValid'>;
 export interface MaterialQuizEditProps {
     /** Value of material quiz edit form. */

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

@@ -9,8 +9,8 @@ var reactTransitionGroup = require('react-transition-group');
 var blocks = require('@elice/blocks');
 var markdown = require('@elice/markdown');
 var types = require('@elice/types');
+var material = require('@mui/material');
 var flattenDeep = require('lodash-es/flattenDeep');
-var styled = require('styled-components');
 var OptionGroup = require('./options/options-group/OptionGroup.js');
 var OptionSelectMultiple = require('./options/OptionSelectMultiple.js');
 var OptionSelectMultipleOrder = require('./options/OptionSelectMultipleOrder.js');
@@ -22,9 +22,6 @@ var context = require('./context.js');
 
 const MIN_TEXT_LENGTH = 1;
 const MAX_TEXT_LENGTH = 128;
-const StyledQuizOptionTypeSelectWrap = styled.div.withConfig({
-  componentId: "sc-1cf4b99-0"
-})(["display:flex;max-width:12rem;"]);
 const MaterialQuizEditContent = () => {
   const intl = reactIntl.useIntl();
   const {
@@ -36,13 +33,13 @@ const MaterialQuizEditContent = () => {
     watch,
     setValue
   } = reactHookForm.useFormContext();
-  const [watchedOptionType, watchedOptionInfo, watchedAnswerInfo, watchedAnswerHint, watchedExplanationInfo, watchedIsAutoGrade, watchedGroups] = watch(['optionType', 'options', 'answerInfo', 'answerHint', 'explanationInfo', 'isAutoGrade', 'groups']);
+  const [watchedOptionType, watchedOptionInfo, watchedAnswerInfo, watchedAnswerHint, watchedExplanationInfo, watchedIsAutoGrade, watchedGroups, optionsSetEnabled] = watch(['optionType', 'optionsDefault', 'answerInfoDefault', 'answerHint', 'explanationInfo', 'isAutoGrade', 'groups', 'optionsSetEnabled']);
   //
   // Change `options` according to `optionType`.
   //
   React.useEffect(() => {
     const get = () => {
-      const filteredNotMarkdownOptions = watchedOptionInfo.filter(option => {
+      const filteredNotMarkdownOptions = watchedOptionInfo === null || watchedOptionInfo === void 0 ? void 0 : watchedOptionInfo.filter(option => {
         var _a;
         return !((_a = option.content) === null || _a === void 0 ? void 0 : _a.includes('![]'));
       });
@@ -84,7 +81,7 @@ const MaterialQuizEditContent = () => {
           }
           return watchedOptionInfo;
         case types.enums.QuizOptionType.Group:
-          if (!watchedOptionInfo.length) {
+          if (!(watchedOptionInfo === null || watchedOptionInfo === void 0 ? void 0 : watchedOptionInfo.length)) {
             // add default option info
             return [{
               id: randomId.createRandomId(),
@@ -123,7 +120,7 @@ const MaterialQuizEditContent = () => {
           return [];
       }
     };
-    setValue('options', get());
+    setValue('optionsDefault', get());
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [watchedOptionType, setValue, intl]);
@@ -159,7 +156,7 @@ const MaterialQuizEditContent = () => {
           return [];
       }
     };
-    setValue('answerInfo', get());
+    setValue('answerInfoDefault', get());
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [watchedOptionType, setValue, intl]);
@@ -252,10 +249,10 @@ const MaterialQuizEditContent = () => {
         return OptionSelectMultiple.default;
       case types.enums.QuizOptionType.SelectMultipleOrder:
         return OptionSelectMultipleOrder.default;
-      case types.enums.QuizOptionType.Text:
-        return OptionText.default;
       case types.enums.QuizOptionType.Group:
         return OptionGroup.default;
+      case types.enums.QuizOptionType.Text:
+        return OptionText.default;
       default:
         return React.Fragment;
     }
@@ -361,56 +358,93 @@ const MaterialQuizEditContent = () => {
         name: "optionType",
         render: ({
           field
-        }) => React.createElement(blocks.Tooltip, {
-          title: disabled ? intl.formatMessage({
-            id: 'content.option.tooltip.disabled'
-          }) : undefined,
+        }) => React.createElement(material.Tooltip, {
+          title: disabled && React.createElement(reactIntl.FormattedMessage, {
+            id: "content.option.tooltip.disabled"
+          }),
           placement: "top-end"
-        }, React.createElement(StyledQuizOptionTypeSelectWrap, null, React.createElement(blocks.Select, Object.assign({
-          size: "small",
-          width: "small",
-          readOnly: disabled
+        }, React.createElement(material.Stack, {
+          direction: "row",
+          justifyContent: "space-between",
+          marginBottom: "0.5rem"
+        }, React.createElement(material.TextField, Object.assign({
+          select: true,
+          disabled: disabled
         }, field, {
-          onChange: v => field.onChange(Number(v))
-        }), React.createElement("option", {
+          onChange: event => {
+            const isTextQuizOption = Number(event.target.value) === types.enums.QuizOptionType.Text;
+            if (isTextQuizOption) {
+              setValue('optionsSetEnabled', false);
+            }
+            field.onChange(event);
+          }
+        }), React.createElement(material.MenuItem, {
           value: types.enums.QuizOptionType.SelectOne,
           children: intl.formatMessage({
             id: 'content.option.select.items.selectOne'
           })
-        }), React.createElement("option", {
+        }), React.createElement(material.MenuItem, {
           value: types.enums.QuizOptionType.SelectMultiple,
           children: intl.formatMessage({
             id: 'content.option.select.items.selectMultiple'
           })
-        }), React.createElement("option", {
+        }), React.createElement(material.MenuItem, {
           value: types.enums.QuizOptionType.SelectMultipleOrder,
           children: intl.formatMessage({
             id: 'content.option.select.items.selectMultipleOrder'
           })
-        }), React.createElement("option", {
+        }), React.createElement(material.MenuItem, {
           value: types.enums.QuizOptionType.Group,
           children: intl.formatMessage({
             id: 'content.option.select.items.group'
           })
-        }), React.createElement("option", {
+        }), React.createElement(material.MenuItem, {
           value: types.enums.QuizOptionType.Text,
           children: intl.formatMessage({
             id: 'content.option.select.items.text'
           })
-        }))))
-      }), React.createElement(reactTransitionGroup.Transition, {
+        })), watchedOptionType !== types.enums.QuizOptionType.Text ? React.createElement(reactHookForm.Controller, {
+          name: "optionsSetEnabled",
+          control: control,
+          render: ({
+            field
+          }) => React.createElement(material.Tooltip, {
+            title: disabled ? '' : React.createElement(reactIntl.FormattedMessage, {
+              id: "content.option.optionsSetEnabled.tooltip"
+            }),
+            placement: "top"
+          }, React.createElement(material.FormControlLabel, {
+            disabled: disabled,
+            label: React.createElement(reactIntl.FormattedMessage, {
+              id: "content.option.optionsSetEnabled.label"
+            }),
+            control: React.createElement(material.Switch, Object.assign({}, field, {
+              checked: field.value
+            }))
+          }))
+        }) : null))
+      }), watchedOptionType !== types.enums.QuizOptionType.Text && optionsSetEnabled ? React.createElement(material.Alert, {
+        severity: "info",
+        sx: {
+          marginBottom: '1rem'
+        }
+      }, React.createElement(material.AlertTitle, null, React.createElement(reactIntl.FormattedMessage, {
+        id: "content.option.alert.randomized.title"
+      })), React.createElement(reactIntl.FormattedMessage, {
+        id: "content.option.alert.randomized.description"
+      })) : null, React.createElement(reactTransitionGroup.Transition, {
         in: watchedOptionType === types.enums.QuizOptionType.SelectMultipleOrder || watchedOptionType === types.enums.QuizOptionType.Group,
         timeout: 0,
         mountOnEnter: true,
         unmountOnExit: true
+      }, React.createElement(material.Box, {
+        marginBottom: "0.5rem"
       }, React.createElement(blocks.StatusText, {
         role: "description",
         preWrap: true
       }, React.createElement(reactIntl.FormattedMessage, {
         id: watchedOptionType === types.enums.QuizOptionType.SelectMultipleOrder ? 'content.option.statusText.dragNDrop' : 'content.option.statusText.dragNDropGroup'
-      }))), React.createElement(blocks.Vspace, {
-        height: 0.5
-      }), React.createElement(Option, null))
+      })))), React.createElement(Option, null))
     });
   };
   /**

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

@@ -13,6 +13,10 @@ export declare const en: {
     'content.option.select.items.selectMultiple': string;
     'content.option.select.items.selectMultipleOrder': string;
     'content.option.select.items.text': string;
+    'content.option.optionsSetEnabled.label': string;
+    'content.option.optionsSetEnabled.tooltip': string;
+    'content.option.alert.randomized.title': string;
+    'content.option.alert.randomized.description': string;
     'content.option.select.items.group': string;
     'content.option.statusText.dragNDrop': string;
     'content.option.statusText.dragNDropGroup': string;

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

@@ -15,6 +15,10 @@ const en = {
   'content.option.select.items.selectMultiple': 'Multiple Choice (Multiple Answers)',
   'content.option.select.items.selectMultipleOrder': 'Drag and Drop',
   'content.option.select.items.text': 'Subjective',
+  'content.option.optionsSetEnabled.label': 'Shuffle answer order',
+  'content.option.optionsSetEnabled.tooltip': 'When the feature is enabled, the order of answers is shuffled for each student',
+  'content.option.alert.randomized.title': 'Shuffling the order of answers is enabled',
+  'content.option.alert.randomized.description': 'Students will see the order of their answers shuffled',
   'content.option.select.items.group': 'Drag and Drop (Group Type)',
   'content.option.statusText.dragNDrop': "After entering the options, click in the order of the correct answers.\nYou can check the configured problem in the Learner's Materials tab on the left.",
   'content.option.statusText.dragNDropGroup': "You can check the configured problem in the Learner's Materials tab on the left.",
@@ -70,6 +74,10 @@ const ko = {
   'content.option.select.items.selectMultiple': '객관식 (다중 선택)',
   'content.option.select.items.selectMultipleOrder': '드래그 앤 드롭',
   'content.option.select.items.text': '주관식',
+  'content.option.optionsSetEnabled.label': '답안 순서 섞기',
+  'content.option.optionsSetEnabled.tooltip': '기능 활성화 시 학생마다 답안의 순서가 섞여서 표시됩니다.',
+  'content.option.alert.randomized.title': '답안 순서 섞기가 활성화 되어있습니다.',
+  'content.option.alert.randomized.description': '학생에게 답안의 순서가 섞여서 표시됩니다.',
   'content.option.select.items.group': '드래그 앤 드롭 (그룹형)',
   'content.option.statusText.dragNDrop': '보기를 입력한 후 정답 순서대로 클릭하세요.\n구성된 문제는 좌측 학습자료 탭에서 확인하실 수 있습니다.',
   'content.option.statusText.dragNDropGroup': '구성된 문제는 좌측 학습자료 탭에서 확인하실 수 있습니다.',

package/cjs/components/material-quiz-edit/options/OptionEditor.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 interface OptionTextareaProps extends Omit<React.HTMLAttributes<HTMLTextAreaElement>, 'prefix' | 'onChange'> {
+    index: number;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
     invalid?: boolean;

package/cjs/components/material-quiz-edit/options/OptionEditor.js

@@ -6,21 +6,26 @@ var tslib = require('tslib');
 var React = require('react');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
+var material = require('@mui/material');
 var classNames = require('classnames');
 var styled = require('styled-components');
 
 //
 //
 //
+const SHEET_Z_INDEX = 982; // prevent override blocks components.
 const PREFIX = 'em-option-editor';
 //
 //
 //
-const StyledTextarea = styled(blocks.Textarea).withConfig({
+const StyledSortedListItem = styled(blocks.SortableListItem).withConfig({
   componentId: "sc-50ghuz-0"
-})(["padding:0.75rem 3rem;&.focus{border:1px solid ", ";}", ";", ";", ";"], designTokens.base.color.primary6, props => props.invalid ? styled.css(["border:1px solid ", " !important;"], designTokens.base.color.red8) : null, props => props.disabled ? styled.css(["background-color:", ";cursor:not-allowed;"], designTokens.base.color.gray2) : null, props => props.readOnly ? styled.css(["background-color:#f0f1f3;"]) : null);
-const StyledTextareaWrap = styled.div.withConfig({
+})(["display:flex;padding:0;flex:1;z-index:", ";padding:0;background:transparent;box-shadow:none;margin:0;"], SHEET_Z_INDEX + 1);
+const StyledTextarea = styled(blocks.Textarea).withConfig({
   componentId: "sc-50ghuz-1"
+})(["padding:0.75rem 3rem;&.focus{border:1px solid ", ";}", ";", ";", ";"], designTokens.base.color.primary6, props => props.invalid ? styled.css(["border:1px solid ", " !important;"], designTokens.base.color.red8) : null, props => props.disabled ? styled.css(["background-color:", ";cursor:not-allowed;"], designTokens.base.color.gray2) : null, props => props.readOnly ? styled.css(["background-color:", ";"], designTokens.base.color.gray1) : null);
+const StyledTextareaWrap = styled.div.withConfig({
+  componentId: "sc-50ghuz-2"
 })(["display:flex;position:relative;.em-option-editor-adornment{position:absolute;top:50%;transform:translateY(-50%);z-index:1;&.prefix{left:1rem;}&.suffix{right:1rem;}}"]);
 //
 //
@@ -31,9 +36,10 @@ const OptionEditor = React.forwardRef((_a, ref) => {
       prefix,
       invalid,
       invalidText,
-      readOnly
+      readOnly,
+      index
     } = _a,
-    props = tslib.__rest(_a, ["suffix", "prefix", "invalid", "invalidText", "readOnly"]);
+    props = tslib.__rest(_a, ["suffix", "prefix", "invalid", "invalidText", "readOnly", "index"]);
   /**
    * Extract textarea element from legacy TextArea ref prop.
    */
@@ -45,8 +51,12 @@ const OptionEditor = React.forwardRef((_a, ref) => {
     const textAreaInput = (_a = textAreaApi === null || textAreaApi === void 0 ? void 0 : textAreaApi.input) !== null && _a !== void 0 ? _a : null;
     typeof ref === 'function' ? ref(textAreaInput) : ref.current = textAreaInput;
   }, [ref]);
-  return React.createElement("div", {
-    className: classNames(PREFIX, props.className)
+  return React.createElement(StyledSortedListItem, {
+    index: index,
+    disabled: readOnly
+  }, React.createElement(material.Box, {
+    className: classNames(PREFIX, props.className),
+    flex: 1
   }, React.createElement(StyledTextareaWrap, {
     className: `${PREFIX}-textarea-wrapper`
   }, prefix ? React.createElement("div", {
@@ -56,18 +66,22 @@ const OptionEditor = React.forwardRef((_a, ref) => {
     invalid: invalid,
     readOnly: readOnly,
     resetFocus: props.onBlur,
+    disabled: readOnly,
     "aria-disabled": props.disabled
   })), suffix ? React.createElement("div", {
-    className: `${PREFIX}-adornment suffix`
-  }, suffix) : null), invalid ? React.createElement(blocks.Box, {
+    className: `${PREFIX}-adornment suffix`,
+    onDragStart: e => e.stopPropagation(),
+    onDragCapture: e => e.stopPropagation(),
+    onTouchStart: e => e.stopPropagation()
+  }, suffix) : null), invalid ? React.createElement(material.Box, {
     padding: "0 0.75rem",
-    margintop: "0.25rem",
+    marginTop: "0.25rem",
     className: `${PREFIX}-helperText-wrap`
   }, React.createElement(blocks.Text, {
     role: "red",
     size: "tiny",
     className: `${PREFIX}-helperText`
-  }, invalidText !== null && invalidText !== void 0 ? invalidText : '')) : null);
+  }, invalidText !== null && invalidText !== void 0 ? invalidText : '')) : null));
 });
 
 exports.default = OptionEditor;

package/cjs/components/material-quiz-edit/options/OptionSelectMultiple.js

@@ -5,9 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 var reactIntl = require('react-intl');
+var reactSortableHoc = require('react-sortable-hoc');
 var reactTransitionGroup = require('react-transition-group');
 var blocks = require('@elice/blocks');
 var icons = require('@elice/icons');
+var lodashEs = require('lodash-es');
 var styled = require('styled-components');
 var context = require('../context.js');
 var randomId = require('../utils/randomId.js');
@@ -17,8 +19,8 @@ const MIN_OPTION_INFO_COUNT = 2;
 const MAX_OPTION_INFO_COUNT = 20;
 const StyledWrap = styled.div.withConfig({
   componentId: "sc-1nbx9b8-0"
-})([""]);
-const StyledInputGroup = styled.div.withConfig({
+})(["& > ul{display:flex;flex-direction:column;gap:0.75rem;}"]);
+const StyledInputGroup = styled(blocks.SortableListGroup).withConfig({
   componentId: "sc-1nbx9b8-1"
 })(["width:100%;.em-option-editor{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
 const OptionSelectMultiple = () => {
@@ -29,29 +31,36 @@ const OptionSelectMultiple = () => {
   const {
     control,
     getValues,
-    setValue,
-    watch
+    setValue
   } = reactHookForm.useFormContext();
   const {
     fields: optionInfoFields,
     append: appendOptionInfoFieldItem,
-    remove: removeOptionInfoFieldItem
+    remove: removeOptionInfoFieldItem,
+    move: moveOptionInfoFieldItem
   } = reactHookForm.useFieldArray({
     control,
-    name: 'options',
+    name: 'optionsDefault',
     keyName: 'id',
     shouldUnregister: true
   });
-  const watchedAnswerInfo = watch('answerInfo');
+  const watchedAnswerInfo = reactHookForm.useWatch({
+    control,
+    name: 'answerInfoDefault'
+  });
+  const watchedOptions = reactHookForm.useWatch({
+    control,
+    name: 'optionsDefault'
+  });
   /**
    * Update answer info.
    */
   const updateAnswerInfo = option => {
-    const prevAnswerInfo = getValues('answerInfo');
+    const prevAnswerInfo = getValues('answerInfoDefault');
     if (!Array.isArray(prevAnswerInfo)) {
       return;
     }
-    setValue('answerInfo', !option.checked ? prevAnswerInfo.filter(answerIndex => answerIndex !== option.index).map(answerIndex => option.removed ?
+    setValue('answerInfoDefault', !option.checked ? prevAnswerInfo.filter(answerIndex => answerIndex !== option.index).map(answerIndex => option.removed ?
     // if answer removed, re-calculate answer index
     answerIndex < option.index ? answerIndex : answerIndex - 1 :
     // or maintain current answer index
@@ -81,6 +90,22 @@ const OptionSelectMultiple = () => {
     });
     removeOptionInfoFieldItem(index);
   };
+  /**
+   * Sort options based on the old and new index.
+   */
+  const handleSortEnd = ({
+    oldIndex,
+    newIndex
+  }) => {
+    const prevAnswerInfo = lodashEs.cloneDeep(watchedAnswerInfo);
+    const prevOptions = lodashEs.cloneDeep(watchedOptions).map((option, index) => Object.assign(Object.assign({}, option), {
+      isAnswer: prevAnswerInfo.includes(index)
+    }));
+    const updatedOptions = reactSortableHoc.arrayMove(prevOptions, oldIndex, newIndex);
+    const updatedAnswerInfo = updatedOptions.map((option, index) => option.isAnswer ? index : null).filter(option => option !== null);
+    setValue('answerInfoDefault', updatedAnswerInfo);
+    moveOptionInfoFieldItem(oldIndex, newIndex);
+  };
   //
   //
   //
@@ -88,7 +113,7 @@ const OptionSelectMultiple = () => {
     return null;
   }
   return React.createElement(StyledWrap, null, React.createElement(reactHookForm.Controller, {
-    name: "answerInfo",
+    name: "answerInfoDefault",
     control: control,
     rules: {
       validate: v => {
@@ -116,12 +141,16 @@ const OptionSelectMultiple = () => {
         height: 0.5
       })));
     }
-  }), React.createElement(StyledInputGroup, null, optionInfoFields.map(({
+  }), React.createElement(StyledInputGroup, {
+    pressDelay: 100,
+    useDragHandle: true,
+    onSortEnd: handleSortEnd
+  }, optionInfoFields.map(({
     id
   }, index) => React.createElement(reactHookForm.Controller, {
     key: id,
     control: control,
-    name: `options.${index}.content`,
+    name: `optionsDefault.${index}.content`,
     rules: {
       required: {
         value: true,
@@ -136,6 +165,7 @@ const OptionSelectMultiple = () => {
     }) => {
       var _a;
       return React.createElement(OptionEditor.default, Object.assign({
+        index: index,
         invalid: fieldState.invalid,
         invalidText: (_a = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
         readOnly: disabled,

package/cjs/components/material-quiz-edit/options/OptionSelectMultipleOrder.js

@@ -5,9 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 var reactIntl = require('react-intl');
+var reactSortableHoc = require('react-sortable-hoc');
 var reactTransitionGroup = require('react-transition-group');
 var blocks = require('@elice/blocks');
 var icons = require('@elice/icons');
+var lodashEs = require('lodash-es');
 var styled = require('styled-components');
 var context = require('../context.js');
 var randomId = require('../utils/randomId.js');
@@ -17,8 +19,8 @@ const MIN_OPTION_INFO_COUNT = 2;
 const MAX_OPTION_INFO_COUNT = 20;
 const StyledWrap = styled.div.withConfig({
   componentId: "sc-1xufc1p-0"
-})([""]);
-const StyledInputGroup = styled.div.withConfig({
+})(["& > ul{display:flex;flex-direction:column;gap:0.75rem;}"]);
+const StyledInputGroup = styled(blocks.SortableListGroup).withConfig({
   componentId: "sc-1xufc1p-1"
 })(["width:100%;.em-option-editor{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
 const OptionSelectMultipleOrder = () => {
@@ -29,28 +31,35 @@ const OptionSelectMultipleOrder = () => {
   const {
     control,
     getValues,
-    setValue,
-    watch
+    setValue
   } = reactHookForm.useFormContext();
   const {
     fields: optionInfoFields,
     append: appendOptionInfoFieldItem,
-    remove: removeOptionInfoFieldItem
+    remove: removeOptionInfoFieldItem,
+    move: moveOptionInfoFieldItem
   } = reactHookForm.useFieldArray({
-    name: 'options',
+    name: 'optionsDefault',
     keyName: 'id',
     shouldUnregister: true
   });
-  const watchedAnswerInfo = watch('answerInfo');
+  const watchedAnswerInfo = reactHookForm.useWatch({
+    control,
+    name: 'answerInfoDefault'
+  });
+  const watchedOptions = reactHookForm.useWatch({
+    control,
+    name: 'optionsDefault'
+  });
   /**
    * Update answer info.
    */
   const updateAnswerInfo = option => {
-    const prevAnswerInfo = getValues('answerInfo');
+    const prevAnswerInfo = getValues('answerInfoDefault');
     if (!Array.isArray(prevAnswerInfo)) {
       return;
     }
-    setValue('answerInfo', !option.checked ? prevAnswerInfo.filter(answerIndex => answerIndex !== option.index).map(answerIndex => option.removed ?
+    setValue('answerInfoDefault', !option.checked ? prevAnswerInfo.filter(answerIndex => answerIndex !== option.index).map(answerIndex => option.removed ?
     // if answer removed, re-calculate answer index
     answerIndex < option.index ? answerIndex : answerIndex - 1 :
     // or maintain current answer index
@@ -80,6 +89,21 @@ const OptionSelectMultipleOrder = () => {
     });
     removeOptionInfoFieldItem(index);
   };
+  /**
+   * Sort options based on the old and new index.
+   */
+  const handleSortEnd = ({
+    oldIndex,
+    newIndex
+  }) => {
+    const prevOptions = lodashEs.cloneDeep(watchedOptions).map((option, index) => Object.assign(Object.assign({}, option), {
+      originIndex: index
+    }));
+    const updatedOptions = reactSortableHoc.arrayMove(prevOptions, oldIndex, newIndex);
+    const updatedAnswerInfo = watchedAnswerInfo.map(answerIndex => updatedOptions.findIndex(option => option.originIndex === answerIndex));
+    setValue('answerInfoDefault', updatedAnswerInfo);
+    moveOptionInfoFieldItem(oldIndex, newIndex);
+  };
   //
   //
   //
@@ -87,7 +111,7 @@ const OptionSelectMultipleOrder = () => {
     return null;
   }
   return React.createElement(StyledWrap, null, React.createElement(reactHookForm.Controller, {
-    name: "answerInfo",
+    name: "answerInfoDefault",
     control: control,
     rules: {
       validate: v => {
@@ -115,12 +139,15 @@ const OptionSelectMultipleOrder = () => {
         height: 0.5
       })));
     }
-  }), React.createElement(StyledInputGroup, null, optionInfoFields.map(({
+  }), React.createElement(StyledInputGroup, {
+    useDragHandle: true,
+    onSortEnd: handleSortEnd
+  }, optionInfoFields.map(({
     id
   }, index) => React.createElement(reactHookForm.Controller, {
     key: id,
     control: control,
-    name: `options.${index}.content`,
+    name: `optionsDefault.${index}.content`,
     rules: {
       required: {
         value: true,
@@ -135,12 +162,13 @@ const OptionSelectMultipleOrder = () => {
     }) => {
       var _a;
       return React.createElement(OptionEditor.default, Object.assign({
+        index: index,
         placeholder: intl.formatMessage({
           id: 'option.common.select.placeholder'
         }),
         prefix: React.createElement(blocks.Checkbox, {
-          checked: watchedAnswerInfo.includes(index),
           disabled: disabled,
+          checked: watchedAnswerInfo.includes(index),
           altChar: watchedAnswerInfo.indexOf(index) + 1,
           onChange: checked => updateAnswerInfo({
             index,