quiz

2023-11-21 17:46:57 +03:00 · 2023-11-21 17:46:57 +03:00 · b0c9884fe4
commit b0c9884fe4
parent ec7d0716b3
9 changed files with 217 additions and 195 deletions
--- a/src/components/features/quiz/CardAviableTest.jsx
+++ b/src/components/features/quiz/CardAviableTest.jsx
@ -12,10 +12,12 @@ export const CardAvailableTest = ({ title, description, path, status }) => {
        to={`/${path}`}
        aria-disabled={true}
        className="card-available-test__container"
-        style={{
-          // opacity: status !== 1 ? 0.3 : 1,
-          // pointerEvents: status !== 1 ? "none" : "all",
-        }}
+        style={
+          {
+            // opacity: status !== 1 ? 0.3 : 1,
+            // pointerEvents: status !== 1 ? "none" : "all",
+          }
+        }
      >
        <div className="card-available-test__top-head">
          <StarRating />
--- a/src/components/features/quiz/GetOptionTask.jsx
+++ b/src/components/features/quiz/GetOptionTask.jsx
@ -1,7 +1,7 @@
 import React from "react";

 export const GetOptionTask = ({ type, answer, handleChange }) => {
-  const {answer_body,id} = answer
+  const { answer_body, id } = answer;
  return (
    <div className="form-task__group" key={id}>
      <input
--- a/src/components/features/quiz/HeaderQuiz.jsx
+++ b/src/components/features/quiz/HeaderQuiz.jsx
@ -13,7 +13,6 @@ export const HeaderQuiz = ({ header }) => {
  const userId = localStorage.getItem("id");
  const userInfo = useSelector(selectUserInfo);

-
  return (
    <div>
      {userInfo?.status === 500 ? (
--- a/src/components/features/quiz/Quiz-passing-information.jsx
+++ b/src/components/features/quiz/Quiz-passing-information.jsx
@ -1,68 +1,72 @@
+import moment from "moment";
 import React, { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { setQuestions } from "@redux/quizSlice";
-import StarRating from "@components/StarRating/StarRating";
-import accempt from "assets/images/quiz/accempt.png";
-import iconTomer from "assets/images/quiz/timer.png";
-import { apiRequest } from "@api/request";
-import moment from "moment";
 import { useNavigate } from "react-router-dom";
+
+import { setQuestions } from "@redux/quizSlice";
+
+import { apiRequest } from "@api/request";
+
 import { useNotification } from "@hooks/useNotification";

-export const QuizPassingInformation = ({ setStartTest, uuid, timer }) => {
+import StarRating from "@components/StarRating/StarRating";

+import accempt from "assets/images/quiz/accempt.png";
+import iconTomer from "assets/images/quiz/timer.png";
+
+export const QuizPassingInformation = ({ setStartTest, uuid, timer }) => {
  const { restart, pause, hours, minutes, seconds, isRunning } = timer;
  const navigate = useNavigate();
  const { showNotification } = useNotification();
  const dispatch = useDispatch();

  const startTesting = () => {
-    apiRequest(
-      `/question/get-questions?uuid=${uuid}`
-    )
+    apiRequest(`/question/get-questions?uuid=${uuid}`)
      .then((res) => {
        if (res.status === 400) {
          dispatch(setQuestions(null));
          showNotification({
            show: true,
            text: res?.message || "",
-            type: "error"
+            type: "error",
          });
          return;
        }
        dispatch(setQuestions(res));
        setStartTest(true);
-        restart(moment()
-          .add(res[0]?.time_limit.split(":")[0], "hours")
-          .add(res[0]?.time_limit.split(":")[1], "minutes")
-          .add(res[0]?.time_limit.split(":")[2], "seconds"), true);
+        restart(
+          moment()
+            .add(res[0]?.time_limit.split(":")[0], "hours")
+            .add(res[0]?.time_limit.split(":")[1], "minutes")
+            .add(res[0]?.time_limit.split(":")[2], "seconds"),
+          true
+        );
      })
-      .catch(e => {
+      .catch((e) => {
        dispatch(setQuestions(null));
      });
  };

+  const checkTest = () =>
+    apiRequest(
+      `user-questionnaire/questionnaire-completed?user_questionnaire_uuid=${uuid}`
+    );

-  const checkTest = () => apiRequest(
-    `user-questionnaire/questionnaire-completed?user_questionnaire_uuid=${uuid}`
-  );
-
-  const completeTest = () => apiRequest(
-    "/user-questionnaire/questionnaire-completed", {
-      method: "POST"
+  const completeTest = () =>
+    apiRequest("/user-questionnaire/questionnaire-completed", {
+      method: "POST",
    });

  const finishQuiz = async () => {
    Promise.all([checkTest, completeTest])
-      .then(function() {
+      .then(function () {
        pause();
      })
-      .catch(e => {
+      .catch((e) => {
        console.log(e);
      });
  };

-
  return (
    <div className="quiz-passing-information">
      <div className="quiz-passing-information__container">
@ -79,33 +83,36 @@ export const QuizPassingInformation = ({ setStartTest, uuid, timer }) => {
              разработчик
            </div>
          </div>
-          {isRunning && <div className="quiz-passing-information__timer timer-quiz">
-            <div className="quiz-passing-information__icon">
-              <img src={iconTomer} alt="" />
+          {isRunning && (
+            <div className="quiz-passing-information__timer timer-quiz">
+              <div className="quiz-passing-information__icon">
+                <img src={iconTomer} alt="" />
+              </div>
+              <div className="quiz-passing-information__text">
+                Время на прохождение теста:
+                <br />
+                <span>
+                  {hours.toString().padStart(2, "0") +
+                    ":" +
+                    minutes.toString().padStart(2, "0") +
+                    ":" +
+                    seconds.toString().padStart(2, "0")}
+                  секунд
+                </span>
+              </div>
            </div>
-            <div className="quiz-passing-information__text">
-              Время на прохождение теста:
-              <br />
-              <span>
-                {hours.toString().padStart(2, "0") +
-                  ":" +
-                  minutes.toString().padStart(2, "0") +
-                  ":" +
-                  seconds.toString().padStart(2, "0")
-                }
-                секунд
-              </span>
+          )}
+          {!isRunning && (
+            <div className="quiz-passing-information__attempt">
+              <div className="quiz-passing-information__icon">
+                <img src={accempt} alt="" />
+              </div>
+              <div className="quiz-passing-information__text">
+                Попыток прохождения: <br />
+                <span>1 попытка</span>
+              </div>
            </div>
-          </div>}
-          {!isRunning && <div className="quiz-passing-information__attempt">
-            <div className="quiz-passing-information__icon">
-              <img src={accempt} alt="" />
-            </div>
-            <div className="quiz-passing-information__text">
-              Попыток прохождения: <br />
-              <span>1 попытка</span>
-            </div>
-          </div>}
+          )}
          <div>
            {!isRunning && (
              <button
@ -116,8 +123,14 @@ export const QuizPassingInformation = ({ setStartTest, uuid, timer }) => {
              </button>
            )}
          </div>
-          {isRunning &&
-            <button className="quiz-passing-information__button quiz-btn" onClick={finishQuiz}>Завершить</button>}
+          {isRunning && (
+            <button
+              className="quiz-passing-information__button quiz-btn"
+              onClick={finishQuiz}
+            >
+              Завершить
+            </button>
+          )}
        </div>
      </div>
    </div>
--- a/src/components/features/quiz/Task.js
+++ b/src/components/features/quiz/Task.js
@ -1,18 +1,23 @@
+import moment from "moment";
 import React, { useState } from "react";
 import { useSelector } from "react-redux";
-import { questionsSelector } from "@redux/quizSlice";
-import questionIcon from "assets/images/question.png";
-import { GetOptionTask } from "./GetOptionTask";
-import "./quiz.scss";
-import { useHandlerFieldTest } from "@hooks/useHandlerFieldTest";
 import { useParams } from "react-router-dom";
-import moment from "moment";
-import { Loader } from "@components/Common/Loader/Loader";
+
+import { questionsSelector } from "@redux/quizSlice";
+
 import { apiRequest } from "@api/request";
+
+import { useHandlerFieldTest } from "@hooks/useHandlerFieldTest";
 import { useNotification } from "@hooks/useNotification";

-export const TaskQuiz = ({ timer }) => {
+import { Loader } from "@components/Common/Loader/Loader";

+import questionIcon from "assets/images/question.png";
+
+import { GetOptionTask } from "./GetOptionTask";
+import "./quiz.scss";
+
+export const TaskQuiz = ({ timer }) => {
  const { restart } = timer;
  const { uuid } = useParams();
  const questions = useSelector(questionsSelector);
@ -23,13 +28,13 @@ export const TaskQuiz = ({ timer }) => {
  const { values, handleChange, setValues } = useHandlerFieldTest({
    uuid,
    questions,
-    indexQuestion: index
+    indexQuestion: index,
  });

  const nextQuestion = async (e) => {
    e.preventDefault();
    //Проверка на существование овтетов
-    if (!(values.length)) {
+    if (!values.length) {
      alert("Вы не ответили на вопрос");
      return;
    }
@ -38,16 +43,16 @@ export const TaskQuiz = ({ timer }) => {
    setLoadingSendAnswers(true);
    await apiRequest(`/user-response/set-responses`, {
      method: "POST",
-      data: values
+      data: values,
    })
-      .then(res => {
+      .then((res) => {
        if (String(res?.status)[0] !== "2") {
          showNotification({
            show: true,
            text: res?.message || "",
-            type: "error"
+            type: "error",
          });
-          return
+          return;
        }

        if (index === questions.length - 1) return;
@ -59,11 +64,11 @@ export const TaskQuiz = ({ timer }) => {
        setIndex((prev) => prev + 1);
        setValues([]);
      })
-      .catch(e => {
+      .catch((e) => {
        showNotification({
          show: true,
          text: e?.message || "",
-          type: "error"
+          type: "error",
        });
      })
      .finally(() => setLoadingSendAnswers(false));
@ -76,63 +81,71 @@ export const TaskQuiz = ({ timer }) => {

  const setValueTimer = () => {
    const time_limit = questions[index + 1].time_limit.split(":");
-    restart(moment()
-      .add(time_limit[0], "hours")
-      .add(time_limit[1], "minutes")
-      .add(time_limit[2], "seconds"));
+    restart(
+      moment()
+        .add(time_limit[0], "hours")
+        .add(time_limit[1], "minutes")
+        .add(time_limit[2], "seconds")
+    );
  };

  console.log(questions);
  return (
    <div className="task">
-      {
-        questions ?
-          <div className="task__container">
-            <div className="task__header">
-              <img src={questionIcon} alt="questionIcon" />
-              <h3 className="task__title quiz-title_h3">
-                {questions[index].question_body}
-              </h3>
-            </div>
-            <div className="task__body">
-              <form className="task__form form-task"
-                    onSubmit={index !== questions.length - 1 ? nextQuestion : complete}>
-                {
-                  questions[index].question_type_id === 1 ?
-                    <div className="form-task__group">
-                    <textarea
-                      className="form-task__field"
-                      value={values[0]?.response_body}
-                      onChange={handleChange}
-                    />
-                    </div>
-                    : questions[index]?.answers?.map((answer) => (
-                      <GetOptionTask
-                        key={answer.id}
-                        type={questions[index].question_type_id}
-                        handleChange={handleChange}
-                        answer={answer}
-                      />
-                    ))
-                }
-                <div className="form-task__buttons">
-                  <button
-                    onClick={nextQuestion}
-                    disabled={isLoadingSendAnswers}
-                    className="form-task__btn quiz-btn"
-                  >
-                    {isLoadingSendAnswers ? <Loader width={25} height={25} />
-                      : (index !== questions.length - 1 ? "Далее" : "Завершить")
-                    }
-                  </button>
-                </div>
-              </form>
-            </div>
+      {questions ? (
+        <div className="task__container">
+          <div className="task__header">
+            <img src={questionIcon} alt="questionIcon" />
+            <h3 className="task__title quiz-title_h3">
+              {questions[index].question_body}
+            </h3>
          </div>
-          :
-          <h1>ОШибка</h1>
-      }
-
+          <div className="task__body">
+            <form
+              className="task__form form-task"
+              onSubmit={
+                index !== questions.length - 1 ? nextQuestion : complete
+              }
+            >
+              {questions[index].question_type_id === 1 ? (
+                <div className="form-task__group">
+                  <textarea
+                    className="form-task__field"
+                    value={values[0]?.response_body}
+                    onChange={handleChange}
+                  />
+                </div>
+              ) : (
+                questions[index]?.answers?.map((answer) => (
+                  <GetOptionTask
+                    key={answer.id}
+                    type={questions[index].question_type_id}
+                    handleChange={handleChange}
+                    answer={answer}
+                  />
+                ))
+              )}
+              <div className="form-task__buttons">
+                <button
+                  onClick={nextQuestion}
+                  disabled={isLoadingSendAnswers}
+                  className="form-task__btn quiz-btn"
+                >
+                  {isLoadingSendAnswers ? (
+                    <Loader width={25} height={25} />
+                  ) : index !== questions.length - 1 ? (
+                    "Далее"
+                  ) : (
+                    "Завершить"
+                  )}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      ) : (
+        <h1>ОШибка</h1>
+      )}
    </div>
  );
 };
--- a/src/hooks/useHandlerFieldTest.js
+++ b/src/hooks/useHandlerFieldTest.js
@ -1,40 +1,42 @@
 import { useState } from "react";

-export const useHandlerFieldTest = ({uuid,questions,indexQuestion}) => {
-  const [values, setValues] = useState([])
+export const useHandlerFieldTest = ({ uuid, questions, indexQuestion }) => {
+  const [values, setValues] = useState([]);
  const id = localStorage.getItem("id");
  const handleChangeCheckbox = (e) => {
    if (!e.target.checked) {
      setValues((prev) => [
-        ...prev.filter((item) => item.response_body !== e.target.value)
+        ...prev.filter((item) => item.response_body !== e.target.value),
      ]);
      return;
    }
    setValues((prev) => [
-      ...prev, {
+      ...prev,
+      {
        user_id: id,
        user_questionnaire_uuid: uuid,
        question_id: questions[indexQuestion].id,
-        response_body: e.target.value
-      }
+        response_body: e.target.value,
+      },
    ]);
  };

  const handleFieldsForm = (e) => {
-    setValues([{
-      user_id: id,
-      user_questionnaire_uuid: uuid,
-      question_id: questions[indexQuestion].id,
-      response_body: e.target.value
-    }
+    setValues([
+      {
+        user_id: id,
+        user_questionnaire_uuid: uuid,
+        question_id: questions[indexQuestion].id,
+        response_body: e.target.value,
+      },
    ]);
-  }
+  };
  const handleChange = (e) => {
    if (+questions[indexQuestion].question_type_id !== 3) {
-      handleFieldsForm(e)
+      handleFieldsForm(e);
      return;
    }
-    handleChangeCheckbox(e)
+    handleChangeCheckbox(e);
  };
-  return {handleChange,values,setValues}
-}
+  return { handleChange, values, setValues };
+};
--- a/src/pages/quiz/PassingTests.js
+++ b/src/pages/quiz/PassingTests.js
@ -1,7 +1,11 @@
+import moment from "moment";
 import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { Link, useNavigate, useParams } from "react-router-dom";
+import { useTimer } from "react-timer-hook";
+
 import { completedTestSelector } from "@redux/quizSlice";
+
 import { Footer } from "@components/Common/Footer/Footer";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
@ -10,32 +14,29 @@ import { BlockCompletedTest } from "@components/features/quiz/BlockCompletedTest
 import { CardIntroduction } from "@components/features/quiz/Card-introduction";
 import { QuizPassingInformation } from "@components/features/quiz/Quiz-passing-information";
 import { TaskQuiz } from "@components/features/quiz/Task";
-import { useTimer } from "react-timer-hook";
-import moment from "moment";

 export const PassingTests = () => {
-
  const [startTest, setStartTest] = useState(false);
-  const navigate = useNavigate()
+  const navigate = useNavigate();
  const completedTest = useSelector(completedTestSelector);
-  const { uuid } = useParams()
+  const { uuid } = useParams();

  const timer = useTimer({
    expiryTimestamp: moment(),
    autoStart: false,
    onExpire: () => {
-     navigate("/quiz")
-    }
+      navigate("/quiz");
+    },
  });

  const onCloseWindow = (e) => {
    e.preventDefault();
-    if(startTest){
-      let confirmationMessage = "\o/";
+    if (startTest) {
+      let confirmationMessage = "o/";
      (e || window.e).returnValue = confirmationMessage;
      return confirmationMessage;
    }
-  }
+  };

  const introduction = [
    {
@ -56,21 +57,23 @@ export const PassingTests = () => {
  ];

  function onSwitchTab(e) {
-    console.log(e,document.visibilityState);
+    console.log(e, document.visibilityState);
    if (document.visibilityState === "hidden" && startTest) {
-      alert("Убедительная просьба не покидать страницу и не переключаться. Рассчитывайте только на свои знания и умения!!!")
+      alert(
+        "Убедительная просьба не покидать страницу и не переключаться. Рассчитывайте только на свои знания и умения!!!"
+      );
    }
  }

-  useEffect(()=>{
+  useEffect(() => {
    window.addEventListener("beforeunload", onCloseWindow);
    window.addEventListener("visibilitychange", onSwitchTab);
-    window.onblur = onSwitchTab
+    window.onblur = onSwitchTab;
    return () => {
      window.removeEventListener("beforeunload", onCloseWindow);
      window.removeEventListener("visibilitychange", onSwitchTab);
-    }
-  }, [startTest])
+    };
+  }, [startTest]);

  return (
    <div className="passing-tests-page">
@ -103,7 +106,7 @@ export const PassingTests = () => {
              </div>
            )}
            {startTest ? (
-              <TaskQuiz timer={timer}/>
+              <TaskQuiz timer={timer} />
            ) : (
              <div className="passing-tests-page__introduction">
                {introduction.map((item, i) => (
@ -141,5 +144,3 @@ export const PassingTests = () => {
    </div>
  );
 };
-
-
--- a/src/pages/quiz/QuizPage.js
+++ b/src/pages/quiz/QuizPage.js
@ -27,7 +27,7 @@ import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
 import "./quiz-page.scss";

 export const QuizPage = () => {
-  const [questionnaires,setQuestionnaires] = useState([]);
+  const [questionnaires, setQuestionnaires] = useState([]);
  const dispatch = useDispatch();
  const [personalInfoItems] = useState([
    {
@ -36,7 +36,7 @@ export const QuizPage = () => {
      description:
        "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
      available: true,
-      img: BackEndImg
+      img: BackEndImg,
    },
    {
      title: "Frontend разработчики",
@ -44,14 +44,14 @@ export const QuizPage = () => {
      description:
        "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
      available: true,
-      img: FrontendImg
+      img: FrontendImg,
    },
    {
      title: "Архитектура проектов",
      link: "/registration-candidate",
      description: "Потоки данных ER ERP CRM CQRS UML BPMN",
      available: true,
-      img: ArchitectureImg
+      img: ArchitectureImg,
    },
    {
      title: "Дизайн проектов",
@ -59,35 +59,35 @@ export const QuizPage = () => {
      description:
        "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
      available: true,
-      img: DesignImg
+      img: DesignImg,
    },
    {
      title: "Тестирование проектов",
      link: "/registration-candidate",
      description: "SQL Postman TestRail Kibana Ручное тестирование",
      available: false,
-      img: TestImg
+      img: TestImg,
    },
    {
      title: "Администрирование проектов",
      link: "/registration-candidate",
      description: "DevOps ELK Kubernetes Docker Bash Apache Oracle Git",
      available: false,
-      img: AdminImg
+      img: AdminImg,
    },
    {
      title: "Управление проектом",
      link: "/registration-candidate",
      description: "Scrum Kanban Agile Miro CustDev",
      available: false,
-      img: ManageImg
+      img: ManageImg,
    },
    {
      title: "Копирайтинг проектов",
      link: "/registration-candidate",
      description: "Теги Заголовок H1 Дескриптор Абзац Сценарий",
      available: false,
-      img: CopyImg
+      img: CopyImg,
    },
    {
      title: "Реклама и SMM",
@ -95,18 +95,16 @@ export const QuizPage = () => {
      description:
        "Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
      available: false,
-      img: SmmImg
-    }
+      img: SmmImg,
+    },
  ]);
  const userId = localStorage.getItem("id");
  const [selectedCategory, setSetSelectedCategory] = useState(false);

  useEffect(() => {
-    apiRequest(
-      `/user-questionnaire/questionnaires-list?user_id=${userId}`
-    )
-      .then(res => setQuestionnaires(res))
-      .catch(e => console.log(e));
+    apiRequest(`/user-questionnaire/questionnaires-list?user_id=${userId}`)
+      .then((res) => setQuestionnaires(res))
+      .catch((e) => console.log(e));
  }, []);

  return (
@ -117,7 +115,7 @@ export const QuizPage = () => {
        <ProfileBreadcrumbs
          links={[
            { name: "Главная", link: "/profile-candidate" },
-            { name: "Тестирование", link: "/quiz" }
+            { name: "Тестирование", link: "/quiz" },
          ]}
        />
        <div className="quiz-page__title main-title">
--- a/src/redux/quizSlice.js
+++ b/src/redux/quizSlice.js
@ -1,7 +1,7 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import moment from "moment";

 import { apiRequest } from "@api/request";
-import moment from "moment";

 const initialState = {
  questions: null,
@ -11,12 +11,10 @@ const initialState = {
  result: null,
 };

-export const fetchResultTest = createAsyncThunk(
-  "result",
-  (uuid) =>
-    apiRequest(
-      `/user-questionnaire/questionnaire-completed?user_questionnaire_uuid=${uuid}`
-    )
+export const fetchResultTest = createAsyncThunk("result", (uuid) =>
+  apiRequest(
+    `/user-questionnaire/questionnaire-completed?user_questionnaire_uuid=${uuid}`
+  )
 );

 export const quizSlice = createSlice({
@ -28,19 +26,16 @@ export const quizSlice = createSlice({
    },
    setCompleteTest: (state) => {
      state.completedTest = true;
-    }
+    },
  },
  extraReducers: {
    [fetchResultTest.fulfilled]: (state, action) => {
      state.result = action.payload;
-    }
-  }
+    },
+  },
 });

-export const {
-  setQuestions,
-} = quizSlice.actions;
-
+export const { setQuestions } = quizSlice.actions;

 export const questionnairesSelector = (state) => state.quiz.questionnaires;
 export const questionsSelector = (state) => state.quiz.questions;
@ -49,5 +44,4 @@ export const completedTestSelector = (state) => state.quiz.completedTest;
 export const selectResult = (state) => state.quiz.result;
 export const selectedTest = (state) => state.quiz.selectedTest;

-
 export default quizSlice.reducer;