результаты ответов с баллами на стр результа
This commit is contained in:
parent
66c6ab1eaf
commit
c6af29a6ab
39
lib/assets/icons/CorrectAnswer.tsx
Normal file
39
lib/assets/icons/CorrectAnswer.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import { Box, SxProps } from "@mui/material";
|
||||
|
||||
type Props = {
|
||||
sx?: SxProps;
|
||||
};
|
||||
|
||||
export const CorrectAnswer = ({ sx }: Props) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
...sx,
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="#0D9F00"
|
||||
stroke-width="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M9.30078 11.8L11.3008 13.8L15.3008 9.79999"
|
||||
stroke="#0D9F00"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
46
lib/assets/icons/IncorrectAnswer.tsx
Normal file
46
lib/assets/icons/IncorrectAnswer.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
import { Box, SxProps } from "@mui/material";
|
||||
|
||||
type Props = {
|
||||
sx?: SxProps;
|
||||
};
|
||||
|
||||
export const IncorrectAnswer = ({ sx }: Props) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
...sx,
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="#E02C2C"
|
||||
stroke-width="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M9.87845 14.1198L14.1211 9.87714"
|
||||
stroke="#E02C2C"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.87845 9.87668L14.1211 14.1193"
|
||||
stroke="#E02C2C"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
45
lib/assets/icons/TickOpenClose.tsx
Normal file
45
lib/assets/icons/TickOpenClose.tsx
Normal file
@ -0,0 +1,45 @@
|
||||
import { Box, SxProps } from "@mui/material";
|
||||
|
||||
type Props = {
|
||||
checked?: boolean;
|
||||
sx?: SxProps;
|
||||
};
|
||||
|
||||
export const TickOpenClose = ({ checked = false, sx }: Props) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
transform: checked ? "" : "rotate(180deg)",
|
||||
transition: "transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
|
||||
width: "14px",
|
||||
height: "14px",
|
||||
transformOrigin: "center center",
|
||||
display: "flex",
|
||||
...sx,
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="14"
|
||||
height="13"
|
||||
viewBox="0 0 14 13"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M13 3.48425L7 9.48425"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M1 3.48425L7 9.48425"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
149
lib/components/ViewPublicationPage/PointSystemResultList.tsx
Normal file
149
lib/components/ViewPublicationPage/PointSystemResultList.tsx
Normal file
@ -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<QuizQuestionVariant>(
|
||||
(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 (
|
||||
<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>{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>
|
||||
);
|
||||
};
|
||||
@ -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}
|
||||
</Typography>
|
||||
)}
|
||||
<TextAccordion
|
||||
headerText={
|
||||
<Typography
|
||||
sx={{
|
||||
color: theme.palette.primary.main,
|
||||
"&:hover": {
|
||||
color: theme.palette.primary.dark,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Посмотреть ответы
|
||||
</Typography>
|
||||
}
|
||||
sx={{
|
||||
mt: "60px",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
mt: "25px",
|
||||
}}
|
||||
>
|
||||
<PointSystemResultList />
|
||||
</Box>
|
||||
</TextAccordion>
|
||||
</Box>
|
||||
</Box>
|
||||
{show_badge && (
|
||||
|
||||
43
lib/components/ViewPublicationPage/tools/TextAccordion.tsx
Normal file
43
lib/components/ViewPublicationPage/tools/TextAccordion.tsx
Normal file
@ -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 (
|
||||
<Box
|
||||
sx={sx}
|
||||
onClick={() => setOpen((old) => !old)}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
userSelect: "none",
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
cursor: "pointer",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{headerText}
|
||||
<TickOpenClose
|
||||
checked={open}
|
||||
sx={{
|
||||
"&:hover": {
|
||||
color: theme.palette.primary.dark,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
{open && children}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user