145 lines
3.8 KiB
TypeScript
145 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";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
export const PointSystemResultList = () => {
|
|
const theme = useTheme();
|
|
const { questions } = useQuizSettings();
|
|
const answers = useQuizViewStore((state) => state.answers);
|
|
const { t } = useTranslation();
|
|
|
|
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 || t("Question without a title")}
|
|
</Typography>
|
|
</Box>
|
|
<Typography
|
|
sx={{
|
|
color: answeredVariant?.points ? theme.palette.primary.main : theme.palette.grey[500],
|
|
}}
|
|
>
|
|
{answeredVariant?.points || "0"}
|
|
</Typography>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
display: "inline-flex",
|
|
mt: "15px",
|
|
gap: "10px",
|
|
}}
|
|
>
|
|
<Typography
|
|
sx={{
|
|
color: theme.palette.grey[500],
|
|
}}
|
|
>
|
|
{t("Your answer")}:
|
|
</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>
|
|
);
|
|
};
|