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

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

@ -8,7 +8,7 @@ import {
FormControl,
} from "@mui/material";
import { useQuizViewStore, updateAnswer } from "@root/quizView";
import { useQuizViewStore, updateAnswer, deleteAnswer } from "@root/quizView";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";
@ -50,61 +50,73 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
}}
>
<Box sx={{ display: "flex", width: "100%", gap: "42px" }}>
{currentQuestion.content.variants.map(
({ id, answer, extendedText }, index) => (
<FormControl
key={id}
{currentQuestion.content.variants.map((variant, index) => (
<FormControl
key={variant.id}
sx={{
borderRadius: "12px",
border: `1px solid ${theme.palette.grey2.main}`,
overflow: "hidden",
maxWidth: "317px",
width: "100%",
height: "255px",
}}
>
<Box
sx={{
borderRadius: "12px",
border: `1px solid ${theme.palette.grey2.main}`,
overflow: "hidden",
maxWidth: "317px",
width: "100%",
height: "255px",
display: "flex",
alignItems: "center",
height: "193px",
background: "#ffffff",
}}
>
<Box
sx={{
width: "100%",
display: "flex",
alignItems: "center",
height: "193px",
background: "#ffffff",
justifyContent: "center",
}}
>
<Box
sx={{
width: "100%",
display: "flex",
justifyContent: "center",
}}
>
{extendedText && (
<Typography fontSize={"100px"}>{extendedText}</Typography>
)}
</Box>
{variant.extendedText && (
<Typography fontSize={"100px"}>
{variant.extendedText}
</Typography>
)}
</Box>
<FormControlLabel
key={id}
sx={{
margin: 0,
padding: "15px",
color: "#4D4D4D",
display: "flex",
gap: "10px",
}}
value={index}
control={
<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
</Box>
<FormControlLabel
key={variant.id}
sx={{
margin: 0,
padding: "15px",
color: "#4D4D4D",
display: "flex",
gap: "10px",
}}
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);
}
label={
<Box sx={{ display: "flex", gap: "10px" }}>
<Typography>{answer}</Typography>
</Box>
}
/>
</FormControl>
)
)}
}}
control={
<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
}
label={
<Box sx={{ display: "flex", gap: "10px" }}>
<Typography>{variant.answer}</Typography>
</Box>
}
/>
</FormControl>
))}
</Box>
</RadioGroup>
</Box>

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

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

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

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

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

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

9
src/stores/quizView.ts
View File

@ -41,3 +41,12 @@ export const updateAnswer = (
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 });
};