ENCOA-257 Fixed FillBlanks MC

src/components/ExamEditor/Exercises/Blanks/MultipleChoice/MCOption.tsx

@@ -1,5 +1,3 @@
-
-import { MdDelete, } from "react-icons/md";
 import clsx from "clsx";
 
 interface MCOptionProps {
@@ -24,7 +22,6 @@ const MCOption: React.FC<MCOptionProps> = ({
     onSelect,
     isEditMode,
     onEdit,
-    onRemove
 }) => {
     const optionKeys = ['A', 'B', 'C', 'D'] as const;
 
@@ -32,15 +29,6 @@ const MCOption: React.FC<MCOptionProps> = ({
         <div className="w-full">
             <div className="flex items-center justify-between mb-2">
                 <span className="font-medium">Question {id}</span>
-                {isEditMode && onRemove && (
-                    <button
-                        onClick={onRemove}
-                        className="p-1 rounded text-red-500 hover:bg-gray-100"
-                        aria-label="Remove question"
-                    >
-                        <MdDelete className="h-4 w-4" />
-                    </button>
-                )}
             </div>
             <div className="grid grid-cols-2 gap-2">
                 {optionKeys.map((key) => (

src/components/ExamEditor/Exercises/Blanks/MultipleChoice/index.tsx

@@ -114,7 +114,7 @@ const FillBlanksMC: React.FC<{ exercise: FillBlanksExercise; sectionId: number }
             newState.exercises = newState.exercises.map((ex) =>
                 ex.id === exercise.id ? updatedExercise : ex
             );
-            setLocal((prev) => ({...prev, isPractice: !local.isPractice}))
+            setLocal((prev) => ({ ...prev, isPractice: !local.isPractice }))
             dispatch({ type: 'UPDATE_SECTION_STATE', payload: { sectionId, update: newState, module: currentModule } });
         }
     });
@@ -174,37 +174,6 @@ const FillBlanksMC: React.FC<{ exercise: FillBlanksExercise; sectionId: number }
         });
     };
 
-    const handleRemoveOption = (index: number) => {
-        if (!editing) setEditing(true);
-
-        if (answers.size === 1) {
-            toast.error("There needs to be at least 1 question!");
-            return;
-        }
-
-        setLocal(prev => {
-            const newWords = prev.words.filter((_, i) => i !== index) as FillBlanksMCOption[];
-            const removedOption = prev.words[index] as FillBlanksMCOption;
-            const removedValues = Object.values(removedOption.options);
-            const newAnswers = new Map(answers);
-            for (const [blankId, answer] of newAnswers.entries()) {
-                if (removedValues.includes(answer)) {
-                    newAnswers.delete(blankId);
-                }
-            }
-            setAnswers(newAnswers);
-
-            return {
-                ...prev,
-                words: newWords,
-                solutions: Array.from(newAnswers.entries()).map(([id, solution]) => ({
-                    id,
-                    solution
-                }))
-            };
-        });
-    };
-
     useEffect(() => {
         validateBlanks(blanksState.blanks, answers, alerts, setAlerts);
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -255,6 +224,41 @@ const FillBlanksMC: React.FC<{ exercise: FillBlanksExercise; sectionId: number }
         blanksDispatcher({ type: "REMOVE_BLANK", payload: blankId });
     };
 
+    useEffect(() => {
+        const existingWordIds = new Set((local.words as FillBlanksMCOption[]).map(word => word.id));
+        const blanksMissingWords = blanksState.blanks.filter(blank => !existingWordIds.has(blank.id.toString()));
+        if (blanksMissingWords.length > 0) {
+            setLocal(prev => {
+                const newWords = [...prev.words] as FillBlanksMCOption[];
+
+                blanksMissingWords.forEach(blank => {
+                    const newMCOption: FillBlanksMCOption = {
+                        id: blank.id.toString(),
+                        options: {
+                            A: 'Option A',
+                            B: 'Option B',
+                            C: 'Option C',
+                            D: 'Option D'
+                        }
+                    };
+                    newWords.push(newMCOption);
+                });
+
+                return {
+                    ...prev,
+                    words: newWords,
+                    solutions: Array.from(answers.entries()).map(([id, solution]) => ({
+                        id,
+                        solution
+                    }))
+                };
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [blanksState.blanks]);
+
+    console.log(local);
+
     return (
         <div className="space-y-4">
             <BlanksEditor
@@ -275,7 +279,7 @@ const FillBlanksMC: React.FC<{ exercise: FillBlanksExercise; sectionId: number }
                 onBlankRemove={handleBlankRemove}
                 isEvaluationEnabled={!local.isPractice}
                 prompt={local.prompt}
-                updatePrompt={(prompt: string) => updateLocal({...local, prompt})}
+                updatePrompt={(prompt: string) => updateLocal({ ...local, prompt })}
             >
                 {!blanksState.textMode && selectedBlankId && (
                     <Card className="p-4">
@@ -309,9 +313,6 @@ const FillBlanksMC: React.FC<{ exercise: FillBlanksExercise; sectionId: number }
                                             key as "A" | "B" | "C" | "D",
                                             value
                                         )}
-                                        onRemove={() => handleRemoveOption(
-                                            (local.words as FillBlanksMCOption[]).findIndex(w => w.id === mcOption.id)
-                                        )}
                                     />
                                 );
                             })}