@elice/material-quiz 1.240709.0 → 1.240710.0

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import { getOrgMaterialQuizResponseGet, getOrgMaterialQuizResponseList, postOrgMaterialQuizResponseAdd } from '@elice/api-client';
+import { base } from '@elice/design-tokens';
 import { useRawEliceIntl } from '@elice/intl';
-import { Stack } from '@mui/material';
+import { useTheme, Stack } from '@mui/material';
 import { MATERIAL_QUIZ_PASSIVE_ID, MATERIAL_QUIZ_ANSWER_ID } from '../../constant/element.js';
-import { shouldResetOptions, checkUserLectureTestEnded, getOptionStatus, getQuizResult } from '../../helpers/index.js';
+import { checkUserLectureTestEnded, shouldResetOptions, getOptionStatus, getQuizResult } from '../../helpers/index.js';
 import { useCaculatePassage } from '../../hooks/useCaculatePassage.js';
 import '../shared/QuizDraggbleOption.js';
 import '../shared/QuizDraggbleDummyOption.js';
@@ -14,6 +15,7 @@ import QuestionCheckboxOption from '../shared/question-checkbox/QuestionCheckbox
 import QuestionBox from '../shared/QuestionBox.js';
 import StyledMarkdown from '../shared/StyledMarkdown.js';
 import { useMaterialQuizState, useMaterialQuizDispatch } from './context/MaterialQuizContext.js';
+import MaterialQuizAnswerExplanation from './MaterialQuizAnswerExplanation.js';
 import MaterialQuizInfo from './MaterialQuizInfo.js';
 import QuizResultBadge from './QuizResultBadge.js';
 import QuizSubmitStatusText from './QuizSubmitStatusText.js';
@@ -34,6 +36,7 @@ const MaterialQuizSelectMultiple = ({
     refreshOrgMaterialQuiz,
     onDirty
   } = useMaterialQuizDispatch();
+  const theme = useTheme();
   // state
   const intl = useRawEliceIntl();
   const [selectedAnswer, setSelectedAnswer] = React.useState([]);
@@ -47,6 +50,7 @@ const MaterialQuizSelectMultiple = ({
   const [isActive, setIsActive] = React.useState(false);
   const [hasSubmitted, setHasSubmitted] = React.useState(false);
   const isNextActive = hasSubmitted && typeof onNext === 'function';
+  const isDisabled = selectedAnswer.length === 0 || checkUserLectureTestEnded(lecture) || !!userId;
   // answer select handler
   const handleAnswerSelect = index => {
     if (checkUserLectureTestEnded(lecture) || !!userId) {
@@ -158,16 +162,19 @@ const MaterialQuizSelectMultiple = ({
     }),
     bodyContainerRef: containerRef,
     footerActions: [{
-      border: true,
-      disabled: selectedAnswer.length === 0 || checkUserLectureTestEnded(lecture) || !!userId,
+      border: false,
+      disabled: isDisabled,
       loading: submitStatus === 'pending',
       tabIndex: 0,
       transparent: false,
-      role: isNextActive ? 'secondary' : 'lightpurple',
       onClick: handleSubmit,
       children: intl.formatMessage({
         id: isNextActive ? 'materialQuiz.resubmit' : 'materialQuiz.submit'
-      })
+      }),
+      customStyles: {
+        backgroundColor: isNextActive ? theme.palette.secondary.main : isDisabled ? base.color.gray6 : theme.palette.primary.main,
+        color: isNextActive ? theme.palette.secondary.contrastText : isDisabled ? base.color.gray3 : theme.palette.primary.contrastText
+      }
     }]
   }, React.createElement(Stack, {
     height: "100%",
@@ -210,7 +217,7 @@ const MaterialQuizSelectMultiple = ({
       paddingy: 0,
       dark: true
     }) : option === null || option === void 0 ? void 0 : option.content);
-  }) : null))));
+  }) : null), React.createElement(MaterialQuizAnswerExplanation, null))));
 };
 
 export { MaterialQuizSelectMultiple as default };

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

@@ -4,7 +4,7 @@ import { Icon, Flex, Text } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eilSortItem } from '@elice/icons';
 import { useRawEliceIntl } from '@elice/intl';
-import { Stack } from '@mui/material';
+import { useTheme, Stack } from '@mui/material';
 import styled from 'styled-components';
 import { MATERIAL_QUIZ_PASSIVE_ID, MATERIAL_QUIZ_ANSWER_ID } from '../../constant/element.js';
 import { getQuizResult, checkUserLectureTestEnded, getQuizResultStatus, QuizResultStatus } from '../../helpers/index.js';
@@ -15,6 +15,7 @@ import QuizDraggbleDroppedOption from '../shared/QuizDraggbleDroppedOption.js';
 import QuizDraggbleDummyOption from '../shared/QuizDraggbleDummyOption.js';
 import QuizDraggbleOption from '../shared/QuizDraggbleOption.js';
 import { useMaterialQuizState, useMaterialQuizDispatch } from './context/MaterialQuizContext.js';
+import MaterialQuizAnswerExplanation from './MaterialQuizAnswerExplanation.js';
 import MaterialQuizInfo from './MaterialQuizInfo.js';
 import QuizResultBadge from './QuizResultBadge.js';
 import QuizSubmitStatusText from './QuizSubmitStatusText.js';
@@ -72,6 +73,7 @@ const MaterialQuizSelectMultipleOrder = ({
     refreshOrgMaterialQuiz,
     onDirty
   } = useMaterialQuizDispatch();
+  const theme = useTheme();
   // state
   const intl = useRawEliceIntl();
   const [materialQuizResponse, setMaterialQuizResponse] = React.useState();
@@ -86,6 +88,7 @@ const MaterialQuizSelectMultipleOrder = ({
   const [correctAnswerList, setCorrectAnswerList] = React.useState([]);
   const [hasSubmitted, setHasSubmitted] = React.useState(false);
   const isNextActive = hasSubmitted && typeof onNext === 'function';
+  const isDisabled = (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.correctOptionCount) !== answerList.filter(answer => answer.order !== null).length || !!userId;
   // ref
   const optionBoxRef = React.useRef(null);
   // to make jquery touchable
@@ -414,16 +417,19 @@ const MaterialQuizSelectMultipleOrder = ({
     }),
     bodyContainerRef: containerRef,
     footerActions: [{
-      border: true,
-      disabled: (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.correctOptionCount) !== answerList.filter(answer => answer.order !== null).length || !!userId,
+      border: false,
+      disabled: isDisabled,
       loading: submitStatus === 'pending',
       tabIndex: 0,
       transparent: false,
-      role: isNextActive ? 'secondary' : 'lightpurple',
       onClick: handleSubmit,
       children: intl.formatMessage({
         id: isNextActive ? 'materialQuiz.resubmit' : 'materialQuiz.submit'
-      })
+      }),
+      customStyles: {
+        backgroundColor: isNextActive ? theme.palette.secondary.main : isDisabled ? base.color.gray6 : theme.palette.primary.main,
+        color: isNextActive ? theme.palette.secondary.contrastText : isDisabled ? base.color.gray3 : theme.palette.primary.contrastText
+      }
     }]
   }, React.createElement(Stack, {
     height: "100%",
@@ -468,7 +474,7 @@ const MaterialQuizSelectMultipleOrder = ({
       indexOrder: index + 1,
       isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
     });
-  }))) : null)));
+  }))) : null, React.createElement(MaterialQuizAnswerExplanation, null))));
 };
 
 export { MaterialQuizSelectMultipleOrder as default };

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import { getOrgMaterialQuizResponseGet, getOrgMaterialQuizResponseList, postOrgMaterialQuizResponseAdd } from '@elice/api-client';
+import { base } from '@elice/design-tokens';
 import { useRawEliceIntl } from '@elice/intl';
-import { Stack } from '@mui/material';
+import { useTheme, Stack } from '@mui/material';
 import { MATERIAL_QUIZ_PASSIVE_ID, MATERIAL_QUIZ_ANSWER_ID } from '../../constant/element.js';
 import { checkUserLectureTestEnded, getOptionStatus, getQuizResult } from '../../helpers/index.js';
 import { useCaculatePassage } from '../../hooks/useCaculatePassage.js';
@@ -14,6 +15,7 @@ import '../shared/question-checkbox/QuestionCheckboxOption.js';
 import QuestionBox from '../shared/QuestionBox.js';
 import StyledMarkdown from '../shared/StyledMarkdown.js';
 import { useMaterialQuizState, useMaterialQuizDispatch } from './context/MaterialQuizContext.js';
+import MaterialQuizAnswerExplanation from './MaterialQuizAnswerExplanation.js';
 import MaterialQuizInfo from './MaterialQuizInfo.js';
 import QuizResultBadge from './QuizResultBadge.js';
 import QuizSubmitStatusText from './QuizSubmitStatusText.js';
@@ -34,6 +36,7 @@ const MaterialQuizSelectOne = ({
     refreshOrgMaterialQuiz,
     onDirty
   } = useMaterialQuizDispatch();
+  const theme = useTheme();
   // state
   const intl = useRawEliceIntl();
   const [selectedAnswer, setSelectedAnswer] = React.useState();
@@ -47,6 +50,7 @@ const MaterialQuizSelectOne = ({
   const [isActive, setIsActive] = React.useState(false);
   const [hasSubmitted, setHasSubmitted] = React.useState(false);
   const isNextActive = hasSubmitted && typeof onNext === 'function';
+  const isDisabled = selectedAnswer === undefined || checkUserLectureTestEnded(lecture) || !!userId;
   // answer select handler
   const handleAnswerSelect = index => {
     if (checkUserLectureTestEnded(lecture) || !!userId) {
@@ -149,16 +153,19 @@ const MaterialQuizSelectOne = ({
     }),
     bodyContainerRef: containerRef,
     footerActions: [{
-      border: true,
-      disabled: selectedAnswer === undefined || checkUserLectureTestEnded(lecture) || !!userId,
+      border: false,
+      disabled: isDisabled,
       loading: submitStatus === 'pending',
       tabIndex: 0,
       transparent: false,
-      role: isNextActive ? 'secondary' : 'lightpurple',
       onClick: handleSubmit,
       children: intl.formatMessage({
         id: isNextActive ? 'materialQuiz.resubmit' : 'materialQuiz.submit'
-      })
+      }),
+      customStyles: {
+        backgroundColor: isNextActive ? theme.palette.secondary.main : isDisabled ? base.color.gray6 : theme.palette.primary.main,
+        color: isNextActive ? theme.palette.secondary.contrastText : isDisabled ? base.color.gray3 : theme.palette.primary.contrastText
+      }
     }]
   }, React.createElement(Stack, {
     height: "100%",
@@ -201,7 +208,7 @@ const MaterialQuizSelectOne = ({
       paddingy: 0,
       dark: true
     }) : option === null || option === void 0 ? void 0 : option.content);
-  }) : null)) : null));
+  }) : null), React.createElement(MaterialQuizAnswerExplanation, null)) : null));
 };
 
 export { MaterialQuizSelectOne as default };

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

@@ -3,7 +3,7 @@ import { getOrgMaterialQuizResponseGet, getOrgMaterialQuizResponseList, postOrgM
 import { Flex } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { useRawEliceIntl } from '@elice/intl';
-import { Stack } from '@mui/material';
+import { useTheme, Stack } from '@mui/material';
 import styled from 'styled-components';
 import { MATERIAL_QUIZ_PASSIVE_ID, MATERIAL_QUIZ_ANSWER_ID } from '../../constant/element.js';
 import { checkUserLectureTestEnded, getQuizResult } from '../../helpers/index.js';
@@ -37,6 +37,7 @@ const MaterialQuizText = ({
     refreshOrgMaterialQuiz,
     onDirty
   } = useMaterialQuizDispatch();
+  const theme = useTheme();
   // state
   const intl = useRawEliceIntl();
   const [materialQuizResponse, setMaterialQuizResponse] = React.useState();
@@ -48,6 +49,7 @@ const MaterialQuizText = ({
   const [answer, setAnswer] = React.useState('');
   const [hasSubmitted, setHasSubmitted] = React.useState(false);
   const isNextActive = hasSubmitted && typeof onNext === 'function';
+  const isDisabled = answer.length === 0 || checkUserLectureTestEnded(lecture) || !!userId;
   // quiz response fetcher
   React.useEffect(() => {
     if (!userId && (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.lastQuizResponseId)) {
@@ -151,16 +153,19 @@ const MaterialQuizText = ({
     isNextActive: isNextActive,
     bodyContainerRef: containerRef,
     footerActions: [{
-      border: true,
+      border: false,
       children: intl.formatMessage({
         id: isNextActive ? 'materialQuiz.resubmit' : 'materialQuiz.submit'
       }),
-      disabled: answer.length === 0 || checkUserLectureTestEnded(lecture) || !!userId,
+      disabled: isDisabled,
       loading: submitStatus === 'pending',
       tabIndex: 0,
       transparent: false,
-      role: isNextActive ? 'secondary' : 'lightpurple',
-      onClick: handleSubmit
+      onClick: handleSubmit,
+      customStyles: {
+        backgroundColor: isNextActive ? theme.palette.secondary.main : isDisabled ? base.color.gray6 : theme.palette.primary.main,
+        color: isNextActive ? theme.palette.secondary.contrastText : isDisabled ? base.color.gray3 : theme.palette.primary.contrastText
+      }
     }]
   }, React.createElement(Stack, {
     height: "100%",

package/es/components/material-quiz/context/MaterialQuizContext.d.ts

@@ -9,6 +9,7 @@ export interface State {
     userId?: number;
     initStatus: APIStatus;
     isLongPassage: boolean;
+    isInitialLoading: boolean;
 }
 export type MaterialQuizProps = {
     materialQuizId: number;
@@ -28,6 +29,7 @@ interface DispatchContextType {
     setVertical: React.Dispatch<React.SetStateAction<boolean>>;
     onNext?: () => void;
     setIsLongPassage: React.Dispatch<React.SetStateAction<boolean>>;
+    setIsInitialLoading: React.Dispatch<React.SetStateAction<boolean>>;
 }
 declare function MaterialQuizProvider({ materialQuizId, userId, onSubmit, onDirty, onNext, children, }: MaterialQuizProviderProps): React.JSX.Element;
 declare function useMaterialQuizState(): State;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { config, postOrgMaterialQuizOptionsSetSelect, getOrgMaterialQuizGet, getOrgCourseGet, getOrgLectureGet } from '@elice/api-client';
 import { useMaterialConfigApiClientUpdate, useMaterialFetchRaw } from '@elice/material-shared-utils';
 import { enums } from '@elice/types';
@@ -20,7 +20,12 @@ function MaterialQuizProvider({
   const [initStatus, setInitStatus] = React.useState('idle');
   const [vertical, setVertical] = React.useState(false);
   const [isLongPassage, setIsLongPassage] = React.useState(false);
+  const [isInitialLoading, setIsInitialLoading] = React.useState(true);
   const canInit = useMaterialConfigApiClientUpdate(config.init);
+  const resetLayout = () => {
+    setIsInitialLoading(true);
+    setIsLongPassage(false);
+  };
   const {
     materialQuiz,
     materialLecturePage,
@@ -73,6 +78,11 @@ function MaterialQuizProvider({
     }
     return () => controller.abort();
   }, [materialLecturePage]);
+  useEffect(() => {
+    if (materialQuizId) {
+      resetLayout();
+    }
+  }, [materialQuizId]);
   React.useEffect(() => {
     if (canInit && materialLecturePage) {
       void init();
@@ -86,7 +96,8 @@ function MaterialQuizProvider({
       userId,
       vertical,
       initStatus,
-      isLongPassage
+      isLongPassage,
+      isInitialLoading
     }
   }, React.createElement(DispatchContext.Provider, {
     value: {
@@ -95,7 +106,8 @@ function MaterialQuizProvider({
       onNext,
       refreshOrgMaterialQuiz,
       setVertical,
-      setIsLongPassage
+      setIsLongPassage,
+      setIsInitialLoading
     }
   }, children));
 }

package/es/components/material-quiz/locales/en.json.js

@@ -1,3 +1,3 @@
-var messageEn = {"materialQuiz.anchorLabel.question":"Fingerprint","materialQuiz.anchorLabel.answer":"Look","materialQuiz.error":"Failed to fetch quiz","materialQuiz.submit":"Submit","materialQuiz.resubmit":"Resubmit","materialQuiz.submittedAnswer":"Submitted Answer","materialQuiz.answer":"Answer","materialQuiz.next":"Next question >","materialQuiz.selectOne.answer.title":"Choose from the views below.","materialQuiz.selectMultiple.answer.title":"Choose from the views below. (Redundant selections available)","materialQuiz.selectMultipleOrder.answer.title":"Drag and drop your answers.","materialQuiz.text.answer.title":"Please fill out the answer.","materialQuiz.empty.title":"Quiz is now preparing.","materialQuiz.empty.description":"Please check again after quiz posting!","materialQuiz.survey.empty.title":"Survey is now preparing.","materialQuiz.survey.empty.description":"Please check again after survey posting!","materialQuiz.submitStatus.success":"Submitted","materialQuiz.submitStatus.failure":"Failed to submit","materialQuiz.resultStatus.correct":"Correct","materialQuiz.resultStatus.wrong":"Wrong","materialQuiz.resultStatus.submitted":"Submitted","materialQuiz.explanation.close":"close quiz explanations","materialQuiz.explanation.show":"show quiz explanations","materialQuiz.explanation.empty":"no explanations","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.bottomSheet.title":"Options","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"};
+var messageEn = {"materialQuiz.anchorLabel.question":"Passage","materialQuiz.anchorLabel.answer":"Answer","materialQuiz.error":"Failed to fetch quiz","materialQuiz.submit":"Submit","materialQuiz.resubmit":"Resubmit","materialQuiz.submittedAnswer":"Submitted Answer","materialQuiz.answer":"Answer","materialQuiz.next":"Next question >","materialQuiz.selectOne.answer.title":"Choose from the views below.","materialQuiz.selectMultiple.answer.title":"Choose from the views below. (Redundant selections available)","materialQuiz.selectMultipleOrder.answer.title":"Drag and drop your answers.","materialQuiz.text.answer.title":"Please fill out the answer.","materialQuiz.empty.title":"Quiz is now preparing.","materialQuiz.empty.description":"Please check again after quiz posting!","materialQuiz.survey.empty.title":"Survey is now preparing.","materialQuiz.survey.empty.description":"Please check again after survey posting!","materialQuiz.submitStatus.success":"Submitted","materialQuiz.submitStatus.failure":"Failed to submit","materialQuiz.resultStatus.correct":"Correct","materialQuiz.resultStatus.wrong":"Wrong","materialQuiz.resultStatus.submitted":"Submitted","materialQuiz.explanation.close":"close quiz explanations","materialQuiz.explanation.show":"show quiz explanations","materialQuiz.explanation.empty":"no explanations","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.bottomSheet.title":"Options","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"};
 
 export { messageEn as default };

package/es/components/material-quiz/locales/ja.json.js

@@ -1,3 +1,3 @@
-var ja = {"materialQuiz.anchorLabel.question":"指紋","materialQuiz.anchorLabel.answer":"見る","materialQuiz.error":"クイズの取得に失敗しました。","materialQuiz.submit":"提出","materialQuiz.resubmit":"再送信","materialQuiz.submittedAnswer":"提出された回答","materialQuiz.answer":"回答","materialQuiz.next":"次の質問 >","materialQuiz.selectOne.answer.title":"以下から選択してください。","materialQuiz.selectMultiple.answer.title":"以下から選択してください。 (冗長な選択肢も利用可能)","materialQuiz.selectMultipleOrder.answer.title":"ドラッグして回答をドロップしてください。","materialQuiz.text.answer.title":"回答を記入してください。","materialQuiz.empty.title":"クイズは今準備中です。","materialQuiz.empty.description":"クイズの投稿後にもう一度確認してください！","materialQuiz.survey.empty.title":"調査は現在準備中です。","materialQuiz.survey.empty.description":"調査投稿後にもう一度ご確認ください！","materialQuiz.submitStatus.success":"提出済","materialQuiz.submitStatus.failure":"提出に失敗しました。","materialQuiz.resultStatus.correct":"正しい","materialQuiz.resultStatus.wrong":"間違った","materialQuiz.resultStatus.submitted":"提出済","materialQuiz.explanation.close":"クイズの説明を閉じる","materialQuiz.explanation.show":"クイズの説明を表示します","materialQuiz.explanation.empty":"いいです。","materialQuiz.text.placeholder":"回答を入力してください","materialQuiz.text.correct":"その通りです！","materialQuiz.text.wrong":"それは間違っています。もう一度やってみてください！","materialQuiz.order.answerEmpty":"オプションをここに戻すことができます。","materialQuiz.bottomSheet.title":"オプション","materialQuiz.bottomSheet.optionEmpty":"すべてのビューがグループに配置されました。","materialQuiz.dropzone.desktop.answerEmpty":"ビューをエリアにドラッグしてください。","materialQuiz.dropzone.mobile.answerEmpty":"ここをクリックしてビューを追加してください。","materialQuiz.dropzone.optionEmpty":"オプション","materialQuiz.dropzone.optionReset":"回答をリセットします"};
+var ja = {"materialQuiz.anchorLabel.question":"文章","materialQuiz.anchorLabel.answer":"回答","materialQuiz.error":"クイズの取得に失敗しました。","materialQuiz.submit":"提出","materialQuiz.resubmit":"再送信","materialQuiz.submittedAnswer":"提出された回答","materialQuiz.answer":"回答","materialQuiz.next":"次の質問 >","materialQuiz.selectOne.answer.title":"以下から選択してください。","materialQuiz.selectMultiple.answer.title":"以下から選択してください。 (冗長な選択肢も利用可能)","materialQuiz.selectMultipleOrder.answer.title":"ドラッグして回答をドロップしてください。","materialQuiz.text.answer.title":"回答を記入してください。","materialQuiz.empty.title":"クイズは今準備中です。","materialQuiz.empty.description":"クイズの投稿後にもう一度確認してください！","materialQuiz.survey.empty.title":"調査は現在準備中です。","materialQuiz.survey.empty.description":"調査投稿後にもう一度ご確認ください！","materialQuiz.submitStatus.success":"提出済","materialQuiz.submitStatus.failure":"提出に失敗しました。","materialQuiz.resultStatus.correct":"正しい","materialQuiz.resultStatus.wrong":"間違った","materialQuiz.resultStatus.submitted":"提出済","materialQuiz.explanation.close":"クイズの説明を閉じる","materialQuiz.explanation.show":"クイズの説明を表示します","materialQuiz.explanation.empty":"いいです。","materialQuiz.text.placeholder":"回答を入力してください","materialQuiz.text.correct":"その通りです！","materialQuiz.text.wrong":"それは間違っています。もう一度やってみてください！","materialQuiz.order.answerEmpty":"オプションをここに戻すことができます。","materialQuiz.bottomSheet.title":"オプション","materialQuiz.bottomSheet.optionEmpty":"すべてのビューがグループに配置されました。","materialQuiz.dropzone.desktop.answerEmpty":"ビューをエリアにドラッグしてください。","materialQuiz.dropzone.mobile.answerEmpty":"ここをクリックしてビューを追加してください。","materialQuiz.dropzone.optionEmpty":"オプション","materialQuiz.dropzone.optionReset":"回答をリセットします"};
 
 export { ja as default };

package/es/components/material-quiz/locales/ko.json.js

@@ -1,3 +1,3 @@
-var messageKo = {"materialQuiz.anchorLabel.question":"지문","materialQuiz.anchorLabel.answer":"보기","materialQuiz.error":"퀴즈를 불러오는데 실패했습니다.\n잠시 후 다시 시도해주세요.","materialQuiz.submit":"제출","materialQuiz.resubmit":"다시 제출","materialQuiz.submittedAnswer":"제출한 답","materialQuiz.answer":"정답","materialQuiz.next":"다음 문제로 이동 >","materialQuiz.selectOne.answer.title":"아래 보기에서 골라주세요.","materialQuiz.selectMultiple.answer.title":"아래 보기에서 골라주세요. (중복 선택 가능)","materialQuiz.selectMultipleOrder.answer.title":"답안을 드래그 앤 드롭하세요.","materialQuiz.text.answer.title":"답안을 작성해 주세요.","materialQuiz.empty.title":"퀴즈가 준비 중 입니다.","materialQuiz.empty.description":"퀴즈 게시 후 다시 확인해주세요!","materialQuiz.survey.empty.title":"설문조사 준비 중 입니다.","materialQuiz.survey.empty.description":"설문지 게시 후 다시 확인해주세요!","materialQuiz.submitStatus.success":"제출되었습니다.","materialQuiz.submitStatus.failure":"제출에 실패하였습니다.","materialQuiz.resultStatus.correct":"정답","materialQuiz.resultStatus.wrong":"오답","materialQuiz.resultStatus.submitted":"제출완료","materialQuiz.explanation.close":"퀴즈해설 닫기","materialQuiz.explanation.show":"퀴즈 해설 보기","materialQuiz.explanation.empty":"작성된 해설이 없습니다.","materialQuiz.text.placeholder":"답안을 작성해 주세요.","materialQuiz.text.correct":"정답입니다.","materialQuiz.text.wrong":"오답입니다. 다시 답안을 제출해보세요.","materialQuiz.order.answerEmpty":"항목을 다시 이곳으로 옮길 수 있습니다.","materialQuiz.bottomSheet.title":"보기","materialQuiz.bottomSheet.optionEmpty":"모든 보기를 그룹에 배치하였습니다.","materialQuiz.dropzone.desktop.answerEmpty":"보기를 영역에 끌어 넣어주세요.","materialQuiz.dropzone.mobile.answerEmpty":"이곳을 클릭하여 보기를 넣어주세요.","materialQuiz.dropzone.optionEmpty":"보기","materialQuiz.dropzone.optionReset":"답안 초기화"};
+var messageKo = {"materialQuiz.anchorLabel.question":"지문","materialQuiz.anchorLabel.answer":"답안","materialQuiz.error":"퀴즈를 불러오는데 실패했습니다.\n잠시 후 다시 시도해주세요.","materialQuiz.submit":"제출","materialQuiz.resubmit":"다시 제출","materialQuiz.submittedAnswer":"제출한 답","materialQuiz.answer":"정답","materialQuiz.next":"다음 문제로 이동 >","materialQuiz.selectOne.answer.title":"아래 보기에서 골라주세요.","materialQuiz.selectMultiple.answer.title":"아래 보기에서 골라주세요. (중복 선택 가능)","materialQuiz.selectMultipleOrder.answer.title":"답안을 드래그 앤 드롭하세요.","materialQuiz.text.answer.title":"답안을 작성해 주세요.","materialQuiz.empty.title":"퀴즈가 준비 중 입니다.","materialQuiz.empty.description":"퀴즈 게시 후 다시 확인해주세요!","materialQuiz.survey.empty.title":"설문조사 준비 중 입니다.","materialQuiz.survey.empty.description":"설문지 게시 후 다시 확인해주세요!","materialQuiz.submitStatus.success":"제출되었습니다.","materialQuiz.submitStatus.failure":"제출에 실패하였습니다.","materialQuiz.resultStatus.correct":"정답","materialQuiz.resultStatus.wrong":"오답","materialQuiz.resultStatus.submitted":"제출완료","materialQuiz.explanation.close":"퀴즈해설 닫기","materialQuiz.explanation.show":"퀴즈 해설 보기","materialQuiz.explanation.empty":"작성된 해설이 없습니다.","materialQuiz.text.placeholder":"답안을 작성해 주세요.","materialQuiz.text.correct":"정답입니다.","materialQuiz.text.wrong":"오답입니다. 다시 답안을 제출해보세요.","materialQuiz.order.answerEmpty":"항목을 다시 이곳으로 옮길 수 있습니다.","materialQuiz.bottomSheet.title":"보기","materialQuiz.bottomSheet.optionEmpty":"모든 보기를 그룹에 배치하였습니다.","materialQuiz.dropzone.desktop.answerEmpty":"보기를 영역에 끌어 넣어주세요.","materialQuiz.dropzone.mobile.answerEmpty":"이곳을 클릭하여 보기를 넣어주세요.","materialQuiz.dropzone.optionEmpty":"보기","materialQuiz.dropzone.optionReset":"답안 초기화"};
 
 export { messageKo as default };

package/es/components/material-quiz/locales/th.json.js

@@ -1,3 +1,3 @@
-var th = {"materialQuiz.anchorLabel.question":"ลายนิ้วมือ","materialQuiz.anchorLabel.answer":"ดู","materialQuiz.error":"ไม่สามารถดึงควิซได้","materialQuiz.submit":"ส่งใบสมัคร","materialQuiz.resubmit":"ส่งอีกครั้ง","materialQuiz.submittedAnswer":"ฉันสามารถตอบคำถามเช่นนี้ได้","materialQuiz.answer":"ตอบ","materialQuiz.next":"คำถามถัดไป >","materialQuiz.selectOne.answer.title":"เลือกจากมุมมองด้านล่างนี้","materialQuiz.selectMultiple.answer.title":"เลือกจากรายการด้านล่าง (มีการเลือกที่ซ้ำซ้อน)","materialQuiz.selectMultipleOrder.answer.title":"ลากและวางคำตอบของคุณ","materialQuiz.text.answer.title":"กรุณากรอกคำตอบ","materialQuiz.empty.title":"ควิซกำลังเตรียมอยู่ตอนนี้","materialQuiz.empty.description":"โปรดตรวจสอบอีกครั้งหลังจากโพสต์ควิซ!","materialQuiz.survey.empty.title":"การสำรวจกำลังเตรียมการอยู่ค่ะ","materialQuiz.survey.empty.description":"โปรดตรวจสอบอีกครั้งหลังจากโพสต์แบบสำรวจ!","materialQuiz.submitStatus.success":"เสนอ","materialQuiz.submitStatus.failure":"การส่งล้มเหลว","materialQuiz.resultStatus.correct":"ถูกต้อง","materialQuiz.resultStatus.wrong":"ผิด","materialQuiz.resultStatus.submitted":"เสนอ","materialQuiz.explanation.close":"ปิดคำอธิบายควิซ","materialQuiz.explanation.show":"แสดงคำอธิบายของควิซ","materialQuiz.explanation.empty":"ไม่ให้อธิบาย","materialQuiz.text.placeholder":"กรุณากรอกคำตอบ","materialQuiz.text.correct":"ถูกต้อง!","materialQuiz.text.wrong":"นั่นผิด ลองอีกครั้ง!","materialQuiz.order.answerEmpty":"คุณสามารถย้ายตัวเลือกกลับมาที่นี่ได้","materialQuiz.bottomSheet.title":"ตัวเลือก","materialQuiz.bottomSheet.optionEmpty":"ทุกมุมมองได้ถูกวางไว้ในกลุ่มแล้ว","materialQuiz.dropzone.desktop.answerEmpty":"ลากมุมมองเข้าสู่พื้นที่","materialQuiz.dropzone.mobile.answerEmpty":"คลิกที่นี่เพื่อเพิ่มมุมมอง","materialQuiz.dropzone.optionEmpty":"ตัวเลือก","materialQuiz.dropzone.optionReset":"รีเซ็ตคำตอบ"};
+var th = {"materialQuiz.anchorLabel.question":"ทางเดิน","materialQuiz.anchorLabel.answer":"ดคำตอบ","materialQuiz.error":"ไม่สามารถดึงควิซได้","materialQuiz.submit":"ส่งใบสมัคร","materialQuiz.resubmit":"ส่งอีกครั้ง","materialQuiz.submittedAnswer":"ฉันสามารถตอบคำถามเช่นนี้ได้","materialQuiz.answer":"ตอบ","materialQuiz.next":"คำถามถัดไป >","materialQuiz.selectOne.answer.title":"เลือกจากมุมมองด้านล่างนี้","materialQuiz.selectMultiple.answer.title":"เลือกจากรายการด้านล่าง (มีการเลือกที่ซ้ำซ้อน)","materialQuiz.selectMultipleOrder.answer.title":"ลากและวางคำตอบของคุณ","materialQuiz.text.answer.title":"กรุณากรอกคำตอบ","materialQuiz.empty.title":"ควิซกำลังเตรียมอยู่ตอนนี้","materialQuiz.empty.description":"โปรดตรวจสอบอีกครั้งหลังจากโพสต์ควิซ!","materialQuiz.survey.empty.title":"การสำรวจกำลังเตรียมการอยู่ค่ะ","materialQuiz.survey.empty.description":"โปรดตรวจสอบอีกครั้งหลังจากโพสต์แบบสำรวจ!","materialQuiz.submitStatus.success":"เสนอ","materialQuiz.submitStatus.failure":"การส่งล้มเหลว","materialQuiz.resultStatus.correct":"ถูกต้อง","materialQuiz.resultStatus.wrong":"ผิด","materialQuiz.resultStatus.submitted":"เสนอ","materialQuiz.explanation.close":"ปิดคำอธิบายควิซ","materialQuiz.explanation.show":"แสดงคำอธิบายของควิซ","materialQuiz.explanation.empty":"ไม่ให้อธิบาย","materialQuiz.text.placeholder":"กรุณากรอกคำตอบ","materialQuiz.text.correct":"ถูกต้อง!","materialQuiz.text.wrong":"นั่นผิด ลองอีกครั้ง!","materialQuiz.order.answerEmpty":"คุณสามารถย้ายตัวเลือกกลับมาที่นี่ได้","materialQuiz.bottomSheet.title":"ตัวเลือก","materialQuiz.bottomSheet.optionEmpty":"ทุกมุมมองได้ถูกวางไว้ในกลุ่มแล้ว","materialQuiz.dropzone.desktop.answerEmpty":"ลากมุมมองเข้าสู่พื้นที่","materialQuiz.dropzone.mobile.answerEmpty":"คลิกที่นี่เพื่อเพิ่มมุมมอง","materialQuiz.dropzone.optionEmpty":"ตัวเลือก","materialQuiz.dropzone.optionReset":"รีเซ็ตคำตอบ"};
 
 export { th as default };

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import { getOrgMaterialQuizResponseGet, getOrgMaterialQuizResponseList, postOrgMaterialQuizResponseAdd } from '@elice/api-client';
-import { Flex, Text, Vspace } from '@elice/blocks';
+import { Flex } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { useRawEliceIntl } from '@elice/intl';
-import { MarkdownSSR } from '@elice/markdown';
+import { useTheme } from '@mui/material';
 import cloneDeep from 'lodash-es/cloneDeep';
 import flattenDeep from 'lodash-es/flattenDeep';
 import { MATERIAL_QUIZ_ANSWER_ID, MATERIAL_QUIZ_PASSIVE_ID } from '../../../constant/element.js';
@@ -12,6 +12,7 @@ import { useCaculatePassage } from '../../../hooks/useCaculatePassage.js';
 import QuestionBox from '../../shared/QuestionBox.js';
 import { useMaterialQuizState, useMaterialQuizDispatch } from '../context/MaterialQuizContext.js';
 import MaterialQuizAnswerExplanation from '../MaterialQuizAnswerExplanation.js';
+import MaterialQuizInfo from '../MaterialQuizInfo.js';
 import QuizResultBadge from '../QuizResultBadge.js';
 import QuizSubmitStatusText from '../QuizSubmitStatusText.js';
 import QuizGroupContext from './context/context.js';
@@ -27,7 +28,8 @@ const MaterialQuizGroup = () => {
   const {
     materialQuiz,
     userId,
-    vertical
+    vertical,
+    isLongPassage
   } = useMaterialQuizState();
   const {
     onSubmit,
@@ -35,6 +37,7 @@ const MaterialQuizGroup = () => {
     refreshOrgMaterialQuiz,
     onDirty
   } = useMaterialQuizDispatch();
+  const theme = useTheme();
   const [groupList, setGroupList] = React.useState([]);
   const [optionList, setOptionList] = React.useState([]);
   const [currentAnswerList, setCurrentAnswerList] = React.useState([]);
@@ -43,9 +46,12 @@ const MaterialQuizGroup = () => {
   const [submitStatus, setSubmitStatus] = React.useState('idle');
   const [hasSubmitted, setHasSubmitted] = React.useState(false);
   const isNextActive = hasSubmitted && typeof onNext === 'function';
+  const isDisabled = !flattenDeep(currentAnswerList).length || !!userId;
   const {
-    questionRef
+    questionRef,
+    containerRef
   } = useCaculatePassage();
+  const isVisibleSideBySide = !vertical && isLongPassage;
   /**
    *
    */
@@ -227,7 +233,7 @@ const MaterialQuizGroup = () => {
    *
    */
   const renderQuizInfo = () => {
-    if (!materialQuiz) {
+    if (!materialQuiz || isVisibleSideBySide) {
       return null;
     }
     return React.createElement(Flex, {
@@ -235,26 +241,9 @@ const MaterialQuizGroup = () => {
       id: MATERIAL_QUIZ_PASSIVE_ID,
       column: true,
       ref: questionRef
-    }, React.createElement(Flex, null, React.createElement(Text, {
-      bold: true,
-      size: "large",
-      customStyles: {
-        color: base.color.primary3,
-        marginRight: '0.5rem'
-      }
-    }, 'Q.'), React.createElement(Text, {
-      bold: true,
-      role: "white",
-      size: "large",
-      wordBreak: "break-word"
-    }, materialQuiz.questionTitle)), materialQuiz.questionDescription ? React.createElement(React.Fragment, null, React.createElement(Vspace, {
-      height: 1
-    }), React.createElement(MarkdownSSR, {
-      children: materialQuiz.questionDescription,
-      dark: true,
-      paddingx: 0,
-      paddingy: 0
-    })) : null, React.createElement(MaterialQuizAnswerExplanation, null));
+    }, React.createElement(MaterialQuizInfo, {
+      renderWithBox: false
+    }));
   };
   //
   //
@@ -283,21 +272,25 @@ const MaterialQuizGroup = () => {
     submitResult: React.createElement(QuizResultBadge, {
       materialQuizResponse: materialQuizResponse
     }),
+    bodyContainerRef: containerRef,
     footerActions: [{
-      border: true,
-      disabled: !flattenDeep(currentAnswerList).length || !!userId,
+      border: false,
+      disabled: isDisabled,
       loading: submitStatus === 'pending',
       tabIndex: 0,
       transparent: false,
-      role: isNextActive ? 'secondary' : 'lightpurple',
       onClick: handleSubmit,
       children: intl.formatMessage({
         id: isNextActive ? 'materialQuiz.resubmit' : 'materialQuiz.submit'
-      })
+      }),
+      customStyles: {
+        backgroundColor: isNextActive ? theme.palette.secondary.main : isDisabled ? base.color.gray6 : theme.palette.primary.main,
+        color: isNextActive ? theme.palette.secondary.contrastText : isDisabled ? base.color.gray3 : theme.palette.primary.contrastText
+      }
     }]
-  }, renderQuizInfo(), vertical ? React.createElement("div", {
+  }, renderQuizInfo(), vertical || isVisibleSideBySide ? React.createElement("div", {
     id: MATERIAL_QUIZ_ANSWER_ID
-  }, React.createElement(MaterialQuizGroupMobile, null)) : React.createElement(MaterialQuizGroupDesktop, null)));
+  }, React.createElement(MaterialQuizGroupMobile, null)) : React.createElement(React.Fragment, null, React.createElement(MaterialQuizGroupDesktop, null)), React.createElement(MaterialQuizAnswerExplanation, null)));
 };
 var MaterialQuizGroup$1 = MaterialQuizGroup;