@elice/material-quiz 1.220803.0

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

@@ -0,0 +1,197 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { getOrgMaterialQuizResponseGet, getOrgMaterialQuizResponseList, postOrgMaterialQuizResponseAdd } from '@elice/api-client';
+import { shouldResetOptions, checkUserLectureTestEnded, getOptionStatus, getQuizResult } from '../../helpers/index.js';
+import '../shared/QuizDraggbleOption.js';
+import '../shared/QuizDraggbleDummyOption.js';
+import '../shared/question-radio/QuestionRadio.js';
+import '../shared/question-radio/QuestionRadioOption.js';
+import QuestionCheckbox from '../shared/question-checkbox/QuestionCheckbox.js';
+import QuestionCheckboxOption from '../shared/question-checkbox/QuestionCheckboxOption.js';
+import QuestionBox from '../shared/QuestionBox.js';
+import StyledMarkdown from '../shared/StyledMarkdown.js';
+import { useMaterialQuizState, useMaterialQuizDispatch } from './context/MaterialQuizContext.js';
+import QuizResultBadge from './QuizResultBadge.js';
+import QuizSubmitStatusText from './QuizSubmitStatusText.js';
+
+const MaterialQuizSelectMultiple = () => {
+  // context
+  const {
+    course,
+    lecture,
+    materialQuiz,
+    userId
+  } = useMaterialQuizState();
+  const {
+    onSubmit,
+    onNext,
+    refreshOrgMaterialQuiz
+  } = useMaterialQuizDispatch(); // state
+
+  const intl = useIntl();
+  const [selectedAnswer, setSelectedAnswer] = React.useState([]);
+  const [materialQuizResponse, setMaterialQuizResponse] = React.useState();
+  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
+
+  React.useEffect(() => {
+    if (!userId && (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.lastQuizResponseId)) {
+      const controller = new AbortController();
+      const {
+        signal
+      } = controller;
+      getOrgMaterialQuizResponseGet({
+        quizResponseId: materialQuiz.lastQuizResponseId
+      }, {
+        signal
+      }).then(response => {
+        setMaterialQuizResponse(response.quizResponse); // when user submitted answers and not get the result yet, update selected options (for example, test quiz)
+        // when is is a survey type quiz
+
+        if (!shouldResetOptions({
+          materialQuizResponse: response.quizResponse
+        })) {
+          setSelectedAnswer(response.quizResponse.answer);
+        }
+
+        setSelectedAnswer(response.quizResponse.answer);
+      }).catch(error => {
+        console.error(error);
+      });
+      return () => controller.abort();
+    }
+  }, [materialQuiz, userId]); // quiz response fetcher
+
+  React.useEffect(() => {
+    if (userId && materialQuiz) {
+      const controller = new AbortController();
+      const {
+        signal
+      } = controller;
+      getOrgMaterialQuizResponseList({
+        materialQuizId: materialQuiz.id,
+        filterUserIds: [userId],
+        isContainOnlyLast: true,
+        isIncludeAnswer: true,
+        offset: 0,
+        count: 1
+      }, {
+        signal
+      }).then(response => {
+        const quizResponse = response.quizResponses[0];
+        setMaterialQuizResponse(quizResponse);
+
+        if (Array.isArray(quizResponse.answer)) {
+          setSelectedAnswer(quizResponse.answer);
+        }
+      }).catch(error => {
+        console.error(error);
+      });
+      return () => controller.abort();
+    }
+  }, [materialQuiz, userId]); // submit handler
+
+  const handleSubmit = async () => {
+    if (!materialQuiz) {
+      return;
+    }
+
+    setSubmitStatus('pending');
+
+    try {
+      const {
+        quizResponseId
+      } = await postOrgMaterialQuizResponseAdd({
+        materialQuizId: materialQuiz.id,
+        answer: selectedAnswer
+      });
+      const {
+        quizResponse
+      } = await getOrgMaterialQuizResponseGet({
+        quizResponseId
+      });
+      setIsActive(false);
+      setMaterialQuizResponse(quizResponse);
+      void refreshOrgMaterialQuiz();
+      onSubmit(true, getQuizResult(quizResponse));
+      setSubmitStatus('resolved');
+      setHasSubmitted(true);
+    } catch (error) {
+      console.error(error);
+      onSubmit(false);
+      setSubmitStatus('rejected');
+    }
+  };
+
+  return React.createElement(QuestionBox, {
+    title: intl.formatMessage({
+      id: 'materialQuiz.myAnswer'
+    }),
+    onNext: onNext,
+    isNextActive: hasSubmitted && typeof onNext === 'function',
+    submitResult: React.createElement(QuizResultBadge, {
+      materialQuizResponse: materialQuizResponse
+    }),
+    submitStatus: React.createElement(QuizSubmitStatusText, {
+      status: submitStatus
+    }),
+    footerActions: [{
+      border: true,
+      disabled: selectedAnswer.length === 0 || checkUserLectureTestEnded(lecture) || !!userId,
+      loading: submitStatus === 'pending',
+      tabIndex: 0,
+      transparent: false,
+      role: 'primary',
+      onClick: handleSubmit,
+      children: intl.formatMessage({
+        id: 'materialQuiz.submit'
+      })
+    }]
+  }, 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;
+      });
+    },
+    selectedOptions: selectedAnswer,
+    disabled: submitStatus === 'pending' || checkUserLectureTestEnded(lecture) || !!userId
+  }, (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.optionInfo) ? materialQuiz.optionInfo.map((option, index) => {
+    const getIsSelected = (index, materialQuizResponse) => {
+      var _a;
+
+      if (!materialQuizResponse || typeof materialQuizResponse.answer === 'string') {
+        return false;
+      }
+
+      return (_a = materialQuizResponse.answer.includes(index)) !== null && _a !== void 0 ? _a : false;
+    };
+
+    const status = getOptionStatus({
+      materialQuizResponse,
+      isSelected: getIsSelected(index, materialQuizResponse),
+      isActive
+    });
+    return React.createElement(QuestionCheckboxOption, {
+      key: index,
+      value: index,
+      status: status,
+      isAnswer: !!userId && Array.isArray(materialQuiz.answerInfo) && materialQuiz.answerInfo.includes(index)
+    }, (course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions) ? React.createElement(StyledMarkdown, {
+      children: option,
+      paddingx: 0,
+      paddingy: 0,
+      dark: false
+    }) : option);
+  }) : null));
+};
+
+export { MaterialQuizSelectMultiple as default };

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

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

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

@@ -0,0 +1,461 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { getOrgMaterialQuizResponseGet, getOrgMaterialQuizResponseList, postOrgMaterialQuizResponseAdd } from '@elice/api-client';
+import { Flex, Text, Icon } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import { eilSortItem } from '@elice/icons';
+import styled from 'styled-components';
+import { checkUserLectureTestEnded, getQuizResult, getQuizResultStatus, QuizResultStatus } from '../../helpers/index.js';
+import EbDroppable from '../eb-sortable/EbDroppable.js';
+import QuestionBox from '../shared/QuestionBox.js';
+import QuizDraggbleDroppedOption from '../shared/QuizDraggbleDroppedOption.js';
+import QuizDraggbleDummyOption from '../shared/QuizDraggbleDummyOption.js';
+import QuizDraggbleOption from '../shared/QuizDraggbleOption.js';
+import { useMaterialQuizState, useMaterialQuizDispatch } from './context/MaterialQuizContext.js';
+import QuizResultBadge from './QuizResultBadge.js';
+import QuizSubmitStatusText from './QuizSubmitStatusText.js';
+
+const StyledVerticalDivider = styled.div.withConfig({
+  componentId: "sc-10067nt-0"
+})(["display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none !important;padding:1rem;", ""], ({
+  vertical
+}) => {
+  return vertical ? `
+          display: none;
+        ` : '';
+});
+const StyledHorizontalDivider = styled.hr.withConfig({
+  componentId: "sc-10067nt-1"
+})(["display:none;", ""], ({
+  vertical
+}) => {
+  return vertical ? `
+          display: block;
+          margin: 1rem 0;
+          width: 100%;
+          border: solid 1px ${base.color.navy5};
+        ` : '';
+});
+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);
+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);
+const StyledOptionBox = styled.div.withConfig({
+  componentId: "sc-10067nt-4"
+})(["display:flex;", ""], ({
+  vertical
+}) => {
+  return vertical ? `
+          flex-direction: column;
+        ` : '';
+});
+
+const MaterialQuizSelectMultipleOrder = () => {
+  // context
+  const {
+    lecture,
+    materialQuiz,
+    userId,
+    vertical,
+    course
+  } = useMaterialQuizState();
+  const {
+    onSubmit,
+    onNext,
+    refreshOrgMaterialQuiz
+  } = useMaterialQuizDispatch(); // state
+
+  const intl = useIntl();
+  const [materialQuizResponse, setMaterialQuizResponse] = React.useState();
+  const [submitStatus, setSubmitStatus] = React.useState('idle');
+  const [isActive, setIsActive] = React.useState(false);
+  const [optionList, setOptionList] = React.useState([]);
+  const [answerList, setAnswerList] = React.useState([]);
+  const [correctAnswerList, setCorrectAnswerList] = React.useState([]);
+  const [hasSubmitted, setHasSubmitted] = React.useState(false); // ref
+
+  const optionBoxRef = React.useRef(null); // to make jquery touchable
+
+  React.useEffect(() => {
+    const optionBoxElement = optionBoxRef.current;
+
+    if (!optionBoxElement) {
+      return;
+    }
+    /**
+     * Lightweight script to convert touch handlers to mouse handlers
+     * credit: http://stackoverflow.com/a/6141093
+     */
+
+
+    function touchHandler(event) {
+      const touches = event.changedTouches;
+      const first = touches[0];
+      let type = '';
+
+      switch (event.type) {
+        case 'touchstart':
+          type = 'mousedown';
+          break;
+
+        case 'touchmove':
+          type = 'mousemove';
+          break;
+
+        case 'touchend':
+          type = 'mouseup';
+          break;
+
+        default:
+          return;
+      } // initMouseEvent(type, canBubble, cancelable, view, clickCount,
+      //                screenX, screenY, clientX, clientY, ctrlKey,
+      //                altKey, shiftKey, metaKey, button, relatedTarget);
+
+
+      const simulatedEvent = document.createEvent('MouseEvent');
+      simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0
+      /*left*/
+      , null);
+      first.target.dispatchEvent(simulatedEvent);
+      event.preventDefault();
+    }
+
+    optionBoxElement.addEventListener('touchstart', touchHandler, true);
+    optionBoxElement.addEventListener('touchmove', touchHandler, true);
+    optionBoxElement.addEventListener('touchend', touchHandler, true);
+    optionBoxElement.addEventListener('touchcancel', touchHandler, true);
+    return () => {
+      optionBoxElement.removeEventListener('touchstart', touchHandler, true);
+      optionBoxElement.removeEventListener('touchmove', touchHandler, true);
+      optionBoxElement.removeEventListener('touchend', touchHandler, true);
+      optionBoxElement.removeEventListener('touchcancel', touchHandler, true);
+    };
+  }, []); // quiz response fetcher
+
+  React.useEffect(() => {
+    var _a, _b;
+
+    if (!userId && (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.lastQuizResponseId)) {
+      const controller = new AbortController();
+      const {
+        signal
+      } = controller;
+      getOrgMaterialQuizResponseGet({
+        quizResponseId: materialQuiz.lastQuizResponseId
+      }, {
+        signal
+      }).then(response => {
+        setMaterialQuizResponse(response.quizResponse);
+        const answer = response.quizResponse.answer; // user submitted
+
+        const optionInfo = materialQuiz.optionInfo; // options
+
+        const answerList = answer.map(answer => ({
+          order: answer,
+          value: optionInfo[answer]
+        }), []);
+        const optionList = optionInfo.filter((item, index) => !answer.includes(index)).map(option => ({
+          order: optionInfo.findIndex(optionInfo => optionInfo === option),
+          value: option
+        }));
+        setAnswerList(answerList);
+        setOptionList(optionList);
+      }).catch(error => {
+        console.error(error);
+      });
+      return () => controller.abort();
+    } else {
+      setOptionList(((_a = materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.optionInfo) === null || _a === void 0 ? void 0 : _a.map((option, index) => ({
+        order: index,
+        value: option
+      }))) || []);
+      setAnswerList(Array.from({
+        length: (_b = materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.correctOptionCount) !== null && _b !== void 0 ? _b : 0
+      }, () => ({
+        order: null,
+        value: null
+      })));
+    }
+  }, [materialQuiz, userId]); // quiz response fetcher
+
+  React.useEffect(() => {
+    if (userId && materialQuiz) {
+      const controller = new AbortController();
+      const {
+        signal
+      } = controller;
+      getOrgMaterialQuizResponseList({
+        materialQuizId: materialQuiz.id,
+        filterUserIds: [userId],
+        isContainOnlyLast: true,
+        isIncludeAnswer: true,
+        offset: 0,
+        count: 1
+      }, {
+        signal
+      }).then(response => {
+        var _a, _b, _c;
+
+        const quizResponse = response.quizResponses[0];
+        setMaterialQuizResponse(quizResponse);
+        const answer = (_a = quizResponse === null || quizResponse === void 0 ? void 0 : quizResponse.answer) !== null && _a !== void 0 ? _a : []; // user submitted
+
+        const optionInfo = materialQuiz.optionInfo; // options
+
+        const correctAnswerList = Array.isArray(materialQuiz.answerInfo) ? (_c = (_b = materialQuiz.answerInfo) === null || _b === void 0 ? void 0 : _b.map(answerInfo => {
+          var _a, _b;
+
+          return {
+            order: answerInfo,
+            value: (_b = (_a = materialQuiz.optionInfo) === null || _a === void 0 ? void 0 : _a[answerInfo]) !== null && _b !== void 0 ? _b : ''
+          };
+        })) !== null && _c !== void 0 ? _c : [] : [];
+        const answerList = answer.map(answer => ({
+          order: answer,
+          value: optionInfo[answer]
+        }), []);
+        const optionList = optionInfo.filter((item, index) => !answer.includes(index)).map(option => ({
+          order: optionInfo.findIndex(optionInfo => optionInfo === option),
+          value: option
+        }));
+        setCorrectAnswerList(correctAnswerList);
+        setAnswerList(answerList);
+        setOptionList(optionList);
+      }).catch(error => {
+        console.error(error);
+      });
+      return () => controller.abort();
+    }
+  }, [materialQuiz, userId]); // submit handler
+
+  const handleSubmit = async () => {
+    if (!materialQuiz) {
+      return;
+    }
+
+    setSubmitStatus('pending');
+
+    try {
+      const {
+        quizResponseId
+      } = await postOrgMaterialQuizResponseAdd({
+        materialQuizId: materialQuiz.id,
+        answer: answerList.map(answer => answer.order)
+      });
+      const {
+        quizResponse
+      } = await getOrgMaterialQuizResponseGet({
+        quizResponseId
+      });
+      setIsActive(false);
+      setHasSubmitted(true);
+      setMaterialQuizResponse(quizResponse);
+      void refreshOrgMaterialQuiz();
+      onSubmit(true, getQuizResult(quizResponse));
+      setSubmitStatus('resolved');
+    } catch (error) {
+      console.error(error);
+      onSubmit(false);
+      setSubmitStatus('rejected');
+    }
+  };
+
+  const renderQuizDragOption = () => {
+    return React.createElement(StyledQuizOptionsDropZone, {
+      disabled: !!userId,
+      accept: ".quiz-answer",
+      onDrop: (event, ui) => {
+        if (checkUserLectureTestEnded(lecture)) {
+          return;
+        }
+
+        setIsActive(true);
+        setHasSubmitted(false);
+        const targetId = Number(ui.draggable[0].id);
+        setOptionList(prevOptionList => {
+          return [...prevOptionList, answerList.find(answer => answer.order === targetId)].sort((a, b) => a.order - b.order);
+        });
+        setAnswerList(prevAnswerList => {
+          const removingIndex = prevAnswerList.findIndex(answer => answer.order === targetId);
+          return prevAnswerList.map((answer, answerIndex) => {
+            if (answerIndex === removingIndex) {
+              return {
+                order: null,
+                value: null
+              };
+            } else {
+              return answer;
+            }
+          });
+        });
+      }
+    }, optionList.map((option, index) => {
+      return React.createElement(QuizDraggbleOption, {
+        disabled: !!userId,
+        key: option.order,
+        id: option.order.toString(),
+        className: "quiz-option",
+        content: option.value,
+        isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
+      });
+    }), optionList.length === 0 && !userId ? React.createElement(Flex, {
+      align: "center",
+      justify: "center",
+      style: {
+        minWidth: '200px',
+        height: '100%'
+      }
+    }, React.createElement(Text, {
+      size: "tiny",
+      role: "white"
+    }, intl.formatMessage({
+      id: 'materialQuiz.order.answerEmpty'
+    }))) : null);
+  };
+
+  const renderQuizDragAnswers = () => {
+    return React.createElement(StyledQuizAnswersDropZone, null, answerList.map((option, index) => {
+      const getRole = () => {
+        if (isActive) {
+          return 'default';
+        }
+
+        const status = getQuizResultStatus(materialQuizResponse);
+
+        switch (status) {
+          case QuizResultStatus.Correct:
+            return 'correct';
+
+          case QuizResultStatus.Wrong:
+            return 'wrong';
+
+          default:
+            return 'default';
+        }
+      };
+
+      if (option.value === null) {
+        return React.createElement(QuizDraggbleDummyOption, {
+          key: index,
+          indexOrder: index + 1,
+          onDrop: (event, ui) => {
+            if (checkUserLectureTestEnded(lecture)) {
+              return;
+            }
+
+            setIsActive(true);
+            setHasSubmitted(false); // from answerList to answerList
+
+            if (ui.draggable[0].classList.contains('quiz-answer')) {
+              const targetOptionId = Number(ui.draggable[0].id);
+              setAnswerList(prevAnswerList => {
+                const newState = [...prevAnswerList];
+                const from = newState.find(prevAnswer => prevAnswer.order === targetOptionId);
+                const fromIndex = newState.findIndex(prevAnswer => prevAnswer.order === targetOptionId);
+                const to = newState[index];
+                newState[index] = from;
+                newState[fromIndex] = to;
+                return newState;
+              });
+            } // from option-list to answerList-list
+            else {
+              const targetOptionId = Number(ui.draggable[0].id);
+              setOptionList(prevOptions => {
+                return prevOptions.filter(prevOption => prevOption.order !== targetOptionId);
+              });
+              setAnswerList(prevAnswerList => {
+                return prevAnswerList.map((prevAnswer, prevAnswerIndex) => {
+                  var _a, _b;
+
+                  if (index === prevAnswerIndex) {
+                    return {
+                      order: targetOptionId,
+                      value: (_b = (_a = optionList.find(option => option.order === targetOptionId)) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ''
+                    };
+                  } else {
+                    return prevAnswer;
+                  }
+                });
+              });
+            }
+          }
+        });
+      } else {
+        return React.createElement(QuizDraggbleDroppedOption, {
+          key: index,
+          id: option.order.toString(),
+          content: option.value,
+          role: getRole(),
+          disabled: !!userId,
+          indexOrder: index + 1,
+          isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
+        });
+      }
+    }));
+  };
+
+  return React.createElement(QuestionBox, {
+    title: intl.formatMessage({
+      id: 'materialQuiz.myAnswer'
+    }),
+    onNext: onNext,
+    isNextActive: hasSubmitted && typeof onNext === 'function',
+    submitStatus: React.createElement(QuizSubmitStatusText, {
+      status: submitStatus
+    }),
+    submitResult: React.createElement(QuizResultBadge, {
+      materialQuizResponse: materialQuizResponse
+    }),
+    footerActions: [{
+      border: true,
+      disabled: (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.correctOptionCount) !== answerList.filter(answer => answer.order !== null).length || !!userId,
+      loading: submitStatus === 'pending',
+      tabIndex: 0,
+      transparent: false,
+      role: 'primary',
+      onClick: handleSubmit,
+      children: intl.formatMessage({
+        id: 'materialQuiz.submit'
+      })
+    }]
+  }, React.createElement(StyledOptionBox, {
+    ref: optionBoxRef,
+    vertical: vertical
+  }, renderQuizDragOption(), React.createElement(StyledVerticalDivider, {
+    vertical: vertical
+  }, React.createElement(Icon, {
+    size: "elephant",
+    icon: eilSortItem,
+    rotate: 90,
+    style: {
+      color: base.color.navy3
+    }
+  })), React.createElement(StyledHorizontalDivider, {
+    vertical: vertical
+  }), renderQuizDragAnswers()), !!userId ? React.createElement(Flex, {
+    margintop: "1rem",
+    column: true
+  }, React.createElement(StyledQuizOptionsDropZone, null, React.createElement(Text, {
+    role: "white",
+    size: "small"
+  }, intl.formatMessage({
+    id: 'materialQuiz.answer'
+  })), correctAnswerList.map((correctAnswer, index) => {
+    var _a;
+
+    return React.createElement(QuizDraggbleDroppedOption, {
+      key: correctAnswer.order,
+      id: (_a = correctAnswer.order) === null || _a === void 0 ? void 0 : _a.toString(),
+      content: correctAnswer.value,
+      disabled: true,
+      role: "correct",
+      indexOrder: index + 1,
+      isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
+    });
+  }))) : null);
+};
+
+export { MaterialQuizSelectMultipleOrder as default };

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

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