diff --git a/src/components/features/quiz/GetOptionTask.js b/src/components/features/quiz/GetOptionTask.js
new file mode 100644
index 00000000..d70f486b
--- /dev/null
+++ b/src/components/features/quiz/GetOptionTask.js
@@ -0,0 +1,38 @@
+import React from 'react';
+
+export const GetOptionTask = ({type, answer, handleChange, inputValue}) => {
+ switch (type) {
+ case "3":
+ return (
+
+
+ {answer.answer_body}
+
+ )
+ case "2":
+ case "4":
+ return (
+
+
+ {answer.answer_body}
+
+ )
+ case "1":
+ return (
+
+
+ )
+ default:
+ return (
+
+
+ {answer.answer_body}
+
+ )
+ }
+}
diff --git a/src/components/features/quiz/HeaderPageTests.js b/src/components/features/quiz/HeaderPageTests.js
new file mode 100644
index 00000000..eff22cae
--- /dev/null
+++ b/src/components/features/quiz/HeaderPageTests.js
@@ -0,0 +1,30 @@
+import {Link} from 'react-router-dom'
+import './quiz.scss'
+import {useSelector} from "react-redux";
+import {selectedTest, selectUserInfo} from "../../../redux/quizSlice";
+
+
+export const HeaderPageTestsQuiz = ({isVisibilityButton}) => {
+
+ const test = useSelector(selectedTest)
+ const userInfo = useSelector(selectUserInfo);
+
+ return (
+
+
+
+
+ {userInfo.photo &&
}
+
+
+
{test.questionnaire_title}
+
Тест на основе выступление
+ "{test.questionnaire_title}" {userInfo.fio}
+
+
+ {isVisibilityButton &&
+
Пройти}
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/features/quiz/HeaderQuiz.js b/src/components/features/quiz/HeaderQuiz.js
new file mode 100644
index 00000000..c86d05c7
--- /dev/null
+++ b/src/components/features/quiz/HeaderQuiz.js
@@ -0,0 +1,48 @@
+import {useEffect} from 'react'
+import {useDispatch} from 'react-redux'
+import {useSelector} from 'react-redux'
+import {fetchGet} from '../../../server/server'
+import './quiz.scss'
+import {selectUserInfo, setQuestionnairesList, setUserInfo,} from "../../../redux/quizSlice";
+
+export const HeaderQuiz = ({header}) => {
+
+ const dispatch = useDispatch()
+ const userId = localStorage.getItem('id');
+ const userInfo = useSelector(selectUserInfo);
+
+ useEffect(() => {
+ dispatch(setUserInfo(userId))
+ }, [dispatch])
+
+ useEffect(() => {
+ fetchGet({
+ link: `${process.env.REACT_APP_API_URL}/api/user-questionnaire/questionnaires-list?user_id=${userId}`,
+ Origin: `${process.env.REACT_APP_BASE_URL}`,
+ }
+ ).then(response => {
+ dispatch(setQuestionnairesList(response))
+ })
+ }, [dispatch])
+
+ console.log('render header quiz')
+
+ return (
+
+
+ {!userInfo ?
Loading... :
+ <>
+ {header &&
Добрый день, {userInfo.fio} }
+
+
+
+
+
{userInfo.fio}
+
{userInfo.position_name}
+
+ >
+ }
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/features/quiz/Instructions.js b/src/components/features/quiz/Instructions.js
new file mode 100644
index 00000000..640637d2
--- /dev/null
+++ b/src/components/features/quiz/Instructions.js
@@ -0,0 +1,48 @@
+import {Link} from 'react-router-dom'
+import {CodeSnippetlighter} from '../../../pages/CodeSnippetPage'
+import comment from './../../../images/comment.jpg'
+import './quiz.scss'
+import {useEffect, useState} from "react";
+import {useSelector} from "react-redux";
+import {selectedTest} from "../../../redux/quizSlice";
+import {fetchGet} from "../../../server/server";
+
+export const Instruction = () => {
+
+ const [countQuestions, setCountQuestions] = useState()
+ const test = useSelector(selectedTest)
+
+ useEffect(async () => {
+
+ const response = await fetchGet({
+ link: `${process.env.REACT_APP_API_URL}/api/user-questionnaire/get-question-number?user_questionnaire_uuid=${test.uuid}`,
+ Origin: `${process.env.REACT_APP_BASE_URL}`,
+ }
+ )
+ setCountQuestions(response.question_number)
+
+ }, [])
+
+ return (
+
+
+
Инструкция к тесту
+
+ 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
+
+
Далее
+
+
+
+
+
Количество вопросов в
+ тесте: {countQuestions}
+
+
+
+ )
+}
+
diff --git a/src/components/features/quiz/MyTestsQuiz.js b/src/components/features/quiz/MyTestsQuiz.js
new file mode 100644
index 00000000..bf063fc2
--- /dev/null
+++ b/src/components/features/quiz/MyTestsQuiz.js
@@ -0,0 +1,73 @@
+import {Link} from 'react-router-dom'
+import calendarImage from './../../../images/calendar.svg'
+import './quiz.scss'
+import {useDispatch} from "react-redux";
+import {setSelectedTest} from "../../../redux/quizSlice";
+
+export const MyTestsQuiz = ({listTests}) => {
+
+ const formationEndingOfScore = (score) => {
+ const lastNumber = score % 10
+ if(score === 11 ||score === 12 ||score === 13 ||score === 14 ){
+ return 'баллов'
+ }else if(lastNumber === 2 || lastNumber === 3 || lastNumber === 4 ){
+ return 'балла'
+ }else if(lastNumber === 1){
+ return 'балл'
+ }else{
+ return 'баллов'
+ }
+ }
+
+ const dispatch = useDispatch()
+ const recordSelectedTest = (item) => dispatch(setSelectedTest(item))
+
+ return (
+
+
+
Мои тесты
+
+ {listTests.map(item => {
+ switch (item.status) {
+ case 1:
+ return
+
+ {item.questionnaire_title}
+
+
+ recordSelectedTest(item)}>Пройти
+
+
+ case 2:
+ return
+
+ {item.questionnaire_title}
+
+
+
+
+ {item.testing_date}
+
+
+
{item.score} {formationEndingOfScore(item.score)}
+
+
+ case 3:
+ return
+
+ {item.questionnaire_title}
+
+
+
+ default:
+ break
+ }
+ })}
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/features/quiz/ProgressbarQuiz.js b/src/components/features/quiz/ProgressbarQuiz.js
new file mode 100644
index 00000000..3516698c
--- /dev/null
+++ b/src/components/features/quiz/ProgressbarQuiz.js
@@ -0,0 +1,18 @@
+import { Link } from 'react-router-dom'
+import avatar from './../../../images/medium_male.png'
+import './quiz.scss'
+
+export const Progressbar = ({indexQuestion, width}) => {
+ return (
+
+
+
+ {indexQuestion}
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/features/quiz/Results.js b/src/components/features/quiz/Results.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/features/quiz/Task.js b/src/components/features/quiz/Task.js
new file mode 100644
index 00000000..841095c9
--- /dev/null
+++ b/src/components/features/quiz/Task.js
@@ -0,0 +1,152 @@
+import React, {useEffect} from 'react'
+import {useHistory} from "react-router"
+import {CodeSnippetlighter} from '../../../pages/CodeSnippetPage'
+import './quiz.scss'
+import {useDispatch} from 'react-redux'
+import {useState} from 'react'
+import {
+ fetchGetAnswers,
+ selectAnswer,
+ selectedTest
+} from '../../../redux/quizSlice'
+import {useSelector} from 'react-redux'
+import {Progressbar} from './ProgressbarQuiz'
+import {fetchUserAnswersMany, fetchUserAnswerOne} from './../../../redux/quizSlice'
+import {GetOptionTask} from './GetOptionTask'
+import {fetchGet} from "../../../server/server";
+
+
+export const TaskQuiz = () => {
+
+ const history = useHistory();
+ const dispatch = useDispatch()
+ const listAnswers = useSelector(selectAnswer)
+ const dataTest = useSelector(selectedTest)
+ const [index, setIndex] = useState(0);
+ const [checkedValues, setCheckedValues] = useState([])
+ const [stripValue, setStripValue] = useState(0);
+ const [inputValue, setInputValue] = useState('')
+ 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}`,
+ Origin: `${process.env.REACT_APP_BASE_URL}`,
+ }
+ )
+ setQuestions(response)
+ dispatch(fetchGetAnswers(response[0].id))
+ setStripValue((+index + 1) * 100 / response.length)
+ }, [dispatch])
+
+
+ const nextQuestion = async (e) => {
+ e.preventDefault()
+
+ //Проверка на валидацию ответов
+ if (checkedValues.length || inputValue) {
+ switch (questions[index].question_type_id) {
+ case '3':
+ // await dispatch(fetchUserAnswersMany(checkedValues))
+ break;
+ case '2':
+ case '1':
+ case '4':
+ // await dispatch(fetchUserAnswerOne(checkedValues))
+ break;
+ default:
+ break;
+ }
+
+ //Проверка на существование следующего запроса
+ if (index < questions.length - 1) {
+ await dispatch(fetchGetAnswers(questions[index + 1].id))
+ setIndex(prev => prev >= questions.length - 1 ? prev : prev + 1)
+ setStripValue((prev => prev + (100 / questions.length)))
+ setCheckedValues([]);
+ setInputValue('')
+ } else {
+ history.push(`/quiz-result`)
+ // alert("Тест пройден!")
+ }
+
+ } else {
+ alert("Вы не ответили на вопрос")
+ }
+ }
+
+ const handleChange = (e) => {
+ const checked = e.target.checked;
+ switch (questions[index].question_type_id) {
+ case '3':
+ checked ? setCheckedValues(prev => [...prev, {
+ user_id: id,
+ user_questionnaire_uuid: dataTest.uuid,
+ question_id: questions[index].id,
+ response_body: e.target.value
+ }]) :
+ setCheckedValues(prev => [...prev.filter(item => item.response_body !== e.target.value)])
+ break
+ case '1':
+ case '2':
+ case '4':
+ setCheckedValues([{
+ user_id: id,
+ user_questionnaire_uuid: dataTest.uuid,
+ question_id: questions[index].id,
+ response_body: e.target.value
+ }])
+ }
+ };
+
+
+ return (
+
+
+
+ {!questions.length || !stripValue || !listAnswers.length ?
+
Loading....
+ :
+
+
+ {/* */}
+
+
{questions[index].question_body}
+
+
+ }
+
+
+ )
+}
diff --git a/src/components/features/quiz/functions.scss b/src/components/features/quiz/functions.scss
new file mode 100644
index 00000000..54c1290e
--- /dev/null
+++ b/src/components/features/quiz/functions.scss
@@ -0,0 +1,45 @@
+
+//перевод в %
+@function prc($pxOne, $pxTwo) {
+ $result: math.div($pxOne, $pxTwo) * 100%;
+ @return $result;
+ }
+ //перевод в rem
+ @function rem($px) {
+ $result: math.div($px, 8) + rem;
+ @return $result;
+ }
+ //перевод в em
+ @function em($px, $size:16) {
+ $result: math.div($px, $size) + em;
+ @return $result;
+ }
+
+
+ //адаптивное свойство
+ @mixin adaptiv-value($property, $startSize, $minSize, $type) {
+ $addSize: $startSize - $minSize;
+ @if $type == 1 {
+ //только если меньше контейнера, присутствует ограничение
+ #{$property}: $startSize+px;
+ @media (max-width: em($maxWidthContainer)) {
+ #{$property}: calc(
+ #{$minSize+px} + #{$addSize} *
+ ((100vw - 320px) / #{$maxWidthContainer - 320})
+ );
+ }
+ } @else if $type == 2 {
+ //только если больше контейнера, min-width
+ #{$property}: rem($startSize);
+ @media (min-width: #{$maxWidthContainer + px}) {
+ #{$property}: calc(
+ #{rem($minSize)} + #{$addSize} * ((100vw - 320px) / #{$maxWidth - 320})
+ );
+ }
+ } @else {
+ //всегда на всех экранах
+ #{$property}: calc(
+ #{rem($minSize)} + #{$addSize} * ((100vw - 320px) / #{$maxWidth - 320})
+ );
+ }
+ }
\ No newline at end of file
diff --git a/src/components/features/quiz/quiz.scss b/src/components/features/quiz/quiz.scss
new file mode 100644
index 00000000..b817706f
--- /dev/null
+++ b/src/components/features/quiz/quiz.scss
@@ -0,0 +1,402 @@
+@use 'sass:math';
+@import 'functions.scss';
+
+$maxWidthContainer: 1123;
+
+._container{
+ max-width: 1123px;
+ margin: 0 auto;
+ padding: 0 10px;
+}
+
+.quiz-text{
+ font-size: 20px;
+ font-weight: 400;
+ line-height: math.div(30, 20);
+}
+.title{
+ color: #282828;
+ font-family: "GT Eesti Pro Display";
+ font-size: 33px;
+ font-weight: 700;
+ line-height: math.div(48, 33);
+ letter-spacing: 0.56px;
+}
+.subtitle{
+ color: #373936;
+ font-family: "GT Eesti Pro Display";
+ font-size: 20px;
+ font-weight: 400;
+ line-height: math.div(25, 20);
+}
+.quiz-btn{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
+ border-radius: 23px;
+ color: #ffffff;
+ outline: none;
+ border: 2px solid #52b709;
+ background: #52b709;
+ transition: 0 all ease 0.8s;
+ padding: 14px 38px;
+ line-height: 1;
+ font-family: "Muller Extra Bold";
+ font-weight: 400;
+ font-size: 16px;
+ text-decoration: none;
+ &:hover{
+ text-decoration: none;
+ color: #52b709;
+ background: #fff;
+ }
+ &_dark-green{
+ background-color: #1a310c;
+ border: 2px solid #1a310c;
+ &:hover{
+ text-decoration: none;
+ color: #1a310c;
+ background: #fff;
+ }
+ }
+ &_restriction{
+ max-width: 131px;
+ }
+}
+.quiz-title_h3{
+ color: #000000;
+ font-family: "GT Eesti Pro Display";
+ font-size: 25px;
+ font-weight: 400;
+ line-height: math.div(30, 25);
+}
+//=============================================
+.header-quiz{
+ @include adaptiv-value("padding-top", 48, 30, 1);
+ @include adaptiv-value("padding-bottom", 85, 30, 1);
+ &__container{
+ max-width: $maxWidthContainer+px;
+ margin: 0 auto;
+ padding: 0 10px;
+ }
+ &__title-main{
+ font-family: "GT Eesti Pro Display";
+ font-size: 24px;
+ font-weight: bold;
+ @include adaptiv-value("margin-bottom", 80, 30, 1);
+ }
+ &__body{
+ display: flex;
+ flex-wrap: wrap;
+ row-gap: 30px;
+ margin-bottom: 39px;
+ }
+ &__body_interjacent{
+ align-items: center;
+ }
+ &__description{
+ max-width: 576px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+ &__avatar{
+ position: relative;
+ display: block;
+ flex: 0 0 133px;
+ min-height: 133px;
+ margin-right: 31px;
+ img{
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ top: 0;
+ left: 0;
+ }
+ }
+ &__name-user{
+ color: #000000;
+ font-family: "GT Eesti Pro Display";
+ font-size: 16px;
+ font-weight: 400;
+ line-height: math.div(30, 20);
+ margin-right: 70px;
+ }
+ &__title{
+ color: #000000;
+ font-family: "GT Eesti Pro Display";
+ @include adaptiv-value("font-size", 25, 16, 1);
+ font-weight: 700;
+ line-height: math.div(36, 25);
+ position: relative;
+
+ &::before{
+ position: absolute;
+ content: "";
+ width: prc(316, 370);
+ height: 5px;
+ border-radius: 3px;
+ background-color: #54b611;
+ bottom: -26px;
+ }
+ }
+}
+.my-tests{
+ font-family: "GT Eesti Pro Display";
+ // @include adaptiv-value("padding-top", 85, 30, 1);
+ // @include adaptiv-value("padding-bottom", 85, 30, 1);
+ &__container{
+ max-width: $maxWidthContainer+px;
+ margin: 0 auto;
+ padding: 0 10px;
+ }
+ &__title{
+ color: #000000;
+ font-size: 25px;
+ font-weight: 400;
+ line-height: math.div(30, 25);
+ @include adaptiv-value("margin-bottom", 80, 30, 1);
+ }
+ &__items{
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ margin: 0 -41px -42px;
+ }
+}
+
+.item-test{
+ flex: 0 1 50%;
+ padding: 0 41px;
+ margin: 0 0 42px 0;
+ @media (max-width: 760px) {
+ flex: 0 1 100%;
+ }
+ &__name-test{
+ color: #373936;
+ margin-bottom: 29px;
+
+ }
+ .active{
+ color: #54b611;
+ }
+ &__body{
+
+ }
+}
+.test-data{
+ display: flex;
+ align-items: center;
+
+ &__calendar{
+ padding: 13px 21px;
+ box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
+ border-radius: 5px;
+ border: 1px solid #c4c4c4;
+ background-color: #f0f7e0;
+ font-weight: 400;
+ font-size: 13px;
+ display: flex;
+ align-items: center;
+ margin-right: 17px;
+ img{
+ display: block;
+ margin-right: 11px;
+ }
+
+ }
+ &__hr{
+ width: 28px;
+ height: 5px;
+ border-radius: 3px;
+ background-color: #54b611;
+ margin-right: 26px;
+ }
+ &__select{
+ max-width: 131px;
+ }
+}
+
+.progressbar{
+ max-width: $maxWidthContainer+px;
+ margin: 0 auto;
+ padding: 0 10px;
+ &__body{
+ display: flex;
+ align-items: center;
+ }
+ &__value{
+ flex: 0 0 39px;
+ height: 39px;
+ background-color: #5cb42b;
+ border-radius: 50%;
+ color: #fff;
+ letter-spacing: 1.1px;
+ font-size: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ // flex: 1 1 auto;
+ margin-right: 19px;
+ }
+ &__strip{
+ flex: 1 1 auto;
+ height: 19px;
+
+ div{
+ border-radius: 10px;
+ height: 100%;
+ background-color: #5cb42b;
+ }
+ }
+}
+
+.task{
+ @include adaptiv-value("padding-top", 35, 10, 1);
+ &__container{
+ max-width: $maxWidthContainer+px;
+ margin: 0 auto;
+ padding: 0 10px;
+ }
+ &__title{
+ margin-bottom: 39px;
+ }
+ &__form{
+
+ }
+
+}
+
+.form-task{
+ &__field{
+ padding: 10px 15px;
+ font-size: 17px;
+ font-family: 'GT Eesti Pro Display';
+ letter-spacing: 0.3px;
+ outline: none;
+ border: 1px solid #52b709;
+ width: 100%;
+ resize: vertical;
+ }
+ &__check {
+ padding: 0;
+ height: initial;
+ width: initial;
+ margin-bottom: 0;
+ display: none;
+ cursor: pointer;
+ }
+ &__buttons{
+ display: flex;
+ gap: 56px;
+ flex-wrap: wrap;
+ align-items: center;
+ @include adaptiv-value("margin-top", 60, 30, 1);
+ }
+}
+
+.form-task__group{
+ display: block;
+
+ margin-bottom: 15px;
+
+ label {
+ color: #373936;
+ font-family: "GT Eesti Pro Display";
+ font-size: 18px;
+ font-weight: 300;
+ line-height: math.div(28,18);
+ position: relative;
+ cursor: pointer;
+ &:before {
+ content:'';
+ -webkit-appearance: none;
+ background-color: transparent;
+ border: 2px solid #52b709;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
+ padding: 11px;
+ display: inline-block;
+ position: relative;
+ vertical-align: middle;
+ cursor: pointer;
+ margin-right: 30px;
+ }
+ }
+ input[type="radio"] + label:before{
+ border-radius: 50%;
+ }
+ input:checked + label:before{
+ background: #52b709;
+ }
+ input:checked + label:after {
+
+ content: "";
+ display: block;
+ position: absolute;
+ top: 6px;
+ left: 9px;
+ width: 7px;
+ height: 14px;
+ border: solid #fff;
+ border-width: 0 2px 2px 0;
+ transform: rotate(45deg);
+ }
+ }
+
+.instruction{
+ &__container{
+ max-width: $maxWidthContainer+px;
+ margin: 0 auto;
+ padding: 0 10px;
+ }
+ &__title{
+ @include adaptiv-value("margin-bottom", 62, 20, 1);
+ }
+ &__text{
+ color: #373936;
+ font-family: "GT Eesti Pro Display";
+ font-size: 18px;
+ font-weight: 300;
+ line-height: math.div(28, 18);
+ @include adaptiv-value("margin-bottom", 50, 20, 1);
+ span{
+ color: #54b611;
+ font-weight: 700;
+ }
+ &_info{
+ margin-bottom: 0;
+ }
+ }
+ &__info{
+ display: flex;
+ gap: 24px;
+ align-items: center;
+ }
+ &__icon{
+ width: 36px;
+ height: 33px;
+ }
+ &__btn{
+ margin-bottom: 34px;
+ }
+}
+
+.result{
+ font-family: "GT Eesti Pro Display";
+ &__body{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ gap: 10px;
+ }
+ &__text{
+ font-size: 24px;
+ font-weight: bold;
+ }
+ &__score{
+ color: #5cb42b;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/quiz/InstructionPage.js b/src/pages/quiz/InstructionPage.js
new file mode 100644
index 00000000..7f52650d
--- /dev/null
+++ b/src/pages/quiz/InstructionPage.js
@@ -0,0 +1,23 @@
+import {Redirect} 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)
+
+ if(!test){
+ return
+ }
+
+ return (
+ <>
+
+
+ >
+ )
+}
\ No newline at end of file
diff --git a/src/pages/quiz/InterjacentPage.js b/src/pages/quiz/InterjacentPage.js
new file mode 100644
index 00000000..72b3d2d5
--- /dev/null
+++ b/src/pages/quiz/InterjacentPage.js
@@ -0,0 +1,24 @@
+import {Redirect} from "react-router-dom"
+import {HeaderPageTestsQuiz} from "../../components/features/quiz/HeaderPageTests"
+import {MyTestsQuiz} from "../../components/features/quiz/MyTestsQuiz"
+import {useSelector} from "react-redux";
+import {selectedTest, selectPassedTests} from "../../redux/quizSlice";
+import React from "react";
+
+
+export const InterjacentPage = () => {
+
+ const test = useSelector(selectedTest)
+ const passedTests = useSelector(selectPassedTests)
+
+ if (!test) {
+ return
+ }
+
+ return (
+ <>
+
+
+ >
+ )
+}
\ No newline at end of file
diff --git a/src/pages/quiz/QuizPage.js b/src/pages/quiz/QuizPage.js
new file mode 100644
index 00000000..11e8ff55
--- /dev/null
+++ b/src/pages/quiz/QuizPage.js
@@ -0,0 +1,17 @@
+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";
+
+export const QuizPage = () => {
+
+ const allTests = useSelector(selectQuestionnairesOfUser)
+
+ return (
+ <>
+
+
+ >
+ )
+}
\ No newline at end of file
diff --git a/src/pages/quiz/QuizTestPage.js b/src/pages/quiz/QuizTestPage.js
new file mode 100644
index 00000000..bcfe457f
--- /dev/null
+++ b/src/pages/quiz/QuizTestPage.js
@@ -0,0 +1,22 @@
+import {Link, Redirect} from 'react-router-dom'
+import {HeaderPageTestsQuiz} from '../../components/features/quiz/HeaderPageTests'
+import {Progressbar} from '../../components/features/quiz/ProgressbarQuiz'
+import {TaskQuiz} from '../../components/features/quiz/Task'
+import {useSelector} from "react-redux";
+import {selectedTest} from "../../redux/quizSlice";
+import React from "react";
+
+export const QuizTestPage = () => {
+
+ const test = useSelector(selectedTest)
+
+ if (!test) {
+ return
+ }
+ return (
+ <>
+
+
+ >
+ )
+}
\ No newline at end of file
diff --git a/src/pages/quiz/ResultPage.js b/src/pages/quiz/ResultPage.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/redux/quizSlice.js b/src/redux/quizSlice.js
new file mode 100644
index 00000000..e3eb2580
--- /dev/null
+++ b/src/redux/quizSlice.js
@@ -0,0 +1,137 @@
+import {createAsyncThunk, createSlice} from '@reduxjs/toolkit';
+import {fetchGet, fetchPost} from './../server/server'
+import axios from "axios";
+
+
+const initialState = {
+ // questions: [],
+ answer: [],
+ result: null,
+ isLoading: false,
+ dataQuestionnairesOfUser: [],
+ passedTests: [],
+ selectedTest: null,
+ userInfo: null
+};
+export const setUserInfo = createAsyncThunk(
+ 'userInfo',
+ async (id) => {
+ try{
+ const response = await fetchGet({
+ link: `${process.env.REACT_APP_API_URL}/api/user-card/get-user-card?user_id=${id}`,
+ Origin: `${process.env.REACT_APP_BASE_URL}`,
+ }
+ )
+ return response
+ }catch (e) {
+ console.log(e)
+ }
+ }
+)
+
+export const fetchUserAnswersMany = createAsyncThunk(
+ 'answersUserMany',
+ async (checkedValues) => {
+ try{
+ const response = await axios.post(`${process.env.REACT_APP_API_URL}/api/user-response/set-responses`,
+ {"userResponses": checkedValues}, {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem('auth_token')}`,
+ }
+ })
+ return response.data
+ }catch (e) {
+ console.log(e)
+ }
+ }
+)
+export const fetchUserAnswerOne = createAsyncThunk(
+ 'answersUserOne',
+ async (checkedValues) => {
+ try{
+ const response = await axios.post(`${process.env.REACT_APP_API_URL}/api/user-response/set-response`,
+ checkedValues[0], {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem('auth_token')}`,
+ }
+ })
+ return response.data
+ }catch (e) {
+ console.log(e)
+ }
+ }
+)
+export const fetchGetAnswers = createAsyncThunk(
+ 'answers',
+ async (question_id) => {
+ const resp = await fetchGet({
+ link: `${process.env.REACT_APP_API_URL}/api/answer/get-answers?question_id=${question_id}`,
+ Origin: `${process.env.REACT_APP_BASE_URL}`,
+ }
+ )
+ return resp
+ }
+)
+// export const fetchGetQuestion = createAsyncThunk(
+// 'questions',
+// async (uuid) => {
+// const resp = await fetchGet({
+// link: `${process.env.REACT_APP_API_URL}/api/question/get-questions?uuid=${uuid}`,
+// Origin: `${process.env.REACT_APP_BASE_URL}`,
+// }
+// )
+// return resp
+// }
+// )
+export const fetchResultTest = createAsyncThunk(
+ 'result',
+ async (uuid) => {
+ const resp = await fetchGet({
+ link: `${process.env.REACT_APP_API_URL}/api/user-questionnaire/questionnaire-completed?user_questionnaire_uuid=${uuid}`,
+ Origin: `${process.env.REACT_APP_BASE_URL}`,
+ }
+ )
+ return resp
+
+ }
+)
+
+export const quizSlice = createSlice({
+ name: 'quiz',
+ initialState,
+ reducers: {
+ setQuestionnairesList: (state, action) => {
+ state.dataQuestionnairesOfUser = action.payload
+ state.passedTests = action.payload.filter(item=>item.status === 2)
+ },
+ setSelectedTest: (state, action) => {
+ state.selectedTest = action.payload
+ },
+ },
+ extraReducers: {
+ [setUserInfo.fulfilled]: (state, action) => {
+ state.userInfo = action.payload;
+ },
+ [fetchGetAnswers.fulfilled]: (state, action) => {
+ state.answer = action.payload;
+ },
+ [fetchResultTest.fulfilled]: (state, action) => {
+ state.result = action.payload;
+ },
+ },
+});
+
+export const {setQuestionnairesList, setSelectedTest} = quizSlice.actions;
+
+// export const selectQuestions = (state) => state.quiz.questions;
+export const selectAnswer = (state) => state.quiz.answer;
+export const selectQuestionnairesOfUser = (state) => state.quiz.dataQuestionnairesOfUser;
+export const selectResult = (state) => state.quiz.result;
+export const selectIsLoading = (state) => state.quiz.isLoading;
+export const selectedTest = (state) => state.quiz.selectedTest;
+export const selectPassedTests = (state) => state.quiz.passedTests;
+export const selectUserInfo = (state) => state.quiz.userInfo;
+
+
+export default quizSlice.reducer;
+