@elice/material-quiz 1.240705.0-quiz.8 → 1.240705.0

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

@@ -6,9 +6,7 @@ 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');
@@ -17,40 +15,27 @@ 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"
-})(["position:relative;z-index:0;min-width:0;margin:", ";height:100%;"], ({
+})(["min-width:0;margin:", ";height:100%;"], ({
   vertical
 }) => vertical ? 'unset' : 'auto');
-const LoadingContainer = styled.div.withConfig({
-  componentId: "sc-1eyn8fb-2"
-})(["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;}}"], ({
+  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;}}"], ({
   vertical
 }) => vertical ? 'column' : 'row', ({
   vertical,
   isQuizGroupType
-}) => vertical || isQuizGroupType ? 'auto' : '1', ({
-  vertical,
-  isQuizGroupType,
-  isLongPassage
-}) => !isLongPassage && !vertical && !isQuizGroupType ? `${MAX_CONTENT_WIDTH}` : 'unset', StyledMaterialQuizInfo, ({
+}) => vertical || isQuizGroupType ? 'auto' : '0.5', StyledMaterialQuizInfo, ({
   vertical
 }) => vertical ? 'auto' : '100%', ({
   vertical
@@ -60,8 +45,7 @@ const MaterialQuiz = () => {
     materialQuiz,
     vertical,
     course,
-    isLongPassage,
-    isInitialLoading
+    isLongPassage
   } = MaterialQuizContext.useMaterialQuizState();
   const {
     setVertical
@@ -70,8 +54,6 @@ const MaterialQuiz = () => {
     width
   }] = reactUse.useMeasure();
   const isQuizGroupType = Boolean((materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.optionType) === types.enums.QuizOptionType.Group);
-  const isFetchingData = !materialQuiz || !course;
-  const isLoadingLayout = isFetchingData || isInitialLoading;
   const isVisibleSideBySide = !vertical && isLongPassage && !isQuizGroupType;
   const isRenderQuestionWithPassage = (vertical || !isLongPassage || isQuizGroupType) && !!materialQuiz;
   React.useEffect(() => {
@@ -80,8 +62,8 @@ const MaterialQuiz = () => {
     }
   }, [width, setVertical]);
   const renderQuestionOption = () => {
-    if (isFetchingData) {
-      return null;
+    if (!materialQuiz || !course) {
+      return React.createElement(MaterialQuizShimmer.default, null);
     }
     switch (materialQuiz.optionType) {
       case types.enums.QuizOptionType.SelectOne:
@@ -109,9 +91,8 @@ const MaterialQuiz = () => {
   }, React.createElement(StyledMaterialQuizWrapper, {
     ref: ref,
     vertical: vertical,
-    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, {
+    isQuizGroupType: isQuizGroupType
+  }, isVisibleSideBySide && React.createElement(StyledMaterialQuizInfo, null, React.createElement(MaterialQuizInfo.default, null)), React.createElement(StyledMaterialQuizContent, {
     id: element.MATERIAL_QUIZ_CONTAINER_ID,
     vertical: vertical
   }, renderQuestionOption())));
@@ -126,15 +107,13 @@ 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,51 +24,23 @@ const StyledMarkdownSSR = styled(markdown.MarkdownSSR).withConfig({
 //
 const IMAGE_CONTAINER_CLASSNAME = 'markdown-zoomable-image-container';
 const ZOOM_ICON_CLASSNAME = 'markdown-zoom-icon';
-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 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 MaterialQuizInfo = ({
   renderWithBox = true
 }) => {
   const {
-    materialQuiz,
-    vertical
+    materialQuiz
   } = 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
-    containerRef.current.querySelectorAll('img').forEach(img => {
+    images.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">
@@ -76,44 +48,27 @@ 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, width]);
+  }, [materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionDescription, isRenderFinish]);
   const onCloseImageModal = () => {
     setZoomImageUrl('');
   };
   const _renderQuiz = () => {
     return React.createElement(React.Fragment, null, materialQuiz ? React.createElement(MarkdownContainer, {
-      ref: ref,
-      vertical: vertical
+      ref: containerRef
     }, React.createElement(StyledMarkdownSSR, {
       onRender: () => {
-        // set timeout for waiting time to the image can render
-        setTimeout(() => {
-          setIsRenderFinish(true);
-        }, 300);
+        setIsRenderFinish(true);
       },
       children: materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionDescription,
       dark: true,
@@ -186,7 +141,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,7 +4,6 @@ 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');
@@ -19,7 +18,6 @@ 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');
@@ -40,7 +38,6 @@ const MaterialQuizSelectMultiple = ({
     refreshOrgMaterialQuiz,
     onDirty
   } = MaterialQuizContext.useMaterialQuizDispatch();
-  const theme = material.useTheme();
   // state
   const intl$1 = intl.useRawEliceIntl();
   const [selectedAnswer, setSelectedAnswer] = React.useState([]);
@@ -54,7 +51,6 @@ 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) {
@@ -167,18 +163,15 @@ const MaterialQuizSelectMultiple = ({
     bodyContainerRef: containerRef,
     footerActions: [{
       border: true,
-      disabled: isDisabled,
+      disabled: selectedAnswer.length === 0 || index.checkUserLectureTestEnded(lecture) || !!userId,
       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%",
@@ -221,7 +214,7 @@ const MaterialQuizSelectMultiple = ({
       paddingy: 0,
       dark: true
     }) : option === null || option === void 0 ? void 0 : option.content);
-  }) : null), React.createElement(MaterialQuizAnswerExplanation.default, null))));
+  }) : null))));
 };
 
 exports.default = MaterialQuizSelectMultiple;

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

@@ -19,7 +19,6 @@ 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');
@@ -77,7 +76,6 @@ const MaterialQuizSelectMultipleOrder = ({
     refreshOrgMaterialQuiz,
     onDirty
   } = MaterialQuizContext.useMaterialQuizDispatch();
-  const theme = material.useTheme();
   // state
   const intl$1 = intl.useRawEliceIntl();
   const [materialQuizResponse, setMaterialQuizResponse] = React.useState();
@@ -92,7 +90,6 @@ 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
@@ -422,18 +419,15 @@ const MaterialQuizSelectMultipleOrder = ({
     bodyContainerRef: containerRef,
     footerActions: [{
       border: true,
-      disabled: isDisabled,
+      disabled: (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.correctOptionCount) !== answerList.filter(answer => answer.order !== null).length || !!userId,
       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%",
@@ -478,7 +472,7 @@ const MaterialQuizSelectMultipleOrder = ({
       indexOrder: index + 1,
       isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
     });
-  }))) : null, React.createElement(MaterialQuizAnswerExplanation.default, null))));
+  }))) : null)));
 };
 
 exports.default = MaterialQuizSelectMultipleOrder;

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

@@ -4,7 +4,6 @@ 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');
@@ -19,7 +18,6 @@ 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');
@@ -40,7 +38,6 @@ const MaterialQuizSelectOne = ({
     refreshOrgMaterialQuiz,
     onDirty
   } = MaterialQuizContext.useMaterialQuizDispatch();
-  const theme = material.useTheme();
   // state
   const intl$1 = intl.useRawEliceIntl();
   const [selectedAnswer, setSelectedAnswer] = React.useState();
@@ -54,7 +51,6 @@ 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) {
@@ -158,18 +154,15 @@ const MaterialQuizSelectOne = ({
     bodyContainerRef: containerRef,
     footerActions: [{
       border: true,
-      disabled: isDisabled,
+      disabled: selectedAnswer === undefined || index.checkUserLectureTestEnded(lecture) || !!userId,
       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%",
@@ -212,7 +205,7 @@ const MaterialQuizSelectOne = ({
       paddingy: 0,
       dark: true
     }) : option === null || option === void 0 ? void 0 : option.content);
-  }) : null), React.createElement(MaterialQuizAnswerExplanation.default, null)) : null));
+  }) : null)) : null));
 };
 
 exports.default = MaterialQuizSelectOne;

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

@@ -41,7 +41,6 @@ const MaterialQuizText = ({
     refreshOrgMaterialQuiz,
     onDirty
   } = MaterialQuizContext.useMaterialQuizDispatch();
-  const theme = material.useTheme();
   // state
   const intl$1 = intl.useRawEliceIntl();
   const [materialQuizResponse, setMaterialQuizResponse] = React.useState();
@@ -53,7 +52,6 @@ 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)) {
@@ -161,15 +159,12 @@ const MaterialQuizText = ({
       children: intl$1.formatMessage({
         id: isNextActive ? 'materialQuiz.resubmit' : 'materialQuiz.submit'
       }),
-      disabled: isDisabled,
+      disabled: answer.length === 0 || index.checkUserLectureTestEnded(lecture) || !!userId,
       loading: submitStatus === 'pending',
       tabIndex: 0,
       transparent: false,
-      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
-      }
+      role: isNextActive ? 'secondary' : 'lightpurple',
+      onClick: handleSubmit
     }]
   }, React.createElement(material.Stack, {
     height: "100%",

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

@@ -9,7 +9,6 @@ export interface State {
     userId?: number;
     initStatus: APIStatus;
     isLongPassage: boolean;
-    isInitialLoading: boolean;
 }
 export type MaterialQuizProps = {
     materialQuizId: number;
@@ -29,7 +28,6 @@ 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,12 +22,7 @@ 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,
@@ -80,11 +75,6 @@ function MaterialQuizProvider({
     }
     return () => controller.abort();
   }, [materialLecturePage]);
-  React.useEffect(() => {
-    if (materialQuizId) {
-      resetLayout();
-    }
-  }, [materialQuizId]);
   React.useEffect(() => {
     if (canInit && materialLecturePage) {
       void init();
@@ -98,8 +88,7 @@ function MaterialQuizProvider({
       userId,
       vertical,
       initStatus,
-      isLongPassage,
-      isInitialLoading
+      isLongPassage
     }
   }, React.createElement(DispatchContext.Provider, {
     value: {
@@ -108,8 +97,7 @@ function MaterialQuizProvider({
       onNext,
       refreshOrgMaterialQuiz,
       setVertical,
-      setIsLongPassage,
-      setIsInitialLoading
+      setIsLongPassage
     }
   }, 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":"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"};
+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"};
 
 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;