apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

quiz

Browse Source
This commit is contained in:
Дмитрий Кравцов
2023-11-21 17:46:57 +03:00
parent ec7d0716b3
commit b0c9884fe4
9 changed files with 217 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
src/components/features/quiz/Task.js
View File

@ -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>
);
};