Compare commits

..

No commits in common. "b0c9884fe477da2a5079c92652fe034736389c7b" and "64374a4affe0b589a584bd2086061324e800fff4" have entirely different histories.

11 changed files with 345 additions and 339 deletions

View File

@ -108,7 +108,7 @@ const App = () => {
<Route exact path="quiz">
<Route index element={<QuizPage />} />
<Route exact path="test/:uuid" element={<PassingTests />} />
<Route exact path="test" element={<PassingTests />} />
<Route exact path="report" element={<QuizReportPage />} />
</Route>

View File

@ -5,19 +5,16 @@ import StarRating from "@components/StarRating/StarRating";
import rightArrow from "assets/icons/arrows/arrowRight.svg";
export const CardAvailableTest = ({ title, description, path, status }) => {
export const CardAvailableTest = ({ title, description, path, passedTest }) => {
return (
<div className="card-available-test">
<Link
to={`/${path}`}
aria-disabled={true}
className="card-available-test__container"
style={
{
// opacity: status !== 1 ? 0.3 : 1,
// pointerEvents: status !== 1 ? "none" : "all",
}
}
style={{
opacity: passedTest ? 0.3 : 1,
pointerEvents: passedTest ? "none" : "all",
}}
>
<div className="card-available-test__top-head">
<StarRating />
@ -30,7 +27,8 @@ export const CardAvailableTest = ({ title, description, path, status }) => {
</div>
</div>
</Link>
{status === 2 && (
{passedTest && (
<div className="card-available-test__finished">
<p>Получить отчет по тестированию</p>
<Link to={"/quiz/report"}>Отчет по тесту</Link>

View File

@ -1,18 +1,44 @@
import React from "react";
export const GetOptionTask = ({ type, answer, handleChange }) => {
const { answer_body, id } = answer;
export const GetOptionTask = ({ type, answer, handleChange, inputValue }) => {
switch (type) {
case "1":
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}
<div className="form-task__group">
<textarea
className="form-task__field"
value={inputValue}
onChange={handleChange}
/>
<label htmlFor={id}>{answer_body}</label>
</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>
);
}
};

View File

@ -1,7 +1,7 @@
import React from "react";
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { selectUserInfo } from "@redux/quizSlice";
import { selectUserInfo, setUserInfo } from "@redux/quizSlice";
import { urlForLocal } from "@utils/helper";
@ -13,6 +13,15 @@ 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>
{userInfo?.status === 500 ? (

View File

@ -1,71 +1,36 @@
import moment from "moment";
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import { useTimer } from "react-timer-hook";
import { setQuestions } from "@redux/quizSlice";
import { apiRequest } from "@api/request";
import { useNotification } from "@hooks/useNotification";
import { completedTestSelector } 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 timer 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();
export const QuizPassingInformation = ({ expiryTimestamp, setStartTest }) => {
const { seconds, minutes, isRunning, start, restart } = useTimer({
expiryTimestamp,
autoStart: false,
onExpire: () => {
console.warn("onExpire called");
},
});
const completedTest = useSelector(completedTestSelector);
const startTesting = () => {
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));
});
start();
};
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">
@ -83,26 +48,21 @@ export const QuizPassingInformation = ({ setStartTest, uuid, timer }) => {
разработчик
</div>
</div>
{isRunning && (
<div className="quiz-passing-information__timer timer-quiz">
<div className="quiz-passing-information__icon">
<img src={iconTomer} alt="" />
<img src={timer} alt="" />
</div>
<div className="quiz-passing-information__text">
Время на прохождение теста:
{completedTest ? "Время вышло" : "Время на прохождение теста:"}{" "}
<br />
<span>
{hours.toString().padStart(2, "0") +
{minutes.toString().padStart(2, "0") +
":" +
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 className="quiz-passing-information__icon">
<img src={accempt} alt="" />
@ -112,9 +72,8 @@ export const QuizPassingInformation = ({ setStartTest, uuid, timer }) => {
<span>1 попытка</span>
</div>
</div>
)}
<div>
{!isRunning && (
{!completedTest && !isRunning && (
<button
className="quiz-passing-information__button btn-green"
onClick={startTesting}
@ -123,15 +82,9 @@ export const QuizPassingInformation = ({ setStartTest, uuid, timer }) => {
</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>
);

View File

@ -1,151 +1,148 @@
import moment from "moment";
import React, { useState } from "react";
import { useSelector } from "react-redux";
import { useParams } from "react-router-dom";
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { questionsSelector } from "@redux/quizSlice";
import {
answersSelector,
fetchGetAnswers, // fetchUserAnswerOne,
// fetchUserAnswersMany,
questionsSelector,
selectedTest, // setAnswers,
setCompleteTest,
} from "@redux/quizSlice";
import { apiRequest } from "@api/request";
import { useHandlerFieldTest } from "@hooks/useHandlerFieldTest";
import { useNotification } from "@hooks/useNotification";
import { Loader } from "@components/Common/Loader/Loader";
import questionIcon from "assets/images/question.png";
import { GetOptionTask } from "./GetOptionTask";
// import { HeaderQuiz } from "./HeaderQuiz";
// import { Progressbar } from "./ProgressbarQuiz";
import "./quiz.scss";
export const TaskQuiz = ({ timer }) => {
const { restart } = timer;
const { uuid } = useParams();
const questions = useSelector(questionsSelector);
const [index, setIndex] = useState(0);
const [isLoadingSendAnswers, setLoadingSendAnswers] = useState(false);
const { showNotification } = useNotification();
export const TaskQuiz = () => {
const dispatch = useDispatch();
const { values, handleChange, setValues } = useHandlerFieldTest({
uuid,
questions,
indexQuestion: index,
});
const answers = useSelector(answersSelector);
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 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 nextQuestion = async (e) => {
e.preventDefault();
//Проверка на существование овтетов
if (!values.length) {
//Проверка на валидацию ответов
if (!(checkedValues.length || inputValue)) {
alert("Вы не ответили на вопрос");
return;
}
//отправка ответов на сервер
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",
});
if (questions[index].question_type_id != 3) {
//dispatch(fetchUserAnswerOne(checkedValues));
} else {
console.log(checkedValues);
// dispatch(fetchUserAnswersMany(checkedValues));
}
//Проверка на окончание теста
if (!(index < questions.length - 1)) {
dispatch(setCompleteTest());
return;
}
if (index === questions.length - 1) return;
//установка таймера на вопрос если он существует
if (questions[index + 1]?.time_limit !== "00:00:00") setValueTimer();
// очищение полей и переход на следующий вопрос
dispatch(fetchGetAnswers(questions[index + 1].id));
setIndex((prev) => prev + 1);
setValues([]);
})
.catch((e) => {
showNotification({
show: true,
text: e?.message || "",
type: "error",
});
})
.finally(() => setLoadingSendAnswers(false));
setCheckedValues([]);
setInputValue("");
};
const complete = (e) => {
e.preventDefault();
console.log(values);
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 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("render task");
console.log(questions);
return (
<div className="task">
{questions ? (
{
<div className="task__container">
<div className="task__header">
<img src={questionIcon} alt="questionIcon" />
<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={
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) => (
<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 && (
<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>
);
};

View File

@ -1,42 +0,0 @@
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 };
};

View File

@ -1,8 +1,6 @@
import moment from "moment";
import React, { useEffect, useState } from "react";
import React, { useState } from "react";
import { useSelector } from "react-redux";
import { Link, useNavigate, useParams } from "react-router-dom";
import { useTimer } from "react-timer-hook";
import { Link } from "react-router-dom";
import { completedTestSelector } from "@redux/quizSlice";
@ -16,27 +14,11 @@ import { QuizPassingInformation } from "@components/features/quiz/Quiz-passing-i
import { TaskQuiz } from "@components/features/quiz/Task";
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 = [
{
@ -56,25 +38,6 @@ 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 />
@ -88,13 +51,12 @@ export const PassingTests = () => {
]}
/>
<div className="passing-tests-page__title main-title">
Тестирование в позиции Junior разработчик
Тестирование в позиции Junior разработчик{" "}
</div>
<div className="passing-tests-page__passing-information">
<QuizPassingInformation
timer={timer}
expiryTimestamp={time}
setStartTest={setStartTest}
uuid={uuid}
/>
</div>
@ -106,7 +68,7 @@ export const PassingTests = () => {
</div>
)}
{startTest ? (
<TaskQuiz timer={timer} />
<TaskQuiz />
) : (
<div className="passing-tests-page__introduction">
{introduction.map((item, i) => (
@ -136,11 +98,6 @@ export const PassingTests = () => {
)}
</div>
<Footer />
{/*<Prompt*/}
{/* when={showPrompt}*/}
{/* message="Unsaved changes detected, continue?"*/}
{/* beforeUnload={true}*/}
{/*/>*/}
</div>
);
};

View File

@ -27,7 +27,7 @@ import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
import "./quiz-page.scss";
export const QuizPage = () => {
const [questionnaires, setQuestionnaires] = useState([]);
const questionnaires = useSelector(questionnairesSelector);
const dispatch = useDispatch();
const [personalInfoItems] = useState([
{
@ -99,12 +99,12 @@ export const QuizPage = () => {
},
]);
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) => setQuestionnaires(res))
.catch((e) => console.log(e));
apiRequest(
`/user-questionnaire/questionnaires-list?user_id=${userId}`
).then((res) => dispatch(setQuestionnaires(res)));
}, []);
return (
@ -124,15 +124,17 @@ 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={item.description}
path={`quiz/test/${item.uuid}`}
description={
"Вы новичок с реальным опытом работы до 1 года, или без опыта"
}
path={"quiz/test"}
status={item.status}
title={item.questionnaire_title}
passedTest={item.passedTest}
@ -149,6 +151,7 @@ export const QuizPage = () => {
</div>
</>
)}
{selectedCategory && (
<div className="quiz-page__categories-items">
{personalInfoItems.map((item, index) => {

View File

@ -32,11 +32,12 @@ 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 />

View File

@ -1,15 +1,105 @@
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import moment from "moment";
import { apiRequest } from "@api/request";
import { apiRequest } from "../api/request";
const initialState = {
questions: null,
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 ",
},
],
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(
@ -21,27 +111,41 @@ export const quizSlice = createSlice({
name: "quiz",
initialState,
reducers: {
setQuestions: (state, action) => {
state.questions = action.payload;
setQuestionnaires: (state, action) => {
state.questionnaires = action.payload;
},
setSelectedTest: (state, action) => {
state.selectedTest = 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 { setQuestions } = quizSlice.actions;
export const { setQuestionnaires, setSelectedTest, setCompleteTest } =
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;