@elice/material-quiz 1.220803.0

package/README.md

@@ -0,0 +1,3 @@
+# elice-material-quiz
+
+User view and editing components of Elice material quiz.

package/cjs/components/eb-sortable/EbDraggable.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="jquery" />
+/// <reference types="jqueryui" />
+import React from 'react';
+import 'jquery-ui/ui/widgets/draggable';
+interface EbDraggableProps {
+    id?: string;
+    className?: string;
+    connectWith?: JQuery.Selector;
+    disabled?: boolean;
+    revert?: boolean;
+    clone?: boolean;
+    onStart?: (event: JQueryEventObject, ui: JQueryUI.DraggableEventUIParams) => void;
+    onStop?: (event: JQueryEventObject, ui: JQueryUI.DraggableEventUIParams) => void;
+    onDrag?: (event: JQueryEventObject, ui: JQueryUI.DraggableEventUIParams) => void;
+    onCreate?: (event: JQueryEventObject, ui: JQueryUI.DraggableEventUIParams) => void;
+}
+declare const EbDraggable: React.FC<EbDraggableProps>;
+export default EbDraggable;

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

@@ -0,0 +1,112 @@
+'use strict';
+
+var React = require('react');
+var $ = require('jquery');
+require('jquery-ui/ui/widgets/draggable');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var $__default = /*#__PURE__*/_interopDefaultLegacy($);
+
+const EbDraggable = ({
+  children,
+  id,
+  disabled = false,
+  revert = true,
+  clone = false,
+  className,
+  onStart,
+  onStop,
+  onDrag,
+  onCreate
+}) => {
+  const rootEl = React__default["default"].useRef(null);
+  const onStartCallback = React__default["default"].useCallback((event, ui) => {
+    if (onStart) {
+      return onStart(event, ui);
+    } else {
+      return () => {
+        return;
+      };
+    }
+  }, [onStart]);
+  const onStopCallback = React__default["default"].useCallback((event, ui) => {
+    if (onStop) {
+      return onStop(event, ui);
+    } else {
+      return () => {
+        return;
+      };
+    }
+  }, [onStop]);
+  const onDragCallback = React__default["default"].useCallback((event, ui) => {
+    if (onDrag) {
+      return onDrag(event, ui);
+    } else {
+      return () => {
+        return;
+      };
+    }
+  }, [onDrag]);
+  const onCreateCallback = React__default["default"].useCallback((event, ui) => {
+    if (onCreate) {
+      return onCreate(event, ui);
+    } else {
+      return () => {
+        return;
+      };
+    }
+  }, [onCreate]);
+  React__default["default"].useEffect(() => {
+    if (!rootEl.current) {
+      return;
+    }
+
+    const draggableEl = $__default["default"](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__default["default"].createElement("div", {
+    ref: rootEl,
+    id: id,
+    className: className,
+    style: {
+      cursor: disabled ? 'auto' : 'move'
+    }
+  }, children);
+};
+
+module.exports = EbDraggable;

package/cjs/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/cjs/components/eb-sortable/EbDroppable.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var React = require('react');
+var $ = require('jquery');
+require('jquery-ui/ui/widgets/droppable');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var $__default = /*#__PURE__*/_interopDefaultLegacy($);
+
+const EbDroppable = ({
+  children,
+  id,
+  disabled = false,
+  accept,
+  className,
+  onDrop
+}) => {
+  const rootEl = React__default["default"].useRef(null);
+  const onDropCallback = React__default["default"].useCallback((event, ui) => {
+    if (onDrop) {
+      return onDrop(event, ui);
+    } else {
+      return () => {
+        return;
+      };
+    }
+  }, [onDrop]);
+  React__default["default"].useEffect(() => {
+    if (!rootEl.current) {
+      return;
+    }
+
+    const draggableEl = $__default["default"](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__default["default"].createElement("div", {
+    ref: rootEl,
+    id: id,
+    className: className
+  }, children);
+};
+
+module.exports = EbDroppable;

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

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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': '항목을 다시 이곳으로 옮길 수 있습니다.'
+};
+
+exports.en = en;
+exports.ko = ko;

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

@@ -0,0 +1,114 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var reactUse = require('react-use');
+var designTokens = require('@elice/design-tokens');
+var types = require('@elice/types');
+var styled = require('styled-components');
+var MaterialQuizContext = require('./context/MaterialQuizContext.js');
+var MaterialQuizShimmer = require('./MaterialQuizShimmer.js');
+var MaterialQuizInfo = require('./MaterialQuizInfo.js');
+var MaterialQuiz_i18n = require('./MaterialQuiz.i18n.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespaceDefaultOnly (e) { return Object.freeze({ __proto__: null, 'default': e }); }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const AsyncMaterialQuizSelectMultiple = React__default["default"].lazy(() => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./MaterialQuizSelectMultiple.js')); }));
+const AsyncMaterialQuizSelectMultipleOrder = React__default["default"].lazy(() => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./MaterialQuizSelectMultipleOrder.js')); }));
+const AsyncMaterialQuizText = React__default["default"].lazy(() => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./MaterialQuizText.js')); }));
+const AsyncMaterialQuizSelectOne = React__default["default"].lazy(() => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./MaterialQuizSelectOne.js')); }));
+const StyledMaterialQuizInfo = styled__default["default"].div.withConfig({
+  componentId: "sc-1eyn8fb-0"
+})([""]);
+const StyledMaterialQuizContent = styled__default["default"].div.withConfig({
+  componentId: "sc-1eyn8fb-1"
+})(["min-width:0;"]);
+const StyledMaterialQuizWrapper = styled__default["default"].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
+  } = MaterialQuizContext.useMaterialQuizState();
+  const {
+    setVertical
+  } = MaterialQuizContext.useMaterialQuizDispatch();
+  const [ref, {
+    width
+  }] = reactUse.useMeasure();
+  React__default["default"].useEffect(() => {
+    if (width > 0) {
+      setVertical(width <= designTokens.base.screen.medium);
+    }
+  }, [width, setVertical]);
+  let Component = null;
+
+  switch (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.optionType) {
+    case types.enums.QuizOptionType.SelectOne:
+      Component = React__default["default"].createElement(AsyncMaterialQuizSelectOne, null);
+      break;
+
+    case types.enums.QuizOptionType.SelectMultiple:
+      Component = React__default["default"].createElement(AsyncMaterialQuizSelectMultiple, null);
+      break;
+
+    case types.enums.QuizOptionType.Text:
+      Component = React__default["default"].createElement(AsyncMaterialQuizText, null);
+      break;
+
+    case types.enums.QuizOptionType.SelectMultipleOrder:
+      Component = React__default["default"].createElement(AsyncMaterialQuizSelectMultipleOrder, null);
+      break;
+
+    default:
+      Component = React__default["default"].createElement(MaterialQuizShimmer, null);
+      break;
+  }
+
+  return React__default["default"].createElement(React__default["default"].Suspense, {
+    fallback: null
+  }, React__default["default"].createElement(StyledMaterialQuizWrapper, {
+    ref: ref,
+    vertical: vertical
+  }, React__default["default"].createElement(StyledMaterialQuizInfo, null, React__default["default"].createElement(MaterialQuizInfo, null)), React__default["default"].createElement(StyledMaterialQuizContent, null, Component)));
+};
+
+const MaterialQuizContainer = ({
+  materialQuizId,
+  userId,
+  locale = 'en',
+  onSubmit,
+  onNext
+}) => {
+  return React__default["default"].createElement(reactIntl.IntlProvider, {
+    locale: locale,
+    defaultLocale: "en",
+    messages: locale in MaterialQuiz_i18n ? MaterialQuiz_i18n[locale] : MaterialQuiz_i18n.en
+  }, React__default["default"].createElement(MaterialQuizContext.MaterialQuizProvider, {
+    materialQuizId: materialQuizId,
+    userId: userId,
+    onSubmit: onSubmit,
+    onNext: onNext
+  }, React__default["default"].createElement(MaterialQuiz, null)));
+};
+
+module.exports = MaterialQuizContainer;

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

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

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

@@ -0,0 +1,55 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var markdown = require('@elice/markdown');
+var types = require('@elice/types');
+var styled = require('styled-components');
+var MaterialQuizContext = require('./context/MaterialQuizContext.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-18kg5i5-0"
+})(["p{margin:0 !important;}"]);
+const StyledAccordion = styled__default["default"](blocks.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;}"], designTokens.base.color.navy5, designTokens.base.color.navy5, designTokens.base.color.navy4);
+
+const MaterialQuizAnswerExplanation = () => {
+  const {
+    lecture,
+    materialQuiz
+  } = MaterialQuizContext.useMaterialQuizState();
+  const intl = reactIntl.useIntl();
+
+  if (!materialQuiz || !materialQuiz.explanationInfo.isEnabled || !materialQuiz.isResponded || (lecture === null || lecture === void 0 ? void 0 : lecture.lectureType) === types.enums.LectureType.Test && (lecture === null || lecture === void 0 ? void 0 : lecture.testUserStatus) !== types.enums.LectureTestUserStatus.Completed) {
+    return null;
+  }
+
+  return React__default["default"].createElement(blocks.Flex, {
+    column: true,
+    margintop: "1rem"
+  }, React__default["default"].createElement(StyledAccordion, {
+    dark: true,
+    header: intl.formatMessage({
+      id: 'materialQuiz.explanation.show'
+    })
+  }, materialQuiz.explanationInfo.isEnabled ? React__default["default"].createElement(StyledMarkdownSSR, {
+    dark: true,
+    children: materialQuiz.explanationInfo.value
+  }) : React__default["default"].createElement(blocks.Text, {
+    role: "info",
+    lineHeight: 1.4,
+    userSelect: "none"
+  }, intl.formatMessage({
+    id: 'materialQuiz.explanation.empty'
+  }))));
+};
+
+module.exports = MaterialQuizAnswerExplanation;

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

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

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

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

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

@@ -0,0 +1,74 @@
+'use strict';
+
+var React = require('react');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var markdown = require('@elice/markdown');
+var QuestionBox = require('../shared/QuestionBox.js');
+var MaterialQuizContext = require('./context/MaterialQuizContext.js');
+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);
+
+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, {
+    children: materialQuiz.questionDescription,
+    dark: true,
+    paddingx: 0,
+    paddingy: 0
+  }) : React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(blocks.Shimmer, {
+    dark: true,
+    borderRadius: '4px',
+    width: "80%",
+    height: '40px'
+  }), React__default["default"].createElement(blocks.Vspace, {
+    height: 1
+  }), React__default["default"].createElement(blocks.Shimmer, {
+    dark: true,
+    borderRadius: '4px',
+    width: "100%",
+    height: '40px'
+  }), React__default["default"].createElement(blocks.Vspace, {
+    height: 1
+  }), React__default["default"].createElement(blocks.Shimmer, {
+    dark: true,
+    borderRadius: '4px',
+    width: "100%",
+    height: '40px'
+  }), React__default["default"].createElement(blocks.Vspace, {
+    height: 1
+  }), React__default["default"].createElement(blocks.Shimmer, {
+    dark: true,
+    borderRadius: '4px',
+    width: "100%",
+    height: '40px'
+  })), React__default["default"].createElement(MaterialQuizAnswerExplanation, null));
+};
+
+module.exports = MaterialQuizInfo;

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

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