@elice/material-quiz 1.241127.0 → 1.241202.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/cjs/components/material-quiz/MaterialQuizSelectMultipleOrder.js +4 -3
  2. package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroup.js +5 -2
  3. package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroupDesktop.js +6 -3
  4. package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroupMobile.js +5 -2
  5. package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroupOptionItem.d.ts +1 -0
  6. package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroupOptionItem.js +23 -19
  7. package/cjs/components/material-quiz/material-quiz-group/context/context.d.ts +1 -0
  8. package/cjs/components/shared/QuizDraggbleOption.js +26 -23
  9. package/es/components/material-quiz/MaterialQuizSelectMultipleOrder.js +4 -3
  10. package/es/components/material-quiz/material-quiz-group/MaterialQuizGroup.js +6 -3
  11. package/es/components/material-quiz/material-quiz-group/MaterialQuizGroupDesktop.js +6 -3
  12. package/es/components/material-quiz/material-quiz-group/MaterialQuizGroupMobile.js +5 -2
  13. package/es/components/material-quiz/material-quiz-group/MaterialQuizGroupOptionItem.d.ts +1 -0
  14. package/es/components/material-quiz/material-quiz-group/MaterialQuizGroupOptionItem.js +23 -19
  15. package/es/components/material-quiz/material-quiz-group/context/context.d.ts +1 -0
  16. package/es/components/shared/QuizDraggbleOption.js +26 -23
  17. package/package.json +6 -6
package/cjs/components/material-quiz/MaterialQuizSelectMultipleOrder.js CHANGED
@@ -115,6 +115,7 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
115
115
  var isDisabled = (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.correctOptionCount) !== answerList.filter(function (answer) {
116
116
  return answer.order !== null;
117
117
  }).length || !!userId;
118
+ var isOptionDisabled = index.checkUserLectureTestEnded(lecture);
118
119
  var isTestLecture = (lecture === null || lecture === void 0 ? void 0 : lecture.lectureType) === types.enums.LectureType.Test;
119
120
  // ref
120
121
  var optionBoxRef = React__default.default.useRef(null);
@@ -473,11 +474,11 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
473
474
  var renderQuizDragOption = function renderQuizDragOption() {
474
475
  return jsxRuntime.jsxs(StyledQuizOptionsDropZone, {
475
476
  id: "quiz-options-dropzone",
476
- disabled: !!userId,
477
+ disabled: isOptionDisabled,
477
478
  accept: ".quiz-answer",
478
479
  children: [optionList.map(function (option, index) {
479
480
  return jsxRuntime.jsx(QuizDraggbleOption.default, {
480
- disabled: !!userId,
481
+ disabled: isOptionDisabled,
481
482
  id: "quiz-option-".concat(index),
482
483
  className: "quiz-option",
483
484
  content: option.value,
@@ -534,7 +535,7 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
534
535
  id: "option-answer-".concat(index$1),
535
536
  content: option.value,
536
537
  role: getRole(),
537
- disabled: !!userId,
538
+ disabled: isOptionDisabled,
538
539
  indexOrder: index$1 + 1,
539
540
  isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
540
541
  }, "option-answer-".concat(index$1));
package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroup.js CHANGED
@@ -41,7 +41,8 @@ var MaterialQuizGroup = function MaterialQuizGroup() {
41
41
  materialQuiz = _useMaterialQuizState.materialQuiz,
42
42
  userId = _useMaterialQuizState.userId,
43
43
  vertical = _useMaterialQuizState.vertical,
44
- isLongPassage = _useMaterialQuizState.isLongPassage;
44
+ isLongPassage = _useMaterialQuizState.isLongPassage,
45
+ lecture = _useMaterialQuizState.lecture;
45
46
  var _useMaterialQuizDispa = MaterialQuizContext.useMaterialQuizDispatch(),
46
47
  onSubmit = _useMaterialQuizDispa.onSubmit,
47
48
  onNext = _useMaterialQuizDispa.onNext,
@@ -82,6 +83,7 @@ var MaterialQuizGroup = function MaterialQuizGroup() {
82
83
  setHasSubmitted = _React$useState16[1];
83
84
  var isNextActive = hasSubmitted && typeof onNext === 'function';
84
85
  var isDisabled = !flattenDeep__default.default(currentAnswerList).length || !!userId;
86
+ var isOptionDisabled = index.checkUserLectureTestEnded(lecture);
85
87
  var _useCaculatePassage = useCaculatePassage.useCaculatePassage(),
86
88
  questionRef = _useCaculatePassage.questionRef,
87
89
  containerRef = _useCaculatePassage.containerRef;
@@ -358,6 +360,7 @@ var MaterialQuizGroup = function MaterialQuizGroup() {
358
360
  optionList: optionList,
359
361
  currentOptionList: currentOptionList,
360
362
  currentAnswerList: currentAnswerList,
363
+ isOptionDisabled: isOptionDisabled,
361
364
  onUpdateAnswer: setCurrentAnswerList,
362
365
  onUpdateOption: setCurrentOptionList,
363
366
  onUpdateHasSubmitted: setHasSubmitted,
@@ -380,7 +383,7 @@ var MaterialQuizGroup = function MaterialQuizGroup() {
380
383
  bodyContainerRef: containerRef,
381
384
  footerActions: [{
382
385
  border: false,
383
- disabled: isDisabled,
386
+ disabled: isDisabled || isOptionDisabled,
384
387
  loading: submitStatus === 'pending',
385
388
  tabIndex: 0,
386
389
  transparent: false,
package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroupDesktop.js CHANGED
@@ -65,6 +65,7 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop(_ref3) {
65
65
  groupList = _React$useContext.groupList,
66
66
  currentAnswerList = _React$useContext.currentAnswerList,
67
67
  currentOptionList = _React$useContext.currentOptionList,
68
+ isOptionDisabled = _React$useContext.isOptionDisabled,
68
69
  updateCurrentAnswer = _React$useContext.updateCurrentAnswer,
69
70
  updateCurrentOption = _React$useContext.updateCurrentOption,
70
71
  handleAnswerReset = _React$useContext.handleAnswerReset;
@@ -123,12 +124,13 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop(_ref3) {
123
124
  }), jsxRuntime.jsx(StyledQuizAnswerDropzone, {
124
125
  id: "quiz-answer-dropzone-".concat(dropzoneIndex),
125
126
  accept: ".quiz-answer",
126
- disabled: !!userId,
127
+ disabled: isOptionDisabled,
127
128
  isGroupAnswer: isGroupAnswer,
128
129
  children: isGroupAnswer ? (_b = currentAnswerList[dropzoneIndex]) === null || _b === void 0 ? void 0 : _b.map(function (answer, index$1) {
129
130
  var isHideStatus = !userId && (isActive || isTestLecture);
130
131
  var status = isHideStatus ? undefined : index.getQuizGroupOptionResultStatus(dropzoneIndex, index$1, answer.order, materialQuizResponse, materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.answerInfo);
131
132
  return jsxRuntime.jsx(MaterialQuizGroupOptionItem.default, {
133
+ disabled: isOptionDisabled,
132
134
  status: status,
133
135
  option: answer
134
136
  }, index$1);
@@ -180,7 +182,7 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop(_ref3) {
180
182
  children: [jsxRuntime.jsx(blocks.Button, {
181
183
  role: "white",
182
184
  size: "small",
183
- disabled: !!userId,
185
+ disabled: isOptionDisabled,
184
186
  onClick: handleAnswerReset,
185
187
  children: intl$1.formatMessage({
186
188
  id: 'materialQuiz.dropzone.optionReset'
@@ -192,7 +194,8 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop(_ref3) {
192
194
  accept: ".quiz-answer",
193
195
  children: currentOptionList.length ? currentOptionList.map(function (option, index) {
194
196
  return jsxRuntime.jsx(MaterialQuizGroupOptionItem.default, {
195
- option: option
197
+ option: option,
198
+ disabled: isOptionDisabled
196
199
  }, index);
197
200
  }) : jsxRuntime.jsx(blocks.Flex, {
198
201
  justify: "center",
package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroupMobile.js CHANGED
@@ -55,6 +55,7 @@ var MaterialQuizGroupMobile = function MaterialQuizGroupMobile(_ref3) {
55
55
  var _React$useContext = React__default.default.useContext(context.default),
56
56
  currentOptionList = _React$useContext.currentOptionList,
57
57
  currentAnswerList = _React$useContext.currentAnswerList,
58
+ isOptionDisabled = _React$useContext.isOptionDisabled,
58
59
  updateCurrentAnswer = _React$useContext.updateCurrentAnswer,
59
60
  updateCurrentOption = _React$useContext.updateCurrentOption,
60
61
  handleAnswerReset = _React$useContext.handleAnswerReset;
@@ -71,7 +72,7 @@ var MaterialQuizGroupMobile = function MaterialQuizGroupMobile(_ref3) {
71
72
  children: [jsxRuntime.jsx(blocks.Button, {
72
73
  role: "white",
73
74
  size: "small",
74
- disabled: !!userId,
75
+ disabled: isOptionDisabled,
75
76
  onClick: handleAnswerReset,
76
77
  block: true,
77
78
  children: intl$1.formatMessage({
@@ -108,6 +109,7 @@ var MaterialQuizGroupMobile = function MaterialQuizGroupMobile(_ref3) {
108
109
  var status = isHideStatus ? undefined : index.getQuizGroupOptionResultStatus(index$1, answerIndex, answer.order, materialQuizResponse, materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.answerInfo);
109
110
  return jsxRuntime.jsx(MaterialQuizGroupOptionItem.default, {
110
111
  option: answer,
112
+ disabled: isOptionDisabled,
111
113
  status: status,
112
114
  onClose: function onClose() {
113
115
  var targetId = answer.order;
@@ -160,7 +162,8 @@ var MaterialQuizGroupMobile = function MaterialQuizGroupMobile(_ref3) {
160
162
  updateCurrentAnswer(targetId, dropzoneIndex);
161
163
  },
162
164
  children: jsxRuntime.jsx(MaterialQuizGroupOptionItem.default, {
163
- option: option
165
+ option: option,
166
+ disabled: isOptionDisabled
164
167
  }, index)
165
168
  }, index);
166
169
  }) : jsxRuntime.jsx(blocks.Text, {
package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroupOptionItem.d.ts CHANGED
@@ -3,6 +3,7 @@ import type { QuizGroupOption } from './context/context';
3
3
  type Status = 'correct' | 'wrong' | 'answer';
4
4
  interface MaterialQuizGroupOptionProps {
5
5
  option: QuizGroupOption;
6
+ disabled?: boolean;
6
7
  status?: Status;
7
8
  onClose?: () => void;
8
9
  }
package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroupOptionItem.js CHANGED
@@ -40,20 +40,23 @@ var StyledDraggbleOption = /*#__PURE__*/_styled__default.default(EbDraggable.def
40
40
  default:
41
41
  return '3px solid transparent';
42
42
  }
43
+ }, ";cursor:", function (_ref4) {
44
+ var disabled = _ref4.disabled;
45
+ return disabled ? 'not-allowed !important' : 'auto';
43
46
  }, ";");
44
47
  var StyledOptionTitle = /*#__PURE__*/_styled__default.default("div", {
45
48
  target: "ex64yhy2"
46
- })("display:flex;justify-content:center;align-items:center;width:", function (_ref4) {
47
- var vertical = _ref4.vertical,
48
- isOptionContent = _ref4.isOptionContent;
49
- return isOptionContent ? '100%' : vertical ? '10.25rem' : '11.5rem';
50
- }, ";height:", function (_ref5) {
49
+ })("display:flex;justify-content:center;align-items:center;width:", function (_ref5) {
51
50
  var vertical = _ref5.vertical,
52
51
  isOptionContent = _ref5.isOptionContent;
53
- return isOptionContent ? 'auto' : vertical ? '10.25rem' : '11.5rem';
54
- }, ";padding:0.5rem;background:", designTokens.base.color.white, ";background-color:", function (_ref6) {
55
- var status = _ref6.status,
52
+ return isOptionContent ? '100%' : vertical ? '10.25rem' : '11.5rem';
53
+ }, ";height:", function (_ref6) {
54
+ var vertical = _ref6.vertical,
56
55
  isOptionContent = _ref6.isOptionContent;
56
+ return isOptionContent ? 'auto' : vertical ? '10.25rem' : '11.5rem';
57
+ }, ";padding:0.5rem;background:", designTokens.base.color.white, ";background-color:", function (_ref7) {
58
+ var status = _ref7.status,
59
+ isOptionContent = _ref7.isOptionContent;
57
60
  if (!isOptionContent) {
58
61
  return 'auto';
59
62
  }
@@ -68,26 +71,27 @@ var StyledOptionTitle = /*#__PURE__*/_styled__default.default("div", {
68
71
  }, ";");
69
72
  var StyledOptionContent = /*#__PURE__*/_styled__default.default("div", {
70
73
  target: "ex64yhy1"
71
- })("display:flex;align-items:center;width:", function (_ref7) {
72
- var vertical = _ref7.vertical;
73
- return vertical ? '10.25rem' : '11.5rem';
74
- }, ";height:", function (_ref8) {
74
+ })("display:flex;align-items:center;width:", function (_ref8) {
75
75
  var vertical = _ref8.vertical;
76
76
  return vertical ? '10.25rem' : '11.5rem';
77
+ }, ";height:", function (_ref9) {
78
+ var vertical = _ref9.vertical;
79
+ return vertical ? '10.25rem' : '11.5rem';
77
80
  }, ";background:", designTokens.base.color.navy8, ";& p{line-height:1;}");
78
81
  var StyledIconButton = /*#__PURE__*/_styled__default.default(material.IconButton, {
79
82
  target: "ex64yhy0"
80
- })("border-radius:50%;width:1.5rem;height:1.5rem;position:absolute;top:0.5rem;right:0.5rem;background-color:", function (_ref9) {
81
- var theme = _ref9.theme;
83
+ })("border-radius:50%;width:1.5rem;height:1.5rem;position:absolute;top:0.5rem;right:0.5rem;background-color:", function (_ref10) {
84
+ var theme = _ref10.theme;
82
85
  return theme.palette.action.active;
83
86
  }, ";align-self:flex-end;");
84
87
  //
85
88
  //
86
89
  //
87
- var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref10) {
88
- var option = _ref10.option,
89
- status = _ref10.status,
90
- onClose = _ref10.onClose;
90
+ var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref11) {
91
+ var option = _ref11.option,
92
+ status = _ref11.status,
93
+ disabled = _ref11.disabled,
94
+ onClose = _ref11.onClose;
91
95
  var _a;
92
96
  var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
93
97
  vertical = _useMaterialQuizState.vertical,
@@ -118,7 +122,7 @@ var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref10) {
118
122
  //
119
123
  //
120
124
  return jsxRuntime.jsxs(StyledDraggbleOption, {
121
- disabled: !!userId || vertical,
125
+ disabled: disabled || vertical,
122
126
  id: option.order.toString(),
123
127
  className: "quiz-answer",
124
128
  vertical: vertical,
package/cjs/components/material-quiz/material-quiz-group/context/context.d.ts CHANGED
@@ -11,6 +11,7 @@ interface QuizGroupContextValue {
11
11
  optionList: QuizGroupOption[];
12
12
  currentOptionList: QuizGroupOption[];
13
13
  currentAnswerList: QuizGroupOption[][];
14
+ isOptionDisabled: boolean;
14
15
  onDirty: (value: boolean) => void;
15
16
  onUpdateAnswer: (value: React.SetStateAction<QuizGroupOption[][]>) => void;
16
17
  onUpdateOption: (value: React.SetStateAction<QuizGroupOption[]>) => void;
package/cjs/components/shared/QuizDraggbleOption.js CHANGED
@@ -47,8 +47,11 @@ var StyledOrder = styled__default.default.div.withConfig({
47
47
  })(["width:1.5rem;height:1.5rem;display:flex;border-radius:4px;align-items:center;justify-content:center;color:", ";background-color:", ";flex:none;margin-left:0.5rem;"], designTokens.base.color.navy0, designTokens.base.color.navy4);
48
48
  var StyledQuizDraggbleOption = styled__default.default(EbDraggable.default).withConfig({
49
49
  componentId: "sc-19b0zkq-3"
50
- })(["display:flex;border-radius:8px;border:1px solid ", ";background-color:", ";overflow:hidden;&:not(:last-of-type){margin-bottom:1rem;}", "{background-color:", ";color:", ";}", "{background-color:", ";& *{color:", ";}}", "{background-color:", ";color:", ";}&.ui-draggable-dragging{z-index:1000 !important;color:", " !important;border:none !important;", "{background-color:", ";}", "{background-color:", ";border:1px solid ", " !important;}", "{color:", ";background-color:", ";}& *{color:", " !important;}}&.ui-draggable-dragging.quiz-answer{width:calc(100% - 1rem * 2);}"], designTokens.base.color.navy4, designTokens.base.color.navy5, StyledQuizDraggbleOptionHandle, function (_ref3) {
51
- var role = _ref3.role;
50
+ })(["display:flex;border-radius:8px;border:1px solid ", ";background-color:", ";overflow:hidden;cursor:", ";&:not(:last-of-type){margin-bottom:1rem;}", "{background-color:", ";color:", ";}", "{background-color:", ";& *{color:", ";}}", "{background-color:", ";color:", ";}&.ui-draggable-dragging{z-index:1000 !important;color:", " !important;border:none !important;", "{background-color:", ";}", "{background-color:", ";border:1px solid ", " !important;}", "{color:", ";background-color:", ";}& *{color:", " !important;}}&.ui-draggable-dragging.quiz-answer{width:calc(100% - 1rem * 2);}"], designTokens.base.color.navy4, designTokens.base.color.navy5, function (_ref3) {
51
+ var disabled = _ref3.disabled;
52
+ return disabled ? 'not-allowed !important' : 'auto';
53
+ }, StyledQuizDraggbleOptionHandle, function (_ref4) {
54
+ var role = _ref4.role;
52
55
  switch (role) {
53
56
  case 'answer':
54
57
  return designTokens.base.color.primary4;
@@ -60,8 +63,8 @@ var StyledQuizDraggbleOption = styled__default.default(EbDraggable.default).with
60
63
  default:
61
64
  return designTokens.base.color.navy3;
62
65
  }
63
- }, function (_ref4) {
64
- var role = _ref4.role;
66
+ }, function (_ref5) {
67
+ var role = _ref5.role;
65
68
  switch (role) {
66
69
  case 'answer':
67
70
  return designTokens.base.color.primary9;
@@ -73,8 +76,8 @@ var StyledQuizDraggbleOption = styled__default.default(EbDraggable.default).with
73
76
  default:
74
77
  return designTokens.base.color.navy5;
75
78
  }
76
- }, StyledQuizDraggbleOptionContent, function (_ref5) {
77
- var role = _ref5.role;
79
+ }, StyledQuizDraggbleOptionContent, function (_ref6) {
80
+ var role = _ref6.role;
78
81
  switch (role) {
79
82
  case 'answer':
80
83
  return designTokens.base.color.primary1;
@@ -86,8 +89,8 @@ var StyledQuizDraggbleOption = styled__default.default(EbDraggable.default).with
86
89
  default:
87
90
  return designTokens.base.color.navy5;
88
91
  }
89
- }, function (_ref6) {
90
- var role = _ref6.role;
92
+ }, function (_ref7) {
93
+ var role = _ref7.role;
91
94
  switch (role) {
92
95
  case 'answer':
93
96
  return designTokens.base.color.primary9;
@@ -99,8 +102,8 @@ var StyledQuizDraggbleOption = styled__default.default(EbDraggable.default).with
99
102
  default:
100
103
  return designTokens.base.color.navy0;
101
104
  }
102
- }, StyledOrder, function (_ref7) {
103
- var role = _ref7.role;
105
+ }, StyledOrder, function (_ref8) {
106
+ var role = _ref8.role;
104
107
  switch (role) {
105
108
  case 'answer':
106
109
  return designTokens.base.color.primary3;
@@ -112,8 +115,8 @@ var StyledQuizDraggbleOption = styled__default.default(EbDraggable.default).with
112
115
  default:
113
116
  return designTokens.base.color.navy4;
114
117
  }
115
- }, function (_ref8) {
116
- var role = _ref8.role;
118
+ }, function (_ref9) {
119
+ var role = _ref9.role;
117
120
  switch (role) {
118
121
  case 'answer':
119
122
  return designTokens.base.color.primary9;
@@ -129,17 +132,17 @@ var StyledQuizDraggbleOption = styled__default.default(EbDraggable.default).with
129
132
  //
130
133
  //
131
134
  //
132
- var QuizDraggbleOption = function QuizDraggbleOption(_ref9) {
133
- var id = _ref9.id,
134
- className = _ref9.className,
135
- content = _ref9.content,
136
- _ref9$disabled = _ref9.disabled,
137
- disabled = _ref9$disabled === void 0 ? false : _ref9$disabled,
138
- _ref9$role = _ref9.role,
139
- role = _ref9$role === void 0 ? 'default' : _ref9$role,
140
- indexOrder = _ref9.indexOrder,
141
- _ref9$isMarkdown = _ref9.isMarkdown,
142
- isMarkdown = _ref9$isMarkdown === void 0 ? false : _ref9$isMarkdown;
135
+ var QuizDraggbleOption = function QuizDraggbleOption(_ref10) {
136
+ var id = _ref10.id,
137
+ className = _ref10.className,
138
+ content = _ref10.content,
139
+ _ref10$disabled = _ref10.disabled,
140
+ disabled = _ref10$disabled === void 0 ? false : _ref10$disabled,
141
+ _ref10$role = _ref10.role,
142
+ role = _ref10$role === void 0 ? 'default' : _ref10$role,
143
+ indexOrder = _ref10.indexOrder,
144
+ _ref10$isMarkdown = _ref10.isMarkdown,
145
+ isMarkdown = _ref10$isMarkdown === void 0 ? false : _ref10$isMarkdown;
143
146
  var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
144
147
  vertical = _useMaterialQuizState.vertical;
145
148
  //
package/es/components/material-quiz/MaterialQuizSelectMultipleOrder.js CHANGED
@@ -106,6 +106,7 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
106
106
  var isDisabled = (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.correctOptionCount) !== answerList.filter(function (answer) {
107
107
  return answer.order !== null;
108
108
  }).length || !!userId;
109
+ var isOptionDisabled = checkUserLectureTestEnded(lecture);
109
110
  var isTestLecture = (lecture === null || lecture === void 0 ? void 0 : lecture.lectureType) === enums.LectureType.Test;
110
111
  // ref
111
112
  var optionBoxRef = React.useRef(null);
@@ -464,11 +465,11 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
464
465
  var renderQuizDragOption = function renderQuizDragOption() {
465
466
  return jsxs(StyledQuizOptionsDropZone, {
466
467
  id: "quiz-options-dropzone",
467
- disabled: !!userId,
468
+ disabled: isOptionDisabled,
468
469
  accept: ".quiz-answer",
469
470
  children: [optionList.map(function (option, index) {
470
471
  return jsx(QuizDraggbleOption, {
471
- disabled: !!userId,
472
+ disabled: isOptionDisabled,
472
473
  id: "quiz-option-".concat(index),
473
474
  className: "quiz-option",
474
475
  content: option.value,
@@ -525,7 +526,7 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
525
526
  id: "option-answer-".concat(index),
526
527
  content: option.value,
527
528
  role: getRole(),
528
- disabled: !!userId,
529
+ disabled: isOptionDisabled,
529
530
  indexOrder: index + 1,
530
531
  isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
531
532
  }, "option-answer-".concat(index));
package/es/components/material-quiz/material-quiz-group/MaterialQuizGroup.js CHANGED
@@ -9,7 +9,7 @@ import { useTheme } from '@mui/material';
9
9
  import cloneDeep from 'lodash-es/cloneDeep';
10
10
  import flattenDeep from 'lodash-es/flattenDeep';
11
11
  import { MATERIAL_QUIZ_ANSWER_ID, MATERIAL_QUIZ_PASSIVE_ID } from '../../../constant/element.js';
12
- import { getQuizResult } from '../../../helpers/index.js';
12
+ import { checkUserLectureTestEnded, getQuizResult } from '../../../helpers/index.js';
13
13
  import { useCaculatePassage } from '../../../hooks/useCaculatePassage.js';
14
14
  import QuestionBox from '../../shared/QuestionBox.js';
15
15
  import { useMaterialQuizState, useMaterialQuizDispatch } from '../context/MaterialQuizContext.js';
@@ -31,7 +31,8 @@ var MaterialQuizGroup = function MaterialQuizGroup() {
31
31
  materialQuiz = _useMaterialQuizState.materialQuiz,
32
32
  userId = _useMaterialQuizState.userId,
33
33
  vertical = _useMaterialQuizState.vertical,
34
- isLongPassage = _useMaterialQuizState.isLongPassage;
34
+ isLongPassage = _useMaterialQuizState.isLongPassage,
35
+ lecture = _useMaterialQuizState.lecture;
35
36
  var _useMaterialQuizDispa = useMaterialQuizDispatch(),
36
37
  onSubmit = _useMaterialQuizDispa.onSubmit,
37
38
  onNext = _useMaterialQuizDispa.onNext,
@@ -72,6 +73,7 @@ var MaterialQuizGroup = function MaterialQuizGroup() {
72
73
  setHasSubmitted = _React$useState16[1];
73
74
  var isNextActive = hasSubmitted && typeof onNext === 'function';
74
75
  var isDisabled = !flattenDeep(currentAnswerList).length || !!userId;
76
+ var isOptionDisabled = checkUserLectureTestEnded(lecture);
75
77
  var _useCaculatePassage = useCaculatePassage(),
76
78
  questionRef = _useCaculatePassage.questionRef,
77
79
  containerRef = _useCaculatePassage.containerRef;
@@ -348,6 +350,7 @@ var MaterialQuizGroup = function MaterialQuizGroup() {
348
350
  optionList: optionList,
349
351
  currentOptionList: currentOptionList,
350
352
  currentAnswerList: currentAnswerList,
353
+ isOptionDisabled: isOptionDisabled,
351
354
  onUpdateAnswer: setCurrentAnswerList,
352
355
  onUpdateOption: setCurrentOptionList,
353
356
  onUpdateHasSubmitted: setHasSubmitted,
@@ -370,7 +373,7 @@ var MaterialQuizGroup = function MaterialQuizGroup() {
370
373
  bodyContainerRef: containerRef,
371
374
  footerActions: [{
372
375
  border: false,
373
- disabled: isDisabled,
376
+ disabled: isDisabled || isOptionDisabled,
374
377
  loading: submitStatus === 'pending',
375
378
  tabIndex: 0,
376
379
  transparent: false,
package/es/components/material-quiz/material-quiz-group/MaterialQuizGroupDesktop.js CHANGED
@@ -56,6 +56,7 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop(_ref3) {
56
56
  groupList = _React$useContext.groupList,
57
57
  currentAnswerList = _React$useContext.currentAnswerList,
58
58
  currentOptionList = _React$useContext.currentOptionList,
59
+ isOptionDisabled = _React$useContext.isOptionDisabled,
59
60
  updateCurrentAnswer = _React$useContext.updateCurrentAnswer,
60
61
  updateCurrentOption = _React$useContext.updateCurrentOption,
61
62
  handleAnswerReset = _React$useContext.handleAnswerReset;
@@ -114,12 +115,13 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop(_ref3) {
114
115
  }), jsx(StyledQuizAnswerDropzone, {
115
116
  id: "quiz-answer-dropzone-".concat(dropzoneIndex),
116
117
  accept: ".quiz-answer",
117
- disabled: !!userId,
118
+ disabled: isOptionDisabled,
118
119
  isGroupAnswer: isGroupAnswer,
119
120
  children: isGroupAnswer ? (_b = currentAnswerList[dropzoneIndex]) === null || _b === void 0 ? void 0 : _b.map(function (answer, index) {
120
121
  var isHideStatus = !userId && (isActive || isTestLecture);
121
122
  var status = isHideStatus ? undefined : getQuizGroupOptionResultStatus(dropzoneIndex, index, answer.order, materialQuizResponse, materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.answerInfo);
122
123
  return jsx(MaterialQuizGroupOptionItem, {
124
+ disabled: isOptionDisabled,
123
125
  status: status,
124
126
  option: answer
125
127
  }, index);
@@ -171,7 +173,7 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop(_ref3) {
171
173
  children: [jsx(Button, {
172
174
  role: "white",
173
175
  size: "small",
174
- disabled: !!userId,
176
+ disabled: isOptionDisabled,
175
177
  onClick: handleAnswerReset,
176
178
  children: intl.formatMessage({
177
179
  id: 'materialQuiz.dropzone.optionReset'
@@ -183,7 +185,8 @@ var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop(_ref3) {
183
185
  accept: ".quiz-answer",
184
186
  children: currentOptionList.length ? currentOptionList.map(function (option, index) {
185
187
  return jsx(MaterialQuizGroupOptionItem, {
186
- option: option
188
+ option: option,
189
+ disabled: isOptionDisabled
187
190
  }, index);
188
191
  }) : jsx(Flex, {
189
192
  justify: "center",
package/es/components/material-quiz/material-quiz-group/MaterialQuizGroupMobile.js CHANGED
@@ -46,6 +46,7 @@ var MaterialQuizGroupMobile = function MaterialQuizGroupMobile(_ref3) {
46
46
  var _React$useContext = React.useContext(QuizGroupContext),
47
47
  currentOptionList = _React$useContext.currentOptionList,
48
48
  currentAnswerList = _React$useContext.currentAnswerList,
49
+ isOptionDisabled = _React$useContext.isOptionDisabled,
49
50
  updateCurrentAnswer = _React$useContext.updateCurrentAnswer,
50
51
  updateCurrentOption = _React$useContext.updateCurrentOption,
51
52
  handleAnswerReset = _React$useContext.handleAnswerReset;
@@ -62,7 +63,7 @@ var MaterialQuizGroupMobile = function MaterialQuizGroupMobile(_ref3) {
62
63
  children: [jsx(Button, {
63
64
  role: "white",
64
65
  size: "small",
65
- disabled: !!userId,
66
+ disabled: isOptionDisabled,
66
67
  onClick: handleAnswerReset,
67
68
  block: true,
68
69
  children: intl.formatMessage({
@@ -99,6 +100,7 @@ var MaterialQuizGroupMobile = function MaterialQuizGroupMobile(_ref3) {
99
100
  var status = isHideStatus ? undefined : getQuizGroupOptionResultStatus(index, answerIndex, answer.order, materialQuizResponse, materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.answerInfo);
100
101
  return jsx(MaterialQuizGroupOptionItem, {
101
102
  option: answer,
103
+ disabled: isOptionDisabled,
102
104
  status: status,
103
105
  onClose: function onClose() {
104
106
  var targetId = answer.order;
@@ -151,7 +153,8 @@ var MaterialQuizGroupMobile = function MaterialQuizGroupMobile(_ref3) {
151
153
  updateCurrentAnswer(targetId, dropzoneIndex);
152
154
  },
153
155
  children: jsx(MaterialQuizGroupOptionItem, {
154
- option: option
156
+ option: option,
157
+ disabled: isOptionDisabled
155
158
  }, index)
156
159
  }, index);
157
160
  }) : jsx(Text, {
package/es/components/material-quiz/material-quiz-group/MaterialQuizGroupOptionItem.d.ts CHANGED
@@ -3,6 +3,7 @@ import type { QuizGroupOption } from './context/context';
3
3
  type Status = 'correct' | 'wrong' | 'answer';
4
4
  interface MaterialQuizGroupOptionProps {
5
5
  option: QuizGroupOption;
6
+ disabled?: boolean;
6
7
  status?: Status;
7
8
  onClose?: () => void;
8
9
  }
package/es/components/material-quiz/material-quiz-group/MaterialQuizGroupOptionItem.js CHANGED
@@ -32,20 +32,23 @@ var StyledDraggbleOption = /*#__PURE__*/_styled(EbDraggable, {
32
32
  default:
33
33
  return '3px solid transparent';
34
34
  }
35
+ }, ";cursor:", function (_ref4) {
36
+ var disabled = _ref4.disabled;
37
+ return disabled ? 'not-allowed !important' : 'auto';
35
38
  }, ";");
36
39
  var StyledOptionTitle = /*#__PURE__*/_styled("div", {
37
40
  target: "ex64yhy2"
38
- })("display:flex;justify-content:center;align-items:center;width:", function (_ref4) {
39
- var vertical = _ref4.vertical,
40
- isOptionContent = _ref4.isOptionContent;
41
- return isOptionContent ? '100%' : vertical ? '10.25rem' : '11.5rem';
42
- }, ";height:", function (_ref5) {
41
+ })("display:flex;justify-content:center;align-items:center;width:", function (_ref5) {
43
42
  var vertical = _ref5.vertical,
44
43
  isOptionContent = _ref5.isOptionContent;
45
- return isOptionContent ? 'auto' : vertical ? '10.25rem' : '11.5rem';
46
- }, ";padding:0.5rem;background:", base.color.white, ";background-color:", function (_ref6) {
47
- var status = _ref6.status,
44
+ return isOptionContent ? '100%' : vertical ? '10.25rem' : '11.5rem';
45
+ }, ";height:", function (_ref6) {
46
+ var vertical = _ref6.vertical,
48
47
  isOptionContent = _ref6.isOptionContent;
48
+ return isOptionContent ? 'auto' : vertical ? '10.25rem' : '11.5rem';
49
+ }, ";padding:0.5rem;background:", base.color.white, ";background-color:", function (_ref7) {
50
+ var status = _ref7.status,
51
+ isOptionContent = _ref7.isOptionContent;
49
52
  if (!isOptionContent) {
50
53
  return 'auto';
51
54
  }
@@ -60,26 +63,27 @@ var StyledOptionTitle = /*#__PURE__*/_styled("div", {
60
63
  }, ";");
61
64
  var StyledOptionContent = /*#__PURE__*/_styled("div", {
62
65
  target: "ex64yhy1"
63
- })("display:flex;align-items:center;width:", function (_ref7) {
64
- var vertical = _ref7.vertical;
65
- return vertical ? '10.25rem' : '11.5rem';
66
- }, ";height:", function (_ref8) {
66
+ })("display:flex;align-items:center;width:", function (_ref8) {
67
67
  var vertical = _ref8.vertical;
68
68
  return vertical ? '10.25rem' : '11.5rem';
69
+ }, ";height:", function (_ref9) {
70
+ var vertical = _ref9.vertical;
71
+ return vertical ? '10.25rem' : '11.5rem';
69
72
  }, ";background:", base.color.navy8, ";& p{line-height:1;}");
70
73
  var StyledIconButton = /*#__PURE__*/_styled(IconButton, {
71
74
  target: "ex64yhy0"
72
- })("border-radius:50%;width:1.5rem;height:1.5rem;position:absolute;top:0.5rem;right:0.5rem;background-color:", function (_ref9) {
73
- var theme = _ref9.theme;
75
+ })("border-radius:50%;width:1.5rem;height:1.5rem;position:absolute;top:0.5rem;right:0.5rem;background-color:", function (_ref10) {
76
+ var theme = _ref10.theme;
74
77
  return theme.palette.action.active;
75
78
  }, ";align-self:flex-end;");
76
79
  //
77
80
  //
78
81
  //
79
- var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref10) {
80
- var option = _ref10.option,
81
- status = _ref10.status,
82
- onClose = _ref10.onClose;
82
+ var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref11) {
83
+ var option = _ref11.option,
84
+ status = _ref11.status,
85
+ disabled = _ref11.disabled,
86
+ onClose = _ref11.onClose;
83
87
  var _a;
84
88
  var _useMaterialQuizState = useMaterialQuizState(),
85
89
  vertical = _useMaterialQuizState.vertical,
@@ -110,7 +114,7 @@ var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref10) {
110
114
  //
111
115
  //
112
116
  return jsxs(StyledDraggbleOption, {
113
- disabled: !!userId || vertical,
117
+ disabled: disabled || vertical,
114
118
  id: option.order.toString(),
115
119
  className: "quiz-answer",
116
120
  vertical: vertical,
package/es/components/material-quiz/material-quiz-group/context/context.d.ts CHANGED
@@ -11,6 +11,7 @@ interface QuizGroupContextValue {
11
11
  optionList: QuizGroupOption[];
12
12
  currentOptionList: QuizGroupOption[];
13
13
  currentAnswerList: QuizGroupOption[][];
14
+ isOptionDisabled: boolean;
14
15
  onDirty: (value: boolean) => void;
15
16
  onUpdateAnswer: (value: React.SetStateAction<QuizGroupOption[][]>) => void;
16
17
  onUpdateOption: (value: React.SetStateAction<QuizGroupOption[]>) => void;
package/es/components/shared/QuizDraggbleOption.js CHANGED
@@ -39,8 +39,11 @@ var StyledOrder = styled.div.withConfig({
39
39
  })(["width:1.5rem;height:1.5rem;display:flex;border-radius:4px;align-items:center;justify-content:center;color:", ";background-color:", ";flex:none;margin-left:0.5rem;"], base.color.navy0, base.color.navy4);
40
40
  var StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
41
41
  componentId: "sc-19b0zkq-3"
42
- })(["display:flex;border-radius:8px;border:1px solid ", ";background-color:", ";overflow:hidden;&:not(:last-of-type){margin-bottom:1rem;}", "{background-color:", ";color:", ";}", "{background-color:", ";& *{color:", ";}}", "{background-color:", ";color:", ";}&.ui-draggable-dragging{z-index:1000 !important;color:", " !important;border:none !important;", "{background-color:", ";}", "{background-color:", ";border:1px solid ", " !important;}", "{color:", ";background-color:", ";}& *{color:", " !important;}}&.ui-draggable-dragging.quiz-answer{width:calc(100% - 1rem * 2);}"], base.color.navy4, base.color.navy5, StyledQuizDraggbleOptionHandle, function (_ref3) {
43
- var role = _ref3.role;
42
+ })(["display:flex;border-radius:8px;border:1px solid ", ";background-color:", ";overflow:hidden;cursor:", ";&:not(:last-of-type){margin-bottom:1rem;}", "{background-color:", ";color:", ";}", "{background-color:", ";& *{color:", ";}}", "{background-color:", ";color:", ";}&.ui-draggable-dragging{z-index:1000 !important;color:", " !important;border:none !important;", "{background-color:", ";}", "{background-color:", ";border:1px solid ", " !important;}", "{color:", ";background-color:", ";}& *{color:", " !important;}}&.ui-draggable-dragging.quiz-answer{width:calc(100% - 1rem * 2);}"], base.color.navy4, base.color.navy5, function (_ref3) {
43
+ var disabled = _ref3.disabled;
44
+ return disabled ? 'not-allowed !important' : 'auto';
45
+ }, StyledQuizDraggbleOptionHandle, function (_ref4) {
46
+ var role = _ref4.role;
44
47
  switch (role) {
45
48
  case 'answer':
46
49
  return base.color.primary4;
@@ -52,8 +55,8 @@ var StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
52
55
  default:
53
56
  return base.color.navy3;
54
57
  }
55
- }, function (_ref4) {
56
- var role = _ref4.role;
58
+ }, function (_ref5) {
59
+ var role = _ref5.role;
57
60
  switch (role) {
58
61
  case 'answer':
59
62
  return base.color.primary9;
@@ -65,8 +68,8 @@ var StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
65
68
  default:
66
69
  return base.color.navy5;
67
70
  }
68
- }, StyledQuizDraggbleOptionContent, function (_ref5) {
69
- var role = _ref5.role;
71
+ }, StyledQuizDraggbleOptionContent, function (_ref6) {
72
+ var role = _ref6.role;
70
73
  switch (role) {
71
74
  case 'answer':
72
75
  return base.color.primary1;
@@ -78,8 +81,8 @@ var StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
78
81
  default:
79
82
  return base.color.navy5;
80
83
  }
81
- }, function (_ref6) {
82
- var role = _ref6.role;
84
+ }, function (_ref7) {
85
+ var role = _ref7.role;
83
86
  switch (role) {
84
87
  case 'answer':
85
88
  return base.color.primary9;
@@ -91,8 +94,8 @@ var StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
91
94
  default:
92
95
  return base.color.navy0;
93
96
  }
94
- }, StyledOrder, function (_ref7) {
95
- var role = _ref7.role;
97
+ }, StyledOrder, function (_ref8) {
98
+ var role = _ref8.role;
96
99
  switch (role) {
97
100
  case 'answer':
98
101
  return base.color.primary3;
@@ -104,8 +107,8 @@ var StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
104
107
  default:
105
108
  return base.color.navy4;
106
109
  }
107
- }, function (_ref8) {
108
- var role = _ref8.role;
110
+ }, function (_ref9) {
111
+ var role = _ref9.role;
109
112
  switch (role) {
110
113
  case 'answer':
111
114
  return base.color.primary9;
@@ -121,17 +124,17 @@ var StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
121
124
  //
122
125
  //
123
126
  //
124
- var QuizDraggbleOption = function QuizDraggbleOption(_ref9) {
125
- var id = _ref9.id,
126
- className = _ref9.className,
127
- content = _ref9.content,
128
- _ref9$disabled = _ref9.disabled,
129
- disabled = _ref9$disabled === void 0 ? false : _ref9$disabled,
130
- _ref9$role = _ref9.role,
131
- role = _ref9$role === void 0 ? 'default' : _ref9$role,
132
- indexOrder = _ref9.indexOrder,
133
- _ref9$isMarkdown = _ref9.isMarkdown,
134
- isMarkdown = _ref9$isMarkdown === void 0 ? false : _ref9$isMarkdown;
127
+ var QuizDraggbleOption = function QuizDraggbleOption(_ref10) {
128
+ var id = _ref10.id,
129
+ className = _ref10.className,
130
+ content = _ref10.content,
131
+ _ref10$disabled = _ref10.disabled,
132
+ disabled = _ref10$disabled === void 0 ? false : _ref10$disabled,
133
+ _ref10$role = _ref10.role,
134
+ role = _ref10$role === void 0 ? 'default' : _ref10$role,
135
+ indexOrder = _ref10.indexOrder,
136
+ _ref10$isMarkdown = _ref10.isMarkdown,
137
+ isMarkdown = _ref10$isMarkdown === void 0 ? false : _ref10$isMarkdown;
135
138
  var _useMaterialQuizState = useMaterialQuizState(),
136
139
  vertical = _useMaterialQuizState.vertical;
137
140
  //
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elice/material-quiz",
3
- "version": "1.241127.0",
3
+ "version": "1.241202.0",
4
4
  "description": "User view and editing components of Elice material quiz",
5
5
  "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
6
6
  "license": "UNLICENSED",
@@ -65,19 +65,19 @@
65
65
  "devDependencies": {
66
66
  "@dnd-kit/core": "^6.1.0",
67
67
  "@elice/file-client": "^1.241120.0-quizimage.0",
68
- "@elice/api-client": "^1.241120.0-quizimage.0",
68
+ "@elice/api-client": "^1.241127.0",
69
69
  "@elice/blocks": "1.241007.0",
70
70
  "@elice/design-tokens": "^1.220803.0",
71
71
  "@elice/icons": "^1.230814.0",
72
72
  "@elice/icons-legacy": "npm:@elice/icons@0.230814.0",
73
- "@elice/intl": "0.240710.0",
73
+ "@elice/intl": "0.241127.0",
74
74
  "@elice/markdown": "1.241015.0",
75
- "@elice/material-shared-types": "1.241127.0",
76
- "@elice/material-shared-utils": "1.241127.0",
75
+ "@elice/material-shared-types": "1.241202.0",
76
+ "@elice/material-shared-utils": "1.241202.0",
77
77
  "@elice/mui-elements": "^5.240820.0",
78
78
  "@elice/mui-system": "^5.240820.0",
79
79
  "@elice/openapi-client-course": "^1.230814.0",
80
- "@elice/types": "1.241120.0-quizimage.0",
80
+ "@elice/types": "1.241127.0",
81
81
  "@elice/wysiwyg": "1.241015.0",
82
82
  "@emotion/react": "^11.10.5",
83
83
  "@emotion/styled": "^11.10.5",