From 60e858c931a07318faf461b98a3c99475fe59d5e Mon Sep 17 00:00:00 2001
From: shafin-r <shafin808s@gmail.com>
Date: Sun, 1 Feb 2026 17:10:38 +0600
Subject: [PATCH] feat(test); add strikethrough functionality for mcq options

---
 src/pages/student/practice/Test.tsx | 77 ++++++++++++++++++++---------
 1 file changed, 55 insertions(+), 22 deletions(-)

diff --git a/src/pages/student/practice/Test.tsx b/src/pages/student/practice/Test.tsx
index c0924f3..3f0f3db 100644
--- a/src/pages/student/practice/Test.tsx
+++ b/src/pages/student/practice/Test.tsx
@@ -41,6 +41,7 @@ import { useExamNavigationGuard } from "../../../hooks/useExamNavGuard";
 
 export const Test = () => {
   const blocker = useExamNavigationGuard();
+  const [eliminated, setEliminated] = useState<Record<string, Set<string>>>({});
 
   const [showExitDialog, setShowExitDialog] = useState(false);
 
@@ -223,37 +224,61 @@ export const Test = () => {
 
     // ✅ MCQ
     if (question.options && question.options.length > 0) {
+      const eliminatedSet = eliminated[question.id] ?? new Set();
       return (
         <div className="flex flex-col gap-4">
           {question.options.map((option, index) => {
             const isSelected = currentAnswer === option.id;
+            const isEliminated = eliminatedSet.has(option.id);
 
             return (
-              <button
+              <div
                 key={option.id}
-                className={`text-start font-satoshi-medium text-lg space-x-2 px-4 py-4 border rounded-4xl transition duration-200 ${
-                  isSelected
-                    ? "bg-linear-to-br from-purple-400 to-purple-500 text-white"
-                    : ""
-                }`}
-                onClick={() =>
-                  setAnswers((prev) => ({
-                    ...prev,
-                    [question.id]: option.id,
-                  }))
-                }
+                className={`flex flex-row-reverse  items-center gap-4 transition 
+             
+            `}
               >
-                <span
-                  className={`px-2 py-1 rounded-full ${
-                    isSelected
-                      ? "bg-white text-purple-500"
-                      : "bg-purple-500 text-white"
-                  }`}
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    toggleEliminate(question.id, option.id);
+                  }}
+                  className={`w-8 h-8 rounded-full text-sm flex items-center justify-center
+                ${
+                  isEliminated
+                    ? "bg-red-500 text-white"
+                    : "bg-gray-200 text-gray-600 hover:bg-gray-300"
+                }
+              `}
                 >
-                  {"ABCD"[index]}
-                </span>{" "}
-                <span>{renderQuestionText(option.text)}</span>
-              </button>
+                  ✕
+                </button>
+                <button
+                  className={`w-full text-start font-satoshi-medium text-lg space-x-2 px-4 py-4 border rounded-4xl transition duration-200 ${
+                    isSelected
+                      ? "bg-linear-to-br from-purple-400 to-purple-500 text-white"
+                      : ""
+                  } ${isEliminated ? "line-through opacity-70" : ""}`}
+                  onClick={() =>
+                    setAnswers((prev) => ({
+                      ...prev,
+                      [question.id]: option.id,
+                    }))
+                  }
+                >
+                  <span
+                    className={`text-inherit px-2 py-1 rounded-full ${
+                      isSelected
+                        ? "bg-white text-purple-500"
+                        : "bg-purple-500 text-white"
+                    } `}
+                  >
+                    {"ABCD"[index]}
+                  </span>{" "}
+                  <span>{renderQuestionText(option.text)}</span>
+                </button>
+              </div>
             );
           })}
         </div>
@@ -278,6 +303,14 @@ export const Test = () => {
     );
   };
 
+  const toggleEliminate = (questionId: string, optionId: string) => {
+    setEliminated((prev) => {
+      const current = new Set(prev[questionId] ?? []);
+      current.has(optionId) ? current.delete(optionId) : current.add(optionId);
+      return { ...prev, [questionId]: current };
+    });
+  };
+
   switch (phase) {
     case "IDLE":
       return (