@elice/material-quiz 1.220803.0

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

@@ -0,0 +1,181 @@
+import React from 'react';
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+import { useQuestionCheckboxContext } from './QuestionCheckboxContext.js';
+
+const StyledQuestionCheckboxOption = styled.div.withConfig({
+  componentId: "sc-1erloup-0"
+})(["display:flex;align-items:center;padding:1.125rem;border-radius:8px;background-color:", ";&:not(:last-of-type){margin-bottom:1rem;}&:hover,& *:hover{cursor:", ";}", ""], ({
+  checked,
+  status
+}) => {
+  switch (status) {
+    case 'correct':
+      return base.color.green1;
+
+    case 'wrong':
+      return base.color.red1;
+
+    default:
+      return checked ? base.color.primary1 : base.color.navy5;
+  }
+}, ({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer', ({
+  isAnswer
+}) => isAnswer ? `border: 3px solid ${base.color.green5}` : '');
+const StyledCustomCheckboxButton = styled.span.withConfig({
+  componentId: "sc-1erloup-1"
+})([""]);
+const StyledQuestionCheckboxInput = styled.input.withConfig({
+  componentId: "sc-1erloup-2"
+})(["flex:none;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;width:1.25rem;height:1.25rem;margin-right:0.875rem;background-color:", ";border:", ";", ""], ({
+  checked,
+  status
+}) => {
+  switch (status) {
+    case 'correct':
+      return base.color.green9;
+
+    case 'wrong':
+      return base.color.red9;
+
+    default:
+      return checked ? base.color.primary6 : 'transparent';
+  }
+}, ({
+  checked,
+  status
+}) => {
+  switch (status) {
+    case 'correct':
+      return base.color.green9;
+
+    case 'wrong':
+      return base.color.red9;
+
+    default:
+      return checked ? base.color.primary6 : `1px solid ${base.color.gray3}`;
+  }
+}, ({
+  status,
+  checked
+}) => {
+  let bgColor;
+
+  switch (status) {
+    case 'correct':
+      bgColor = base.color.green9;
+      break;
+
+    case 'wrong':
+      bgColor = base.color.red9;
+      break;
+
+    default:
+      bgColor = 'transparent';
+      break;
+  }
+
+  let borderColor;
+
+  switch (status) {
+    case 'correct':
+      borderColor = base.color.green1;
+      break;
+
+    case 'wrong':
+      borderColor = base.color.red1;
+      break;
+
+    default:
+      borderColor = checked ? base.color.primary1 : status ? base.color.navy5 : 'transparent';
+      break;
+  }
+
+  return `
+          &:after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 5px;
+            height: 10px;
+            border: solid ${borderColor};
+            transform: translate(-50%, -50%) rotate(45deg);
+            border-width: 0 3px 3px 0;
+            background-color: ${bgColor};
+          }
+        `;
+});
+const StyledLabel = styled.label.withConfig({
+  componentId: "sc-1erloup-3"
+})(["word-break:break-all;margin-right:0.875rem;font-size:", ";color:", ";& p{color:", ";}"], base.size.body3, ({
+  checked,
+  status
+}) => {
+  switch (status) {
+    case 'correct':
+      return base.color.green9;
+
+    case 'wrong':
+      return base.color.red9;
+
+    default:
+      return checked ? base.color.primary6 : base.color.navy0;
+  }
+}, ({
+  checked,
+  status
+}) => {
+  switch (status) {
+    case 'correct':
+      return base.color.green9;
+
+    case 'wrong':
+      return base.color.red9;
+
+    default:
+      return checked ? base.color.primary6 : base.color.navy0;
+  }
+});
+const QuestionCheckboxOption = React.memo(({
+  value,
+  status,
+  isAnswer,
+  children
+}) => {
+  const {
+    selectedOptions,
+    disabled,
+    onSelect
+  } = useQuestionCheckboxContext();
+  const checked = selectedOptions.includes(value);
+  return React.createElement(StyledQuestionCheckboxOption, {
+    isAnswer: isAnswer,
+    disabled: disabled,
+    checked: checked,
+    onClick: e => {
+      e.preventDefault();
+
+      if (disabled) {
+        return;
+      }
+
+      onSelect(value);
+    },
+    status: status
+  }, React.createElement(StyledCustomCheckboxButton, null), React.createElement(StyledQuestionCheckboxInput, {
+    id: value,
+    readOnly: true,
+    type: "checkbox",
+    checked: checked,
+    status: status
+  }), React.createElement(StyledLabel, {
+    htmlFor: value,
+    checked: checked,
+    status: status
+  }, children));
+});
+
+export { QuestionCheckboxOption as default };

package/es/components/shared/question-radio/QuestionRadio.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface QuestionRadioProps {
+    selectedValue: any;
+    onSelect: (index: number) => void;
+    disabled: boolean;
+}
+declare const QuestionRadio: React.FC<QuestionRadioProps>;
+export default QuestionRadio;

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

@@ -0,0 +1,19 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import styled from 'styled-components';
+import { QuestionRadioContextProvider } from './QuestionRadioContext.js';
+
+const StyledQuestionRadio = styled.div.withConfig({
+  componentId: "sc-s7wqiy-0"
+})(["display:flex;flex-direction:column;"]);
+
+const QuestionRadio = _a => {
+  var {
+    children
+  } = _a,
+      props = __rest(_a, ["children"]);
+
+  return React.createElement(QuestionRadioContextProvider, Object.assign({}, props), React.createElement(StyledQuestionRadio, null, children));
+};
+
+export { QuestionRadio as default };

package/es/components/shared/question-radio/QuestionRadioContext.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { QuestionRadioProps } from './QuestionRadio';
+declare type Value = Pick<QuestionRadioProps, 'selectedValue' | 'disabled' | 'onSelect'>;
+interface QuestionRadioProviderProps extends QuestionRadioProps {
+    children: React.ReactNode;
+}
+declare function QuestionRadioContextProvider({ selectedValue, onSelect, disabled, children, }: QuestionRadioProviderProps): JSX.Element;
+declare function useQuestionRadioContext(): Value;
+export { QuestionRadioContextProvider, useQuestionRadioContext };

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

@@ -0,0 +1,33 @@
+import React from 'react';
+
+const QuestionRadioContext = React.createContext(undefined);
+QuestionRadioContext.displayName = 'QuestionRadioContext';
+
+function QuestionRadioContextProvider({
+  selectedValue,
+  onSelect,
+  disabled,
+  children
+}) {
+  const onSelectValue = React.useCallback(onSelect, []);
+  const value = React.useMemo(() => ({
+    selectedValue,
+    disabled,
+    onSelect: onSelectValue
+  }), [selectedValue, disabled, onSelectValue]);
+  return React.createElement(QuestionRadioContext.Provider, {
+    value: value
+  }, children);
+}
+
+function useQuestionRadioContext() {
+  const context = React.useContext(QuestionRadioContext);
+
+  if (context === undefined) {
+    throw new Error('useQuestionRadioContext must be used within a QuestionRadioContextProvider');
+  }
+
+  return context;
+}
+
+export { QuestionRadioContextProvider, useQuestionRadioContext };

package/es/components/shared/question-radio/QuestionRadioOption.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare type Status = 'correct' | 'wrong' | 'answer';
+interface QuestionRadioOptionProps {
+    value: any;
+    status?: Status;
+    isAnswer?: boolean;
+}
+declare const QuestionRadioOption: React.FC<QuestionRadioOptionProps>;
+export default QuestionRadioOption;

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

@@ -0,0 +1,149 @@
+import React from 'react';
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+import { useQuestionRadioContext } from './QuestionRadioContext.js';
+
+const StyledQuestionRadioOption = styled.div.withConfig({
+  componentId: "sc-cy66me-0"
+})(["display:flex;align-items:center;padding:1.125rem;border-radius:8px;background-color:", ";&:not(:last-of-type){margin-bottom:1rem;}&:hover,& *:hover{cursor:", ";}", ""], ({
+  checked,
+  status
+}) => {
+  switch (status) {
+    case 'correct':
+      return base.color.green1;
+
+    case 'wrong':
+      return base.color.red1;
+
+    case 'answer':
+      return base.color.black;
+
+    default:
+      return checked ? base.color.primary1 : base.color.navy5;
+  }
+}, ({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer', ({
+  isAnswer
+}) => isAnswer ? `border: 3px solid ${base.color.green5}` : '');
+const StyledQuestionRadioInput = styled.input.withConfig({
+  componentId: "sc-cy66me-1"
+})(["flex:none;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;border-radius:50%;width:1.25rem;height:1.25rem;margin-right:0.875rem;border:2px solid ", ";", ""], ({
+  checked,
+  status
+}) => {
+  switch (status) {
+    case 'correct':
+      return base.color.green9;
+
+    case 'wrong':
+      return base.color.red9;
+
+    default:
+      return checked ? base.color.primary6 : base.color.gray3;
+  }
+}, ({
+  status,
+  checked
+}) => {
+  let bgColor;
+
+  switch (status) {
+    case 'correct':
+      bgColor = base.color.green9;
+      break;
+
+    case 'wrong':
+      bgColor = base.color.red9;
+      break;
+
+    default:
+      bgColor = checked ? base.color.primary6 : status ? base.color.gray3 : 'transparent';
+      break;
+  }
+
+  return `
+          &:after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 70%;
+            height: 70%;
+            border-radius: 50%;
+            background-color: ${bgColor};
+          }
+        `;
+});
+const StyledLabel = styled.label.withConfig({
+  componentId: "sc-cy66me-2"
+})(["word-break:break-all;margin-right:0.875rem;font-size:", ";color:", ";& p{color:", ";}"], base.size.body3, ({
+  checked,
+  status
+}) => {
+  switch (status) {
+    case 'correct':
+      return base.color.green9;
+
+    case 'wrong':
+      return base.color.red9;
+
+    default:
+      return checked ? base.color.primary6 : base.color.navy0;
+  }
+}, ({
+  checked,
+  status
+}) => {
+  switch (status) {
+    case 'correct':
+      return base.color.green9;
+
+    case 'wrong':
+      return base.color.red9;
+
+    default:
+      return checked ? base.color.primary6 : base.color.navy0;
+  }
+});
+const QuestionRadioOption = React.memo(({
+  value,
+  status,
+  isAnswer,
+  children
+}) => {
+  const {
+    selectedValue,
+    disabled,
+    onSelect
+  } = useQuestionRadioContext();
+  return React.createElement(StyledQuestionRadioOption, {
+    isAnswer: isAnswer,
+    disabled: disabled,
+    checked: selectedValue === value,
+    onClick: e => {
+      e.preventDefault();
+
+      if (disabled) {
+        return;
+      }
+
+      onSelect(value);
+    },
+    status: status
+  }, React.createElement(StyledQuestionRadioInput, {
+    id: value,
+    type: "radio",
+    readOnly: true,
+    checked: selectedValue === value,
+    status: status
+  }), React.createElement(StyledLabel, {
+    htmlFor: value,
+    checked: selectedValue === value,
+    status: status
+  }, children));
+});
+
+export { QuestionRadioOption as default };

package/es/helpers/index.d.ts

@@ -0,0 +1,50 @@
+import type { GetOrgLectureGetResponses, GetOrgMaterialQuizGetResponses, GetOrgMaterialQuizResponseGetResponses } from '@elice/types';
+import type { QuizOptionType } from '@elice/types/es/enums';
+interface OptionInfo {
+    content: string;
+    optionType: QuizOptionType;
+    answerIsSelected?: boolean;
+}
+interface AnswerInfo {
+    optionIdent: string;
+    text: string | null;
+    order: number | null;
+    isSelected: boolean;
+}
+export declare type Option = OptionInfo & Omit<AnswerInfo, 'optionIdent'>;
+export declare type OptionList = Option[];
+export declare function mergeOptionAndAnswerInfoList(materialQuiz: GetOrgMaterialQuizGetResponses['materialQuiz'], materialQuizResponse?: GetOrgMaterialQuizResponseGetResponses['quizResponse']): OptionList;
+export declare enum QuizResultStatus {
+    Correct = 0,
+    Wrong = 1,
+    Submitted = 2,
+    WrongNotSubmitted = 3,
+    NotSubmitted = 4
+}
+export declare function getQuizResultStatus(materialQuizResponse?: GetOrgMaterialQuizResponseGetResponses['quizResponse']): QuizResultStatus.Correct | QuizResultStatus.Wrong | QuizResultStatus.Submitted | QuizResultStatus.NotSubmitted;
+export declare const getOptionStatus: ({ isSelected, isActive, materialQuizResponse, }: {
+    isSelected: boolean;
+    isActive: boolean;
+    materialQuizResponse?: {
+        id: number;
+        answer: string | number[];
+        score: number | null;
+        autoScore: number | null;
+        manualScore: number | null;
+        isCompleted: boolean | null;
+        createdDatetime: number;
+        user: {
+            firstname: string;
+            fullname: string;
+            id: number;
+            lastname: "";
+            profileUrl: string | null;
+        };
+    } | undefined;
+}) => "correct" | "wrong" | undefined;
+export declare function checkUserLectureTestEnded(lecture?: GetOrgLectureGetResponses['lecture']): boolean;
+export declare function shouldResetOptions({ materialQuizResponse, }: {
+    materialQuizResponse?: GetOrgMaterialQuizResponseGetResponses['quizResponse'];
+}): boolean;
+export declare function getQuizResult(materialQuizResponse: GetOrgMaterialQuizResponseGetResponses['quizResponse']): boolean | undefined;
+export {};

package/es/helpers/index.js

@@ -0,0 +1,78 @@
+import { enums } from '@elice/types';
+
+var QuizResultStatus;
+
+(function (QuizResultStatus) {
+  QuizResultStatus[QuizResultStatus["Correct"] = 0] = "Correct";
+  QuizResultStatus[QuizResultStatus["Wrong"] = 1] = "Wrong";
+  QuizResultStatus[QuizResultStatus["Submitted"] = 2] = "Submitted";
+  QuizResultStatus[QuizResultStatus["WrongNotSubmitted"] = 3] = "WrongNotSubmitted";
+  QuizResultStatus[QuizResultStatus["NotSubmitted"] = 4] = "NotSubmitted";
+})(QuizResultStatus || (QuizResultStatus = {}));
+
+function getQuizResultStatus(materialQuizResponse) {
+  if (materialQuizResponse && materialQuizResponse.isCompleted === true) {
+    return QuizResultStatus.Correct;
+  }
+
+  if (materialQuizResponse && materialQuizResponse.isCompleted === false) {
+    return QuizResultStatus.Wrong;
+  }
+
+  if (materialQuizResponse) {
+    return QuizResultStatus.Submitted;
+  }
+
+  return QuizResultStatus.NotSubmitted;
+}
+const getOptionStatus = ({
+  isSelected,
+  isActive,
+  materialQuizResponse
+}) => {
+  const status = getQuizResultStatus(materialQuizResponse);
+
+  if (isActive) {
+    return;
+  }
+
+  if (isSelected) {
+    if (status === QuizResultStatus.Correct) {
+      return 'correct';
+    }
+
+    if (status === QuizResultStatus.Wrong) {
+      return 'wrong';
+    }
+  }
+
+  return;
+};
+function checkUserLectureTestEnded(lecture) {
+  return (lecture === null || lecture === void 0 ? void 0 : lecture.testAdmissionStatus) === enums.TestAdmissionStatus.Completed;
+}
+function shouldResetOptions({
+  materialQuizResponse
+}) {
+  // when score is given(correct, wrong), reset selected option in order to select options from scratch
+  // score condition
+  // normal quiz - score is always given(not a null) as long as a user submits the answer
+  // test quiz - score is given if a user finishes test and "lecture.isTestScoreOpened(성적공개)" is valid
+  return [(materialQuizResponse === null || materialQuizResponse === void 0 ? void 0 : materialQuizResponse.score) !== null].every(Boolean);
+}
+function getQuizResult(materialQuizResponse) {
+  const status = getQuizResultStatus(materialQuizResponse);
+
+  switch (status) {
+    case QuizResultStatus.Correct:
+      return true;
+
+    case QuizResultStatus.Wrong:
+      return false;
+
+    default:
+      return;
+  }
+}
+
+export { QuizResultStatus, checkUserLectureTestEnded, getOptionStatus, getQuizResult, getQuizResultStatus, shouldResetOptions };

package/es/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components/material-quiz';
+export * from './components/material-quiz-edit';
+export * from './components/shared';

package/es/index.js

@@ -0,0 +1,10 @@
+export { default as MaterialQuiz } from './components/material-quiz/MaterialQuiz.js';
+export { default as MaterialQuizInfo } from './components/material-quiz/MaterialQuizInfo.js';
+export { default as MaterialQuizEdit } from './components/material-quiz-edit/MaterialQuizEdit.js';
+export { default as QuizDraggbleDroppedOption } from './components/shared/QuizDraggbleDroppedOption.js';
+export { default as QuizDraggbleDummyOption } from './components/shared/QuizDraggbleDummyOption.js';
+export { default as QuizDraggbleOption } from './components/shared/QuizDraggbleOption.js';
+export { default as QuestionRadio } from './components/shared/question-radio/QuestionRadio.js';
+export { default as QuestionRadioOption } from './components/shared/question-radio/QuestionRadioOption.js';
+export { default as QuestionCheckbox } from './components/shared/question-checkbox/QuestionCheckbox.js';
+export { default as QuestionCheckboxOption } from './components/shared/question-checkbox/QuestionCheckboxOption.js';

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@elice/material-quiz",
+  "version": "1.220803.0",
+  "description": "User view and editing components of Elice material quiz",
+  "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
+  "license": "UNLICENSED",
+  "main": "./cjs/index.js",
+  "module": "./es/index.js",
+  "types": "./es/index.d.ts",
+  "files": [
+    "es",
+    "cjs",
+    "package.json",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "engines": {
+    "node": "~16.14",
+    "yarn": ">=1.20 <2"
+  },
+  "scripts": {
+    "start": "run-s watch",
+    "prebuild": "run-s clean",
+    "build": "run-p build:es build:cjs",
+    "build:es": "rollup -c ../../rollup.config.ts -f es",
+    "build:cjs": "rollup -c ../../rollup.config.ts -f cjs",
+    "watch": "rollup -c ../../rollup.config.ts -f es -w",
+    "lint": "eslint --ext .ts,.tsx ./src --max-warnings=0",
+    "clean": "del-cli \"es/*\" \"cjs/*\" \"dist/*\""
+  },
+  "peerDependencies": {
+    "@elice/api-client": "^1.220802.1",
+    "@elice/blocks": "^1.220803.0",
+    "@elice/design-tokens": "^1.220803.0",
+    "@elice/icons": "^1.220803.0",
+    "@elice/markdown": "^1.220803.0",
+    "@elice/material-shared-types": "22.7.2-1",
+    "@elice/material-shared-utils": "22.7.2-1",
+    "@elice/types": "^1.220802.1",
+    "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
+    "react-intl": "^5.0.0",
+    "react-use": "^17.0.0",
+    "styled-components": "^5.2.0"
+  },
+  "dependencies": {
+    "classnames": "^2.2.0",
+    "jquery": "^3.6.0",
+    "jquery-ui": "^1.13.1",
+    "react-hook-form": "~7.12.0",
+    "react-transition-group": "^4.4.0",
+    "tslib": "^2.3.1"
+  },
+  "devDependencies": {
+    "@elice/api-client": "^1.220802.1",
+    "@elice/blocks": "^1.220803.0",
+    "@elice/design-tokens": "^1.220803.0",
+    "@elice/icons": "^1.220803.0",
+    "@elice/icons-legacy": "npm:@elice/icons@0.220803.1",
+    "@elice/markdown": "^1.220803.0",
+    "@elice/material-shared-types": "1.220803.0",
+    "@elice/material-shared-utils": "1.220803.0",
+    "@elice/types": "^1.220802.1",
+    "@types/classnames": "^2.3.1",
+    "@types/jquery": "^3.5.13",
+    "@types/jqueryui": "^1.12.16",
+    "@types/react": "~17.0.9",
+    "@types/react-transition-group": "^4.4.4",
+    "@types/styled-components": "^5.1.21",
+    "react": "^17.0.2",
+    "react-intl": "^5.20.10",
+    "react-use": "^17.2.4",
+    "styled-components": "^5.3.0"
+  },
+  "gitHead": "21c6b42ae6550e7899c57bf39fa78cea0f47e64c"
+}