logic done

site/src/quiz/features/Quiz.tsx

@@ -11,27 +11,40 @@ import { useDispatch } from 'react-redux';
 import { mixUp, startTesting, stopTesting } from './quizSlice';
 
 function QuizStats() {
+  let correctAnswers = useSelector((state: RootState) => state.quiz.correctAnswers);
+  const userAnswers = useSelector((state: RootState) => state.quiz.userAnswers);
 
   const correctCount = (index: number): number => {
-    let quiz = useSelector((state: RootState) => state.quiz);
     let state = store.getState();
     if (state.quiz.correctAnswers.length <= index) {
       return 0;
     }
-    return quiz.userAnswers[index].reduce((prev, answ, i) => prev + Number(quiz.correctAnswers[index][i] === answ), 0);
+    return userAnswers[index].reduce((prev, answ, i) => prev + Number(correctAnswers[index][i] === answ), 0);
   }
 
-  const quizPartText = (counter: number, len: number): string => {
+  const counts = userAnswers.map((_,index)=>correctCount(index));
+  const questionCounts = userAnswers.map((answers)=>answers.length);
+
+  const total= counts.reduce((x,c)=>c+x,0);
+  const totalQuestionCount= questionCounts.reduce((x,c)=>c+x,0);
+
+  const donePercentage = Math.round(total/totalQuestionCount*100*100)/100;
+
+  const quizPartText = (counter: number, len: number, taskIndex:number) => {
     if (counter == len) {
-      return "все ответы верные"
+      return <Typography key={taskIndex}>Задание {taskIndex+1}: все ответы верные</Typography>
     }
-    return `верно ${counter}/${len}`
+    return  <Typography key={taskIndex}>Задание {taskIndex+1}: верно {counter}/{len}</Typography>
   }
+
+
   return (
-    <Container sx={{ margin: "auto" }}>
-      <h3>Результаты теста</h3>
-      {/* <Typography>Задание 1: {checkTask(0)}</Typography> */}
-      {/* <Typography>Задание 2: {checkTask(1)}</Typography> */}
+    <Container sx={{ margin: "auto", d:"flex",flexDirection:"column" }}>
+      <h2>Результаты теста</h2>
+      {
+        counts.map((count,idx)=>quizPartText(count,questionCounts[idx],idx))
+      }
+      <h3>Итого {donePercentage}% Верно</h3>
     </Container>
   )
 }
@@ -61,19 +74,19 @@ function Quiz() {
           </Typography>
           {[
 
-            <Matching index={index} tasks={item.tasks} />, 
+            <Matching index={index} tasks={item.tasks} key={index}/>, 
             
-            <Sorting index={index} tasks={item.tasks} />,
+            <Sorting index={index} tasks={item.tasks} key={index}/>,
             
-            <Choosing index={index} tasks={item.tasks} />
+            <Choosing index={index} tasks={item.tasks} key={index}/>
              
              ][(["M", "S", "C"].indexOf(item.type))]}
         </Box>
         
       ))}
         <Box sx={{ display: 'flex', justifyContent: 'space-around' }}>
-                <Button onClick={checkQuiz} variant="contained">Проверить</Button>
-                <Button onClick={resetQuiz} variant="contained">Начать снова</Button>
+                <Button onClick={checkQuiz} variant="contained">Check</Button>
+                <Button onClick={resetQuiz} variant="contained">Reset</Button>
               </Box>
 
       {displayingResults && <QuizStats />}