SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: uncheck

Browse Source
This commit is contained in:
IlyaDoronin 2023-12-11 17:26:17 +03:00
parent c95e358117
commit fdafd7bdff
5 changed files with 150 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/pages/ViewPublicationPage/questions/Emoji.tsx
View File

@ -8,7 +8,7 @@ import {
FormControl, FormControl,
} from "@mui/material"; } from "@mui/material";
import { useQuizViewStore, updateAnswer } from "@root/quizView"; import { useQuizViewStore, updateAnswer, deleteAnswer } from "@root/quizView";
import RadioCheck from "@ui_kit/RadioCheck"; import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon"; import RadioIcon from "@ui_kit/RadioIcon";
@ -50,10 +50,9 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
}} }}
> >
<Box sx={{ display: "flex", width: "100%", gap: "42px" }}> <Box sx={{ display: "flex", width: "100%", gap: "42px" }}>
{currentQuestion.content.variants.map( {currentQuestion.content.variants.map((variant, index) => (
({ id, answer, extendedText }, index) => (
<FormControl <FormControl
key={id} key={variant.id}
sx={{ sx={{
borderRadius: "12px", borderRadius: "12px",
border: `1px solid ${theme.palette.grey2.main}`, border: `1px solid ${theme.palette.grey2.main}`,
@ -78,13 +77,15 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
justifyContent: "center", justifyContent: "center",
}} }}
> >
{extendedText && ( {variant.extendedText && (
<Typography fontSize={"100px"}>{extendedText}</Typography> <Typography fontSize={"100px"}>
{variant.extendedText}
</Typography>
)} )}
</Box> </Box>
</Box> </Box>
<FormControlLabel <FormControlLabel
key={id} key={variant.id}
sx={{ sx={{
margin: 0, margin: 0,
padding: "15px", padding: "15px",
@ -93,18 +94,29 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
gap: "10px", gap: "10px",
}} }}
value={index} value={index}
onClick={(event) => {
event.preventDefault();
updateAnswer(
currentQuestion.content.id,
currentQuestion.content.variants[index].id
);
if (answer === currentQuestion.content.variants[index].id) {
deleteAnswer(currentQuestion.content.id);
}
}}
control={ control={
<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} /> <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
} }
label={ label={
<Box sx={{ display: "flex", gap: "10px" }}> <Box sx={{ display: "flex", gap: "10px" }}>
<Typography>{answer}</Typography> <Typography>{variant.answer}</Typography>
</Box> </Box>
} }
/> />
</FormControl> </FormControl>
) ))}
)}
</Box> </Box>
</RadioGroup> </RadioGroup>
</Box> </Box>

38
src/pages/ViewPublicationPage/questions/Images.tsx
View File

@ -8,7 +8,7 @@ import {
useMediaQuery, useMediaQuery,
} from "@mui/material"; } from "@mui/material";
import { useQuizViewStore, updateAnswer } from "@root/quizView"; import { useQuizViewStore, updateAnswer, deleteAnswer } from "@root/quizView";
import RadioCheck from "@ui_kit/RadioCheck"; import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon"; import RadioIcon from "@ui_kit/RadioIcon";
@ -36,12 +36,6 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
value={currentQuestion.content.variants.findIndex( value={currentQuestion.content.variants.findIndex(
({ id }) => answer === id ({ id }) => answer === id
)} )}
onChange={({ target }) =>
updateAnswer(
currentQuestion.content.id,
currentQuestion.content.variants[Number(target.value)].id
)
}
sx={{ sx={{
display: "flex", display: "flex",
flexWrap: "wrap", flexWrap: "wrap",
@ -62,8 +56,7 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
width: "100%", width: "100%",
}} }}
> >
{currentQuestion.content.variants.map( {currentQuestion.content.variants.map((variant, index) => (
({ id, answer, extendedText }, index) => (
<Box <Box
key={index} key={index}
sx={{ sx={{
@ -71,13 +64,11 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
border: `1px solid ${theme.palette.grey2.main}`, border: `1px solid ${theme.palette.grey2.main}`,
}} }}
> >
<Box <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
sx={{ display: "flex", alignItems: "center", gap: "10px" }}
>
<Box sx={{ width: "100%", height: "300px" }}> <Box sx={{ width: "100%", height: "300px" }}>
{extendedText && ( {variant.extendedText && (
<img <img
src={extendedText} src={variant.extendedText}
alt="" alt=""
style={{ style={{
display: "block", display: "block",
@ -90,22 +81,33 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
</Box> </Box>
</Box> </Box>
<FormControlLabel <FormControlLabel
key={id} key={variant.id}
sx={{ sx={{
display: "block", display: "block",
textAlign: "center", textAlign: "center",
color: theme.palette.grey2.main, color: theme.palette.grey2.main,
marginTop: "10px", marginTop: "10px",
}} }}
onClick={(event) => {
event.preventDefault();
updateAnswer(
currentQuestion.content.id,
currentQuestion.content.variants[index].id
);
if (answer === currentQuestion.content.variants[index].id) {
deleteAnswer(currentQuestion.content.id);
}
}}
value={index} value={index}
control={ control={
<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} /> <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
} }
label={answer} label={variant.answer}
/> />
</Box> </Box>
) ))}
)}
</Box> </Box>
</RadioGroup> </RadioGroup>
</Box> </Box>

26
src/pages/ViewPublicationPage/questions/Variant.tsx
View File

@ -7,7 +7,7 @@ import {
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import { useQuizViewStore, updateAnswer } from "@root/quizView"; import { useQuizViewStore, updateAnswer, deleteAnswer } from "@root/quizView";
import RadioCheck from "@ui_kit/RadioCheck"; import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon"; import RadioIcon from "@ui_kit/RadioIcon";
@ -36,12 +36,6 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
value={currentQuestion.content.variants.findIndex( value={currentQuestion.content.variants.findIndex(
({ id }) => answer === id ({ id }) => answer === id
)} )}
onChange={({ target }) =>
updateAnswer(
currentQuestion.content.id,
currentQuestion.content.variants[Number(target.value)].id
)
}
sx={{ sx={{
display: "flex", display: "flex",
flexWrap: "wrap", flexWrap: "wrap",
@ -60,9 +54,9 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
gap: "20px", gap: "20px",
}} }}
> >
{currentQuestion.content.variants.map(({ id, answer }, index) => ( {currentQuestion.content.variants.map((variant, index) => (
<FormControlLabel <FormControlLabel
key={id} key={variant.id}
sx={{ sx={{
margin: "0", margin: "0",
borderRadius: "12px", borderRadius: "12px",
@ -78,7 +72,19 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
control={ control={
<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} /> <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
} }
label={answer} label={variant.answer}
onClick={(event) => {
event.preventDefault();
updateAnswer(
currentQuestion.content.id,
currentQuestion.content.variants[index].id
);
if (answer === currentQuestion.content.variants[index].id) {
deleteAnswer(currentQuestion.content.id);
}
}}
/> />
))} ))}
</Box> </Box>

26
src/pages/ViewPublicationPage/questions/Varimg.tsx
View File

@ -7,7 +7,7 @@ import {
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import { useQuizViewStore, updateAnswer } from "@root/quizView"; import { useQuizViewStore, updateAnswer, deleteAnswer } from "@root/quizView";
import RadioCheck from "@ui_kit/RadioCheck"; import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon"; import RadioIcon from "@ui_kit/RadioIcon";
@ -38,12 +38,6 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
value={currentQuestion.content.variants.findIndex( value={currentQuestion.content.variants.findIndex(
({ id }) => answer === id ({ id }) => answer === id
)} )}
onChange={({ target }) =>
updateAnswer(
currentQuestion.content.id,
currentQuestion.content.variants[Number(target.value)].id
)
}
sx={{ sx={{
display: "flex", display: "flex",
flexWrap: "wrap", flexWrap: "wrap",
@ -53,9 +47,9 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
}} }}
> >
<Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}> <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
{currentQuestion.content.variants.map(({ id, answer }, index) => ( {currentQuestion.content.variants.map((variant, index) => (
<FormControlLabel <FormControlLabel
key={id} key={variant.id}
sx={{ sx={{
marginBottom: "15px", marginBottom: "15px",
borderRadius: "5px", borderRadius: "5px",
@ -65,10 +59,22 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
display: "flex", display: "flex",
}} }}
value={index} value={index}
onClick={(event) => {
event.preventDefault();
updateAnswer(
currentQuestion.content.id,
currentQuestion.content.variants[index].id
);
if (answer === currentQuestion.content.variants[index].id) {
deleteAnswer(currentQuestion.content.id);
}
}}
control={ control={
<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} /> <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
} }
label={answer} label={variant.answer}
/> />
))} ))}
</Box> </Box>

9
src/stores/quizView.ts
View File

@ -41,3 +41,12 @@ export const updateAnswer = (
useQuizViewStore.setState({ answers }); useQuizViewStore.setState({ answers });
}; };
export const deleteAnswer = (questionId: string) => {
const answers = [...useQuizViewStore.getState().answers];
const filteredItems = answers.filter(
(answer) => questionId !== answer.questionId
);
useQuizViewStore.setState({ answers: filteredItems });
};