@elice/material-quiz 1.230705.0 → 1.230707.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 (13) hide show
  1. package/cjs/components/material-quiz/MaterialQuiz.i18n.js +4 -4
  2. package/cjs/components/material-quiz/MaterialQuiz.js +20 -23
  3. package/cjs/components/material-quiz/MaterialQuizSelectMultiple.js +3 -3
  4. package/cjs/components/material-quiz/MaterialQuizSelectOne.js +3 -3
  5. package/cjs/components/shared/question-radio/QuestionRadioOption.js +1 -1
  6. package/cjs/components/shared/utils/getQuestionStatusStyle.js +1 -1
  7. package/es/components/material-quiz/MaterialQuiz.i18n.js +4 -4
  8. package/es/components/material-quiz/MaterialQuiz.js +20 -23
  9. package/es/components/material-quiz/MaterialQuizSelectMultiple.js +3 -3
  10. package/es/components/material-quiz/MaterialQuizSelectOne.js +3 -3
  11. package/es/components/shared/question-radio/QuestionRadioOption.js +1 -1
  12. package/es/components/shared/utils/getQuestionStatusStyle.js +1 -1
  13. package/package.json +4 -4
package/cjs/components/material-quiz/MaterialQuiz.i18n.js CHANGED
@@ -8,8 +8,8 @@ var en = {
8
8
  'materialQuiz.submittedAnswer': 'Submitted Answer',
9
9
  'materialQuiz.answer': 'Answer',
10
10
  'materialQuiz.next': 'Next question >',
11
- 'materialQuiz.selectOne.answer.title': 'Please choose the right answer.',
12
- 'materialQuiz.selectMultiple.answer.title': 'Please choose the right answer. (Redundant selections available)',
11
+ 'materialQuiz.selectOne.answer.title': 'Choose from the views below.',
12
+ 'materialQuiz.selectMultiple.answer.title': 'Choose from the views below. (Redundant selections available)',
13
13
  'materialQuiz.selectMultipleOrder.answer.title': 'Drag and drop your answers.',
14
14
  'materialQuiz.text.answer.title': 'Please fill out the answer.',
15
15
  'materialQuiz.empty.title': 'Quiz is now preparing.',
@@ -41,8 +41,8 @@ var ko = {
41
41
  'materialQuiz.submittedAnswer': '제출한 답',
42
42
  'materialQuiz.answer': '정답',
43
43
  'materialQuiz.next': '다음 문제로 이동 >',
44
- 'materialQuiz.selectOne.answer.title': '정답을 선택해 주세요.',
45
- 'materialQuiz.selectMultiple.answer.title': '정답을 선택해 주세요. (중복 선택 가능)',
44
+ 'materialQuiz.selectOne.answer.title': '아래 보기에서 골라주세요.',
45
+ 'materialQuiz.selectMultiple.answer.title': '아래 보기에서 골라주세요. (중복 선택 가능)',
46
46
  'materialQuiz.selectMultipleOrder.answer.title': '답안을 드래그 앤 드롭하세요.',
47
47
  'materialQuiz.text.answer.title': '답안을 작성해 주세요.',
48
48
  'materialQuiz.empty.title': '퀴즈가 준비 중 입니다.',
package/cjs/components/material-quiz/MaterialQuiz.js CHANGED
@@ -64,7 +64,8 @@ var StyledMaterialQuizWrapper = styled__default["default"].div.withConfig({
64
64
  var MaterialQuiz = function MaterialQuiz() {
65
65
  var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
66
66
  materialQuiz = _useMaterialQuizState.materialQuiz,
67
- vertical = _useMaterialQuizState.vertical;
67
+ vertical = _useMaterialQuizState.vertical,
68
+ course = _useMaterialQuizState.course;
68
69
  var _useMaterialQuizDispa = MaterialQuizContext.useMaterialQuizDispatch(),
69
70
  setVertical = _useMaterialQuizDispa.setVertical;
70
71
  var _useMeasure = reactUse.useMeasure(),
@@ -77,33 +78,29 @@ var MaterialQuiz = function MaterialQuiz() {
77
78
  setVertical(width <= designTokens.base.screen.medium);
78
79
  }
79
80
  }, [width, setVertical]);
80
- var Component = null;
81
- switch (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.optionType) {
82
- case types.enums.QuizOptionType.SelectOne:
83
- Component = React__default["default"].createElement(AsyncMaterialQuizSelectOne, null);
84
- break;
85
- case types.enums.QuizOptionType.SelectMultiple:
86
- Component = React__default["default"].createElement(AsyncMaterialQuizSelectMultiple, null);
87
- break;
88
- case types.enums.QuizOptionType.Text:
89
- Component = React__default["default"].createElement(AsyncMaterialQuizText, null);
90
- break;
91
- case types.enums.QuizOptionType.SelectMultipleOrder:
92
- Component = React__default["default"].createElement(AsyncMaterialQuizSelectMultipleOrder, null);
93
- break;
94
- case types.enums.QuizOptionType.Group:
95
- Component = React__default["default"].createElement(AsyncMaterialQuizGroup, null);
96
- break;
97
- default:
98
- Component = React__default["default"].createElement(MaterialQuizShimmer["default"], null);
99
- break;
100
- }
81
+ var renderQuestionOption = function renderQuestionOption() {
82
+ if (!materialQuiz || !course) {
83
+ return React__default["default"].createElement(MaterialQuizShimmer["default"], null);
84
+ }
85
+ switch (materialQuiz.optionType) {
86
+ case types.enums.QuizOptionType.SelectOne:
87
+ return React__default["default"].createElement(AsyncMaterialQuizSelectOne, null);
88
+ case types.enums.QuizOptionType.SelectMultiple:
89
+ return React__default["default"].createElement(AsyncMaterialQuizSelectMultiple, null);
90
+ case types.enums.QuizOptionType.Text:
91
+ return React__default["default"].createElement(AsyncMaterialQuizText, null);
92
+ case types.enums.QuizOptionType.SelectMultipleOrder:
93
+ return React__default["default"].createElement(AsyncMaterialQuizSelectMultipleOrder, null);
94
+ case types.enums.QuizOptionType.Group:
95
+ return React__default["default"].createElement(AsyncMaterialQuizGroup, null);
96
+ }
97
+ };
101
98
  return React__default["default"].createElement(React__default["default"].Suspense, {
102
99
  fallback: null
103
100
  }, React__default["default"].createElement(StyledMaterialQuizWrapper, {
104
101
  ref: ref,
105
102
  vertical: vertical
106
- }, isQuizGroupType ? null : React__default["default"].createElement(StyledMaterialQuizInfo, null, React__default["default"].createElement(MaterialQuizInfo["default"], null)), React__default["default"].createElement(StyledMaterialQuizContent, null, Component)));
103
+ }, isQuizGroupType ? null : React__default["default"].createElement(StyledMaterialQuizInfo, null, React__default["default"].createElement(MaterialQuizInfo["default"], null)), React__default["default"].createElement(StyledMaterialQuizContent, null, renderQuestionOption())));
107
104
  };
108
105
  var MaterialQuizContainer = function MaterialQuizContainer(_ref7) {
109
106
  var materialQuizId = _ref7.materialQuizId,
package/cjs/components/material-quiz/MaterialQuizSelectMultiple.js CHANGED
@@ -211,7 +211,7 @@ var MaterialQuizSelectMultiple = function MaterialQuizSelectMultiple() {
211
211
  onSelect: handleAnswerSelect,
212
212
  selectedOptions: selectedAnswer,
213
213
  disabled: submitStatus === 'pending' || index.checkUserLectureTestEnded(lecture) || !!userId
214
- }, (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.options) ? materialQuiz.options.map(function (option, index$1) {
214
+ }, (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.options) && course ? materialQuiz.options.map(function (option, index$1) {
215
215
  var _a;
216
216
  var getIsSelected = function getIsSelected(index, materialQuizResponse) {
217
217
  var _a;
@@ -232,11 +232,11 @@ var MaterialQuizSelectMultiple = function MaterialQuizSelectMultiple() {
232
232
  value: index$1,
233
233
  status: status,
234
234
  isAnswer: !!userId && Array.isArray(materialQuizAnswerInfo) && materialQuizAnswerInfo.includes(index$1)
235
- }, (course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions) ? React__default["default"].createElement(StyledMarkdown["default"], {
235
+ }, course.preference.renderMarkdownInQuizOptions ? React__default["default"].createElement(StyledMarkdown["default"], {
236
236
  children: (_a = option === null || option === void 0 ? void 0 : option.content) !== null && _a !== void 0 ? _a : '',
237
237
  paddingx: 0,
238
238
  paddingy: 0,
239
- dark: false
239
+ dark: true
240
240
  }) : option === null || option === void 0 ? void 0 : option.content);
241
241
  }) : null));
242
242
  };
package/cjs/components/material-quiz/MaterialQuizSelectOne.js CHANGED
@@ -200,7 +200,7 @@ var MaterialQuizSelectOne = function MaterialQuizSelectOne() {
200
200
  selectedValue: selectedAnswer,
201
201
  onSelect: handleAnswerSelect,
202
202
  disabled: submitStatus === 'pending' || index.checkUserLectureTestEnded(lecture) || !!userId
203
- }, materialQuiz.options ? materialQuiz.options.map(function (option, index$1) {
203
+ }, materialQuiz.options && course ? materialQuiz.options.map(function (option, index$1) {
204
204
  var _a, _b;
205
205
  var getIsSelected = function getIsSelected(index, materialQuizResponse) {
206
206
  var _a;
@@ -221,11 +221,11 @@ var MaterialQuizSelectOne = function MaterialQuizSelectOne() {
221
221
  value: index$1,
222
222
  status: status,
223
223
  isAnswer: (_a = !!userId && Array.isArray(materialQuizAnswerInfo) && materialQuizAnswerInfo.includes(index$1)) !== null && _a !== void 0 ? _a : false
224
- }, (course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions) ? React__default["default"].createElement(StyledMarkdown["default"], {
224
+ }, course.preference.renderMarkdownInQuizOptions ? React__default["default"].createElement(StyledMarkdown["default"], {
225
225
  children: (_b = option === null || option === void 0 ? void 0 : option.content) !== null && _b !== void 0 ? _b : '',
226
226
  paddingx: 0,
227
227
  paddingy: 0,
228
- dark: false
228
+ dark: true
229
229
  }) : option === null || option === void 0 ? void 0 : option.content);
230
230
  }) : null) : null);
231
231
  };
package/cjs/components/shared/question-radio/QuestionRadioOption.js CHANGED
@@ -15,7 +15,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
15
15
 
16
16
  var StyledQuestionRadioOption = styled__default["default"].div.withConfig({
17
17
  componentId: "sc-cy66me-0"
18
- })(["display:flex;align-items:center;padding:0.875rem 1rem;border-radius:8px;background-color:", ";&:not(:last-of-type){margin-bottom:1rem;}&:hover,& *:hover{cursor:", ";}", ""], function (_ref) {
18
+ })(["display:flex;align-items:center;padding:0.875rem 1rem;border-radius:8px;background-color:", ";overflow-x:auto;&:not(:last-of-type){margin-bottom:1rem;}&:hover,& *:hover{cursor:", ";}", ""], function (_ref) {
19
19
  var checked = _ref.checked,
20
20
  status = _ref.status;
21
21
  switch (status) {
package/cjs/components/shared/utils/getQuestionStatusStyle.js CHANGED
@@ -9,7 +9,7 @@ var styled = require('styled-components');
9
9
  * Get shared question custom style depend on checked, status values.
10
10
  */
11
11
  function getQuestionStatusStyle() {
12
- return styled.css(["&,& p,& p.elicemd.elicemd--theme-light{color:", ";}"], function (_ref) {
12
+ return styled.css(["&,& p,& p.elicemd.elicemd--theme-dark{color:", ";}"], function (_ref) {
13
13
  var checked = _ref.checked,
14
14
  status = _ref.status;
15
15
  switch (status) {
package/es/components/material-quiz/MaterialQuiz.i18n.js CHANGED
@@ -4,8 +4,8 @@ var en = {
4
4
  'materialQuiz.submittedAnswer': 'Submitted Answer',
5
5
  'materialQuiz.answer': 'Answer',
6
6
  'materialQuiz.next': 'Next question >',
7
- 'materialQuiz.selectOne.answer.title': 'Please choose the right answer.',
8
- 'materialQuiz.selectMultiple.answer.title': 'Please choose the right answer. (Redundant selections available)',
7
+ 'materialQuiz.selectOne.answer.title': 'Choose from the views below.',
8
+ 'materialQuiz.selectMultiple.answer.title': 'Choose from the views below. (Redundant selections available)',
9
9
  'materialQuiz.selectMultipleOrder.answer.title': 'Drag and drop your answers.',
10
10
  'materialQuiz.text.answer.title': 'Please fill out the answer.',
11
11
  'materialQuiz.empty.title': 'Quiz is now preparing.',
@@ -37,8 +37,8 @@ var ko = {
37
37
  'materialQuiz.submittedAnswer': '제출한 답',
38
38
  'materialQuiz.answer': '정답',
39
39
  'materialQuiz.next': '다음 문제로 이동 >',
40
- 'materialQuiz.selectOne.answer.title': '정답을 선택해 주세요.',
41
- 'materialQuiz.selectMultiple.answer.title': '정답을 선택해 주세요. (중복 선택 가능)',
40
+ 'materialQuiz.selectOne.answer.title': '아래 보기에서 골라주세요.',
41
+ 'materialQuiz.selectMultiple.answer.title': '아래 보기에서 골라주세요. (중복 선택 가능)',
42
42
  'materialQuiz.selectMultipleOrder.answer.title': '답안을 드래그 앤 드롭하세요.',
43
43
  'materialQuiz.text.answer.title': '답안을 작성해 주세요.',
44
44
  'materialQuiz.empty.title': '퀴즈가 준비 중 입니다.',
package/es/components/material-quiz/MaterialQuiz.js CHANGED
@@ -56,7 +56,8 @@ var StyledMaterialQuizWrapper = styled.div.withConfig({
56
56
  var MaterialQuiz = function MaterialQuiz() {
57
57
  var _useMaterialQuizState = useMaterialQuizState(),
58
58
  materialQuiz = _useMaterialQuizState.materialQuiz,
59
- vertical = _useMaterialQuizState.vertical;
59
+ vertical = _useMaterialQuizState.vertical,
60
+ course = _useMaterialQuizState.course;
60
61
  var _useMaterialQuizDispa = useMaterialQuizDispatch(),
61
62
  setVertical = _useMaterialQuizDispa.setVertical;
62
63
  var _useMeasure = useMeasure(),
@@ -69,33 +70,29 @@ var MaterialQuiz = function MaterialQuiz() {
69
70
  setVertical(width <= base.screen.medium);
70
71
  }
71
72
  }, [width, setVertical]);
72
- var Component = null;
73
- switch (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.optionType) {
74
- case enums.QuizOptionType.SelectOne:
75
- Component = React.createElement(AsyncMaterialQuizSelectOne, null);
76
- break;
77
- case enums.QuizOptionType.SelectMultiple:
78
- Component = React.createElement(AsyncMaterialQuizSelectMultiple, null);
79
- break;
80
- case enums.QuizOptionType.Text:
81
- Component = React.createElement(AsyncMaterialQuizText, null);
82
- break;
83
- case enums.QuizOptionType.SelectMultipleOrder:
84
- Component = React.createElement(AsyncMaterialQuizSelectMultipleOrder, null);
85
- break;
86
- case enums.QuizOptionType.Group:
87
- Component = React.createElement(AsyncMaterialQuizGroup, null);
88
- break;
89
- default:
90
- Component = React.createElement(MaterialQuizShimmer, null);
91
- break;
92
- }
73
+ var renderQuestionOption = function renderQuestionOption() {
74
+ if (!materialQuiz || !course) {
75
+ return React.createElement(MaterialQuizShimmer, null);
76
+ }
77
+ switch (materialQuiz.optionType) {
78
+ case enums.QuizOptionType.SelectOne:
79
+ return React.createElement(AsyncMaterialQuizSelectOne, null);
80
+ case enums.QuizOptionType.SelectMultiple:
81
+ return React.createElement(AsyncMaterialQuizSelectMultiple, null);
82
+ case enums.QuizOptionType.Text:
83
+ return React.createElement(AsyncMaterialQuizText, null);
84
+ case enums.QuizOptionType.SelectMultipleOrder:
85
+ return React.createElement(AsyncMaterialQuizSelectMultipleOrder, null);
86
+ case enums.QuizOptionType.Group:
87
+ return React.createElement(AsyncMaterialQuizGroup, null);
88
+ }
89
+ };
93
90
  return React.createElement(React.Suspense, {
94
91
  fallback: null
95
92
  }, React.createElement(StyledMaterialQuizWrapper, {
96
93
  ref: ref,
97
94
  vertical: vertical
98
- }, isQuizGroupType ? null : React.createElement(StyledMaterialQuizInfo, null, React.createElement(MaterialQuizInfo, null)), React.createElement(StyledMaterialQuizContent, null, Component)));
95
+ }, isQuizGroupType ? null : React.createElement(StyledMaterialQuizInfo, null, React.createElement(MaterialQuizInfo, null)), React.createElement(StyledMaterialQuizContent, null, renderQuestionOption())));
99
96
  };
100
97
  var MaterialQuizContainer = function MaterialQuizContainer(_ref7) {
101
98
  var materialQuizId = _ref7.materialQuizId,
package/es/components/material-quiz/MaterialQuizSelectMultiple.js CHANGED
@@ -203,7 +203,7 @@ var MaterialQuizSelectMultiple = function MaterialQuizSelectMultiple() {
203
203
  onSelect: handleAnswerSelect,
204
204
  selectedOptions: selectedAnswer,
205
205
  disabled: submitStatus === 'pending' || checkUserLectureTestEnded(lecture) || !!userId
206
- }, (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.options) ? materialQuiz.options.map(function (option, index) {
206
+ }, (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.options) && course ? materialQuiz.options.map(function (option, index) {
207
207
  var _a;
208
208
  var getIsSelected = function getIsSelected(index, materialQuizResponse) {
209
209
  var _a;
@@ -224,11 +224,11 @@ var MaterialQuizSelectMultiple = function MaterialQuizSelectMultiple() {
224
224
  value: index,
225
225
  status: status,
226
226
  isAnswer: !!userId && Array.isArray(materialQuizAnswerInfo) && materialQuizAnswerInfo.includes(index)
227
- }, (course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions) ? React.createElement(StyledMarkdown, {
227
+ }, course.preference.renderMarkdownInQuizOptions ? React.createElement(StyledMarkdown, {
228
228
  children: (_a = option === null || option === void 0 ? void 0 : option.content) !== null && _a !== void 0 ? _a : '',
229
229
  paddingx: 0,
230
230
  paddingy: 0,
231
- dark: false
231
+ dark: true
232
232
  }) : option === null || option === void 0 ? void 0 : option.content);
233
233
  }) : null));
234
234
  };
package/es/components/material-quiz/MaterialQuizSelectOne.js CHANGED
@@ -192,7 +192,7 @@ var MaterialQuizSelectOne = function MaterialQuizSelectOne() {
192
192
  selectedValue: selectedAnswer,
193
193
  onSelect: handleAnswerSelect,
194
194
  disabled: submitStatus === 'pending' || checkUserLectureTestEnded(lecture) || !!userId
195
- }, materialQuiz.options ? materialQuiz.options.map(function (option, index) {
195
+ }, materialQuiz.options && course ? materialQuiz.options.map(function (option, index) {
196
196
  var _a, _b;
197
197
  var getIsSelected = function getIsSelected(index, materialQuizResponse) {
198
198
  var _a;
@@ -213,11 +213,11 @@ var MaterialQuizSelectOne = function MaterialQuizSelectOne() {
213
213
  value: index,
214
214
  status: status,
215
215
  isAnswer: (_a = !!userId && Array.isArray(materialQuizAnswerInfo) && materialQuizAnswerInfo.includes(index)) !== null && _a !== void 0 ? _a : false
216
- }, (course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions) ? React.createElement(StyledMarkdown, {
216
+ }, course.preference.renderMarkdownInQuizOptions ? React.createElement(StyledMarkdown, {
217
217
  children: (_b = option === null || option === void 0 ? void 0 : option.content) !== null && _b !== void 0 ? _b : '',
218
218
  paddingx: 0,
219
219
  paddingy: 0,
220
- dark: false
220
+ dark: true
221
221
  }) : option === null || option === void 0 ? void 0 : option.content);
222
222
  }) : null) : null);
223
223
  };
package/es/components/shared/question-radio/QuestionRadioOption.js CHANGED
@@ -6,7 +6,7 @@ import { useQuestionRadioContext } from './QuestionRadioContext.js';
6
6
 
7
7
  var StyledQuestionRadioOption = styled.div.withConfig({
8
8
  componentId: "sc-cy66me-0"
9
- })(["display:flex;align-items:center;padding:0.875rem 1rem;border-radius:8px;background-color:", ";&:not(:last-of-type){margin-bottom:1rem;}&:hover,& *:hover{cursor:", ";}", ""], function (_ref) {
9
+ })(["display:flex;align-items:center;padding:0.875rem 1rem;border-radius:8px;background-color:", ";overflow-x:auto;&:not(:last-of-type){margin-bottom:1rem;}&:hover,& *:hover{cursor:", ";}", ""], function (_ref) {
10
10
  var checked = _ref.checked,
11
11
  status = _ref.status;
12
12
  switch (status) {
package/es/components/shared/utils/getQuestionStatusStyle.js CHANGED
@@ -5,7 +5,7 @@ import { css } from 'styled-components';
5
5
  * Get shared question custom style depend on checked, status values.
6
6
  */
7
7
  function getQuestionStatusStyle() {
8
- return css(["&,& p,& p.elicemd.elicemd--theme-light{color:", ";}"], function (_ref) {
8
+ return css(["&,& p,& p.elicemd.elicemd--theme-dark{color:", ";}"], function (_ref) {
9
9
  var checked = _ref.checked,
10
10
  status = _ref.status;
11
11
  switch (status) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elice/material-quiz",
3
- "version": "1.230705.0",
3
+ "version": "1.230707.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",
@@ -58,8 +58,8 @@
58
58
  "@elice/icons": "^1.220803.0",
59
59
  "@elice/icons-legacy": "npm:@elice/icons@0.220803.1",
60
60
  "@elice/markdown": "^1.220803.0",
61
- "@elice/material-shared-types": "1.230705.0",
62
- "@elice/material-shared-utils": "1.230705.0",
61
+ "@elice/material-shared-types": "1.230707.0",
62
+ "@elice/material-shared-utils": "1.230707.0",
63
63
  "@elice/types": "^1.230629.0",
64
64
  "@types/classnames": "^2.3.1",
65
65
  "@types/jquery": "^3.5.13",
@@ -73,5 +73,5 @@
73
73
  "react-use": "^17.2.4",
74
74
  "styled-components": "^5.3.0"
75
75
  },
76
- "gitHead": "3f369e88f09030e7025ccbc65d0f510bd6f1cf49"
76
+ "gitHead": "9de209573b5a42e0c3775b953e4db0cef2f01405"
77
77
  }