quiz + lk-candidate
This commit is contained in:
@ -1,39 +1,42 @@
|
||||
import React, {useEffect, useState} from 'react'
|
||||
import {useNavigate} from "react-router-dom"
|
||||
import {useSelector, useDispatch} from 'react-redux'
|
||||
|
||||
import {Progressbar} from './ProgressbarQuiz'
|
||||
import {GetOptionTask} from './GetOptionTask'
|
||||
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import questionIcon from "../../../images/question.png"
|
||||
import { Progressbar } from './ProgressbarQuiz'
|
||||
import { GetOptionTask } from './GetOptionTask'
|
||||
import {
|
||||
fetchUserAnswersMany, fetchUserAnswerOne, fetchGetAnswers, selectAnswer, selectedTest
|
||||
fetchUserAnswersMany, fetchUserAnswerOne, fetchGetAnswers, answersSelector, selectedTest, questionsSelector, setAnswers, setCompleteTest
|
||||
} from './../../../redux/quizSlice'
|
||||
|
||||
import './quiz.scss'
|
||||
import {apiRequest} from "../../../api/request";
|
||||
import { apiRequest } from "../../../api/request";
|
||||
import { HeaderQuiz } from './HeaderQuiz'
|
||||
|
||||
export const TaskQuiz = () => {
|
||||
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const listAnswers = useSelector(selectAnswer);
|
||||
const dataTest = useSelector(selectedTest);
|
||||
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 [stripValue, setStripValue] = useState(0);
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
const [questions, setQuestions] = 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) => {
|
||||
console.log(response)
|
||||
setQuestions(response);
|
||||
dispatch(fetchGetAnswers(response[0].id));
|
||||
setStripValue((+index + 1) * 100 / response.length)
|
||||
})
|
||||
@ -41,108 +44,98 @@ export const TaskQuiz = () => {
|
||||
|
||||
const nextQuestion = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
//Проверка на валидацию ответов
|
||||
if (checkedValues.length || inputValue) {
|
||||
switch (questions[index].question_type_id) {
|
||||
case '3':
|
||||
dispatch(fetchUserAnswersMany(checkedValues));
|
||||
break;
|
||||
case '2':
|
||||
case '1':
|
||||
case '4':
|
||||
dispatch(fetchUserAnswerOne(checkedValues));
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
//Проверка на существование следующего запроса
|
||||
if (index < questions.length - 1) {
|
||||
await dispatch(fetchGetAnswers(questions[index + 1].id));
|
||||
setIndex(prev => prev >= questions.length - 1 ? prev : prev + 1);
|
||||
setStripValue((prev => prev + (100 / questions.length)));
|
||||
setCheckedValues([]);
|
||||
setInputValue('')
|
||||
} else {
|
||||
navigate(`/quiz/result`);
|
||||
alert("Тест пройден!")
|
||||
}
|
||||
|
||||
} else {
|
||||
if (!(checkedValues.length || inputValue)) {
|
||||
alert("Вы не ответили на вопрос")
|
||||
return
|
||||
}
|
||||
|
||||
//отправка ответов на сервер
|
||||
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
|
||||
}
|
||||
|
||||
dispatch(fetchGetAnswers(questions[index + 1].id));
|
||||
setIndex(prev => prev + 1);
|
||||
setCheckedValues([]);
|
||||
setInputValue('')
|
||||
};
|
||||
|
||||
|
||||
const handleChange = (e) => {
|
||||
const checked = e.target.checked;
|
||||
switch (questions[index].question_type_id) {
|
||||
case '3':
|
||||
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)]);
|
||||
break;
|
||||
case '1':
|
||||
case '2':
|
||||
case '4':
|
||||
setCheckedValues([{
|
||||
user_id: id,
|
||||
user_questionnaire_uuid: dataTest.uuid,
|
||||
question_id: questions[index].id,
|
||||
response_body: e.target.value
|
||||
}])
|
||||
|
||||
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)]);
|
||||
};
|
||||
|
||||
|
||||
console.log('render task');
|
||||
|
||||
|
||||
return (
|
||||
<React.StrictMode>
|
||||
<Progressbar indexQuestion={index + 1} width={stripValue}/>
|
||||
<div className="task">
|
||||
{!questions.length || !stripValue || !listAnswers.length ?
|
||||
<h1 className={'_container'} style={{display: "block"}}>Loading....</h1>
|
||||
:
|
||||
<div className="task__container">
|
||||
<div className="task__code code">
|
||||
{/* <CodeSnippetlighter /> */}
|
||||
</div>
|
||||
<h3 className="task__title quiz-title_h3">{questions[index].question_body}</h3>
|
||||
<div className="task__body">
|
||||
<form className='task__form form-task'>
|
||||
{
|
||||
questions[index].question_type_id === 1 ?
|
||||
<GetOptionTask
|
||||
type={1}
|
||||
inputValue={checkedValues.length ? checkedValues[0].response_body : ''}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
:
|
||||
listAnswers.map((answer) => (
|
||||
<GetOptionTask
|
||||
key={answer.id}
|
||||
type={questions[index].question_type_id}
|
||||
handleChange={handleChange}
|
||||
answer={answer}
|
||||
/>
|
||||
))
|
||||
}
|
||||
<div className="form-task__buttons">
|
||||
{questions.length !== index + 1 &&
|
||||
<button type='submit' className='quiz-btn'
|
||||
onClick={(e) => nextQuestion(e)}>Далее</button>}
|
||||
{questions.length === index + 1 &&
|
||||
<button onClick={(e) => nextQuestion(e)}
|
||||
className='quiz-btn quiz-btn_dark-green'>Завершить</button>}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<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 && <button onClick={nextQuestion}
|
||||
className='form-task__btn quiz-btn'>Далее</button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</React.StrictMode>
|
||||
|
||||
}
|
||||
</div>
|
||||
|
||||
)
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user