From b0c9884fe477da2a5079c92652fe034736389c7b Mon Sep 17 00:00:00 2001 From: Dmitry220 Date: Tue, 21 Nov 2023 17:46:57 +0300 Subject: [PATCH] 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", + } + } >
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 (
{ const userId = localStorage.getItem("id"); const userInfo = useSelector(selectUserInfo); - return (
{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 (
@@ -79,33 +83,36 @@ export const QuizPassingInformation = ({ setStartTest, uuid, timer }) => { разработчик
- {isRunning &&
-
- + {isRunning && ( +
+
+ +
+
+ Время на прохождение теста: +
+ + {hours.toString().padStart(2, "0") + + ":" + + minutes.toString().padStart(2, "0") + + ":" + + seconds.toString().padStart(2, "0")} + секунд + +
-
- Время на прохождение теста: -
- - {hours.toString().padStart(2, "0") + - ":" + - minutes.toString().padStart(2, "0") + - ":" + - seconds.toString().padStart(2, "0") - } - секунд - + )} + {!isRunning && ( +
+
+ +
+
+ Попыток прохождения:
+ 1 попытка +
-
} - {!isRunning &&
-
- -
-
- Попыток прохождения:
- 1 попытка -
-
} + )}
{!isRunning && ( )}
- {isRunning && - } + {isRunning && ( + + )}
); -}; \ 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 (
- { - questions ? -
-
- questionIcon -

- {questions[index].question_body} -

-
-
-
- { - questions[index].question_type_id === 1 ? -
-