@elice/material-quiz 1.240709.0 → 1.240711.0

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

@@ -7,7 +7,7 @@ var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var intl = require('@elice/intl');
-var markdown = require('@elice/markdown');
+var material = require('@mui/material');
 var cloneDeep = require('lodash-es/cloneDeep');
 var flattenDeep = require('lodash-es/flattenDeep');
 var element = require('../../../constant/element.js');
@@ -16,6 +16,7 @@ var useCaculatePassage = require('../../../hooks/useCaculatePassage.js');
 var QuestionBox = require('../../shared/QuestionBox.js');
 var MaterialQuizContext = require('../context/MaterialQuizContext.js');
 var MaterialQuizAnswerExplanation = require('../MaterialQuizAnswerExplanation.js');
+var MaterialQuizInfo = require('../MaterialQuizInfo.js');
 var QuizResultBadge = require('../QuizResultBadge.js');
 var QuizSubmitStatusText = require('../QuizSubmitStatusText.js');
 var context = require('./context/context.js');
@@ -31,7 +32,8 @@ const MaterialQuizGroup = () => {
   const {
     materialQuiz,
     userId,
-    vertical
+    vertical,
+    isLongPassage
   } = MaterialQuizContext.useMaterialQuizState();
   const {
     onSubmit,
@@ -39,6 +41,7 @@ const MaterialQuizGroup = () => {
     refreshOrgMaterialQuiz,
     onDirty
   } = MaterialQuizContext.useMaterialQuizDispatch();
+  const theme = material.useTheme();
   const [groupList, setGroupList] = React.useState([]);
   const [optionList, setOptionList] = React.useState([]);
   const [currentAnswerList, setCurrentAnswerList] = React.useState([]);
@@ -47,9 +50,12 @@ const MaterialQuizGroup = () => {
   const [submitStatus, setSubmitStatus] = React.useState('idle');
   const [hasSubmitted, setHasSubmitted] = React.useState(false);
   const isNextActive = hasSubmitted && typeof onNext === 'function';
+  const isDisabled = !flattenDeep(currentAnswerList).length || !!userId;
   const {
-    questionRef
+    questionRef,
+    containerRef
   } = useCaculatePassage.useCaculatePassage();
+  const isVisibleSideBySide = !vertical && isLongPassage;
   /**
    *
    */
@@ -231,7 +237,7 @@ const MaterialQuizGroup = () => {
    *
    */
   const renderQuizInfo = () => {
-    if (!materialQuiz) {
+    if (!materialQuiz || isVisibleSideBySide) {
       return null;
     }
     return React.createElement(blocks.Flex, {
@@ -239,26 +245,9 @@ const MaterialQuizGroup = () => {
       id: element.MATERIAL_QUIZ_PASSIVE_ID,
       column: true,
       ref: questionRef
-    }, React.createElement(blocks.Flex, null, React.createElement(blocks.Text, {
-      bold: true,
-      size: "large",
-      customStyles: {
-        color: designTokens.base.color.primary3,
-        marginRight: '0.5rem'
-      }
-    }, 'Q.'), React.createElement(blocks.Text, {
-      bold: true,
-      role: "white",
-      size: "large",
-      wordBreak: "break-word"
-    }, materialQuiz.questionTitle)), materialQuiz.questionDescription ? React.createElement(React.Fragment, null, React.createElement(blocks.Vspace, {
-      height: 1
-    }), React.createElement(markdown.MarkdownSSR, {
-      children: materialQuiz.questionDescription,
-      dark: true,
-      paddingx: 0,
-      paddingy: 0
-    })) : null, React.createElement(MaterialQuizAnswerExplanation.default, null));
+    }, React.createElement(MaterialQuizInfo.default, {
+      renderWithBox: false
+    }));
   };
   //
   //
@@ -287,21 +276,25 @@ const MaterialQuizGroup = () => {
     submitResult: React.createElement(QuizResultBadge.default, {
       materialQuizResponse: materialQuizResponse
     }),
+    bodyContainerRef: containerRef,
     footerActions: [{
-      border: true,
-      disabled: !flattenDeep(currentAnswerList).length || !!userId,
+      border: false,
+      disabled: isDisabled,
       loading: submitStatus === 'pending',
       tabIndex: 0,
       transparent: false,
-      role: isNextActive ? 'secondary' : 'lightpurple',
       onClick: handleSubmit,
       children: intl$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
+      }
     }]
-  }, renderQuizInfo(), vertical ? React.createElement("div", {
+  }, renderQuizInfo(), vertical || isVisibleSideBySide ? React.createElement("div", {
     id: element.MATERIAL_QUIZ_ANSWER_ID
-  }, React.createElement(MaterialQuizGroupMobile.default, null)) : React.createElement(MaterialQuizGroupDesktop.default, null)));
+  }, React.createElement(MaterialQuizGroupMobile.default, null)) : React.createElement(React.Fragment, null, React.createElement(MaterialQuizGroupDesktop.default, null)), React.createElement(MaterialQuizAnswerExplanation.default, null)));
 };
 var MaterialQuizGroup$1 = MaterialQuizGroup;
 

package/cjs/components/shared/QuestionBox.js

@@ -8,10 +8,16 @@ var reactUse = require('react-use');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var intl = require('@elice/intl');
+var material = require('@mui/material');
+var animateScrollTo = require('animated-scroll-to');
 var styled = require('styled-components');
 var element = require('../../constant/element.js');
 var MaterialQuizContext = require('../material-quiz/context/MaterialQuizContext.js');
+var mergeRefs = require('./utils/mergeRefs.js');
 
+const easeInOutCubic = t => {
+  return t < 0.5 ? 4 * Math.pow(t, 3) : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
+};
 const StyledQuestionBox = styled.div.withConfig({
   componentId: "sc-6qfyxj-0"
 })(["position:relative;display:flex;flex-direction:column;overflow:", ";border-radius:", ";width:100%;background-color:", ";", ";"], ({
@@ -26,7 +32,9 @@ const StyledQuestionBox = styled.div.withConfig({
   `);
 const StyledQuestionBoxHeader = styled.div.withConfig({
   componentId: "sc-6qfyxj-1"
-})(["display:flex;justify-content:space-between;background-color:", ";padding:1.5rem;flex:none;", ""], designTokens.base.color.navy8, ({
+})(["display:flex;justify-content:space-between;background-color:", ";padding:", ";flex:none;", ""], designTokens.base.color.navy8, ({
+  vertical
+}) => !vertical ? '1.5rem' : '1.5rem 1rem 1rem', ({
   vertical
 }) => vertical ? `
         position: sticky;
@@ -36,18 +44,16 @@ const StyledQuestionBoxHeader = styled.div.withConfig({
       ` : '');
 const StyledQuestionBoxBody = styled.div.withConfig({
   componentId: "sc-6qfyxj-2"
-})(["background-color:", ";flex:", ";", ";"], designTokens.base.color.navy8, ({
-  vertical
-}) => vertical ? 'none' : 'auto', ({
+})(["background-color:", ";flex:auto;", ";"], designTokens.base.color.navy8, ({
   hasFooter,
   vertical
-}) => hasFooter && !vertical ? 'height: 100%; padding: 0 1.5rem 1.5rem; overflow-y: auto;' : 'padding: 1.5rem');
+}) => hasFooter && !vertical ? 'height: 100%; padding: 0 1.5rem 1.5rem; overflow-y: auto;' : 'padding: 0.25rem 1.5rem 1.5rem');
 const StyledAnchorBox = styled.div.withConfig({
   componentId: "sc-6qfyxj-3"
 })(["position:sticky;bottom:0;left:0;display:flex;justify-content:center;background-color:", ";border-top:1px solid ", ";"], designTokens.base.color.navy8, designTokens.base.color.gray7);
 const StyledQuestionBoxFooter = styled.div.withConfig({
   componentId: "sc-6qfyxj-4"
-})(["flex:none;display:flex;align-items:center;padding:1rem 1.5rem 1.5rem;background-color:", ";", ""], designTokens.base.color.navy8, ({
+})(["flex:none;display:flex;align-items:center;padding:1rem;background-color:", ";", ""], designTokens.base.color.navy8, ({
   vertical
 }) => {
   return vertical ? `
@@ -66,16 +72,6 @@ const StyledQuestionBoxFooterActions = styled.div.withConfig({
 }) => {
   return vertical ? 'width: 100%' : '';
 });
-const StyledQuestionBoxFooterStatus = styled.div.withConfig({
-  componentId: "sc-6qfyxj-6"
-})(["margin-left:0.75rem;", ""], ({
-  vertical
-}) => {
-  return vertical ? `
-          margin-top: 0.75rem;
-          order: 1;
-        ` : '';
-});
 const QuestionBox = _a => {
   var {
       children,
@@ -89,18 +85,22 @@ const QuestionBox = _a => {
       bodyContainerRef
     } = _a,
     props = tslib.__rest(_a, ["children", "footerActions", "title", "titlePrefix", "submitResult", "submitStatus", "onNext", "isNextActive", "bodyContainerRef"]);
+  const theme = material.useTheme();
   const intl$1 = intl.useRawEliceIntl();
   const {
     vertical,
     isLongPassage
   } = MaterialQuizContext.useMaterialQuizState();
   const intersectionRef = React.useRef(null);
+  const headerRef = React.useRef(null);
+  const bodyRef = React.useRef(null);
+  const currentBodyRef = mergeRefs.mergeRefs(bodyContainerRef, bodyRef);
   const hasFooter = footerActions.length > 0;
   const visibleAnchorSection = vertical && isLongPassage;
   const intersection = reactUse.useIntersection(intersectionRef, {
     root: null,
     rootMargin: '0px',
-    threshold: 1
+    threshold: 0.1
   });
   const isViewingAnswerContainer = Boolean(intersection === null || intersection === void 0 ? void 0 : intersection.isIntersecting);
   React.useEffect(() => {
@@ -108,15 +108,22 @@ const QuestionBox = _a => {
     // only enable for vertical mode
     if (answerContainer && vertical) intersectionRef.current = answerContainer;
   }, [intersectionRef, vertical]);
-  const scrollToElement = elementId => {
+  const scrollToElement = async elementId => {
+    var _a, _b;
     const target = document.getElementById(elementId);
-    target && target.scrollIntoView({
-      behavior: 'smooth',
-      block: 'start'
-    });
+    if (target && bodyRef.current) {
+      await animateScrollTo(target.offsetTop, {
+        elementToScroll: bodyRef.current,
+        verticalOffset: -((_b = (_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0),
+        easing: easeInOutCubic,
+        minDuration: 50,
+        speed: 200
+      });
+    }
   };
   const header = title ? React.createElement(StyledQuestionBoxHeader, {
-    vertical: vertical
+    vertical: vertical,
+    ref: headerRef
   }, React.createElement(blocks.Flex, null, titlePrefix ? React.createElement(blocks.Text, {
     bold: true,
     size: "large",
@@ -131,36 +138,38 @@ const QuestionBox = _a => {
     wordBreak: "break-word"
   }, title)), submitResult ? React.createElement(blocks.Box, null, submitResult) : null) : null;
   const body = React.createElement(StyledQuestionBoxBody, {
+    ref: !vertical ? currentBodyRef : undefined,
     hasFooter: hasFooter,
-    ref: bodyContainerRef,
     vertical: vertical
   }, children);
   const footer = React.createElement(StyledQuestionBoxFooter, {
     vertical: vertical
-  }, React.createElement(StyledQuestionBoxFooterStatus, {
-    vertical: vertical
-  }, submitStatus), React.createElement(StyledQuestionBoxFooterActions, {
+  }, React.createElement(StyledQuestionBoxFooterActions, {
     vertical: vertical
   }, footerActions.map((action, index) => React.createElement(blocks.Button, Object.assign({
-    isFluid: true,
+    isFluid: vertical,
     key: index,
     size: "small"
   }, action), action.children)), isNextActive ? React.createElement(blocks.Button, {
-    isFluid: true,
+    isFluid: vertical,
     size: "small",
-    border: true,
+    border: false,
     tabIndex: 0,
     transparent: false,
-    role: "lightpurple",
-    onClick: onNext
+    onClick: onNext,
+    customStyles: {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText
+    }
   }, intl$1.formatMessage({
     id: 'materialQuiz.next'
   })) : null));
   const _renderAnchorSection = () => {
     const getCustomStyles = active => ({
-      borderBottom: active ? '3px solid currentColor' : 'none',
+      borderBottom: '3px solid currentColor',
       background: 'none',
-      paddingBlock: '1.5rem'
+      borderColor: active ? 'currentColor' : 'transparent',
+      color: active ? theme.palette.primary.main : theme.palette.secondary.light
     });
     return visibleAnchorSection && React.createElement(StyledAnchorBox, null, React.createElement(blocks.Button, {
       size: "small",
@@ -168,7 +177,6 @@ const QuestionBox = _a => {
       hasBorderRadius: false,
       tabIndex: 0,
       transparent: true,
-      role: isViewingAnswerContainer ? 'white' : 'primary',
       onClick: scrollToElement.bind(null, element.MATERIAL_QUIZ_PASSIVE_ID),
       customStyles: getCustomStyles(!isViewingAnswerContainer)
     }, intl$1.formatMessage({
@@ -179,16 +187,28 @@ const QuestionBox = _a => {
       hasBorderRadius: false,
       tabIndex: 0,
       transparent: true,
-      role: isViewingAnswerContainer ? 'primary' : 'white',
       onClick: scrollToElement.bind(null, element.MATERIAL_QUIZ_ANSWER_ID),
       customStyles: getCustomStyles(isViewingAnswerContainer)
     }, intl$1.formatMessage({
       id: 'materialQuiz.anchorLabel.answer'
     })));
   };
+  const renderContent = () => {
+    const content = React.createElement(React.Fragment, null, body, footerActions.length > 0 ? footer : null);
+    if (vertical) {
+      return React.createElement("div", {
+        ref: currentBodyRef,
+        style: {
+          height: '100%',
+          overflow: 'auto'
+        }
+      }, content);
+    }
+    return content;
+  };
   return React.createElement(StyledQuestionBox, Object.assign({}, props, {
     vertical: vertical
-  }), header, body, footerActions.length > 0 ? footer : null, _renderAnchorSection());
+  }), header, renderContent(), _renderAnchorSection());
 };
 
 exports.StyledQuestionBox = StyledQuestionBox;

package/cjs/components/shared/utils/mergeRefs.d.ts

@@ -0,0 +1,2 @@
+import type { Ref, RefCallback } from 'react';
+export declare const mergeRefs: <T>(...refs: (Ref<T> | undefined)[]) => RefCallback<T>;

package/cjs/components/shared/utils/mergeRefs.js

@@ -0,0 +1,11 @@
+'use strict';
+
+const mergeRefs = (...refs) => element => refs.forEach(ref => {
+  if (typeof ref === 'function') {
+    ref(element);
+  } else if (ref && typeof ref === 'object') {
+    ref.current = element;
+  }
+});
+
+exports.mergeRefs = mergeRefs;

package/cjs/hooks/useCaculatePassage.js

@@ -11,7 +11,8 @@ const useCaculatePassage = () => {
     vertical
   } = MaterialQuizContext.useMaterialQuizState();
   const {
-    setIsLongPassage
+    setIsLongPassage,
+    setIsInitialLoading
   } = MaterialQuizContext.useMaterialQuizDispatch();
   const [questionRef, {
     height: questionDetailHeight
@@ -19,13 +20,20 @@ const useCaculatePassage = () => {
   const [containerRef, {
     height: containerHeight
   }] = reactUse.useMeasure();
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     var _a, _b;
     const currentContainerHeight = vertical ? (_b = (_a = document.getElementById(element.MATERIAL_QUIZ_CONTAINER_ID)) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0 : containerHeight;
     if (currentContainerHeight && questionDetailHeight && materialQuiz) {
       setIsLongPassage(questionDetailHeight > currentContainerHeight);
+      // add timeout for forcing caculate layout and render in the parent
+      // finish before turning off loading
+      setTimeout(() => {
+        setIsInitialLoading(false);
+      }, 300);
+    } else if (materialQuiz && !materialQuiz.questionDescription) {
+      setIsInitialLoading(false);
     }
-  }, [containerHeight, questionDetailHeight, materialQuiz, setIsLongPassage, vertical]);
+  }, [containerHeight, questionDetailHeight, materialQuiz, setIsLongPassage, vertical, setIsInitialLoading]);
   return {
     questionRef,
     containerRef

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

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

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

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