quiz

src/App.js

@@ -107,7 +107,7 @@ const App = () => {
           <Route exact path="quiz">
             <Route index element={<QuizPage />} />
             <Route exact path="test/:uuid" element={<PassingTests />} />
-            <Route exact path="report" element={<QuizReportPage />} />
+            <Route exact path="report/:uuid" element={<QuizReportPage />} />
           </Route>
 
           <Route exact path="profile">

src/components/features/quiz/AlertResult.jsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import suucessIcon from "assets/images/quiz/success.png";
 
-export const AlertResult = () => {
+export const AlertResult = ({info}) => {
   const successTest = false;
 
   return (
@@ -17,7 +17,7 @@ export const AlertResult = () => {
           className="alert-result__text"
           style={{ color: successTest ? "#52B709" : "#5B6871" }}
         >
-          Благодарим Вас за прохождение теста "Junior разработчик". Ваши
+          Благодарим Вас за прохождение теста "{info.questionnaire_title}". Ваши
           результаты проверены, готовы пригласить Вас в команду
         </div>
       </div>

src/components/features/quiz/CardAviableTest.jsx

@@ -9,7 +9,7 @@ export const CardAvailableTest = ({ title, description, path, status }) => {
   return (
     <div className="card-available-test">
       <Link
-        to={`/${path}`}
+        to={status === 2 ? `/quiz/report/${path}` : `/quiz/test/${path}`}
         aria-disabled={true}
         className="card-available-test__container"
         style={
@@ -33,7 +33,7 @@ export const CardAvailableTest = ({ title, description, path, status }) => {
       {status === 2 && (
         <div className="card-available-test__finished">
           <p>Получить отчет по тестированию</p>
-          <Link to={"/quiz/report"}>Отчет по тесту</Link>
+          <Link to={`/quiz/report/${path}`}>Отчет по тесту</Link>
         </div>
       )}
     </div>

src/components/features/quiz/QuizReport.jsx

@@ -2,7 +2,13 @@ import React from "react";
 
 import StarRating from "@components/StarRating/StarRating";
 
-export const QuizReport = () => {
+export const QuizReport = ({info}) => {
+  function correctAnswers() {
+    return info.number_questions * info.percent_correct_answers
+  }
+  function correctWrongAnswers() {
+    return info.number_questions * (1 - info.percent_correct_answers)
+  }
   return (
     <div className="report">
       <div className="report__row">
@@ -14,15 +20,15 @@ export const QuizReport = () => {
             size={61}
           />
           <div className="report__job-title">
-            Junior <br /> разработчик
+            {info.questionnaire_title}
           </div>
         </div>
         <div className="report__column">
-          <div className="report__value">22</div>
+          <div className="report__value">{Boolean(correctAnswers()) ? correctAnswers() : 0}</div>
           <div className="report__text">Правильных ответов</div>
         </div>
         <div className="report__column">
-          <div className="report__value report__value_false">02</div>
+          <div className="report__value report__value_false">{Boolean(correctWrongAnswers()) ? correctWrongAnswers() : 0}</div>
           <div className="report__text">Не правильных ответов</div>
         </div>
         <div className="report__column">

src/pages/quiz/PassingTests.js

@@ -9,7 +9,8 @@ import { completedTestSelector } from "@redux/quizSlice";
 import { Footer } from "@components/Common/Footer/Footer";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
-import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
+import { Navigation } from "@components/Navigation/Navigation";
+// import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
 import { BlockCompletedTest } from "@components/features/quiz/BlockCompletedTest";
 import { CardIntroduction } from "@components/features/quiz/Card-introduction";
 import { QuizPassingInformation } from "@components/features/quiz/Quiz-passing-information";
@@ -78,7 +79,8 @@ export const PassingTests = () => {
   return (
     <div className="passing-tests-page">
       <ProfileHeader />
-      <HeadBottom />
+      <Navigation />
+      {/*<HeadBottom />*/}
       <div className="passing-tests-page__container">
         <ProfileBreadcrumbs
           links={[

src/pages/quiz/QuizPage.js

@@ -133,7 +133,7 @@ export const QuizPage = () => {
                 questionnaires.map((item, index) => (
                   <CardAvailableTest
                     description={item.description}
-                    path={`quiz/test/${item.uuid}`}
+                    path={item.uuid}
                     status={item.status}
                     title={item.questionnaire_title}
                     passedTest={item.passedTest}

src/pages/quiz/QuizReportPage.js

@@ -1,28 +1,40 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
 import { selectedTest } from "@redux/quizSlice";
 
 import { Footer } from "@components/Common/Footer/Footer";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
-import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
+import { Navigation } from "@components/Navigation/Navigation";
+// import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
 import { AlertResult } from "@components/features/quiz/AlertResult";
 import { QuizReport } from "@components/features/quiz/QuizReport";
+import { apiRequest } from "@api/request";
 
 export const QuizReportPage = () => {
   const test = useSelector(selectedTest);
+  const params = useParams();
 
   let navigate = useNavigate();
   if (!test) {
     navigate("/quiz");
   }
 
+  useEffect(() => {
+    apiRequest(`/user-questionnaire/questionnaire-completed?user_questionnaire_uuid=${params.uuid}`).then((res) => {
+      setTestInfo(res)
+    })
+  }, [])
+
+  const [testInfo, setTestInfo] = useState({})
+
   return (
     <div className="quiz-report-page">
       <ProfileHeader />
-      <HeadBottom />
+      <Navigation />
+      {/*<HeadBottom />*/}
       <div className="quiz-report-page__container">
         <ProfileBreadcrumbs
           links={[
@@ -32,12 +44,12 @@ export const QuizReportPage = () => {
           ]}
         />
         <div className="quiz-report-page__title main-title">
-          Отчет по тестированию позиции Junior разработчик
+          Отчет по тестированию позиции {testInfo.questionnaire_title}
         </div>
         <div className="quiz-report-page__report-quiz">
-          <QuizReport />
+          <QuizReport info={testInfo} />
         </div>
-        <AlertResult />
+        <AlertResult info={testInfo} />
       </div>
       <Footer />
     </div>

src/pages/quiz/quiz-page.scss

@@ -68,7 +68,7 @@
   }
   &__container {
     max-width: 1160px;
-    margin: 0 auto 42px auto;
+    margin: 23px auto 42px auto;
     flex: 1 1 auto;
     width: 100%;
     padding: 0 15px;
@@ -90,7 +90,7 @@
   flex-direction: column;
   &__container {
     max-width: 1160px;
-    margin: 0 auto 42px auto;
+    margin: 23px auto 42px auto;
     flex: 1 1 auto;
     width: 100%;
     padding: 0 15px;
@@ -125,7 +125,7 @@
   flex-direction: column;
   &__container {
     max-width: 1160px;
-    margin: 0 auto 42px auto;
+    margin: 23px auto 42px auto;
     flex: 1 1 auto;
     width: 100%;
     padding: 0 15px;