quiz

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={{
+        style={
+          {
             // opacity: status !== 1 ? 0.3 : 1,
             // pointerEvents: status !== 1 ? "none" : "all",
-        }}
+          }
+        }
       >
         <div className="card-available-test__top-head">
           <StarRating />

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

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 ? (

src/components/features/quiz/Quiz-passing-information.jsx

@@ -1,55 +1,60 @@
+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(
+    apiRequest(`/question/get-questions?uuid=${uuid}`)
-      `/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()
+        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);
+            .add(res[0]?.time_limit.split(":")[2], "seconds"),
+          true
+        );
       })
-      .catch(e => {
+      .catch((e) => {
         dispatch(setQuestions(null));
       });
   };
 
-
+  const checkTest = () =>
-  const checkTest = () => apiRequest(
+    apiRequest(
       `user-questionnaire/questionnaire-completed?user_questionnaire_uuid=${uuid}`
     );
 
-  const completeTest = () => apiRequest(
+  const completeTest = () =>
-    "/user-questionnaire/questionnaire-completed", {
+    apiRequest("/user-questionnaire/questionnaire-completed", {
-      method: "POST"
+      method: "POST",
     });
 
   const finishQuiz = async () => {
@@ -57,12 +62,11 @@ export const QuizPassingInformation = ({ setStartTest, uuid, timer }) => {
       .then(function () {
         pause();
       })
-      .catch(e => {
+      .catch((e) => {
         console.log(e);
       });
   };
 
-
   return (
     <div className="quiz-passing-information">
       <div className="quiz-passing-information__container">
@@ -79,7 +83,8 @@ export const QuizPassingInformation = ({ setStartTest, uuid, timer }) => {
               разработчик
             </div>
           </div>
-          {isRunning && <div className="quiz-passing-information__timer timer-quiz">
+          {isRunning && (
+            <div className="quiz-passing-information__timer timer-quiz">
               <div className="quiz-passing-information__icon">
                 <img src={iconTomer} alt="" />
               </div>
@@ -91,13 +96,14 @@ export const QuizPassingInformation = ({ setStartTest, uuid, timer }) => {
                     ":" +
                     minutes.toString().padStart(2, "0") +
                     ":" +
-                  seconds.toString().padStart(2, "0")
+                    seconds.toString().padStart(2, "0")}
-                }
                   секунд
                 </span>
               </div>
-          </div>}
+            </div>
-          {!isRunning && <div className="quiz-passing-information__attempt">
+          )}
+          {!isRunning && (
+            <div className="quiz-passing-information__attempt">
               <div className="quiz-passing-information__icon">
                 <img src={accempt} alt="" />
               </div>
@@ -105,7 +111,8 @@ export const QuizPassingInformation = ({ setStartTest, uuid, timer }) => {
                 Попыток прохождения: <br />
                 <span>1 попытка</span>
               </div>
-          </div>}
+            </div>
+          )}
           <div>
             {!isRunning && (
               <button
@@ -116,8 +123,14 @@ export const QuizPassingInformation = ({ setStartTest, uuid, timer }) => {
               </button>
             )}
           </div>
-          {isRunning &&
+          {isRunning && (
-            <button className="quiz-passing-information__button quiz-btn" onClick={finishQuiz}>Завершить</button>}
+            <button
+              className="quiz-passing-information__button quiz-btn"
+              onClick={finishQuiz}
+            >
+              Завершить
+            </button>
+          )}
         </div>
       </div>
     </div>

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,17 +81,18 @@ export const TaskQuiz = ({ timer }) => {
 
   const setValueTimer = () => {
     const time_limit = questions[index + 1].time_limit.split(":");
-    restart(moment()
+    restart(
+      moment()
         .add(time_limit[0], "hours")
         .add(time_limit[1], "minutes")
-      .add(time_limit[2], "seconds"));
+        .add(time_limit[2], "seconds")
+    );
   };
 
   console.log(questions);
   return (
     <div className="task">
-      {
+      {questions ? (
-        questions ?
         <div className="task__container">
           <div className="task__header">
             <img src={questionIcon} alt="questionIcon" />
@@ -95,10 +101,13 @@ export const TaskQuiz = ({ timer }) => {
             </h3>
           </div>
           <div className="task__body">
-              <form className="task__form form-task"
+            <form
-                    onSubmit={index !== questions.length - 1 ? nextQuestion : complete}>
+              className="task__form form-task"
-                {
+              onSubmit={
-                  questions[index].question_type_id === 1 ?
+                index !== questions.length - 1 ? nextQuestion : complete
+              }
+            >
+              {questions[index].question_type_id === 1 ? (
                 <div className="form-task__group">
                   <textarea
                     className="form-task__field"
@@ -106,7 +115,8 @@ export const TaskQuiz = ({ timer }) => {
                     onChange={handleChange}
                   />
                 </div>
-                    : questions[index]?.answers?.map((answer) => (
+              ) : (
+                questions[index]?.answers?.map((answer) => (
                   <GetOptionTask
                     key={answer.id}
                     type={questions[index].question_type_id}
@@ -114,25 +124,28 @@ export const TaskQuiz = ({ timer }) => {
                     answer={answer}
                   />
                 ))
-                }
+              )}
               <div className="form-task__buttons">
                 <button
                   onClick={nextQuestion}
                   disabled={isLoadingSendAnswers}
                   className="form-task__btn quiz-btn"
                 >
-                    {isLoadingSendAnswers ? <Loader width={25} height={25} />
+                  {isLoadingSendAnswers ? (
-                      : (index !== questions.length - 1 ? "Далее" : "Завершить")
+                    <Loader width={25} height={25} />
-                    }
+                  ) : index !== questions.length - 1 ? (
+                    "Далее"
+                  ) : (
+                    "Завершить"
+                  )}
                 </button>
               </div>
             </form>
           </div>
         </div>
-          :
+      ) : (
         <h1>ОШибка</h1>
-      }
+      )}
-
     </div>
   );
 };

src/hooks/useHandlerFieldTest.js

@@ -1,40 +1,42 @@
 import { useState } from "react";
 
 export const useHandlerFieldTest = ({ uuid, questions, indexQuestion }) => {
-  const [values, setValues] = useState([])
+  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([{
+    setValues([
+      {
         user_id: id,
         user_questionnaire_uuid: uuid,
         question_id: questions[indexQuestion].id,
-      response_body: e.target.value
+        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}
-}

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/";
+      let confirmationMessage = "o/";
       (e || window.e).returnValue = confirmationMessage;
       return confirmationMessage;
     }
-  }
+  };
 
   const introduction = [
     {
@@ -58,19 +59,21 @@ export const PassingTests = () => {
   function onSwitchTab(e) {
     console.log(e, document.visibilityState);
     if (document.visibilityState === "hidden" && startTest) {
-      alert("Убедительная просьба не покидать страницу и не переключаться. Рассчитывайте только на свои знания и умения!!!")
+      alert(
+        "Убедительная просьба не покидать страницу и не переключаться. Рассчитывайте только на свои знания и умения!!!"
+      );
     }
   }
 
   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">
@@ -141,5 +144,3 @@ export const PassingTests = () => {
     </div>
   );
 };
-
-

src/pages/quiz/QuizPage.js

@@ -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(
+    apiRequest(`/user-questionnaire/questionnaires-list?user_id=${userId}`)
-      `/user-questionnaire/questionnaires-list?user_id=${userId}`
+      .then((res) => setQuestionnaires(res))
-    )
+      .catch((e) => console.log(e));
-      .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">

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,9 +11,7 @@ const initialState = {
   result: null,
 };
 
-export const fetchResultTest = createAsyncThunk(
+export const fetchResultTest = createAsyncThunk("result", (uuid) =>
-  "result",
-  (uuid) =>
   apiRequest(
     `/user-questionnaire/questionnaire-completed?user_questionnaire_uuid=${uuid}`
   )
@@ -28,19 +26,16 @@ export const quizSlice = createSlice({
     },
     setCompleteTest: (state) => {
       state.completedTest = true;
-    }
+    },
   },
   extraReducers: {
     [fetchResultTest.fulfilled]: (state, action) => {
       state.result = action.payload;
-    }
+    },
-  }
+  },
 });
 
-export const {
+export const { setQuestions } = quizSlice.actions;
-  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;