From 00d49635d8b068d3d9e57c12cd2231388a38e078 Mon Sep 17 00:00:00 2001
From: David Katrinka <davidkatrinka1995@gmail.com>
Date: Sun, 4 Jan 2026 23:20:59 +0100
Subject: [PATCH] fixed adding and removing question variants

---
 src/pages/AdminTestsPage/AdminTestsPage.tsx | 37 +++++++++--------
 src/pages/QuestionForm/QuestionForm.tsx     | 44 +++++++++++----------
 src/pages/QuestionsPage/QuestionsPage.tsx   | 36 +++++++++--------
 3 files changed, 62 insertions(+), 55 deletions(-)

diff --git a/src/pages/AdminTestsPage/AdminTestsPage.tsx b/src/pages/AdminTestsPage/AdminTestsPage.tsx
index 9cbd372..ee89792 100644
--- a/src/pages/AdminTestsPage/AdminTestsPage.tsx
+++ b/src/pages/AdminTestsPage/AdminTestsPage.tsx
@@ -102,24 +102,27 @@ const AdminTestsPage = () => {
                   >
                     View
                   </Button>
-                  <Button
-                    size="small"
-                    variant="outlined"
-                    color="primary"
-                    onClick={() => handleUpdateTest(test.id)}
-                    sx={{ mr: 1 }}
-                  >
-                    Update
-                  </Button>
+
                   {(user?.type === "admin" || user?.id == test.author_id) && (
-                    <Button
-                      size="small"
-                      variant="outlined"
-                      color="error"
-                      onClick={() => setDeleteTestId(test.id)}
-                    >
-                      Delete
-                    </Button>
+                    <>
+                      <Button
+                        size="small"
+                        variant="outlined"
+                        color="primary"
+                        onClick={() => handleUpdateTest(test.id)}
+                        sx={{ mr: 1 }}
+                      >
+                        Update
+                      </Button>
+                      <Button
+                        size="small"
+                        variant="outlined"
+                        color="error"
+                        onClick={() => setDeleteTestId(test.id)}
+                      >
+                        Delete
+                      </Button>
+                    </>
                   )}
                 </TableCell>
               </TableRow>
diff --git a/src/pages/QuestionForm/QuestionForm.tsx b/src/pages/QuestionForm/QuestionForm.tsx
index c83244b..c8561e5 100644
--- a/src/pages/QuestionForm/QuestionForm.tsx
+++ b/src/pages/QuestionForm/QuestionForm.tsx
@@ -34,8 +34,10 @@ const QuestionForm = () => {
   const [type, setType] = useState<"single" | "multiple" | "text">("single");
   const [difficulty, setDifficulty] = useState(1);
   const [categoryId, setCategoryId] = useState<number | "">("");
+
   const [variants, setVariants] = useState<Variant[]>([{ id: 1, text: "" }]);
   const [correctAnswers, setCorrectAnswers] = useState<number[]>([]);
+
   const [textAnswer, setTextAnswer] = useState("");
   const [openAiModal, setOpenAiModal] = useState(false);
   const [generatedQuestion, setGeneratedQuestion] =
@@ -52,7 +54,6 @@ const QuestionForm = () => {
   useEffect(() => {
     if (question || generatedQuestion) {
       const q = question ?? generatedQuestion;
-      console.log(q);
       setTitle(q.title);
       setDescription(q.description ?? "");
       setType(q.type);
@@ -63,11 +64,7 @@ const QuestionForm = () => {
       } else {
         setVariants(q.variants.length ? q.variants : [{ id: 1, text: "" }]);
 
-        setCorrectAnswers(
-          q.correct_answers.map((i: number) =>
-            typeof i === "number" ? i - 1 : 0
-          )
-        );
+        setCorrectAnswers(q.correct_answers);
       }
     }
   }, [question, generatedQuestion]);
@@ -81,23 +78,30 @@ const QuestionForm = () => {
   };
 
   const addVariant = () => {
-    setVariants([...variants, { id: variants.length + 1, text: "" }]);
+    setVariants((prev) => [
+      ...prev,
+      {
+        id: Math.max(0, ...prev.map((v) => v.id)) + 1,
+        text: "",
+      },
+    ]);
   };
 
   const removeVariant = (index: number) => {
-    const newVariants = variants.filter((_, i) => i !== index);
-    setVariants(newVariants);
-    setCorrectAnswers((prev) => prev.filter((i) => i !== index));
+    const removedId = variants[index].id;
+
+    setVariants((prev) => prev.filter((_, i) => i !== index));
+    setCorrectAnswers((prev) => prev.filter((id) => id !== removedId));
   };
 
-  const toggleCorrectAnswer = (index: number) => {
+  const toggleCorrectAnswer = (variantId: number) => {
     if (type === "single") {
-      setCorrectAnswers([index]);
+      setCorrectAnswers([variantId]);
     } else {
       setCorrectAnswers((prev) =>
-        prev.includes(index)
-          ? prev.filter((i) => i !== index)
-          : [...prev, index]
+        prev.includes(variantId)
+          ? prev.filter((id) => id !== variantId)
+          : [...prev, variantId]
       );
     }
   };
@@ -126,8 +130,7 @@ const QuestionForm = () => {
       difficulty,
       category_id: Number(categoryId),
       variants: type === "text" ? [] : variants,
-      correct_answers:
-        type === "text" ? [textAnswer] : correctAnswers.map((i) => i + 1),
+      correct_answers: correctAnswers,
     };
 
     if (isUpdate && id) {
@@ -224,7 +227,7 @@ const QuestionForm = () => {
             </Typography>
             {variants.map((v, i) => (
               <Paper
-                key={i}
+                key={v.id}
                 sx={{
                   display: "flex",
                   alignItems: "center",
@@ -241,8 +244,8 @@ const QuestionForm = () => {
                 <FormControlLabel
                   control={
                     <Checkbox
-                      checked={correctAnswers.includes(i)}
-                      onChange={() => toggleCorrectAnswer(i)}
+                      checked={correctAnswers.includes(v.id)}
+                      onChange={() => toggleCorrectAnswer(v.id)}
                     />
                   }
                   label="Correct"
@@ -264,7 +267,6 @@ const QuestionForm = () => {
         </Button>
         {!isUpdate && (
           <Button
-
             variant="outlined"
             sx={{ ml: 2 }}
             onClick={() => setOpenAiModal(true)}
diff --git a/src/pages/QuestionsPage/QuestionsPage.tsx b/src/pages/QuestionsPage/QuestionsPage.tsx
index d9ecc62..3d84ef4 100644
--- a/src/pages/QuestionsPage/QuestionsPage.tsx
+++ b/src/pages/QuestionsPage/QuestionsPage.tsx
@@ -104,25 +104,27 @@ const QuestionsPage = () => {
                     View
                   </Button>
 
-                  <Button
-                    variant="outlined"
-                    color="primary"
-                    size="small"
-                    onClick={() => handleUpdateQuestion(question.id)}
-                    sx={{ mr: 1 }}
-                  >
-                    Update
-                  </Button>
                   {(user?.type === "admin" ||
                     user?.id == question.author.id) && (
-                    <Button
-                      variant="outlined"
-                      color="error"
-                      size="small"
-                      onClick={() => setDeleteQuestionId(question.id)}
-                    >
-                      Delete
-                    </Button>
+                    <>
+                      <Button
+                        variant="outlined"
+                        color="primary"
+                        size="small"
+                        onClick={() => handleUpdateQuestion(question.id)}
+                        sx={{ mr: 1 }}
+                      >
+                        Update
+                      </Button>
+                      <Button
+                        variant="outlined"
+                        color="error"
+                        size="small"
+                        onClick={() => setDeleteQuestionId(question.id)}
+                      >
+                        Delete
+                      </Button>
+                    </>
                   )}
                 </TableCell>
               </TableRow>