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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/features/quiz/CardAviableTest.jsx
View File

@ -12,10 +12,12 @@ export const CardAvailableTest = ({ title, description, path, status }) => {
to={`/${path}`}
aria-disabled={true}
className="card-available-test__container"
style={{
style={
{
// opacity: status !== 1 ? 0.3 : 1,
// pointerEvents: status !== 1 ? "none" : "all",
}}
}
}
>
<div className="card-available-test__top-head">
<StarRating />

2
src/components/features/quiz/GetOptionTask.jsx
View File

@ -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

1
src/components/features/quiz/HeaderQuiz.jsx
View File

@ -13,7 +13,6 @@ export const HeaderQuiz = ({ header }) => {
const userId = localStorage.getItem("id");
const userInfo = useSelector(selectUserInfo);
return (
<div>
{userInfo?.status === 500 ? (

71
src/components/features/quiz/Quiz-passing-information.jsx
View File

@ -1,55 +1,60 @@
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()
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);
.add(res[0]?.time_limit.split(":")[2], "seconds"),
true
);
})
.catch(e => {
.catch((e) => {
dispatch(setQuestions(null));
});
};
const checkTest = () => apiRequest(
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 () => {
@ -57,12 +62,11 @@ export const QuizPassingInformation = ({ setStartTest, uuid, timer }) => {
.then(function () {
pause();
})
.catch(e => {
.catch((e) => {
console.log(e);
});
};
return (
<div className="quiz-passing-information">
<div className="quiz-passing-information__container">
@ -79,7 +83,8 @@ export const QuizPassingInformation = ({ setStartTest, uuid, timer }) => {
разработчик
</div>
</div>
{isRunning && <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={iconTomer} alt="" />
</div>
@ -91,13 +96,14 @@ export const QuizPassingInformation = ({ setStartTest, uuid, timer }) => {
":" +
minutes.toString().padStart(2, "0") +
":" +
seconds.toString().padStart(2, "0")
}
seconds.toString().padStart(2, "0")}
секунд
</span>
</div>
</div>}
{!isRunning && <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>
@ -105,7 +111,8 @@ export const QuizPassingInformation = ({ setStartTest, uuid, timer }) => {
Попыток прохождения: <br />
<span>1 попытка</span>
</div>
</div>}
</div>
)}
<div>
{!isRunning && (
<button
@ -116,8 +123,14 @@ 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>

77
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,17 +81,18 @@ export const TaskQuiz = ({ timer }) => {
const setValueTimer = () => {
const time_limit = questions[index + 1].time_limit.split(":");
restart(moment()
restart(
moment()
.add(time_limit[0], "hours")
.add(time_limit[1], "minutes")
.add(time_limit[2], "seconds"));
.add(time_limit[2], "seconds")
);
};
console.log(questions);
return (
<div className="task">
{
questions ?
{questions ? (
<div className="task__container">
<div className="task__header">
<img src={questionIcon} alt="questionIcon" />
@ -95,10 +101,13 @@ export const TaskQuiz = ({ timer }) => {
</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 ?
<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"
@ -106,7 +115,8 @@ export const TaskQuiz = ({ timer }) => {
onChange={handleChange}
/>
</div>
: questions[index]?.answers?.map((answer) => (
) : (
questions[index]?.answers?.map((answer) => (
<GetOptionTask
key={answer.id}
type={questions[index].question_type_id}
@ -114,25 +124,28 @@ export const TaskQuiz = ({ timer }) => {
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 ? "Далее" : "Завершить")
}
{isLoadingSendAnswers ? (
<Loader width={25} height={25} />
) : index !== questions.length - 1 ? (
"Далее"
) : (
"Завершить"
)}
</button>
</div>
</form>
</div>
</div>
:
) : (
<h1>ОШибка</h1>
}
)}
</div>
);
};

28
src/hooks/useHandlerFieldTest.js
View File

@ -1,40 +1,42 @@
import { useState } from "react";
export const useHandlerFieldTest = ({ uuid, questions, indexQuestion }) => {
const [values, setValues] = useState([])
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([{
setValues([
{
user_id: id,
user_questionnaire_uuid: uuid,
question_id: questions[indexQuestion].id,
response_body: e.target.value
}
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 };
};
return {handleChange,values,setValues}
}

31
src/pages/quiz/PassingTests.js
View File

@ -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/";
let confirmationMessage = "o/";
(e || window.e).returnValue = confirmationMessage;
return confirmationMessage;
}
}
};
const introduction = [
{
@ -58,19 +59,21 @@ export const PassingTests = () => {
function onSwitchTab(e) {
console.log(e, document.visibilityState);
if (document.visibilityState === "hidden" && startTest) {
alert("Убедительная просьба не покидать страницу и не переключаться. Рассчитывайте только на свои знания и умения!!!")
alert(
"Убедительная просьба не покидать страницу и не переключаться. Рассчитывайте только на свои знания и умения!!!"
);
}
}
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">
@ -141,5 +144,3 @@ export const PassingTests = () => {
</div>
);
};

30
src/pages/quiz/QuizPage.js
View File

@ -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">

18
src/redux/quizSlice.js
View File

@ -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,9 +11,7 @@ const initialState = {
result: null,
};
export const fetchResultTest = createAsyncThunk(
"result",
(uuid) =>
export const fetchResultTest = createAsyncThunk("result", (uuid) =>
apiRequest(
`/user-questionnaire/questionnaire-completed?user_questionnaire_uuid=${uuid}`
)
@ -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;