quiz
This commit is contained in:
parent
64374a4aff
commit
ec7d0716b3
@ -108,7 +108,7 @@ const App = () => {
|
||||
|
||||
<Route exact path="quiz">
|
||||
<Route index element={<QuizPage />} />
|
||||
<Route exact path="test" element={<PassingTests />} />
|
||||
<Route exact path="test/:uuid" element={<PassingTests />} />
|
||||
<Route exact path="report" element={<QuizReportPage />} />
|
||||
</Route>
|
||||
|
||||
|
||||
@ -5,15 +5,16 @@ import StarRating from "@components/StarRating/StarRating";
|
||||
|
||||
import rightArrow from "assets/icons/arrows/arrowRight.svg";
|
||||
|
||||
export const CardAvailableTest = ({ title, description, path, passedTest }) => {
|
||||
export const CardAvailableTest = ({ title, description, path, status }) => {
|
||||
return (
|
||||
<div className="card-available-test">
|
||||
<Link
|
||||
to={`/${path}`}
|
||||
aria-disabled={true}
|
||||
className="card-available-test__container"
|
||||
style={{
|
||||
opacity: passedTest ? 0.3 : 1,
|
||||
pointerEvents: passedTest ? "none" : "all",
|
||||
// opacity: status !== 1 ? 0.3 : 1,
|
||||
// pointerEvents: status !== 1 ? "none" : "all",
|
||||
}}
|
||||
>
|
||||
<div className="card-available-test__top-head">
|
||||
@ -27,8 +28,7 @@ export const CardAvailableTest = ({ title, description, path, passedTest }) => {
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{passedTest && (
|
||||
{status === 2 && (
|
||||
<div className="card-available-test__finished">
|
||||
<p>Получить отчет по тестированию</p>
|
||||
<Link to={"/quiz/report"}>Отчет по тесту</Link>
|
||||
|
||||
@ -1,44 +1,18 @@
|
||||
import React from "react";
|
||||
|
||||
export const GetOptionTask = ({ type, answer, handleChange, inputValue }) => {
|
||||
switch (type) {
|
||||
case "1":
|
||||
return (
|
||||
<div className="form-task__group">
|
||||
<textarea
|
||||
className="form-task__field"
|
||||
value={inputValue}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
case "3":
|
||||
return (
|
||||
<div className="form-task__group" key={answer.id}>
|
||||
<input
|
||||
className="form-task__check"
|
||||
type="checkbox"
|
||||
value={answer.answer_body}
|
||||
id={answer.id}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<label htmlFor={answer.id}>{answer.answer_body}</label>
|
||||
</div>
|
||||
);
|
||||
|
||||
default:
|
||||
return (
|
||||
<div className="form-task__group" key={answer.id}>
|
||||
<input
|
||||
className="form-task__check"
|
||||
type="radio"
|
||||
value={answer.answer_body}
|
||||
name={"radio"}
|
||||
id={answer.id}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<label htmlFor={answer.id}>{answer.answer_body}</label>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export const GetOptionTask = ({ type, answer, handleChange }) => {
|
||||
const {answer_body,id} = answer
|
||||
return (
|
||||
<div className="form-task__group" key={id}>
|
||||
<input
|
||||
className="form-task__check"
|
||||
type={+type === 3 ? "checkbox" : "radio"}
|
||||
value={answer_body}
|
||||
name={+type === 3 ? "checkbox" : "radio"}
|
||||
id={id}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<label htmlFor={id}>{answer_body}</label>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useEffect } from "react";
|
||||
import React from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
|
||||
import { selectUserInfo, setUserInfo } from "@redux/quizSlice";
|
||||
import { selectUserInfo } from "@redux/quizSlice";
|
||||
|
||||
import { urlForLocal } from "@utils/helper";
|
||||
|
||||
@ -13,14 +13,6 @@ export const HeaderQuiz = ({ header }) => {
|
||||
const userId = localStorage.getItem("id");
|
||||
const userInfo = useSelector(selectUserInfo);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(setUserInfo(userId));
|
||||
}, [userId, dispatch]);
|
||||
|
||||
useEffect(() => {
|
||||
// apiRequest(`/user-questionnaire/questionnaires-list?user_id=${userId}`)
|
||||
// .then(res => dispatch(setQuestionnairesList(res)))
|
||||
}, [userId, dispatch]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
@ -1,36 +1,67 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useTimer } from "react-timer-hook";
|
||||
|
||||
import { completedTestSelector } from "@redux/quizSlice";
|
||||
|
||||
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 timer from "assets/images/quiz/timer.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 { useNotification } from "@hooks/useNotification";
|
||||
|
||||
export const QuizPassingInformation = ({ expiryTimestamp, setStartTest }) => {
|
||||
const { seconds, minutes, isRunning, start, restart } = useTimer({
|
||||
expiryTimestamp,
|
||||
autoStart: false,
|
||||
onExpire: () => {
|
||||
console.warn("onExpire called");
|
||||
},
|
||||
});
|
||||
const completedTest = useSelector(completedTestSelector);
|
||||
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 = () => {
|
||||
setStartTest(true);
|
||||
start();
|
||||
apiRequest(
|
||||
`/question/get-questions?uuid=${uuid}`
|
||||
)
|
||||
.then((res) => {
|
||||
if (res.status === 400) {
|
||||
dispatch(setQuestions(null));
|
||||
showNotification({
|
||||
show: true,
|
||||
text: res?.message || "",
|
||||
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);
|
||||
})
|
||||
.catch(e => {
|
||||
dispatch(setQuestions(null));
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const checkTest = () => apiRequest(
|
||||
`user-questionnaire/questionnaire-completed?user_questionnaire_uuid=${uuid}`
|
||||
);
|
||||
|
||||
const completeTest = () => apiRequest(
|
||||
"/user-questionnaire/questionnaire-completed", {
|
||||
method: "POST"
|
||||
});
|
||||
|
||||
const finishQuiz = async () => {
|
||||
Promise.all([checkTest, completeTest])
|
||||
.then(function() {
|
||||
pause();
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (completedTest) {
|
||||
const time = new Date();
|
||||
time.setSeconds(time.getSeconds() + 0); //600 - кол-во секунд для прохождения теста
|
||||
restart(time, false);
|
||||
}
|
||||
}, [completedTest]);
|
||||
|
||||
return (
|
||||
<div className="quiz-passing-information">
|
||||
@ -48,22 +79,25 @@ export const QuizPassingInformation = ({ expiryTimestamp, setStartTest }) => {
|
||||
разработчик
|
||||
</div>
|
||||
</div>
|
||||
<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={timer} alt="" />
|
||||
<img src={iconTomer} alt="" />
|
||||
</div>
|
||||
<div className="quiz-passing-information__text">
|
||||
{completedTest ? "Время вышло" : "Время на прохождение теста:"}{" "}
|
||||
Время на прохождение теста:
|
||||
<br />
|
||||
<span>
|
||||
{minutes.toString().padStart(2, "0") +
|
||||
{hours.toString().padStart(2, "0") +
|
||||
":" +
|
||||
seconds.toString().padStart(2, "0")}{" "}
|
||||
minutes.toString().padStart(2, "0") +
|
||||
":" +
|
||||
seconds.toString().padStart(2, "0")
|
||||
}
|
||||
секунд
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
@ -71,9 +105,9 @@ export const QuizPassingInformation = ({ expiryTimestamp, setStartTest }) => {
|
||||
Попыток прохождения: <br />
|
||||
<span>1 попытка</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>}
|
||||
<div>
|
||||
{!completedTest && !isRunning && (
|
||||
{!isRunning && (
|
||||
<button
|
||||
className="quiz-passing-information__button btn-green"
|
||||
onClick={startTesting}
|
||||
@ -82,9 +116,9 @@ export const QuizPassingInformation = ({ expiryTimestamp, setStartTest }) => {
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{isRunning &&
|
||||
<button className="quiz-passing-information__button quiz-btn" onClick={finishQuiz}>Завершить</button>}
|
||||
</div>
|
||||
|
||||
{/* {isRunning && <button className="quiz-passing-information__button quiz-btn" onClick={pause}>Завершить</button>} */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,148 +1,138 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
|
||||
import {
|
||||
answersSelector,
|
||||
fetchGetAnswers, // fetchUserAnswerOne,
|
||||
// fetchUserAnswersMany,
|
||||
questionsSelector,
|
||||
selectedTest, // setAnswers,
|
||||
setCompleteTest,
|
||||
} from "@redux/quizSlice";
|
||||
|
||||
import { apiRequest } from "@api/request";
|
||||
|
||||
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 { HeaderQuiz } from "./HeaderQuiz";
|
||||
// import { Progressbar } from "./ProgressbarQuiz";
|
||||
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 { apiRequest } from "@api/request";
|
||||
import { useNotification } from "@hooks/useNotification";
|
||||
|
||||
export const TaskQuiz = () => {
|
||||
const dispatch = useDispatch();
|
||||
export const TaskQuiz = ({ timer }) => {
|
||||
|
||||
const answers = useSelector(answersSelector);
|
||||
const { restart } = timer;
|
||||
const { uuid } = useParams();
|
||||
const questions = useSelector(questionsSelector);
|
||||
|
||||
const dataTest = useSelector(selectedTest);
|
||||
const [index, setIndex] = useState(0);
|
||||
const [checkedValues, setCheckedValues] = useState([]);
|
||||
//const [stripValue, setStripValue] = useState(0);
|
||||
const [inputValue, setInputValue] = useState("");
|
||||
const [isLoadingSendAnswers, setLoadingSendAnswers] = useState(false);
|
||||
const { showNotification } = useNotification();
|
||||
|
||||
const id = localStorage.getItem("id");
|
||||
|
||||
useEffect(() => {
|
||||
// fetch('https://itguild.info/api/user-questionnaire/questionnaires-list?user_id=110').then(response => response.json())
|
||||
// .then(json => console.log(json))
|
||||
apiRequest(`/question/get-questions?uuid=${dataTest.uuid}`).then(
|
||||
(response) => {
|
||||
dispatch(fetchGetAnswers(response[0].id));
|
||||
setStripValue(((+index + 1) * 100) / response.length);
|
||||
}
|
||||
);
|
||||
}, [dispatch]);
|
||||
const { values, handleChange, setValues } = useHandlerFieldTest({
|
||||
uuid,
|
||||
questions,
|
||||
indexQuestion: index
|
||||
});
|
||||
|
||||
const nextQuestion = async (e) => {
|
||||
e.preventDefault();
|
||||
//Проверка на валидацию ответов
|
||||
if (!(checkedValues.length || inputValue)) {
|
||||
//Проверка на существование овтетов
|
||||
if (!(values.length)) {
|
||||
alert("Вы не ответили на вопрос");
|
||||
return;
|
||||
}
|
||||
|
||||
//отправка ответов на сервер
|
||||
if (questions[index].question_type_id != 3) {
|
||||
//dispatch(fetchUserAnswerOne(checkedValues));
|
||||
} else {
|
||||
console.log(checkedValues);
|
||||
// dispatch(fetchUserAnswersMany(checkedValues));
|
||||
}
|
||||
setLoadingSendAnswers(true);
|
||||
await apiRequest(`/user-response/set-responses`, {
|
||||
method: "POST",
|
||||
data: values
|
||||
})
|
||||
.then(res => {
|
||||
if (String(res?.status)[0] !== "2") {
|
||||
showNotification({
|
||||
show: true,
|
||||
text: res?.message || "",
|
||||
type: "error"
|
||||
});
|
||||
return
|
||||
}
|
||||
|
||||
//Проверка на окончание теста
|
||||
if (!(index < questions.length - 1)) {
|
||||
dispatch(setCompleteTest());
|
||||
return;
|
||||
}
|
||||
if (index === questions.length - 1) return;
|
||||
|
||||
dispatch(fetchGetAnswers(questions[index + 1].id));
|
||||
setIndex((prev) => prev + 1);
|
||||
setCheckedValues([]);
|
||||
setInputValue("");
|
||||
//установка таймера на вопрос если он существует
|
||||
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));
|
||||
};
|
||||
|
||||
const handleChange = (e) => {
|
||||
const checked = e.target.checked;
|
||||
|
||||
if (questions[index].question_type_id != 3) {
|
||||
setCheckedValues([
|
||||
{
|
||||
user_id: id,
|
||||
user_questionnaire_uuid: dataTest.uuid,
|
||||
question_id: questions[index].id,
|
||||
response_body: e.target.value,
|
||||
},
|
||||
]);
|
||||
return;
|
||||
}
|
||||
|
||||
checked
|
||||
? setCheckedValues((prev) => [
|
||||
...prev,
|
||||
{
|
||||
user_id: id,
|
||||
user_questionnaire_uuid: dataTest.uuid,
|
||||
question_id: questions[index].id,
|
||||
response_body: e.target.value,
|
||||
},
|
||||
])
|
||||
: setCheckedValues((prev) => [
|
||||
...prev.filter((item) => item.response_body !== e.target.value),
|
||||
]);
|
||||
const complete = (e) => {
|
||||
e.preventDefault();
|
||||
console.log(values);
|
||||
};
|
||||
|
||||
console.log("render task");
|
||||
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"));
|
||||
};
|
||||
|
||||
console.log(questions);
|
||||
return (
|
||||
<div className="task">
|
||||
{
|
||||
<div className="task__container">
|
||||
<div className="task__header">
|
||||
<img src={questionIcon} alt="" />
|
||||
<h3 className="task__title quiz-title_h3">
|
||||
{questions[index].question_body}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="task__body">
|
||||
<form className="task__form form-task" onSubmit={nextQuestion}>
|
||||
{answers.map((answer) => (
|
||||
<GetOptionTask
|
||||
key={answer.id}
|
||||
type={questions[index].question_type_id}
|
||||
handleChange={handleChange}
|
||||
answer={answer}
|
||||
/>
|
||||
))}
|
||||
<div className="form-task__buttons">
|
||||
{/* {
|
||||
index != 0 && <button type='submit' className='form-task__btn quiz-btn quiz-btn_back'
|
||||
onClick={prevQuestion}>Назад</button>
|
||||
} */}
|
||||
{index != questions.length && (
|
||||
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>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<h1>ОШибка</h1>
|
||||
}
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
40
src/hooks/useHandlerFieldTest.js
Normal file
40
src/hooks/useHandlerFieldTest.js
Normal file
@ -0,0 +1,40 @@
|
||||
import { useState } from "react";
|
||||
|
||||
export const useHandlerFieldTest = ({uuid,questions,indexQuestion}) => {
|
||||
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)
|
||||
]);
|
||||
return;
|
||||
}
|
||||
setValues((prev) => [
|
||||
...prev, {
|
||||
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}
|
||||
}
|
||||
@ -1,9 +1,7 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import { completedTestSelector } from "@redux/quizSlice";
|
||||
|
||||
import { Footer } from "@components/Common/Footer/Footer";
|
||||
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
||||
@ -12,13 +10,32 @@ 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 time = new Date();
|
||||
time.setSeconds(time.getSeconds() + 600); //600 - кол-во секунд для прохождения теста
|
||||
|
||||
const [startTest, setStartTest] = useState(false);
|
||||
const navigate = useNavigate()
|
||||
const completedTest = useSelector(completedTestSelector);
|
||||
const { uuid } = useParams()
|
||||
|
||||
const timer = useTimer({
|
||||
expiryTimestamp: moment(),
|
||||
autoStart: false,
|
||||
onExpire: () => {
|
||||
navigate("/quiz")
|
||||
}
|
||||
});
|
||||
|
||||
const onCloseWindow = (e) => {
|
||||
e.preventDefault();
|
||||
if(startTest){
|
||||
let confirmationMessage = "\o/";
|
||||
(e || window.e).returnValue = confirmationMessage;
|
||||
return confirmationMessage;
|
||||
}
|
||||
}
|
||||
|
||||
const introduction = [
|
||||
{
|
||||
@ -38,6 +55,23 @@ export const PassingTests = () => {
|
||||
},
|
||||
];
|
||||
|
||||
function onSwitchTab(e) {
|
||||
console.log(e,document.visibilityState);
|
||||
if (document.visibilityState === "hidden" && startTest) {
|
||||
alert("Убедительная просьба не покидать страницу и не переключаться. Рассчитывайте только на свои знания и умения!!!")
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
window.addEventListener("beforeunload", onCloseWindow);
|
||||
window.addEventListener("visibilitychange", onSwitchTab);
|
||||
window.onblur = onSwitchTab
|
||||
return () => {
|
||||
window.removeEventListener("beforeunload", onCloseWindow);
|
||||
window.removeEventListener("visibilitychange", onSwitchTab);
|
||||
}
|
||||
}, [startTest])
|
||||
|
||||
return (
|
||||
<div className="passing-tests-page">
|
||||
<ProfileHeader />
|
||||
@ -51,12 +85,13 @@ export const PassingTests = () => {
|
||||
]}
|
||||
/>
|
||||
<div className="passing-tests-page__title main-title">
|
||||
Тестирование в позиции Junior разработчик{" "}
|
||||
Тестирование в позиции Junior разработчик
|
||||
</div>
|
||||
<div className="passing-tests-page__passing-information">
|
||||
<QuizPassingInformation
|
||||
expiryTimestamp={time}
|
||||
timer={timer}
|
||||
setStartTest={setStartTest}
|
||||
uuid={uuid}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -68,7 +103,7 @@ export const PassingTests = () => {
|
||||
</div>
|
||||
)}
|
||||
{startTest ? (
|
||||
<TaskQuiz />
|
||||
<TaskQuiz timer={timer}/>
|
||||
) : (
|
||||
<div className="passing-tests-page__introduction">
|
||||
{introduction.map((item, i) => (
|
||||
@ -98,6 +133,13 @@ export const PassingTests = () => {
|
||||
)}
|
||||
</div>
|
||||
<Footer />
|
||||
{/*<Prompt*/}
|
||||
{/* when={showPrompt}*/}
|
||||
{/* message="Unsaved changes detected, continue?"*/}
|
||||
{/* beforeUnload={true}*/}
|
||||
{/*/>*/}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@ import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
|
||||
import "./quiz-page.scss";
|
||||
|
||||
export const QuizPage = () => {
|
||||
const questionnaires = useSelector(questionnairesSelector);
|
||||
const [questionnaires,setQuestionnaires] = useState([]);
|
||||
const dispatch = useDispatch();
|
||||
const [personalInfoItems] = useState([
|
||||
{
|
||||
@ -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,16 +95,18 @@ 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);
|
||||
const [selectedCategory, setSetSelectedCategory] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
apiRequest(
|
||||
`/user-questionnaire/questionnaires-list?user_id=${userId}`
|
||||
).then((res) => dispatch(setQuestionnaires(res)));
|
||||
)
|
||||
.then(res => setQuestionnaires(res))
|
||||
.catch(e => console.log(e));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
@ -115,7 +117,7 @@ export const QuizPage = () => {
|
||||
<ProfileBreadcrumbs
|
||||
links={[
|
||||
{ name: "Главная", link: "/profile-candidate" },
|
||||
{ name: "Тестирование", link: "/quiz" },
|
||||
{ name: "Тестирование", link: "/quiz" }
|
||||
]}
|
||||
/>
|
||||
<div className="quiz-page__title main-title">
|
||||
@ -124,17 +126,15 @@ export const QuizPage = () => {
|
||||
{!selectedCategory && (
|
||||
<>
|
||||
<div className="quiz-page__specialization">
|
||||
<SelectedCategory setSelectedCategory={setsetSelectedCategory} />
|
||||
<SelectedCategory setSelectedCategory={setSetSelectedCategory} />
|
||||
</div>
|
||||
<div className="quiz-page__block">Доступные тесты</div>
|
||||
<div className="quiz-page__cards-test">
|
||||
{questionnaires.length ? (
|
||||
questionnaires.map((item, index) => (
|
||||
<CardAvailableTest
|
||||
description={
|
||||
"Вы новичок с реальным опытом работы до 1 года, или без опыта"
|
||||
}
|
||||
path={"quiz/test"}
|
||||
description={item.description}
|
||||
path={`quiz/test/${item.uuid}`}
|
||||
status={item.status}
|
||||
title={item.questionnaire_title}
|
||||
passedTest={item.passedTest}
|
||||
@ -151,7 +151,6 @@ export const QuizPage = () => {
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{selectedCategory && (
|
||||
<div className="quiz-page__categories-items">
|
||||
{personalInfoItems.map((item, index) => {
|
||||
|
||||
@ -32,12 +32,11 @@ export const QuizReportPage = () => {
|
||||
]}
|
||||
/>
|
||||
<div className="quiz-report-page__title main-title">
|
||||
Отчет по тестированию позиции Junior разработчик{" "}
|
||||
Отчет по тестированию позиции Junior разработчик
|
||||
</div>
|
||||
<div className="quiz-report-page__report-quiz">
|
||||
<QuizReport />
|
||||
</div>
|
||||
|
||||
<AlertResult />
|
||||
</div>
|
||||
<Footer />
|
||||
|
||||
@ -1,151 +1,53 @@
|
||||
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
|
||||
|
||||
import { apiRequest } from "../api/request";
|
||||
import { apiRequest } from "@api/request";
|
||||
import moment from "moment";
|
||||
|
||||
const initialState = {
|
||||
answers: [
|
||||
{
|
||||
id: "12",
|
||||
question_id: "7",
|
||||
answer_body:
|
||||
"Нsdf sfd fds sdf sf sfsdf sdfеск вsdffsdfsdf sf sdf sdfsdfsdfsdfdsjknsdkf dssdjf sdfbsdhf sd hjdsfv sdhjvар1 отв1 истина",
|
||||
},
|
||||
{
|
||||
id: "23",
|
||||
question_id: "7",
|
||||
answer_body: "Неск вар1 отв1 истина",
|
||||
},
|
||||
{
|
||||
id: "233",
|
||||
question_id: "7",
|
||||
answer_body: "lorem sdfdsf dfs sdf ",
|
||||
},
|
||||
],
|
||||
questions: null,
|
||||
questionnaires: [],
|
||||
questions: [
|
||||
{
|
||||
id: "4",
|
||||
question_type_id: "3",
|
||||
question_body:
|
||||
"Для чего в Python используется встроенная функция enumerate()?",
|
||||
question_priority: null,
|
||||
next_question: null,
|
||||
time_limit: "00:22:00",
|
||||
},
|
||||
{
|
||||
id: "24",
|
||||
question_type_id: "3",
|
||||
question_body: "Для чего в Python dfsf троенная функция enumerate()?",
|
||||
question_priority: null,
|
||||
next_question: null,
|
||||
time_limit: "00:22:00",
|
||||
},
|
||||
{
|
||||
id: "41",
|
||||
question_type_id: "3",
|
||||
question_body: "Для чегоsdfsdfя функция enumerate()?",
|
||||
question_priority: null,
|
||||
next_question: null,
|
||||
time_limit: "00:22:00",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
question_type_id: "2",
|
||||
question_body: "Один ответ2",
|
||||
question_priority: null,
|
||||
next_question: null,
|
||||
time_limit: "00:22:00",
|
||||
},
|
||||
],
|
||||
selectedTest: {
|
||||
user_id: 1,
|
||||
uuid: "d222f858-60fd-47fb-8731-dc9d5fc384c5",
|
||||
score: 11,
|
||||
status: 2,
|
||||
percent_correct_answers: 0.25,
|
||||
testing_date: "2022-03-17 11:14:22",
|
||||
questionnaire_title: "Кат1 Анкета 1 активна",
|
||||
},
|
||||
selectedAnswers: {},
|
||||
completedTest: false,
|
||||
selectedTest: {},
|
||||
result: null,
|
||||
isLoading: false,
|
||||
dataQuestionnairesOfUser: [],
|
||||
passedTests: [],
|
||||
|
||||
userInfo: null,
|
||||
};
|
||||
export const setUserInfo = createAsyncThunk("userInfo", (id) =>
|
||||
apiRequest(`/profile/get-main-data?user_id=${id}`)
|
||||
);
|
||||
|
||||
export const fetchUserAnswersMany = createAsyncThunk(
|
||||
"answersUserMany",
|
||||
(checkedValues) =>
|
||||
apiRequest("/user-response/set-responses", {
|
||||
method: "POST",
|
||||
data: { userResponses: checkedValues },
|
||||
})
|
||||
);
|
||||
|
||||
export const fetchUserAnswerOne = createAsyncThunk(
|
||||
"answersUserOne",
|
||||
(checkedValues) =>
|
||||
apiRequest("/user-response/set-response", {
|
||||
method: "POST",
|
||||
data: checkedValues[0],
|
||||
})
|
||||
);
|
||||
|
||||
export const fetchGetAnswers = createAsyncThunk("answers", (question_id) =>
|
||||
apiRequest(`/answer/get-answers?question_id=${question_id}`)
|
||||
);
|
||||
|
||||
export const fetchResultTest = createAsyncThunk("result", (uuid) =>
|
||||
apiRequest(
|
||||
`/user-questionnaire/questionnaire-completed?user_questionnaire_uuid=${uuid}`
|
||||
)
|
||||
export const fetchResultTest = createAsyncThunk(
|
||||
"result",
|
||||
(uuid) =>
|
||||
apiRequest(
|
||||
`/user-questionnaire/questionnaire-completed?user_questionnaire_uuid=${uuid}`
|
||||
)
|
||||
);
|
||||
|
||||
export const quizSlice = createSlice({
|
||||
name: "quiz",
|
||||
initialState,
|
||||
reducers: {
|
||||
setQuestionnaires: (state, action) => {
|
||||
state.questionnaires = action.payload;
|
||||
},
|
||||
setSelectedTest: (state, action) => {
|
||||
state.selectedTest = action.payload;
|
||||
setQuestions: (state, action) => {
|
||||
state.questions = action.payload;
|
||||
},
|
||||
setCompleteTest: (state) => {
|
||||
state.completedTest = true;
|
||||
},
|
||||
}
|
||||
},
|
||||
extraReducers: {
|
||||
[setUserInfo.fulfilled]: (state, action) => {
|
||||
state.userInfo = action.payload;
|
||||
},
|
||||
[fetchGetAnswers.fulfilled]: (state, action) => {
|
||||
state.answer = action.payload;
|
||||
},
|
||||
[fetchResultTest.fulfilled]: (state, action) => {
|
||||
state.result = action.payload;
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export const { setQuestionnaires, setSelectedTest, setCompleteTest } =
|
||||
quizSlice.actions;
|
||||
export const {
|
||||
setQuestions,
|
||||
} = quizSlice.actions;
|
||||
|
||||
|
||||
export const answersSelector = (state) => state.quiz.answers;
|
||||
export const questionnairesSelector = (state) => state.quiz.questionnaires;
|
||||
export const selectedAnswersSelector = (state) => state.quiz.selectedAnswers;
|
||||
export const questionsSelector = (state) => state.quiz.questions;
|
||||
export const completedTestSelector = (state) => state.quiz.completedTest;
|
||||
|
||||
export const selectResult = (state) => state.quiz.result;
|
||||
export const selectedTest = (state) => state.quiz.selectedTest;
|
||||
export const selectPassedTests = (state) => state.quiz.passedTests;
|
||||
export const selectUserInfo = (state) => state.quiz.userInfo;
|
||||
|
||||
|
||||
export default quizSlice.reducer;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user