2023-12-29 00:58:19 +00:00
|
|
|
import { Box, Typography, useTheme } from "@mui/material";
|
2023-12-16 14:55:56 +00:00
|
|
|
|
2023-12-17 13:22:21 +00:00
|
|
|
import { Select as SelectComponent } from "../tools//Select";
|
2023-12-16 14:55:56 +00:00
|
|
|
|
2024-01-19 11:46:17 +00:00
|
|
|
import { useQuizViewStore, updateAnswer, deleteAnswer } from "@stores/quizView/store";
|
2023-12-16 14:55:56 +00:00
|
|
|
|
|
|
|
import type { QuizQuestionSelect } from "../../../model/questionTypes/select";
|
2023-12-17 21:28:57 +00:00
|
|
|
import { enqueueSnackbar } from "notistack";
|
|
|
|
import { sendAnswer } from "@api/quizRelase";
|
2023-12-16 14:55:56 +00:00
|
|
|
|
2024-01-19 11:46:17 +00:00
|
|
|
import { useQuestionsStore } from "@stores/quizData/store"
|
2023-12-16 14:55:56 +00:00
|
|
|
type SelectProps = {
|
|
|
|
currentQuestion: QuizQuestionSelect;
|
|
|
|
};
|
|
|
|
|
|
|
|
export const Select = ({ currentQuestion }: SelectProps) => {
|
2023-12-29 00:58:19 +00:00
|
|
|
const theme = useTheme();
|
|
|
|
|
2023-12-17 21:28:57 +00:00
|
|
|
const { settings } = useQuestionsStore()
|
2023-12-16 14:55:56 +00:00
|
|
|
const { answers } = useQuizViewStore();
|
|
|
|
const { answer } =
|
|
|
|
answers.find(
|
2023-12-17 13:22:21 +00:00
|
|
|
({ questionId }) => questionId === currentQuestion.id
|
2023-12-16 14:55:56 +00:00
|
|
|
) ?? {};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Box>
|
2023-12-29 00:58:19 +00:00
|
|
|
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
|
2023-12-16 14:55:56 +00:00
|
|
|
<Box
|
|
|
|
sx={{
|
|
|
|
display: "flex",
|
|
|
|
flexDirection: "column",
|
|
|
|
width: "100%",
|
|
|
|
marginTop: "20px",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<SelectComponent
|
|
|
|
placeholder={currentQuestion.content.default}
|
|
|
|
activeItemIndex={answer ? Number(answer) : -1}
|
|
|
|
items={currentQuestion.content.variants.map(({ answer }) => answer)}
|
2023-12-29 00:58:19 +00:00
|
|
|
//@ts-ignore
|
|
|
|
colorMain={theme.palette.primary.main}
|
|
|
|
//@ts-ignore
|
|
|
|
color={theme.palette.primary.main}
|
2023-12-17 21:28:57 +00:00
|
|
|
onChange={async(_, value) => {
|
2023-12-16 14:55:56 +00:00
|
|
|
if (value < 0) {
|
2023-12-17 13:22:21 +00:00
|
|
|
deleteAnswer(currentQuestion.id);
|
2023-12-29 17:17:50 +00:00
|
|
|
try {
|
|
|
|
|
|
|
|
await sendAnswer({
|
|
|
|
questionId: currentQuestion.id,
|
|
|
|
body: "",
|
|
|
|
//@ts-ignore
|
|
|
|
qid: settings.qid
|
|
|
|
})
|
|
|
|
|
|
|
|
} catch (e) {
|
|
|
|
enqueueSnackbar("ответ не был засчитан")
|
|
|
|
}
|
2023-12-16 14:55:56 +00:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2023-12-17 21:28:57 +00:00
|
|
|
try {
|
2023-12-29 17:17:50 +00:00
|
|
|
|
2023-12-17 21:28:57 +00:00
|
|
|
await sendAnswer({
|
|
|
|
questionId: currentQuestion.id,
|
2023-12-29 17:17:50 +00:00
|
|
|
body: String(currentQuestion.content.variants[Number(value)].answer),
|
2023-12-17 21:28:57 +00:00
|
|
|
//@ts-ignore
|
|
|
|
qid: settings.qid
|
|
|
|
})
|
|
|
|
|
|
|
|
updateAnswer(currentQuestion.id, String(value));
|
|
|
|
|
|
|
|
} catch (e) {
|
|
|
|
enqueueSnackbar("ответ не был засчитан")
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2023-12-16 14:55:56 +00:00
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</Box>
|
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
};
|