added all components

site/src/quiz/features/Choosing.tsx

@@ -0,0 +1,70 @@
+import { Grid, List, ListItem, ListItemButton, ListItemText } from '@mui/material';
+import { useDispatch, useSelector } from 'react-redux';
+import type { tTasks } from "../quizData"
+import { useEffect } from 'react';
+import { addList, mixUp } from './quizSlice';
+import Checkbox from '@mui/material/Checkbox';
+import type { RootState } from '../../store';
+import type { ChangeEvent } from 'react';
+import { setCheckedItems } from './quizSlice';
+
+
+interface ComponentProps {
+  tasks: tTasks;
+  index: number;
+}
+
+function Matching({ tasks, index }: ComponentProps) {
+  const dispatch = useDispatch();
+  const answers: boolean[] = tasks.map((item) => Boolean(item.answer));
+  const items: string[] = tasks.map((item) => String(item.answer));
+  const arr = useSelector((state: RootState) => state.quiz.userAnswers[index]);
+  const isDisabled = useSelector((state: RootState) => state.quiz.isTestingDone);
+  useEffect(() => {
+    dispatch(addList({ index, items: items, answers: answers, quizType: "M" }));
+  }, []);
+
+  useEffect(() => {
+    dispatch(mixUp());
+  }, []);
+
+
+  const handleCheckboxAction = (checkboxIndex: number) => (event: ChangeEvent<HTMLInputElement, Element>, checked: boolean) => {
+    let answersCopy = [ ...arr ];
+    answersCopy[checkboxIndex] = checked;
+    dispatch(setCheckedItems({ index, items: answersCopy }));
+  };
+  
+  console.log(arr);
+
+  return (
+    <Grid container spacing={2}>
+      <Grid size={12}>
+        <List>
+          {tasks.map((item, itemIndex) => (
+            <ListItem key={itemIndex}>
+              <ListItemButton
+                sx={{
+                  border: '1px solid gray',
+                  borderRadius: '5px',
+                  textAlign: 'right',
+                }}>
+                <ListItemText primary={item.question} />
+                <Checkbox
+                  onChange={isDisabled ? (..._) => { _ } : handleCheckboxAction(itemIndex)}
+                  checked={Boolean(arr == undefined ? false : arr[itemIndex])}
+                  sx={{ '& .MuiSvgIcon-root': { fontSize: 28 } }}
+                />
+              </ListItemButton>
+            </ListItem>
+          ))}
+        </List>
+      </Grid>
+      <Grid size={12}>
+
+      </Grid>
+    </Grid>
+  );
+}
+
+export default Matching

site/src/quiz/features/Matching.tsx

@@ -1,49 +1,49 @@
 import { Grid, List, ListItem, ListItemButton, ListItemText } from '@mui/material';
-import type {tTasks} from "../quizData"
+import type { tTasks } from "../quizData"
 import SortableList from '../features/SortableList';
 import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
-import { addList,mixUp } from './quizSlice';
+import { addList, mixUp } from './quizSlice';
 interface ComponentProps {
-    tasks: tTasks;
-    index: number;
-  }
+  tasks: tTasks;
+  index: number;
+}
 
-function Matching({tasks,index}: ComponentProps) {
+function Matching({ tasks, index }: ComponentProps) {
   const dispatch = useDispatch();
-  
+  const answers: string[] = tasks.map((item) => String(item.answer));
   // Добавляем список ответов очередного задания в хранилище
   useEffect(() => {
-     dispatch(addList({ index, items: answers }));
+    dispatch(addList({ index, items: answers, answers:answers, quizType: "M" }));
   }, []);
 
   useEffect(() => {
-     dispatch(mixUp());
+    dispatch(mixUp());
   }, []);
 
 
-  const answers: string[] = tasks.map((item) => String(item.answer));
+
   return (
     <Grid container spacing={2}>
       <Grid size={6}>
         <List>
           {tasks.map((item, index) => (
-          <ListItem key={index}>
-            <ListItemButton 
-              sx={{
-                border: '1px solid gray',
-                borderRadius: '5px',
-                textAlign: 'right',
-            }}>
-              <ListItemText primary={item.question} />
-           </ListItemButton>
-          </ListItem> 
+            <ListItem key={index}>
+              <ListItemButton
+                sx={{
+                  border: '1px solid gray',
+                  borderRadius: '5px',
+                  textAlign: 'right',
+                }}>
+                <ListItemText primary={item.question} />
+              </ListItemButton>
+            </ListItem>
           ))}
         </List>
       </Grid>
 
-          <Grid size={6}>
-        <SortableList index={index} answers={answers}/>
+      <Grid size={6}>
+        <SortableList index={index} answers={answers} />
       </Grid>
     </Grid>
   );

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>

site/src/quiz/features/SortableList.tsx

@@ -4,8 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { setDraggedItems } from './quizSlice';
 import type { RootState } from '../../store';
 import List from '@mui/material/List';
-import { SortableItem } from '../components/SortableItem'
-
+import { SortableItem } from '../components/SortableItem';
 interface ComponentProps {
   index: number;
   answers: string[];

site/src/quiz/features/Sorting.tsx

@@ -0,0 +1,35 @@
+import { Grid} from '@mui/material';
+import type { tTasks } from "../quizData"
+import SortableList from '../features/SortableList';
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { addList, mixUp } from './quizSlice';
+interface ComponentProps {
+  tasks: tTasks;
+  index: number;
+}
+
+function Matching({ tasks, index }: ComponentProps) {
+  const dispatch = useDispatch();
+  const answers: string[] = tasks.map((item) => String(item.answer));
+  // Добавляем список ответов очередного задания в хранилище
+  useEffect(() => {
+    dispatch(addList({ index, items: answers, answers:answers, quizType: "M" }));
+  }, []);
+
+  useEffect(() => {
+    dispatch(mixUp());
+  }, []);
+
+
+
+  return (
+    <Grid container spacing={2}>
+      <Grid size={12}>
+        <SortableList index={index} answers={answers} />
+      </Grid>
+    </Grid>
+  );
+}
+
+export default Matching

site/src/quiz/features/quizSlice.tsx

@@ -56,8 +56,8 @@ const listsSlice = createSlice({
       }
     },
     mixUp: (state) => {
-      state.userAnswers = state.userAnswers.map((list) => {
-        if(typeof(list[0])==="boolean"){
+      state.userAnswers = state.userAnswers.map((list,index) => {
+        if(typeof(state.correctAnswers[index][0])==="boolean"){
           return list.map(()=>false);
         }
         return shuffle<string|boolean>(list);
@@ -73,6 +73,6 @@ const listsSlice = createSlice({
 });
 
 // Экспортируем действия и редьюсер
-export const { addList, setDraggedItems, mixUp, startTesting, stopTesting } = listsSlice.actions;
+export const { addList, setDraggedItems,setCheckedItems, mixUp, startTesting, stopTesting } = listsSlice.actions;
 export type { QuizState }
 export default listsSlice.reducer;

site/src/quiz/quizData.tsx

@@ -65,26 +65,26 @@ export const quiz: tQuizzes = [
   {
     "id": 3,
     "type": "C",
-    "title": "Вопрос 3 Выбирай!",
+    "title": "Вопрос 3 Выбирай",
     "tasks": [
       {
-        "question": "да",
+        "question": "123",
         "answer": true
       },
       {
-        "question": "нет",
+        "question": "456",
         "answer": false
       },
       {
-        "question": "и снова да",
+        "question": "789",
         "answer": true
       },
       {
-        "question": "нет",
+        "question": "101112",
         "answer": false
       },
       {
-        "question": "дааа",
+        "question": "131415",
         "answer": true
       },
     ]