quiz
This commit is contained in:
parent
2588a72b02
commit
7e5503e576
@ -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);
|
||||
|
||||
// setLoadingSendAnswers(true);
|
||||
// .finally(() => setLoadingSendAnswers(false));
|
||||
|
||||
// отправка ответов на сервер
|
||||
if (questions.length === userResponses.length) {
|
||||
await apiRequest(`/user-response/set-responses`, {
|
||||
method: "POST",
|
||||
data: values,
|
||||
data: {
|
||||
user_id: userId,
|
||||
user_questionnaire_uuid: uuid,
|
||||
userResponses: JSON.stringify(userResponses)
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (String(res?.status)[0] !== "2") {
|
||||
.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();
|
||||
|
||||
// очищение полей и переход на следующий вопрос
|
||||
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 ? (
|
||||
|
@ -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};
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user