diff --git a/src/pages/ViewPublicationPage/questions/Emoji.tsx b/src/pages/ViewPublicationPage/questions/Emoji.tsx
index 53e8cb7f..42b69f6e 100644
--- a/src/pages/ViewPublicationPage/questions/Emoji.tsx
+++ b/src/pages/ViewPublicationPage/questions/Emoji.tsx
@@ -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) => {
}}
>
- {currentQuestion.content.variants.map(
- ({ id, answer, extendedText }, index) => (
- (
+
+
-
- {extendedText && (
- {extendedText}
- )}
-
+ {variant.extendedText && (
+
+ {variant.extendedText}
+
+ )}
- } icon={} />
+
+ {
+ event.preventDefault();
+
+ updateAnswer(
+ currentQuestion.content.id,
+ currentQuestion.content.variants[index].id
+ );
+
+ if (answer === currentQuestion.content.variants[index].id) {
+ deleteAnswer(currentQuestion.content.id);
}
- label={
-
- {answer}
-
- }
- />
-
- )
- )}
+ }}
+ control={
+ } icon={} />
+ }
+ label={
+
+ {variant.answer}
+
+ }
+ />
+
+ ))}
diff --git a/src/pages/ViewPublicationPage/questions/Images.tsx b/src/pages/ViewPublicationPage/questions/Images.tsx
index f7dfbf80..3d131232 100644
--- a/src/pages/ViewPublicationPage/questions/Images.tsx
+++ b/src/pages/ViewPublicationPage/questions/Images.tsx
@@ -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) => (
-
-
-
- {extendedText && (
-
- )}
-
+ {currentQuestion.content.variants.map((variant, index) => (
+
+
+
+ {variant.extendedText && (
+
+ )}
- } icon={} />
- }
- label={answer}
- />
- )
- )}
+ {
+ 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={
+ } icon={} />
+ }
+ label={variant.answer}
+ />
+
+ ))}
diff --git a/src/pages/ViewPublicationPage/questions/Variant.tsx b/src/pages/ViewPublicationPage/questions/Variant.tsx
index 8e2e2644..d3857aac 100644
--- a/src/pages/ViewPublicationPage/questions/Variant.tsx
+++ b/src/pages/ViewPublicationPage/questions/Variant.tsx
@@ -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) => (
{
control={
} icon={} />
}
- 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);
+ }
+ }}
/>
))}
diff --git a/src/pages/ViewPublicationPage/questions/Varimg.tsx b/src/pages/ViewPublicationPage/questions/Varimg.tsx
index 94ab2b5c..87c0a1fb 100644
--- a/src/pages/ViewPublicationPage/questions/Varimg.tsx
+++ b/src/pages/ViewPublicationPage/questions/Varimg.tsx
@@ -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) => {
}}
>
- {currentQuestion.content.variants.map(({ id, answer }, index) => (
+ {currentQuestion.content.variants.map((variant, index) => (
{
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={
} icon={} />
}
- label={answer}
+ label={variant.answer}
/>
))}
diff --git a/src/stores/quizView.ts b/src/stores/quizView.ts
index e8a1b8ba..a8321f44 100644
--- a/src/stores/quizView.ts
+++ b/src/stores/quizView.ts
@@ -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 });
+};