From c6af29a6abe11939de2defca00df4566e5925697 Mon Sep 17 00:00:00 2001 From: Nastya Date: Sun, 22 Sep 2024 09:57:16 +0300 Subject: [PATCH] =?UTF-8?q?=D1=80=D0=B5=D0=B7=D1=83=D0=BB=D1=8C=D1=82?= =?UTF-8?q?=D0=B0=D1=82=D1=8B=20=D0=BE=D1=82=D0=B2=D0=B5=D1=82=D0=BE=D0=B2?= =?UTF-8?q?=20=D1=81=20=D0=B1=D0=B0=D0=BB=D0=BB=D0=B0=D0=BC=D0=B8=20=D0=BD?= =?UTF-8?q?=D0=B0=20=D1=81=D1=82=D1=80=20=D1=80=D0=B5=D0=B7=D1=83=D0=BB?= =?UTF-8?q?=D1=8C=D1=82=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/assets/icons/CorrectAnswer.tsx | 39 +++++ lib/assets/icons/IncorrectAnswer.tsx | 46 ++++++ lib/assets/icons/TickOpenClose.tsx | 45 ++++++ .../PointSystemResultList.tsx | 149 ++++++++++++++++++ .../ViewPublicationPage/ResultForm.tsx | 28 ++++ .../tools/TextAccordion.tsx | 43 +++++ 6 files changed, 350 insertions(+) create mode 100644 lib/assets/icons/CorrectAnswer.tsx create mode 100644 lib/assets/icons/IncorrectAnswer.tsx create mode 100644 lib/assets/icons/TickOpenClose.tsx create mode 100644 lib/components/ViewPublicationPage/PointSystemResultList.tsx create mode 100644 lib/components/ViewPublicationPage/tools/TextAccordion.tsx diff --git a/lib/assets/icons/CorrectAnswer.tsx b/lib/assets/icons/CorrectAnswer.tsx new file mode 100644 index 0000000..f059f88 --- /dev/null +++ b/lib/assets/icons/CorrectAnswer.tsx @@ -0,0 +1,39 @@ +import { Box, SxProps } from "@mui/material"; + +type Props = { + sx?: SxProps; +}; + +export const CorrectAnswer = ({ sx }: Props) => { + return ( + + + + + + + ); +}; diff --git a/lib/assets/icons/IncorrectAnswer.tsx b/lib/assets/icons/IncorrectAnswer.tsx new file mode 100644 index 0000000..95473c3 --- /dev/null +++ b/lib/assets/icons/IncorrectAnswer.tsx @@ -0,0 +1,46 @@ +import { Box, SxProps } from "@mui/material"; + +type Props = { + sx?: SxProps; +}; + +export const IncorrectAnswer = ({ sx }: Props) => { + return ( + + + + + + + + ); +}; diff --git a/lib/assets/icons/TickOpenClose.tsx b/lib/assets/icons/TickOpenClose.tsx new file mode 100644 index 0000000..39dbc24 --- /dev/null +++ b/lib/assets/icons/TickOpenClose.tsx @@ -0,0 +1,45 @@ +import { Box, SxProps } from "@mui/material"; + +type Props = { + checked?: boolean; + sx?: SxProps; +}; + +export const TickOpenClose = ({ checked = false, sx }: Props) => { + return ( + + + + + + + ); +}; diff --git a/lib/components/ViewPublicationPage/PointSystemResultList.tsx b/lib/components/ViewPublicationPage/PointSystemResultList.tsx new file mode 100644 index 0000000..bbd294e --- /dev/null +++ b/lib/components/ViewPublicationPage/PointSystemResultList.tsx @@ -0,0 +1,149 @@ +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(); + console.log("PointSystemResultList"); + console.log(theme.palette); + const { questions } = useQuizSettings(); + const answers = useQuizViewStore((state) => state.answers); + + const questionsWothoutResult = questions.filter( + (q: AnyTypedQuizQuestion): q is QuizQuestionVariant => q.type === "variant" + ); + console.log("questions"); + console.log(questionsWothoutResult); + console.log("answers"); + console.log(answers); + + return questionsWothoutResult.map((currentQuestion) => { + let answerIndex = 0; + let currentVariants = currentQuestion.content.variants; + + const currentAnswer = answers.find((a) => a.questionId === currentQuestion.id); + console.log("цикл"); + const answeredVariant = currentVariants.find((v, i) => { + console.log(v.id); + console.log(currentAnswer?.answer); + console.log("-------------------------------------------"); + if (v.id === currentAnswer?.answer) { + answerIndex = i; + return true; + } + }); + + console.log("answeredVariant"); + console.log(answeredVariant); + + return ( + + + + + {currentQuestion.page + 1}. + + {currentQuestion.title || "Вопрос без названия"} + + + {answeredVariant?.points || "0"}/10 + + + + + Ваш ответ: + + + + {/* {Boolean(answeredVariant?.points) ? : } + {answeredVariant?.answer || "не выбрано"} */} + {currentVariants.map((v) => { + if (v.id === currentAnswer?.answer) { + return <>; + } else + return ( + + ); + })} + + + + ); + }); +}; + +interface LineProps { + checkTrue: boolean; + text?: string; +} + +const Line = ({ checkTrue, text }: LineProps) => { + const theme = useTheme(); + + return ( + + {checkTrue ? : } + + {text || "не выбрано"} + + + ); +}; diff --git a/lib/components/ViewPublicationPage/ResultForm.tsx b/lib/components/ViewPublicationPage/ResultForm.tsx index cd620c6..85f206f 100644 --- a/lib/components/ViewPublicationPage/ResultForm.tsx +++ b/lib/components/ViewPublicationPage/ResultForm.tsx @@ -14,6 +14,8 @@ import { NameplateLogo } from "@icons/NameplateLogo"; import type { QuizQuestionResult } from "@/model/questionTypes/result"; import QuizVideo from "@/ui_kit/VideoIframe/VideoIframe"; +import { TextAccordion } from "./tools/TextAccordion"; +import { PointSystemResultList } from "./PointSystemResultList"; type ResultFormProps = { resultQuestion: QuizQuestionResult; @@ -185,6 +187,32 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => { {resultQuestion.content.text} )} + + Посмотреть ответы + + } + sx={{ + mt: "60px", + width: "100%", + }} + > + + + + {show_badge && ( diff --git a/lib/components/ViewPublicationPage/tools/TextAccordion.tsx b/lib/components/ViewPublicationPage/tools/TextAccordion.tsx new file mode 100644 index 0000000..e87d86a --- /dev/null +++ b/lib/components/ViewPublicationPage/tools/TextAccordion.tsx @@ -0,0 +1,43 @@ +import { TickOpenClose } from "@/assets/icons/TickOpenClose"; +import { Box, SxProps, Typography, useTheme } from "@mui/material"; +import { useState, ReactNode } from "react"; + +interface Props { + headerText: ReactNode; + children: ReactNode; + sx?: SxProps; +} + +export const TextAccordion = ({ headerText, children, sx }: Props) => { + const theme = useTheme(); + + const [open, setOpen] = useState(false); + + return ( + setOpen((old) => !old)} + > + + {headerText} + + + {open && children} + + ); +};