From f7367dbdf297851d99e513eb9fa6606426a9ef07 Mon Sep 17 00:00:00 2001
From: Dmitry220 <dmitry19.kravtsov123@gmail.com>
Date: Fri, 18 Mar 2022 16:39:13 +0300
Subject: [PATCH] quiz page

---
 src/components/features/quiz/GetOptionTask.js |  38 ++
 .../features/quiz/HeaderPageTests.js          |  30 ++
 src/components/features/quiz/HeaderQuiz.js    |  48 +++
 src/components/features/quiz/Instructions.js  |  48 +++
 src/components/features/quiz/MyTestsQuiz.js   |  73 ++++
 .../features/quiz/ProgressbarQuiz.js          |  18 +
 src/components/features/quiz/Results.js       |   0
 src/components/features/quiz/Task.js          | 152 +++++++
 src/components/features/quiz/functions.scss   |  45 ++
 src/components/features/quiz/quiz.scss        | 402 ++++++++++++++++++
 src/pages/quiz/InstructionPage.js             |  23 +
 src/pages/quiz/InterjacentPage.js             |  24 ++
 src/pages/quiz/QuizPage.js                    |  17 +
 src/pages/quiz/QuizTestPage.js                |  22 +
 src/pages/quiz/ResultPage.js                  |   0
 src/redux/quizSlice.js                        | 137 ++++++
 16 files changed, 1077 insertions(+)
 create mode 100644 src/components/features/quiz/GetOptionTask.js
 create mode 100644 src/components/features/quiz/HeaderPageTests.js
 create mode 100644 src/components/features/quiz/HeaderQuiz.js
 create mode 100644 src/components/features/quiz/Instructions.js
 create mode 100644 src/components/features/quiz/MyTestsQuiz.js
 create mode 100644 src/components/features/quiz/ProgressbarQuiz.js
 create mode 100644 src/components/features/quiz/Results.js
 create mode 100644 src/components/features/quiz/Task.js
 create mode 100644 src/components/features/quiz/functions.scss
 create mode 100644 src/components/features/quiz/quiz.scss
 create mode 100644 src/pages/quiz/InstructionPage.js
 create mode 100644 src/pages/quiz/InterjacentPage.js
 create mode 100644 src/pages/quiz/QuizPage.js
 create mode 100644 src/pages/quiz/QuizTestPage.js
 create mode 100644 src/pages/quiz/ResultPage.js
 create mode 100644 src/redux/quizSlice.js

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 (
+           <div className="form-task__group" key={answer.id}>
+              <input className='form-task__check' type="checkbox" value={answer.answer_body} id={answer.id}
+                     onChange={handleChange}/>
+              <label htmlFor={answer.id}>{answer.answer_body}</label>
+           </div>
+         )
+      case "2":
+      case "4":
+         return (
+           <div className="form-task__group" key={answer.id}>
+              <input className='form-task__check' type="radio" value={answer.answer_body} name={'radio'} id={answer.id}
+                     onChange={handleChange}/>
+              <label htmlFor={answer.id}>{answer.answer_body}</label>
+           </div>
+         )
+      case "1":
+         return (
+           <div className="form-task__group">
+              <textarea className='form-task__field' value={inputValue}
+                        onChange={handleChange}/>
+           </div>
+         )
+      default:
+         return (
+           <div className="form-task__group" key={answer.id}>
+              <input className='form-task__check' type="checkbox" value={answer.answer_body} id={answer.id}
+                     onChange={handleChange}/>
+              <label htmlFor={answer.id}>{answer.answer_body}</label>
+           </div>
+         )
+   }
+}
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 (
+     <div className="header-quiz">
+        <div className="header-quiz__container">
+           <div className="header-quiz__body">
+              <div className="header-quiz__avatar">
+                 {userInfo.photo && <img src={userInfo.photo} alt={userInfo.photo}/>}
+              </div>
+              <div className="header-quiz__description">
+                 <div className="header-quiz__title-test title">{test.questionnaire_title}</div>
+                 <div className="header-quiz__subtitle subtitle">Тест на основе выступление
+                    "{test.questionnaire_title}" {userInfo.fio}</div>
+              </div>
+           </div>
+           {isVisibilityButton &&
+           <Link to={'/quiz-instruction'} className='quiz-btn quiz-btn_restriction'>Пройти</Link>}
+        </div>
+     </div>
+   )
+}
\ 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 (
+     <div className="header-quiz">
+        <div className="header-quiz__container">
+           {!userInfo ? <h2>Loading...</h2> :
+             <>
+                {header && <h2 className={'header-quiz__title-main'}>Добрый день, {userInfo.fio}</h2>}
+                <div className="header-quiz__body header-quiz__body_interjacent">
+                   <div className="header-quiz__avatar">
+                      <img src={userInfo.photo} alt={userInfo.photo}/>
+                   </div>
+                   <div className="header-quiz__name-user">{userInfo.fio}</div>
+                   <div className="header-quiz__title">{userInfo.position_name}</div>
+                </div>
+             </>
+           }
+        </div>
+     </div>
+   )
+}
\ 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 (
+     <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>
+        </div>
+     </div>
+   )
+}
+
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 (
+     <div className="my-tests">
+        <div className="my-tests__container">
+           <div className="my-tests__title">Мои тесты</div>
+           <div className="my-tests__items">
+              {listTests.map(item => {
+                 switch (item.status) {
+                    case 1:
+                       return <article className="my-tests__item item-test" key={item.questionnaire_title}>
+                          <h3 className="item-test__name-test">
+                             {item.questionnaire_title}
+                          </h3>
+                          <div className="item-test__body test-data">
+                             <Link to={'/quiz-interjacent'} className='quiz-btn'
+                                   onClick={() => recordSelectedTest(item)}>Пройти</Link>
+                          </div>
+                       </article>
+                    case 2:
+                       return <article className="my-tests__item item-test" key={item.questionnaire_title}>
+                          <h3 className="item-test__name-test">
+                             {item.questionnaire_title}
+                          </h3>
+                          <div className="item-test__body test-data">
+                             <div className="test-data__calendar ">
+                                <img src={calendarImage} alt=""/>
+                                {item.testing_date}
+                             </div>
+                             <div className="test-data__hr"></div>
+                             <div className="test-data__score quiz-text">{item.score} {formationEndingOfScore(item.score)}</div>
+                          </div>
+                       </article>
+                    case 3:
+                       return <article className="my-tests__item item-test" key={item.questionnaire_title}>
+                          <h3 className="item-test__name-test">
+                             {item.questionnaire_title}
+                          </h3>
+                          <div className="item-test__body test-data">
+                             <div className='quiz-btn'>На проверке</div>
+                          </div>
+                       </article>
+                    default:
+                       break
+                 }
+              })}
+           </div>
+        </div>
+     </div>
+   )
+}
\ 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 (
+      <div className="progressbar">
+          <div className="progressbar__body">
+              <div className="progressbar__value">
+                  {indexQuestion}
+              </div>
+              <div className="progressbar__strip" >
+                  <div style={{width: width+'%'}}></div>
+              </div>
+          </div>
+      </div>
+    )
+}
\ 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 (
+     <React.StrictMode>
+        <Progressbar indexQuestion={index + 1} width={stripValue}/>
+        <div className="task">
+           {!questions.length || !stripValue || !listAnswers.length ?
+             <h1 className={'_container'} style={{display: "block"}}>Loading....</h1>
+             :
+             <div className="task__container">
+                <div className="task__code code">
+                   {/* <CodeSnippetlighter /> */}
+                </div>
+                <h3 className="task__title quiz-title_h3">{questions[index].question_body}</h3>
+                <div className="task__body">
+                   <form className='task__form form-task'>
+                      {
+                         questions[index].question_type_id === 1 ?
+                           <GetOptionTask
+                             type={1}
+                             inputValue={checkedValues.length ? checkedValues[0].response_body : ''}
+                             handleChange={handleChange}
+                           />
+                           :
+                           listAnswers.map((answer) => (
+                             <GetOptionTask
+                               key={answer.id}
+                               type={questions[index].question_type_id}
+                               handleChange={handleChange}
+                               answer={answer}
+                             />
+                           ))
+
+                      }
+                      <div className="form-task__buttons">
+                         {questions.length !== index + 1 &&
+                         <button type='submit' className='quiz-btn'
+                                 onClick={(e) => nextQuestion(e)}>Далее</button>}
+                         {questions.length === index + 1 && <button onClick={(e) => nextQuestion(e)}
+                                                                    className='quiz-btn quiz-btn_dark-green'>Завершить</button>}
+                      </div>
+                   </form>
+                </div>
+             </div>
+           }
+        </div>
+     </React.StrictMode>
+   )
+}
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 <Redirect to={'/quiz'} />
+    }
+
+    return (
+        <>
+            <HeaderPageTestsQuiz isVisibilityButton={false}/>
+            <Instruction />
+        </>
+    )
+}
\ 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 <Redirect to={'/quiz'}/>
+   }
+
+   return (
+     <>
+        <HeaderPageTestsQuiz isVisibilityButton={true}/>
+        <MyTestsQuiz listTests={passedTests}/>
+     </>
+   )
+}
\ 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 (
+     <>
+        <HeaderQuiz header={true}/>
+        <MyTestsQuiz listTests={allTests}/>
+     </>
+   )
+}
\ 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 <Redirect to={'/quiz'}/>
+   }
+   return (
+     <>
+        <HeaderPageTestsQuiz isVisibilityButton={false}/>
+        <TaskQuiz/>
+     </>
+   )
+}
\ 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;
+