72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
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 |