diff --git a/site/src/quiz/features/Choosing.tsx b/site/src/quiz/features/Choosing.tsx new file mode 100644 index 0000000..0765572 --- /dev/null +++ b/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, checked: boolean) => { + let answersCopy = [ ...arr ]; + answersCopy[checkboxIndex] = checked; + dispatch(setCheckedItems({ index, items: answersCopy })); + }; + + console.log(arr); + + return ( + + + + {tasks.map((item, itemIndex) => ( + + + + { _ } : handleCheckboxAction(itemIndex)} + checked={Boolean(arr == undefined ? false : arr[itemIndex])} + sx={{ '& .MuiSvgIcon-root': { fontSize: 28 } }} + /> + + + ))} + + + + + + + ); +} + +export default Matching \ No newline at end of file diff --git a/site/src/quiz/features/Matching.tsx b/site/src/quiz/features/Matching.tsx index c1893b8..b5ee79b 100644 --- a/site/src/quiz/features/Matching.tsx +++ b/site/src/quiz/features/Matching.tsx @@ -1,51 +1,51 @@ 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 ( {tasks.map((item, index) => ( - - - - - + + + + + ))} - - + + - + ); } diff --git a/site/src/quiz/features/Quiz.tsx b/site/src/quiz/features/Quiz.tsx index 549d068..4c16b36 100644 --- a/site/src/quiz/features/Quiz.tsx +++ b/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 ( {quiz.map((item, index) => ( - + {index + 1}. {item.title} - {[,<>S,<>c][(["M","S","C"].indexOf(item.type))]} - - ))} + {[ + + , + + , + + + + ][(["M", "S", "C"].indexOf(item.type))]} + + + ))} + + + + - - - - {displayingResults && } diff --git a/site/src/quiz/features/SortableList.tsx b/site/src/quiz/features/SortableList.tsx index f697aac..aadbb74 100644 --- a/site/src/quiz/features/SortableList.tsx +++ b/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[]; diff --git a/site/src/quiz/features/Sorting.tsx b/site/src/quiz/features/Sorting.tsx new file mode 100644 index 0000000..3b0923c --- /dev/null +++ b/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 ( + + + + + + ); +} + +export default Matching \ No newline at end of file diff --git a/site/src/quiz/features/quizSlice.tsx b/site/src/quiz/features/quizSlice.tsx index fef31a3..f93ea65 100644 --- a/site/src/quiz/features/quizSlice.tsx +++ b/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(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; \ No newline at end of file diff --git a/site/src/quiz/quizData.tsx b/site/src/quiz/quizData.tsx index 07adc88..411b3ce 100644 --- a/site/src/quiz/quizData.tsx +++ b/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 }, ]