apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

quiz

Browse Source
This commit is contained in:
Дмитрий Кравцов
2022-05-27 14:39:05 +03:00
parent f7367dbdf2
commit e9e3880ad3
26 changed files with 718 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AuthBox/AuthBox.js
View File

@ -91,7 +91,7 @@ export const AuthBox = ({ title, roleChangeLink }) => {
{isLoading ? <Loader /> : 'Войти'}
</button>
<button className='auth-box__form-btn--role auth-box__auth-link'>
<button className='auth-box__form-btn--role auth-box__auth-link' >
<Link to={roleChangeLink}>Для разработчиков</Link>
</button>
</div>

44
src/components/Candidate/Candidate.js
View File

@ -18,12 +18,15 @@ import { Footer } from '../Footer/Footer'
import './candidate.scss'
import { getRole } from '../../redux/roleSlice'
import { CodeSnippetlighter } from '../../pages/CodeSnippetPage'
import { useState } from 'react'
const Candidate = () => {
const history = useHistory()
const { id: candidateId } = useParams()
const dispatch = useDispatch()
const role = useSelector(getRole)
const [activeSnippet, setActiveSnippet] = useState(true)
useEffect(() => {
window.scrollTo(0, 0)
@ -117,8 +120,11 @@ const Candidate = () => {
<div className='candidate__main'>
<div className='row'>
<div className='col-12 col-xl-4'>
<Sidebar candidate={currentCandidateObj} position />
<Sidebar candidate={currentCandidateObj} position activeSnippet={activeSnippet} setActiveSnippet={setActiveSnippet}/>
</div>
{
activeSnippet ?
(
<div className='col-12 col-xl-8'>
<div className='candidate__main-description'>
<img src={rectangle} alt='' />
@ -141,8 +147,44 @@ const Candidate = () => {
</button>
</Link> */}
<SkillSection skillsArr={skillValues} />
</div>
</div>
) :
(
// <div className="col-12 col-xl-8">
// <CodeSnippetlighter />
// </div>
<div className="col-12 col-xl-8">
<div className="candidate__works works">
<div className="works__body">
<div className="works__item item-works">
<div className="item-works__body">
<Link to="/" className="item-works__link">Vuetifyis.com</Link>
<div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br /> Vuetifyjs.com documentation</div>
<div className="item-works__mark">Angular</div>
</div>
</div>
<div className="works__item item-works">
<div className="item-works__body">
<Link to="/" className="item-works__link">Vuetifyis.com</Link>
<div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br /> Vuetifyjs.com documentation</div>
<div className="item-works__mark">Angular</div>
</div>
</div>
<div className="works__item item-works">
<div className="item-works__body">
<Link to="/" className="item-works__link">Vuetifyis.com</Link>
<div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br /> Vuetifyjs.com documentation</div>
<div className="item-works__mark item-works__mark_yellow">Laravel</div>
</div>
</div>
</div>
</div>
</div>
)
}
</div>
</div>
<Footer />

83
src/components/Candidate/candidate.scss
View File

@ -1,3 +1,4 @@
@use 'sass:math';
.candidate {
&__title {
margin-top: 60px;
@ -291,3 +292,85 @@
.candidate + .logout-button {
top: 80px !important;
}
.candidate__works{
@media (min-width: 576px) {
padding: 0 0 45px 0;
}
}
.works__body{
display: flex;
flex-wrap: wrap;
margin: 0 -15px -30px;
}
.item-works{
display: flex;
flex-direction: column;
padding: 0 15px;
margin: 0 0 30px 0;
flex: 0 1 50%;
position: relative;
@media (max-width: 761px) {
flex: 0 1 100%;
}
&__body{
padding: 17px;
border: 2px solid #54b611;
border-radius: 10px;
&::before{
content: "";
position: absolute;
top: -2px;
left: 25px;
height: 5px;
width: 29px;
border-radius: 3px;
background-color: #54b611;
}
}
&__link{
color: #0350dc;
font-family: "GT Eesti Pro Display";
font-size: 16px;
font-weight: 400;
letter-spacing: normal;
line-height: math.div(36,16);
text-decoration: underline;
display: block;
margin-bottom: 17px;
}
&__text{
margin-bottom: 37px;
color: #000000;
font-family: "GT Eesti Pro Display - Thin";
font-size: 12px;
font-weight: 400;
line-height: math.div(18,12);
}
&__mark{
font-size: 13px;
display: flex;
align-items: center;
column-gap: 7px;
line-height: math.div(36,13);
&::before{
border-radius: 50%;
content: "";
width: 13px;
height: 13px;
background-color: #73c141;
}
&_yellow{
&::before{
background-color: #e09f14;
}
}
}
}

21
src/components/CandidateSidebar/CandidateSidebar.js
View File

@ -6,6 +6,9 @@ import { LEVELS, SKILLS } from '../constants/constants'
import maleBig from '../../images/medium_male_big.png'
import './candidateSidebar.scss'
import { Highlighter } from '../../App'
import { useState } from 'react'
import { useEffect } from 'react'
const getYearsString = (years) => {
let yearsString
@ -21,7 +24,12 @@ const getYearsString = (years) => {
return `${years} ${yearsString}`
}
const CandidateSidebar = ({ candidate, position }) => {
const CandidateSidebar = ({ candidate, position, setActiveSnippet, activeSnippet }) => {
const showSnippet = () => {
setActiveSnippet((prev)=>!prev)
}
return (
<div className='candidate-sidebar'>
<div className='candidate-sidebar__info'>
@ -50,13 +58,22 @@ const CandidateSidebar = ({ candidate, position }) => {
Отчёты
</button>
</Link>
{/* <Link to={`/candidate/${candidate.id}/code`}> */}
<button
className='candidate-sidebar__select'
onClick={showSnippet}
>
{activeSnippet ? "Показать": "Скрыть"}
</button>
{/* </Link> */}
<div className='candidate-sidebar__achievements'>
{candidate &&
candidate.achievements &&
candidate.achievements.map((item) => {
return <Achievement achievement={item.achievement} />
return <Achievement key={item.id} achievement={item.achievement} />
})}
</div>
</div>
</div>
)

2
src/components/features/quiz/HeaderQuiz.js
View File

@ -25,8 +25,6 @@ export const HeaderQuiz = ({header}) => {
})
}, [dispatch])
console.log('render header quiz')
return (
<div className="header-quiz">
<div className="header-quiz__container">

37
src/components/features/quiz/Instructions.js
View File

@ -9,7 +9,7 @@ import {fetchGet} from "../../../server/server";
export const Instruction = () => {
const [countQuestions, setCountQuestions] = useState()
const [countQuestions, setCountQuestions] = useState(null)
const test = useSelector(selectedTest)
useEffect(async () => {
@ -26,21 +26,26 @@ export const Instruction = () => {
return (
<div className="instruction">
<div className="instruction__container">
<h3 className="instruction__title quiz-title_h3">Инструкция к тесту</h3>
<div className="instruction__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempoLorem ipsum dolor sit
amet,Lo
rem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo consectetur adipisicing e
lit, sed do eiusmod tempo
</div>
<Link to="/quiz-test" className='instruction__btn quiz-btn quiz-btn_restriction'>Далее</Link>
<div className="instruction__info">
<div className="instruction__icon">
<img src={comment} alt=""/>
</div>
<div className="instruction__text instruction__text_info">Количество вопросов в
тесте: <span>{countQuestions}</span></div>
</div>
{!countQuestions ? <h2>Loading...</h2> :
<>
<h3 className="instruction__title quiz-title_h3">Инструкция к тесту</h3>
<div className="instruction__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempoLorem ipsum dolor sit
amet,Lo
rem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo consectetur adipisicing
e
lit, sed do eiusmod tempo
</div>
<Link to="/quiz-test" className='instruction__btn quiz-btn quiz-btn_restriction'>Далее</Link>
<div className="instruction__info">
<div className="instruction__icon">
<img src={comment} alt=""/>
</div>
<div className="instruction__text instruction__text_info">Количество вопросов в
тесте: <span>{countQuestions}</span></div>
</div>
</>
}
</div>
</div>
)

37
src/components/features/quiz/Results.js
View File

@ -0,0 +1,37 @@
import React, {useEffect, useState} from 'react';
import {useDispatch, useSelector} from "react-redux";
import {fetchResultTest, selectedTest, selectResult} from "../../../redux/quizSlice";
import {fetchGet} from "../../../server/server";
export const Results = () => {
const result = useSelector(selectResult)
const test = useSelector(selectedTest)
const [maxScore, setMaxScore] = useState('')
const dispatch = useDispatch()
useEffect(async () => {
dispatch(fetchResultTest(test.uuid))
const response = await fetchGet({
link: `${process.env.REACT_APP_API_URL}/api/user-questionnaire/get-points-number?user_questionnaire_uuid=${test.uuid}`,
Origin: `${process.env.REACT_APP_BASE_URL}`,
}
)
setMaxScore(response.sum_point)
}, [])
return (
<div className={'result _container'}>
{
!result ? <h1 style={{display: "block"}}>Ожидайте результата...</h1> :
<div className="result__body">
<div className="result__text">Благодарим за прохождение теста</div>
<div className="result__text">Ваш Результат: <span
className="result__score">{result.score}</span> из {maxScore} </div>
</div>
}
</div>
);
};

9
src/components/features/quiz/Task.js
View File

@ -29,8 +29,6 @@ export const TaskQuiz = () => {
const id = localStorage.getItem('id');
const [questions, setQuestions] = useState([])
console.log("render task");
useEffect(async () => {
const response = await fetchGet({
link: `${process.env.REACT_APP_API_URL}/api/question/get-questions?uuid=${dataTest.uuid}`,
@ -50,12 +48,12 @@ export const TaskQuiz = () => {
if (checkedValues.length || inputValue) {
switch (questions[index].question_type_id) {
case '3':
// await dispatch(fetchUserAnswersMany(checkedValues))
await dispatch(fetchUserAnswersMany(checkedValues))
break;
case '2':
case '1':
case '4':
// await dispatch(fetchUserAnswerOne(checkedValues))
await dispatch(fetchUserAnswerOne(checkedValues))
break;
default:
break;
@ -70,7 +68,7 @@ export const TaskQuiz = () => {
setInputValue('')
} else {
history.push(`/quiz-result`)
// alert("Тест пройден!")
alert("Тест пройден!")
}
} else {
@ -133,7 +131,6 @@ export const TaskQuiz = () => {
answer={answer}
/>
))
}
<div className="form-task__buttons">
{questions.length !== index + 1 &&