@elice/material-quiz 1.240709.0 → 1.240711.0

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

@@ -6,7 +6,9 @@ var React = require('react');
 var reactUse = require('react-use');
 var designTokens = require('@elice/design-tokens');
 var intl = require('@elice/intl');
+var muiSystem = require('@elice/mui-system');
 var types = require('@elice/types');
+var material = require('@mui/material');
 var styled = require('styled-components');
 var element = require('../../constant/element.js');
 var MaterialQuizContext = require('./context/MaterialQuizContext.js');
@@ -15,27 +17,39 @@ var ko = require('./locales/ko.json.js');
 var MaterialQuizShimmer = require('./MaterialQuizShimmer.js');
 var MaterialQuizInfo = require('./MaterialQuizInfo.js');
 
+const eliceTheme = muiSystem.createEliceTheme({
+  paletteMode: 'dark',
+  paletteName: 'purple'
+});
 const AsyncMaterialQuizSelectMultiple = React.lazy(() => Promise.resolve().then(function () { return require('./MaterialQuizSelectMultiple.js'); }));
 const AsyncMaterialQuizSelectMultipleOrder = React.lazy(() => Promise.resolve().then(function () { return require('./MaterialQuizSelectMultipleOrder.js'); }));
 const AsyncMaterialQuizText = React.lazy(() => Promise.resolve().then(function () { return require('./MaterialQuizText.js'); }));
 const AsyncMaterialQuizSelectOne = React.lazy(() => Promise.resolve().then(function () { return require('./MaterialQuizSelectOne.js'); }));
 const AsyncMaterialQuizGroup = React.lazy(() => Promise.resolve().then(function () { return require('./material-quiz-group/index.js'); }));
+// 746px
+const MAX_CONTENT_WIDTH = '46.625rem';
 const StyledMaterialQuizInfo = styled.div.withConfig({
   componentId: "sc-1eyn8fb-0"
 })([""]);
 const StyledMaterialQuizContent = styled.div.withConfig({
   componentId: "sc-1eyn8fb-1"
-})(["min-width:0;margin:", ";height:100%;"], ({
+})(["position:relative;z-index:0;min-width:0;margin:", ";height:100%;"], ({
   vertical
 }) => vertical ? 'unset' : 'auto');
-const StyledMaterialQuizWrapper = styled.div.withConfig({
+const LoadingContainer = styled.div.withConfig({
   componentId: "sc-1eyn8fb-2"
-})(["-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;width:100%;height:100%;flex-direction:", ";& > *{flex:", ";}gap:1rem;", "{height:", ";overflow-y:", ";& > div{max-height:unset;}}"], ({
+})(["position:absolute;width:100%;height:100%;top:0;left:0;z-index:1;max-width:none !important;background-color:", ";"], designTokens.base.color.navy8);
+const StyledMaterialQuizWrapper = styled.div.withConfig({
+  componentId: "sc-1eyn8fb-3"
+})(["-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;width:100%;height:100%;flex-direction:", ";position:relative;& > *{flex:", ";max-width:", ";}gap:1rem;", "{height:", ";overflow-y:", ";& > div{max-height:unset;}}"], ({
   vertical
 }) => vertical ? 'column' : 'row', ({
+  vertical
+}) => vertical ? 'auto' : '1', ({
   vertical,
-  isQuizGroupType
-}) => vertical || isQuizGroupType ? 'auto' : '0.5', StyledMaterialQuizInfo, ({
+  isQuizGroupType,
+  isLongPassage
+}) => !isLongPassage && !vertical && !isQuizGroupType ? `${MAX_CONTENT_WIDTH}` : 'unset', StyledMaterialQuizInfo, ({
   vertical
 }) => vertical ? 'auto' : '100%', ({
   vertical
@@ -45,7 +59,8 @@ const MaterialQuiz = () => {
     materialQuiz,
     vertical,
     course,
-    isLongPassage
+    isLongPassage,
+    isInitialLoading
   } = MaterialQuizContext.useMaterialQuizState();
   const {
     setVertical
@@ -54,7 +69,9 @@ const MaterialQuiz = () => {
     width
   }] = reactUse.useMeasure();
   const isQuizGroupType = Boolean((materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.optionType) === types.enums.QuizOptionType.Group);
-  const isVisibleSideBySide = !vertical && isLongPassage && !isQuizGroupType;
+  const isFetchingData = !materialQuiz || !course;
+  const isLoadingLayout = isFetchingData || isInitialLoading;
+  const isVisibleSideBySide = !vertical && isLongPassage;
   const isRenderQuestionWithPassage = (vertical || !isLongPassage || isQuizGroupType) && !!materialQuiz;
   React.useEffect(() => {
     if (width > 0) {
@@ -62,8 +79,8 @@ const MaterialQuiz = () => {
     }
   }, [width, setVertical]);
   const renderQuestionOption = () => {
-    if (!materialQuiz || !course) {
-      return React.createElement(MaterialQuizShimmer.default, null);
+    if (isFetchingData) {
+      return null;
     }
     switch (materialQuiz.optionType) {
       case types.enums.QuizOptionType.SelectOne:
@@ -91,8 +108,9 @@ const MaterialQuiz = () => {
   }, React.createElement(StyledMaterialQuizWrapper, {
     ref: ref,
     vertical: vertical,
-    isQuizGroupType: isQuizGroupType
-  }, isVisibleSideBySide && React.createElement(StyledMaterialQuizInfo, null, React.createElement(MaterialQuizInfo.default, null)), React.createElement(StyledMaterialQuizContent, {
+    isQuizGroupType: isQuizGroupType,
+    isLongPassage: isLongPassage
+  }, isLoadingLayout && React.createElement(LoadingContainer, null, React.createElement(MaterialQuizShimmer.default, null)), isVisibleSideBySide && React.createElement(StyledMaterialQuizInfo, null, React.createElement(MaterialQuizInfo.default, null)), React.createElement(StyledMaterialQuizContent, {
     id: element.MATERIAL_QUIZ_CONTAINER_ID,
     vertical: vertical
   }, renderQuestionOption())));
@@ -107,13 +125,15 @@ const MaterialQuizContainer = ({
 }) => {
   return React.createElement(intl.RawEliceIntlProvider, {
     value: __intl
+  }, React.createElement(material.ThemeProvider, {
+    theme: eliceTheme
   }, React.createElement(MaterialQuizContext.MaterialQuizProvider, {
     materialQuizId: materialQuizId,
     userId: userId,
     onDirty: onDirty,
     onSubmit: onSubmit,
     onNext: onNext
-  }, React.createElement(MaterialQuiz, null)));
+  }, React.createElement(MaterialQuiz, null))));
 };
 var MaterialQuiz$1 = new intl.IntlComponentBuilder(MaterialQuizContainer).add('en', en.default).add('ko', ko.default).addAsync('th', Promise.resolve().then(function () { return require('./locales/th.json.js'); })).addAsync('ja', Promise.resolve().then(function () { return require('./locales/ja.json.js'); })).build();
 

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

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var reactUse = require('react-use');
 var blocks = require('@elice/blocks');
-var designTokens = require('@elice/design-tokens');
 var icons = require('@elice/icons');
 var markdown = require('@elice/markdown');
 var material = require('@mui/material');
 var styled = require('styled-components');
 var QuestionBox = require('../shared/QuestionBox.js');
+var mergeRefs = require('../shared/utils/mergeRefs.js');
 var MaterialQuizContext = require('./context/MaterialQuizContext.js');
-var MaterialQuizAnswerExplanation = require('./MaterialQuizAnswerExplanation.js');
 
 //
 //
@@ -24,23 +24,51 @@ const StyledMarkdownSSR = styled(markdown.MarkdownSSR).withConfig({
 //
 const IMAGE_CONTAINER_CLASSNAME = 'markdown-zoomable-image-container';
 const ZOOM_ICON_CLASSNAME = 'markdown-zoom-icon';
-const MarkdownContainer = styled.div.withConfig({
-  componentId: "sc-1s7jbf9-1"
-})([".", "{position:relative;span.", "{cursor:pointer;position:absolute;right:0;top:0;width:2rem;aspect-ratio:1;background-color:", ";margin:0.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;}}"], IMAGE_CONTAINER_CLASSNAME, ZOOM_ICON_CLASSNAME, designTokens.base.color.tertiary9);
+const MarkdownContainer = material.styled('div')`
+  .${IMAGE_CONTAINER_CLASSNAME} {
+    position: relative;
+
+    span.${ZOOM_ICON_CLASSNAME} {
+      cursor: pointer;
+
+      position: absolute;
+      top: 0;
+      right: ${({
+  vertical
+}) => vertical ? '0!important' : '0'};
+
+      width: 2rem;
+      aspect-ratio: 1;
+      background-color: ${({
+  theme
+}) => theme.palette.inverse.main};
+      margin: 0.5rem;
+      border-radius: 50%;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+`;
 const MaterialQuizInfo = ({
   renderWithBox = true
 }) => {
   const {
-    materialQuiz
+    materialQuiz,
+    vertical
   } = MaterialQuizContext.useMaterialQuizState();
   const [isRenderFinish, setIsRenderFinish] = React.useState(false);
   const containerRef = React.useRef(null);
+  const [markdownMeasueRef, {
+    width
+  }] = reactUse.useMeasure();
+  const ref = mergeRefs.mergeRefs(containerRef, markdownMeasueRef);
   const [zoomImageUrl, setZoomImageUrl] = React.useState('');
   React.useEffect(() => {
     if (!(materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionDescription) || !isRenderFinish || !containerRef.current) return;
-    const images = containerRef.current.querySelectorAll('img');
     // append zoom icon for image html render by MarkdownSSR
-    images.forEach(img => {
+    containerRef.current.querySelectorAll('img').forEach(img => {
       const parent = img.parentElement;
       const zoomIconStr = `
         <svg width="25" height="25" viewBox="0 0 25 25" fill="white" xmlns="http://www.w3.org/2000/svg">
@@ -48,27 +76,44 @@ const MaterialQuizInfo = ({
         </svg>
         `;
       if (parent) {
+        const imageRect = img.getBoundingClientRect();
+        const parentRect = parent.getBoundingClientRect();
+        const zoomIcons = parent.querySelectorAll(`.${ZOOM_ICON_CLASSNAME}`);
+        const totalImages = Array.from(parent.querySelectorAll(`img`));
+        const idx = totalImages.findIndex(item => item === img);
+        // restyle the zoom position when chaging the width instead of recreate it
+        if (zoomIcons.length === totalImages.length && idx !== -1) {
+          zoomIcons[idx].style.top = `${imageRect.top - parentRect.top}px`;
+          zoomIcons[idx].style.right = `${parentRect.right - imageRect.right}px`;
+          return;
+        }
         parent.classList.add(IMAGE_CONTAINER_CLASSNAME);
         parent.style.position = 'relative';
         const span = document.createElement('span');
         span.innerHTML = zoomIconStr;
         span.classList.add(ZOOM_ICON_CLASSNAME);
+        span.style.top = `${imageRect.top - parentRect.top}px`;
+        span.style.right = `${parentRect.right - imageRect.right}px`;
         span.onclick = () => {
           setZoomImageUrl(img.src);
         };
         parent.appendChild(span);
       }
     });
-  }, [materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionDescription, isRenderFinish]);
+  }, [materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionDescription, isRenderFinish, width]);
   const onCloseImageModal = () => {
     setZoomImageUrl('');
   };
   const _renderQuiz = () => {
     return React.createElement(React.Fragment, null, materialQuiz ? React.createElement(MarkdownContainer, {
-      ref: containerRef
+      ref: ref,
+      vertical: vertical
     }, React.createElement(StyledMarkdownSSR, {
       onRender: () => {
-        setIsRenderFinish(true);
+        // set timeout for waiting time to the image can render
+        setTimeout(() => {
+          setIsRenderFinish(true);
+        }, 300);
       },
       children: materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionDescription,
       dark: true,
@@ -141,7 +186,7 @@ const MaterialQuizInfo = ({
         top: '-10%'
       },
       onClick: onCloseImageModal
-    }))), React.createElement(MaterialQuizAnswerExplanation.default, null));
+    }))));
   };
   if (renderWithBox) return React.createElement(QuestionBox.default, null, _renderQuiz());
   return React.createElement(React.Fragment, null, _renderQuiz());

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var apiClient = require('@elice/api-client');
+var designTokens = require('@elice/design-tokens');
 var intl = require('@elice/intl');
 var material = require('@mui/material');
 var element = require('../../constant/element.js');
@@ -18,6 +19,7 @@ var QuestionCheckboxOption = require('../shared/question-checkbox/QuestionCheckb
 var QuestionBox = require('../shared/QuestionBox.js');
 var StyledMarkdown = require('../shared/StyledMarkdown.js');
 var MaterialQuizContext = require('./context/MaterialQuizContext.js');
+var MaterialQuizAnswerExplanation = require('./MaterialQuizAnswerExplanation.js');
 var MaterialQuizInfo = require('./MaterialQuizInfo.js');
 var QuizResultBadge = require('./QuizResultBadge.js');
 var QuizSubmitStatusText = require('./QuizSubmitStatusText.js');
@@ -38,6 +40,7 @@ const MaterialQuizSelectMultiple = ({
     refreshOrgMaterialQuiz,
     onDirty
   } = MaterialQuizContext.useMaterialQuizDispatch();
+  const theme = material.useTheme();
   // state
   const intl$1 = intl.useRawEliceIntl();
   const [selectedAnswer, setSelectedAnswer] = React.useState([]);
@@ -51,6 +54,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 || index.checkUserLectureTestEnded(lecture) || !!userId;
   // answer select handler
   const handleAnswerSelect = index$1 => {
     if (index.checkUserLectureTestEnded(lecture) || !!userId) {
@@ -162,16 +166,19 @@ const MaterialQuizSelectMultiple = ({
     }),
     bodyContainerRef: containerRef,
     footerActions: [{
-      border: true,
-      disabled: selectedAnswer.length === 0 || index.checkUserLectureTestEnded(lecture) || !!userId,
+      border: false,
+      disabled: isDisabled,
       loading: submitStatus === 'pending',
       tabIndex: 0,
       transparent: false,
-      role: isNextActive ? 'secondary' : 'lightpurple',
       onClick: handleSubmit,
       children: intl$1.formatMessage({
         id: isNextActive ? 'materialQuiz.resubmit' : 'materialQuiz.submit'
-      })
+      }),
+      customStyles: {
+        backgroundColor: isNextActive ? theme.palette.secondary.main : isDisabled ? designTokens.base.color.gray6 : theme.palette.primary.main,
+        color: isNextActive ? theme.palette.secondary.contrastText : isDisabled ? designTokens.base.color.gray3 : theme.palette.primary.contrastText
+      }
     }]
   }, React.createElement(material.Stack, {
     height: "100%",
@@ -214,7 +221,7 @@ const MaterialQuizSelectMultiple = ({
       paddingy: 0,
       dark: true
     }) : option === null || option === void 0 ? void 0 : option.content);
-  }) : null))));
+  }) : null), React.createElement(MaterialQuizAnswerExplanation.default, null))));
 };
 
 exports.default = MaterialQuizSelectMultiple;

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

@@ -19,6 +19,7 @@ var QuizDraggbleDroppedOption = require('../shared/QuizDraggbleDroppedOption.js'
 var QuizDraggbleDummyOption = require('../shared/QuizDraggbleDummyOption.js');
 var QuizDraggbleOption = require('../shared/QuizDraggbleOption.js');
 var MaterialQuizContext = require('./context/MaterialQuizContext.js');
+var MaterialQuizAnswerExplanation = require('./MaterialQuizAnswerExplanation.js');
 var MaterialQuizInfo = require('./MaterialQuizInfo.js');
 var QuizResultBadge = require('./QuizResultBadge.js');
 var QuizSubmitStatusText = require('./QuizSubmitStatusText.js');
@@ -76,6 +77,7 @@ const MaterialQuizSelectMultipleOrder = ({
     refreshOrgMaterialQuiz,
     onDirty
   } = MaterialQuizContext.useMaterialQuizDispatch();
+  const theme = material.useTheme();
   // state
   const intl$1 = intl.useRawEliceIntl();
   const [materialQuizResponse, setMaterialQuizResponse] = React.useState();
@@ -90,6 +92,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
@@ -418,16 +421,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$1.formatMessage({
         id: isNextActive ? 'materialQuiz.resubmit' : 'materialQuiz.submit'
-      })
+      }),
+      customStyles: {
+        backgroundColor: isNextActive ? theme.palette.secondary.main : isDisabled ? designTokens.base.color.gray6 : theme.palette.primary.main,
+        color: isNextActive ? theme.palette.secondary.contrastText : isDisabled ? designTokens.base.color.gray3 : theme.palette.primary.contrastText
+      }
     }]
   }, React.createElement(material.Stack, {
     height: "100%",
@@ -472,7 +478,7 @@ const MaterialQuizSelectMultipleOrder = ({
       indexOrder: index + 1,
       isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
     });
-  }))) : null)));
+  }))) : null, React.createElement(MaterialQuizAnswerExplanation.default, null))));
 };
 
 exports.default = MaterialQuizSelectMultipleOrder;

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var apiClient = require('@elice/api-client');
+var designTokens = require('@elice/design-tokens');
 var intl = require('@elice/intl');
 var material = require('@mui/material');
 var element = require('../../constant/element.js');
@@ -18,6 +19,7 @@ require('../shared/question-checkbox/QuestionCheckboxOption.js');
 var QuestionBox = require('../shared/QuestionBox.js');
 var StyledMarkdown = require('../shared/StyledMarkdown.js');
 var MaterialQuizContext = require('./context/MaterialQuizContext.js');
+var MaterialQuizAnswerExplanation = require('./MaterialQuizAnswerExplanation.js');
 var MaterialQuizInfo = require('./MaterialQuizInfo.js');
 var QuizResultBadge = require('./QuizResultBadge.js');
 var QuizSubmitStatusText = require('./QuizSubmitStatusText.js');
@@ -38,6 +40,7 @@ const MaterialQuizSelectOne = ({
     refreshOrgMaterialQuiz,
     onDirty
   } = MaterialQuizContext.useMaterialQuizDispatch();
+  const theme = material.useTheme();
   // state
   const intl$1 = intl.useRawEliceIntl();
   const [selectedAnswer, setSelectedAnswer] = React.useState();
@@ -51,6 +54,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 || index.checkUserLectureTestEnded(lecture) || !!userId;
   // answer select handler
   const handleAnswerSelect = index$1 => {
     if (index.checkUserLectureTestEnded(lecture) || !!userId) {
@@ -153,16 +157,19 @@ const MaterialQuizSelectOne = ({
     }),
     bodyContainerRef: containerRef,
     footerActions: [{
-      border: true,
-      disabled: selectedAnswer === undefined || index.checkUserLectureTestEnded(lecture) || !!userId,
+      border: false,
+      disabled: isDisabled,
       loading: submitStatus === 'pending',
       tabIndex: 0,
       transparent: false,
-      role: isNextActive ? 'secondary' : 'lightpurple',
       onClick: handleSubmit,
       children: intl$1.formatMessage({
         id: isNextActive ? 'materialQuiz.resubmit' : 'materialQuiz.submit'
-      })
+      }),
+      customStyles: {
+        backgroundColor: isNextActive ? theme.palette.secondary.main : isDisabled ? designTokens.base.color.gray6 : theme.palette.primary.main,
+        color: isNextActive ? theme.palette.secondary.contrastText : isDisabled ? designTokens.base.color.gray3 : theme.palette.primary.contrastText
+      }
     }]
   }, React.createElement(material.Stack, {
     height: "100%",
@@ -205,7 +212,7 @@ const MaterialQuizSelectOne = ({
       paddingy: 0,
       dark: true
     }) : option === null || option === void 0 ? void 0 : option.content);
-  }) : null)) : null));
+  }) : null), React.createElement(MaterialQuizAnswerExplanation.default, null)) : null));
 };
 
 exports.default = MaterialQuizSelectOne;

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

@@ -14,6 +14,7 @@ var index = require('../../helpers/index.js');
 var useCaculatePassage = require('../../hooks/useCaculatePassage.js');
 var QuestionBox = require('../shared/QuestionBox.js');
 var MaterialQuizContext = require('./context/MaterialQuizContext.js');
+var MaterialQuizAnswerExplanation = require('./MaterialQuizAnswerExplanation.js');
 var MaterialQuizInfo = require('./MaterialQuizInfo.js');
 var QuizResultBadge = require('./QuizResultBadge.js');
 var QuizSubmitStatusText = require('./QuizSubmitStatusText.js');
@@ -41,6 +42,7 @@ const MaterialQuizText = ({
     refreshOrgMaterialQuiz,
     onDirty
   } = MaterialQuizContext.useMaterialQuizDispatch();
+  const theme = material.useTheme();
   // state
   const intl$1 = intl.useRawEliceIntl();
   const [materialQuizResponse, setMaterialQuizResponse] = React.useState();
@@ -52,6 +54,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 || index.checkUserLectureTestEnded(lecture) || !!userId;
   // quiz response fetcher
   React.useEffect(() => {
     if (!userId && (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.lastQuizResponseId)) {
@@ -155,16 +158,19 @@ const MaterialQuizText = ({
     isNextActive: isNextActive,
     bodyContainerRef: containerRef,
     footerActions: [{
-      border: true,
+      border: false,
       children: intl$1.formatMessage({
         id: isNextActive ? 'materialQuiz.resubmit' : 'materialQuiz.submit'
       }),
-      disabled: answer.length === 0 || index.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 ? designTokens.base.color.gray6 : theme.palette.primary.main,
+        color: isNextActive ? theme.palette.secondary.contrastText : isDisabled ? designTokens.base.color.gray3 : theme.palette.primary.contrastText
+      }
     }]
   }, React.createElement(material.Stack, {
     height: "100%",
@@ -195,7 +201,7 @@ const MaterialQuizText = ({
     id: "quiz-text-submitted-answer",
     disabled: true,
     value: typeof (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.answerInfo) === 'string' ? materialQuiz.answerInfo : ''
-  })) : null)));
+  })) : null), React.createElement(MaterialQuizAnswerExplanation.default, null)));
 };
 
 exports.default = MaterialQuizText;

package/cjs/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/cjs/components/material-quiz/context/MaterialQuizContext.js

@@ -22,7 +22,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 = materialSharedUtils.useMaterialConfigApiClientUpdate(apiClient.config.init);
+  const resetLayout = () => {
+    setIsInitialLoading(true);
+    setIsLongPassage(false);
+  };
   const {
     materialQuiz,
     materialLecturePage,
@@ -75,6 +80,11 @@ function MaterialQuizProvider({
     }
     return () => controller.abort();
   }, [materialLecturePage]);
+  React.useEffect(() => {
+    if (materialQuizId) {
+      resetLayout();
+    }
+  }, [materialQuizId]);
   React.useEffect(() => {
     if (canInit && materialLecturePage) {
       void init();
@@ -88,7 +98,8 @@ function MaterialQuizProvider({
       userId,
       vertical,
       initStatus,
-      isLongPassage
+      isLongPassage,
+      isInitialLoading
     }
   }, React.createElement(DispatchContext.Provider, {
     value: {
@@ -97,7 +108,8 @@ function MaterialQuizProvider({
       onNext,
       refreshOrgMaterialQuiz,
       setVertical,
-      setIsLongPassage
+      setIsLongPassage,
+      setIsInitialLoading
     }
   }, children));
 }

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

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-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"};
 
 exports.default = messageEn;

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

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-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":"回答をリセットします"};
 
 exports.default = ja;

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

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-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":"답안 초기화"};
 
 exports.default = messageKo;

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

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-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":"รีเซ็ตคำตอบ"};
 
 exports.default = th;