59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
|
import { Box, Typography } from "@mui/material";
|
||
|
|
|
||
|
|
import { useQuizViewStore, updateAnswer } from "@root/quizView";
|
||
|
|
|
||
|
|
import type { QuizQuestionPage } from "../../../model/questionTypes/page";
|
||
|
|
|
||
|
|
type PageProps = {
|
||
|
|
currentQuestion: QuizQuestionPage;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const Page = ({ currentQuestion }: PageProps) => {
|
||
|
|
const { answers } = useQuizViewStore();
|
||
|
|
const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.content.id) ?? {};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box>
|
||
|
|
<Typography variant="h5" sx={{ paddingBottom: "25px" }}>{currentQuestion.title}</Typography>
|
||
|
|
<Typography>{currentQuestion.content.text}</Typography>
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
width: "100%",
|
||
|
|
marginTop: "20px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{currentQuestion.content.picture && (
|
||
|
|
<Box sx={{borderRadius: "12px",
|
||
|
|
border: "1px solid #9A9AAF", overflow: "hidden" }}>
|
||
|
|
<img
|
||
|
|
src={currentQuestion.content.picture}
|
||
|
|
alt=""
|
||
|
|
style={{
|
||
|
|
display: "block",
|
||
|
|
width: "100%",
|
||
|
|
height: "100%",
|
||
|
|
objectFit: "contain",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
|
||
|
|
)}
|
||
|
|
{currentQuestion.content.video && (
|
||
|
|
<video
|
||
|
|
src={currentQuestion.content.video}
|
||
|
|
controls
|
||
|
|
style={{
|
||
|
|
width: "100%",
|
||
|
|
height: "100%",
|
||
|
|
maxHeight: "80vh",
|
||
|
|
objectFit: "contain",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|