143 lines
3.8 KiB
TypeScript
143 lines
3.8 KiB
TypeScript
import { IncorrectAnswer } from "@/assets/icons/IncorrectAnswer";
|
||
import { CorrectAnswer } from "@/assets/icons/CorrectAnswer";
|
||
import { Box, Typography, useTheme } from "@mui/material";
|
||
import { useQuizSettings } from "@/contexts/QuizDataContext";
|
||
import { useQuizViewStore } from "@/stores/quizView";
|
||
import { AnyTypedQuizQuestion, QuizQuestionVariant } from "@/index";
|
||
|
||
export const PointSystemResultList = () => {
|
||
const theme = useTheme();
|
||
const { questions } = useQuizSettings();
|
||
const answers = useQuizViewStore((state) => state.answers);
|
||
|
||
const questionsWothoutResult = questions.filter<QuizQuestionVariant>(
|
||
(q: AnyTypedQuizQuestion): q is QuizQuestionVariant => q.type === "variant"
|
||
);
|
||
|
||
return questionsWothoutResult.map((currentQuestion) => {
|
||
let answerIndex = 0;
|
||
let currentVariants = currentQuestion.content.variants;
|
||
|
||
const currentAnswer = answers.find((a) => a.questionId === currentQuestion.id);
|
||
const answeredVariant = currentVariants.find((v, i) => {
|
||
if (v.id === currentAnswer?.answer) {
|
||
answerIndex = i;
|
||
return true;
|
||
}
|
||
});
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "inline-flex",
|
||
justifyContent: "space-between",
|
||
width: "100%",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "inline-flex",
|
||
gap: "16px",
|
||
}}
|
||
>
|
||
<Typography
|
||
sx={{
|
||
color: theme.palette.grey[500],
|
||
}}
|
||
>
|
||
{currentQuestion.page + 1}.
|
||
</Typography>
|
||
<Typography
|
||
sx={{
|
||
color: theme.palette.text.primary,
|
||
}}
|
||
>
|
||
{currentQuestion.title || "Вопрос без названия"}
|
||
</Typography>
|
||
</Box>
|
||
<Typography
|
||
sx={{
|
||
color: answeredVariant?.points ? "inherit" : theme.palette.grey[500],
|
||
}}
|
||
>
|
||
{answeredVariant?.points || "0"}/10
|
||
</Typography>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: "inline-flex",
|
||
mt: "15px",
|
||
gap: "10px",
|
||
}}
|
||
>
|
||
<Typography
|
||
sx={{
|
||
color: theme.palette.grey[500],
|
||
}}
|
||
>
|
||
Ваш ответ:
|
||
</Typography>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
}}
|
||
>
|
||
<Line
|
||
checkTrue={Boolean(answeredVariant?.points)}
|
||
text={answeredVariant?.answer}
|
||
/>
|
||
{/* {Boolean(answeredVariant?.points) ? <CorrectAnswer /> : <IncorrectAnswer />}
|
||
<Typography>{answeredVariant?.answer || "не выбрано"}</Typography> */}
|
||
{currentVariants.map((v) => {
|
||
if (v.id === currentAnswer?.answer) {
|
||
return <></>;
|
||
} else
|
||
return (
|
||
<Line
|
||
checkTrue={Boolean(v?.points)}
|
||
text={v.answer}
|
||
/>
|
||
);
|
||
})}
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
});
|
||
};
|
||
|
||
interface LineProps {
|
||
checkTrue: boolean;
|
||
text?: string;
|
||
}
|
||
|
||
const Line = ({ checkTrue, text }: LineProps) => {
|
||
const theme = useTheme();
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
display: "inline-flex",
|
||
gap: "10px",
|
||
mb: "10px",
|
||
}}
|
||
>
|
||
{checkTrue ? <CorrectAnswer /> : <IncorrectAnswer />}
|
||
<Typography
|
||
sx={{
|
||
color: theme.palette.grey[500],
|
||
}}
|
||
>
|
||
{text || "не выбрано"}
|
||
</Typography>
|
||
</Box>
|
||
);
|
||
};
|