quiz + lk-candidate
This commit is contained in:
@ -1,24 +0,0 @@
|
||||
import {useNavigate} from "react-router-dom"
|
||||
import {HeaderPageTestsQuiz} from "../../components/features/quiz/HeaderPageTests"
|
||||
import {Instruction} from "../../components/features/quiz/Instructions"
|
||||
import React from "react";
|
||||
import {useSelector} from "react-redux";
|
||||
import {selectedTest} from "../../redux/quizSlice";
|
||||
|
||||
|
||||
export const InstructionPage = () => {
|
||||
|
||||
const test = useSelector(selectedTest)
|
||||
|
||||
let navigate = useNavigate();
|
||||
if (!test) {
|
||||
navigate('/quiz')
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<HeaderPageTestsQuiz isVisibilityButton={false}/>
|
||||
<Instruction/>
|
||||
</>
|
||||
)
|
||||
};
|
||||
@ -1,26 +0,0 @@
|
||||
import React from "react";
|
||||
import {useNavigate} from "react-router-dom"
|
||||
import {useSelector} from "react-redux";
|
||||
|
||||
import {HeaderPageTestsQuiz} from "../../components/features/quiz/HeaderPageTests"
|
||||
import {MyTestsQuiz} from "../../components/features/quiz/MyTestsQuiz"
|
||||
|
||||
import {selectedTest, selectPassedTests} from "../../redux/quizSlice";
|
||||
|
||||
|
||||
export const InterjacentPage = () => {
|
||||
|
||||
const test = useSelector(selectedTest);
|
||||
const passedTests = useSelector(selectPassedTests)
|
||||
let navigate = useNavigate();
|
||||
if (!test) {
|
||||
navigate('/quiz')
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<HeaderPageTestsQuiz isVisibilityButton={true}/>
|
||||
<MyTestsQuiz listTests={passedTests}/>
|
||||
</>
|
||||
)
|
||||
};
|
||||
83
src/pages/quiz/PassingTests.js
Normal file
83
src/pages/quiz/PassingTests.js
Normal file
@ -0,0 +1,83 @@
|
||||
import React, { useState } from 'react'
|
||||
import { ProfileHeader } from '../../components/ProfileHeader/ProfileHeader'
|
||||
import { HeadBottom } from '../../components/features/Candidate-lk/HeadBottom'
|
||||
import { ProfileBreadcrumbs } from '../../components/ProfileBreadcrumbs/ProfileBreadcrumbs'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Footer } from '../../components/Footer/Footer'
|
||||
import { QuizPassingInformation } from '../../components/features/quiz/Quiz-passing-information'
|
||||
import { CardIntroduction } from '../../components/features/quiz/Card-introduction'
|
||||
import { TaskQuiz } from '../../components/features/quiz/Task'
|
||||
import { BlockCompletedTest } from '../../components/features/quiz/BlockCompletedTest'
|
||||
import { useSelector } from 'react-redux'
|
||||
import { completedTestSelector, selectedTest } from '../../redux/quizSlice'
|
||||
|
||||
export const PassingTests = () => {
|
||||
//const selectedTest = useSelector(selectedTest)
|
||||
|
||||
if(''){
|
||||
|
||||
}
|
||||
|
||||
const time = new Date();
|
||||
time.setSeconds(time.getSeconds() + 600);//600 - кол-во секунд для прохождения теста
|
||||
|
||||
const [startTest, setStartTest] = useState(false)
|
||||
const completedTest = useSelector(completedTestSelector)
|
||||
|
||||
const introduction = [
|
||||
{
|
||||
title: 'Зачем?',
|
||||
description: 'Тесты itguild предназначены для того, чтобы подтверждать навыки, которые вы указали у себя.'
|
||||
},
|
||||
{
|
||||
title: 'Почему именно тестирование?',
|
||||
description: 'Тесты itguild заменяют первое техническое собеседование по любой вакансии.'
|
||||
},
|
||||
{
|
||||
title: 'Какие тесты нужно проходить?',
|
||||
description: 'Здесь все довольно просто — следует проходить тесты по инструментам и навыкам, которыми вы владеете.'
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<div className='passing-tests-page'>
|
||||
<ProfileHeader />
|
||||
<HeadBottom />
|
||||
<div className="passing-tests-page__container">
|
||||
<ProfileBreadcrumbs links={[
|
||||
{ name: 'Главная', link: '/profile-candidate' },
|
||||
{ name: 'Тестирование', link: '/quiz' },
|
||||
{ name: 'Прохождение тестов', link: '/quiz/test' },
|
||||
]} />
|
||||
<div className="passing-tests-page__title main-title">Тестирование в позиции Junior разработчик </div>
|
||||
<div className="passing-tests-page__passing-information">
|
||||
<QuizPassingInformation expiryTimestamp={time} setStartTest={setStartTest} />
|
||||
</div>
|
||||
|
||||
{
|
||||
!completedTest &&
|
||||
<>
|
||||
{startTest && <div className="passing-tests-page__block-green">Тестирование началось</div>}
|
||||
{startTest ? <TaskQuiz /> : <div className='passing-tests-page__introduction'>
|
||||
{
|
||||
introduction.map((item, i) => <CardIntroduction description={item.description} title={item.title} key={i} />)
|
||||
}
|
||||
</div>}
|
||||
{
|
||||
!startTest && <div className="passing-tests-page__block-text block-text">
|
||||
ИЛИ <Link to={''} >выполните тестове задание</Link> , без прохождения тестов
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
}
|
||||
{
|
||||
completedTest && <>
|
||||
<div className="passing-tests-page__block-green">Тестирование завершено</div>
|
||||
<BlockCompletedTest />
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,17 +1,144 @@
|
||||
import React from 'react'
|
||||
import {HeaderQuiz} from "../../components/features/quiz/HeaderQuiz"
|
||||
import {MyTestsQuiz} from "../../components/features/quiz/MyTestsQuiz"
|
||||
import {useSelector} from "react-redux";
|
||||
import {selectQuestionnairesOfUser} from "../../redux/quizSlice";
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { questionnairesSelector, setQuestionnaires } from "../../redux/quizSlice";
|
||||
import { ProfileHeader } from '../../components/ProfileHeader/ProfileHeader';
|
||||
import { HeadBottom } from '../../components/features/Candidate-lk/HeadBottom';
|
||||
import { ProfileBreadcrumbs } from '../../components/ProfileBreadcrumbs/ProfileBreadcrumbs';
|
||||
import './quiz-page.scss'
|
||||
import { SelectedCategory } from '../../components/features/quiz/SelectedCategory';
|
||||
import { Footer } from '../../components/Footer/Footer';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { CardAvailableTest } from '../../components/features/quiz/CardAviableTest';
|
||||
import { apiRequest } from '../../api/request';
|
||||
import CategoriesItem from '../../components/CategoriesItem/CategoriesItem';
|
||||
|
||||
import BackEndImg from "../../pages/PartnerСategories/images/personalBackEnd.png"
|
||||
import FrontendImg from "../../pages/PartnerСategories/images/PersonalFrontend.png"
|
||||
import ArchitectureImg from "../../pages/PartnerСategories/images/PersonalArchitecture.png"
|
||||
import DesignImg from "../../pages/PartnerСategories/images/PersonalDesign.png"
|
||||
import TestImg from "../../pages/PartnerСategories/images/PersonalTesters.png"
|
||||
import AdminImg from "../../pages/PartnerСategories/images/PersonalAdmin.png"
|
||||
import ManageImg from "../../pages/PartnerСategories/images/PersonalMng.png"
|
||||
import CopyImg from "../../pages/PartnerСategories/images/PersonalCopy.png"
|
||||
import SmmImg from "../../pages/PartnerСategories/images/PersonalSMM.png"
|
||||
|
||||
export const QuizPage = () => {
|
||||
|
||||
const allTests = useSelector(selectQuestionnairesOfUser)
|
||||
const questionnaires = useSelector(questionnairesSelector)
|
||||
const dispatch = useDispatch()
|
||||
const [personalInfoItems] = useState([
|
||||
{
|
||||
title: 'Backend разработчики',
|
||||
link: '/registration-candidate',
|
||||
description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
|
||||
available: true,
|
||||
img: BackEndImg
|
||||
},
|
||||
{
|
||||
title: 'Frontend разработчики',
|
||||
link: '/registration-candidate',
|
||||
description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
|
||||
available: true,
|
||||
img: FrontendImg
|
||||
},
|
||||
{
|
||||
title: 'Архитектура проектов',
|
||||
link: '/registration-candidate',
|
||||
description: 'Потоки данных ER ERP CRM CQRS UML BPMN',
|
||||
available: true,
|
||||
img: ArchitectureImg
|
||||
},
|
||||
{
|
||||
title: 'Дизайн проектов',
|
||||
link: '/registration-candidate',
|
||||
description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
|
||||
available: true,
|
||||
img: DesignImg
|
||||
},
|
||||
{
|
||||
title: 'Тестирование проектов',
|
||||
link: '/registration-candidate',
|
||||
description: 'SQL Postman TestRail Kibana Ручное тестирование',
|
||||
available: false,
|
||||
img: TestImg
|
||||
},
|
||||
{
|
||||
title: 'Администрирование проектов',
|
||||
link: '/registration-candidate',
|
||||
description: 'DevOps ELK Kubernetes Docker Bash Apache Oracle Git',
|
||||
available: false,
|
||||
img: AdminImg
|
||||
},
|
||||
{
|
||||
title: 'Управление проектом',
|
||||
link: '/registration-candidate',
|
||||
description: 'Scrum Kanban Agile Miro CustDev',
|
||||
available: false,
|
||||
img: ManageImg
|
||||
},
|
||||
{
|
||||
title: 'Копирайтинг проектов',
|
||||
link: '/registration-candidate',
|
||||
description: 'Теги Заголовок H1 Дескриптор Абзац Сценарий',
|
||||
available: false,
|
||||
img: CopyImg
|
||||
},
|
||||
{
|
||||
title: 'Реклама и SMM',
|
||||
link: '/registration-candidate',
|
||||
description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
|
||||
available: false,
|
||||
img: SmmImg
|
||||
},
|
||||
]);
|
||||
const userId = localStorage.getItem('id')
|
||||
const [selectedCategory, setsetSelectedCategory] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
apiRequest(`/user-questionnaire/questionnaires-list?user_id=${107}`)
|
||||
.then(res => dispatch(setQuestionnaires(res)))
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<HeaderQuiz header={true}/>
|
||||
<MyTestsQuiz listTests={allTests}/>
|
||||
</>
|
||||
<div className='quiz-page'>
|
||||
<ProfileHeader />
|
||||
<HeadBottom />
|
||||
<div className="quiz-page__container">
|
||||
<ProfileBreadcrumbs links={[{ name: 'Главная', link: '/profile-candidate' }, { name: 'Тестирование', link: '/quiz' }]} />
|
||||
<div className="quiz-page__title main-title">{!selectedCategory ? 'Тестирование' : 'Замена специализации'}</div>
|
||||
{!selectedCategory && <>
|
||||
<div className="quiz-page__specialization">
|
||||
<SelectedCategory setSelectedCategory={setsetSelectedCategory} />
|
||||
</div>
|
||||
<div className="quiz-page__block">
|
||||
Доступные тесты
|
||||
</div>
|
||||
<div className="quiz-page__cards-test">
|
||||
{
|
||||
questionnaires.length ? questionnaires.map((item, index) => (
|
||||
<CardAvailableTest
|
||||
description={'Вы новичок с реальным опытом работы до 1 года, или без опыта'}
|
||||
path={'quiz/test'}
|
||||
status={item.status}
|
||||
title={item.questionnaire_title}
|
||||
passedTest={item.passedTest}
|
||||
key={index}
|
||||
/>)) : <h1>Анкет нет</h1>
|
||||
}
|
||||
</div>
|
||||
<div className="block-text">
|
||||
ИЛИ <Link to={''} >выполните тестове задание</Link> , без прохождения тестов
|
||||
</div>
|
||||
</>}
|
||||
|
||||
{selectedCategory && <div className="quiz-page__categories-items">
|
||||
{personalInfoItems.map((item, index) => {
|
||||
return <CategoriesItem link={item.link} key={index} title={item.title} img={item.img} skills={item.description} available={item.available} />
|
||||
})
|
||||
}
|
||||
</div>}
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
42
src/pages/quiz/QuizReportPage.js
Normal file
42
src/pages/quiz/QuizReportPage.js
Normal file
@ -0,0 +1,42 @@
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import { HeaderPageTestsQuiz } from "../../components/features/quiz/HeaderPageTests"
|
||||
import { Results } from "../../components/features/quiz/Results";
|
||||
import { useSelector } from "react-redux";
|
||||
import { selectedTest } from "../../redux/quizSlice";
|
||||
import React from "react";
|
||||
import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
|
||||
import { HeadBottom } from "../../components/features/Candidate-lk/HeadBottom";
|
||||
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { QuizReport } from "../../components/features/quiz/QuizReport";
|
||||
import { Footer } from "../../components/Footer/Footer";
|
||||
import suucessIcon from '../../images/quiz/success.png'
|
||||
import { AlertResult } from "../../components/features/quiz/AlertResult";
|
||||
|
||||
|
||||
export const QuizReportPage = () => {
|
||||
|
||||
const test = useSelector(selectedTest)
|
||||
|
||||
let navigate = useNavigate();
|
||||
if (!test) {
|
||||
navigate('/quiz')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="quiz-report-page">
|
||||
<ProfileHeader />
|
||||
<HeadBottom />
|
||||
<div className="quiz-report-page__container">
|
||||
<ProfileBreadcrumbs links={[{ name: 'Главная', link: '/profile-candidate' }, { name: 'Тестирование', link: '/quiz' },
|
||||
{ name: 'Отчет по тестированию', link: '/quiz/report' }]} />
|
||||
<div className="quiz-report-page__title main-title">Отчет по тестированию позиции Junior разработчик </div>
|
||||
<div className="quiz-report-page__report-quiz">
|
||||
<QuizReport />
|
||||
</div>
|
||||
|
||||
<AlertResult />
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
};
|
||||
@ -1,24 +0,0 @@
|
||||
import {useNavigate} from 'react-router-dom'
|
||||
import {HeaderPageTestsQuiz} from '../../components/features/quiz/HeaderPageTests'
|
||||
import {TaskQuiz} from '../../components/features/quiz/Task'
|
||||
import {useSelector} from "react-redux";
|
||||
import {selectedTest} from "../../redux/quizSlice";
|
||||
import React, {useEffect} from "react";
|
||||
|
||||
export const QuizTestPage = () => {
|
||||
let navigate = useNavigate();
|
||||
const test = useSelector(selectedTest);
|
||||
|
||||
useEffect(() => {
|
||||
if (!test) {
|
||||
navigate('/quiz')
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<HeaderPageTestsQuiz isVisibilityButton={false}/>
|
||||
<TaskQuiz/>
|
||||
</>
|
||||
)
|
||||
};
|
||||
@ -1,24 +0,0 @@
|
||||
import {useNavigate} from "react-router-dom"
|
||||
import {HeaderPageTestsQuiz} from "../../components/features/quiz/HeaderPageTests"
|
||||
import {Results} from "../../components/features/quiz/Results";
|
||||
import {useSelector} from "react-redux";
|
||||
import {selectedTest} from "../../redux/quizSlice";
|
||||
import React from "react";
|
||||
|
||||
|
||||
export const ResultPage = () => {
|
||||
|
||||
const test = useSelector(selectedTest)
|
||||
|
||||
let navigate = useNavigate();
|
||||
if (!test) {
|
||||
navigate('/quiz')
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<HeaderPageTestsQuiz isVisibilityButton={false}/>
|
||||
<Results/>
|
||||
</>
|
||||
)
|
||||
};
|
||||
143
src/pages/quiz/quiz-page.scss
Normal file
143
src/pages/quiz/quiz-page.scss
Normal file
@ -0,0 +1,143 @@
|
||||
.quiz-page{
|
||||
background: #F1F1F1;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&__container{
|
||||
max-width: 1160px;
|
||||
margin: 0 auto 42px auto;
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
&__title{
|
||||
margin: 0 0 39px 0;
|
||||
}
|
||||
&__block{
|
||||
background: #E1FCCF;
|
||||
border-radius: 12px 12px 0px 0px;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 178%;
|
||||
color: #000000;
|
||||
padding: 20px 51px;
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
&__cards-test{
|
||||
display: grid;
|
||||
grid-gap: 29px;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
margin-bottom: 29px;
|
||||
@media (max-width: 955px) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
@media (max-width: 668px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
}
|
||||
&__specialization{
|
||||
margin: 0 0 26px 0;
|
||||
}
|
||||
&__categories-items{
|
||||
display: grid;
|
||||
grid-gap: 24px;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
margin-bottom: 24px;
|
||||
@media (max-width: 955px) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
@media (max-width: 668px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
.interjacent-page-quiz{
|
||||
|
||||
background: #F1F1F1;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&__title{
|
||||
margin: 0 0 39px 0;
|
||||
}
|
||||
&__passing-information{
|
||||
margin: 0 0 32px 0;
|
||||
}
|
||||
&__container{
|
||||
max-width: 1160px;
|
||||
margin: 0 auto 42px auto;
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
&__introduction-items{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0px -25px -50px;
|
||||
margin: 0 auto 54px auto;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.passing-tests-page{
|
||||
background: #F1F1F1;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&__container{
|
||||
max-width: 1160px;
|
||||
margin: 0 auto 42px auto;
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
&__title{
|
||||
margin: 0 0 39px 0;
|
||||
}
|
||||
&__passing-information{
|
||||
margin: 0 0 29px 0;
|
||||
}
|
||||
&__block-green{
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 178%;
|
||||
color: #000000;
|
||||
background: #E1FCCF;
|
||||
border-radius: 12px 12px 0px 0px;
|
||||
padding: 20px 51px;
|
||||
}
|
||||
&__introduction{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.quiz-report-page{
|
||||
background: #F1F1F1;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&__container{
|
||||
max-width: 1160px;
|
||||
margin: 0 auto 42px auto;
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
&__title{
|
||||
margin: 0 0 39px 0;
|
||||
}
|
||||
&__report-quiz{
|
||||
margin: 0 0 28px 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user