@elice/material-quiz 1.221129.0 → 1.221209.0-quiz.0

package/cjs/components/material-quiz/MaterialQuiz.i18n.d.ts

@@ -21,5 +21,11 @@ export declare const en: {
     'materialQuiz.text.correct': string;
     'materialQuiz.text.wrong': string;
     'materialQuiz.order.answerEmpty': string;
+    'materialQuiz.bottomSheet.title': string;
+    'materialQuiz.bottomSheet.optionEmpty': string;
+    'materialQuiz.dropzone.desktop.answerEmpty': string;
+    'materialQuiz.dropzone.mobile.answerEmpty': string;
+    'materialQuiz.dropzone.optionEmpty': string;
+    'materialQuiz.dropzone.optionReset': string;
 };
 export declare const ko: typeof en;

package/cjs/components/material-quiz/MaterialQuiz.i18n.js

@@ -24,7 +24,13 @@ const en = {
   'materialQuiz.text.placeholder': 'please fill the answer',
   'materialQuiz.text.correct': `that's correct!`,
   'materialQuiz.text.wrong': `that's wrong. try it again!`,
-  'materialQuiz.order.answerEmpty': 'You could move the options back here'
+  'materialQuiz.order.answerEmpty': 'You could move the options back here',
+  'materialQuiz.bottomSheet.title': 'Answer',
+  'materialQuiz.bottomSheet.optionEmpty': 'All views have been placed in the group.',
+  'materialQuiz.dropzone.desktop.answerEmpty': 'Drag the view into the area.',
+  'materialQuiz.dropzone.mobile.answerEmpty': 'Click here to add a view.',
+  'materialQuiz.dropzone.optionEmpty': 'Option',
+  'materialQuiz.dropzone.optionReset': 'Answer Reset'
 };
 const ko = {
   'materialQuiz.error': '퀴즈를 불러오는데 실패했습니다.\n잠시 후 다시 시도해주세요.',
@@ -48,7 +54,13 @@ const ko = {
   'materialQuiz.text.placeholder': '답을 입력하세요.',
   'materialQuiz.text.correct': '정답입니다.',
   'materialQuiz.text.wrong': '오답입니다. 다시 답안을 제출해보세요.',
-  'materialQuiz.order.answerEmpty': '항목을 다시 이곳으로 옮길 수 있습니다.'
+  'materialQuiz.order.answerEmpty': '항목을 다시 이곳으로 옮길 수 있습니다.',
+  'materialQuiz.bottomSheet.title': '답안',
+  'materialQuiz.bottomSheet.optionEmpty': '모든 보기를 그룹에 배치하였습니다.',
+  'materialQuiz.dropzone.desktop.answerEmpty': '보기를 영역에 끌어 넣어주세요.',
+  'materialQuiz.dropzone.mobile.answerEmpty': '이곳을 클릭하여 보기를 넣어주세요.',
+  'materialQuiz.dropzone.optionEmpty': '보기',
+  'materialQuiz.dropzone.optionReset': '답안 초기화'
 };
 
 exports.en = en;

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

@@ -22,6 +22,7 @@ const AsyncMaterialQuizSelectMultiple = React__default["default"].lazy(() => Pro
 const AsyncMaterialQuizSelectMultipleOrder = React__default["default"].lazy(() => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./MaterialQuizSelectMultipleOrder.js')); }));
 const AsyncMaterialQuizText = React__default["default"].lazy(() => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./MaterialQuizText.js')); }));
 const AsyncMaterialQuizSelectOne = React__default["default"].lazy(() => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./MaterialQuizSelectOne.js')); }));
+const AsyncMaterialQuizGroup = React__default["default"].lazy(() => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./material-quiz-group/index.js')); }));
 const StyledMaterialQuizInfo = styled__default["default"].div.withConfig({
   componentId: "sc-1eyn8fb-0"
 })([""]);
@@ -55,6 +56,7 @@ const MaterialQuiz = () => {
   const [ref, {
     width
   }] = reactUse.useMeasure();
+  const isQuizGroupType = Boolean((materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.optionType) === types.enums.QuizOptionType.Group);
   React__default["default"].useEffect(() => {
     if (width > 0) {
       setVertical(width <= designTokens.base.screen.medium);
@@ -79,6 +81,10 @@ const MaterialQuiz = () => {
       Component = React__default["default"].createElement(AsyncMaterialQuizSelectMultipleOrder, null);
       break;
 
+    case types.enums.QuizOptionType.Group:
+      Component = React__default["default"].createElement(AsyncMaterialQuizGroup, null);
+      break;
+
     default:
       Component = React__default["default"].createElement(MaterialQuizShimmer, null);
       break;
@@ -89,7 +95,7 @@ const MaterialQuiz = () => {
   }, React__default["default"].createElement(StyledMaterialQuizWrapper, {
     ref: ref,
     vertical: vertical
-  }, React__default["default"].createElement(StyledMaterialQuizInfo, null, React__default["default"].createElement(MaterialQuizInfo, null)), React__default["default"].createElement(StyledMaterialQuizContent, null, Component)));
+  }, isQuizGroupType ? null : React__default["default"].createElement(StyledMaterialQuizInfo, null, React__default["default"].createElement(MaterialQuizInfo, null)), React__default["default"].createElement(StyledMaterialQuizContent, null, Component)));
 };
 
 const MaterialQuizContainer = ({

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

@@ -87,10 +87,11 @@ const MaterialQuizSelectMultiple = () => {
         signal
       }).then(response => {
         const quizResponse = response.quizResponses[0];
+        const quizResponseAnswer = quizResponse.answer;
         setMaterialQuizResponse(quizResponse);
 
-        if (Array.isArray(quizResponse.answer)) {
-          setSelectedAnswer(quizResponse.answer);
+        if (Array.isArray(quizResponseAnswer)) {
+          setSelectedAnswer(quizResponseAnswer);
         }
       }).catch(error => {
         console.error(error);
@@ -170,15 +171,18 @@ const MaterialQuizSelectMultiple = () => {
     },
     selectedOptions: selectedAnswer,
     disabled: submitStatus === 'pending' || index.checkUserLectureTestEnded(lecture) || !!userId
-  }, (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.optionInfo) ? materialQuiz.optionInfo.map((option, index$1) => {
+  }, (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.options) ? materialQuiz.options.map((option, index$1) => {
+    var _a;
+
     const getIsSelected = (index, materialQuizResponse) => {
       var _a;
 
-      if (!materialQuizResponse || typeof materialQuizResponse.answer === 'string') {
+      if (!materialQuizResponse) {
         return false;
       }
 
-      return (_a = materialQuizResponse.answer.includes(index)) !== null && _a !== void 0 ? _a : false;
+      const materialQuizResponseAnswer = materialQuizResponse.answer;
+      return (_a = materialQuizResponseAnswer.includes(index)) !== null && _a !== void 0 ? _a : false;
     };
 
     const status = index.getOptionStatus({
@@ -186,17 +190,18 @@ const MaterialQuizSelectMultiple = () => {
       isSelected: getIsSelected(index$1, materialQuizResponse),
       isActive
     });
+    const materialQuizAnswerInfo = materialQuiz.answerInfo;
     return React__default["default"].createElement(QuestionCheckboxOption, {
       key: index$1,
       value: index$1,
       status: status,
-      isAnswer: !!userId && Array.isArray(materialQuiz.answerInfo) && materialQuiz.answerInfo.includes(index$1)
+      isAnswer: !!userId && Array.isArray(materialQuizAnswerInfo) && materialQuizAnswerInfo.includes(index$1)
     }, (course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions) ? React__default["default"].createElement(StyledMarkdown, {
-      children: option,
+      children: (_a = option === null || option === void 0 ? void 0 : option.text) !== null && _a !== void 0 ? _a : '',
       paddingx: 0,
       paddingy: 0,
       dark: false
-    }) : option);
+    }) : option === null || option === void 0 ? void 0 : option.text);
   }) : null));
 };
 

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

@@ -155,19 +155,29 @@ const MaterialQuizSelectMultipleOrder = () => {
       }, {
         signal
       }).then(response => {
+        var _a;
+
         setMaterialQuizResponse(response.quizResponse);
         const answer = response.quizResponse.answer; // user submitted
 
-        const optionInfo = materialQuiz.optionInfo; // options
+        const options = (_a = materialQuiz.options) !== null && _a !== void 0 ? _a : []; // options
+
+        const answerList = answer.map(answer => {
+          var _a, _b;
 
-        const answerList = answer.map(answer => ({
-          order: answer,
-          value: optionInfo[answer]
-        }), []);
-        const optionList = optionInfo.filter((item, index) => !answer.includes(index)).map(option => ({
-          order: optionInfo.findIndex(optionInfo => optionInfo === option),
-          value: option
-        }));
+          return {
+            order: answer,
+            value: (_b = (_a = options[answer]) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : ''
+          };
+        }, []);
+        const optionList = options.filter((item, index) => !answer.includes(index)).map(option => {
+          var _a;
+
+          return {
+            order: options.findIndex(optionInfo => optionInfo === option),
+            value: (_a = option === null || option === void 0 ? void 0 : option.text) !== null && _a !== void 0 ? _a : ''
+          };
+        });
         setAnswerList(answerList);
         setOptionList(optionList);
       }).catch(error => {
@@ -175,10 +185,14 @@ const MaterialQuizSelectMultipleOrder = () => {
       });
       return () => controller.abort();
     } else {
-      setOptionList(((_a = materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.optionInfo) === null || _a === void 0 ? void 0 : _a.map((option, index) => ({
-        order: index,
-        value: option
-      }))) || []);
+      setOptionList(((_a = materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.options) === null || _a === void 0 ? void 0 : _a.map((option, index) => {
+        var _a;
+
+        return {
+          order: index,
+          value: (_a = option === null || option === void 0 ? void 0 : option.text) !== null && _a !== void 0 ? _a : ''
+        };
+      })) || []);
       setAnswerList(Array.from({
         length: (_b = materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.correctOptionCount) !== null && _b !== void 0 ? _b : 0
       }, () => ({
@@ -210,24 +224,33 @@ const MaterialQuizSelectMultipleOrder = () => {
         setMaterialQuizResponse(quizResponse);
         const answer = (_a = quizResponse === null || quizResponse === void 0 ? void 0 : quizResponse.answer) !== null && _a !== void 0 ? _a : []; // user submitted
 
-        const optionInfo = materialQuiz.optionInfo; // options
+        const options = (_b = materialQuiz.options) !== null && _b !== void 0 ? _b : []; // options
 
-        const correctAnswerList = Array.isArray(materialQuiz.answerInfo) ? (_c = (_b = materialQuiz.answerInfo) === null || _b === void 0 ? void 0 : _b.map(answerInfo => {
-          var _a, _b;
+        const materialQuizAnswerInfo = materialQuiz.answerInfo;
+        const correctAnswerList = Array.isArray(materialQuizAnswerInfo) ? (_c = materialQuizAnswerInfo === null || materialQuizAnswerInfo === void 0 ? void 0 : materialQuizAnswerInfo.map(answerInfo => {
+          var _a, _b, _c;
 
           return {
             order: answerInfo,
-            value: (_b = (_a = materialQuiz.optionInfo) === null || _a === void 0 ? void 0 : _a[answerInfo]) !== null && _b !== void 0 ? _b : ''
+            value: (_c = (_b = (_a = materialQuiz.options) === null || _a === void 0 ? void 0 : _a[answerInfo]) === null || _b === void 0 ? void 0 : _b.text) !== null && _c !== void 0 ? _c : ''
           };
         })) !== null && _c !== void 0 ? _c : [] : [];
-        const answerList = answer.map(answer => ({
-          order: answer,
-          value: optionInfo[answer]
-        }), []);
-        const optionList = optionInfo.filter((item, index) => !answer.includes(index)).map(option => ({
-          order: optionInfo.findIndex(optionInfo => optionInfo === option),
-          value: option
-        }));
+        const answerList = answer.map(answer => {
+          var _a, _b;
+
+          return {
+            order: answer,
+            value: (_b = (_a = options[answer]) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : ''
+          };
+        }, []);
+        const optionList = options.filter((item, index) => !answer.includes(index)).map(option => {
+          var _a;
+
+          return {
+            order: options.findIndex(optionInfo => optionInfo === option),
+            value: (_a = option === null || option === void 0 ? void 0 : option.text) !== null && _a !== void 0 ? _a : ''
+          };
+        });
         setCorrectAnswerList(correctAnswerList);
         setAnswerList(answerList);
         setOptionList(optionList);

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

@@ -53,8 +53,9 @@ const MaterialQuizSelectOne = () => {
       }, {
         signal
       }).then(response => {
+        const quizResponseAnswer = response.quizResponse.answer;
         setMaterialQuizResponse(response.quizResponse);
-        setSelectedAnswer(typeof response.quizResponse.answer === 'string' ? undefined : response.quizResponse.answer[0]);
+        setSelectedAnswer(typeof response.quizResponse.answer === 'string' ? undefined : quizResponseAnswer[0]);
       }).catch(error => {
         console.error(error);
       });
@@ -79,8 +80,9 @@ const MaterialQuizSelectOne = () => {
         signal
       }).then(response => {
         const quizResponse = response.quizResponses[0];
+        const quizResponseAnswer = quizResponse.answer;
         setMaterialQuizResponse(quizResponse);
-        setSelectedAnswer(typeof quizResponse.answer === 'string' ? undefined : quizResponse.answer[0]);
+        setSelectedAnswer(typeof quizResponse.answer === 'string' ? undefined : quizResponseAnswer[0]);
       }).catch(error => {
         console.error(error);
       });
@@ -156,17 +158,18 @@ const MaterialQuizSelectOne = () => {
       setSelectedAnswer(index$1);
     },
     disabled: submitStatus === 'pending' || index.checkUserLectureTestEnded(lecture) || !!userId
-  }, materialQuiz.optionInfo ? materialQuiz.optionInfo.map((option, index$1) => {
-    var _a;
+  }, materialQuiz.options ? materialQuiz.options.map((option, index$1) => {
+    var _a, _b;
 
     const getIsSelected = (index, materialQuizResponse) => {
       var _a;
 
-      if (!materialQuizResponse || typeof materialQuizResponse.answer === 'string') {
+      if (!materialQuizResponse) {
         return false;
       }
 
-      return (_a = materialQuizResponse.answer.includes(index)) !== null && _a !== void 0 ? _a : false;
+      const materialQuizResponseAnswer = materialQuizResponse.answer;
+      return (_a = materialQuizResponseAnswer.includes(index)) !== null && _a !== void 0 ? _a : false;
     };
 
     const status = index.getOptionStatus({
@@ -174,17 +177,18 @@ const MaterialQuizSelectOne = () => {
       isSelected: getIsSelected(index$1, materialQuizResponse),
       isActive
     });
+    const materialQuizAnswerInfo = materialQuiz.answerInfo;
     return React__default["default"].createElement(QuestionRadioOption, {
       key: index$1,
       value: index$1,
       status: status,
-      isAnswer: (_a = !!userId && Array.isArray(materialQuiz.answerInfo) && materialQuiz.answerInfo.includes(index$1)) !== null && _a !== void 0 ? _a : false
+      isAnswer: (_a = !!userId && Array.isArray(materialQuizAnswerInfo) && materialQuizAnswerInfo.includes(index$1)) !== null && _a !== void 0 ? _a : false
     }, (course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions) ? React__default["default"].createElement(StyledMarkdown, {
-      children: option,
+      children: (_b = option === null || option === void 0 ? void 0 : option.text) !== null && _b !== void 0 ? _b : '',
       paddingx: 0,
       paddingy: 0,
       dark: false
-    }) : option);
+    }) : option === null || option === void 0 ? void 0 : option.text);
   }) : null) : null);
 };
 

package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroup.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const MaterialQuizGroup: React.FC;
+export default MaterialQuizGroup;

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

@@ -0,0 +1,296 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var apiClient = require('@elice/api-client');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var markdown = require('@elice/markdown');
+var lodashEs = require('lodash-es');
+var flattenDeep = require('lodash-es/flattenDeep');
+var index = require('../../../helpers/index.js');
+var QuestionBox = require('../../shared/QuestionBox.js');
+var MaterialQuizContext = require('../context/MaterialQuizContext.js');
+var QuizResultBadge = require('../QuizResultBadge.js');
+var QuizSubmitStatusText = require('../QuizSubmitStatusText.js');
+var context = require('./context/context.js');
+var MaterialQuizGroupDesktop = require('./MaterialQuizGroupDesktop.js');
+var MaterialQuizGroupMobile = require('./MaterialQuizGroupMobile.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var flattenDeep__default = /*#__PURE__*/_interopDefaultLegacy(flattenDeep);
+
+const MaterialQuizGroup = () => {
+  const intl = reactIntl.useIntl(); // context
+
+  const {
+    materialQuiz,
+    userId,
+    vertical
+  } = MaterialQuizContext.useMaterialQuizState();
+  const {
+    onSubmit,
+    onNext,
+    refreshOrgMaterialQuiz
+  } = MaterialQuizContext.useMaterialQuizDispatch();
+  const [groupList, setGroupList] = React__default["default"].useState([]);
+  const [optionList, setOptionList] = React__default["default"].useState([]);
+  const [currentAnswerList, setCurrentAnswerList] = React__default["default"].useState([]);
+  const [currentOptionList, setCurrentOptionList] = React__default["default"].useState([]);
+  const [materialQuizResponse, setMaterialQuizResponse] = React__default["default"].useState();
+  const [submitStatus, setSubmitStatus] = React__default["default"].useState('idle');
+  const [hasSubmitted, setHasSubmitted] = React__default["default"].useState(false);
+  /**
+   *
+   */
+
+  const getCurrentAnswer = (answerInfo, materialOptionList, materialGroupList) => {
+    if (answerInfo.length) {
+      const userAnswerList = answerInfo.map(answers => answers.map(answer => ({
+        order: answer,
+        options: materialOptionList[answer]
+      })));
+
+      if (answerInfo.length !== materialGroupList.length) {
+        const deficientAnswerList = new Array(materialGroupList.length - answerInfo.length).fill([]);
+        return [...userAnswerList, ...deficientAnswerList];
+      }
+
+      return userAnswerList;
+    } else {
+      return new Array(materialGroupList.length).fill([]);
+    }
+  };
+  /**
+   *
+   */
+
+
+  const initQuizGroupInfo = React__default["default"].useCallback(answerInfo => {
+    var _a, _b;
+
+    if (!materialQuiz) {
+      return;
+    }
+
+    const materialOptionList = (_a = materialQuiz.options) !== null && _a !== void 0 ? _a : []; // options
+
+    const materialGroupList = (_b = materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.groups) !== null && _b !== void 0 ? _b : []; // groups
+
+    const flattenAnswerList = flattenDeep__default["default"](answerInfo);
+    const userAnswerList = getCurrentAnswer(answerInfo, materialOptionList, materialGroupList);
+    const userOptionList = materialOptionList.filter((_, index) => !flattenAnswerList.includes(index)).map(option => {
+      const order = materialOptionList.findIndex(optionInfo => optionInfo === option);
+      return {
+        order,
+        options: materialOptionList[order]
+      };
+    });
+    const optionList = materialOptionList.map((option, index) => ({
+      order: materialOptionList.findIndex(optionInfo => optionInfo === option),
+      options: materialOptionList[index]
+    }));
+    setGroupList(materialGroupList);
+    setOptionList(optionList);
+    setCurrentAnswerList(userAnswerList);
+    setCurrentOptionList(userOptionList);
+  }, [materialQuiz]);
+  /**
+   * submit handler
+   */
+
+  const handleSubmit = async () => {
+    if (!materialQuiz) {
+      return;
+    }
+
+    setSubmitStatus('pending');
+
+    try {
+      const {
+        quizResponseId
+      } = await apiClient.postOrgMaterialQuizResponseAdd({
+        materialQuizId: materialQuiz.id,
+        answer: currentAnswerList.map(answers => answers.map(answer => answer.order))
+      });
+      const {
+        quizResponse
+      } = await apiClient.getOrgMaterialQuizResponseGet({
+        quizResponseId
+      });
+      setMaterialQuizResponse(quizResponse);
+      void refreshOrgMaterialQuiz();
+      setHasSubmitted(true);
+      onSubmit(true, index.getQuizResult(quizResponse));
+      setSubmitStatus('resolved');
+    } catch (error) {
+      console.error(error);
+      onSubmit(false);
+      setSubmitStatus('rejected');
+    }
+  };
+  /**
+   *
+   */
+
+
+  const handleAnswerReset = () => {
+    const cloneAnswerList = lodashEs.cloneDeep(currentAnswerList);
+    const emptyAnswerList = cloneAnswerList.map(() => []);
+    setCurrentAnswerList(emptyAnswerList);
+    setCurrentOptionList(optionList);
+  };
+  /**
+   *
+   */
+
+
+  const updateCurrentAnswer = (targetId, dropzoneIndex) => {
+    const selectedUserOption = currentOptionList.find(option => option.order === targetId);
+    const selectedAnswerOption = optionList.find(option => option.order === targetId);
+
+    if (selectedUserOption) {
+      setCurrentOptionList(prevOptionList => prevOptionList.filter(option => option.order !== selectedUserOption.order));
+    }
+
+    if (!selectedAnswerOption) {
+      return;
+    }
+
+    setCurrentAnswerList(prevAnswerList => {
+      const cloneAnswerList = lodashEs.cloneDeep(prevAnswerList);
+      const answerList = cloneAnswerList.map(answers => answers.filter(answer => answer.order !== targetId));
+      answerList[dropzoneIndex] = [...answerList[dropzoneIndex], selectedAnswerOption];
+      return answerList;
+    });
+    setHasSubmitted(false);
+  };
+  /**
+   *
+   */
+
+
+  const updateCurrentOption = targetId => {
+    var _a;
+
+    const pastTargetZoneIndex = currentAnswerList.findIndex(answer => answer === null || answer === void 0 ? void 0 : answer.find(item => item.order === targetId));
+    const selectedOption = (_a = currentAnswerList[pastTargetZoneIndex]) === null || _a === void 0 ? void 0 : _a.find(answer => answer.order === targetId);
+
+    if (!selectedOption) {
+      return;
+    }
+
+    setCurrentAnswerList(prevAnswerList => {
+      const filteredAnswerList = prevAnswerList[pastTargetZoneIndex].filter(answer => answer.order !== selectedOption.order);
+      prevAnswerList[pastTargetZoneIndex] = filteredAnswerList;
+      return [...prevAnswerList];
+    });
+    setCurrentOptionList(prevOptionList => [...prevOptionList, ...[selectedOption]]);
+  }; //
+  //
+  // quiz response fetcher
+
+
+  React__default["default"].useEffect(() => {
+    if (!userId && (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.lastQuizResponseId)) {
+      const controller = new AbortController();
+      const {
+        signal
+      } = controller;
+      apiClient.getOrgMaterialQuizResponseGet({
+        quizResponseId: materialQuiz.lastQuizResponseId
+      }, {
+        signal
+      }).then(response => {
+        const answerInfo = response.quizResponse.answer;
+        initQuizGroupInfo(answerInfo);
+        setMaterialQuizResponse(response.quizResponse);
+      }).catch(error => {
+        console.error(error);
+      });
+      return () => controller.abort();
+    } else {
+      const answerInfo = [];
+      initQuizGroupInfo(answerInfo);
+    }
+  }, [initQuizGroupInfo, materialQuiz, userId]);
+  /**
+   *
+   */
+
+  const renderQuizInfo = () => {
+    if (!materialQuiz) {
+      return null;
+    }
+
+    return React__default["default"].createElement(blocks.Flex, {
+      marginbottom: "1.5rem",
+      column: true
+    }, React__default["default"].createElement(blocks.Flex, null, React__default["default"].createElement(blocks.Text, {
+      bold: true,
+      size: "large",
+      customStyles: {
+        color: designTokens.base.color.primary3,
+        marginRight: '0.5rem'
+      }
+    }, 'Q.'), React__default["default"].createElement(blocks.Text, {
+      bold: true,
+      role: "white",
+      size: "large",
+      wordBreak: "break-word"
+    }, materialQuiz.questionTitle)), materialQuiz.questionDescription ? React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(blocks.Vspace, {
+      height: 1
+    }), React__default["default"].createElement(markdown.MarkdownSSR, {
+      children: materialQuiz.questionDescription,
+      dark: true,
+      paddingx: 0,
+      paddingy: 0
+    })) : null);
+  }; //
+  //
+  //
+
+
+  return React__default["default"].createElement(context.Provider, {
+    value: {
+      groupList,
+      optionList,
+      currentOptionList,
+      currentAnswerList,
+      onUpdateAnswer: setCurrentAnswerList,
+      onUpdateOption: setCurrentOptionList,
+      onUpdateHasSubmitted: setHasSubmitted,
+      updateCurrentAnswer,
+      updateCurrentOption,
+      handleAnswerReset
+    }
+  }, React__default["default"].createElement(QuestionBox["default"], {
+    title: materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.title,
+    onNext: onNext,
+    isNextActive: hasSubmitted && typeof onNext === 'function',
+    submitStatus: React__default["default"].createElement(QuizSubmitStatusText, {
+      status: submitStatus
+    }),
+    submitResult: React__default["default"].createElement(QuizResultBadge, {
+      materialQuizResponse: materialQuizResponse
+    }),
+    footerActions: [{
+      border: true,
+      disabled: !flattenDeep__default["default"](currentAnswerList).length || !!userId,
+      loading: submitStatus === 'pending',
+      tabIndex: 0,
+      transparent: false,
+      role: 'primary',
+      onClick: handleSubmit,
+      children: intl.formatMessage({
+        id: 'materialQuiz.submit'
+      })
+    }]
+  }, renderQuizInfo(), vertical ? React__default["default"].createElement(MaterialQuizGroupMobile, null) : React__default["default"].createElement(MaterialQuizGroupDesktop, null)));
+};
+
+var MaterialQuizGroup$1 = MaterialQuizGroup;
+
+module.exports = MaterialQuizGroup$1;

package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroupDesktop.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const MaterialQuizGroupDesktop: React.FC;
+export default MaterialQuizGroupDesktop;