refactor PsychTestQuestion
This commit is contained in:
parent
5f0a52a8ba
commit
6725ac6966
|
@ -4,6 +4,8 @@ import PsychTestAddResult from "../../API/PsychTestAddResult";
|
|||
import { useNavigate } from "react-router-dom";
|
||||
import "./styles/PsychTestForm.css";
|
||||
|
||||
import { styled } from "styled-components";
|
||||
|
||||
const PsychTestForm = () => {
|
||||
const [isValid, setIsValid] = useState(true);
|
||||
const navigate = useNavigate();
|
||||
|
|
|
@ -1,17 +1,90 @@
|
|||
import React, { useState } from "react";
|
||||
import "./styles/PsychTestQuestion.css";
|
||||
|
||||
import { styled } from "styled-components";
|
||||
|
||||
const Question = styled.div`
|
||||
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;
|
||||
& h2 {
|
||||
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;
|
||||
}
|
||||
`;
|
||||
|
||||
const QuestionTitle = styled.p`
|
||||
margin-bottom: 80px;
|
||||
text-align: center;
|
||||
width: 638px;
|
||||
font-size: 16px;
|
||||
margin-right: 0;
|
||||
`;
|
||||
|
||||
const Answers = styled.div`
|
||||
display: flex;
|
||||
margin-bottom: 29.5px;
|
||||
& p, & span {
|
||||
font-size: 14px;
|
||||
}
|
||||
& input, & p {
|
||||
margin-right: 32px;
|
||||
transform: translateY(6px)
|
||||
}
|
||||
& label {
|
||||
transform: translateY(6px)
|
||||
}
|
||||
`;
|
||||
|
||||
const Answer = styled.label`
|
||||
& span {
|
||||
position: absolute;
|
||||
top: -17px;
|
||||
left: 3.5px
|
||||
}
|
||||
`;
|
||||
|
||||
const Id = styled.div`
|
||||
color: #cccccc;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 1px solid #b2b4b2;
|
||||
border-radius: 100px;
|
||||
`;
|
||||
|
||||
|
||||
const PsychTestQuestion = (props) => {
|
||||
const answerChangeHandler = (event) => {
|
||||
props.onChangeAnswer(event.target.value, event.target.name);
|
||||
};
|
||||
return (
|
||||
<div className="question">
|
||||
<div className="question__account">{+props.account + 1}</div>
|
||||
<p className="question__title">{props.name}</p>
|
||||
<div className="question__answers">
|
||||
<Question>
|
||||
<Id>{+props.account + 1}</Id>
|
||||
<QuestionTitle>{props.name}</QuestionTitle>
|
||||
<Answers>
|
||||
<p>Не важно</p>
|
||||
<label className="question__answer">
|
||||
<Answer>
|
||||
<input
|
||||
name={props.account}
|
||||
type="radio"
|
||||
|
@ -19,8 +92,8 @@ const PsychTestQuestion = (props) => {
|
|||
onChange={answerChangeHandler}
|
||||
/>
|
||||
<span>1</span>
|
||||
</label>
|
||||
<label className="question__answer">
|
||||
</Answer>
|
||||
<Answer>
|
||||
<input
|
||||
name={props.account}
|
||||
type="radio"
|
||||
|
@ -28,8 +101,8 @@ const PsychTestQuestion = (props) => {
|
|||
onChange={answerChangeHandler}
|
||||
/>
|
||||
<span>2</span>
|
||||
</label>
|
||||
<label className="question__answer">
|
||||
</Answer>
|
||||
<Answer>
|
||||
<input
|
||||
name={props.account}
|
||||
type="radio"
|
||||
|
@ -37,8 +110,8 @@ const PsychTestQuestion = (props) => {
|
|||
onChange={answerChangeHandler}
|
||||
/>
|
||||
<span>3</span>
|
||||
</label>
|
||||
<label className="question__answer">
|
||||
</Answer>
|
||||
<Answer>
|
||||
<input
|
||||
name={props.account}
|
||||
type="radio"
|
||||
|
@ -46,8 +119,8 @@ const PsychTestQuestion = (props) => {
|
|||
onChange={answerChangeHandler}
|
||||
/>
|
||||
<span>4</span>
|
||||
</label>
|
||||
<label className="question__answer">
|
||||
</Answer>
|
||||
<Answer>
|
||||
<input
|
||||
name={props.account}
|
||||
type="radio"
|
||||
|
@ -55,10 +128,10 @@ const PsychTestQuestion = (props) => {
|
|||
onChange={answerChangeHandler}
|
||||
/>
|
||||
<span>5</span>
|
||||
</label>
|
||||
</Answer>
|
||||
<p>Очень важно</p>
|
||||
</div>
|
||||
</div>
|
||||
</Answers>
|
||||
</Question>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -5,6 +5,4 @@ export default {
|
|||
plugins: [
|
||||
react()
|
||||
],
|
||||
publicDir: 'static/dist',
|
||||
|
||||
}
|
Loading…
Reference in New Issue