completed PsychTest page
This commit is contained in:
parent
c88fa484da
commit
b512115444
|
@ -97,7 +97,6 @@ class Migration(migrations.Migration):
|
|||
('tenth_question', models.IntegerField(validators=[django.core.validators.MaxValueValidator(5)], verbose_name='Ответ на десятый вопрос')),
|
||||
('eleventh_question', models.IntegerField(validators=[django.core.validators.MaxValueValidator(5)], verbose_name='Ответ на одиннадцатый вопрос')),
|
||||
('twelfth_question', models.IntegerField(validators=[django.core.validators.MaxValueValidator(5)], verbose_name='Ответ на двенадцатый вопрос')),
|
||||
('thirteenth_question', models.IntegerField(validators=[django.core.validators.MaxValueValidator(5)], verbose_name='Ответ на тринадцатый вопрос')),
|
||||
('users', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='pairent_app.user', verbose_name='Пользователь')),
|
||||
],
|
||||
),
|
||||
|
|
|
@ -122,7 +122,6 @@ class PsychTestAnswers(models.Model):
|
|||
tenth_question = models.IntegerField(validators=[MaxValueValidator(5)], verbose_name="Ответ на десятый вопрос")
|
||||
eleventh_question = models.IntegerField(validators=[MaxValueValidator(5)], verbose_name="Ответ на одиннадцатый вопрос")
|
||||
twelfth_question = models.IntegerField(validators=[MaxValueValidator(5)], verbose_name="Ответ на двенадцатый вопрос")
|
||||
thirteenth_question = models.IntegerField(validators=[MaxValueValidator(5)], verbose_name="Ответ на тринадцатый вопрос")
|
||||
|
||||
class Meta:
|
||||
verbose_name = "Ответ на психологический тест"
|
||||
|
|
|
@ -98,19 +98,18 @@ class PsychTestAddResultViewSet(viewsets.ViewSet):
|
|||
results = request.data
|
||||
PsychTestAnswers.objects.create(
|
||||
user=user,
|
||||
first_question=results['first'],
|
||||
second_question=results['second'],
|
||||
third_question=results['third'],
|
||||
fourth_question=results['fourth'],
|
||||
fifth_question=results['fifth'],
|
||||
sixth_question=results['sixth'],
|
||||
seventh_question=results['seventh'],
|
||||
eighth_question=results['eighth'],
|
||||
nineth_question=results['nineth'],
|
||||
tenth_question=results['tenth'],
|
||||
eleventh_question=results['eleventh'],
|
||||
twelfth_question=results['twelfth'],
|
||||
thirteenth_question=results['thirteenth']
|
||||
first_question=results[0],
|
||||
second_question=results[1],
|
||||
third_question=results[2],
|
||||
fourth_question=results[3],
|
||||
fifth_question=results[4],
|
||||
sixth_question=results[5],
|
||||
seventh_question=results[6],
|
||||
eighth_question=results[7],
|
||||
nineth_question=results[8],
|
||||
tenth_question=results[9],
|
||||
eleventh_question=results[10],
|
||||
twelfth_question=results[11]
|
||||
)
|
||||
return Response({'successfully': 'results post'})
|
||||
|
||||
|
|
|
@ -0,0 +1,116 @@
|
|||
import PsychTestQuestion from "../PsychTestQuestion";
|
||||
import React, { useState } from "react";
|
||||
import PsychTestAddResult from "../../API/PsychTestAddResult";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import "./styles/PsychTestForm.css";
|
||||
|
||||
const PsychTestForm = () => {
|
||||
const [isValid, setIsValid] = useState(true);
|
||||
const navigate = useNavigate();
|
||||
const [answers, setAnswers] = useState(new Array(12));
|
||||
|
||||
const answerChangeHandler = (answer, account) => {
|
||||
answers[account] = answer;
|
||||
setAnswers(answers);
|
||||
};
|
||||
|
||||
const submitHandler = async (event) => {
|
||||
event.preventDefault();
|
||||
let isTrue = true;
|
||||
for (let i = 0; i < 12; i++) {
|
||||
if (answers[i] == undefined) {
|
||||
setIsValid(false);
|
||||
isTrue = false;
|
||||
}
|
||||
}
|
||||
if (isTrue) {
|
||||
await PsychTestAddResult.addById(1, answers); // 1 - это id пользователя TODO: приделать логин систему
|
||||
navigate("/");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={submitHandler} className="form">
|
||||
<PsychTestQuestion
|
||||
name="На сколько Вам важна национальность вашего соседа/соседки?"
|
||||
account="0"
|
||||
onChangeAnswer={answerChangeHandler}
|
||||
/>
|
||||
<PsychTestQuestion
|
||||
name="Согласны ли Вы делить одну комнату с вашим соседом/соседкой?"
|
||||
account="1"
|
||||
onChangeAnswer={answerChangeHandler}
|
||||
/>
|
||||
<PsychTestQuestion
|
||||
name="Какое число людей, снимающих квартиру (включая Вас), для вас приемлемо?"
|
||||
account="2"
|
||||
onChangeAnswer={answerChangeHandler}
|
||||
/>
|
||||
<PsychTestQuestion
|
||||
name="На сколько вам важно такое коммуникативное качество, как общительность, в вашем соседе/соседке?"
|
||||
account="3"
|
||||
onChangeAnswer={answerChangeHandler}
|
||||
/>
|
||||
<PsychTestQuestion
|
||||
name="На сколько вам важно такое коммуникативное качество, как эмпатия, в вашем соседе/соседке?"
|
||||
account="4"
|
||||
onChangeAnswer={answerChangeHandler}
|
||||
/>
|
||||
<PsychTestQuestion
|
||||
name="На сколько вам важно такое коммуникативное качество, как доброжелательность, в вашем соседе/соседке?"
|
||||
account="5"
|
||||
onChangeAnswer={answerChangeHandler}
|
||||
/>
|
||||
<PsychTestQuestion
|
||||
name="На сколько вам важно такое коммуникативное качество, как тактичность, в вашем соседе/соседке?"
|
||||
account="6"
|
||||
onChangeAnswer={answerChangeHandler}
|
||||
/>
|
||||
<PsychTestQuestion
|
||||
name="На сколько вам важно такое личностное качество, как ответственность, в вашем соседе/соседке?"
|
||||
account="7"
|
||||
onChangeAnswer={answerChangeHandler}
|
||||
/>
|
||||
<PsychTestQuestion
|
||||
name="На сколько вам важно такое личностное качество, как аккуратность, в вашем соседе/соседке?"
|
||||
account="8"
|
||||
onChangeAnswer={answerChangeHandler}
|
||||
/>
|
||||
<PsychTestQuestion
|
||||
name="На сколько вам важно такое личностное качество, как честность (искренность) , в вашем соседе/соседке ?"
|
||||
account="9"
|
||||
onChangeAnswer={answerChangeHandler}
|
||||
/>
|
||||
<PsychTestQuestion
|
||||
name="На сколько вам важно такое личностное качество, как чистоплотность , в вашем соседе/соседке ?"
|
||||
account="10"
|
||||
onChangeAnswer={answerChangeHandler}
|
||||
/>
|
||||
<PsychTestQuestion
|
||||
name="На сколько вам важна такия черта характера, как трудолюбие , в вашем соседе/соседке ?"
|
||||
account="11"
|
||||
onChangeAnswer={answerChangeHandler}
|
||||
/>
|
||||
{isValid && (
|
||||
<div className="btn-box">
|
||||
<button className="btn-box__form-btn" type="submit">
|
||||
Отправить
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{!isValid && (
|
||||
<div className="btn-box">
|
||||
<button className="btn-box__form-btn" type="submit">
|
||||
Отправить
|
||||
</button>
|
||||
<p className="btn-box__text">
|
||||
Вы не ответили на один из вопросов
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{/* <button type="submit">Отправить</button> */}
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default PsychTestForm;
|
|
@ -0,0 +1,25 @@
|
|||
.form {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-box__form-btn {
|
||||
background-color: #007eff;
|
||||
width: 192px;
|
||||
height: 33px;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.btn-box__text {
|
||||
color: red;
|
||||
padding-left: 37.5px;
|
||||
}
|
|
@ -0,0 +1,14 @@
|
|||
import "./styles/PsychTestHeader.css";
|
||||
|
||||
const PsychTestHeader = () => {
|
||||
return (
|
||||
<div className="header">
|
||||
<button type="button" className="header__btn">
|
||||
Вернуться назад
|
||||
</button>
|
||||
<h1 className="header__title">Тест на совместимость</h1>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PsychTestHeader;
|
|
@ -0,0 +1,22 @@
|
|||
.header {
|
||||
display: flex;
|
||||
padding-left: 40px;
|
||||
padding-top: 14px;
|
||||
align-items: center;
|
||||
margin-bottom: 55px;
|
||||
}
|
||||
|
||||
.header__title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.header__btn {
|
||||
color: #bababa;
|
||||
font-size: 15px;
|
||||
width: 180px;
|
||||
height: 36px;
|
||||
background-color: white;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 12px;
|
||||
margin-right: 13px;
|
||||
}
|
|
@ -1,57 +1,63 @@
|
|||
import React, { useState } from "react";
|
||||
import "./styles/PsychTestQuestion.css";
|
||||
|
||||
const PsychTestQuestion = (props) => {
|
||||
const answerChangeHandler = (event) => {
|
||||
props.onChangeAnswer(event.target.value, event.target.name);
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<label>{props.name}</label>
|
||||
<label>
|
||||
<div className="question">
|
||||
<div className="question__account">{+props.account + 1}</div>
|
||||
<p className="question__title">{props.name}</p>
|
||||
<div className="question__answers">
|
||||
<p>Не важно</p>
|
||||
<label className="question__answer">
|
||||
<input
|
||||
name={props.account}
|
||||
type="radio"
|
||||
value="1"
|
||||
onChange={answerChangeHandler}
|
||||
/>
|
||||
1
|
||||
<span>1</span>
|
||||
</label>
|
||||
<label>
|
||||
<label className="question__answer">
|
||||
<input
|
||||
name={props.account}
|
||||
type="radio"
|
||||
value="2"
|
||||
onChange={answerChangeHandler}
|
||||
/>
|
||||
2
|
||||
<span>2</span>
|
||||
</label>
|
||||
<label>
|
||||
<label className="question__answer">
|
||||
<input
|
||||
name={props.account}
|
||||
type="radio"
|
||||
value="3"
|
||||
onChange={answerChangeHandler}
|
||||
/>
|
||||
3
|
||||
<span>3</span>
|
||||
</label>
|
||||
<label>
|
||||
<label className="question__answer">
|
||||
<input
|
||||
name={props.account}
|
||||
type="radio"
|
||||
value="4"
|
||||
onChange={answerChangeHandler}
|
||||
/>
|
||||
4
|
||||
<span>4</span>
|
||||
</label>
|
||||
<label>
|
||||
<label className="question__answer">
|
||||
<input
|
||||
name={props.account}
|
||||
type="radio"
|
||||
value="5"
|
||||
onChange={answerChangeHandler}
|
||||
/>
|
||||
5
|
||||
<span>5</span>
|
||||
</label>
|
||||
<p>Очень важно</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -0,0 +1,68 @@
|
|||
.question {
|
||||
padding-top: 4px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
width: 799px;
|
||||
min-height: 151px;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
margin-bottom: 34.5px;
|
||||
}
|
||||
|
||||
.question__account {
|
||||
color: #cccccc;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 2px solid #cccccc;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.question__answers input {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.question__title {
|
||||
margin-bottom: 80px;
|
||||
text-align: center;
|
||||
width: 638px;
|
||||
font-size: 16px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.question__answers {
|
||||
display: flex;
|
||||
margin-bottom: 29.5px;
|
||||
}
|
||||
|
||||
.question__answers p,
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.question__answer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.question__answer span {
|
||||
position: absolute;
|
||||
top: -17px;
|
||||
left: 3.5px;
|
||||
}
|
||||
|
||||
.question__answers input,
|
||||
p {
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
.question__answers *:last-child {
|
||||
margin-right: 0;
|
||||
}
|
|
@ -1,175 +1,12 @@
|
|||
import PsychTestQuestion from "../../components/PsychTestQuestion";
|
||||
import React, { useState } from "react";
|
||||
import PsychTestAddResult from "../../API/PsychTestAddResult";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import PsychTestForm from "../../components/PsychTestForm";
|
||||
import PsychTestHeader from "../../components/PsychTestHeader";
|
||||
|
||||
const PsychTest = () => {
|
||||
const navigate = useNavigate();
|
||||
const [answers, setAnswers] = useState({
|
||||
first: 0,
|
||||
second: 0,
|
||||
third: 0,
|
||||
fourth: 0,
|
||||
fifth: 0,
|
||||
sixth: 0,
|
||||
seventh: 0,
|
||||
eighth: 0,
|
||||
nineth: 0,
|
||||
tenth: 0,
|
||||
eleventh: 0,
|
||||
twelfth: 0,
|
||||
thirteenth: 0,
|
||||
});
|
||||
|
||||
// TODO: Может как-то изменить, а то я сидел и тупил только не ругайте
|
||||
const answerChangeHandler = (answer, account) => {
|
||||
if (account == "first") {
|
||||
setAnswers((previous) => ({
|
||||
...previous,
|
||||
first: answer,
|
||||
}));
|
||||
} else if (account == "second") {
|
||||
setAnswers((previous) => ({
|
||||
...previous,
|
||||
second: answer,
|
||||
}));
|
||||
} else if (account == "third") {
|
||||
setAnswers((previous) => ({
|
||||
...previous,
|
||||
third: answer,
|
||||
}));
|
||||
} else if (account == "fourth") {
|
||||
setAnswers((previous) => ({
|
||||
...previous,
|
||||
fourth: answer,
|
||||
}));
|
||||
} else if (account == "fifth") {
|
||||
setAnswers((previous) => ({
|
||||
...previous,
|
||||
fifth: answer,
|
||||
}));
|
||||
} else if (account == "sixth") {
|
||||
setAnswers((previous) => ({
|
||||
...previous,
|
||||
sixth: answer,
|
||||
}));
|
||||
} else if (account == "seventh") {
|
||||
setAnswers((previous) => ({
|
||||
...previous,
|
||||
seventh: answer,
|
||||
}));
|
||||
} else if (account == "eight") {
|
||||
setAnswers((previous) => ({
|
||||
...previous,
|
||||
eight: answer,
|
||||
}));
|
||||
} else if (account == "nineth") {
|
||||
setAnswers((previous) => ({
|
||||
...previous,
|
||||
nineth: answer,
|
||||
}));
|
||||
} else if (account == "tenth") {
|
||||
setAnswers((previous) => ({
|
||||
...previous,
|
||||
tenth: answer,
|
||||
}));
|
||||
} else if (account == "eleventh") {
|
||||
setAnswers((previous) => ({
|
||||
...previous,
|
||||
eleventh: answer,
|
||||
}));
|
||||
} else if (account == "twelfth") {
|
||||
setAnswers((previous) => ({
|
||||
...previous,
|
||||
twelfth: answer,
|
||||
}));
|
||||
} else if (account == "thirteenth") {
|
||||
setAnswers((previous) => ({
|
||||
...previous,
|
||||
thirteenth: answer,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const submitHandler = async (event) => {
|
||||
event.preventDefault();
|
||||
const result = await PsychTestAddResult.addById(1, answers); // 1 - это id пользователя
|
||||
console.log(result);
|
||||
navigate("/");
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Название теста</h1>
|
||||
<form onSubmit={submitHandler}>
|
||||
<PsychTestQuestion
|
||||
name="Название вопроса 1"
|
||||
account="first"
|
||||
onChangeAnswer={answerChangeHandler}
|
||||
/>
|
||||
<PsychTestQuestion
|
||||
name="Название вопроса 2"
|
||||
account="second"
|
||||
onChangeAnswer={answerChangeHandler}
|
||||
/>
|
||||
<PsychTestQuestion
|
||||
name="Название вопроса 3"
|
||||
account="third"
|
||||
onChangeAnswer={answerChangeHandler}
|
||||
/>
|
||||
<PsychTestQuestion
|
||||
name="Название вопроса 4"
|
||||
account="fourth"
|
||||
onChangeAnswer={answerChangeHandler}
|
||||
/>
|
||||
<PsychTestQuestion
|
||||
name="Название вопроса 5"
|
||||
account="fifth"
|
||||
onChangeAnswer={answerChangeHandler}
|
||||
/>
|
||||
<PsychTestQuestion
|
||||
name="Название вопроса 6"
|
||||
account="sixth"
|
||||
onChangeAnswer={answerChangeHandler}
|
||||
/>
|
||||
<PsychTestQuestion
|
||||
name="Название вопроса 7"
|
||||
account="seventh"
|
||||
onChangeAnswer={answerChangeHandler}
|
||||
/>
|
||||
<PsychTestQuestion
|
||||
name="Название вопроса 8"
|
||||
account="eighth"
|
||||
onChangeAnswer={answerChangeHandler}
|
||||
/>
|
||||
<PsychTestQuestion
|
||||
name="Название вопроса 9"
|
||||
account="nineth"
|
||||
onChangeAnswer={answerChangeHandler}
|
||||
/>
|
||||
<PsychTestQuestion
|
||||
name="Название вопроса 10"
|
||||
account="tenth"
|
||||
onChangeAnswer={answerChangeHandler}
|
||||
/>
|
||||
<PsychTestQuestion
|
||||
name="Название вопроса 11"
|
||||
account="eleventh"
|
||||
onChangeAnswer={answerChangeHandler}
|
||||
/>
|
||||
<PsychTestQuestion
|
||||
name="Название вопроса 12"
|
||||
account="twelfth"
|
||||
onChangeAnswer={answerChangeHandler}
|
||||
/>
|
||||
<PsychTestQuestion
|
||||
name="Название вопроса 13"
|
||||
account="thirteenth"
|
||||
onChangeAnswer={answerChangeHandler}
|
||||
/>
|
||||
<button type="submit">Отправить</button>
|
||||
</form>
|
||||
</div>
|
||||
<>
|
||||
<PsychTestHeader />
|
||||
<PsychTestForm />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in New Issue