hw 8 done (Thank You!)

site/package-lock.json

@@ -8,17 +8,22 @@
       "name": "site",
       "version": "0.0.0",
       "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
         "@mui/icons-material": "^9.0.0",
         "@mui/material": "^9.0.0",
         "@mui/x-charts": "^9.0.1",
         "@mui/x-data-grid": "^9.0.1",
+        "@reduxjs/toolkit": "^2.11.2",
         "@types/d3": "^7.4.3",
         "d3": "^7.9.0",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
-        "react-router-dom": "^7.14.1"
+        "react-redux": "^9.2.0",
+        "react-router-dom": "^7.14.1",
+        "redux": "^5.0.1"
       },
       "devDependencies": {
         "@babel/core": "^7.29.0",
@@ -278,6 +283,59 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
+      "integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@emnapi/core": {
       "version": "1.9.2",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz",
@@ -1150,6 +1208,32 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
+      "integrity": "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.0.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rolldown/binding-android-arm64": {
       "version": "1.0.0-rc.15",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.15.tgz",
@@ -1463,6 +1547,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -1842,6 +1938,12 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.58.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.58.1.tgz",
@@ -3403,6 +3505,16 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "11.1.4",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.4.tgz",
+      "integrity": "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -4196,6 +4308,29 @@
       "integrity": "sha512-Dn0t8IQhCmeIT3wu+Apm1/YVsJXsGWi6k4sPdnBIdqMVtHtv0IGi6dcpNpNkNac0zB2uUAqNX3MHzN8c+z2rwQ==",
       "license": "MIT"
     },
+    "node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-router": {
       "version": "7.14.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.14.1.tgz",
@@ -4250,6 +4385,21 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/reselect": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
@@ -4487,9 +4637,7 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "dev": true,
+      "license": "0BSD"
-      "license": "0BSD",
-      "optional": true
     },
     "node_modules/type-check": {
       "version": "0.4.0",

site/package.json

@@ -10,17 +10,22 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^9.0.0",
     "@mui/material": "^9.0.0",
     "@mui/x-charts": "^9.0.1",
     "@mui/x-data-grid": "^9.0.1",
+    "@reduxjs/toolkit": "^2.11.2",
     "@types/d3": "^7.4.3",
     "d3": "^7.9.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "react-router-dom": "^7.14.1"
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^7.14.1",
+    "redux": "^5.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",

site/src/main.tsx

@@ -1,6 +1,6 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-
+import { Provider } from 'react-redux';
 import {
   createBrowserRouter,
   RouterProvider,
@@ -9,8 +9,9 @@ import {
 import List from "./list/List";
 import Chart from "./chart/Chart";
 import Main from "./main/Main";
+import Quiz from "./quiz/QuizPage";
 import ProjectDetails from "./projectDetails/ProjectDetails";
-
+import store from './store';
 
 
 const router = createBrowserRouter([
@@ -30,6 +31,10 @@ const router = createBrowserRouter([
     path: "/chart",
     element: <Chart />,
   },
+   {
+    path: "/quiz",
+    element: <Quiz />,
+  },
 ]);
 
 
@@ -37,6 +42,8 @@ const router = createBrowserRouter([
 import './styles/index.css'
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <RouterProvider router={router} />
+    <Provider store={store}>
+      <RouterProvider router={router} />
+    </Provider>
   </StrictMode>,
 )

site/src/quiz/QuizPage.tsx

@@ -0,0 +1,15 @@
+import NavBar from "../components/Navbar";
+import Footer from "../components/CustomFooter";
+import Quiz from "./features/Quiz";
+
+function QuizPage() {
+    return (
+        <>
+        <NavBar active="4" />
+        <Quiz />
+        <Footer />
+        </>
+    );
+}
+
+export default  QuizPage;

site/src/quiz/components/SortableItem.tsx

@@ -0,0 +1,42 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { ListItem, ListItemText, ListItemButton, ListItemIcon} from '@mui/material';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+
+interface SortableItemProps {
+   item: string;
+   id: string;// чтобы тайпскрипт компилятор не жаловался, добавил в инетрфейс, хотя и так компилируется нормально
+   isDisabled:boolean;
+}
+
+export function SortableItem({ item ,isDisabled}: SortableItemProps) {
+      const id = item; /* идентификатор для useSortable */
+      const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+      } = useSortable({ id });
+
+      const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+      };
+
+      return (
+        <ListItem ref={ isDisabled ? undefined : setNodeRef } style={ style } { ...attributes } { ...listeners }>
+          <ListItemButton
+              sx={{
+              border: '1px solid gray',
+              borderRadius: '5px',
+              height:"4.4em"
+            }}>
+            <ListItemIcon>
+              <DragIndicatorIcon />
+            </ListItemIcon>
+            <ListItemText primary={ item } />
+          </ListItemButton>
+        </ListItem>
+      );
+    }

site/src/quiz/features/Choosing.tsx

@@ -0,0 +1,72 @@
+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 correctAnswers = useSelector((state: RootState) => state.quiz.correctAnswers[index]);
+  const questions = useSelector((state: RootState) => state.quiz.questions[index]);
+  const isDisabled = useSelector((state: RootState) => state.quiz.isTestingDone);
+  useEffect(() => {
+    dispatch(addList({ index, items: items,questions:tasks.map((item) => String(item.question)), answers: answers, quizType: "M" }));
+  }, []);
+
+  useEffect(() => {
+    dispatch(mixUp());
+  }, []);
+
+
+  const handleCheckboxAction = (checkboxIndex: number) => (_: ChangeEvent<HTMLInputElement, Element>, checked: boolean) => {
+    let answersCopy = arr.map((x)=>(Boolean(x)));
+    answersCopy[checkboxIndex] = checked;
+    dispatch(setCheckedItems({ index, items: answersCopy }));
+  };
+  
+  // console.log(arr);
+
+  return (
+    <Grid container spacing={2}>
+      <Grid size={12}>
+        <List>
+          {tasks.map((_, itemIndex) => (
+            <ListItem key={itemIndex}>
+              <ListItemButton
+                sx={{
+                  border: '1px solid gray',
+                  borderRadius: '5px',
+                  textAlign: 'right',
+                }}>
+                <ListItemText primary={arr == undefined ? "loading": questions[itemIndex]} />
+                <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

@@ -0,0 +1,53 @@
+import { Grid, List, ListItem, ListItemButton, ListItemText } 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, questions:tasks.map((item) => String(item.question)), quizType: "M" }));
+  }, []);
+
+  useEffect(() => {
+    dispatch(mixUp());
+  }, []);
+
+
+
+  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',
+                  height:"4.4em"
+                }}>
+                <ListItemText primary={item.question} />
+              </ListItemButton>
+            </ListItem>
+          ))}
+        </List>
+      </Grid>
+
+      <Grid size={6}>
+        <SortableList index={index} answers={answers} />
+      </Grid>
+    </Grid>
+  );
+}
+
+export default Matching

site/src/quiz/features/Quiz.tsx

@@ -0,0 +1,98 @@
+import { Box, Button, Container, Typography } from '@mui/material';
+import { quiz } from "../quizData";
+import { useSelector } from 'react-redux';
+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';
+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 state = store.getState();
+    if (state.quiz.correctAnswers.length <= index) {
+      return 0;
+    }
+    return userAnswers[index].reduce((prev, answ, i) => prev + Number(correctAnswers[index][i] === answ), 0);
+  }
+
+  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 <Typography key={taskIndex}>Task {taskIndex+1}: everethyng is correct</Typography>
+    }
+    return  <Typography key={taskIndex}>Task {taskIndex+1}: correct {counter}/{len}</Typography>
+  }
+
+
+  return (
+    <Container sx={{ margin: "auto", d:"flex",flexDirection:"column" }}>
+      <h2>Результаты теста</h2>
+      {
+        counts.map((count,idx)=>quizPartText(count,questionCounts[idx],idx))
+      }
+      <h3>Итого {donePercentage}% Верно</h3>
+    </Container>
+  )
+}
+
+
+function Quiz() {
+  const dispatch = useDispatch();
+  const [displayingResults, setDisplayingResults] = useState(false);
+  const resetQuiz = () => {
+    setDisplayingResults(false);
+    dispatch(mixUp());
+    dispatch(startTesting());
+  }
+
+  const checkQuiz = () => {
+    setDisplayingResults(true);
+    dispatch(stopTesting());
+  }
+
+
+  return (
+    <Container maxWidth="md">
+      {quiz.map((item, index) => (
+        <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} key={index}/>, 
+            
+            <Sorting index={index} tasks={item.tasks} key={index}/>,
+            
+            <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">Check</Button>
+                <Button onClick={resetQuiz} variant="contained">Reset</Button>
+              </Box>
+
+      {displayingResults && <QuizStats />}
+
+    </Container>
+  );
+}
+
+export default Quiz

site/src/quiz/features/SortableList.tsx

@@ -0,0 +1,44 @@
+import { DndContext, closestCenter } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
+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';
+interface ComponentProps {
+  index: number;
+  answers: string[];
+}
+
+function SortableList({ index}: ComponentProps) {
+
+  const dispatch = useDispatch();
+  const arr = useSelector((state: RootState) => state.quiz.userAnswers[index])
+  const isDisabled = useSelector((state: RootState) => state.quiz.isTestingDone)
+  const draggedItems = arr || []; 
+
+  const handleDragEnd = (event: any) => {
+    const { active, over } = event;
+    if (active.id !== over.id) {
+       const oldIndex = draggedItems.indexOf(active.id);
+       const newIndex = draggedItems.indexOf(over.id);
+       const newList = arrayMove(draggedItems, oldIndex, newIndex);
+       dispatch(setDraggedItems({ index, items: newList }));
+    } 
+  };
+
+  return (
+    <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+      <SortableContext items={draggedItems.map((x)=> String(x))}
+        strategy={verticalListSortingStrategy}>
+        <List>
+          {draggedItems.map((item) => (
+            <SortableItem key={String(item)} item={String(item)} id={String(item)} isDisabled={isDisabled} />
+          ))}
+        </List>
+      </SortableContext>
+    </DndContext>
+  );
+}
+
+export default SortableList;

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,questions:tasks.map((item) => String(item.question)), 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

@@ -0,0 +1,85 @@
+import { createSlice } from '@reduxjs/toolkit';
+import type { PayloadAction } from '@reduxjs/toolkit';
+
+function shuffle<T>(array: Array<T>): Array<T> {
+  let currentIndex = array.length;
+
+  // While there remain elements to shuffle...
+  while (currentIndex != 0) {
+
+    // Pick a remaining element...
+    let randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex--;
+
+    // And swap it with the current element.
+    [array[currentIndex], array[randomIndex]] = [
+      array[randomIndex], array[currentIndex]];
+  }
+  return array;
+}
+
+interface QuizState {
+  userAnswers: (string | boolean)[][]; // хранит перемещаемые элементы каждого списка ответов
+  questions: string[][];
+  correctAnswers: (string | boolean)[][];// ответы для вопрсов, в случае с matching просто правильная последоавтельность, для sorting аналогично, для choosе последоватеьность boolean 
+  quizTypes: Array<"M" | "S" | "C">;
+  isTestingDone: boolean// запрет на взаимодействие с квизом после окончания тестирования, чтобю юзер не наглел
+}
+
+const initialState: QuizState = {
+  userAnswers: [],
+  correctAnswers: [],
+  quizTypes: [],
+  questions:[],
+  isTestingDone: false,
+};
+
+const listsSlice = createSlice({
+  name: 'lists',
+  initialState,
+  reducers: {
+    addList: (state, action: PayloadAction<{ index: number; items: string[]; questions: string[]; answers: (string|boolean)[]; quizType : "S" | "M" | "C"}>) => {
+      const { index, items,questions,answers,quizType} = action.payload;
+      state.questions.splice(index, 1, questions); 
+      state.userAnswers.splice(index, 1, items); // с нулём создаётся по 2 экземпляра, видно в отладке
+      state.quizTypes.splice(index, 1, quizType); //
+      state.correctAnswers.splice(index, 1, answers);
+
+    },
+    setDraggedItems: (state, action: PayloadAction<{ index: number; items:  (string|boolean)[] }>) => {
+      const { index, items } = action.payload;
+      if (index >= 0 && index < state.userAnswers.length) {
+        state.userAnswers[index] = items; // обновляем конкретный список
+      }
+    },
+    setCheckedItems: (state, action: PayloadAction<{ index: number; items:  boolean[] }>) => {
+      const { index, items } = action.payload;
+      if (index >= 0 && index < state.userAnswers.length) {
+        state.userAnswers[index] = items; // обновляем конкретный список
+      }
+    },
+    mixUp: (state) => {
+      state.userAnswers = state.userAnswers.map((list,index) => {
+        if(typeof(state.correctAnswers[index][0])==="boolean"){
+          list.map(()=>false);
+          let indexes = shuffle( list.map((_,idx)=>idx));
+          state.correctAnswers[index]=state.correctAnswers[index].map((_,i,arr)=>arr[indexes[i]])
+          state.questions[index]=state.questions[index].map((_,i,arr)=>arr[indexes[i]])
+          return list.map(()=>false)
+        }
+        return shuffle<string|boolean>(list);
+      })
+    },
+    stopTesting: (state) => {
+      state.isTestingDone = true;
+    },
+    startTesting: (state) => {
+      state.isTestingDone = false;
+    }
+  },
+});
+
+// Экспортируем действия и редьюсер
+export const { addList, setDraggedItems,setCheckedItems, mixUp, startTesting, stopTesting } = listsSlice.actions;
+export type { QuizState }
+export default listsSlice.reducer;

site/src/quiz/quizData.tsx

@@ -0,0 +1,152 @@
+export type tTasks ={
+    "question": string; /* вопрос задания*/
+    "answer": string|number|boolean; /* ответ задания*/
+}[]
+
+export type tQuizzes = {
+    "id": number, 
+    "type": "M" | "S" | "C", /*  Match Sort Choose*/
+    "title": string, /* формулировка задания */
+    "tasks": tTasks, 
+}[];
+
+export const quiz: tQuizzes = [
+  {
+    "id": 0,
+    "type": "C",
+    "title": "RAM price jump: pick true statements",
+    "tasks": [
+      {
+        "question": "AI server demand pushed DRAM contracts up in 2024-2025",
+        "answer": true
+      },
+      {
+        "question": "Laptop DDR5 demand was the main global driver",
+        "answer": false
+      },
+      {
+        "question": "HBM supply limits affected overall memory pricing",
+        "answer": true
+      },
+      {
+        "question": "Memory prices stayed flat through 2025",
+        "answer": false
+      }
+    ]
+  },
+  {
+    "id": 1,
+    "type": "M",
+    "title": "Match RAM market terms",
+    "tasks": [
+      {
+        "question": "HBM",
+        "answer": "High Bandwidth Memory"
+      },
+      {
+        "question": "DRAM",
+        "answer": "Dynamic Random Access Memory"
+      },
+      {
+        "question": "NAND",
+        "answer": "Flash storage memory"
+      },
+      {
+        "question": "Contract price",
+        "answer": "Long-term negotiated memory price"
+      }
+    ]
+  },
+  {
+    "id": 2,
+    "type": "S",
+    "title": "Sort AI stack by deployment flow",
+    "tasks": [
+      {
+        "question": "1",
+        "answer": "Collect and clean data"
+      },
+      {
+        "question": "2",
+        "answer": "Train model"
+      },
+      {
+        "question": "3",
+        "answer": "Optimize for inference"
+      },
+      {
+        "question": "4",
+        "answer": "Deploy and monitor"
+      }
+    ]
+  },
+  {
+    "id": 3,
+    "type": "C",
+    "title": "AI trends: choose true",
+    "tasks": [
+      {
+        "question": "Edge AI adoption grew in 2024-2026",
+        "answer": true
+      },
+      {
+        "question": "LLMs removed the need for GPUs",
+        "answer": false
+      },
+      {
+        "question": "Smaller task-specific models are still widely used",
+        "answer": true
+      },
+      {
+        "question": "AI inference always runs only in cloud",
+        "answer": false
+      }
+    ]
+  },
+  {
+    "id": 4,
+    "type": "M",
+    "title": "Match low-energy embedded methods",
+    "tasks": [
+      {
+        "question": "Sleep mode",
+        "answer": "Turns off CPU blocks between events"
+      },
+      {
+        "question": "DVFS",
+        "answer": "Adjusts voltage and frequency to save power"
+      },
+      {
+        "question": "Interrupt wakeup",
+        "answer": "Wakes MCU only on external/internal trigger"
+      },
+      {
+        "question": "Duty cycling",
+        "answer": "Runs sensors and radio in short active bursts"
+      }
+    ]
+  },
+  {
+    "id": 5,
+    "type": "S",
+    "title": "Sort low-energy embedded design steps",
+    "tasks": [
+      {
+        "question": "1",
+        "answer": "Measure baseline current"
+      },
+      {
+        "question": "2",
+        "answer": "Set sleep and wake strategy"
+      },
+      {
+        "question": "3",
+        "answer": "Tune radio and sensor duty cycle"
+      },
+      {
+        "question": "4",
+        "answer": "Validate battery-life target"
+      }
+    ]
+  }
+]

site/src/store.tsx

@@ -0,0 +1,15 @@
+import { configureStore } from '@reduxjs/toolkit';
+import listsReducer from './quiz/features/quizSlice';
+
+
+const store = configureStore({
+  reducer: {
+    quiz: listsReducer,
+  },
+  devTools: { trace: true ,traceLimit: 25},
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+
+export default store;