feat(test); add strikethrough functionality for mcq options

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,19 +224,42 @@ 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 ${
+                className={`flex flex-row-reverse  items-center gap-4 transition 
+             
+            `}
+              >
+                <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"
+                }
+              `}
+                >
+                  ✕
+                </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,
@@ -244,7 +268,7 @@ export const Test = () => {
                   }
                 >
                   <span
-                  className={`px-2 py-1 rounded-full ${
+                    className={`text-inherit px-2 py-1 rounded-full ${
                       isSelected
                         ? "bg-white text-purple-500"
                         : "bg-purple-500 text-white"
@@ -254,6 +278,7 @@ export const Test = () => {
                   </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 (