@elice/material-quiz 1.230203.0 → 1.230208.0-style.0

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

@@ -4,7 +4,10 @@ export declare const en: {
     'materialQuiz.submittedAnswer': string;
     'materialQuiz.answer': string;
     'materialQuiz.next': string;
-    'materialQuiz.myAnswer': string;
+    'materialQuiz.selectOne.answer.title': string;
+    'materialQuiz.selectMultiple.answer.title': string;
+    'materialQuiz.selectMultipleOrder.answer.title': string;
+    'materialQuiz.text.answer.title': string;
     'materialQuiz.empty.title': string;
     'materialQuiz.empty.description': string;
     'materialQuiz.survey.empty.title': string;

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

@@ -8,7 +8,10 @@ const en = {
   'materialQuiz.submittedAnswer': 'Submitted Answer',
   'materialQuiz.answer': 'Answer',
   'materialQuiz.next': 'Next question >',
-  'materialQuiz.myAnswer': 'My answer',
+  'materialQuiz.selectOne.answer.title': 'Please choose the right answer.',
+  'materialQuiz.selectMultiple.answer.title': 'Please choose the right answer. (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.',
@@ -38,7 +41,10 @@ const ko = {
   'materialQuiz.submittedAnswer': '제출한 답',
   'materialQuiz.answer': '정답',
   'materialQuiz.next': '다음 문제로 이동 >',
-  'materialQuiz.myAnswer': '내 답안',
+  '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': '설문조사 준비 중 입니다.',
@@ -51,7 +57,7 @@ const ko = {
   'materialQuiz.explanation.close': '퀴즈해설 닫기',
   'materialQuiz.explanation.show': '퀴즈 해설 보기',
   'materialQuiz.explanation.empty': '작성된 해설이 없습니다.',
-  'materialQuiz.text.placeholder': '답을 입력하세요.',
+  'materialQuiz.text.placeholder': '답안을 작성해 주세요.',
   'materialQuiz.text.correct': '정답입니다.',
   'materialQuiz.text.wrong': '오답입니다. 다시 답안을 제출해보세요.',
   'materialQuiz.order.answerEmpty': '항목을 다시 이곳으로 옮길 수 있습니다.',

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

@@ -102,6 +102,7 @@ const MaterialQuizContainer = ({
   materialQuizId,
   userId,
   locale = 'en',
+  onDirty,
   onSubmit,
   onNext
 }) => {
@@ -112,6 +113,7 @@ const MaterialQuizContainer = ({
   }, React__default["default"].createElement(MaterialQuizContext.MaterialQuizProvider, {
     materialQuizId: materialQuizId,
     userId: userId,
+    onDirty: onDirty,
     onSubmit: onSubmit,
     onNext: onNext
   }, React__default["default"].createElement(MaterialQuiz, null)));

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

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var blocks = require('@elice/blocks');
-var designTokens = require('@elice/design-tokens');
 var markdown = require('@elice/markdown');
+var styled = require('styled-components');
 var QuestionBox = require('../shared/QuestionBox.js');
 var MaterialQuizContext = require('./context/MaterialQuizContext.js');
 var MaterialQuizAnswerExplanation = require('./MaterialQuizAnswerExplanation.js');
@@ -11,38 +11,32 @@ var MaterialQuizAnswerExplanation = require('./MaterialQuizAnswerExplanation.js'
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+//
+//
+
+const StyledMarkdownSSR = styled__default["default"](markdown.MarkdownSSR).withConfig({
+  componentId: "sc-1s7jbf9-0"
+})([".elicemd--theme-dark{pre{border:0;}table td,table th{border-bottom-color:rgba(255,255,255,0.16);}}"]); //
+//
+//
 
 const MaterialQuizInfo = () => {
   const {
     materialQuiz
   } = MaterialQuizContext.useMaterialQuizState();
   return React__default["default"].createElement(QuestionBox["default"], {
-    title: materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.title
-  }, materialQuiz ? React__default["default"].createElement(blocks.Flex, null, React__default["default"].createElement(blocks.Text, {
-    bold: true,
-    size: "large",
-    customStyles: {
-      color: designTokens.base.color.primary3,
-      marginRight: '0.5rem'
-    }
-  }, 'Q.'), React__default["default"].createElement(blocks.Text, {
-    bold: true,
-    role: "white",
-    size: "large",
-    wordBreak: "break-word"
-  }, materialQuiz.questionTitle)) : React__default["default"].createElement(blocks.Shimmer, {
-    dark: true,
-    borderRadius: '4px',
-    width: "80%",
-    height: '40px'
-  }), React__default["default"].createElement(blocks.Vspace, {
-    height: 1
-  }), materialQuiz ? React__default["default"].createElement(markdown.MarkdownSSR, {
+    title: materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionTitle,
+    titlePrefix: "Q."
+  }, materialQuiz ? React__default["default"].createElement(StyledMarkdownSSR, {
     children: materialQuiz.questionDescription,
     dark: true,
     paddingx: 0,
     paddingy: 0
-  }) : React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(blocks.Shimmer, {
+  }) : React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(blocks.Vspace, {
+    height: 1
+  }), React__default["default"].createElement(blocks.Shimmer, {
     dark: true,
     borderRadius: '4px',
     width: "80%",

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

@@ -31,7 +31,8 @@ const MaterialQuizSelectMultiple = () => {
   const {
     onSubmit,
     onNext,
-    refreshOrgMaterialQuiz
+    refreshOrgMaterialQuiz,
+    onDirty
   } = MaterialQuizContext.useMaterialQuizDispatch(); // state
 
   const intl = reactIntl.useIntl();
@@ -40,7 +41,22 @@ const MaterialQuizSelectMultiple = () => {
   const [submitStatus, setSubmitStatus] = React__default["default"].useState('idle'); // Whether user has clicked any options
 
   const [isActive, setIsActive] = React__default["default"].useState(false);
-  const [hasSubmitted, setHasSubmitted] = React__default["default"].useState(false); // quiz response fetcher
+  const [hasSubmitted, setHasSubmitted] = React__default["default"].useState(false); // answer select handler
+
+  const handleAnswerSelect = index$1 => {
+    if (index.checkUserLectureTestEnded(lecture) || !!userId) {
+      return;
+    }
+
+    onDirty(true);
+    setHasSubmitted(false);
+    setIsActive(true);
+    setSelectedAnswer(prevState => {
+      const newState = prevState.includes(index$1) ? prevState.filter(ident => ident !== index$1) : [...prevState, index$1];
+      return newState;
+    });
+  }; // quiz response fetcher
+
 
   React__default["default"].useEffect(() => {
     if (!userId && (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.lastQuizResponseId)) {
@@ -125,6 +141,7 @@ const MaterialQuizSelectMultiple = () => {
       onSubmit(true, index.getQuizResult(quizResponse));
       setSubmitStatus('resolved');
       setHasSubmitted(true);
+      onDirty(false);
     } catch (error) {
       console.error(error);
       onSubmit(false);
@@ -134,8 +151,9 @@ const MaterialQuizSelectMultiple = () => {
 
   return React__default["default"].createElement(QuestionBox["default"], {
     title: intl.formatMessage({
-      id: 'materialQuiz.myAnswer'
+      id: 'materialQuiz.selectMultiple.answer.title'
     }),
+    titlePrefix: "A.",
     onNext: onNext,
     isNextActive: hasSubmitted && typeof onNext === 'function',
     submitResult: React__default["default"].createElement(QuizResultBadge, {
@@ -157,18 +175,7 @@ const MaterialQuizSelectMultiple = () => {
       })
     }]
   }, React__default["default"].createElement(QuestionCheckbox, {
-    onSelect: index$1 => {
-      if (index.checkUserLectureTestEnded(lecture) || !!userId) {
-        return;
-      }
-
-      setHasSubmitted(false);
-      setIsActive(true);
-      setSelectedAnswer(prevState => {
-        const newState = prevState.includes(index$1) ? prevState.filter(ident => ident !== index$1) : [...prevState, index$1];
-        return newState;
-      });
-    },
+    onSelect: handleAnswerSelect,
     selectedOptions: selectedAnswer,
     disabled: submitStatus === 'pending' || index.checkUserLectureTestEnded(lecture) || !!userId
   }, (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.options) ? materialQuiz.options.map((option, index$1) => {

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

@@ -45,7 +45,7 @@ const StyledHorizontalDivider = styled__default["default"].hr.withConfig({
 });
 const StyledQuizOptionsDropZone = styled__default["default"](EbDroppable).withConfig({
   componentId: "sc-10067nt-2"
-})(["display:flex;flex-direction:column;flex:1 1 50%;padding:1rem;border-radius:8px;background-color:", ";& > div{margin-bottom:1rem;}&.ui-droppable-hover{outline:1px dashed ", ";}"], designTokens.base.color.navy6, designTokens.base.color.gray4);
+})(["display:flex;flex-direction:column;flex:1 1 50%;padding:1rem;border-radius:8px;background-color:", ";& > div{margin-bottom:1rem;}&.ui-droppable-hover{outline:1px dashed ", ";}"], designTokens.base.color.navy7, designTokens.base.color.gray4);
 const StyledQuizAnswersDropZone = styled__default["default"].div.withConfig({
   componentId: "sc-10067nt-3"
 })(["position:relative;display:flex;flex-direction:column;flex:1 1 50%;padding:1rem;border-radius:8px;background-color:", ";& > div{margin-bottom:1rem;}"], designTokens.base.color.navy6);
@@ -71,7 +71,8 @@ const MaterialQuizSelectMultipleOrder = () => {
   const {
     onSubmit,
     onNext,
-    refreshOrgMaterialQuiz
+    refreshOrgMaterialQuiz,
+    onDirty
   } = MaterialQuizContext.useMaterialQuizDispatch(); // state
 
   const intl = reactIntl.useIntl();
@@ -286,6 +287,7 @@ const MaterialQuizSelectMultipleOrder = () => {
       void refreshOrgMaterialQuiz();
       onSubmit(true, index.getQuizResult(quizResponse));
       setSubmitStatus('resolved');
+      onDirty(false);
     } catch (error) {
       console.error(error);
       onSubmit(false);
@@ -377,7 +379,8 @@ const MaterialQuizSelectMultipleOrder = () => {
             }
 
             setIsActive(true);
-            setHasSubmitted(false); // from answerList to answerList
+            setHasSubmitted(false);
+            onDirty(true); // from answerList to answerList
 
             if (ui.draggable[0].classList.contains('quiz-answer')) {
               const targetOptionId = Number(ui.draggable[0].id);
@@ -429,8 +432,9 @@ const MaterialQuizSelectMultipleOrder = () => {
 
   return React__default["default"].createElement(QuestionBox["default"], {
     title: intl.formatMessage({
-      id: 'materialQuiz.myAnswer'
+      id: 'materialQuiz.selectMultipleOrder.answer.title'
     }),
+    titlePrefix: "A.",
     onNext: onNext,
     isNextActive: hasSubmitted && typeof onNext === 'function',
     submitStatus: React__default["default"].createElement(QuizSubmitStatusText, {

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

@@ -31,7 +31,8 @@ const MaterialQuizSelectOne = () => {
   const {
     onSubmit,
     onNext,
-    refreshOrgMaterialQuiz
+    refreshOrgMaterialQuiz,
+    onDirty
   } = MaterialQuizContext.useMaterialQuizDispatch(); // state
 
   const intl = reactIntl.useIntl();
@@ -40,7 +41,19 @@ const MaterialQuizSelectOne = () => {
   const [submitStatus, setSubmitStatus] = React__default["default"].useState('idle'); // Whether user has clicked any options
 
   const [isActive, setIsActive] = React__default["default"].useState(false);
-  const [hasSubmitted, setHasSubmitted] = React__default["default"].useState(false); // quiz response fetcher
+  const [hasSubmitted, setHasSubmitted] = React__default["default"].useState(false); // answer select handler
+
+  const handleAnswerSelect = index$1 => {
+    if (index.checkUserLectureTestEnded(lecture) || !!userId) {
+      return;
+    }
+
+    setHasSubmitted(false);
+    setIsActive(true);
+    setSelectedAnswer(index$1);
+    onDirty(true);
+  }; // quiz response fetcher
+
 
   React__default["default"].useEffect(() => {
     if (!userId && (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.lastQuizResponseId)) {
@@ -115,6 +128,7 @@ const MaterialQuizSelectOne = () => {
       onSubmit(true, index.getQuizResult(quizResponse));
       setSubmitStatus('resolved');
       setHasSubmitted(true);
+      onDirty(false);
     } catch (error) {
       console.error(error);
       onSubmit(false);
@@ -124,8 +138,9 @@ const MaterialQuizSelectOne = () => {
 
   return React__default["default"].createElement(QuestionBox["default"], {
     title: intl.formatMessage({
-      id: 'materialQuiz.myAnswer'
+      id: 'materialQuiz.selectOne.answer.title'
     }),
+    titlePrefix: "A.",
     onNext: onNext,
     isNextActive: hasSubmitted && typeof onNext === 'function',
     submitStatus: React__default["default"].createElement(QuizSubmitStatusText, {
@@ -148,15 +163,7 @@ const MaterialQuizSelectOne = () => {
     }]
   }, materialQuiz ? React__default["default"].createElement(QuestionRadio, {
     selectedValue: selectedAnswer,
-    onSelect: index$1 => {
-      if (index.checkUserLectureTestEnded(lecture) || !!userId) {
-        return;
-      }
-
-      setHasSubmitted(false);
-      setIsActive(true);
-      setSelectedAnswer(index$1);
-    },
+    onSelect: handleAnswerSelect,
     disabled: submitStatus === 'pending' || index.checkUserLectureTestEnded(lecture) || !!userId
   }, materialQuiz.options ? materialQuiz.options.map((option, index$1) => {
     var _a, _b;
@@ -169,7 +176,7 @@ const MaterialQuizSelectOne = () => {
       }
 
       const materialQuizResponseAnswer = materialQuizResponse.answer;
-      return (_a = materialQuizResponseAnswer.includes(index)) !== null && _a !== void 0 ? _a : false;
+      return (_a = materialQuizResponseAnswer === null || materialQuizResponseAnswer === void 0 ? void 0 : materialQuizResponseAnswer.includes(index)) !== null && _a !== void 0 ? _a : false;
     };
 
     const status = index.getOptionStatus({

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

@@ -16,12 +16,9 @@ const StyledShimmer = styled__default["default"].div.withConfig({
 })(["display:flex;flex-direction:column;border-radius:", ";overflow:hidden;width:100%;"], ({
   vertical
 }) => vertical ? '0' : '8px');
-const StyledShimmerHeader = styled__default["default"].div.withConfig({
-  componentId: "sc-10uz5tw-1"
-})(["display:flex;justify-content:space-between;background-color:", ";padding:1rem 1.5rem;height:3.5rem;"], designTokens.base.color.navy6);
 const StyledShimmerBody = styled__default["default"].div.withConfig({
-  componentId: "sc-10uz5tw-2"
-})(["padding:1.5rem;background-color:", ";overflow-y:auto;height:100%;"], designTokens.base.color.navy7);
+  componentId: "sc-10uz5tw-1"
+})(["padding:1.5rem;background-color:", ";overflow-y:auto;height:100%;"], designTokens.base.color.navy8);
 
 const MaterialQuizShimmer = () => {
   const {
@@ -29,7 +26,7 @@ const MaterialQuizShimmer = () => {
   } = MaterialQuizContext.useMaterialQuizState();
   return React__default["default"].createElement(StyledShimmer, {
     vertical: vertical
-  }, React__default["default"].createElement(StyledShimmerHeader, null), React__default["default"].createElement(StyledShimmerBody, null, React__default["default"].createElement(blocks.Shimmer, {
+  }, React__default["default"].createElement(StyledShimmerBody, null, React__default["default"].createElement(blocks.Shimmer, {
     dark: true,
     borderRadius: '4px',
     width: "80%",

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

@@ -19,7 +19,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const StyledTextarea = styled__default["default"].textarea.withConfig({
   componentId: "sc-186cnpj-0"
-})(["min-height:12rem;width:100%;padding:1rem 1.375rem;font-size:1rem;color:", ";border-radius:4px;resize:vertical;line-height:1.5rem;outline:none;background-color:", ";&::placeholder{color:", ";}&:hover{cursor:", ";}"], designTokens.base.color.navy2, designTokens.base.color.navy5, designTokens.base.color.navy2, ({
+})(["min-height:12rem;width:100%;padding:1rem 1.375rem;font-size:1rem;color:", ";border-radius:4px;resize:vertical;line-height:1.5rem;outline:none;border:1px solid ", ";background-color:", ";&::placeholder{color:", ";}&:hover{cursor:", ";}"], designTokens.base.color.navy2, designTokens.base.color.navy6, designTokens.base.color.navy7, designTokens.base.color.navy2, ({
   disabled
 }) => disabled ? 'not-allowed' : 'text');
 const StyledLabel = styled__default["default"].label.withConfig({
@@ -36,7 +36,8 @@ const MaterialQuizText = () => {
   const {
     onSubmit,
     onNext,
-    refreshOrgMaterialQuiz
+    refreshOrgMaterialQuiz,
+    onDirty
   } = MaterialQuizContext.useMaterialQuizDispatch(); // state
 
   const intl = reactIntl.useIntl();
@@ -115,6 +116,7 @@ const MaterialQuizText = () => {
       void refreshOrgMaterialQuiz();
       onSubmit(true, index.getQuizResult(quizResponse));
       setSubmitStatus('resolved');
+      onDirty(false);
     } catch (error) {
       console.error(error);
       onSubmit(false);
@@ -133,9 +135,14 @@ const MaterialQuizText = () => {
     onChange: e => {
       setHasSubmitted(false);
       setAnswer(e.target.value);
+      onDirty(true);
     }
   };
   return React__default["default"].createElement(QuestionBox["default"], {
+    title: intl.formatMessage({
+      id: 'materialQuiz.text.answer.title'
+    }),
+    titlePrefix: "A.",
     onNext: onNext,
     submitResult: React__default["default"].createElement(QuizResultBadge, {
       materialQuizResponse: materialQuizResponse

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

@@ -13,6 +13,7 @@ export declare type MaterialQuizProps = {
     materialQuizId: number;
     userId?: number;
     locale?: string;
+    onDirty: (isDirty: boolean) => void;
     onSubmit?: (isSucceeded: boolean, isCorrect?: boolean) => void;
     onNext?: () => void;
 };
@@ -21,11 +22,12 @@ interface MaterialQuizProviderProps extends Omit<MaterialQuizProps, 'locale'> {
 }
 interface DispatchContextType {
     onSubmit: (isSucceeded: boolean, isCorrect?: boolean) => void;
+    onDirty: (isDirty: boolean) => void;
     refreshOrgMaterialQuiz: (signal?: AbortSignal | undefined) => Promise<void>;
     setVertical: React.Dispatch<React.SetStateAction<boolean>>;
     onNext?: () => void;
 }
-declare function MaterialQuizProvider({ materialQuizId, userId, onSubmit, onNext, children, }: MaterialQuizProviderProps): JSX.Element;
+declare function MaterialQuizProvider({ materialQuizId, userId, onSubmit, onDirty, onNext, children, }: MaterialQuizProviderProps): JSX.Element;
 declare function useMaterialQuizState(): State;
 declare function useMaterialQuizDispatch(): DispatchContextType;
 export { MaterialQuizProvider, useMaterialQuizState, useMaterialQuizDispatch };

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

@@ -19,6 +19,7 @@ function MaterialQuizProvider({
   materialQuizId,
   userId,
   onSubmit = () => void 0,
+  onDirty,
   onNext,
   children
 }) {
@@ -102,6 +103,7 @@ function MaterialQuizProvider({
   }, React__default["default"].createElement(DispatchContext.Provider, {
     value: {
       onSubmit,
+      onDirty,
       onNext,
       refreshOrgMaterialQuiz,
       setVertical

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

@@ -35,7 +35,8 @@ const MaterialQuizGroup = () => {
   const {
     onSubmit,
     onNext,
-    refreshOrgMaterialQuiz
+    refreshOrgMaterialQuiz,
+    onDirty
   } = MaterialQuizContext.useMaterialQuizDispatch();
   const [groupList, setGroupList] = React__default["default"].useState([]);
   const [optionList, setOptionList] = React__default["default"].useState([]);
@@ -127,6 +128,7 @@ const MaterialQuizGroup = () => {
       setHasSubmitted(true);
       onSubmit(true, index.getQuizResult(quizResponse));
       setSubmitStatus('resolved');
+      onDirty(false);
     } catch (error) {
       console.error(error);
       onSubmit(false);
@@ -167,6 +169,7 @@ const MaterialQuizGroup = () => {
       answerList[dropzoneIndex] = [...answerList[dropzoneIndex], selectedAnswerOption];
       return answerList;
     });
+    onDirty(true);
     setHasSubmitted(false);
   };
   /**
@@ -190,6 +193,7 @@ const MaterialQuizGroup = () => {
       return [...prevAnswerList];
     });
     setCurrentOptionList(prevOptionList => [...prevOptionList, ...[selectedOption]]);
+    onDirty(true);
   }; //
   //
   // quiz response fetcher
@@ -287,6 +291,7 @@ const MaterialQuizGroup = () => {
       onUpdateAnswer: setCurrentAnswerList,
       onUpdateOption: setCurrentOptionList,
       onUpdateHasSubmitted: setHasSubmitted,
+      onDirty,
       updateCurrentAnswer,
       updateCurrentOption,
       handleAnswerReset

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

@@ -11,6 +11,7 @@ interface QuizGroupContextValue {
     optionList: QuizGroupOption[];
     currentOptionList: QuizGroupOption[];
     currentAnswerList: QuizGroupOption[][];
+    onDirty: (value: boolean) => void;
     onUpdateAnswer: (value: React.SetStateAction<QuizGroupOption[][]>) => void;
     onUpdateOption: (value: React.SetStateAction<QuizGroupOption[]>) => void;
     onUpdateHasSubmitted: (value: boolean) => void;

package/cjs/components/shared/QuestionBox.d.ts

@@ -3,6 +3,7 @@ import type { ButtonProps } from '@elice/blocks';
 interface QuestionBoxProps {
     footerActions?: ButtonProps[];
     title?: string;
+    titlePrefix?: string;
     submitResult?: React.ReactNode;
     submitStatus?: React.ReactNode;
     onNext?: () => void;

package/cjs/components/shared/QuestionBox.js

@@ -26,15 +26,15 @@ const StyledQuestionBox = styled__default["default"].div.withConfig({
 }) => hasFooter ? '' : '100%');
 const StyledQuestionBoxHeader = styled__default["default"].div.withConfig({
   componentId: "sc-6qfyxj-1"
-})(["display:flex;justify-content:space-between;background-color:", ";padding:1rem 1.5rem;flex:none;height:3.5rem;"], designTokens.base.color.navy6);
+})(["display:flex;justify-content:space-between;background-color:", ";padding:1.5rem 1.5rem 1rem;flex:none;"], designTokens.base.color.navy8);
 const StyledQuestionBoxBody = styled__default["default"].div.withConfig({
   componentId: "sc-6qfyxj-2"
-})(["padding:1.5rem;background-color:", ";flex:auto;", ""], designTokens.base.color.navy7, ({
+})(["background-color:", ";flex:auto;", ""], designTokens.base.color.navy8, ({
   hasFooter
-}) => hasFooter ? 'height: 100%; overflow-y: auto;' : '');
+}) => hasFooter ? 'height: 100%; padding: 0 1.5rem; overflow-y: auto;' : 'padding: 0 1.5rem 1.5rem;');
 const StyledQuestionBoxFooter = styled__default["default"].div.withConfig({
   componentId: "sc-6qfyxj-3"
-})(["flex:none;display:flex;justify-content:space-between;align-items:center;padding:0.75rem 1.5rem;background-color:", ";", ""], designTokens.base.color.navy6, ({
+})(["flex:none;display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem 1.5rem;background-color:", ";", ""], designTokens.base.color.navy8, ({
   vertical
 }) => {
   return vertical ? `
@@ -61,24 +61,32 @@ const QuestionBox = _a => {
     children,
     footerActions = [],
     title,
+    titlePrefix,
     submitResult,
     submitStatus,
     onNext,
     isNextActive
   } = _a,
-      props = tslib.__rest(_a, ["children", "footerActions", "title", "submitResult", "submitStatus", "onNext", "isNextActive"]);
+      props = tslib.__rest(_a, ["children", "footerActions", "title", "titlePrefix", "submitResult", "submitStatus", "onNext", "isNextActive"]);
 
   const intl = reactIntl.useIntl();
   const {
     vertical
   } = MaterialQuizContext.useMaterialQuizState();
   const hasFooter = footerActions.length > 0;
-  const header = React__default["default"].createElement(StyledQuestionBoxHeader, null, React__default["default"].createElement(blocks.Text, {
+  const header = title ? React__default["default"].createElement(StyledQuestionBoxHeader, null, React__default["default"].createElement(blocks.Flex, null, titlePrefix ? React__default["default"].createElement(blocks.Text, {
     bold: true,
+    size: "large",
     customStyles: {
-      color: designTokens.base.color.navy0
+      color: designTokens.base.color.primary3,
+      marginRight: '0.5rem'
     }
-  }, title || ' '), submitResult ? submitResult : null);
+  }, titlePrefix) : null, React__default["default"].createElement(blocks.Text, {
+    bold: true,
+    role: "navy0",
+    size: "large",
+    wordBreak: "break-word"
+  }, title)), submitResult ? React__default["default"].createElement(blocks.Box, null, submitResult) : null) : null;
   const body = React__default["default"].createElement(StyledQuestionBoxBody, {
     hasFooter: hasFooter
   }, children);

package/cjs/components/shared/QuizDraggbleOption.js

@@ -16,7 +16,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const StyledQuizDraggbleOptionHandle = styled__default["default"].div.withConfig({
   componentId: "sc-19b0zkq-0"
-})(["display:flex;align-items:center;justify-content:center;background-color:", ";width:1.5rem;flex:none;"], designTokens.base.color.navy3);
+})(["display:flex;align-items:center;justify-content:center;background-color:", ";width:1.5rem;flex:none;"], designTokens.base.color.navy5);
 const StyledQuizDraggbleOptionContent = styled__default["default"].div.withConfig({
   componentId: "sc-19b0zkq-1"
 })(["display:flex;justify-content:space-between;min-width:0;align-items:center;flex:auto;padding:0.875rem;border:", ";background-color:", ";"], ({

package/cjs/components/shared/question-checkbox/QuestionCheckboxOption.js

@@ -24,7 +24,7 @@ const StyledQuestionCheckboxOption = styled__default["default"].div.withConfig({
       return designTokens.base.color.red1;
 
     default:
-      return checked ? designTokens.base.color.primary1 : designTokens.base.color.navy5;
+      return checked ? designTokens.base.color.primary1 : designTokens.base.color.navy6;
   }
 }, ({
   disabled

package/cjs/components/shared/question-radio/QuestionRadioOption.js

@@ -27,7 +27,7 @@ const StyledQuestionRadioOption = styled__default["default"].div.withConfig({
       return designTokens.base.color.black;
 
     default:
-      return checked ? designTokens.base.color.primary1 : designTokens.base.color.navy5;
+      return checked ? designTokens.base.color.primary1 : designTokens.base.color.navy6;
   }
 }, ({
   disabled

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

@@ -4,7 +4,10 @@ export declare const en: {
     'materialQuiz.submittedAnswer': string;
     'materialQuiz.answer': string;
     'materialQuiz.next': string;
-    'materialQuiz.myAnswer': string;
+    'materialQuiz.selectOne.answer.title': string;
+    'materialQuiz.selectMultiple.answer.title': string;
+    'materialQuiz.selectMultipleOrder.answer.title': string;
+    'materialQuiz.text.answer.title': string;
     'materialQuiz.empty.title': string;
     'materialQuiz.empty.description': string;
     'materialQuiz.survey.empty.title': string;

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

@@ -4,7 +4,10 @@ const en = {
   'materialQuiz.submittedAnswer': 'Submitted Answer',
   'materialQuiz.answer': 'Answer',
   'materialQuiz.next': 'Next question >',
-  'materialQuiz.myAnswer': 'My answer',
+  'materialQuiz.selectOne.answer.title': 'Please choose the right answer.',
+  'materialQuiz.selectMultiple.answer.title': 'Please choose the right answer. (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.',
@@ -34,7 +37,10 @@ const ko = {
   'materialQuiz.submittedAnswer': '제출한 답',
   'materialQuiz.answer': '정답',
   'materialQuiz.next': '다음 문제로 이동 >',
-  'materialQuiz.myAnswer': '내 답안',
+  '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': '설문조사 준비 중 입니다.',
@@ -47,7 +53,7 @@ const ko = {
   'materialQuiz.explanation.close': '퀴즈해설 닫기',
   'materialQuiz.explanation.show': '퀴즈 해설 보기',
   'materialQuiz.explanation.empty': '작성된 해설이 없습니다.',
-  'materialQuiz.text.placeholder': '답을 입력하세요.',
+  'materialQuiz.text.placeholder': '답안을 작성해 주세요.',
   'materialQuiz.text.correct': '정답입니다.',
   'materialQuiz.text.wrong': '오답입니다. 다시 답안을 제출해보세요.',
   'materialQuiz.order.answerEmpty': '항목을 다시 이곳으로 옮길 수 있습니다.',

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

@@ -94,6 +94,7 @@ const MaterialQuizContainer = ({
   materialQuizId,
   userId,
   locale = 'en',
+  onDirty,
   onSubmit,
   onNext
 }) => {
@@ -104,6 +105,7 @@ const MaterialQuizContainer = ({
   }, React.createElement(MaterialQuizProvider, {
     materialQuizId: materialQuizId,
     userId: userId,
+    onDirty: onDirty,
     onSubmit: onSubmit,
     onNext: onNext
   }, React.createElement(MaterialQuiz, null)));

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

@@ -1,42 +1,35 @@
 import React from 'react';
-import { Flex, Text, Shimmer, Vspace } from '@elice/blocks';
-import { base } from '@elice/design-tokens';
+import { Vspace, Shimmer } from '@elice/blocks';
 import { MarkdownSSR } from '@elice/markdown';
+import styled from 'styled-components';
 import QuestionBox from '../shared/QuestionBox.js';
 import { useMaterialQuizState } from './context/MaterialQuizContext.js';
 import MaterialQuizAnswerExplanation from './MaterialQuizAnswerExplanation.js';
 
+//
+//
+
+const StyledMarkdownSSR = styled(MarkdownSSR).withConfig({
+  componentId: "sc-1s7jbf9-0"
+})([".elicemd--theme-dark{pre{border:0;}table td,table th{border-bottom-color:rgba(255,255,255,0.16);}}"]); //
+//
+//
+
 const MaterialQuizInfo = () => {
   const {
     materialQuiz
   } = useMaterialQuizState();
   return React.createElement(QuestionBox, {
-    title: materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.title
-  }, materialQuiz ? 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)) : React.createElement(Shimmer, {
-    dark: true,
-    borderRadius: '4px',
-    width: "80%",
-    height: '40px'
-  }), React.createElement(Vspace, {
-    height: 1
-  }), materialQuiz ? React.createElement(MarkdownSSR, {
+    title: materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionTitle,
+    titlePrefix: "Q."
+  }, materialQuiz ? React.createElement(StyledMarkdownSSR, {
     children: materialQuiz.questionDescription,
     dark: true,
     paddingx: 0,
     paddingy: 0
-  }) : React.createElement(React.Fragment, null, React.createElement(Shimmer, {
+  }) : React.createElement(React.Fragment, null, React.createElement(Vspace, {
+    height: 1
+  }), React.createElement(Shimmer, {
     dark: true,
     borderRadius: '4px',
     width: "80%",

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

@@ -25,7 +25,8 @@ const MaterialQuizSelectMultiple = () => {
   const {
     onSubmit,
     onNext,
-    refreshOrgMaterialQuiz
+    refreshOrgMaterialQuiz,
+    onDirty
   } = useMaterialQuizDispatch(); // state
 
   const intl = useIntl();
@@ -34,7 +35,22 @@ const MaterialQuizSelectMultiple = () => {
   const [submitStatus, setSubmitStatus] = React.useState('idle'); // Whether user has clicked any options
 
   const [isActive, setIsActive] = React.useState(false);
-  const [hasSubmitted, setHasSubmitted] = React.useState(false); // quiz response fetcher
+  const [hasSubmitted, setHasSubmitted] = React.useState(false); // answer select handler
+
+  const handleAnswerSelect = index => {
+    if (checkUserLectureTestEnded(lecture) || !!userId) {
+      return;
+    }
+
+    onDirty(true);
+    setHasSubmitted(false);
+    setIsActive(true);
+    setSelectedAnswer(prevState => {
+      const newState = prevState.includes(index) ? prevState.filter(ident => ident !== index) : [...prevState, index];
+      return newState;
+    });
+  }; // quiz response fetcher
+
 
   React.useEffect(() => {
     if (!userId && (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.lastQuizResponseId)) {
@@ -119,6 +135,7 @@ const MaterialQuizSelectMultiple = () => {
       onSubmit(true, getQuizResult(quizResponse));
       setSubmitStatus('resolved');
       setHasSubmitted(true);
+      onDirty(false);
     } catch (error) {
       console.error(error);
       onSubmit(false);
@@ -128,8 +145,9 @@ const MaterialQuizSelectMultiple = () => {
 
   return React.createElement(QuestionBox, {
     title: intl.formatMessage({
-      id: 'materialQuiz.myAnswer'
+      id: 'materialQuiz.selectMultiple.answer.title'
     }),
+    titlePrefix: "A.",
     onNext: onNext,
     isNextActive: hasSubmitted && typeof onNext === 'function',
     submitResult: React.createElement(QuizResultBadge, {
@@ -151,18 +169,7 @@ const MaterialQuizSelectMultiple = () => {
       })
     }]
   }, React.createElement(QuestionCheckbox, {
-    onSelect: index => {
-      if (checkUserLectureTestEnded(lecture) || !!userId) {
-        return;
-      }
-
-      setHasSubmitted(false);
-      setIsActive(true);
-      setSelectedAnswer(prevState => {
-        const newState = prevState.includes(index) ? prevState.filter(ident => ident !== index) : [...prevState, index];
-        return newState;
-      });
-    },
+    onSelect: handleAnswerSelect,
     selectedOptions: selectedAnswer,
     disabled: submitStatus === 'pending' || checkUserLectureTestEnded(lecture) || !!userId
   }, (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.options) ? materialQuiz.options.map((option, index) => {

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

@@ -38,7 +38,7 @@ const StyledHorizontalDivider = styled.hr.withConfig({
 });
 const StyledQuizOptionsDropZone = styled(EbDroppable).withConfig({
   componentId: "sc-10067nt-2"
-})(["display:flex;flex-direction:column;flex:1 1 50%;padding:1rem;border-radius:8px;background-color:", ";& > div{margin-bottom:1rem;}&.ui-droppable-hover{outline:1px dashed ", ";}"], base.color.navy6, base.color.gray4);
+})(["display:flex;flex-direction:column;flex:1 1 50%;padding:1rem;border-radius:8px;background-color:", ";& > div{margin-bottom:1rem;}&.ui-droppable-hover{outline:1px dashed ", ";}"], base.color.navy7, base.color.gray4);
 const StyledQuizAnswersDropZone = styled.div.withConfig({
   componentId: "sc-10067nt-3"
 })(["position:relative;display:flex;flex-direction:column;flex:1 1 50%;padding:1rem;border-radius:8px;background-color:", ";& > div{margin-bottom:1rem;}"], base.color.navy6);
@@ -64,7 +64,8 @@ const MaterialQuizSelectMultipleOrder = () => {
   const {
     onSubmit,
     onNext,
-    refreshOrgMaterialQuiz
+    refreshOrgMaterialQuiz,
+    onDirty
   } = useMaterialQuizDispatch(); // state
 
   const intl = useIntl();
@@ -279,6 +280,7 @@ const MaterialQuizSelectMultipleOrder = () => {
       void refreshOrgMaterialQuiz();
       onSubmit(true, getQuizResult(quizResponse));
       setSubmitStatus('resolved');
+      onDirty(false);
     } catch (error) {
       console.error(error);
       onSubmit(false);
@@ -370,7 +372,8 @@ const MaterialQuizSelectMultipleOrder = () => {
             }
 
             setIsActive(true);
-            setHasSubmitted(false); // from answerList to answerList
+            setHasSubmitted(false);
+            onDirty(true); // from answerList to answerList
 
             if (ui.draggable[0].classList.contains('quiz-answer')) {
               const targetOptionId = Number(ui.draggable[0].id);
@@ -422,8 +425,9 @@ const MaterialQuizSelectMultipleOrder = () => {
 
   return React.createElement(QuestionBox, {
     title: intl.formatMessage({
-      id: 'materialQuiz.myAnswer'
+      id: 'materialQuiz.selectMultipleOrder.answer.title'
     }),
+    titlePrefix: "A.",
     onNext: onNext,
     isNextActive: hasSubmitted && typeof onNext === 'function',
     submitStatus: React.createElement(QuizSubmitStatusText, {

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

@@ -25,7 +25,8 @@ const MaterialQuizSelectOne = () => {
   const {
     onSubmit,
     onNext,
-    refreshOrgMaterialQuiz
+    refreshOrgMaterialQuiz,
+    onDirty
   } = useMaterialQuizDispatch(); // state
 
   const intl = useIntl();
@@ -34,7 +35,19 @@ const MaterialQuizSelectOne = () => {
   const [submitStatus, setSubmitStatus] = React.useState('idle'); // Whether user has clicked any options
 
   const [isActive, setIsActive] = React.useState(false);
-  const [hasSubmitted, setHasSubmitted] = React.useState(false); // quiz response fetcher
+  const [hasSubmitted, setHasSubmitted] = React.useState(false); // answer select handler
+
+  const handleAnswerSelect = index => {
+    if (checkUserLectureTestEnded(lecture) || !!userId) {
+      return;
+    }
+
+    setHasSubmitted(false);
+    setIsActive(true);
+    setSelectedAnswer(index);
+    onDirty(true);
+  }; // quiz response fetcher
+
 
   React.useEffect(() => {
     if (!userId && (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.lastQuizResponseId)) {
@@ -109,6 +122,7 @@ const MaterialQuizSelectOne = () => {
       onSubmit(true, getQuizResult(quizResponse));
       setSubmitStatus('resolved');
       setHasSubmitted(true);
+      onDirty(false);
     } catch (error) {
       console.error(error);
       onSubmit(false);
@@ -118,8 +132,9 @@ const MaterialQuizSelectOne = () => {
 
   return React.createElement(QuestionBox, {
     title: intl.formatMessage({
-      id: 'materialQuiz.myAnswer'
+      id: 'materialQuiz.selectOne.answer.title'
     }),
+    titlePrefix: "A.",
     onNext: onNext,
     isNextActive: hasSubmitted && typeof onNext === 'function',
     submitStatus: React.createElement(QuizSubmitStatusText, {
@@ -142,15 +157,7 @@ const MaterialQuizSelectOne = () => {
     }]
   }, materialQuiz ? React.createElement(QuestionRadio, {
     selectedValue: selectedAnswer,
-    onSelect: index => {
-      if (checkUserLectureTestEnded(lecture) || !!userId) {
-        return;
-      }
-
-      setHasSubmitted(false);
-      setIsActive(true);
-      setSelectedAnswer(index);
-    },
+    onSelect: handleAnswerSelect,
     disabled: submitStatus === 'pending' || checkUserLectureTestEnded(lecture) || !!userId
   }, materialQuiz.options ? materialQuiz.options.map((option, index) => {
     var _a, _b;
@@ -163,7 +170,7 @@ const MaterialQuizSelectOne = () => {
       }
 
       const materialQuizResponseAnswer = materialQuizResponse.answer;
-      return (_a = materialQuizResponseAnswer.includes(index)) !== null && _a !== void 0 ? _a : false;
+      return (_a = materialQuizResponseAnswer === null || materialQuizResponseAnswer === void 0 ? void 0 : materialQuizResponseAnswer.includes(index)) !== null && _a !== void 0 ? _a : false;
     };
 
     const status = getOptionStatus({

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

@@ -9,12 +9,9 @@ const StyledShimmer = styled.div.withConfig({
 })(["display:flex;flex-direction:column;border-radius:", ";overflow:hidden;width:100%;"], ({
   vertical
 }) => vertical ? '0' : '8px');
-const StyledShimmerHeader = styled.div.withConfig({
-  componentId: "sc-10uz5tw-1"
-})(["display:flex;justify-content:space-between;background-color:", ";padding:1rem 1.5rem;height:3.5rem;"], base.color.navy6);
 const StyledShimmerBody = styled.div.withConfig({
-  componentId: "sc-10uz5tw-2"
-})(["padding:1.5rem;background-color:", ";overflow-y:auto;height:100%;"], base.color.navy7);
+  componentId: "sc-10uz5tw-1"
+})(["padding:1.5rem;background-color:", ";overflow-y:auto;height:100%;"], base.color.navy8);
 
 const MaterialQuizShimmer = () => {
   const {
@@ -22,7 +19,7 @@ const MaterialQuizShimmer = () => {
   } = useMaterialQuizState();
   return React.createElement(StyledShimmer, {
     vertical: vertical
-  }, React.createElement(StyledShimmerHeader, null), React.createElement(StyledShimmerBody, null, React.createElement(Shimmer, {
+  }, React.createElement(StyledShimmerBody, null, React.createElement(Shimmer, {
     dark: true,
     borderRadius: '4px',
     width: "80%",

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

@@ -12,7 +12,7 @@ import QuizSubmitStatusText from './QuizSubmitStatusText.js';
 
 const StyledTextarea = styled.textarea.withConfig({
   componentId: "sc-186cnpj-0"
-})(["min-height:12rem;width:100%;padding:1rem 1.375rem;font-size:1rem;color:", ";border-radius:4px;resize:vertical;line-height:1.5rem;outline:none;background-color:", ";&::placeholder{color:", ";}&:hover{cursor:", ";}"], base.color.navy2, base.color.navy5, base.color.navy2, ({
+})(["min-height:12rem;width:100%;padding:1rem 1.375rem;font-size:1rem;color:", ";border-radius:4px;resize:vertical;line-height:1.5rem;outline:none;border:1px solid ", ";background-color:", ";&::placeholder{color:", ";}&:hover{cursor:", ";}"], base.color.navy2, base.color.navy6, base.color.navy7, base.color.navy2, ({
   disabled
 }) => disabled ? 'not-allowed' : 'text');
 const StyledLabel = styled.label.withConfig({
@@ -29,7 +29,8 @@ const MaterialQuizText = () => {
   const {
     onSubmit,
     onNext,
-    refreshOrgMaterialQuiz
+    refreshOrgMaterialQuiz,
+    onDirty
   } = useMaterialQuizDispatch(); // state
 
   const intl = useIntl();
@@ -108,6 +109,7 @@ const MaterialQuizText = () => {
       void refreshOrgMaterialQuiz();
       onSubmit(true, getQuizResult(quizResponse));
       setSubmitStatus('resolved');
+      onDirty(false);
     } catch (error) {
       console.error(error);
       onSubmit(false);
@@ -126,9 +128,14 @@ const MaterialQuizText = () => {
     onChange: e => {
       setHasSubmitted(false);
       setAnswer(e.target.value);
+      onDirty(true);
     }
   };
   return React.createElement(QuestionBox, {
+    title: intl.formatMessage({
+      id: 'materialQuiz.text.answer.title'
+    }),
+    titlePrefix: "A.",
     onNext: onNext,
     submitResult: React.createElement(QuizResultBadge, {
       materialQuizResponse: materialQuizResponse

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

@@ -13,6 +13,7 @@ export declare type MaterialQuizProps = {
     materialQuizId: number;
     userId?: number;
     locale?: string;
+    onDirty: (isDirty: boolean) => void;
     onSubmit?: (isSucceeded: boolean, isCorrect?: boolean) => void;
     onNext?: () => void;
 };
@@ -21,11 +22,12 @@ interface MaterialQuizProviderProps extends Omit<MaterialQuizProps, 'locale'> {
 }
 interface DispatchContextType {
     onSubmit: (isSucceeded: boolean, isCorrect?: boolean) => void;
+    onDirty: (isDirty: boolean) => void;
     refreshOrgMaterialQuiz: (signal?: AbortSignal | undefined) => Promise<void>;
     setVertical: React.Dispatch<React.SetStateAction<boolean>>;
     onNext?: () => void;
 }
-declare function MaterialQuizProvider({ materialQuizId, userId, onSubmit, onNext, children, }: MaterialQuizProviderProps): JSX.Element;
+declare function MaterialQuizProvider({ materialQuizId, userId, onSubmit, onDirty, onNext, children, }: MaterialQuizProviderProps): JSX.Element;
 declare function useMaterialQuizState(): State;
 declare function useMaterialQuizDispatch(): DispatchContextType;
 export { MaterialQuizProvider, useMaterialQuizState, useMaterialQuizDispatch };

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

@@ -11,6 +11,7 @@ function MaterialQuizProvider({
   materialQuizId,
   userId,
   onSubmit = () => void 0,
+  onDirty,
   onNext,
   children
 }) {
@@ -94,6 +95,7 @@ function MaterialQuizProvider({
   }, React.createElement(DispatchContext.Provider, {
     value: {
       onSubmit,
+      onDirty,
       onNext,
       refreshOrgMaterialQuiz,
       setVertical

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

@@ -27,7 +27,8 @@ const MaterialQuizGroup = () => {
   const {
     onSubmit,
     onNext,
-    refreshOrgMaterialQuiz
+    refreshOrgMaterialQuiz,
+    onDirty
   } = useMaterialQuizDispatch();
   const [groupList, setGroupList] = React.useState([]);
   const [optionList, setOptionList] = React.useState([]);
@@ -119,6 +120,7 @@ const MaterialQuizGroup = () => {
       setHasSubmitted(true);
       onSubmit(true, getQuizResult(quizResponse));
       setSubmitStatus('resolved');
+      onDirty(false);
     } catch (error) {
       console.error(error);
       onSubmit(false);
@@ -159,6 +161,7 @@ const MaterialQuizGroup = () => {
       answerList[dropzoneIndex] = [...answerList[dropzoneIndex], selectedAnswerOption];
       return answerList;
     });
+    onDirty(true);
     setHasSubmitted(false);
   };
   /**
@@ -182,6 +185,7 @@ const MaterialQuizGroup = () => {
       return [...prevAnswerList];
     });
     setCurrentOptionList(prevOptionList => [...prevOptionList, ...[selectedOption]]);
+    onDirty(true);
   }; //
   //
   // quiz response fetcher
@@ -279,6 +283,7 @@ const MaterialQuizGroup = () => {
       onUpdateAnswer: setCurrentAnswerList,
       onUpdateOption: setCurrentOptionList,
       onUpdateHasSubmitted: setHasSubmitted,
+      onDirty,
       updateCurrentAnswer,
       updateCurrentOption,
       handleAnswerReset

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

@@ -11,6 +11,7 @@ interface QuizGroupContextValue {
     optionList: QuizGroupOption[];
     currentOptionList: QuizGroupOption[];
     currentAnswerList: QuizGroupOption[][];
+    onDirty: (value: boolean) => void;
     onUpdateAnswer: (value: React.SetStateAction<QuizGroupOption[][]>) => void;
     onUpdateOption: (value: React.SetStateAction<QuizGroupOption[]>) => void;
     onUpdateHasSubmitted: (value: boolean) => void;

package/es/components/shared/QuestionBox.d.ts

@@ -3,6 +3,7 @@ import type { ButtonProps } from '@elice/blocks';
 interface QuestionBoxProps {
     footerActions?: ButtonProps[];
     title?: string;
+    titlePrefix?: string;
     submitResult?: React.ReactNode;
     submitStatus?: React.ReactNode;
     onNext?: () => void;

package/es/components/shared/QuestionBox.js

@@ -1,7 +1,7 @@
 import { __rest } from 'tslib';
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { Text, Button, Box } from '@elice/blocks';
+import { Flex, Text, Box, Button } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 import { useMaterialQuizState } from '../material-quiz/context/MaterialQuizContext.js';
@@ -17,15 +17,15 @@ const StyledQuestionBox = styled.div.withConfig({
 }) => hasFooter ? '' : '100%');
 const StyledQuestionBoxHeader = styled.div.withConfig({
   componentId: "sc-6qfyxj-1"
-})(["display:flex;justify-content:space-between;background-color:", ";padding:1rem 1.5rem;flex:none;height:3.5rem;"], base.color.navy6);
+})(["display:flex;justify-content:space-between;background-color:", ";padding:1.5rem 1.5rem 1rem;flex:none;"], base.color.navy8);
 const StyledQuestionBoxBody = styled.div.withConfig({
   componentId: "sc-6qfyxj-2"
-})(["padding:1.5rem;background-color:", ";flex:auto;", ""], base.color.navy7, ({
+})(["background-color:", ";flex:auto;", ""], base.color.navy8, ({
   hasFooter
-}) => hasFooter ? 'height: 100%; overflow-y: auto;' : '');
+}) => hasFooter ? 'height: 100%; padding: 0 1.5rem; overflow-y: auto;' : 'padding: 0 1.5rem 1.5rem;');
 const StyledQuestionBoxFooter = styled.div.withConfig({
   componentId: "sc-6qfyxj-3"
-})(["flex:none;display:flex;justify-content:space-between;align-items:center;padding:0.75rem 1.5rem;background-color:", ";", ""], base.color.navy6, ({
+})(["flex:none;display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem 1.5rem;background-color:", ";", ""], base.color.navy8, ({
   vertical
 }) => {
   return vertical ? `
@@ -52,24 +52,32 @@ const QuestionBox = _a => {
     children,
     footerActions = [],
     title,
+    titlePrefix,
     submitResult,
     submitStatus,
     onNext,
     isNextActive
   } = _a,
-      props = __rest(_a, ["children", "footerActions", "title", "submitResult", "submitStatus", "onNext", "isNextActive"]);
+      props = __rest(_a, ["children", "footerActions", "title", "titlePrefix", "submitResult", "submitStatus", "onNext", "isNextActive"]);
 
   const intl = useIntl();
   const {
     vertical
   } = useMaterialQuizState();
   const hasFooter = footerActions.length > 0;
-  const header = React.createElement(StyledQuestionBoxHeader, null, React.createElement(Text, {
+  const header = title ? React.createElement(StyledQuestionBoxHeader, null, React.createElement(Flex, null, titlePrefix ? React.createElement(Text, {
     bold: true,
+    size: "large",
     customStyles: {
-      color: base.color.navy0
+      color: base.color.primary3,
+      marginRight: '0.5rem'
     }
-  }, title || ' '), submitResult ? submitResult : null);
+  }, titlePrefix) : null, React.createElement(Text, {
+    bold: true,
+    role: "navy0",
+    size: "large",
+    wordBreak: "break-word"
+  }, title)), submitResult ? React.createElement(Box, null, submitResult) : null) : null;
   const body = React.createElement(StyledQuestionBoxBody, {
     hasFooter: hasFooter
   }, children);

package/es/components/shared/QuizDraggbleOption.js

@@ -9,7 +9,7 @@ import StyledMarkdown from './StyledMarkdown.js';
 
 const StyledQuizDraggbleOptionHandle = styled.div.withConfig({
   componentId: "sc-19b0zkq-0"
-})(["display:flex;align-items:center;justify-content:center;background-color:", ";width:1.5rem;flex:none;"], base.color.navy3);
+})(["display:flex;align-items:center;justify-content:center;background-color:", ";width:1.5rem;flex:none;"], base.color.navy5);
 const StyledQuizDraggbleOptionContent = styled.div.withConfig({
   componentId: "sc-19b0zkq-1"
 })(["display:flex;justify-content:space-between;min-width:0;align-items:center;flex:auto;padding:0.875rem;border:", ";background-color:", ";"], ({

package/es/components/shared/question-checkbox/QuestionCheckboxOption.js

@@ -17,7 +17,7 @@ const StyledQuestionCheckboxOption = styled.div.withConfig({
       return base.color.red1;
 
     default:
-      return checked ? base.color.primary1 : base.color.navy5;
+      return checked ? base.color.primary1 : base.color.navy6;
   }
 }, ({
   disabled

package/es/components/shared/question-radio/QuestionRadioOption.js

@@ -20,7 +20,7 @@ const StyledQuestionRadioOption = styled.div.withConfig({
       return base.color.black;
 
     default:
-      return checked ? base.color.primary1 : base.color.navy5;
+      return checked ? base.color.primary1 : base.color.navy6;
   }
 }, ({
   disabled

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-quiz",
-  "version": "1.230203.0",
+  "version": "1.230208.0-style.0",
   "description": "User view and editing components of Elice material quiz",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -58,8 +58,8 @@
     "@elice/icons": "^1.220803.0",
     "@elice/icons-legacy": "npm:@elice/icons@0.220803.1",
     "@elice/markdown": "^1.220803.0",
-    "@elice/material-shared-types": "1.230203.0",
-    "@elice/material-shared-utils": "1.230203.0",
+    "@elice/material-shared-types": "1.230208.0-style.0",
+    "@elice/material-shared-utils": "1.230208.0-style.0",
     "@elice/types": "1.221217.0",
     "@types/classnames": "^2.3.1",
     "@types/jquery": "^3.5.13",
@@ -73,5 +73,5 @@
     "react-use": "^17.2.4",
     "styled-components": "^5.3.0"
   },
-  "gitHead": "ffbc8a681faabee9aca717331ad39bec304edc16"
+  "gitHead": "ebcb69994e735767be76506db929bac91ab91394"
 }