результаты ответов с баллами на стр результа
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 type { QuizQuestionResult } from "@/model/questionTypes/result";
|
||||||
import QuizVideo from "@/ui_kit/VideoIframe/VideoIframe";
|
import QuizVideo from "@/ui_kit/VideoIframe/VideoIframe";
|
||||||
|
import { TextAccordion } from "./tools/TextAccordion";
|
||||||
|
import { PointSystemResultList } from "./PointSystemResultList";
|
||||||
|
|
||||||
type ResultFormProps = {
|
type ResultFormProps = {
|
||||||
resultQuestion: QuizQuestionResult;
|
resultQuestion: QuizQuestionResult;
|
||||||
@ -185,6 +187,32 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
|||||||
{resultQuestion.content.text}
|
{resultQuestion.content.text}
|
||||||
</Typography>
|
</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>
|
||||||
</Box>
|
</Box>
|
||||||
{show_badge && (
|
{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