@tinyweb_dev/oe-exam-sdk 0.2.6 → 0.2.8

package/dist/components/questions/types/fill-in-blank/FillInBlankCreator.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ImagePreview } from '../../../../components/ui/image-preview';
-import { useState, useRef, useEffect, useMemo } from 'react';
+import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { Button } from '../../../../components/ui/button';
 import { Label } from '../../../../components/ui/label';
 import { Input } from '../../../../components/ui/input';
@@ -9,45 +9,14 @@ import { Textarea } from '../../../../components/ui/textarea';
 import { PointsInput } from '../../../../components/ui/points-input';
 import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
 import { Switch } from '../../../../components/ui/switch';
-import { Pencil, Eye, Lightbulb, Type, MessageSquare, ToggleLeft, Plus, Trash2, ListChecks, ImageIcon, BookOpen } from 'lucide-react';
+import { Pencil, Eye, Lightbulb, Type, MessageSquare, Plus, Trash2, ListChecks, ImageIcon, Volume2, BookOpen } from 'lucide-react';
 import { FillInBlankClient } from './FillInBlankClient';
+import { blankHasAnswer, compactFillInBlankAnswers, formatBlankAnswersDisplay, extractPlaceholderIndices, getMaxPlaceholderIndex, normalizeFillInBlankAnswers, } from './answer-utils';
 import { useDebouncedCallback, usePresignedFileUrl } from '../../../../shared/lib/hooks';
 import { FileUpload } from '../../../../components/ui/file-upload';
 import { BasicQuestionGroupCard } from '../../groups/BasicQuestionGroupCard';
 import { useBasicQuestionGroup } from '../../_shared/hooks/useBasicQuestionGroup';
-// Helper: Extract placeholder indices from question text
-// e.g., "He {0} 10 years old and she {1} 12." -> [0, 1]
-function extractPlaceholderIndices(question) {
-    const regex = /\{(\d+)\}/g;
-    const indices = [];
-    let match;
-    while ((match = regex.exec(question)) !== null) {
-        const index = parseInt(match[1], 10);
-        if (!indices.includes(index)) {
-            indices.push(index);
-        }
-    }
-    return indices.sort((a, b) => a - b);
-}
-// Helper: Get the maximum placeholder index
-function getMaxPlaceholderIndex(question) {
-    const indices = extractPlaceholderIndices(question);
-    return indices.length > 0 ? Math.max(...indices) : -1;
-}
-// Helper: Determine which group a question belongs to based on its index in the part
-function getGroupNumberForIndex(questionIndexInPart, groups) {
-    if (!groups || groups.length === 0 || questionIndexInPart === undefined)
-        return 1;
-    let cumulative = 0;
-    for (const group of groups) {
-        cumulative += group.questionCount;
-        if (questionIndexInPart < cumulative) {
-            return group.number;
-        }
-    }
-    return groups[groups.length - 1]?.number ?? 1;
-}
-function FillInBlankCreatorContent({ initialData, onSave, onCancel, onChange, externalErrors, onUnsavedChangesChange, validationRef, groups, questionIndexInPart, partId, headerExtra, }) {
+function FillInBlankCreatorContent({ initialData, onChange, externalErrors, validationRef, groups, questionIndexInPart, partId, questionConfig, headerExtra, }) {
     // ============ GROUP (shared title / content / image) ============
     const { isGrouped, currentGroupNumber, groupTitle, groupSubtitle, groupContent, imageUrl: groupImageUrl, setGroupTitle, setGroupSubtitle, setGroupContent, setImageUrl: setGroupImageUrl, } = useBasicQuestionGroup({
         partId,
@@ -95,7 +64,7 @@ function FillInBlankCreatorContent({ initialData, onSave, onCancel, onChange, ex
     });
     // ============ STATE ============
     // Support NEW API format (content.question + correctAnswer.answers) and legacy formats
-    const getInitialQuestion = () => {
+    const getInitialQuestion = useCallback(() => {
         // NEW API format: content.question
         if (initialData?.content?.question)
             return initialData.content.question;
@@ -106,31 +75,23 @@ function FillInBlankCreatorContent({ initialData, onSave, onCancel, onChange, ex
         if (initialData?.blanks?.[0]?.text)
             return initialData.blanks[0].text;
         return '';
-    };
-    const getInitialAnswers = () => {
-        // NEW API format: correctAnswer.answers
+    }, [initialData]);
+    const getInitialAnswers = useCallback(() => {
+        // NEW API format: correctAnswer.answers (string[] or string[][])
         if (initialData?.correctAnswer?.answers && Array.isArray(initialData.correctAnswer.answers)) {
-            return initialData.correctAnswer.answers;
+            return normalizeFillInBlankAnswers(initialData.correctAnswer.answers);
         }
-        // Legacy format: answers at root level
+        // Flat format: answers at root level
         if (initialData?.answers && initialData.answers.length > 0) {
-            return initialData.answers;
+            return normalizeFillInBlankAnswers(initialData.answers);
         }
-        // Very old format: blanks[].correctAnswer
-        if (initialData?.blanks?.[0]?.correctAnswer) {
-            return [initialData.blanks[0].correctAnswer];
+        // Very old format: blanks[].correctAnswer / correctAnswers
+        if (initialData?.blanks?.length) {
+            return normalizeFillInBlankAnswers(initialData.blanks.map((b) => b.correctAnswers ?? b.correctAnswer ?? ''));
         }
         return [];
-    };
-    const getInitialCaseSensitive = () => {
-        // NEW API format: correctAnswer.caseSensitive
-        if (initialData?.correctAnswer?.caseSensitive !== undefined) {
-            return initialData.correctAnswer.caseSensitive;
-        }
-        // Legacy format: caseSensitive at root level
-        return initialData?.caseSensitive || false;
-    };
-    const getInitialShowHints = () => {
+    }, [initialData]);
+    const getInitialShowHints = useCallback(() => {
         // NEW API format: content.showHints
         if (initialData?.content?.showHints !== undefined) {
             return Boolean(initialData.content.showHints);
@@ -141,8 +102,8 @@ function FillInBlankCreatorContent({ initialData, onSave, onCancel, onChange, ex
         }
         // Default: false
         return false;
-    };
-    const getInitialHints = () => {
+    }, [initialData]);
+    const getInitialHints = useCallback(() => {
         // NEW API format: content.hints
         if (Array.isArray(initialData?.content?.hints)) {
             return initialData.content.hints;
@@ -153,10 +114,9 @@ function FillInBlankCreatorContent({ initialData, onSave, onCancel, onChange, ex
         }
         // Default: empty array
         return [];
-    };
+    }, [initialData]);
     const [question, setQuestion] = useState(getInitialQuestion());
     const [answers, setAnswers] = useState(getInitialAnswers());
-    const [caseSensitive, setCaseSensitive] = useState(getInitialCaseSensitive());
     const [explanation, setExplanation] = useState(initialData?.explanation || '');
     const [points, setPoints] = useState(initialData?.points || 1);
     const [showHints, setShowHints] = useState(getInitialShowHints());
@@ -165,6 +125,10 @@ function FillInBlankCreatorContent({ initialData, onSave, onCancel, onChange, ex
     const [isExample, setIsExample] = useState(initialData?.isExample || false);
     // Per-question image — stored in content.imageUrl (independent from the group card image)
     const [imageUrl, setImageUrl] = useState(() => initialData?.content?.imageUrl || initialData?.imageUrl || '');
+    const [audioUrl, setAudioUrl] = useState(() => initialData?.audioUrl || initialData?.content?.audioUrl || '');
+    // Whether per-question audio is part of this part's questionConfig.
+    // Template may use "audio" or "audioUrl".
+    const includesAudio = Boolean(questionConfig?.includes('audio') || questionConfig?.includes('audioUrl'));
     // UI State
     const [isClientMode, setIsClientMode] = useState(false);
     const [imagePreviewUrl, setImagePreviewUrl] = useState('');
@@ -181,8 +145,6 @@ function FillInBlankCreatorContent({ initialData, onSave, onCancel, onChange, ex
     const isInitializingRef = useRef(false);
     const onChangeRef = useRef(onChange);
     const previousPayloadRef = useRef('');
-    // NOTE: Status tracking is now handled entirely by ExamCreator via localStorage (exam_question_status_{id})
-    // The onChange callback triggers handleQuestionDraftChange in ExamCreator which updates localStorage
     // Update refs
     useEffect(() => {
         onChangeRef.current = onChange;
@@ -205,7 +167,7 @@ function FillInBlankCreatorContent({ initialData, onSave, onCancel, onChange, ex
                         return newAnswers.slice(0, requiredLength);
                     }
                     while (newAnswers.length < requiredLength) {
-                        newAnswers.push('');
+                        newAnswers.push(['']);
                     }
                     return newAnswers;
                 }
@@ -213,6 +175,36 @@ function FillInBlankCreatorContent({ initialData, onSave, onCancel, onChange, ex
             });
         }
     }, [maxIndex]);
+    // ============ VALIDATION ============
+    const validateForm = useCallback(() => {
+        const errors = {};
+        if (!question.trim()) {
+            errors.question = 'Vui lòng nhập câu hỏi!';
+        }
+        else if (placeholderIndices.length === 0) {
+            errors.question = 'Câu hỏi cần có ít nhất một chỗ trống {0}!';
+        }
+        // Check if placeholder indices are sequential starting from 0
+        const expectedIndices = Array.from({ length: placeholderIndices.length }, (_, i) => i);
+        const hasGaps = !placeholderIndices.every((idx, i) => idx === expectedIndices[i]);
+        if (hasGaps && placeholderIndices.length > 0) {
+            errors.question = 'Các chỗ trống phải đánh số liên tục từ {0}!';
+        }
+        // Validate each blank has at least one non-empty correct answer
+        errors.answers = {};
+        const indicesToValidate = placeholderIndices.length > 0 ? placeholderIndices : [0];
+        indicesToValidate.forEach((idx) => {
+            if (!blankHasAnswer(answers[idx])) {
+                errors.answers[idx] = 'Vui lòng nhập ít nhất 1 đáp án!';
+            }
+        });
+        // Clean up empty answers object
+        if (Object.keys(errors.answers).length === 0) {
+            delete errors.answers;
+        }
+        setValidationErrors(errors);
+        return !errors.question && !errors.answers;
+    }, [question, placeholderIndices, answers]);
     // Expose validation function via ref
     useEffect(() => {
         if (validationRef) {
@@ -224,14 +216,14 @@ function FillInBlankCreatorContent({ initialData, onSave, onCancel, onChange, ex
                 // This bypasses the debounced onChange race condition
                 getFormData: () => ({
                     question,
-                    answers,
-                    caseSensitive,
+                    answers: compactFillInBlankAnswers(answers),
                     explanation,
                     points,
                     // Keep the two image namespaces mutually exclusive so a non-grouped part never
                     // emits group data (which would wrongly create a questionGroup) and vice versa.
                     imageUrl: isGrouped ? '' : imageUrl,
                     groupImageUrl: isGrouped ? groupImageUrl : '',
+                    audioUrl: includesAudio ? (audioUrl || '') : '',
                     showHints,
                     hints: showHints ? hints : [],
                     isExample,
@@ -243,7 +235,7 @@ function FillInBlankCreatorContent({ initialData, onSave, onCancel, onChange, ex
                 }),
             };
         }
-    }, [validationRef, question, answers, caseSensitive, explanation, points, isGrouped, imageUrl, groupImageUrl, showHints, hints, groupTitle, groupSubtitle, groupContent, currentGroupNumber, groups]);
+    }, [validationRef, question, answers, explanation, points, isGrouped, imageUrl, groupImageUrl, audioUrl, includesAudio, showHints, hints, groupTitle, groupSubtitle, groupContent, currentGroupNumber, groups, isExample, validateForm]);
     // ============ SYNC INITIAL DATA ============
     useEffect(() => {
         const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
@@ -253,7 +245,6 @@ function FillInBlankCreatorContent({ initialData, onSave, onCancel, onChange, ex
             if (initialData) {
                 setQuestion(getInitialQuestion());
                 setAnswers(getInitialAnswers());
-                setCaseSensitive(getInitialCaseSensitive());
                 // Explanation can be at root level or in initialData
                 setExplanation(initialData.explanation || '');
                 // Points can be at root level
@@ -262,34 +253,35 @@ function FillInBlankCreatorContent({ initialData, onSave, onCancel, onChange, ex
                 setHints(getInitialHints());
                 setIsExample(initialData.isExample || false);
                 setImageUrl(initialData?.content?.imageUrl || initialData.imageUrl || '');
+                setAudioUrl(initialData.audioUrl || initialData?.content?.audioUrl || '');
             }
             else {
                 setQuestion('');
                 setAnswers([]);
-                setCaseSensitive(false);
                 setExplanation('');
                 setPoints(1);
                 setShowHints(false);
                 setHints([]);
                 setIsExample(false);
                 setImageUrl('');
+                setAudioUrl('');
             }
             setTimeout(() => {
                 isInitializingRef.current = false;
             }, 150);
         }
-    }, [initialData]);
+    }, [initialData, getInitialAnswers, getInitialHints, getInitialQuestion, getInitialShowHints]);
     // ============ ON CHANGE CALLBACK ============
     useEffect(() => {
         if (isInitializingRef.current) {
             const currentPayload = JSON.stringify({
                 question,
                 answers,
-                caseSensitive,
                 explanation,
                 points,
                 imageUrl,
                 groupImageUrl,
+                audioUrl,
                 showHints,
                 hints,
                 isExample,
@@ -304,12 +296,12 @@ function FillInBlankCreatorContent({ initialData, onSave, onCancel, onChange, ex
         }
         const payload = {
             question,
-            answers,
-            caseSensitive,
+            answers: compactFillInBlankAnswers(answers),
             explanation,
             points,
             imageUrl: isGrouped ? '' : imageUrl,
             groupImageUrl: isGrouped ? groupImageUrl : '',
+            audioUrl: includesAudio ? (audioUrl || '') : '',
             showHints,
             hints: showHints ? hints : [],
             isExample,
@@ -324,75 +316,26 @@ function FillInBlankCreatorContent({ initialData, onSave, onCancel, onChange, ex
             previousPayloadRef.current = payloadString;
             debouncedOnChange(payload);
         }
-    }, [question, answers, caseSensitive, explanation, points, isGrouped, imageUrl, groupImageUrl, showHints, hints, isExample, groupTitle, groupSubtitle, groupContent, currentGroupNumber, groups]);
-    // ============ VALIDATION ============
-    const validateForm = () => {
-        const errors = {};
-        if (!question.trim()) {
-            errors.question = 'Vui lòng nhập câu hỏi!';
-        }
-        else if (placeholderIndices.length === 0) {
-            errors.question = 'Câu hỏi cần có ít nhất một chỗ trống {0}!';
-        }
-        // Check if placeholder indices are sequential starting from 0
-        const expectedIndices = Array.from({ length: placeholderIndices.length }, (_, i) => i);
-        const hasGaps = !placeholderIndices.every((idx, i) => idx === expectedIndices[i]);
-        if (hasGaps && placeholderIndices.length > 0) {
-            errors.question = 'Các chỗ trống phải đánh số liên tục từ {0}!';
-        }
-        // Validate each answer - use placeholderIndices or default [0]
-        errors.answers = {};
-        const indicesToValidate = placeholderIndices.length > 0 ? placeholderIndices : [0];
-        indicesToValidate.forEach((idx) => {
-            if (!answers[idx] || !answers[idx].trim()) {
-                errors.answers[idx] = 'Vui lòng nhập đáp án!';
+    }, [question, answers, explanation, points, isGrouped, imageUrl, groupImageUrl, audioUrl, includesAudio, showHints, hints, isExample, groupTitle, groupSubtitle, groupContent, currentGroupNumber, groups, debouncedOnChange]);
+    // Ensure blank slot exists then update alternative at altIndex
+    const updateBlankAnswer = (blankIndex, altIndex, value) => {
+        setAnswers((prev) => {
+            const next = [...prev];
+            while (next.length <= blankIndex) {
+                next.push(['']);
+            }
+            const alts = [...(next[blankIndex] || [''])];
+            while (alts.length <= altIndex) {
+                alts.push('');
             }
+            alts[altIndex] = value;
+            next[blankIndex] = alts;
+            return next;
         });
-        // Clean up empty answers object
-        if (Object.keys(errors.answers).length === 0) {
-            delete errors.answers;
-        }
-        setValidationErrors(errors);
-        return !errors.question && !errors.answers;
-    };
-    // Handle save
-    const handleSave = () => {
-        if (!validateForm()) {
-            return;
-        }
-        // NOTE: Save status is now managed by ExamCreator via localStorage
-        const saveData = {
-            question,
-            answers,
-            caseSensitive,
-            explanation,
-            points,
-            imageUrl,
-            showHints,
-            hints: showHints ? hints : [],
-            isExample,
-            title: groupTitle,
-            subtitle: groupSubtitle,
-            groupContent,
-            groupNumber: currentGroupNumber,
-            groups,
-        };
-        onSave?.(saveData);
-    };
-    // Update answer at specific index
-    const updateAnswer = (index, value) => {
-        const newAnswers = [...answers];
-        // Ensure array is long enough
-        while (newAnswers.length <= index) {
-            newAnswers.push('');
-        }
-        newAnswers[index] = value;
-        setAnswers(newAnswers);
-        // Clear validation error for this answer
-        if (validationErrors.answers?.[index]) {
-            setValidationErrors(prev => {
+        if (validationErrors.answers?.[blankIndex]) {
+            setValidationErrors((prev) => {
                 const newAnswerErrors = { ...prev.answers };
-                delete newAnswerErrors[index];
+                delete newAnswerErrors[blankIndex];
                 return {
                     ...prev,
                     answers: Object.keys(newAnswerErrors).length > 0 ? newAnswerErrors : undefined,
@@ -400,11 +343,35 @@ function FillInBlankCreatorContent({ initialData, onSave, onCancel, onChange, ex
             });
         }
     };
+    const addBlankAlternative = (blankIndex) => {
+        setAnswers((prev) => {
+            const next = [...prev];
+            while (next.length <= blankIndex) {
+                next.push(['']);
+            }
+            next[blankIndex] = [...(next[blankIndex] || ['']), ''];
+            return next;
+        });
+    };
+    const removeBlankAlternative = (blankIndex, altIndex) => {
+        setAnswers((prev) => {
+            const next = [...prev];
+            const alts = [...(next[blankIndex] || [''])];
+            if (alts.length <= 1) {
+                next[blankIndex] = [''];
+            }
+            else {
+                alts.splice(altIndex, 1);
+                next[blankIndex] = alts;
+            }
+            return next;
+        });
+    };
     // Generate preview text with answers filled in
     const getPreviewText = () => {
         let preview = question;
         placeholderIndices.forEach((idx) => {
-            const answer = answers[idx] || '_____';
+            const answer = formatBlankAnswersDisplay(answers[idx]) || '_____';
             preview = preview.replace(`{${idx}}`, `[${answer}]`);
         });
         return preview;
@@ -413,10 +380,10 @@ function FillInBlankCreatorContent({ initialData, onSave, onCancel, onChange, ex
     if (isClientMode) {
         const questionData = {
             question,
-            answers,
-            caseSensitive,
+            answers: compactFillInBlankAnswers(answers),
             explanation,
             imageUrl: isGrouped ? '' : (displayPreviewUrl || imageUrl),
+            audioUrl: includesAudio ? (audioUrl || '') : '',
             showHints,
             hints: showHints ? hints : [],
             isExample,
@@ -428,21 +395,27 @@ function FillInBlankCreatorContent({ initialData, onSave, onCancel, onChange, ex
             groupImageUrl: isGrouped ? (groupDisplayPreviewUrl || groupImageUrl) : '',
             groupNumber: isGrouped ? currentGroupNumber : undefined,
         };
-        return (_jsxs("div", { className: "space-y-4", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(CardTitle, { children: "Fill In Blank (Preview)" }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i Edit Mode"] })] }) }) }), _jsx(FillInBlankClient, { questionData: questionData, autoFillCorrectAnswers: true, isReviewMode: false, explanation: explanation })] }));
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(CardTitle, { children: "Fill In Blank (Preview)" }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i Edit Mode"] })] }) }) }), _jsx(FillInBlankClient, { questionData: questionData, questionConfig: questionConfig, autoFillCorrectAnswers: true, isReviewMode: false, explanation: explanation })] }));
     }
     // ============ CREATOR UI ============
-    return (_jsxs("div", { className: "space-y-4", children: [isGrouped && (_jsx(BasicQuestionGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, uploadIdPrefix: `fill-in-blank-${partId ?? 'group'}` })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 shadow-sm", children: _jsx(Type, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "\u0110i\u1EC1n v\u00E0o ch\u1ED7 tr\u1ED1ng" }), _jsx("p", { className: "text-xs text-gray-500", children: "H\u1ED7 tr\u1EE3 nhi\u1EC1u ch\u1ED7 tr\u1ED1ng trong m\u1ED9t c\u00E2u h\u1ECFi" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [headerExtra, _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !question?.trim() || placeholderIndices.length === 0, className: "gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] })] }) }), _jsxs(CardContent, { className: "space-y-4 px-4 pb-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [_jsx(PointsInput, { defaultValue: points, onChange: (e) => setPoints(Number(e.target.value) || 1) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "show-suggested-words", checked: showHints, onCheckedChange: setShowHints }), _jsx(Label, { htmlFor: "show-suggested-words", className: "cursor-pointer text-sm font-medium text-gray-700", children: "Hi\u1EC3n th\u1ECB t\u1EEB g\u1EE3i \u00FD" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "isExample", checked: isExample, onCheckedChange: setIsExample }), _jsx(Label, { htmlFor: "isExample", className: "cursor-pointer text-sm font-medium text-gray-700", children: "\u0110\u00E1nh d\u1EA5u l\u00E0 c\u00E2u h\u1ECFi Example" })] })] }), _jsx("div", { className: "rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-5 shadow-sm", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-blue-100", children: _jsx(Lightbulb, { className: "h-4 w-4 text-blue-600" }) }), _jsxs("div", { className: "text-sm text-blue-900", children: [_jsx("p", { className: "font-semibold text-blue-800", children: "H\u01B0\u1EDBng d\u1EABn t\u1EA1o c\u00E2u h\u1ECFi" }), _jsxs("ul", { className: "mt-2 space-y-1.5 text-blue-700", children: [_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }), "S\u1EED d\u1EE5ng ", _jsx("code", { className: "mx-1 rounded bg-blue-100 px-1.5 py-0.5 font-mono text-blue-800", children: '{0}' }), ", ", _jsx("code", { className: "mx-1 rounded bg-blue-100 px-1.5 py-0.5 font-mono text-blue-800", children: '{1}' }), ", ", _jsx("code", { className: "mx-1 rounded bg-blue-100 px-1.5 py-0.5 font-mono text-blue-800", children: '{2}' }), "... \u0111\u1EC3 \u0111\u00E1nh d\u1EA5u c\u00E1c ch\u1ED7 tr\u1ED1ng"] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }), "H\u1EC7 th\u1ED1ng s\u1EBD t\u1EF1 \u0111\u1ED9ng t\u1EA1o \u00F4 nh\u1EADp \u0111\u00E1p \u00E1n cho m\u1ED7i ch\u1ED7 tr\u1ED1ng"] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }), "V\u00ED d\u1EE5: \u201CHe ", '{0}', " 10 years old and she ", '{1}', " 12.\u201D"] })] })] })] }) }), !isGrouped && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-indigo-500" }), "H\u00ECnh \u1EA3nh ", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn)" })] }), _jsx(FileUpload, { id: "fill-in-blank-image", label: "", accept: "image/*", value: imageUrl || '', onChange: (url) => {
+    return (_jsxs("div", { className: "space-y-4", children: [isGrouped && (_jsx(BasicQuestionGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, uploadIdPrefix: `fill-in-blank-${partId ?? 'group'}` })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 shadow-sm", children: _jsx(Type, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "\u0110i\u1EC1n v\u00E0o ch\u1ED7 tr\u1ED1ng" }), _jsx("p", { className: "text-xs text-gray-500", children: "H\u1ED7 tr\u1EE3 nhi\u1EC1u ch\u1ED7 tr\u1ED1ng trong m\u1ED9t c\u00E2u h\u1ECFi" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [headerExtra, _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !question?.trim() || placeholderIndices.length === 0, className: "gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] })] }) }), _jsxs(CardContent, { className: "space-y-4 px-4 pb-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [_jsx(PointsInput, { value: points, onChange: (e) => setPoints(parseFloat(e.target.value) || 1) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "show-suggested-words", checked: showHints, onCheckedChange: setShowHints }), _jsx(Label, { htmlFor: "show-suggested-words", className: "cursor-pointer text-sm font-medium text-gray-700", children: "Hi\u1EC3n th\u1ECB t\u1EEB g\u1EE3i \u00FD" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "isExample", checked: isExample, onCheckedChange: setIsExample }), _jsx(Label, { htmlFor: "isExample", className: "cursor-pointer text-sm font-medium text-gray-700", children: "\u0110\u00E1nh d\u1EA5u l\u00E0 c\u00E2u h\u1ECFi Example" })] })] }), _jsx("div", { className: "rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-5 shadow-sm", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-blue-100", children: _jsx(Lightbulb, { className: "h-4 w-4 text-blue-600" }) }), _jsxs("div", { className: "text-sm text-blue-900", children: [_jsx("p", { className: "font-semibold text-blue-800", children: "H\u01B0\u1EDBng d\u1EABn t\u1EA1o c\u00E2u h\u1ECFi" }), _jsxs("ul", { className: "mt-2 space-y-1.5 text-blue-700", children: [_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }), "S\u1EED d\u1EE5ng ", _jsx("code", { className: "mx-1 rounded bg-blue-100 px-1.5 py-0.5 font-mono text-blue-800", children: '{0}' }), ", ", _jsx("code", { className: "mx-1 rounded bg-blue-100 px-1.5 py-0.5 font-mono text-blue-800", children: '{1}' }), ", ", _jsx("code", { className: "mx-1 rounded bg-blue-100 px-1.5 py-0.5 font-mono text-blue-800", children: '{2}' }), "... \u0111\u1EC3 \u0111\u00E1nh d\u1EA5u c\u00E1c ch\u1ED7 tr\u1ED1ng"] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }), "H\u1EC7 th\u1ED1ng s\u1EBD t\u1EF1 \u0111\u1ED9ng t\u1EA1o \u00F4 nh\u1EADp \u0111\u00E1p \u00E1n cho m\u1ED7i ch\u1ED7 tr\u1ED1ng"] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }), "V\u00ED d\u1EE5: \u201CHe ", '{0}', " 10 years old and she ", '{1}', " 12.\u201D"] })] })] })] }) }), !isGrouped && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-indigo-500" }), "H\u00ECnh \u1EA3nh ", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn)" })] }), _jsx(FileUpload, { id: "fill-in-blank-image", label: "", accept: "image/*", value: imageUrl || '', onChange: (url) => {
                                             setImageUrl(url);
-                                        }, onPresignedUrlChange: setImagePreviewUrl, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }), displayPreviewUrl && (_jsx(ImagePreview, { src: displayPreviewUrl, alt: "Preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] })), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "question", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-indigo-500" }), "C\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Textarea, { id: "question", value: question, onChange: (e) => {
+                                        }, onPresignedUrlChange: setImagePreviewUrl, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }), displayPreviewUrl && (_jsx(ImagePreview, { src: displayPreviewUrl, alt: "Preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] })), includesAudio && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Volume2, { className: "h-4 w-4 text-indigo-500" }), "Audio c\u00E2u h\u1ECFi"] }), _jsx(FileUpload, { id: "fill-in-blank-audio", label: "", accept: "audio/*", value: audioUrl || '', onChange: (url) => {
+                                            setAudioUrl(url);
+                                        }, maxSize: 20, placeholder: "Upload file audio", autoUpload: true, prefix: "questions", showPlayButton: true })] })), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "question", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-indigo-500" }), "C\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Textarea, { id: "question", value: question, onChange: (e) => {
                                             setQuestion(e.target.value);
                                             if (validationErrors.question) {
                                                 setValidationErrors(prev => ({ ...prev, question: undefined }));
                                             }
-                                        }, placeholder: "V\u00ED d\u1EE5: He {0} 10 years old and she {1} 12.", rows: 3, className: `min-h-[100px] border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${validationErrors.question ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), validationErrors.question && (_jsx("p", { className: "text-sm text-red-600", children: validationErrors.question })), placeholderIndices.length > 0 && (_jsx("div", { className: "flex items-center gap-2 rounded-lg bg-green-50 px-3 py-2", children: _jsxs("span", { className: "text-sm text-green-700", children: ["\u2713 \u0110\u00E3 ph\u00E1t hi\u1EC7n ", _jsx("strong", { children: placeholderIndices.length }), " ch\u1ED7 tr\u1ED1ng: ", placeholderIndices.map(i => (_jsx("code", { className: "mx-0.5 rounded bg-green-100 px-1.5 py-0.5 font-mono text-green-800", children: `{${i}}` }, i)))] }) }))] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-indigo-100", children: _jsx(Type, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsxs(Label, { className: "text-base font-semibold text-gray-800", children: ["\u0110\u00E1p \u00E1n cho c\u00E1c ch\u1ED7 tr\u1ED1ng ", _jsx("span", { className: "text-red-500", children: "*" })] })] }), _jsxs("div", { className: "grid gap-6 lg:grid-cols-2", children: [_jsx("div", { className: "space-y-3", children: (placeholderIndices.length > 0 ? placeholderIndices : [0]).map((idx) => (_jsxs("div", { className: `rounded-xl border-2 p-4 transition-all ${answers[idx]
-                                                        ? 'border-green-200 bg-gradient-to-r from-green-50 to-emerald-50'
-                                                        : 'border-gray-200 bg-white'}`, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl font-mono font-bold transition-all ${answers[idx]
-                                                                        ? 'bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md'
-                                                                        : 'bg-indigo-100 text-indigo-700'}`, children: `{${idx}}` }), _jsx(Input, { value: answers[idx] || '', onChange: (e) => updateAnswer(idx, e.target.value), placeholder: `Đáp án cho {${idx}}`, className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${validationErrors.answers?.[idx] ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` })] }), validationErrors.answers?.[idx] && (_jsx("p", { className: "mt-2 ml-13 text-sm text-red-600", children: validationErrors.answers[idx] }))] }, idx))) }), showHints && (_jsxs("div", { className: "space-y-4 rounded-xl border-2 border-purple-200 bg-gradient-to-r from-purple-50 to-indigo-50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-purple-100", children: _jsx(ListChecks, { className: "h-3.5 w-3.5 text-purple-600" }) }), _jsxs(Label, { className: "text-base font-semibold text-gray-800", children: ["Danh s\u00E1ch t\u1EEB g\u1EE3i \u00FD ", _jsxs("span", { className: "text-sm font-normal text-gray-500", children: ["(", hints.length, " t\u1EEB)"] })] })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { value: newHint, onChange: (e) => setNewHint(e.target.value), placeholder: "Nh\u1EADp t\u1EEB g\u1EE3i \u00FD m\u1EDBi...", className: "flex-1 border-gray-200 bg-white", onKeyDown: (e) => {
+                                        }, placeholder: "V\u00ED d\u1EE5: He {0} 10 years old and she {1} 12.", rows: 3, className: `min-h-[100px] border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${validationErrors.question ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), validationErrors.question && (_jsx("p", { className: "text-sm text-red-600", children: validationErrors.question })), placeholderIndices.length > 0 && (_jsx("div", { className: "flex items-center gap-2 rounded-lg bg-green-50 px-3 py-2", children: _jsxs("span", { className: "text-sm text-green-700", children: ["\u2713 \u0110\u00E3 ph\u00E1t hi\u1EC7n ", _jsx("strong", { children: placeholderIndices.length }), " ch\u1ED7 tr\u1ED1ng: ", placeholderIndices.map(i => (_jsx("code", { className: "mx-0.5 rounded bg-green-100 px-1.5 py-0.5 font-mono text-green-800", children: `{${i}}` }, i)))] }) }))] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-indigo-100", children: _jsx(Type, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsxs(Label, { className: "text-base font-semibold text-gray-800", children: ["\u0110\u00E1p \u00E1n cho c\u00E1c ch\u1ED7 tr\u1ED1ng ", _jsx("span", { className: "text-red-500", children: "*" })] })] }), _jsxs("div", { className: "grid gap-6 lg:grid-cols-2", children: [_jsx("div", { className: "space-y-3", children: (placeholderIndices.length > 0 ? placeholderIndices : [0]).map((idx) => {
+                                                    const blankAlts = answers[idx]?.length ? answers[idx] : [''];
+                                                    const hasAnswer = blankHasAnswer(blankAlts);
+                                                    return (_jsxs("div", { className: `rounded-xl border-2 p-4 transition-all ${hasAnswer
+                                                            ? 'border-green-200 bg-gradient-to-r from-green-50 to-emerald-50'
+                                                            : 'border-gray-200 bg-white'}`, children: [_jsxs("div", { className: "mb-3 flex items-center gap-3", children: [_jsx("div", { className: `flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl font-mono font-bold transition-all ${hasAnswer
+                                                                            ? 'bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md'
+                                                                            : 'bg-indigo-100 text-indigo-700'}`, children: `{${idx}}` }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("p", { className: "text-sm font-medium text-gray-700", children: ["Ch\u1ED7 tr\u1ED1ng ", idx + 1] }), _jsx("p", { className: "text-xs text-gray-500", children: "C\u00F3 th\u1EC3 th\u00EAm nhi\u1EC1u \u0111\u00E1p \u00E1n \u0111\u00FAng t\u01B0\u01A1ng \u0111\u01B0\u01A1ng" })] })] }), _jsx("div", { className: "space-y-2", children: blankAlts.map((alt, altIdx) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { value: alt, onChange: (e) => updateBlankAnswer(idx, altIdx, e.target.value), placeholder: altIdx === 0 ? `Đáp án chính cho {${idx}}` : `Đáp án thay thế ${altIdx + 1}`, className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${validationErrors.answers?.[idx] ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), blankAlts.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => removeBlankAlternative(idx, altIdx), className: "h-9 w-9 flex-shrink-0 text-red-500 hover:bg-red-50 hover:text-red-600", title: "X\u00F3a \u0111\u00E1p \u00E1n n\u00E0y", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }, altIdx))) }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => addBlankAlternative(idx), className: "mt-2 gap-1.5 border-dashed border-indigo-200 text-indigo-600 hover:bg-indigo-50", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm \u0111\u00E1p \u00E1n \u0111\u00FAng"] }), validationErrors.answers?.[idx] && (_jsx("p", { className: "mt-2 text-sm text-red-600", children: validationErrors.answers[idx] }))] }, idx));
+                                                }) }), showHints && (_jsxs("div", { className: "space-y-4 rounded-xl border-2 border-purple-200 bg-gradient-to-r from-purple-50 to-indigo-50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-purple-100", children: _jsx(ListChecks, { className: "h-3.5 w-3.5 text-purple-600" }) }), _jsxs(Label, { className: "text-base font-semibold text-gray-800", children: ["Danh s\u00E1ch t\u1EEB g\u1EE3i \u00FD ", _jsxs("span", { className: "text-sm font-normal text-gray-500", children: ["(", hints.length, " t\u1EEB)"] })] })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { value: newHint, onChange: (e) => setNewHint(e.target.value), placeholder: "Nh\u1EADp t\u1EEB g\u1EE3i \u00FD m\u1EDBi...", className: "flex-1 border-gray-200 bg-white", onKeyDown: (e) => {
                                                                     if (e.key === 'Enter' && newHint.trim()) {
                                                                         e.preventDefault();
                                                                         if (!hints.includes(newHint.trim())) {
@@ -457,7 +430,7 @@ function FillInBlankCreatorContent({ initialData, onSave, onCancel, onChange, ex
                                                                     }
                                                                 }, disabled: !newHint.trim(), className: "gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm"] })] }), hints.length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-2", children: hints.map((word, index) => (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-purple-200 bg-white px-3 py-2 shadow-sm transition-all hover:border-purple-300 hover:shadow", children: [_jsx("span", { className: "text-sm font-medium text-gray-700", children: word }), _jsx("button", { type: "button", onClick: () => {
                                                                         setHints(hints.filter((_, i) => i !== index));
-                                                                    }, className: "rounded-full p-0.5 text-gray-400 transition-colors hover:bg-red-100 hover:text-red-500", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }, index))) })) : (_jsx("p", { className: "text-center text-sm text-gray-500 italic", children: "Ch\u01B0a c\u00F3 t\u1EEB g\u1EE3i \u00FD n\u00E0o. Th\u00EAm t\u1EEB \u0111\u1EC3 hi\u1EC3n th\u1ECB cho h\u1ECDc sinh." }))] }))] })] }), question && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2 text-xs font-semibold text-gray-600", children: [_jsx(Eye, { className: "h-3.5 w-3.5" }), "Xem tr\u01B0\u1EDBc c\u00E2u ho\u00E0n ch\u1EC9nh"] }), _jsx("p", { className: "text-sm text-gray-700", children: getPreviewText() })] })), _jsxs("div", { className: "flex items-center justify-between rounded-xl border-2 border-gray-200 bg-white p-4 transition-all hover:border-gray-300", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gray-100", children: _jsx(ToggleLeft, { className: "h-4 w-4 text-gray-600" }) }), _jsxs("div", { className: "space-y-0.5", children: [_jsx(Label, { htmlFor: "case-sensitive", className: "font-semibold text-gray-800", children: "Ph\u00E2n bi\u1EC7t hoa/th\u01B0\u1EDDng" }), _jsx("p", { className: "text-sm text-gray-500", children: "B\u1EADt n\u1EBFu \u0111\u00E1p \u00E1n c\u1EA7n ph\u00E2n bi\u1EC7t ch\u1EEF hoa/th\u01B0\u1EDDng" })] })] }), _jsx(Switch, { id: "case-sensitive", checked: caseSensitive, onCheckedChange: setCaseSensitive })] }), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100", children: _jsx("span", { className: "text-lg", children: "\u274C" }) }), _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] })] }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-3.5 w-3.5 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-xs text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { className: "px-4 pb-4", children: _jsx(Textarea, { id: "explanation", value: explanation, onChange: (e) => setExplanation(e.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none" }) })] })] }));
+                                                                    }, className: "rounded-full p-0.5 text-gray-400 transition-colors hover:bg-red-100 hover:text-red-500", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }, index))) })) : (_jsx("p", { className: "text-center text-sm text-gray-500 italic", children: "Ch\u01B0a c\u00F3 t\u1EEB g\u1EE3i \u00FD n\u00E0o. Th\u00EAm t\u1EEB \u0111\u1EC3 hi\u1EC3n th\u1ECB cho h\u1ECDc sinh." }))] }))] })] }), question && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2 text-xs font-semibold text-gray-600", children: [_jsx(Eye, { className: "h-3.5 w-3.5" }), "Xem tr\u01B0\u1EDBc c\u00E2u ho\u00E0n ch\u1EC9nh"] }), _jsx("p", { className: "text-sm text-gray-700", children: getPreviewText() })] })), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100", children: _jsx("span", { className: "text-lg", children: "\u274C" }) }), _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] })] }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-3.5 w-3.5 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-xs text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { className: "px-4 pb-4", children: _jsx(Textarea, { id: "explanation", value: explanation, onChange: (e) => setExplanation(e.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none" }) })] })] }));
 }
 export function FillInBlankCreator(props) {
     return _jsx(FillInBlankCreatorContent, { ...props });

package/dist/components/questions/types/fill-in-blank/answer-utils.d.ts

@@ -0,0 +1,34 @@
+/**
+ * FILL_IN_BLANK helpers for the authoring UI.
+ *
+ * Parsing and answer matching live in `@/shared/lib/utils/fill-in-blank` so the
+ * creator, the exam player and the review screen can never drift apart. The extra
+ * helpers here only exist because the editor needs empty slots (`['']`) to render
+ * inputs, while grading drops empty alternatives.
+ *
+ * Canonical schema per blank: string[] (equivalent correct answers)
+ * Full answers: string[][]  e.g. [["is", "'s"], ["are"]]
+ * Legacy shapes accepted when loading: string[] and plain string.
+ */
+import { extractPlaceholderIndices, formatAcceptedAnswers, getPrimaryAnswer } from '../../../../shared/lib/utils/fill-in-blank';
+export { extractPlaceholderIndices };
+export type FillInBlankAnswers = string[][];
+/** Normalize one blank's correct value into a list of alternatives (never empty). */
+export declare function normalizeBlankAnswers(value: unknown): string[];
+/** Get maximum placeholder index from question text, or -1 if no placeholders */
+export declare function getMaxPlaceholderIndex(question: string): number;
+/**
+ * Normalize full answers payload into canonical string[][], padded to
+ * `requiredLength` so every placeholder gets an editable slot.
+ */
+export declare function normalizeFillInBlankAnswers(raw: unknown, requiredLength?: number): FillInBlankAnswers;
+/** True when a blank has at least one non-empty correct answer. */
+export declare function blankHasAnswer(blankAnswers: string[] | undefined): boolean;
+/** Primary (first) correct answer for a blank — used for auto-fill / example display. */
+export declare const getPrimaryBlankAnswer: typeof getPrimaryAnswer;
+/** Join all alternatives for display, e.g. "is / 's". */
+export declare const formatBlankAnswersDisplay: typeof formatAcceptedAnswers;
+/** Compare student input against any accepted alternative. */
+export declare const isBlankInputCorrect: (userInput: string | undefined, blankAnswers: string[] | undefined) => boolean;
+/** Compact answers for API save: drop empty alternatives, keep at least one slot per blank. */
+export declare function compactFillInBlankAnswers(answers: FillInBlankAnswers, requiredLength?: number): FillInBlankAnswers;

package/dist/components/questions/types/fill-in-blank/answer-utils.js

@@ -0,0 +1,58 @@
+/**
+ * FILL_IN_BLANK helpers for the authoring UI.
+ *
+ * Parsing and answer matching live in `@/shared/lib/utils/fill-in-blank` so the
+ * creator, the exam player and the review screen can never drift apart. The extra
+ * helpers here only exist because the editor needs empty slots (`['']`) to render
+ * inputs, while grading drops empty alternatives.
+ *
+ * Canonical schema per blank: string[] (equivalent correct answers)
+ * Full answers: string[][]  e.g. [["is", "'s"], ["are"]]
+ * Legacy shapes accepted when loading: string[] and plain string.
+ */
+import { extractPlaceholderIndices, formatAcceptedAnswers, getPrimaryAnswer, isBlankCorrect, } from '../../../../shared/lib/utils/fill-in-blank';
+export { extractPlaceholderIndices };
+/** Normalize one blank's correct value into a list of alternatives (never empty). */
+export function normalizeBlankAnswers(value) {
+    const list = Array.isArray(value) ? value : [value];
+    const cleaned = list.map((item) => String(item ?? '').trim()).filter(Boolean);
+    return cleaned.length > 0 ? cleaned : [''];
+}
+/** Get maximum placeholder index from question text, or -1 if no placeholders */
+export function getMaxPlaceholderIndex(question) {
+    const indices = extractPlaceholderIndices(question);
+    return indices.length > 0 ? Math.max(...indices) : -1;
+}
+/**
+ * Normalize full answers payload into canonical string[][], padded to
+ * `requiredLength` so every placeholder gets an editable slot.
+ */
+export function normalizeFillInBlankAnswers(raw, requiredLength) {
+    let result = Array.isArray(raw)
+        ? raw.map((item) => normalizeBlankAnswers(item))
+        : [];
+    if (typeof requiredLength === 'number' && requiredLength > 0) {
+        result = result.slice(0, requiredLength);
+        while (result.length < requiredLength) {
+            result.push(['']);
+        }
+    }
+    return result;
+}
+/** True when a blank has at least one non-empty correct answer. */
+export function blankHasAnswer(blankAnswers) {
+    return Boolean(blankAnswers?.some((a) => a.trim().length > 0));
+}
+/** Primary (first) correct answer for a blank — used for auto-fill / example display. */
+export const getPrimaryBlankAnswer = getPrimaryAnswer;
+/** Join all alternatives for display, e.g. "is / 's". */
+export const formatBlankAnswersDisplay = formatAcceptedAnswers;
+/** Compare student input against any accepted alternative. */
+export const isBlankInputCorrect = (userInput, blankAnswers) => isBlankCorrect(userInput ?? '', blankAnswers);
+/** Compact answers for API save: drop empty alternatives, keep at least one slot per blank. */
+export function compactFillInBlankAnswers(answers, requiredLength) {
+    const list = typeof requiredLength === 'number' && requiredLength > 0
+        ? answers.slice(0, requiredLength)
+        : answers;
+    return list.map((blank) => normalizeBlankAnswers(blank));
+}