@elice/material-quiz 1.220803.0

package/es/components/eb-sortable/EbDraggable.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import $ from 'jquery';
+import 'jquery-ui/ui/widgets/draggable';
+
+const EbDraggable = ({
+  children,
+  id,
+  disabled = false,
+  revert = true,
+  clone = false,
+  className,
+  onStart,
+  onStop,
+  onDrag,
+  onCreate
+}) => {
+  const rootEl = React.useRef(null);
+  const onStartCallback = React.useCallback((event, ui) => {
+    if (onStart) {
+      return onStart(event, ui);
+    } else {
+      return () => {
+        return;
+      };
+    }
+  }, [onStart]);
+  const onStopCallback = React.useCallback((event, ui) => {
+    if (onStop) {
+      return onStop(event, ui);
+    } else {
+      return () => {
+        return;
+      };
+    }
+  }, [onStop]);
+  const onDragCallback = React.useCallback((event, ui) => {
+    if (onDrag) {
+      return onDrag(event, ui);
+    } else {
+      return () => {
+        return;
+      };
+    }
+  }, [onDrag]);
+  const onCreateCallback = React.useCallback((event, ui) => {
+    if (onCreate) {
+      return onCreate(event, ui);
+    } else {
+      return () => {
+        return;
+      };
+    }
+  }, [onCreate]);
+  React.useEffect(() => {
+    if (!rootEl.current) {
+      return;
+    }
+
+    const draggableEl = $(rootEl.current);
+    draggableEl.draggable(Object.assign(Object.assign(Object.assign(Object.assign({}, disabled ? {
+      disabled
+    } : null), revert ? {
+      revert
+    } : null), clone ? {
+      helper: 'clone'
+    } : null), {
+      zIndex: 200,
+      revertDuration: 0,
+      start: (event, ui) => {
+        if (!onStartCallback) {
+          return;
+        }
+
+        onStartCallback(event, ui);
+      },
+      stop: (event, ui) => {
+        if (!onStopCallback) {
+          return;
+        } // draggableEl.draggable('cancel');
+
+
+        onStopCallback(event, ui);
+      },
+      drag: (event, ui) => {
+        onDragCallback(event, ui);
+      },
+      create: (event, ui) => {
+        onCreateCallback(event, ui);
+      }
+    }));
+    return () => {
+      draggableEl.draggable('destroy');
+    };
+  }, [clone, disabled, onCreateCallback, onDragCallback, onStartCallback, onStopCallback, revert]);
+  return React.createElement("div", {
+    ref: rootEl,
+    id: id,
+    className: className,
+    style: {
+      cursor: disabled ? 'auto' : 'move'
+    }
+  }, children);
+};
+
+export { EbDraggable as default };

package/es/components/eb-sortable/EbDroppable.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="jquery" />
+/// <reference types="jqueryui" />
+import React from 'react';
+import 'jquery-ui/ui/widgets/droppable';
+export interface EbDroppableProps {
+    id?: string;
+    className?: string;
+    disabled?: boolean;
+    accept?: JQuery.Selector;
+    onDrop?: (event: JQueryEventObject, ui: JQueryUI.DroppableEventUIParam) => void;
+}
+declare const EbDroppable: React.FC<EbDroppableProps>;
+export default EbDroppable;

package/es/components/eb-sortable/EbDroppable.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import $ from 'jquery';
+import 'jquery-ui/ui/widgets/droppable';
+
+const EbDroppable = ({
+  children,
+  id,
+  disabled = false,
+  accept,
+  className,
+  onDrop
+}) => {
+  const rootEl = React.useRef(null);
+  const onDropCallback = React.useCallback((event, ui) => {
+    if (onDrop) {
+      return onDrop(event, ui);
+    } else {
+      return () => {
+        return;
+      };
+    }
+  }, [onDrop]);
+  React.useEffect(() => {
+    if (!rootEl.current) {
+      return;
+    }
+
+    const draggableEl = $(rootEl.current);
+    draggableEl.droppable(Object.assign(Object.assign(Object.assign({}, disabled ? {
+      disabled
+    } : null), accept ? {
+      accept
+    } : null), {
+      drop: (event, ui) => {
+        if (!onDropCallback) {
+          return;
+        }
+
+        onDropCallback(event, ui);
+      }
+    }));
+    return () => {
+      draggableEl.droppable('destroy');
+    };
+  }, [accept, disabled, onDropCallback]);
+  return React.createElement("div", {
+    ref: rootEl,
+    id: id,
+    className: className
+  }, children);
+};
+
+export { EbDroppable as default };

package/es/components/eb-sortable/EbSortable.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="jquery" />
+/// <reference types="jqueryui" />
+import React from 'react';
+import 'jquery-ui/ui/widgets/sortable.js';
+import 'jquery-ui/ui/widgets/sortable';
+declare type SortedIds = string[];
+interface EbSortableProps {
+    id?: string;
+    className?: string;
+    connectWith?: JQuery.Selector;
+    onStart?: (event: JQueryEventObject, ui: JQueryUI.SortableUIParams, ids: SortedIds) => void;
+    onStop?: (event: JQueryEventObject, ui: JQueryUI.SortableUIParams, ids: SortedIds) => void;
+    onRemove?: (event: JQueryEventObject, ui: JQueryUI.SortableUIParams, targetIndex: number, receivedId: string) => void;
+    onReceive?: (event: JQueryEventObject, ui: JQueryUI.SortableUIParams, targetIndex: number, receivedId: string) => void;
+}
+declare const EbSortable: React.FC<EbSortableProps>;
+export default EbSortable;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { MaterialQuizProps } from './context/MaterialQuizContext';
+declare const MaterialQuizContainer: React.FC<MaterialQuizProps>;
+export default MaterialQuizContainer;

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

@@ -0,0 +1,25 @@
+export declare const en: {
+    'materialQuiz.error': string;
+    'materialQuiz.submit': string;
+    'materialQuiz.submittedAnswer': string;
+    'materialQuiz.answer': string;
+    'materialQuiz.next': string;
+    'materialQuiz.myAnswer': string;
+    'materialQuiz.empty.title': string;
+    'materialQuiz.empty.description': string;
+    'materialQuiz.survey.empty.title': string;
+    'materialQuiz.survey.empty.description': string;
+    'materialQuiz.submitStatus.success': string;
+    'materialQuiz.submitStatus.failure': string;
+    'materialQuiz.resultStatus.correct': string;
+    'materialQuiz.resultStatus.wrong': string;
+    'materialQuiz.resultStatus.submitted': string;
+    'materialQuiz.explanation.close': string;
+    'materialQuiz.explanation.show': string;
+    'materialQuiz.explanation.empty': string;
+    'materialQuiz.text.placeholder': string;
+    'materialQuiz.text.correct': string;
+    'materialQuiz.text.wrong': string;
+    'materialQuiz.order.answerEmpty': string;
+};
+export declare const ko: typeof en;

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

@@ -0,0 +1,50 @@
+const en = {
+  'materialQuiz.error': 'Failed to fetch quiz',
+  'materialQuiz.submit': 'Submit',
+  'materialQuiz.submittedAnswer': 'Submitted Answer',
+  'materialQuiz.answer': 'Answer',
+  'materialQuiz.next': 'Next question >',
+  'materialQuiz.myAnswer': 'My 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'
+};
+const ko = {
+  'materialQuiz.error': '퀴즈를 불러오는데 실패했습니다.\n잠시 후 다시 시도해주세요.',
+  'materialQuiz.submit': '제출',
+  'materialQuiz.submittedAnswer': '제출한 답',
+  'materialQuiz.answer': '정답',
+  'materialQuiz.next': '다음 문제로 이동 >',
+  'materialQuiz.myAnswer': '내 답안',
+  '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': '항목을 다시 이곳으로 옮길 수 있습니다.'
+};
+
+export { en, ko };

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

@@ -0,0 +1,106 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { useMeasure } from 'react-use';
+import { base } from '@elice/design-tokens';
+import { enums } from '@elice/types';
+import styled from 'styled-components';
+import { MaterialQuizProvider, useMaterialQuizState, useMaterialQuizDispatch } from './context/MaterialQuizContext.js';
+import MaterialQuizShimmer from './MaterialQuizShimmer.js';
+import MaterialQuizInfo from './MaterialQuizInfo.js';
+import * as MaterialQuiz_i18n from './MaterialQuiz.i18n.js';
+import { en } from './MaterialQuiz.i18n.js';
+
+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 StyledMaterialQuizInfo = styled.div.withConfig({
+  componentId: "sc-1eyn8fb-0"
+})([""]);
+const StyledMaterialQuizContent = styled.div.withConfig({
+  componentId: "sc-1eyn8fb-1"
+})(["min-width:0;"]);
+const StyledMaterialQuizWrapper = styled.div.withConfig({
+  componentId: "sc-1eyn8fb-2"
+})(["display:flex;width:100%;height:100%;flex-direction:", ";& > *{flex:", ";}& > *:first-child{margin-right:", ";margin-bottom:", ";}", "{height:", ";overflow-y:", ";}"], ({
+  vertical
+}) => vertical ? 'column' : 'row', ({
+  vertical
+}) => vertical ? 'auto' : '1 0 calc(50% - 1rem);', ({
+  vertical
+}) => vertical ? '0' : '1rem', ({
+  vertical
+}) => vertical ? '1rem' : '0', StyledMaterialQuizInfo, ({
+  vertical
+}) => vertical ? 'auto' : '100%', ({
+  vertical
+}) => vertical ? 'intial' : 'auto');
+
+const MaterialQuiz = () => {
+  const {
+    materialQuiz,
+    vertical
+  } = useMaterialQuizState();
+  const {
+    setVertical
+  } = useMaterialQuizDispatch();
+  const [ref, {
+    width
+  }] = useMeasure();
+  React.useEffect(() => {
+    if (width > 0) {
+      setVertical(width <= base.screen.medium);
+    }
+  }, [width, setVertical]);
+  let Component = null;
+
+  switch (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.optionType) {
+    case enums.QuizOptionType.SelectOne:
+      Component = React.createElement(AsyncMaterialQuizSelectOne, null);
+      break;
+
+    case enums.QuizOptionType.SelectMultiple:
+      Component = React.createElement(AsyncMaterialQuizSelectMultiple, null);
+      break;
+
+    case enums.QuizOptionType.Text:
+      Component = React.createElement(AsyncMaterialQuizText, null);
+      break;
+
+    case enums.QuizOptionType.SelectMultipleOrder:
+      Component = React.createElement(AsyncMaterialQuizSelectMultipleOrder, null);
+      break;
+
+    default:
+      Component = React.createElement(MaterialQuizShimmer, null);
+      break;
+  }
+
+  return React.createElement(React.Suspense, {
+    fallback: null
+  }, React.createElement(StyledMaterialQuizWrapper, {
+    ref: ref,
+    vertical: vertical
+  }, React.createElement(StyledMaterialQuizInfo, null, React.createElement(MaterialQuizInfo, null)), React.createElement(StyledMaterialQuizContent, null, Component)));
+};
+
+const MaterialQuizContainer = ({
+  materialQuizId,
+  userId,
+  locale = 'en',
+  onSubmit,
+  onNext
+}) => {
+  return React.createElement(IntlProvider, {
+    locale: locale,
+    defaultLocale: "en",
+    messages: locale in MaterialQuiz_i18n ? MaterialQuiz_i18n[locale] : en
+  }, React.createElement(MaterialQuizProvider, {
+    materialQuizId: materialQuizId,
+    userId: userId,
+    onSubmit: onSubmit,
+    onNext: onNext
+  }, React.createElement(MaterialQuiz, null)));
+};
+
+export { MaterialQuizContainer as default };

package/es/components/material-quiz/MaterialQuizAnswerExplanation.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const MaterialQuizAnswerExplanation: React.FC;
+export default MaterialQuizAnswerExplanation;

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { Accordion, Flex, Text } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import { MarkdownSSR } from '@elice/markdown';
+import { enums } from '@elice/types';
+import styled from 'styled-components';
+import { useMaterialQuizState } from './context/MaterialQuizContext.js';
+
+const StyledMarkdownSSR = styled(MarkdownSSR).withConfig({
+  componentId: "sc-18kg5i5-0"
+})(["p{margin:0 !important;}"]);
+const StyledAccordion = styled(Accordion).withConfig({
+  componentId: "sc-18kg5i5-1"
+})(["border-radius:8px;overflow:hidden;background-color:", " !important;border-radius:8px;overflow:hidden;& > *:first-child{background-color:", " !important;}& > *:last-child{background-color:", " !important;}"], base.color.navy5, base.color.navy5, base.color.navy4);
+
+const MaterialQuizAnswerExplanation = () => {
+  const {
+    lecture,
+    materialQuiz
+  } = useMaterialQuizState();
+  const intl = useIntl();
+
+  if (!materialQuiz || !materialQuiz.explanationInfo.isEnabled || !materialQuiz.isResponded || (lecture === null || lecture === void 0 ? void 0 : lecture.lectureType) === enums.LectureType.Test && (lecture === null || lecture === void 0 ? void 0 : lecture.testUserStatus) !== enums.LectureTestUserStatus.Completed) {
+    return null;
+  }
+
+  return React.createElement(Flex, {
+    column: true,
+    margintop: "1rem"
+  }, React.createElement(StyledAccordion, {
+    dark: true,
+    header: intl.formatMessage({
+      id: 'materialQuiz.explanation.show'
+    })
+  }, materialQuiz.explanationInfo.isEnabled ? React.createElement(StyledMarkdownSSR, {
+    dark: true,
+    children: materialQuiz.explanationInfo.value
+  }) : React.createElement(Text, {
+    role: "info",
+    lineHeight: 1.4,
+    userSelect: "none"
+  }, intl.formatMessage({
+    id: 'materialQuiz.explanation.empty'
+  }))));
+};
+
+export { MaterialQuizAnswerExplanation as default };

package/es/components/material-quiz/MaterialQuizError.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const MaterialQuizError: React.FC;
+export default MaterialQuizError;

package/es/components/material-quiz/MaterialQuizInfo.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const MaterialQuizInfo: React.FC;
+export default MaterialQuizInfo;

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Flex, Text, Shimmer, Vspace } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import { MarkdownSSR } from '@elice/markdown';
+import QuestionBox from '../shared/QuestionBox.js';
+import { useMaterialQuizState } from './context/MaterialQuizContext.js';
+import MaterialQuizAnswerExplanation from './MaterialQuizAnswerExplanation.js';
+
+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, {
+    children: materialQuiz.questionDescription,
+    dark: true,
+    paddingx: 0,
+    paddingy: 0
+  }) : React.createElement(React.Fragment, null, React.createElement(Shimmer, {
+    dark: true,
+    borderRadius: '4px',
+    width: "80%",
+    height: '40px'
+  }), React.createElement(Vspace, {
+    height: 1
+  }), React.createElement(Shimmer, {
+    dark: true,
+    borderRadius: '4px',
+    width: "100%",
+    height: '40px'
+  }), React.createElement(Vspace, {
+    height: 1
+  }), React.createElement(Shimmer, {
+    dark: true,
+    borderRadius: '4px',
+    width: "100%",
+    height: '40px'
+  }), React.createElement(Vspace, {
+    height: 1
+  }), React.createElement(Shimmer, {
+    dark: true,
+    borderRadius: '4px',
+    width: "100%",
+    height: '40px'
+  })), React.createElement(MaterialQuizAnswerExplanation, null));
+};
+
+export { MaterialQuizInfo as default };

package/es/components/material-quiz/MaterialQuizSelectMultiple.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const MaterialQuizSelectMultiple: React.FC;
+export default MaterialQuizSelectMultiple;