137 lines
4.2 KiB
TypeScript
137 lines
4.2 KiB
TypeScript
import {
|
|
Box,
|
|
Typography,
|
|
RadioGroup,
|
|
FormControlLabel,
|
|
Radio,
|
|
useTheme,
|
|
useMediaQuery,
|
|
} from "@mui/material";
|
|
|
|
import { useQuizViewStore, updateAnswer, deleteAnswer } from "@root/quizView/store";
|
|
import RadioCheck from "@ui_kit/RadioCheck";
|
|
import RadioIcon from "@ui_kit/RadioIcon";
|
|
|
|
import type { QuizQuestionImages } from "../../../model/questionTypes/images";
|
|
import { enqueueSnackbar } from "notistack";
|
|
import { sendAnswer } from "@api/quizRelase";
|
|
import { useQuestionsStore } from "@root/quizData/store"
|
|
|
|
type ImagesProps = {
|
|
currentQuestion: QuizQuestionImages;
|
|
};
|
|
|
|
export const Images = ({ currentQuestion }: ImagesProps) => {
|
|
const { settings } = useQuestionsStore()
|
|
const { answers } = useQuizViewStore();
|
|
const theme = useTheme();
|
|
const { answer } =
|
|
answers.find(
|
|
({ questionId }) => questionId === currentQuestion.id
|
|
) ?? {};
|
|
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
|
const isMobile = useMediaQuery(theme.breakpoints.down(500));
|
|
|
|
return (
|
|
<Box>
|
|
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
|
|
<RadioGroup
|
|
name={currentQuestion.id}
|
|
value={currentQuestion.content.variants.findIndex(
|
|
({ id }) => answer === id
|
|
)}
|
|
sx={{
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
marginTop: "20px",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: "grid",
|
|
gap: "15px",
|
|
gridTemplateColumns: isTablet
|
|
? isMobile
|
|
? "repeat(1, 1fr)"
|
|
: "repeat(2, 1fr)"
|
|
: "repeat(3, 1fr)",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
{currentQuestion.content.variants.map((variant, index) => (
|
|
<Box
|
|
key={index}
|
|
sx={{
|
|
cursor: "pointer",
|
|
borderRadius: "5px",
|
|
border: `1px solid`,
|
|
borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
|
|
}}
|
|
onClick={async(event) => {
|
|
event.preventDefault();
|
|
|
|
try {
|
|
|
|
await sendAnswer({
|
|
questionId: currentQuestion.id,
|
|
body: currentQuestion.content.variants[index].id,
|
|
//@ts-ignore
|
|
qid: settings.qid
|
|
})
|
|
|
|
updateAnswer(
|
|
currentQuestion.id,
|
|
currentQuestion.content.variants[index].id
|
|
);
|
|
|
|
} catch (e) {
|
|
enqueueSnackbar("ответ не был засчитан")
|
|
}
|
|
|
|
|
|
if (answer === currentQuestion.content.variants[index].id) {
|
|
deleteAnswer(currentQuestion.id);
|
|
}
|
|
}}
|
|
>
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
|
|
<Box sx={{ width: "100%", height: "300px" }}>
|
|
{variant.extendedText && (
|
|
<img
|
|
src={variant.extendedText}
|
|
alt=""
|
|
style={{
|
|
display: "block",
|
|
width: "100%",
|
|
height: "100%",
|
|
objectFit: "cover",
|
|
}}
|
|
/>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
<FormControlLabel
|
|
key={variant.id}
|
|
sx={{
|
|
display: "block",
|
|
textAlign: "center",
|
|
color: theme.palette.text.primary,
|
|
marginTop: "10px",
|
|
}}
|
|
value={index}
|
|
control={
|
|
//@ts-ignore
|
|
<Radio checkedIcon={<RadioCheck color={theme.palette.primary.main}/>} icon={<RadioIcon />} />
|
|
}
|
|
label={variant.answer}
|
|
/>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</RadioGroup>
|
|
</Box>
|
|
);
|
|
|
|
}; |