@tinyweb_dev/oe-exam-sdk 1.0.8 → 1.0.10

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

@@ -4,18 +4,18 @@ import { useEffect, useRef, useState } from 'react';
 import { Button } from '../../../../components/ui/button';
 import { Label } from '../../../../components/ui/label';
 import { Input } from '../../../../components/ui/input';
-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 { RichTextEditor } from '../../../../components/shared/RichTextEditor';
 import { useDebouncedCallback } from '../../../../shared/lib/hooks';
-import { HelpCircle, Plus, Star, Trash2 } from 'lucide-react';
+import { isRichTextEmpty } from '../../../../shared/lib/rich-text';
+import { BookOpen, HelpCircle, Plus, Star, Trash2 } from 'lucide-react';
 import { CompactCreatorHeader, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
 import { FillInBlankGroupClient } from './FillInBlankGroupClient';
 import { FillInBlankGroupMediaField } from './FillInBlankGroupMediaField';
 import { createEmptyFillInBlankGroupItem } from './map-fill-in-blank-group-data';
-import { blankSlotCount, extractPlaceholderIndices, fromFillInBlankImageUrls, hasAnyBlankOptions, joinSlashAnswers, normalizeAnswersMatrix, normalizeWordBank, parseSlashAnswers, toFillInBlankImageUrls, } from './blank-utils';
+import { blankSlotCount, extractPlaceholderIndices, fromFillInBlankImageUrls, hasAnyBlankOptions, normalizeAnswersMatrix, normalizeWordBank, parseSlashAnswers, toFillInBlankImageUrls, } from './blank-utils';
 import { FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION } from '../../_shared/types/fill-in-blank-group.type';
 function parsePointsValue(raw, allowZero = false) {
     if (raw === '')
@@ -26,16 +26,69 @@ function parsePointsValue(raw, allowZero = false) {
     const min = allowZero ? 0 : 1;
     return Math.max(min, parsed);
 }
+function padEditorWordBank(raw, requiredLength) {
+    if (requiredLength <= 0 || !Array.isArray(raw))
+        return undefined;
+    const next = raw.slice(0, requiredLength);
+    while (next.length < requiredLength)
+        next.push(null);
+    return next.some((entry) => entry && entry.options.length > 0) ? next : undefined;
+}
+function editorOptionSlots(options) {
+    if (!options || options.length === 0)
+        return ['', ''];
+    if (options.length === 1)
+        return [options[0], ''];
+    return options;
+}
+function editorAnswerSlots(alts) {
+    if (!alts || alts.length === 0)
+        return [''];
+    return alts.map((alt) => (alt == null ? '' : String(alt)));
+}
+function writeBlankAnswers(item, blankIndex, alts) {
+    const requiredLength = blankSlotCount(item.question);
+    const next = [...item.answers];
+    while (next.length < requiredLength)
+        next.push(['']);
+    next[blankIndex] = alts.length > 0 ? alts : [''];
+    return next;
+}
+function blankHasOptions(options) {
+    return Boolean(options?.some((option) => option.trim()));
+}
+function optionEditorKey(itemIndex, blankIndex) {
+    return `${itemIndex}-${blankIndex}`;
+}
+function writeBlankOptions(item, blankIndex, options) {
+    const requiredLength = blankSlotCount(item.question);
+    const next = [...(item.wordBank || [])];
+    while (next.length < requiredLength)
+        next.push(null);
+    next[blankIndex] = { options };
+    return next;
+}
+function clearBlankOptions(item, blankIndex) {
+    const requiredLength = blankSlotCount(item.question);
+    const next = [...(item.wordBank || [])];
+    while (next.length < requiredLength)
+        next.push(null);
+    next[blankIndex] = null;
+    return next.some((entry) => entry && entry.options.some((option) => option.trim()))
+        ? next
+        : undefined;
+}
 function syncItemAnswers(item) {
     const indices = extractPlaceholderIndices(item.question || '');
     const requiredLength = blankSlotCount(item.question || '');
-    const wordBank = normalizeWordBank(item.wordBank, requiredLength);
+    const wordBank = padEditorWordBank(item.wordBank, requiredLength);
+    const rawAnswers = Array.isArray(item.answers) ? item.answers : [];
     return {
         ...item,
-        answers: normalizeAnswersMatrix(item.answers, requiredLength).map((alts, index) => {
+        answers: Array.from({ length: requiredLength }, (_, index) => {
             if (!indices.includes(index))
                 return [];
-            return alts.length > 0 ? alts : [''];
+            return editorAnswerSlots(rawAnswers[index]);
         }),
         ...(wordBank ? { wordBank } : { wordBank: undefined }),
     };
@@ -66,6 +119,8 @@ export function FillInBlankGroupCreator({ initialData, onChange, externalErrors,
     const [items, setItems] = useState(() => normalizeItems(initialData?.items));
     const [explanation, setExplanation] = useState(initialData?.explanation || '');
     const [isClientMode, setIsClientMode] = useState(false);
+    const [showPassage, setShowPassage] = useState(!isRichTextEmpty(initialData?.passage));
+    const [openOptionKeys, setOpenOptionKeys] = useState(() => new Set());
     const [errors, setErrors] = useState([]);
     const onChangeRef = useRef(onChange);
     const previousPayloadRef = useRef('');
@@ -84,7 +139,11 @@ export function FillInBlankGroupCreator({ initialData, onChange, externalErrors,
             showHints: nextShowHints,
             hints: parseHints(nextHintsText),
             ...(viewMode ? { viewMode } : {}),
-            items: nextItems,
+            items: nextItems.map((item) => ({
+                ...item,
+                answers: normalizeAnswersMatrix(item.answers, blankSlotCount(item.question)),
+                wordBank: normalizeWordBank(item.wordBank, blankSlotCount(item.question)),
+            })),
             explanation: nextExplanation,
             points: sumPoints(nextItems),
         };
@@ -122,7 +181,9 @@ export function FillInBlankGroupCreator({ initialData, onChange, externalErrors,
                 if (!alts.some((alt) => alt.trim())) {
                     nextErrors.push(`Câu ${index + 1}: Blank {${blankIndex}} cần ít nhất một đáp án.`);
                 }
-                const options = item.wordBank?.[blankIndex]?.options || [];
+                const options = (item.wordBank?.[blankIndex]?.options || [])
+                    .map((option) => option.trim())
+                    .filter(Boolean);
                 if (options.length >= 2) {
                     const missing = alts
                         .map((alt) => alt.trim())
@@ -172,23 +233,45 @@ export function FillInBlankGroupCreator({ initialData, onChange, externalErrors,
     if (isClientMode) {
         return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _jsx(FillInBlankGroupClient, { questionData: currentPayload })] }));
     }
-    return (_jsxs("div", { className: "space-y-3", children: [displayErrors.length > 0 && (_jsx("div", { className: "rounded-md border border-red-200 bg-red-50 p-2 text-xs text-red-700", children: _jsx("ul", { className: "list-disc space-y-1 pl-4", children: displayErrors.map((err, i) => (_jsx("li", { children: err }, i))) }) })), _jsxs(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(HelpCircle, { className: "h-3.5 w-3.5" }), title: "\u0110i\u1EC1n ch\u1ED7 tr\u1ED1ng (Nh\u00F3m)", preview: { onClick: () => setIsClientMode(true) } }), children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "instruction", className: "text-sm font-semibold text-gray-800", children: "H\u01B0\u1EDBng d\u1EABn b\u00E0i l\u00E0m" }), _jsx(Input, { id: "instruction", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION, className: "h-10 border-gray-200 bg-white" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-sm font-semibold text-gray-800", children: "N\u1ED9i dung b\u00E0i \u0111\u1ECDc (Passage)" }), _jsx(RichTextEditor, { value: passage, onChange: setPassage, minHeightClassName: "min-h-[160px]" })] }), _jsxs("div", { className: "grid gap-2.5 md:grid-cols-2", children: [_jsx(FillInBlankGroupMediaField, { id: "fib-group-audio", label: "Audio chung (optional)", accept: "audio/*", value: audioUrl, onChange: setAudioUrl }), _jsx(FillInBlankGroupMediaField, { id: "fib-group-image", label: "\u1EA2nh chung (optional)", accept: "image/*", value: toFillInBlankImageUrls(imageUrl)[0] || '', onChange: setImageUrl })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "show-hints", checked: showHints, onCheckedChange: setShowHints }), _jsx(Label, { htmlFor: "show-hints", children: "Hi\u1EC7n h\u1ED9p t\u1EEB g\u1EE3i \u00FD chung" })] }), showHints && (_jsx(Input, { value: hintsText, onChange: (e) => setHintsText(e.target.value), placeholder: "am / is / are", className: "h-10 border-gray-200 bg-white" }))] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-sm", children: [_jsx(CardHeader, { className: "px-3 py-2", children: _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs(CardTitle, { className: "text-sm font-semibold text-gray-800", children: ["Danh s\u00E1ch c\u00E2u (", items.length, ")"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addItem, className: "h-8 gap-1.5 px-2.5 text-xs", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm c\u00E2u"] })] }) }), _jsxs(CardContent, { className: "space-y-2.5 px-3 pb-3", children: [items.map((item, index) => (_jsxs("div", { className: "space-y-2.5 rounded-md border border-gray-200 bg-white px-3 py-2.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("span", { className: "flex items-center gap-2 text-sm font-medium text-gray-700", children: [_jsx("span", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-blue-100 text-xs font-semibold text-blue-700", children: item.questionNumber || index + 1 }), "C\u00E2u ", index + 1] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: `example-${index}`, checked: item.isExample || false, onCheckedChange: (checked) => updateItem(index, { isExample: checked, points: checked ? 0 : 1 }) }), _jsxs(Label, { htmlFor: `example-${index}`, className: "flex cursor-pointer items-center gap-1 text-xs", children: [_jsx(Star, { className: "h-3 w-3 text-amber-500" }), "Example"] })] }), !item.isExample && (_jsx("div", { className: "w-24", children: _jsx(PointsInput, { value: item.points, allowZero: true, onChange: (event) => updateItem(index, {
+    return (_jsxs("div", { className: "space-y-3", children: [displayErrors.length > 0 && (_jsx("div", { className: "rounded-md border border-red-200 bg-red-50 p-2 text-xs text-red-700", children: _jsx("ul", { className: "list-disc space-y-1 pl-4", children: displayErrors.map((err, i) => (_jsx("li", { children: err }, i))) }) })), _jsxs(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(HelpCircle, { className: "h-3.5 w-3.5" }), title: "\u0110i\u1EC1n ch\u1ED7 tr\u1ED1ng (Nh\u00F3m)", preview: { onClick: () => setIsClientMode(true) } }), children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "instruction", className: "text-sm font-semibold text-gray-800", children: "H\u01B0\u1EDBng d\u1EABn b\u00E0i l\u00E0m" }), _jsx(Input, { id: "instruction", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION, className: "h-10 border-gray-200 bg-white" })] }), showPassage ? (_jsxs("div", { className: "relative space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx(Label, { className: "text-sm font-semibold text-gray-800", children: "N\u1ED9i dung b\u00E0i \u0111\u1ECDc" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setShowPassage(false), className: "h-7 px-2 text-xs text-gray-500 hover:text-gray-700", children: "\u1EA8n" })] }), _jsx(RichTextEditor, { value: passage, onChange: setPassage, minHeightClassName: "min-h-[160px]" })] })) : (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setShowPassage(true), className: "h-8 gap-1.5 border-indigo-200 px-2.5 text-xs text-indigo-700 hover:bg-indigo-50 hover:text-indigo-800", children: [_jsx(BookOpen, { className: "h-3.5 w-3.5" }), isRichTextEmpty(passage) ? 'Thêm bài đọc' : 'Hiện bài đọc'] })), _jsxs("div", { className: "grid gap-2.5 md:grid-cols-2", children: [_jsx(FillInBlankGroupMediaField, { id: "fib-group-audio", label: "Audio chung (optional)", accept: "audio/*", value: audioUrl, onChange: setAudioUrl }), _jsx(FillInBlankGroupMediaField, { id: "fib-group-image", label: "\u1EA2nh chung (optional)", accept: "image/*", value: toFillInBlankImageUrls(imageUrl)[0] || '', onChange: setImageUrl })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "show-hints", checked: showHints, onCheckedChange: setShowHints }), _jsx(Label, { htmlFor: "show-hints", children: "Hi\u1EC7n h\u1ED9p t\u1EEB g\u1EE3i \u00FD chung" })] }), showHints && (_jsx(Input, { value: hintsText, onChange: (e) => setHintsText(e.target.value), placeholder: "am / is / are", className: "h-10 border-gray-200 bg-white" }))] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-sm", children: [_jsx(CardHeader, { className: "px-3 py-2", children: _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs(CardTitle, { className: "text-sm font-semibold text-gray-800", children: ["Danh s\u00E1ch c\u00E2u (", items.length, ")"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addItem, className: "h-8 gap-1.5 px-2.5 text-xs", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm c\u00E2u"] })] }) }), _jsxs(CardContent, { className: "space-y-2.5 px-3 pb-3", children: [items.map((item, index) => (_jsxs("div", { className: "space-y-2.5 rounded-md border border-gray-200 bg-white px-3 py-2.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("span", { className: "flex items-center gap-2 text-sm font-medium text-gray-700", children: [_jsx("span", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-blue-100 text-xs font-semibold text-blue-700", children: item.questionNumber || index + 1 }), "C\u00E2u ", index + 1] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: `example-${index}`, checked: item.isExample || false, onCheckedChange: (checked) => updateItem(index, { isExample: checked, points: checked ? 0 : 1 }) }), _jsxs(Label, { htmlFor: `example-${index}`, className: "flex cursor-pointer items-center gap-1 text-xs", children: [_jsx(Star, { className: "h-3 w-3 text-amber-500" }), "Example"] })] }), !item.isExample && (_jsx("div", { className: "w-24", children: _jsx(PointsInput, { value: item.points, allowZero: true, onChange: (event) => updateItem(index, {
                                                                 points: parsePointsValue(event.target.value, true),
-                                                            }) }) })), items.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => removeItem(index), className: "h-7 w-7 text-red-500 hover:bg-red-50", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] })] }), _jsxs("div", { children: [_jsxs(Label, { htmlFor: `question-${index}`, children: ["Stem (d\u00F9ng ", '{0}', ", ", '{1}', "...)"] }), _jsx(Textarea, { id: `question-${index}`, value: item.question, onChange: (e) => updateItem(index, { question: e.target.value }), placeholder: "{0}", className: "mt-1 min-h-[56px] border-gray-200 bg-white" })] }), extractPlaceholderIndices(item.question).map((blankIndex) => (_jsxs("div", { className: "grid gap-2.5 md:grid-cols-2", children: [_jsxs("div", { children: [_jsxs(Label, { htmlFor: `answer-${index}-${blankIndex}`, children: ["\u0110\u00E1p \u00E1n blank ", '{' + blankIndex + '}', " (c\u00E1ch nhau b\u1EDFi /)"] }), _jsx(Input, { id: `answer-${index}-${blankIndex}`, value: joinSlashAnswers(item.answers[blankIndex]), onChange: (e) => {
-                                                            const next = [...item.answers];
-                                                            next[blankIndex] = parseSlashAnswers(e.target.value);
-                                                            updateItem(index, { answers: next });
-                                                        }, placeholder: "is / 's", className: "mt-1 h-10 border-gray-200 bg-white" })] }), _jsxs("div", { children: [_jsxs(Label, { htmlFor: `options-${index}-${blankIndex}`, children: ["Options blank ", '{' + blankIndex + '}', " (dropdown, c\u00E1ch nhau /)"] }), _jsx(Input, { id: `options-${index}-${blankIndex}`, value: joinSlashAnswers(item.wordBank?.[blankIndex]?.options), onChange: (e) => {
-                                                            const requiredLength = blankSlotCount(item.question);
-                                                            const next = [...(item.wordBank || [])];
-                                                            while (next.length < requiredLength)
-                                                                next.push(null);
-                                                            const options = parseSlashAnswers(e.target.value);
-                                                            next[blankIndex] = options.length >= 2 ? { options } : null;
-                                                            updateItem(index, {
-                                                                wordBank: next.some((entry) => entry && entry.options.length >= 2)
-                                                                    ? next
-                                                                    : undefined,
-                                                            });
-                                                        }, placeholder: "can / can't", className: "mt-1 h-10 border-gray-200 bg-white" })] })] }, blankIndex))), _jsxs("div", { className: "grid gap-2.5 md:grid-cols-2", children: [_jsx(FillInBlankGroupMediaField, { id: `fib-item-image-${index}`, label: "\u1EA2nh item (optional)", accept: "image/*", value: Array.isArray(item.imageUrl) ? (item.imageUrl[0] || '') : (item.imageUrl || ''), onChange: (url) => updateItem(index, { imageUrl: url }) }), !audioUrl && (_jsx(FillInBlankGroupMediaField, { id: `fib-item-audio-${index}`, label: "Audio item (khi kh\u00F4ng c\u00F3 audio nh\u00F3m)", accept: "audio/*", value: item.audioUrl || '', onChange: (url) => updateItem(index, { audioUrl: url }) }))] })] }, index))), _jsx(CompactExplanationToggle, { value: explanation, onValueChange: setExplanation, defaultVisible: Boolean(initialData?.explanation) })] })] })] }));
+                                                            }) }) })), items.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => removeItem(index), className: "h-7 w-7 text-red-500 hover:bg-red-50", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] })] }), _jsxs("div", { children: [_jsxs(Label, { htmlFor: `question-${index}`, children: ["N\u1ED9i dung c\u00E2u (d\u00F9ng ", '{0}', ", ", '{1}', "...)"] }), _jsx(Input, { id: `question-${index}`, value: item.question, onChange: (e) => updateItem(index, { question: e.target.value }), placeholder: "{0}", className: "mt-1 h-10 border-gray-200 bg-white" })] }), _jsx("div", { className: "grid grid-cols-2 gap-2.5", children: extractPlaceholderIndices(item.question).map((blankIndex) => {
+                                            const optionKey = optionEditorKey(index, blankIndex);
+                                            const showOptions = openOptionKeys.has(optionKey);
+                                            const slots = editorOptionSlots(item.wordBank?.[blankIndex]?.options);
+                                            const answerSlots = editorAnswerSlots(item.answers[blankIndex]);
+                                            return (_jsxs("div", { className: "min-w-0 space-y-2 rounded-md border border-gray-100 bg-slate-50/70 px-2.5 py-2", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { children: ["\u0110\u00E1p \u00E1n ", '{' + blankIndex + '}'] }), answerSlots.map((alt, altIndex) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { id: `answer-${index}-${blankIndex}-${altIndex}`, value: alt, onChange: (e) => {
+                                                                            const next = [...answerSlots];
+                                                                            next[altIndex] = e.target.value;
+                                                                            updateItem(index, { answers: writeBlankAnswers(item, blankIndex, next) });
+                                                                        }, placeholder: `Đáp án ${altIndex + 1}`, className: "h-10 min-w-0 border-gray-200 bg-white" }), answerSlots.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => updateItem(index, {
+                                                                            answers: writeBlankAnswers(item, blankIndex, answerSlots.filter((_, slotIndex) => slotIndex !== altIndex)),
+                                                                        }), className: "h-7 w-7 shrink-0 text-red-500 hover:bg-red-50", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }, `${index}-${blankIndex}-${altIndex}`))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => updateItem(index, {
+                                                                    answers: writeBlankAnswers(item, blankIndex, [...answerSlots, '']),
+                                                                }), className: "h-8 gap-1.5 px-2.5 text-xs", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] })] }), showOptions ? (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs(Label, { children: ["L\u1EF1a ch\u1ECDn ", '{' + blankIndex + '}'] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
+                                                                            setOpenOptionKeys((prev) => {
+                                                                                const next = new Set(prev);
+                                                                                next.delete(optionKey);
+                                                                                return next;
+                                                                            });
+                                                                            if (!blankHasOptions(item.wordBank?.[blankIndex]?.options)) {
+                                                                                updateItem(index, { wordBank: clearBlankOptions(item, blankIndex) });
+                                                                            }
+                                                                        }, className: "h-7 px-2 text-xs text-gray-500 hover:text-gray-700", children: "\u1EA8n" })] }), _jsx("p", { className: "text-xs text-slate-500", children: "M\u1ED7i l\u1EF1a ch\u1ECDn m\u1ED9t \u00F4. C\u1EA7n \u00EDt nh\u1EA5t 2 \u0111\u1EC3 hi\u1EC7n dropdown." }), slots.map((option, optionIndex) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { id: `options-${index}-${blankIndex}-${optionIndex}`, value: option, onChange: (e) => {
+                                                                            const next = [...slots];
+                                                                            next[optionIndex] = e.target.value;
+                                                                            updateItem(index, { wordBank: writeBlankOptions(item, blankIndex, next) });
+                                                                        }, placeholder: `Lựa chọn ${optionIndex + 1}`, className: "h-10 min-w-0 border-gray-200 bg-white" }), slots.length > 2 && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => updateItem(index, {
+                                                                            wordBank: writeBlankOptions(item, blankIndex, slots.filter((_, slotIndex) => slotIndex !== optionIndex)),
+                                                                        }), className: "h-7 w-7 shrink-0 text-red-500 hover:bg-red-50", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }, `${index}-${blankIndex}-${optionIndex}`))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => updateItem(index, {
+                                                                    wordBank: writeBlankOptions(item, blankIndex, [...slots, '']),
+                                                                }), className: "h-8 gap-1.5 px-2.5 text-xs", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm l\u1EF1a ch\u1ECDn"] })] })) : (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => {
+                                                            setOpenOptionKeys((prev) => new Set(prev).add(optionKey));
+                                                            if (!item.wordBank?.[blankIndex]?.options?.length) {
+                                                                updateItem(index, { wordBank: writeBlankOptions(item, blankIndex, ['', '']) });
+                                                            }
+                                                        }, className: "h-8 gap-1.5 border-indigo-200 px-2.5 text-xs text-indigo-700 hover:bg-indigo-50 hover:text-indigo-800", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), blankHasOptions(item.wordBank?.[blankIndex]?.options)
+                                                                ? 'Hiện lựa chọn'
+                                                                : 'Thêm lựa chọn'] }))] }, blankIndex));
+                                        }) }), _jsxs("div", { className: "grid gap-2.5 md:grid-cols-2", children: [_jsx(FillInBlankGroupMediaField, { id: `fib-item-image-${index}`, label: "\u1EA2nh item (optional)", accept: "image/*", value: Array.isArray(item.imageUrl) ? (item.imageUrl[0] || '') : (item.imageUrl || ''), onChange: (url) => updateItem(index, { imageUrl: url }) }), !audioUrl && (_jsx(FillInBlankGroupMediaField, { id: `fib-item-audio-${index}`, label: "Audio item (khi kh\u00F4ng c\u00F3 audio nh\u00F3m)", accept: "audio/*", value: item.audioUrl || '', onChange: (url) => updateItem(index, { audioUrl: url }) }))] })] }, index))), _jsx(CompactExplanationToggle, { value: explanation, onValueChange: setExplanation, defaultVisible: Boolean(initialData?.explanation) })] })] })] }));
 }

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

@@ -1,30 +1,40 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Button } from '../../../../components/ui/button';
 import { FileUpload } from '../../../../components/ui/file-upload';
 import { ImagePreview } from '../../../../components/ui/image-preview';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-import { Trash2 } from 'lucide-react';
+function isDisplayableUrl(value) {
+    return (value.startsWith('http://') ||
+        value.startsWith('https://') ||
+        value.startsWith('blob:') ||
+        value.startsWith('data:'));
+}
+function toStorageKey(value) {
+    const trimmed = value.trim();
+    if (!trimmed)
+        return '';
+    if (isDisplayableUrl(trimmed))
+        return trimmed;
+    if (trimmed.startsWith('/images/') || trimmed.startsWith('/_next/')) {
+        return trimmed;
+    }
+    return trimmed.replace(/^\/+/, '');
+}
 function resolveDisplayUrl(fileUrl, previewOverride, fetchedPreviewUrl) {
     if (previewOverride)
         return previewOverride;
     if (fetchedPreviewUrl)
         return fetchedPreviewUrl;
-    if (fileUrl.startsWith('http') || fileUrl.startsWith('blob:'))
+    if (isDisplayableUrl(fileUrl))
         return fileUrl;
     return '';
 }
 export function FillInBlankGroupMediaField({ id, label, accept, value, onChange, }) {
     const [previewOverride, setPreviewOverride] = useState('');
-    const { previewUrl: fetchedPreviewUrl } = usePresignedFileUrl(value);
+    const storageKey = toStorageKey(value);
+    const { previewUrl: fetchedPreviewUrl, isLoading } = usePresignedFileUrl(storageKey);
     const displayUrl = resolveDisplayUrl(value, previewOverride, fetchedPreviewUrl);
     const isImage = accept === 'image/*';
-    return (_jsxs("div", { className: "space-y-2", children: [_jsx(FileUpload, { id: id, label: label, accept: accept, value: value, onChange: onChange, onPresignedUrlChange: setPreviewOverride, maxSize: accept === 'image/*' ? 5 : 20, placeholder: isImage ? 'Upload ảnh hoặc paste URL' : 'Upload audio hoặc paste URL', autoUpload: true, prefix: "questions" }), value && isImage && (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(ImagePreview, { src: displayUrl || value, alt: label, className: "h-20 w-20 rounded-md object-contain" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
-                            setPreviewOverride('');
-                            onChange('');
-                        }, className: "text-red-500 hover:bg-red-50", children: _jsx(Trash2, { className: "h-4 w-4" }) })] })), value && !isImage && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("audio", { controls: true, src: displayUrl || value, className: "h-8 max-w-full" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
-                            setPreviewOverride('');
-                            onChange('');
-                        }, className: "text-red-500 hover:bg-red-50", children: _jsx(Trash2, { className: "h-4 w-4" }) })] }))] }));
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(FileUpload, { id: id, label: label, accept: accept, value: value, onChange: onChange, onPresignedUrlChange: setPreviewOverride, maxSize: accept === 'image/*' ? 5 : 20, placeholder: isImage ? 'Upload ảnh hoặc paste URL' : 'Upload audio hoặc paste URL', autoUpload: true, prefix: "questions" }), value && isImage && (isLoading && !displayUrl ? (_jsx("div", { className: "h-20 w-20 animate-pulse rounded-md bg-slate-100" })) : (_jsx(ImagePreview, { src: displayUrl, alt: label, className: "h-20 w-20 rounded-md object-contain" }))), value && !isImage && (isLoading && !displayUrl ? (_jsx("div", { className: "h-8 w-48 animate-pulse rounded-md bg-slate-100" })) : (_jsx("audio", { controls: true, src: displayUrl, className: "h-8 max-w-full" })))] }));
 }

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

@@ -13,6 +13,7 @@ export declare function extractPlaceholderIndices(question: string): number[];
 export declare function blankSlotCount(question: string): number;
 export declare function normalizeBlankAlts(value: unknown): string[];
 export declare function normalizeAnswersMatrix(raw: unknown, requiredLength?: number): string[][];
+export declare function acceptedAnswerList(alts: string[] | undefined): string[];
 export declare function joinSlashAnswers(alts: string[] | undefined): string;
 export declare function parseSlashAnswers(text: string): string[];
 export declare function splitStem(question: string): FillBlankStemPart[];

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

@@ -47,8 +47,11 @@ export function normalizeAnswersMatrix(raw, requiredLength) {
     }
     return result;
 }
+export function acceptedAnswerList(alts) {
+    return (alts || []).map((item) => item.trim()).filter(Boolean);
+}
 export function joinSlashAnswers(alts) {
-    return (alts || []).map((item) => item.trim()).filter(Boolean).join(' / ');
+    return acceptedAnswerList(alts).join(' / ');
 }
 export function parseSlashAnswers(text) {
     return text

package/dist/components/questions/types/fill-missing-words-in-grid/FillMissingWordsInGridClient.js

@@ -6,6 +6,7 @@ import { Input } from '../../../../components/ui/input';
 import { Check, X, Grid3X3, Trophy, AlertCircle, Lightbulb } from 'lucide-react';
 import { toast } from 'sonner';
 import { cn } from '../../../../shared/lib/utils';
+import { KidQuestionCard } from '../../_shared/components/compact';
 function FillMissingWordsInGridClientContent({ questionData, onSubmit, isReviewMode = false, userAnswer = {}, explanation, }) {
     const { content, answer } = questionData;
     const { grid, rows, columns, disabledCells = [] } = content;
@@ -78,37 +79,37 @@ function FillMissingWordsInGridClientContent({ questionData, onSubmit, isReviewM
     }, [missingPositions, userAnswers, correctAnswers, caseSensitive]);
     const score = isReviewMode ? calculateScore() : null;
     const scorePercentage = score ? Math.round((score.correct / score.total) * 100) : 0;
-    return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-teal-500 to-cyan-600 text-white shadow-sm", children: _jsx(Grid3X3, { className: "h-5 w-5" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-base font-semibold text-gray-900", children: "\u0110i\u1EC1n t\u1EEB c\u00F2n thi\u1EBFu v\u00E0o b\u1EA3ng" }), _jsx("p", { className: "text-xs text-gray-500", children: "\u0110i\u1EC1n c\u00E1c t\u1EEB c\u00F2n thi\u1EBFu v\u00E0o c\u00E1c \u00F4 \u0111\u01B0\u1EE3c \u0111\u00E1nh d\u1EA5u m\u00E0u xanh" })] })] }), isReviewMode && score && (_jsxs("div", { className: cn('flex items-center gap-3 rounded-xl px-4 py-2', scorePercentage >= 80 ? 'bg-green-50 border border-green-200' :
-                            scorePercentage >= 50 ? 'bg-yellow-50 border border-yellow-200' :
-                                'bg-red-50 border border-red-200'), children: [_jsx(Trophy, { className: cn('h-5 w-5', scorePercentage >= 80 ? 'text-green-500' :
-                                    scorePercentage >= 50 ? 'text-yellow-500' :
-                                        'text-red-500') }), _jsxs("div", { className: "text-right", children: [_jsxs("div", { className: cn('text-lg font-bold', scorePercentage >= 80 ? 'text-green-600' :
-                                            scorePercentage >= 50 ? 'text-yellow-600' :
-                                                'text-red-600'), children: [score.correct, "/", score.total] }), _jsxs("div", { className: "text-xs text-gray-500", children: [scorePercentage, "% ch\u00EDnh x\u00E1c"] })] })] }))] }), _jsxs("div", { className: "p-3 space-y-3", children: [_jsx("div", { className: "overflow-x-auto rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100 p-4", children: _jsxs("div", { className: "inline-block min-w-full", children: [_jsxs("div", { className: "grid gap-1.5 mb-2", style: { gridTemplateColumns: `48px repeat(${columns}, minmax(80px, 1fr))` }, children: [_jsx("div", { className: "h-8" }), Array.from({ length: columns }, (_, i) => (_jsx("div", { className: "flex h-8 items-center justify-center rounded-lg bg-gradient-to-br from-gray-100 to-gray-200 text-xs font-bold text-gray-600 shadow-sm", children: i + 1 }, `col-header-${i}`)))] }), _jsx("div", { className: "grid gap-1.5", children: Array.from({ length: rows }, (_, rowIndex) => (_jsxs("div", { className: "grid gap-1.5", style: { gridTemplateColumns: `48px repeat(${columns}, minmax(80px, 1fr))` }, children: [_jsx("div", { className: "flex h-14 items-center justify-center rounded-lg bg-gradient-to-br from-gray-100 to-gray-200 text-xs font-bold text-gray-600 shadow-sm", children: rowIndex + 1 }), Array.from({ length: columns }, (_, colIndex) => {
-                                                const isMissing = isMissingCell(rowIndex, colIndex);
-                                                const isDisabled = isDisabledCell(rowIndex, colIndex);
-                                                const cellValue = grid[rowIndex]?.[colIndex] || '';
-                                                const position = `${rowIndex + 1}-${colIndex + 1}`;
-                                                const userValue = userAnswers[position] || '';
-                                                // Determine if answer is correct in review mode
-                                                const answerStatus = isReviewMode ? isAnswerCorrect(rowIndex, colIndex) : null;
-                                                return (_jsx("div", { className: cn('relative flex h-14 items-center justify-center rounded-lg border-2 transition-all', isDisabled && 'border-gray-300 bg-gray-200', isMissing && !isReviewMode && 'border-teal-400 bg-gradient-to-br from-teal-50 to-cyan-50 shadow-sm', isMissing && isReviewMode && answerStatus === true && 'border-green-400 bg-gradient-to-br from-green-50 to-emerald-50', isMissing && isReviewMode && answerStatus === false && 'border-red-400 bg-gradient-to-br from-red-50 to-rose-50', isMissing && isReviewMode && answerStatus === null && 'border-yellow-400 bg-gradient-to-br from-yellow-50 to-amber-50', !isMissing && !isDisabled && 'border-gray-200 bg-white'), children: isDisabled ? (
-                                                    // Disabled cell - empty
-                                                    _jsx("span", { className: "text-lg font-semibold text-gray-400" })) : isMissing ? (
-                                                    // Missing cell - input field
-                                                    _jsxs("div", { className: "relative w-full h-full flex items-center justify-center px-1", children: [_jsx(Input, { value: userValue, onChange: (e) => handleInputChange(rowIndex, colIndex, e.target.value), disabled: isReviewMode, className: cn('h-10 w-full text-center text-base font-semibold border-0 bg-transparent rounded-md', 'focus:ring-2 focus:ring-offset-0', !isReviewMode && 'focus:ring-teal-400', isReviewMode && answerStatus === true && 'text-green-700', isReviewMode && answerStatus === false && 'text-red-700', isReviewMode && answerStatus === null && 'text-yellow-700'), maxLength: 20, placeholder: "?" }), isReviewMode && answerStatus !== null && (_jsx("div", { className: cn('absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full shadow-sm', answerStatus === true ? 'bg-green-500' : 'bg-red-500'), children: answerStatus === true ? (_jsx(Check, { className: "h-3 w-3 text-white" })) : (_jsx(X, { className: "h-3 w-3 text-white" })) }))] })) : (
-                                                    // Regular cell - display value
-                                                    _jsx("span", { className: "text-base font-semibold text-gray-700", children: cellValue })) }, `cell-${rowIndex}-${colIndex}`));
-                                            })] }, `row-${rowIndex}`))) })] }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-4 text-xs", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-4 w-4 rounded border-2 border-teal-400 bg-teal-50" }), _jsx("span", { className: "text-gray-600", children: "\u00D4 c\u1EA7n \u0111i\u1EC1n" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-4 w-4 rounded border-2 border-gray-200 bg-white" }), _jsx("span", { className: "text-gray-600", children: "\u00D4 c\u00F3 s\u1EB5n" })] }), disabledCells.length > 0 && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-4 w-4 rounded border-2 border-gray-300 bg-gray-200" }), _jsx("span", { className: "text-gray-600", children: "\u00D4 b\u1ECB v\u00F4 hi\u1EC7u" })] }))] }), isReviewMode && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-br from-gray-50 to-slate-50 overflow-hidden", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-gray-100 bg-white px-4 py-3", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-teal-500 text-white", children: _jsx(Check, { className: "h-3.5 w-3.5" }) }), _jsx("h4", { className: "text-sm font-semibold text-gray-800", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" })] }), _jsx("div", { className: "p-4", children: _jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5", children: missingPositions.map((position) => {
-                                        const userAns = userAnswers[position] || '';
-                                        const correctAns = correctAnswers[position] || '';
-                                        const isCorrect = caseSensitive
-                                            ? userAns.trim() === correctAns.trim()
-                                            : userAns.trim().toLowerCase() === correctAns.trim().toLowerCase();
-                                        return (_jsxs("div", { className: cn('rounded-lg border-2 p-3 transition-all', isCorrect
-                                                ? 'border-green-300 bg-gradient-to-br from-green-50 to-emerald-50'
-                                                : 'border-red-300 bg-gradient-to-br from-red-50 to-rose-50'), children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsxs("span", { className: cn('inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium', isCorrect ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'), children: ["\u00D4 ", position] }), isCorrect ? (_jsx(Check, { className: "h-4 w-4 text-green-500" })) : (_jsx(X, { className: "h-4 w-4 text-red-500" }))] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs text-gray-500", children: "\u0110\u00FAng:" }), _jsx("span", { className: cn('font-semibold', isCorrect ? 'text-green-700' : 'text-gray-800'), children: correctAns })] }), !isCorrect && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs text-gray-500", children: "B\u1EA1n:" }), _jsx("span", { className: "font-medium text-red-600", children: userAns || '(trống)' })] }))] })] }, position));
-                                    }) }) })] })), !isReviewMode && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [_jsx(AlertCircle, { className: "h-4 w-4" }), _jsxs("span", { children: ["\u0110\u00E3 \u0111i\u1EC1n: ", Object.values(userAnswers).filter(v => v.trim() !== '').length, "/", missingPositions.length, " \u00F4"] })] }), onSubmit && (_jsxs(Button, { onClick: handleSubmit, className: "bg-gradient-to-r from-teal-500 to-cyan-600 hover:from-teal-600 hover:to-cyan-700 text-white shadow-sm", children: [_jsx(Check, { className: "h-4 w-4 mr-2" }), "N\u1ED9p \u0111\u00E1p \u00E1n"] }))] }))] }), isReviewMode && explanation && (_jsx("div", { className: "mx-5 mb-5 rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border border-blue-200", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-xs font-semibold text-blue-700 uppercase tracking-wider", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-gray-700 leading-relaxed", children: explanation })] })] }) }))] }));
+    return (_jsxs(KidQuestionCard, { icon: _jsx(Grid3X3, { className: "h-3.5 w-3.5" }), title: "\u0110i\u1EC1n t\u1EEB c\u00F2n thi\u1EBFu v\u00E0o b\u1EA3ng", review: isReviewMode && score ? (score.correct === score.total ? 'correct' : 'wrong') : null, headerExtra: isReviewMode && score ? (_jsxs("div", { className: cn('flex items-center gap-2 rounded-lg px-2 py-1', scorePercentage >= 80 ? 'bg-green-50 border border-green-200' :
+                scorePercentage >= 50 ? 'bg-yellow-50 border border-yellow-200' :
+                    'bg-red-50 border border-red-200'), children: [_jsx(Trophy, { className: cn('h-4 w-4', scorePercentage >= 80 ? 'text-green-500' :
+                        scorePercentage >= 50 ? 'text-yellow-500' :
+                            'text-red-500') }), _jsxs("span", { className: cn('text-xs font-bold', scorePercentage >= 80 ? 'text-green-600' :
+                        scorePercentage >= 50 ? 'text-yellow-600' :
+                            'text-red-600'), children: [score.correct, "/", score.total] })] })) : undefined, children: [_jsx("div", { className: "overflow-x-auto rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100 p-4", children: _jsxs("div", { className: "inline-block min-w-full", children: [_jsxs("div", { className: "grid gap-1.5 mb-2", style: { gridTemplateColumns: `48px repeat(${columns}, minmax(80px, 1fr))` }, children: [_jsx("div", { className: "h-8" }), Array.from({ length: columns }, (_, i) => (_jsx("div", { className: "flex h-8 items-center justify-center rounded-lg bg-gradient-to-br from-gray-100 to-gray-200 text-xs font-bold text-gray-600 shadow-sm", children: i + 1 }, `col-header-${i}`)))] }), _jsx("div", { className: "grid gap-1.5", children: Array.from({ length: rows }, (_, rowIndex) => (_jsxs("div", { className: "grid gap-1.5", style: { gridTemplateColumns: `48px repeat(${columns}, minmax(80px, 1fr))` }, children: [_jsx("div", { className: "flex h-14 items-center justify-center rounded-lg bg-gradient-to-br from-gray-100 to-gray-200 text-xs font-bold text-gray-600 shadow-sm", children: rowIndex + 1 }), Array.from({ length: columns }, (_, colIndex) => {
+                                        const isMissing = isMissingCell(rowIndex, colIndex);
+                                        const isDisabled = isDisabledCell(rowIndex, colIndex);
+                                        const cellValue = grid[rowIndex]?.[colIndex] || '';
+                                        const position = `${rowIndex + 1}-${colIndex + 1}`;
+                                        const userValue = userAnswers[position] || '';
+                                        // Determine if answer is correct in review mode
+                                        const answerStatus = isReviewMode ? isAnswerCorrect(rowIndex, colIndex) : null;
+                                        return (_jsx("div", { className: cn('relative flex h-14 items-center justify-center rounded-lg border-2 transition-all', isDisabled && 'border-gray-300 bg-gray-200', isMissing && !isReviewMode && 'border-blue-400 bg-gradient-to-br from-blue-50 to-indigo-50 shadow-sm', isMissing && isReviewMode && answerStatus === true && 'border-green-400 bg-gradient-to-br from-green-50 to-emerald-50', isMissing && isReviewMode && answerStatus === false && 'border-red-400 bg-gradient-to-br from-red-50 to-rose-50', isMissing && isReviewMode && answerStatus === null && 'border-yellow-400 bg-gradient-to-br from-yellow-50 to-amber-50', !isMissing && !isDisabled && 'border-gray-200 bg-white'), children: isDisabled ? (
+                                            // Disabled cell - empty
+                                            _jsx("span", { className: "text-lg font-semibold text-gray-400" })) : isMissing ? (
+                                            // Missing cell - input field
+                                            _jsxs("div", { className: "relative w-full h-full flex items-center justify-center px-1", children: [_jsx(Input, { value: userValue, onChange: (e) => handleInputChange(rowIndex, colIndex, e.target.value), disabled: isReviewMode, className: cn('h-10 w-full text-center text-base font-semibold border-0 bg-transparent rounded-md', 'focus:ring-2 focus:ring-offset-0', !isReviewMode && 'focus:ring-blue-400', isReviewMode && answerStatus === true && 'text-green-700', isReviewMode && answerStatus === false && 'text-red-700', isReviewMode && answerStatus === null && 'text-yellow-700'), maxLength: 20, placeholder: "?" }), isReviewMode && answerStatus !== null && (_jsx("div", { className: cn('absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full shadow-sm', answerStatus === true ? 'bg-green-500' : 'bg-red-500'), children: answerStatus === true ? (_jsx(Check, { className: "h-3 w-3 text-white" })) : (_jsx(X, { className: "h-3 w-3 text-white" })) }))] })) : (
+                                            // Regular cell - display value
+                                            _jsx("span", { className: "text-base font-semibold text-gray-700", children: cellValue })) }, `cell-${rowIndex}-${colIndex}`));
+                                    })] }, `row-${rowIndex}`))) })] }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-4 text-xs", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-4 w-4 rounded border-2 border-blue-400 bg-blue-50" }), _jsx("span", { className: "text-gray-600", children: "\u00D4 c\u1EA7n \u0111i\u1EC1n" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-4 w-4 rounded border-2 border-gray-200 bg-white" }), _jsx("span", { className: "text-gray-600", children: "\u00D4 c\u00F3 s\u1EB5n" })] }), disabledCells.length > 0 && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-4 w-4 rounded border-2 border-gray-300 bg-gray-200" }), _jsx("span", { className: "text-gray-600", children: "\u00D4 b\u1ECB v\u00F4 hi\u1EC7u" })] }))] }), isReviewMode && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-br from-gray-50 to-slate-50 overflow-hidden", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-gray-100 bg-white px-4 py-3", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-blue-500 text-white", children: _jsx(Check, { className: "h-3.5 w-3.5" }) }), _jsx("h4", { className: "text-sm font-semibold text-gray-800", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" })] }), _jsx("div", { className: "p-4", children: _jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5", children: missingPositions.map((position) => {
+                                const userAns = userAnswers[position] || '';
+                                const correctAns = correctAnswers[position] || '';
+                                const isCorrect = caseSensitive
+                                    ? userAns.trim() === correctAns.trim()
+                                    : userAns.trim().toLowerCase() === correctAns.trim().toLowerCase();
+                                return (_jsxs("div", { className: cn('rounded-lg border-2 p-3 transition-all', isCorrect
+                                        ? 'border-green-300 bg-gradient-to-br from-green-50 to-emerald-50'
+                                        : 'border-red-300 bg-gradient-to-br from-red-50 to-rose-50'), children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsxs("span", { className: cn('inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium', isCorrect ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'), children: ["\u00D4 ", position] }), isCorrect ? (_jsx(Check, { className: "h-4 w-4 text-green-500" })) : (_jsx(X, { className: "h-4 w-4 text-red-500" }))] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs text-gray-500", children: "\u0110\u00FAng:" }), _jsx("span", { className: cn('font-semibold', isCorrect ? 'text-green-700' : 'text-gray-800'), children: correctAns })] }), !isCorrect && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs text-gray-500", children: "B\u1EA1n:" }), _jsx("span", { className: "font-medium text-red-600", children: userAns || '(trống)' })] }))] })] }, position));
+                            }) }) })] })), !isReviewMode && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [_jsx(AlertCircle, { className: "h-4 w-4" }), _jsxs("span", { children: ["\u0110\u00E3 \u0111i\u1EC1n: ", Object.values(userAnswers).filter(v => v.trim() !== '').length, "/", missingPositions.length, " \u00F4"] })] }), onSubmit && (_jsxs(Button, { onClick: handleSubmit, className: "bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white shadow-sm", children: [_jsx(Check, { className: "h-4 w-4 mr-2" }), "N\u1ED9p \u0111\u00E1p \u00E1n"] }))] })), isReviewMode && explanation && (_jsx("div", { className: "rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border border-blue-200", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-xs font-semibold text-blue-700 uppercase tracking-wider", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-gray-700 leading-relaxed", children: explanation })] })] }) }))] }));
 }
 export function FillMissingWordsInGridClient(props) {
     return _jsx(FillMissingWordsInGridClientContent, { ...props });

package/dist/components/questions/types/find-words-in-matrix/FindWordsInMatrixClient.d.ts

@@ -1,9 +1,19 @@
 import React from 'react';
-import type { FindWordsInMatrixContent, FindWordsInMatrixCorrectAnswer } from '../../../../shared/types/questions/find-words-in-matrix';
+import type { FindWordsInMatrixContent, FindWordsInMatrixCorrectAnswer, MatrixCellCoord } from '../../../../shared/types/questions/find-words-in-matrix';
+type WordSelection = {
+    wordId?: string;
+    word?: string;
+    categoryId?: string;
+    path: MatrixCellCoord[];
+};
 interface FindWordsInMatrixClientProps {
     content: FindWordsInMatrixContent;
     correctAnswer?: FindWordsInMatrixCorrectAnswer;
     showSolution?: boolean;
+    userAnswer?: unknown;
+    onAnswerChange?: (payload: {
+        words: WordSelection[];
+    }) => void;
 }
-export declare function FindWordsInMatrixClient({ content, correctAnswer, showSolution, }: FindWordsInMatrixClientProps): React.JSX.Element;
+export declare function FindWordsInMatrixClient({ content, correctAnswer, showSolution, userAnswer, onAnswerChange, }: FindWordsInMatrixClientProps): React.JSX.Element;
 export {};