139 lines
3.4 KiB
JavaScript
139 lines
3.4 KiB
JavaScript
import React, { useState } from "react";
|
||
|
||
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 (
|
||
<Question>
|
||
<Id>{+props.account + 1}</Id>
|
||
<QuestionTitle>{props.name}</QuestionTitle>
|
||
<Answers>
|
||
<p>Не важно</p>
|
||
<Answer>
|
||
<input
|
||
name={props.account}
|
||
type="radio"
|
||
value="1"
|
||
onChange={answerChangeHandler}
|
||
/>
|
||
<span>1</span>
|
||
</Answer>
|
||
<Answer>
|
||
<input
|
||
name={props.account}
|
||
type="radio"
|
||
value="2"
|
||
onChange={answerChangeHandler}
|
||
/>
|
||
<span>2</span>
|
||
</Answer>
|
||
<Answer>
|
||
<input
|
||
name={props.account}
|
||
type="radio"
|
||
value="3"
|
||
onChange={answerChangeHandler}
|
||
/>
|
||
<span>3</span>
|
||
</Answer>
|
||
<Answer>
|
||
<input
|
||
name={props.account}
|
||
type="radio"
|
||
value="4"
|
||
onChange={answerChangeHandler}
|
||
/>
|
||
<span>4</span>
|
||
</Answer>
|
||
<Answer>
|
||
<input
|
||
name={props.account}
|
||
type="radio"
|
||
value="5"
|
||
onChange={answerChangeHandler}
|
||
/>
|
||
<span>5</span>
|
||
</Answer>
|
||
<p>Очень важно</p>
|
||
</Answers>
|
||
</Question>
|
||
);
|
||
};
|
||
|
||
export default PsychTestQuestion;
|