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