From ec7d0716b3fde1a309b9b36591e661e1471174f7 Mon Sep 17 00:00:00 2001
From: Dmitry220 <dmitry19.kravtsov123@gmail.com>
Date: Tue, 21 Nov 2023 17:31:22 +0300
Subject: [PATCH 1/8] quiz

---
 src/App.js                                    |   2 +-
 .../features/quiz/CardAviableTest.jsx         |  10 +-
 .../features/quiz/GetOptionTask.jsx           |  56 ++---
 src/components/features/quiz/HeaderQuiz.jsx   |  12 +-
 .../quiz/Quiz-passing-information.jsx         | 108 ++++++---
 src/components/features/quiz/Task.js          | 214 +++++++++---------
 src/hooks/useHandlerFieldTest.js              |  40 ++++
 src/pages/quiz/PassingTests.js                |  60 ++++-
 src/pages/quiz/QuizPage.js                    |  39 ++--
 src/pages/quiz/QuizReportPage.js              |   3 +-
 src/redux/quizSlice.js                        | 138 ++---------
 11 files changed, 327 insertions(+), 355 deletions(-)
 create mode 100644 src/hooks/useHandlerFieldTest.js

diff --git a/src/App.js b/src/App.js
index 6c0d0e6b..13c11653 100644
--- a/src/App.js
+++ b/src/App.js
@@ -108,7 +108,7 @@ const App = () => {
 
           <Route exact path="quiz">
             <Route index element={<QuizPage />} />
-            <Route exact path="test" element={<PassingTests />} />
+            <Route exact path="test/:uuid" element={<PassingTests />} />
             <Route exact path="report" element={<QuizReportPage />} />
           </Route>
 
diff --git a/src/components/features/quiz/CardAviableTest.jsx b/src/components/features/quiz/CardAviableTest.jsx
index 2f747792..912d7e4d 100644
--- a/src/components/features/quiz/CardAviableTest.jsx
+++ b/src/components/features/quiz/CardAviableTest.jsx
@@ -5,15 +5,16 @@ import StarRating from "@components/StarRating/StarRating";
 
 import rightArrow from "assets/icons/arrows/arrowRight.svg";
 
-export const CardAvailableTest = ({ title, description, path, passedTest }) => {
+export const CardAvailableTest = ({ title, description, path, status }) => {
   return (
     <div className="card-available-test">
       <Link
         to={`/${path}`}
+        aria-disabled={true}
         className="card-available-test__container"
         style={{
-          opacity: passedTest ? 0.3 : 1,
-          pointerEvents: passedTest ? "none" : "all",
+          // opacity: status !== 1 ? 0.3 : 1,
+          // pointerEvents: status !== 1 ? "none" : "all",
         }}
       >
         <div className="card-available-test__top-head">
@@ -27,8 +28,7 @@ export const CardAvailableTest = ({ title, description, path, passedTest }) => {
           </div>
         </div>
       </Link>
-
-      {passedTest && (
+      {status === 2 && (
         <div className="card-available-test__finished">
           <p>Получить отчет по тестированию</p>
           <Link to={"/quiz/report"}>Отчет по тесту</Link>
diff --git a/src/components/features/quiz/GetOptionTask.jsx b/src/components/features/quiz/GetOptionTask.jsx
index 52cd39c9..7223274a 100644
--- a/src/components/features/quiz/GetOptionTask.jsx
+++ b/src/components/features/quiz/GetOptionTask.jsx
@@ -1,44 +1,18 @@
 import React from "react";
 
-export const GetOptionTask = ({ type, answer, handleChange, inputValue }) => {
-  switch (type) {
-    case "1":
-      return (
-        <div className="form-task__group">
-          <textarea
-            className="form-task__field"
-            value={inputValue}
-            onChange={handleChange}
-          />
-        </div>
-      );
-    case "3":
-      return (
-        <div className="form-task__group" key={answer.id}>
-          <input
-            className="form-task__check"
-            type="checkbox"
-            value={answer.answer_body}
-            id={answer.id}
-            onChange={handleChange}
-          />
-          <label htmlFor={answer.id}>{answer.answer_body}</label>
-        </div>
-      );
-
-    default:
-      return (
-        <div className="form-task__group" key={answer.id}>
-          <input
-            className="form-task__check"
-            type="radio"
-            value={answer.answer_body}
-            name={"radio"}
-            id={answer.id}
-            onChange={handleChange}
-          />
-          <label htmlFor={answer.id}>{answer.answer_body}</label>
-        </div>
-      );
-  }
+export const GetOptionTask = ({ type, answer, handleChange }) => {
+  const {answer_body,id} = answer
+  return (
+    <div className="form-task__group" key={id}>
+      <input
+        className="form-task__check"
+        type={+type === 3 ? "checkbox" : "radio"}
+        value={answer_body}
+        name={+type === 3 ? "checkbox" : "radio"}
+        id={id}
+        onChange={handleChange}
+      />
+      <label htmlFor={id}>{answer_body}</label>
+    </div>
+  );
 };
diff --git a/src/components/features/quiz/HeaderQuiz.jsx b/src/components/features/quiz/HeaderQuiz.jsx
index bde6f469..6d1ab044 100644
--- a/src/components/features/quiz/HeaderQuiz.jsx
+++ b/src/components/features/quiz/HeaderQuiz.jsx
@@ -1,7 +1,7 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 
-import { selectUserInfo, setUserInfo } from "@redux/quizSlice";
+import { selectUserInfo } from "@redux/quizSlice";
 
 import { urlForLocal } from "@utils/helper";
 
@@ -13,14 +13,6 @@ export const HeaderQuiz = ({ header }) => {
   const userId = localStorage.getItem("id");
   const userInfo = useSelector(selectUserInfo);
 
-  useEffect(() => {
-    dispatch(setUserInfo(userId));
-  }, [userId, dispatch]);
-
-  useEffect(() => {
-    // apiRequest(`/user-questionnaire/questionnaires-list?user_id=${userId}`)
-    //     .then(res => dispatch(setQuestionnairesList(res)))
-  }, [userId, dispatch]);
 
   return (
     <div>
diff --git a/src/components/features/quiz/Quiz-passing-information.jsx b/src/components/features/quiz/Quiz-passing-information.jsx
index dca28127..1b2e056c 100644
--- a/src/components/features/quiz/Quiz-passing-information.jsx
+++ b/src/components/features/quiz/Quiz-passing-information.jsx
@@ -1,36 +1,67 @@
 import React, { useEffect } from "react";
-import { useSelector } from "react-redux";
-import { useTimer } from "react-timer-hook";
-
-import { completedTestSelector } from "@redux/quizSlice";
-
+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 timer from "assets/images/quiz/timer.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 { useNotification } from "@hooks/useNotification";
 
-export const QuizPassingInformation = ({ expiryTimestamp, setStartTest }) => {
-  const { seconds, minutes, isRunning, start, restart } = useTimer({
-    expiryTimestamp,
-    autoStart: false,
-    onExpire: () => {
-      console.warn("onExpire called");
-    },
-  });
-  const completedTest = useSelector(completedTestSelector);
+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 = () => {
-    setStartTest(true);
-    start();
+    apiRequest(
+      `/question/get-questions?uuid=${uuid}`
+    )
+      .then((res) => {
+        if (res.status === 400) {
+          dispatch(setQuestions(null));
+          showNotification({
+            show: true,
+            text: res?.message || "",
+            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);
+      })
+      .catch(e => {
+        dispatch(setQuestions(null));
+      });
+  };
+
+
+  const checkTest = () => apiRequest(
+    `user-questionnaire/questionnaire-completed?user_questionnaire_uuid=${uuid}`
+  );
+
+  const completeTest = () => apiRequest(
+    "/user-questionnaire/questionnaire-completed", {
+      method: "POST"
+    });
+
+  const finishQuiz = async () => {
+    Promise.all([checkTest, completeTest])
+      .then(function() {
+        pause();
+      })
+      .catch(e => {
+        console.log(e);
+      });
   };
 
-  useEffect(() => {
-    if (completedTest) {
-      const time = new Date();
-      time.setSeconds(time.getSeconds() + 0); //600 - кол-во секунд для прохождения теста
-      restart(time, false);
-    }
-  }, [completedTest]);
 
   return (
     <div className="quiz-passing-information">
@@ -48,22 +79,25 @@ export const QuizPassingInformation = ({ expiryTimestamp, setStartTest }) => {
               разработчик
             </div>
           </div>
-          <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={timer} alt="" />
+              <img src={iconTomer} alt="" />
             </div>
             <div className="quiz-passing-information__text">
-              {completedTest ? "Время вышло" : "Время на прохождение теста:"}{" "}
+              Время на прохождение теста:
               <br />
               <span>
-                {minutes.toString().padStart(2, "0") +
+                {hours.toString().padStart(2, "0") +
                   ":" +
-                  seconds.toString().padStart(2, "0")}{" "}
+                  minutes.toString().padStart(2, "0") +
+                  ":" +
+                  seconds.toString().padStart(2, "0")
+                }
                 секунд
               </span>
             </div>
-          </div>
-          <div className="quiz-passing-information__attempt">
+          </div>}
+          {!isRunning && <div className="quiz-passing-information__attempt">
             <div className="quiz-passing-information__icon">
               <img src={accempt} alt="" />
             </div>
@@ -71,9 +105,9 @@ export const QuizPassingInformation = ({ expiryTimestamp, setStartTest }) => {
               Попыток прохождения: <br />
               <span>1 попытка</span>
             </div>
-          </div>
+          </div>}
           <div>
-            {!completedTest && !isRunning && (
+            {!isRunning && (
               <button
                 className="quiz-passing-information__button btn-green"
                 onClick={startTesting}
@@ -82,10 +116,10 @@ export const QuizPassingInformation = ({ expiryTimestamp, setStartTest }) => {
               </button>
             )}
           </div>
+          {isRunning &&
+            <button className="quiz-passing-information__button quiz-btn" onClick={finishQuiz}>Завершить</button>}
         </div>
-
-        {/* {isRunning && <button className="quiz-passing-information__button quiz-btn" onClick={pause}>Завершить</button>} */}
       </div>
     </div>
   );
-};
+};
\ No newline at end of file
diff --git a/src/components/features/quiz/Task.js b/src/components/features/quiz/Task.js
index a07faa65..ea628f57 100644
--- a/src/components/features/quiz/Task.js
+++ b/src/components/features/quiz/Task.js
@@ -1,148 +1,138 @@
-import React, { useEffect, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-
-import {
-  answersSelector,
-  fetchGetAnswers, // fetchUserAnswerOne,
-  // fetchUserAnswersMany,
-  questionsSelector,
-  selectedTest, // setAnswers,
-  setCompleteTest,
-} from "@redux/quizSlice";
-
-import { apiRequest } from "@api/request";
-
+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 { HeaderQuiz } from "./HeaderQuiz";
-// import { Progressbar } from "./ProgressbarQuiz";
 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 { apiRequest } from "@api/request";
+import { useNotification } from "@hooks/useNotification";
 
-export const TaskQuiz = () => {
-  const dispatch = useDispatch();
+export const TaskQuiz = ({ timer }) => {
 
-  const answers = useSelector(answersSelector);
+  const { restart } = timer;
+  const { uuid } = useParams();
   const questions = useSelector(questionsSelector);
-
-  const dataTest = useSelector(selectedTest);
   const [index, setIndex] = useState(0);
-  const [checkedValues, setCheckedValues] = useState([]);
-  //const [stripValue, setStripValue] = useState(0);
-  const [inputValue, setInputValue] = useState("");
+  const [isLoadingSendAnswers, setLoadingSendAnswers] = useState(false);
+  const { showNotification } = useNotification();
 
-  const id = localStorage.getItem("id");
-
-  useEffect(() => {
-    // fetch('https://itguild.info/api/user-questionnaire/questionnaires-list?user_id=110').then(response => response.json())
-    // .then(json => console.log(json))
-    apiRequest(`/question/get-questions?uuid=${dataTest.uuid}`).then(
-      (response) => {
-        dispatch(fetchGetAnswers(response[0].id));
-        setStripValue(((+index + 1) * 100) / response.length);
-      }
-    );
-  }, [dispatch]);
+  const { values, handleChange, setValues } = useHandlerFieldTest({
+    uuid,
+    questions,
+    indexQuestion: index
+  });
 
   const nextQuestion = async (e) => {
     e.preventDefault();
-    //Проверка на валидацию ответов
-    if (!(checkedValues.length || inputValue)) {
+    //Проверка на существование овтетов
+    if (!(values.length)) {
       alert("Вы не ответили на вопрос");
       return;
     }
 
     //отправка ответов на сервер
-    if (questions[index].question_type_id != 3) {
-      //dispatch(fetchUserAnswerOne(checkedValues));
-    } else {
-      console.log(checkedValues);
-      // dispatch(fetchUserAnswersMany(checkedValues));
-    }
+    setLoadingSendAnswers(true);
+    await apiRequest(`/user-response/set-responses`, {
+      method: "POST",
+      data: values
+    })
+      .then(res => {
+        if (String(res?.status)[0] !== "2") {
+          showNotification({
+            show: true,
+            text: res?.message || "",
+            type: "error"
+          });
+          return
+        }
 
-    //Проверка на окончание теста
-    if (!(index < questions.length - 1)) {
-      dispatch(setCompleteTest());
-      return;
-    }
+        if (index === questions.length - 1) return;
 
-    dispatch(fetchGetAnswers(questions[index + 1].id));
-    setIndex((prev) => prev + 1);
-    setCheckedValues([]);
-    setInputValue("");
+        //установка таймера на вопрос если он существует
+        if (questions[index + 1]?.time_limit !== "00:00:00") setValueTimer();
+
+        // очищение полей и переход на следующий вопрос
+        setIndex((prev) => prev + 1);
+        setValues([]);
+      })
+      .catch(e => {
+        showNotification({
+          show: true,
+          text: e?.message || "",
+          type: "error"
+        });
+      })
+      .finally(() => setLoadingSendAnswers(false));
   };
 
-  const handleChange = (e) => {
-    const checked = e.target.checked;
-
-    if (questions[index].question_type_id != 3) {
-      setCheckedValues([
-        {
-          user_id: id,
-          user_questionnaire_uuid: dataTest.uuid,
-          question_id: questions[index].id,
-          response_body: e.target.value,
-        },
-      ]);
-      return;
-    }
-
-    checked
-      ? setCheckedValues((prev) => [
-          ...prev,
-          {
-            user_id: id,
-            user_questionnaire_uuid: dataTest.uuid,
-            question_id: questions[index].id,
-            response_body: e.target.value,
-          },
-        ])
-      : setCheckedValues((prev) => [
-          ...prev.filter((item) => item.response_body !== e.target.value),
-        ]);
+  const complete = (e) => {
+    e.preventDefault();
+    console.log(values);
   };
 
-  console.log("render task");
+  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"));
+  };
 
+  console.log(questions);
   return (
     <div className="task">
       {
-        <div className="task__container">
-          <div className="task__header">
-            <img src={questionIcon} alt="" />
-            <h3 className="task__title quiz-title_h3">
-              {questions[index].question_body}
-            </h3>
-          </div>
-
-          <div className="task__body">
-            <form className="task__form form-task" onSubmit={nextQuestion}>
-              {answers.map((answer) => (
-                <GetOptionTask
-                  key={answer.id}
-                  type={questions[index].question_type_id}
-                  handleChange={handleChange}
-                  answer={answer}
-                />
-              ))}
-              <div className="form-task__buttons">
-                {/* {
-                  index != 0 && <button type='submit' className='form-task__btn quiz-btn quiz-btn_back'
-                    onClick={prevQuestion}>Назад</button>
-                } */}
-                {index != questions.length && (
+        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>
+              </form>
+            </div>
           </div>
-        </div>
+          :
+          <h1>ОШибка</h1>
       }
+
     </div>
   );
 };
diff --git a/src/hooks/useHandlerFieldTest.js b/src/hooks/useHandlerFieldTest.js
new file mode 100644
index 00000000..720a90c2
--- /dev/null
+++ b/src/hooks/useHandlerFieldTest.js
@@ -0,0 +1,40 @@
+import { useState } from "react";
+
+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)
+      ]);
+      return;
+    }
+    setValues((prev) => [
+      ...prev, {
+        user_id: id,
+        user_questionnaire_uuid: uuid,
+        question_id: questions[indexQuestion].id,
+        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
+    }
+    ]);
+  }
+  const handleChange = (e) => {
+    if (+questions[indexQuestion].question_type_id !== 3) {
+      handleFieldsForm(e)
+      return;
+    }
+    handleChangeCheckbox(e)
+  };
+  return {handleChange,values,setValues}
+}
\ No newline at end of file
diff --git a/src/pages/quiz/PassingTests.js b/src/pages/quiz/PassingTests.js
index a5cfc43a..c50cecfa 100644
--- a/src/pages/quiz/PassingTests.js
+++ b/src/pages/quiz/PassingTests.js
@@ -1,9 +1,7 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import { Link } from "react-router-dom";
-
+import { Link, useNavigate, useParams } from "react-router-dom";
 import { completedTestSelector } from "@redux/quizSlice";
-
 import { Footer } from "@components/Common/Footer/Footer";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
@@ -12,13 +10,32 @@ 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 time = new Date();
-  time.setSeconds(time.getSeconds() + 600); //600 - кол-во секунд для прохождения теста
 
   const [startTest, setStartTest] = useState(false);
+  const navigate = useNavigate()
   const completedTest = useSelector(completedTestSelector);
+  const { uuid } = useParams()
+
+  const timer = useTimer({
+    expiryTimestamp: moment(),
+    autoStart: false,
+    onExpire: () => {
+     navigate("/quiz")
+    }
+  });
+
+  const onCloseWindow = (e) => {
+    e.preventDefault();
+    if(startTest){
+      let confirmationMessage = "\o/";
+      (e || window.e).returnValue = confirmationMessage;
+      return confirmationMessage;
+    }
+  }
 
   const introduction = [
     {
@@ -38,6 +55,23 @@ export const PassingTests = () => {
     },
   ];
 
+  function onSwitchTab(e) {
+    console.log(e,document.visibilityState);
+    if (document.visibilityState === "hidden" && startTest) {
+      alert("Убедительная просьба не покидать страницу и не переключаться. Рассчитывайте только на свои знания и умения!!!")
+    }
+  }
+
+  useEffect(()=>{
+    window.addEventListener("beforeunload", onCloseWindow);
+    window.addEventListener("visibilitychange", onSwitchTab);
+    window.onblur = onSwitchTab
+    return () => {
+      window.removeEventListener("beforeunload", onCloseWindow);
+      window.removeEventListener("visibilitychange", onSwitchTab);
+    }
+  }, [startTest])
+
   return (
     <div className="passing-tests-page">
       <ProfileHeader />
@@ -51,12 +85,13 @@ export const PassingTests = () => {
           ]}
         />
         <div className="passing-tests-page__title main-title">
-          Тестирование в позиции Junior разработчик{" "}
+          Тестирование в позиции Junior разработчик
         </div>
         <div className="passing-tests-page__passing-information">
           <QuizPassingInformation
-            expiryTimestamp={time}
+            timer={timer}
             setStartTest={setStartTest}
+            uuid={uuid}
           />
         </div>
 
@@ -68,7 +103,7 @@ export const PassingTests = () => {
               </div>
             )}
             {startTest ? (
-              <TaskQuiz />
+              <TaskQuiz timer={timer}/>
             ) : (
               <div className="passing-tests-page__introduction">
                 {introduction.map((item, i) => (
@@ -98,6 +133,13 @@ export const PassingTests = () => {
         )}
       </div>
       <Footer />
+      {/*<Prompt*/}
+      {/*  when={showPrompt}*/}
+      {/*  message="Unsaved changes detected, continue?"*/}
+      {/*  beforeUnload={true}*/}
+      {/*/>*/}
     </div>
   );
 };
+
+
diff --git a/src/pages/quiz/QuizPage.js b/src/pages/quiz/QuizPage.js
index dac31b9f..fd38bcd8 100644
--- 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 = useSelector(questionnairesSelector);
+  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,16 +95,18 @@ 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);
+  const [selectedCategory, setSetSelectedCategory] = useState(false);
 
   useEffect(() => {
     apiRequest(
       `/user-questionnaire/questionnaires-list?user_id=${userId}`
-    ).then((res) => dispatch(setQuestionnaires(res)));
+    )
+      .then(res => setQuestionnaires(res))
+      .catch(e => console.log(e));
   }, []);
 
   return (
@@ -115,7 +117,7 @@ export const QuizPage = () => {
         <ProfileBreadcrumbs
           links={[
             { name: "Главная", link: "/profile-candidate" },
-            { name: "Тестирование", link: "/quiz" },
+            { name: "Тестирование", link: "/quiz" }
           ]}
         />
         <div className="quiz-page__title main-title">
@@ -124,17 +126,15 @@ export const QuizPage = () => {
         {!selectedCategory && (
           <>
             <div className="quiz-page__specialization">
-              <SelectedCategory setSelectedCategory={setsetSelectedCategory} />
+              <SelectedCategory setSelectedCategory={setSetSelectedCategory} />
             </div>
             <div className="quiz-page__block">Доступные тесты</div>
             <div className="quiz-page__cards-test">
               {questionnaires.length ? (
                 questionnaires.map((item, index) => (
                   <CardAvailableTest
-                    description={
-                      "Вы новичок с реальным опытом работы до 1 года, или без опыта"
-                    }
-                    path={"quiz/test"}
+                    description={item.description}
+                    path={`quiz/test/${item.uuid}`}
                     status={item.status}
                     title={item.questionnaire_title}
                     passedTest={item.passedTest}
@@ -151,7 +151,6 @@ export const QuizPage = () => {
             </div>
           </>
         )}
-
         {selectedCategory && (
           <div className="quiz-page__categories-items">
             {personalInfoItems.map((item, index) => {
diff --git a/src/pages/quiz/QuizReportPage.js b/src/pages/quiz/QuizReportPage.js
index 4373462f..01d0cd6f 100644
--- a/src/pages/quiz/QuizReportPage.js
+++ b/src/pages/quiz/QuizReportPage.js
@@ -32,12 +32,11 @@ export const QuizReportPage = () => {
           ]}
         />
         <div className="quiz-report-page__title main-title">
-          Отчет по тестированию позиции Junior разработчик{" "}
+          Отчет по тестированию позиции Junior разработчик
         </div>
         <div className="quiz-report-page__report-quiz">
           <QuizReport />
         </div>
-
         <AlertResult />
       </div>
       <Footer />
diff --git a/src/redux/quizSlice.js b/src/redux/quizSlice.js
index 79264f9b..f140ccc5 100644
--- a/src/redux/quizSlice.js
+++ b/src/redux/quizSlice.js
@@ -1,151 +1,53 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 
-import { apiRequest } from "../api/request";
+import { apiRequest } from "@api/request";
+import moment from "moment";
 
 const initialState = {
-  answers: [
-    {
-      id: "12",
-      question_id: "7",
-      answer_body:
-        "Нsdf sfd fds sdf sf sfsdf sdfеск вsdffsdfsdf sf sdf sdfsdfsdfsdfdsjknsdkf dssdjf sdfbsdhf sd hjdsfv sdhjvар1 отв1 истина",
-    },
-    {
-      id: "23",
-      question_id: "7",
-      answer_body: "Неск вар1 отв1 истина",
-    },
-    {
-      id: "233",
-      question_id: "7",
-      answer_body: "lorem sdfdsf dfs sdf ",
-    },
-  ],
+  questions: null,
   questionnaires: [],
-  questions: [
-    {
-      id: "4",
-      question_type_id: "3",
-      question_body:
-        "Для чего в Python используется встроенная функция enumerate()?",
-      question_priority: null,
-      next_question: null,
-      time_limit: "00:22:00",
-    },
-    {
-      id: "24",
-      question_type_id: "3",
-      question_body: "Для чего в Python dfsf троенная функция enumerate()?",
-      question_priority: null,
-      next_question: null,
-      time_limit: "00:22:00",
-    },
-    {
-      id: "41",
-      question_type_id: "3",
-      question_body: "Для чегоsdfsdfя функция enumerate()?",
-      question_priority: null,
-      next_question: null,
-      time_limit: "00:22:00",
-    },
-    {
-      id: "5",
-      question_type_id: "2",
-      question_body: "Один ответ2",
-      question_priority: null,
-      next_question: null,
-      time_limit: "00:22:00",
-    },
-  ],
-  selectedTest: {
-    user_id: 1,
-    uuid: "d222f858-60fd-47fb-8731-dc9d5fc384c5",
-    score: 11,
-    status: 2,
-    percent_correct_answers: 0.25,
-    testing_date: "2022-03-17 11:14:22",
-    questionnaire_title: "Кат1 Анкета 1 активна",
-  },
-  selectedAnswers: {},
   completedTest: false,
+  selectedTest: {},
   result: null,
-  isLoading: false,
-  dataQuestionnairesOfUser: [],
-  passedTests: [],
-
-  userInfo: null,
 };
-export const setUserInfo = createAsyncThunk("userInfo", (id) =>
-  apiRequest(`/profile/get-main-data?user_id=${id}`)
-);
 
-export const fetchUserAnswersMany = createAsyncThunk(
-  "answersUserMany",
-  (checkedValues) =>
-    apiRequest("/user-response/set-responses", {
-      method: "POST",
-      data: { userResponses: checkedValues },
-    })
-);
-
-export const fetchUserAnswerOne = createAsyncThunk(
-  "answersUserOne",
-  (checkedValues) =>
-    apiRequest("/user-response/set-response", {
-      method: "POST",
-      data: checkedValues[0],
-    })
-);
-
-export const fetchGetAnswers = createAsyncThunk("answers", (question_id) =>
-  apiRequest(`/answer/get-answers?question_id=${question_id}`)
-);
-
-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({
   name: "quiz",
   initialState,
   reducers: {
-    setQuestionnaires: (state, action) => {
-      state.questionnaires = action.payload;
-    },
-    setSelectedTest: (state, action) => {
-      state.selectedTest = action.payload;
+    setQuestions: (state, action) => {
+      state.questions = action.payload;
     },
     setCompleteTest: (state) => {
       state.completedTest = true;
-    },
+    }
   },
   extraReducers: {
-    [setUserInfo.fulfilled]: (state, action) => {
-      state.userInfo = action.payload;
-    },
-    [fetchGetAnswers.fulfilled]: (state, action) => {
-      state.answer = action.payload;
-    },
     [fetchResultTest.fulfilled]: (state, action) => {
       state.result = action.payload;
-    },
-  },
+    }
+  }
 });
 
-export const { setQuestionnaires, setSelectedTest, setCompleteTest } =
-  quizSlice.actions;
+export const {
+  setQuestions,
+} = quizSlice.actions;
+
 
-export const answersSelector = (state) => state.quiz.answers;
 export const questionnairesSelector = (state) => state.quiz.questionnaires;
-export const selectedAnswersSelector = (state) => state.quiz.selectedAnswers;
 export const questionsSelector = (state) => state.quiz.questions;
 export const completedTestSelector = (state) => state.quiz.completedTest;
 
 export const selectResult = (state) => state.quiz.result;
 export const selectedTest = (state) => state.quiz.selectedTest;
-export const selectPassedTests = (state) => state.quiz.passedTests;
-export const selectUserInfo = (state) => state.quiz.userInfo;
+
 
 export default quizSlice.reducer;

From b0c9884fe477da2a5079c92652fe034736389c7b Mon Sep 17 00:00:00 2001
From: Dmitry220 <dmitry19.kravtsov123@gmail.com>
Date: Tue, 21 Nov 2023 17:46:57 +0300
Subject: [PATCH 2/8] quiz

---
 .../features/quiz/CardAviableTest.jsx         |  10 +-
 .../features/quiz/GetOptionTask.jsx           |   2 +-
 src/components/features/quiz/HeaderQuiz.jsx   |   1 -
 .../quiz/Quiz-passing-information.jsx         | 121 +++++++-------
 src/components/features/quiz/Task.js          | 147 ++++++++++--------
 src/hooks/useHandlerFieldTest.js              |  36 +++--
 src/pages/quiz/PassingTests.js                |  39 ++---
 src/pages/quiz/QuizPage.js                    |  32 ++--
 src/redux/quizSlice.js                        |  24 ++-
 9 files changed, 217 insertions(+), 195 deletions(-)

diff --git a/src/components/features/quiz/CardAviableTest.jsx b/src/components/features/quiz/CardAviableTest.jsx
index 912d7e4d..cbb3388c 100644
--- 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 />
diff --git a/src/components/features/quiz/GetOptionTask.jsx b/src/components/features/quiz/GetOptionTask.jsx
index 7223274a..b9caf981 100644
--- 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
diff --git a/src/components/features/quiz/HeaderQuiz.jsx b/src/components/features/quiz/HeaderQuiz.jsx
index 6d1ab044..1571fa5e 100644
--- 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 ? (
diff --git a/src/components/features/quiz/Quiz-passing-information.jsx b/src/components/features/quiz/Quiz-passing-information.jsx
index 1b2e056c..10f27ea0 100644
--- 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,10 +123,16 @@ 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>
   );
-};
\ No newline at end of file
+};
diff --git a/src/components/features/quiz/Task.js b/src/components/features/quiz/Task.js
index ea628f57..f2dedff7 100644
--- 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>
   );
 };
diff --git a/src/hooks/useHandlerFieldTest.js b/src/hooks/useHandlerFieldTest.js
index 720a90c2..f61df319 100644
--- 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}
-}
\ No newline at end of file
+  return { handleChange, values, setValues };
+};
diff --git a/src/pages/quiz/PassingTests.js b/src/pages/quiz/PassingTests.js
index c50cecfa..740e7bf4 100644
--- 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>
   );
 };
-
-
diff --git a/src/pages/quiz/QuizPage.js b/src/pages/quiz/QuizPage.js
index fd38bcd8..a387030a 100644
--- 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">
diff --git a/src/redux/quizSlice.js b/src/redux/quizSlice.js
index f140ccc5..8cc33100 100644
--- 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;

From cf827cc18523b43b092bb9ade8f0c23f3ad465c4 Mon Sep 17 00:00:00 2001
From: Mikola <ko1907@mail.ru>
Date: Sun, 10 Dec 2023 03:24:55 +0300
Subject: [PATCH 3/8] quiz

---
 src/components/Navigation/Navigation.jsx | 8 ++++++--
 src/pages/quiz/QuizPage.js               | 8 +++++---
 src/pages/quiz/quiz-page.scss            | 2 +-
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx
index 0239ec47..0d90bf8f 100644
--- a/src/components/Navigation/Navigation.jsx
+++ b/src/components/Navigation/Navigation.jsx
@@ -36,10 +36,14 @@ export const Navigation = () => {
         path: "/payouts",
         name: "Выплаты",
       },
+      {
+        path: "/quiz",
+        name: "Тесты"
+      },
       {
         path: "/settings",
         name: "Настройки",
-      },
+      }
     ],
     partner: [
       {
@@ -91,7 +95,7 @@ export const Navigation = () => {
         <nav className="profileHeader__nav">
           {navInfo[user].map((link, index) => {
             return (
-              <NavLink key={index} end to={`/profile${link.path}`}>
+              <NavLink key={index} end to={link.path === '/quiz' ? link.path : `/profile${link.path}`}>
                 {link.name}
               </NavLink>
             );
diff --git a/src/pages/quiz/QuizPage.js b/src/pages/quiz/QuizPage.js
index a387030a..337c920f 100644
--- a/src/pages/quiz/QuizPage.js
+++ b/src/pages/quiz/QuizPage.js
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Link } from "react-router-dom";
 
-import { questionnairesSelector, setQuestionnaires } from "@redux/quizSlice";
+// import { questionnairesSelector, setQuestionnaires } from "@redux/quizSlice";
 
 import { apiRequest } from "@api/request";
 
@@ -10,7 +10,8 @@ import CategoriesItem from "@components/CategoriesItem/CategoriesItem";
 import { Footer } from "@components/Common/Footer/Footer";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
-import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
+import { Navigation } from "@components/Navigation/Navigation";
+// import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
 import { CardAvailableTest } from "@components/features/quiz/CardAviableTest";
 import { SelectedCategory } from "@components/features/quiz/SelectedCategory";
 
@@ -110,7 +111,8 @@ export const QuizPage = () => {
   return (
     <div className="quiz-page">
       <ProfileHeader />
-      <HeadBottom />
+      <Navigation />
+      {/*<HeadBottom />*/}
       <div className="quiz-page__container">
         <ProfileBreadcrumbs
           links={[
diff --git a/src/pages/quiz/quiz-page.scss b/src/pages/quiz/quiz-page.scss
index 04c2311f..9e8d1d0a 100644
--- a/src/pages/quiz/quiz-page.scss
+++ b/src/pages/quiz/quiz-page.scss
@@ -7,7 +7,7 @@
   flex-direction: column;
   &__container {
     max-width: 1160px;
-    margin: 0 auto 42px auto;
+    margin: 23px auto 42px auto;
     flex: 1 1 auto;
     width: 100%;
     padding: 0 15px;

From 15183d3ada69d1dd04cb9f8c5e418c66b3269683 Mon Sep 17 00:00:00 2001
From: Mikola <ko1907@mail.ru>
Date: Sun, 10 Dec 2023 03:25:05 +0300
Subject: [PATCH 4/8] quiz

---
 src/components/Navigation/Navigation.jsx | 10 +++++++---
 src/pages/quiz/QuizPage.js               |  3 +--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx
index 0d90bf8f..1210eec8 100644
--- a/src/components/Navigation/Navigation.jsx
+++ b/src/components/Navigation/Navigation.jsx
@@ -38,12 +38,12 @@ export const Navigation = () => {
       },
       {
         path: "/quiz",
-        name: "Тесты"
+        name: "Тесты",
       },
       {
         path: "/settings",
         name: "Настройки",
-      }
+      },
     ],
     partner: [
       {
@@ -95,7 +95,11 @@ export const Navigation = () => {
         <nav className="profileHeader__nav">
           {navInfo[user].map((link, index) => {
             return (
-              <NavLink key={index} end to={link.path === '/quiz' ? link.path : `/profile${link.path}`}>
+              <NavLink
+                key={index}
+                end
+                to={link.path === "/quiz" ? link.path : `/profile${link.path}`}
+              >
                 {link.name}
               </NavLink>
             );
diff --git a/src/pages/quiz/QuizPage.js b/src/pages/quiz/QuizPage.js
index 337c920f..602dc18b 100644
--- a/src/pages/quiz/QuizPage.js
+++ b/src/pages/quiz/QuizPage.js
@@ -3,14 +3,13 @@ import { useDispatch, useSelector } from "react-redux";
 import { Link } from "react-router-dom";
 
 // import { questionnairesSelector, setQuestionnaires } from "@redux/quizSlice";
-
 import { apiRequest } from "@api/request";
 
 import CategoriesItem from "@components/CategoriesItem/CategoriesItem";
 import { Footer } from "@components/Common/Footer/Footer";
+import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
-import { Navigation } from "@components/Navigation/Navigation";
 // import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
 import { CardAvailableTest } from "@components/features/quiz/CardAviableTest";
 import { SelectedCategory } from "@components/features/quiz/SelectedCategory";

From 6e2a14d58edbe4c5d4b07752ae02cc42691baf3b Mon Sep 17 00:00:00 2001
From: Mikola <ko1907@mail.ru>
Date: Tue, 12 Dec 2023 11:22:53 +0300
Subject: [PATCH 5/8] quiz

---
 src/App.js                                    |  4 +--
 src/components/features/quiz/AlertResult.jsx  |  4 +--
 .../features/quiz/CardAviableTest.jsx         |  4 +--
 src/components/features/quiz/QuizReport.jsx   | 14 +++++++---
 src/pages/quiz/PassingTests.js                |  6 +++--
 src/pages/quiz/QuizPage.js                    |  2 +-
 src/pages/quiz/QuizReportPage.js              | 26 ++++++++++++++-----
 src/pages/quiz/quiz-page.scss                 |  6 ++---
 8 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/src/App.js b/src/App.js
index 4ecd227d..57bf33e1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -107,7 +107,7 @@ const App = () => {
           <Route exact path="quiz">
             <Route index element={<QuizPage />} />
             <Route exact path="test/:uuid" element={<PassingTests />} />
-            <Route exact path="report" element={<QuizReportPage />} />
+            <Route exact path="report/:uuid" element={<QuizReportPage />} />
           </Route>
 
           <Route exact path="profile">
@@ -133,7 +133,7 @@ const App = () => {
               element={<PartnerEmployees />}
             />
           </Route>
-          
+
 
           <Route exact path="profile-candidate/:id">
             <Route index element={<ProfileCandidate />} />
diff --git a/src/components/features/quiz/AlertResult.jsx b/src/components/features/quiz/AlertResult.jsx
index 18bbe609..ab51452b 100644
--- a/src/components/features/quiz/AlertResult.jsx
+++ b/src/components/features/quiz/AlertResult.jsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import suucessIcon from "assets/images/quiz/success.png";
 
-export const AlertResult = () => {
+export const AlertResult = ({info}) => {
   const successTest = false;
 
   return (
@@ -17,7 +17,7 @@ export const AlertResult = () => {
           className="alert-result__text"
           style={{ color: successTest ? "#52B709" : "#5B6871" }}
         >
-          Благодарим Вас за прохождение теста "Junior разработчик". Ваши
+          Благодарим Вас за прохождение теста "{info.questionnaire_title}". Ваши
           результаты проверены, готовы пригласить Вас в команду
         </div>
       </div>
diff --git a/src/components/features/quiz/CardAviableTest.jsx b/src/components/features/quiz/CardAviableTest.jsx
index cbb3388c..9a807ec3 100644
--- a/src/components/features/quiz/CardAviableTest.jsx
+++ b/src/components/features/quiz/CardAviableTest.jsx
@@ -9,7 +9,7 @@ export const CardAvailableTest = ({ title, description, path, status }) => {
   return (
     <div className="card-available-test">
       <Link
-        to={`/${path}`}
+        to={status === 2 ? `/quiz/report/${path}` : `/quiz/test/${path}`}
         aria-disabled={true}
         className="card-available-test__container"
         style={
@@ -33,7 +33,7 @@ export const CardAvailableTest = ({ title, description, path, status }) => {
       {status === 2 && (
         <div className="card-available-test__finished">
           <p>Получить отчет по тестированию</p>
-          <Link to={"/quiz/report"}>Отчет по тесту</Link>
+          <Link to={`/quiz/report/${path}`}>Отчет по тесту</Link>
         </div>
       )}
     </div>
diff --git a/src/components/features/quiz/QuizReport.jsx b/src/components/features/quiz/QuizReport.jsx
index 793290f2..85ed5879 100644
--- a/src/components/features/quiz/QuizReport.jsx
+++ b/src/components/features/quiz/QuizReport.jsx
@@ -2,7 +2,13 @@ import React from "react";
 
 import StarRating from "@components/StarRating/StarRating";
 
-export const QuizReport = () => {
+export const QuizReport = ({info}) => {
+  function correctAnswers() {
+    return info.number_questions * info.percent_correct_answers
+  }
+  function correctWrongAnswers() {
+    return info.number_questions * (1 - info.percent_correct_answers)
+  }
   return (
     <div className="report">
       <div className="report__row">
@@ -14,15 +20,15 @@ export const QuizReport = () => {
             size={61}
           />
           <div className="report__job-title">
-            Junior <br /> разработчик
+            {info.questionnaire_title}
           </div>
         </div>
         <div className="report__column">
-          <div className="report__value">22</div>
+          <div className="report__value">{Boolean(correctAnswers()) ? correctAnswers() : 0}</div>
           <div className="report__text">Правильных ответов</div>
         </div>
         <div className="report__column">
-          <div className="report__value report__value_false">02</div>
+          <div className="report__value report__value_false">{Boolean(correctWrongAnswers()) ? correctWrongAnswers() : 0}</div>
           <div className="report__text">Не правильных ответов</div>
         </div>
         <div className="report__column">
diff --git a/src/pages/quiz/PassingTests.js b/src/pages/quiz/PassingTests.js
index 740e7bf4..61518393 100644
--- a/src/pages/quiz/PassingTests.js
+++ b/src/pages/quiz/PassingTests.js
@@ -9,7 +9,8 @@ import { completedTestSelector } from "@redux/quizSlice";
 import { Footer } from "@components/Common/Footer/Footer";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
-import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
+import { Navigation } from "@components/Navigation/Navigation";
+// import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
 import { BlockCompletedTest } from "@components/features/quiz/BlockCompletedTest";
 import { CardIntroduction } from "@components/features/quiz/Card-introduction";
 import { QuizPassingInformation } from "@components/features/quiz/Quiz-passing-information";
@@ -78,7 +79,8 @@ export const PassingTests = () => {
   return (
     <div className="passing-tests-page">
       <ProfileHeader />
-      <HeadBottom />
+      <Navigation />
+      {/*<HeadBottom />*/}
       <div className="passing-tests-page__container">
         <ProfileBreadcrumbs
           links={[
diff --git a/src/pages/quiz/QuizPage.js b/src/pages/quiz/QuizPage.js
index 602dc18b..66a89f7d 100644
--- a/src/pages/quiz/QuizPage.js
+++ b/src/pages/quiz/QuizPage.js
@@ -133,7 +133,7 @@ export const QuizPage = () => {
                 questionnaires.map((item, index) => (
                   <CardAvailableTest
                     description={item.description}
-                    path={`quiz/test/${item.uuid}`}
+                    path={item.uuid}
                     status={item.status}
                     title={item.questionnaire_title}
                     passedTest={item.passedTest}
diff --git a/src/pages/quiz/QuizReportPage.js b/src/pages/quiz/QuizReportPage.js
index 01d0cd6f..cbb57998 100644
--- a/src/pages/quiz/QuizReportPage.js
+++ b/src/pages/quiz/QuizReportPage.js
@@ -1,28 +1,40 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
 import { selectedTest } from "@redux/quizSlice";
 
 import { Footer } from "@components/Common/Footer/Footer";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
-import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
+import { Navigation } from "@components/Navigation/Navigation";
+// import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
 import { AlertResult } from "@components/features/quiz/AlertResult";
 import { QuizReport } from "@components/features/quiz/QuizReport";
+import { apiRequest } from "@api/request";
 
 export const QuizReportPage = () => {
   const test = useSelector(selectedTest);
+  const params = useParams();
 
   let navigate = useNavigate();
   if (!test) {
     navigate("/quiz");
   }
 
+  useEffect(() => {
+    apiRequest(`/user-questionnaire/questionnaire-completed?user_questionnaire_uuid=${params.uuid}`).then((res) => {
+      setTestInfo(res)
+    })
+  }, [])
+
+  const [testInfo, setTestInfo] = useState({})
+
   return (
     <div className="quiz-report-page">
       <ProfileHeader />
-      <HeadBottom />
+      <Navigation />
+      {/*<HeadBottom />*/}
       <div className="quiz-report-page__container">
         <ProfileBreadcrumbs
           links={[
@@ -32,12 +44,12 @@ export const QuizReportPage = () => {
           ]}
         />
         <div className="quiz-report-page__title main-title">
-          Отчет по тестированию позиции Junior разработчик
+          Отчет по тестированию позиции {testInfo.questionnaire_title}
         </div>
         <div className="quiz-report-page__report-quiz">
-          <QuizReport />
+          <QuizReport info={testInfo} />
         </div>
-        <AlertResult />
+        <AlertResult info={testInfo} />
       </div>
       <Footer />
     </div>
diff --git a/src/pages/quiz/quiz-page.scss b/src/pages/quiz/quiz-page.scss
index 9e8d1d0a..7b34b243 100644
--- a/src/pages/quiz/quiz-page.scss
+++ b/src/pages/quiz/quiz-page.scss
@@ -68,7 +68,7 @@
   }
   &__container {
     max-width: 1160px;
-    margin: 0 auto 42px auto;
+    margin: 23px auto 42px auto;
     flex: 1 1 auto;
     width: 100%;
     padding: 0 15px;
@@ -90,7 +90,7 @@
   flex-direction: column;
   &__container {
     max-width: 1160px;
-    margin: 0 auto 42px auto;
+    margin: 23px auto 42px auto;
     flex: 1 1 auto;
     width: 100%;
     padding: 0 15px;
@@ -125,7 +125,7 @@
   flex-direction: column;
   &__container {
     max-width: 1160px;
-    margin: 0 auto 42px auto;
+    margin: 23px auto 42px auto;
     flex: 1 1 auto;
     width: 100%;
     padding: 0 15px;

From 2588a72b02df491bb15276d800826de0896188fa Mon Sep 17 00:00:00 2001
From: Mikola <ko1907@mail.ru>
Date: Tue, 12 Dec 2023 11:23:06 +0300
Subject: [PATCH 6/8] quiz

---
 src/components/features/quiz/AlertResult.jsx |  2 +-
 src/components/features/quiz/QuizReport.jsx  | 18 ++++++++++--------
 src/pages/quiz/PassingTests.js               |  2 +-
 src/pages/quiz/QuizReportPage.js             | 17 ++++++++++-------
 4 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/components/features/quiz/AlertResult.jsx b/src/components/features/quiz/AlertResult.jsx
index ab51452b..dcac3961 100644
--- a/src/components/features/quiz/AlertResult.jsx
+++ b/src/components/features/quiz/AlertResult.jsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import suucessIcon from "assets/images/quiz/success.png";
 
-export const AlertResult = ({info}) => {
+export const AlertResult = ({ info }) => {
   const successTest = false;
 
   return (
diff --git a/src/components/features/quiz/QuizReport.jsx b/src/components/features/quiz/QuizReport.jsx
index 85ed5879..2a3bc550 100644
--- a/src/components/features/quiz/QuizReport.jsx
+++ b/src/components/features/quiz/QuizReport.jsx
@@ -2,12 +2,12 @@ import React from "react";
 
 import StarRating from "@components/StarRating/StarRating";
 
-export const QuizReport = ({info}) => {
+export const QuizReport = ({ info }) => {
   function correctAnswers() {
-    return info.number_questions * info.percent_correct_answers
+    return info.number_questions * info.percent_correct_answers;
   }
   function correctWrongAnswers() {
-    return info.number_questions * (1 - info.percent_correct_answers)
+    return info.number_questions * (1 - info.percent_correct_answers);
   }
   return (
     <div className="report">
@@ -19,16 +19,18 @@ export const QuizReport = ({info}) => {
             countActiveStars={0.5}
             size={61}
           />
-          <div className="report__job-title">
-            {info.questionnaire_title}
-          </div>
+          <div className="report__job-title">{info.questionnaire_title}</div>
         </div>
         <div className="report__column">
-          <div className="report__value">{Boolean(correctAnswers()) ? correctAnswers() : 0}</div>
+          <div className="report__value">
+            {Boolean(correctAnswers()) ? correctAnswers() : 0}
+          </div>
           <div className="report__text">Правильных ответов</div>
         </div>
         <div className="report__column">
-          <div className="report__value report__value_false">{Boolean(correctWrongAnswers()) ? correctWrongAnswers() : 0}</div>
+          <div className="report__value report__value_false">
+            {Boolean(correctWrongAnswers()) ? correctWrongAnswers() : 0}
+          </div>
           <div className="report__text">Не правильных ответов</div>
         </div>
         <div className="report__column">
diff --git a/src/pages/quiz/PassingTests.js b/src/pages/quiz/PassingTests.js
index 61518393..da68eab0 100644
--- a/src/pages/quiz/PassingTests.js
+++ b/src/pages/quiz/PassingTests.js
@@ -7,9 +7,9 @@ import { useTimer } from "react-timer-hook";
 import { completedTestSelector } from "@redux/quizSlice";
 
 import { Footer } from "@components/Common/Footer/Footer";
+import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
-import { Navigation } from "@components/Navigation/Navigation";
 // import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
 import { BlockCompletedTest } from "@components/features/quiz/BlockCompletedTest";
 import { CardIntroduction } from "@components/features/quiz/Card-introduction";
diff --git a/src/pages/quiz/QuizReportPage.js b/src/pages/quiz/QuizReportPage.js
index cbb57998..f27936bd 100644
--- a/src/pages/quiz/QuizReportPage.js
+++ b/src/pages/quiz/QuizReportPage.js
@@ -4,14 +4,15 @@ import { useNavigate, useParams } from "react-router-dom";
 
 import { selectedTest } from "@redux/quizSlice";
 
+import { apiRequest } from "@api/request";
+
 import { Footer } from "@components/Common/Footer/Footer";
+import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
-import { Navigation } from "@components/Navigation/Navigation";
 // import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
 import { AlertResult } from "@components/features/quiz/AlertResult";
 import { QuizReport } from "@components/features/quiz/QuizReport";
-import { apiRequest } from "@api/request";
 
 export const QuizReportPage = () => {
   const test = useSelector(selectedTest);
@@ -23,12 +24,14 @@ export const QuizReportPage = () => {
   }
 
   useEffect(() => {
-    apiRequest(`/user-questionnaire/questionnaire-completed?user_questionnaire_uuid=${params.uuid}`).then((res) => {
-      setTestInfo(res)
-    })
-  }, [])
+    apiRequest(
+      `/user-questionnaire/questionnaire-completed?user_questionnaire_uuid=${params.uuid}`
+    ).then((res) => {
+      setTestInfo(res);
+    });
+  }, []);
 
-  const [testInfo, setTestInfo] = useState({})
+  const [testInfo, setTestInfo] = useState({});
 
   return (
     <div className="quiz-report-page">

From 7e5503e576f8fcafd82e2bc00f7f465218857a0f Mon Sep 17 00:00:00 2001
From: Mikola <ko1907@mail.ru>
Date: Tue, 12 Dec 2023 15:18:04 +0300
Subject: [PATCH 7/8] quiz

---
 src/components/features/quiz/Task.js | 83 +++++++++++++++-------------
 src/hooks/useHandlerFieldTest.js     | 47 ++++++----------
 2 files changed, 63 insertions(+), 67 deletions(-)

diff --git a/src/components/features/quiz/Task.js b/src/components/features/quiz/Task.js
index f2dedff7..c700bf6e 100644
--- a/src/components/features/quiz/Task.js
+++ b/src/components/features/quiz/Task.js
@@ -1,7 +1,7 @@
 import moment from "moment";
 import React, { useState } from "react";
 import { useSelector } from "react-redux";
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
 
 import { questionsSelector } from "@redux/quizSlice";
 
@@ -18,15 +18,16 @@ import { GetOptionTask } from "./GetOptionTask";
 import "./quiz.scss";
 
 export const TaskQuiz = ({ timer }) => {
+  const navigate = useNavigate();
   const { restart } = timer;
   const { uuid } = useParams();
+  const userId = localStorage.getItem("id");
   const questions = useSelector(questionsSelector);
   const [index, setIndex] = useState(0);
-  const [isLoadingSendAnswers, setLoadingSendAnswers] = useState(false);
+  const [isLoadingSendAnswers] = useState(false);
   const { showNotification } = useNotification();
 
-  const { values, handleChange, setValues } = useHandlerFieldTest({
-    uuid,
+  const { userResponses, handleChange } = useHandlerFieldTest({
     questions,
     indexQuestion: index,
   });
@@ -34,49 +35,59 @@ export const TaskQuiz = ({ timer }) => {
   const nextQuestion = async (e) => {
     e.preventDefault();
     //Проверка на существование овтетов
-    if (!values.length) {
+    if (!userResponses[index]) {
       alert("Вы не ответили на вопрос");
       return;
     }
 
-    //отправка ответов на сервер
-    setLoadingSendAnswers(true);
-    await apiRequest(`/user-response/set-responses`, {
-      method: "POST",
-      data: values,
-    })
-      .then((res) => {
-        if (String(res?.status)[0] !== "2") {
+
+    // setLoadingSendAnswers(true);
+    // .finally(() => setLoadingSendAnswers(false));
+
+    // отправка ответов на сервер
+    if (questions.length === userResponses.length) {
+      await apiRequest(`/user-response/set-responses`, {
+        method: "POST",
+        data: {
+          user_id: userId,
+          user_questionnaire_uuid: uuid,
+          userResponses: JSON.stringify(userResponses)
+        },
+      })
+        .then(() => {
           showNotification({
             show: true,
-            text: res?.message || "",
-            type: "error",
+            text: "Тест успешно пройден",
+            type: "success",
           });
-          return;
-        }
+          navigate("/quiz");
+          // if (String(res?.status)[0] !== "2") {
+          //   showNotification({
+          //     show: true,
+          //     text: res?.message || "",
+          //     type: "error",
+          //   });
+          //   return;
+          // }
+        })
+        // .catch((e) => {
+        //   showNotification({
+        //     show: true,
+        //     text: e?.message || "",
+        //     type: "error",
+        //   });
+        // })
+    }
 
-        if (index === questions.length - 1) return;
+    //установка таймера на вопрос если он существует
+    if (questions[index + 1]?.time_limit !== "00:00:00") setValueTimer();
 
-        //установка таймера на вопрос если он существует
-        if (questions[index + 1]?.time_limit !== "00:00:00") setValueTimer();
-
-        // очищение полей и переход на следующий вопрос
-        setIndex((prev) => prev + 1);
-        setValues([]);
-      })
-      .catch((e) => {
-        showNotification({
-          show: true,
-          text: e?.message || "",
-          type: "error",
-        });
-      })
-      .finally(() => setLoadingSendAnswers(false));
+    // переход на следующий вопрос
+    setIndex((prev) => questions[prev + 1] ? prev + 1 : prev);
   };
 
   const complete = (e) => {
     e.preventDefault();
-    console.log(values);
   };
 
   const setValueTimer = () => {
@@ -89,7 +100,6 @@ export const TaskQuiz = ({ timer }) => {
     );
   };
 
-  console.log(questions);
   return (
     <div className="task">
       {questions ? (
@@ -111,7 +121,6 @@ export const TaskQuiz = ({ timer }) => {
                 <div className="form-task__group">
                   <textarea
                     className="form-task__field"
-                    value={values[0]?.response_body}
                     onChange={handleChange}
                   />
                 </div>
@@ -128,7 +137,7 @@ export const TaskQuiz = ({ timer }) => {
               <div className="form-task__buttons">
                 <button
                   onClick={nextQuestion}
-                  disabled={isLoadingSendAnswers}
+                  // disabled={isLoadingSendAnswers}
                   className="form-task__btn quiz-btn"
                 >
                   {isLoadingSendAnswers ? (
diff --git a/src/hooks/useHandlerFieldTest.js b/src/hooks/useHandlerFieldTest.js
index f61df319..762d0824 100644
--- a/src/hooks/useHandlerFieldTest.js
+++ b/src/hooks/useHandlerFieldTest.js
@@ -1,42 +1,29 @@
 import { useState } from "react";
 
-export const useHandlerFieldTest = ({ uuid, questions, indexQuestion }) => {
-  const [values, setValues] = useState([]);
-  const id = localStorage.getItem("id");
+export const useHandlerFieldTest = ({ questions, indexQuestion }) => {
+  const [userResponses, setUserResponses] = useState([]);
   const handleChangeCheckbox = (e) => {
-    if (!e.target.checked) {
-      setValues((prev) => [
-        ...prev.filter((item) => item.response_body !== e.target.value),
-      ]);
-      return;
-    }
-    setValues((prev) => [
-      ...prev,
+    setUserResponses((prev) =>
+      [...prev.filter((item) => item.question_id !== questions[indexQuestion].id),
       {
-        user_id: id,
-        user_questionnaire_uuid: uuid,
         question_id: questions[indexQuestion].id,
         response_body: e.target.value,
-      },
-    ]);
+        answer_id: e.target.id ? e.target.id : questions[indexQuestion].id
+      }])
   };
 
-  const handleFieldsForm = (e) => {
-    setValues([
-      {
-        user_id: id,
-        user_questionnaire_uuid: uuid,
-        question_id: questions[indexQuestion].id,
-        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,
+  //     },
+  //   ]);
+  // };
   const handleChange = (e) => {
-    if (+questions[indexQuestion].question_type_id !== 3) {
-      handleFieldsForm(e);
-      return;
-    }
     handleChangeCheckbox(e);
   };
-  return { handleChange, values, setValues };
+  return { handleChange,  userResponses};
 };

From dcf0bbbe689fc6eb02098ed5ef116b093107b4bd Mon Sep 17 00:00:00 2001
From: Mikola <ko1907@mail.ru>
Date: Tue, 12 Dec 2023 15:18:12 +0300
Subject: [PATCH 8/8] quiz

---
 src/components/features/quiz/Task.js | 46 +++++++++++++---------------
 src/hooks/useHandlerFieldTest.js     | 13 +++++---
 2 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/src/components/features/quiz/Task.js b/src/components/features/quiz/Task.js
index c700bf6e..075bfe70 100644
--- a/src/components/features/quiz/Task.js
+++ b/src/components/features/quiz/Task.js
@@ -1,7 +1,7 @@
 import moment from "moment";
 import React, { useState } from "react";
 import { useSelector } from "react-redux";
-import { useParams, useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
 import { questionsSelector } from "@redux/quizSlice";
 
@@ -40,7 +40,6 @@ export const TaskQuiz = ({ timer }) => {
       return;
     }
 
-
     // setLoadingSendAnswers(true);
     // .finally(() => setLoadingSendAnswers(false));
 
@@ -51,39 +50,38 @@ export const TaskQuiz = ({ timer }) => {
         data: {
           user_id: userId,
           user_questionnaire_uuid: uuid,
-          userResponses: JSON.stringify(userResponses)
+          userResponses: JSON.stringify(userResponses),
         },
-      })
-        .then(() => {
-          showNotification({
-            show: true,
-            text: "Тест успешно пройден",
-            type: "success",
-          });
-          navigate("/quiz");
-          // if (String(res?.status)[0] !== "2") {
-          //   showNotification({
-          //     show: true,
-          //     text: res?.message || "",
-          //     type: "error",
-          //   });
-          //   return;
-          // }
-        })
-        // .catch((e) => {
+      }).then(() => {
+        showNotification({
+          show: true,
+          text: "Тест успешно пройден",
+          type: "success",
+        });
+        navigate("/quiz");
+        // if (String(res?.status)[0] !== "2") {
         //   showNotification({
         //     show: true,
-        //     text: e?.message || "",
+        //     text: res?.message || "",
         //     type: "error",
         //   });
-        // })
+        //   return;
+        // }
+      });
+      // .catch((e) => {
+      //   showNotification({
+      //     show: true,
+      //     text: e?.message || "",
+      //     type: "error",
+      //   });
+      // })
     }
 
     //установка таймера на вопрос если он существует
     if (questions[index + 1]?.time_limit !== "00:00:00") setValueTimer();
 
     // переход на следующий вопрос
-    setIndex((prev) => questions[prev + 1] ? prev + 1 : prev);
+    setIndex((prev) => (questions[prev + 1] ? prev + 1 : prev));
   };
 
   const complete = (e) => {
diff --git a/src/hooks/useHandlerFieldTest.js b/src/hooks/useHandlerFieldTest.js
index 762d0824..e8fdadfd 100644
--- a/src/hooks/useHandlerFieldTest.js
+++ b/src/hooks/useHandlerFieldTest.js
@@ -3,13 +3,16 @@ import { useState } from "react";
 export const useHandlerFieldTest = ({ questions, indexQuestion }) => {
   const [userResponses, setUserResponses] = useState([]);
   const handleChangeCheckbox = (e) => {
-    setUserResponses((prev) =>
-      [...prev.filter((item) => item.question_id !== questions[indexQuestion].id),
+    setUserResponses((prev) => [
+      ...prev.filter(
+        (item) => item.question_id !== questions[indexQuestion].id
+      ),
       {
         question_id: questions[indexQuestion].id,
         response_body: e.target.value,
-        answer_id: e.target.id ? e.target.id : questions[indexQuestion].id
-      }])
+        answer_id: e.target.id ? e.target.id : questions[indexQuestion].id,
+      },
+    ]);
   };
 
   // const handleFieldsForm = (e) => {
@@ -25,5 +28,5 @@ export const useHandlerFieldTest = ({ questions, indexQuestion }) => {
   const handleChange = (e) => {
     handleChangeCheckbox(e);
   };
-  return { handleChange,  userResponses};
+  return { handleChange, userResponses };
 };