Compare commits
2 Commits
c37b24ec38
...
a144621365
| Author | SHA1 | Date | |
|---|---|---|---|
| a144621365 | |||
| 2df7ed36de |
156
site/package-lock.json
generated
156
site/package-lock.json
generated
@@ -8,17 +8,22 @@
|
|||||||
"name": "site",
|
"name": "site",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@dnd-kit/core": "^6.3.1",
|
||||||
|
"@dnd-kit/sortable": "^10.0.0",
|
||||||
"@emotion/react": "^11.14.0",
|
"@emotion/react": "^11.14.0",
|
||||||
"@emotion/styled": "^11.14.1",
|
"@emotion/styled": "^11.14.1",
|
||||||
"@mui/icons-material": "^9.0.0",
|
"@mui/icons-material": "^9.0.0",
|
||||||
"@mui/material": "^9.0.0",
|
"@mui/material": "^9.0.0",
|
||||||
"@mui/x-charts": "^9.0.1",
|
"@mui/x-charts": "^9.0.1",
|
||||||
"@mui/x-data-grid": "^9.0.1",
|
"@mui/x-data-grid": "^9.0.1",
|
||||||
|
"@reduxjs/toolkit": "^2.11.2",
|
||||||
"@types/d3": "^7.4.3",
|
"@types/d3": "^7.4.3",
|
||||||
"d3": "^7.9.0",
|
"d3": "^7.9.0",
|
||||||
"react": "^19.2.4",
|
"react": "^19.2.4",
|
||||||
"react-dom": "^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": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.29.0",
|
"@babel/core": "^7.29.0",
|
||||||
@@ -278,6 +283,59 @@
|
|||||||
"node": ">=6.9.0"
|
"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": {
|
"node_modules/@emnapi/core": {
|
||||||
"version": "1.9.2",
|
"version": "1.9.2",
|
||||||
"resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz",
|
"resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz",
|
||||||
@@ -1150,6 +1208,32 @@
|
|||||||
"url": "https://opencollective.com/popperjs"
|
"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": {
|
"node_modules/@rolldown/binding-android-arm64": {
|
||||||
"version": "1.0.0-rc.15",
|
"version": "1.0.0-rc.15",
|
||||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.15.tgz",
|
"resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.15.tgz",
|
||||||
@@ -1463,6 +1547,18 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/@tybys/wasm-util": {
|
||||||
"version": "0.10.1",
|
"version": "0.10.1",
|
||||||
"resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
|
"resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
|
||||||
@@ -1842,6 +1938,12 @@
|
|||||||
"@types/react": "*"
|
"@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": {
|
"node_modules/@typescript-eslint/eslint-plugin": {
|
||||||
"version": "8.58.1",
|
"version": "8.58.1",
|
||||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.58.1.tgz",
|
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.58.1.tgz",
|
||||||
@@ -3403,6 +3505,16 @@
|
|||||||
"node": ">= 4"
|
"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": {
|
"node_modules/import-fresh": {
|
||||||
"version": "3.3.1",
|
"version": "3.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
|
||||||
@@ -4196,6 +4308,29 @@
|
|||||||
"integrity": "sha512-Dn0t8IQhCmeIT3wu+Apm1/YVsJXsGWi6k4sPdnBIdqMVtHtv0IGi6dcpNpNkNac0zB2uUAqNX3MHzN8c+z2rwQ==",
|
"integrity": "sha512-Dn0t8IQhCmeIT3wu+Apm1/YVsJXsGWi6k4sPdnBIdqMVtHtv0IGi6dcpNpNkNac0zB2uUAqNX3MHzN8c+z2rwQ==",
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/react-router": {
|
||||||
"version": "7.14.1",
|
"version": "7.14.1",
|
||||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.14.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.14.1.tgz",
|
||||||
@@ -4250,6 +4385,21 @@
|
|||||||
"react-dom": ">=16.6.0"
|
"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": {
|
"node_modules/reselect": {
|
||||||
"version": "5.1.1",
|
"version": "5.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
|
||||||
@@ -4487,9 +4637,7 @@
|
|||||||
"version": "2.8.1",
|
"version": "2.8.1",
|
||||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||||
"dev": true,
|
"license": "0BSD"
|
||||||
"license": "0BSD",
|
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"node_modules/type-check": {
|
"node_modules/type-check": {
|
||||||
"version": "0.4.0",
|
"version": "0.4.0",
|
||||||
|
|||||||
@@ -10,17 +10,22 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@dnd-kit/core": "^6.3.1",
|
||||||
|
"@dnd-kit/sortable": "^10.0.0",
|
||||||
"@emotion/react": "^11.14.0",
|
"@emotion/react": "^11.14.0",
|
||||||
"@emotion/styled": "^11.14.1",
|
"@emotion/styled": "^11.14.1",
|
||||||
"@mui/icons-material": "^9.0.0",
|
"@mui/icons-material": "^9.0.0",
|
||||||
"@mui/material": "^9.0.0",
|
"@mui/material": "^9.0.0",
|
||||||
"@mui/x-charts": "^9.0.1",
|
"@mui/x-charts": "^9.0.1",
|
||||||
"@mui/x-data-grid": "^9.0.1",
|
"@mui/x-data-grid": "^9.0.1",
|
||||||
|
"@reduxjs/toolkit": "^2.11.2",
|
||||||
"@types/d3": "^7.4.3",
|
"@types/d3": "^7.4.3",
|
||||||
"d3": "^7.9.0",
|
"d3": "^7.9.0",
|
||||||
"react": "^19.2.4",
|
"react": "^19.2.4",
|
||||||
"react-dom": "^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": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.29.0",
|
"@babel/core": "^7.29.0",
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { StrictMode } from 'react'
|
import { StrictMode } from 'react'
|
||||||
import { createRoot } from 'react-dom/client'
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import { Provider } from 'react-redux';
|
||||||
import {
|
import {
|
||||||
createBrowserRouter,
|
createBrowserRouter,
|
||||||
RouterProvider,
|
RouterProvider,
|
||||||
@@ -9,8 +9,9 @@ import {
|
|||||||
import List from "./list/List";
|
import List from "./list/List";
|
||||||
import Chart from "./chart/Chart";
|
import Chart from "./chart/Chart";
|
||||||
import Main from "./main/Main";
|
import Main from "./main/Main";
|
||||||
|
import Quiz from "./quiz/QuizPage";
|
||||||
import ProjectDetails from "./projectDetails/ProjectDetails";
|
import ProjectDetails from "./projectDetails/ProjectDetails";
|
||||||
|
import store from './store';
|
||||||
|
|
||||||
|
|
||||||
const router = createBrowserRouter([
|
const router = createBrowserRouter([
|
||||||
@@ -30,6 +31,10 @@ const router = createBrowserRouter([
|
|||||||
path: "/chart",
|
path: "/chart",
|
||||||
element: <Chart />,
|
element: <Chart />,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/quiz",
|
||||||
|
element: <Quiz />,
|
||||||
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|
||||||
@@ -37,6 +42,8 @@ const router = createBrowserRouter([
|
|||||||
import './styles/index.css'
|
import './styles/index.css'
|
||||||
createRoot(document.getElementById('root')!).render(
|
createRoot(document.getElementById('root')!).render(
|
||||||
<StrictMode>
|
<StrictMode>
|
||||||
<RouterProvider router={router} />
|
<Provider store={store}>
|
||||||
|
<RouterProvider router={router} />
|
||||||
|
</Provider>
|
||||||
</StrictMode>,
|
</StrictMode>,
|
||||||
)
|
)
|
||||||
|
|||||||
15
site/src/quiz/QuizPage.tsx
Normal file
15
site/src/quiz/QuizPage.tsx
Normal file
@@ -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;
|
||||||
41
site/src/quiz/components/SortableItem.tsx
Normal file
41
site/src/quiz/components/SortableItem.tsx
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
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',
|
||||||
|
}}>
|
||||||
|
<ListItemIcon>
|
||||||
|
<DragIndicatorIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText primary={ item } />
|
||||||
|
</ListItemButton>
|
||||||
|
</ListItem>
|
||||||
|
);
|
||||||
|
}
|
||||||
52
site/src/quiz/features/Matching.tsx
Normal file
52
site/src/quiz/features/Matching.tsx
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
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();
|
||||||
|
|
||||||
|
// Добавляем список ответов очередного задания в хранилище
|
||||||
|
useEffect(() => {
|
||||||
|
dispatch(addList({ index, items: answers }));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
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>
|
||||||
|
))}
|
||||||
|
</List>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid size={6}>
|
||||||
|
<SortableList index={index} answers={answers}/>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Matching
|
||||||
72
site/src/quiz/features/Quiz.tsx
Normal file
72
site/src/quiz/features/Quiz.tsx
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
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 type { RootState } from '../../store';
|
||||||
|
import store from '../../store';
|
||||||
|
import { useDispatch } from 'react-redux';
|
||||||
|
import { mixUp, startTesting, stopTesting } from './quizSlice';
|
||||||
|
|
||||||
|
function QuizStats() {
|
||||||
|
|
||||||
|
const checkTask = (index: number): string => {
|
||||||
|
useSelector((state: RootState) => state.lists.lists[index]);
|
||||||
|
let state = store.getState();
|
||||||
|
if (state.lists.correctAnswers.length <= index) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
let correctCounter = state.lists.lists[index].reduce((prev, answ, i) => prev + Number(state.lists.correctAnswers[index][i] === answ), 0)
|
||||||
|
|
||||||
|
if (correctCounter == state.lists.lists[index].length) {
|
||||||
|
return "все ответы верные"
|
||||||
|
}
|
||||||
|
return `верно ${correctCounter}/${state.lists.lists[index].length}`
|
||||||
|
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<Container sx={{ margin: "auto" }}>
|
||||||
|
<h3>Результаты теста</h3>
|
||||||
|
<Typography>Задание 1: {checkTask(0)}</Typography>
|
||||||
|
<Typography>Задание 2: {checkTask(1)}</Typography>
|
||||||
|
</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} />
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'space-around' }}>
|
||||||
|
<Button onClick={checkQuiz} variant="contained">Проверить</Button>
|
||||||
|
<Button onClick={resetQuiz} variant="contained">Начать снова</Button>
|
||||||
|
</Box>
|
||||||
|
{displayingResults && <QuizStats />}
|
||||||
|
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Quiz
|
||||||
45
site/src/quiz/features/SortableList.tsx
Normal file
45
site/src/quiz/features/SortableList.tsx
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
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.lists.lists[index])
|
||||||
|
const isDisabled = useSelector((state: RootState) => state.lists.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}
|
||||||
|
strategy={verticalListSortingStrategy}>
|
||||||
|
<List>
|
||||||
|
{draggedItems.map((item) => (
|
||||||
|
<SortableItem key={item} item={item} id={item} isDisabled={isDisabled}/>
|
||||||
|
))}
|
||||||
|
</List>
|
||||||
|
</SortableContext>
|
||||||
|
</DndContext>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SortableList;
|
||||||
73
site/src/quiz/features/quizSlice.tsx
Normal file
73
site/src/quiz/features/quizSlice.tsx
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
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[][]; // хранит перемещаемые элементы каждого списка ответов
|
||||||
|
correctAnswers:string[][] |boolean[][];// ответы для вопрсов, в случае с matching просто правильная последоавтельность, для sorting аналогично, для choosе последоватеьность boolean
|
||||||
|
isTestingDone:boolean// запрет на взаимодействие с квизом после окончания тестирования, чтобю юзер не наглел
|
||||||
|
}
|
||||||
|
|
||||||
|
const initialState: QuizState = {
|
||||||
|
userAnswers: [],
|
||||||
|
correctAnswers:[],
|
||||||
|
isTestingDone:false
|
||||||
|
};
|
||||||
|
|
||||||
|
const listsSlice = createSlice({
|
||||||
|
name: 'lists',
|
||||||
|
initialState,
|
||||||
|
reducers: {
|
||||||
|
addList: (state, action: PayloadAction<{index: number; items: string[]}>)=>{
|
||||||
|
const { index, items } = action.payload;
|
||||||
|
state.userAnswers.splice(index, 1, items); // с нулём создаётся по 2 экземпляра, видно в отладке
|
||||||
|
state.correctAnswers.splice(index, 1, items);
|
||||||
|
|
||||||
|
},
|
||||||
|
setDraggedItems: (state, action: PayloadAction<{ index: number; items: string[] }>) => {
|
||||||
|
const { index, items } = action.payload;
|
||||||
|
if (index >= 0 && index < state.userAnswers.length) {
|
||||||
|
state.userAnswers[index] = items; // обновляем конкретный список
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setCheckedItems: (state, action: PayloadAction<{ index: number; items: string[] }>) => {
|
||||||
|
const { index, items } = action.payload;
|
||||||
|
if (index >= 0 && index < state.userAnswers.length) {
|
||||||
|
state.userAnswers[index] = items; // обновляем конкретный список
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mixUp: (state) => {
|
||||||
|
state.userAnswers=state.userAnswers.map((list)=>
|
||||||
|
{
|
||||||
|
return shuffle(list);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
stopTesting:(state)=>{
|
||||||
|
state.isTestingDone=true;
|
||||||
|
},
|
||||||
|
startTesting:(state)=>{
|
||||||
|
state.isTestingDone=false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Экспортируем действия и редьюсер
|
||||||
|
export const { addList, setDraggedItems,mixUp,startTesting,stopTesting } = listsSlice.actions;
|
||||||
|
export type {QuizState}
|
||||||
|
export default listsSlice.reducer;
|
||||||
92
site/src/quiz/quizData.tsx
Normal file
92
site/src/quiz/quizData.tsx
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
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": 1,
|
||||||
|
"type": "M",
|
||||||
|
"title": "вопросй",
|
||||||
|
"tasks": [
|
||||||
|
{
|
||||||
|
"question": "адын?",
|
||||||
|
"answer": "адын"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "2",
|
||||||
|
"answer": "2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "3",
|
||||||
|
"answer": "3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "4",
|
||||||
|
"answer": "4"
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"type": "S",
|
||||||
|
"title": "Вопрос 2 СОРТИРУЙ",
|
||||||
|
"tasks": [
|
||||||
|
{
|
||||||
|
"question": "1",
|
||||||
|
"answer": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "22",
|
||||||
|
"answer": 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "333",
|
||||||
|
"answer": 3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "4444",
|
||||||
|
"answer": 4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "5555",
|
||||||
|
"answer": 5
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
,
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"type": "C",
|
||||||
|
"title": "Вопрос 3 Выбирай!",
|
||||||
|
"tasks": [
|
||||||
|
{
|
||||||
|
"question": "да",
|
||||||
|
"answer": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "нет",
|
||||||
|
"answer": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "и снова да",
|
||||||
|
"answer": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "нет",
|
||||||
|
"answer": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "дааа",
|
||||||
|
"answer": true
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
15
site/src/store.tsx
Normal file
15
site/src/store.tsx
Normal file
@@ -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;
|
||||||
Reference in New Issue
Block a user