added all components

site/src/quiz/features/Quiz.tsx

@@ -1,8 +1,10 @@
 import { Box, Button, Container, Typography } from '@mui/material';
 import { quiz } from "../quizData";
 import { useSelector } from 'react-redux';
-import {useState } from 'react';
+import { useState } from 'react';
 import Matching from './Matching';
+import Sorting from './Sorting';
+import Choosing from './Choosing';
 import type { RootState } from '../../store';
 import store from '../../store';
 import { useDispatch } from 'react-redux';
@@ -10,7 +12,7 @@ import { mixUp, startTesting, stopTesting } from './quizSlice';
 
 function QuizStats() {
 
-  const correctCount = (index: number):number => {
+  const correctCount = (index: number): number => {
     let quiz = useSelector((state: RootState) => state.quiz);
     let state = store.getState();
     if (state.quiz.correctAnswers.length <= index) {
@@ -19,7 +21,7 @@ function QuizStats() {
     return quiz.userAnswers[index].reduce((prev, answ, i) => prev + Number(quiz.correctAnswers[index][i] === answ), 0);
   }
 
-  const quizPartText = (counter:number, len:number):string=>{
+  const quizPartText = (counter: number, len: number): string => {
     if (counter == len) {
       return "все ответы верные"
     }
@@ -53,18 +55,27 @@ function Quiz() {
   return (
     <Container maxWidth="md">
       {quiz.map((item, index) => (
-        <Box key={item.id} component="section" sx={{ m: 2, p: 2 }}>
+        <Box key={item.id} component="section" sx={{ m: 2, p: 2}}>
           <Typography variant="h5" gutterBottom>
             {index + 1}. {item.title}
           </Typography>
-          {[<Matching index={index} tasks={item.tasks} />,<>S</>,<>c</>][(["M","S","C"].indexOf(item.type))]}
-        </Box>
-      ))}
+          {[
+
+            <Matching index={index} tasks={item.tasks} />, 
+            
+            <Sorting index={index} tasks={item.tasks} />,
+            
+            <Choosing index={index} tasks={item.tasks} />
+             
+             ][(["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>
+              </Box>
 
-      <Box sx={{ display: 'flex', justifyContent: 'space-around' }}>
-        <Button onClick={checkQuiz} variant="contained">Проверить</Button>
-        <Button onClick={resetQuiz} variant="contained">Начать снова</Button>
-      </Box>
       {displayingResults && <QuizStats />}
 
     </Container>