@tinyweb_dev/oe-exam-sdk 1.0.9 → 1.0.10

package/dist/components/questions/types/crossword-puzzle/CrosswordPuzzleCreator.js

@@ -1,10 +1,25 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, useRef } from 'react';
 import { Plus, Trash2, Edit2, Check, AlertCircle, Grid3X3 } from 'lucide-react';
 import { CompactCreatorHeader, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
 import { CrosswordPuzzleClient } from './CrosswordPuzzleClient';
 export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChangesChange, }) {
+    const [instruction, setInstruction] = useState(() => {
+        return initialData?.content?.instruction || initialData?.instruction || initialData?.answer?.instruction || '';
+    });
+    const [puzzleType, setPuzzleType] = useState(() => {
+        return initialData?.content?.type === 'HIDDEN_WORD' || initialData?.answer?.type === 'HIDDEN_WORD'
+            ? 'HIDDEN_WORD'
+            : 'STANDARD';
+    });
+    const [markedColumn, setMarkedColumn] = useState(() => {
+        return Number(initialData?.content?.markedColumn || initialData?.answer?.markedColumn || 1);
+    });
+    const [hiddenWord, setHiddenWord] = useState(() => {
+        const answers = initialData?.answer?.answers || initialData?.correctAnswer?.answers || {};
+        return answers['hidden-word'] || initialData?.answer?.hiddenWord || '';
+    });
     const [title, setTitle] = useState(() => {
         return initialData?.content?.title || 'Nationalities Crossword';
     });
@@ -39,6 +54,7 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
                 length: a.length,
                 direction: 'across',
                 answer: answers[`across-${a.number}`] || '',
+                isExample: a.isExample === true,
             });
         }
         for (const d of down) {
@@ -51,6 +67,7 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
                 length: d.length,
                 direction: 'down',
                 answer: answers[`down-${d.number}`] || '',
+                isExample: d.isExample === true,
             });
         }
         return items;
@@ -62,6 +79,7 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
     const [formAnswer, setFormAnswer] = useState('');
     const [formStartRow, setFormStartRow] = useState(1);
     const [formStartCol, setFormStartCol] = useState(1);
+    const [formIsExample, setFormIsExample] = useState(false);
     const { cellMap, clueNumberMap, conflicts } = useMemo(() => {
         const cMap = new Map();
         const numMap = new Map();
@@ -89,9 +107,17 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
         }
         return { cellMap: cMap, clueNumberMap: numMap, conflicts: conflictList };
     }, [clues]);
+    const onChangeRef = useRef(onChange);
+    const onUnsavedChangesChangeRef = useRef(onUnsavedChangesChange);
+    const previousPayloadRef = useRef('');
+    const skipUnsavedRef = useRef(true);
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    useEffect(() => {
+        onUnsavedChangesChangeRef.current = onUnsavedChangesChange;
+    }, [onUnsavedChangesChange]);
     useEffect(() => {
-        if (!onChange)
-            return;
         const across = clues
             .filter((c) => c.direction === 'across')
             .map((c) => ({
@@ -100,6 +126,7 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
             startRow: c.startRow,
             startCol: c.startCol,
             length: c.length || c.answer.trim().length,
+            ...(c.isExample ? { isExample: true } : {}),
         }));
         const down = clues
             .filter((c) => c.direction === 'down')
@@ -109,6 +136,7 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
             startRow: c.startRow,
             startCol: c.startCol,
             length: c.length || c.answer.trim().length,
+            ...(c.isExample ? { isExample: true } : {}),
         }));
         const answers = {};
         for (const c of clues) {
@@ -116,20 +144,37 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
                 answers[`${c.direction}-${c.number}`] = c.answer.trim().toUpperCase();
             }
         }
-        onChange({
+        if (puzzleType === 'HIDDEN_WORD' && hiddenWord.trim()) {
+            answers['hidden-word'] = hiddenWord.trim().toUpperCase();
+        }
+        const payload = {
             content: {
+                type: puzzleType,
                 title,
+                instruction,
                 gridSize: { rows, cols },
+                ...(puzzleType === 'HIDDEN_WORD' ? { markedColumn } : {}),
                 clues: { across, down },
             },
             answer: {
                 answers,
                 caseSensitive,
+                hiddenWord: puzzleType === 'HIDDEN_WORD' ? hiddenWord.trim().toUpperCase() : '',
             },
             points,
-        });
-        onUnsavedChangesChange?.(true);
-    }, [title, rows, cols, clues, caseSensitive, points, onChange, onUnsavedChangesChange]);
+        };
+        const serialized = JSON.stringify(payload);
+        if (serialized === previousPayloadRef.current) {
+            return;
+        }
+        previousPayloadRef.current = serialized;
+        onChangeRef.current?.(payload);
+        if (skipUnsavedRef.current) {
+            skipUnsavedRef.current = false;
+            return;
+        }
+        onUnsavedChangesChangeRef.current?.(true);
+    }, [instruction, puzzleType, markedColumn, hiddenWord, title, rows, cols, clues, caseSensitive, points]);
     const handleSaveClue = (e) => {
         e.preventDefault();
         if (!formClue.trim() || !formAnswer.trim())
@@ -147,6 +192,7 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
                     startRow: formStartRow,
                     startCol: formStartCol,
                     length,
+                    isExample: formIsExample,
                 }
                 : c));
             setEditingClueId(null);
@@ -161,11 +207,13 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
                 startRow: formStartRow,
                 startCol: formStartCol,
                 length,
+                isExample: formIsExample,
             };
             setClues((prev) => [...prev, newClue]);
         }
         setFormClue('');
         setFormAnswer('');
+        setFormIsExample(false);
         setFormNumber((prev) => prev + 1);
     };
     const handleEditClue = (c) => {
@@ -176,6 +224,7 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
         setFormAnswer(c.answer);
         setFormStartRow(c.startRow);
         setFormStartCol(c.startCol);
+        setFormIsExample(c.isExample === true);
     };
     const handleDeleteClue = (id) => {
         setClues((prev) => prev.filter((c) => c.id !== id));
@@ -194,6 +243,7 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
             startRow: c.startRow,
             startCol: c.startCol,
             length: c.length || c.answer.trim().length,
+            ...(c.isExample ? { isExample: true } : {}),
         }));
         const down = clues
             .filter((c) => c.direction === 'down')
@@ -203,6 +253,7 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
             startRow: c.startRow,
             startCol: c.startCol,
             length: c.length || c.answer.trim().length,
+            ...(c.isExample ? { isExample: true } : {}),
         }));
         const answers = {};
         for (const c of clues) {
@@ -210,20 +261,26 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
                 answers[`${c.direction}-${c.number}`] = c.answer.trim().toUpperCase();
             }
         }
+        if (puzzleType === 'HIDDEN_WORD' && hiddenWord.trim()) {
+            answers['hidden-word'] = hiddenWord.trim().toUpperCase();
+        }
         return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _jsx(CrosswordPuzzleClient, { content: {
+                        type: puzzleType,
                         title,
+                        instruction,
                         gridSize: { rows, cols },
+                        ...(puzzleType === 'HIDDEN_WORD' ? { markedColumn } : {}),
                         clues: { across, down },
-                    }, correctAnswer: { answers, caseSensitive }, isReviewMode: true, userAnswers: answers })] }));
+                    }, correctAnswer: { answers, caseSensitive }, isReviewMode: true, questionNumber: initialData?.questionNumber ?? 1 })] }));
     }
     return (_jsx("div", { className: "space-y-3", children: _jsx(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(Grid3X3, { className: "h-3.5 w-3.5" }), title: "\u00D4 ch\u1EEF (Crossword)", points: {
                     value: points,
                     onValueChange: setPoints,
-                }, preview: { onClick: () => setIsClientMode(true) } }), children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-3 bg-gray-50 rounded-lg border border-gray-200", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold text-gray-700 mb-1", children: "Ti\u00EAu \u0111\u1EC1 \u00F4 ch\u1EEF" }), _jsx("input", { type: "text", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "vd: Nationalities Crossword", className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-blue-500 outline-none" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold text-gray-700 mb-1", children: "K\u00EDch th\u01B0\u1EDBc l\u01B0\u1EDBi (H\u00E0ng x C\u1ED9t)" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "number", min: 3, max: 30, value: rows, onChange: (e) => setRows(Math.max(3, parseInt(e.target.value) || 12)), className: "w-20 px-2 py-1.5 text-sm border border-gray-300 rounded outline-none" }), _jsx("span", { className: "text-gray-500 font-bold", children: "x" }), _jsx("input", { type: "number", min: 3, max: 30, value: cols, onChange: (e) => setCols(Math.max(3, parseInt(e.target.value) || 12)), className: "w-20 px-2 py-1.5 text-sm border border-gray-300 rounded outline-none" })] })] }), _jsx("div", { className: "flex items-center pt-5", children: _jsxs("label", { className: "flex items-center gap-2 text-sm text-gray-700 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: caseSensitive, onChange: (e) => setCaseSensitive(e.target.checked), className: "rounded text-blue-600 focus:ring-blue-500 h-4 w-4" }), _jsx("span", { children: "Ph\u00E2n bi\u1EC7t hoa/th\u01B0\u1EDDng" })] }) })] }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-6", children: [_jsxs("div", { className: "lg:col-span-5 flex flex-col gap-4", children: [_jsxs("form", { onSubmit: handleSaveClue, className: "p-4 rounded-xl border border-blue-200 bg-blue-50/40 flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm font-bold text-blue-900", children: editingClueId ? 'Chỉnh sửa gợi ý' : 'Thêm gợi ý mới' }), editingClueId && (_jsx("button", { type: "button", onClick: () => {
+                }, preview: { onClick: () => setIsClientMode(true) } }), children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-3 bg-gray-50 rounded-lg border border-gray-200", children: [_jsxs("div", { className: "sm:col-span-2 md:col-span-3", children: [_jsx("label", { className: "block text-xs font-bold text-gray-700 mb-1", children: "H\u01B0\u1EDBng d\u1EABn b\u00E0i l\u00E0m" }), _jsx("input", { type: "text", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: "vd: Read the information and do the crossword. What's the hidden word?", className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-blue-500 outline-none" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold text-gray-700 mb-1", children: "D\u1EA1ng \u00F4 ch\u1EEF" }), _jsxs("select", { value: puzzleType, onChange: (e) => setPuzzleType(e.target.value), className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded outline-none bg-white", children: [_jsx("option", { value: "STANDARD", children: "STANDARD" }), _jsx("option", { value: "HIDDEN_WORD", children: "HIDDEN_WORD" })] })] }), puzzleType === 'HIDDEN_WORD' && (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold text-gray-700 mb-1", children: "C\u1ED9t t\u1EEB kh\u00F3a (markedColumn)" }), _jsx("input", { type: "number", min: 1, max: cols, value: markedColumn, onChange: (e) => setMarkedColumn(Math.max(1, parseInt(e.target.value) || 1)), className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded outline-none" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold text-gray-700 mb-1", children: "T\u1EEB kh\u00F3a b\u00ED \u1EA9n (hidden-word)" }), _jsx("input", { type: "text", value: hiddenWord, onChange: (e) => setHiddenWord(e.target.value.toUpperCase()), placeholder: "vd: BRITAIN", className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded outline-none uppercase font-semibold" })] })] })), _jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold text-gray-700 mb-1", children: "Ti\u00EAu \u0111\u1EC1 \u00F4 ch\u1EEF" }), _jsx("input", { type: "text", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "vd: Nationalities Crossword", className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-blue-500 outline-none" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold text-gray-700 mb-1", children: "K\u00EDch th\u01B0\u1EDBc l\u01B0\u1EDBi (H\u00E0ng x C\u1ED9t)" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "number", min: 3, max: 30, value: rows, onChange: (e) => setRows(Math.max(3, parseInt(e.target.value) || 12)), className: "w-20 px-2 py-1.5 text-sm border border-gray-300 rounded outline-none" }), _jsx("span", { className: "text-gray-500 font-bold", children: "x" }), _jsx("input", { type: "number", min: 3, max: 30, value: cols, onChange: (e) => setCols(Math.max(3, parseInt(e.target.value) || 12)), className: "w-20 px-2 py-1.5 text-sm border border-gray-300 rounded outline-none" })] })] }), _jsx("div", { className: "flex items-center pt-5", children: _jsxs("label", { className: "flex items-center gap-2 text-sm text-gray-700 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: caseSensitive, onChange: (e) => setCaseSensitive(e.target.checked), className: "rounded text-blue-600 focus:ring-blue-500 h-4 w-4" }), _jsx("span", { children: "Ph\u00E2n bi\u1EC7t hoa/th\u01B0\u1EDDng" })] }) })] }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-6", children: [_jsxs("div", { className: "lg:col-span-5 flex flex-col gap-4", children: [_jsxs("form", { onSubmit: handleSaveClue, className: "p-4 rounded-xl border border-blue-200 bg-blue-50/40 flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm font-bold text-blue-900", children: editingClueId ? 'Chỉnh sửa gợi ý' : 'Thêm gợi ý mới' }), editingClueId && (_jsx("button", { type: "button", onClick: () => {
                                                             setEditingClueId(null);
                                                             setFormClue('');
                                                             setFormAnswer('');
-                                                        }, className: "text-xs text-gray-500 hover:text-gray-700 underline", children: "H\u1EE7y ch\u1EC9nh s\u1EEDa" }))] }), _jsxs("div", { className: "grid grid-cols-3 gap-2", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-[11px] font-semibold text-gray-600 mb-0.5", children: "S\u1ED1 Clue" }), _jsx("input", { type: "number", min: 1, value: formNumber, onChange: (e) => setFormNumber(parseInt(e.target.value) || 1), className: "w-full px-2 py-1 text-sm border border-gray-300 rounded outline-none" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[11px] font-semibold text-gray-600 mb-0.5", children: "H\u01B0\u1EDBng" }), _jsxs("select", { value: formDirection, onChange: (e) => setFormDirection(e.target.value), className: "w-full px-2 py-1 text-sm border border-gray-300 rounded outline-none bg-white", children: [_jsx("option", { value: "across", children: "Across (Ngang)" }), _jsx("option", { value: "down", children: "Down (D\u1ECDc)" })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[11px] font-semibold text-gray-600 mb-0.5", children: "To\u1EA1 \u0111\u1ED9 (R, C)" }), _jsxs("div", { className: "flex gap-1", children: [_jsx("input", { type: "number", min: 1, max: rows, value: formStartRow, onChange: (e) => setFormStartRow(parseInt(e.target.value) || 1), placeholder: "R", className: "w-1/2 px-1 py-1 text-xs border border-gray-300 rounded text-center" }), _jsx("input", { type: "number", min: 1, max: cols, value: formStartCol, onChange: (e) => setFormStartCol(parseInt(e.target.value) || 1), placeholder: "C", className: "w-1/2 px-1 py-1 text-xs border border-gray-300 rounded text-center" })] })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[11px] font-semibold text-gray-600 mb-0.5", children: "C\u00E2u g\u1EE3i \u00FD (Clue)" }), _jsx("input", { type: "text", value: formClue, onChange: (e) => setFormClue(e.target.value), placeholder: "vd: Spain, Capital of France...", className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded outline-none", required: true })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[11px] font-semibold text-gray-600 mb-0.5", children: "T\u1EEB \u0111\u00E1p \u00E1n (Answer Word)" }), _jsx("input", { type: "text", value: formAnswer, onChange: (e) => setFormAnswer(e.target.value), placeholder: "vd: SPANISH", className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded outline-none uppercase font-semibold", required: true })] }), _jsxs("button", { type: "submit", className: "mt-1 flex items-center justify-center gap-1.5 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm font-semibold transition", children: [editingClueId ? _jsx(Check, { className: "h-4 w-4" }) : _jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { children: editingClueId ? 'Cập nhật gợi ý' : 'Thêm vào danh sách' })] })] }), _jsxs("div", { className: "flex flex-col gap-2 max-h-[420px] overflow-y-auto pr-1", children: [_jsxs("span", { className: "text-xs font-bold text-gray-600", children: ["Danh s\u00E1ch (", clues.length, " t\u1EEB):"] }), clues.length === 0 && (_jsx("p", { className: "text-xs text-gray-400 italic", children: "Ch\u01B0a c\u00F3 g\u1EE3i \u00FD n\u00E0o. H\u00E3y th\u00EAm g\u1EE3i \u00FD \u1EDF tr\u00EAn." })), clues.map((c) => (_jsxs("div", { className: "flex items-center justify-between p-2.5 bg-white rounded-lg border border-gray-200 hover:border-blue-300 transition text-sm shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [_jsx("span", { className: `flex items-center justify-center h-6 w-6 rounded text-xs font-bold text-white ${c.direction === 'across' ? 'bg-blue-600' : 'bg-purple-600'}`, children: c.number }), _jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [_jsx("span", { className: "font-semibold text-gray-800 truncate", children: c.clue }), _jsxs("span", { className: "text-xs text-gray-500 flex items-center gap-2", children: [_jsx("span", { className: "font-bold text-blue-700", children: c.answer }), _jsxs("span", { children: ["(", c.length, " ch\u1EEF)"] }), _jsxs("span", { children: ["[", c.direction === 'across' ? '→ Ngang' : '↓ Dọc', " (", c.startRow, ",", c.startCol, ")]"] })] })] })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => handleEditClue(c), className: "p-1 text-gray-500 hover:text-blue-600 rounded", title: "S\u1EEDa", children: _jsx(Edit2, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => handleDeleteClue(c.id), className: "p-1 text-gray-500 hover:text-red-600 rounded", title: "X\u00F3a", children: _jsx(Trash2, { className: "h-4 w-4" }) })] })] }, c.id)))] })] }), _jsxs("div", { className: "lg:col-span-7 flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-bold text-gray-700", children: "Ma tr\u1EADn l\u01B0\u1EDBi \u00F4 ch\u1EEF tr\u1EF1c quan:" }), conflicts.length > 0 && (_jsxs("span", { className: "flex items-center gap-1 text-xs font-bold text-red-600 bg-red-50 px-2 py-0.5 rounded border border-red-200", children: [_jsx(AlertCircle, { className: "h-3.5 w-3.5" }), _jsxs("span", { children: ["C\u00F3 ", conflicts.length, " \u00F4 b\u1ECB xung \u0111\u1ED9t ch\u1EEF c\u00E1i!"] })] }))] }), _jsx("div", { className: "flex justify-center overflow-x-auto p-4 bg-gray-100 rounded-xl border border-gray-300 min-h-[380px]", children: _jsx("div", { className: "inline-grid gap-1", style: {
+                                                        }, className: "text-xs text-gray-500 hover:text-gray-700 underline", children: "H\u1EE7y ch\u1EC9nh s\u1EEDa" }))] }), _jsxs("div", { className: "grid grid-cols-3 gap-2", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-[11px] font-semibold text-gray-600 mb-0.5", children: "S\u1ED1 Clue" }), _jsx("input", { type: "number", min: 1, value: formNumber, onChange: (e) => setFormNumber(parseInt(e.target.value) || 1), className: "w-full px-2 py-1 text-sm border border-gray-300 rounded outline-none" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[11px] font-semibold text-gray-600 mb-0.5", children: "H\u01B0\u1EDBng" }), _jsxs("select", { value: formDirection, onChange: (e) => setFormDirection(e.target.value), className: "w-full px-2 py-1 text-sm border border-gray-300 rounded outline-none bg-white", children: [_jsx("option", { value: "across", children: "Across (Ngang)" }), _jsx("option", { value: "down", children: "Down (D\u1ECDc)" })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[11px] font-semibold text-gray-600 mb-0.5", children: "To\u1EA1 \u0111\u1ED9 (R, C)" }), _jsxs("div", { className: "flex gap-1", children: [_jsx("input", { type: "number", min: 1, max: rows, value: formStartRow, onChange: (e) => setFormStartRow(parseInt(e.target.value) || 1), placeholder: "R", className: "w-1/2 px-1 py-1 text-xs border border-gray-300 rounded text-center" }), _jsx("input", { type: "number", min: 1, max: cols, value: formStartCol, onChange: (e) => setFormStartCol(parseInt(e.target.value) || 1), placeholder: "C", className: "w-1/2 px-1 py-1 text-xs border border-gray-300 rounded text-center" })] })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[11px] font-semibold text-gray-600 mb-0.5", children: "C\u00E2u g\u1EE3i \u00FD (Clue)" }), _jsx("input", { type: "text", value: formClue, onChange: (e) => setFormClue(e.target.value), placeholder: "vd: Spain, Capital of France...", className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded outline-none", required: true })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[11px] font-semibold text-gray-600 mb-0.5", children: "T\u1EEB \u0111\u00E1p \u00E1n (Answer Word)" }), _jsx("input", { type: "text", value: formAnswer, onChange: (e) => setFormAnswer(e.target.value), placeholder: "vd: SPANISH", className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded outline-none uppercase font-semibold", required: true })] }), _jsxs("label", { className: "flex items-center gap-2 text-xs text-gray-700 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: formIsExample, onChange: (e) => setFormIsExample(e.target.checked), className: "rounded text-amber-600 focus:ring-amber-500 h-4 w-4" }), _jsx("span", { children: "Example (kh\u00F4ng t\u00EDnh \u0111i\u1EC3m)" })] }), _jsxs("button", { type: "submit", className: "mt-1 flex items-center justify-center gap-1.5 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm font-semibold transition", children: [editingClueId ? _jsx(Check, { className: "h-4 w-4" }) : _jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { children: editingClueId ? 'Cập nhật gợi ý' : 'Thêm vào danh sách' })] })] }), _jsxs("div", { className: "flex flex-col gap-2 max-h-[420px] overflow-y-auto pr-1", children: [_jsxs("span", { className: "text-xs font-bold text-gray-600", children: ["Danh s\u00E1ch (", clues.length, " t\u1EEB):"] }), clues.length === 0 && (_jsx("p", { className: "text-xs text-gray-400 italic", children: "Ch\u01B0a c\u00F3 g\u1EE3i \u00FD n\u00E0o. H\u00E3y th\u00EAm g\u1EE3i \u00FD \u1EDF tr\u00EAn." })), clues.map((c) => (_jsxs("div", { className: "flex items-center justify-between p-2.5 bg-white rounded-lg border border-gray-200 hover:border-blue-300 transition text-sm shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [_jsx("span", { className: `flex items-center justify-center h-6 w-6 rounded text-xs font-bold text-white ${c.direction === 'across' ? 'bg-blue-600' : 'bg-purple-600'}`, children: c.number }), _jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [_jsxs("span", { className: "font-semibold text-gray-800 truncate", children: [c.clue, c.isExample && (_jsx("span", { className: "ml-1 rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-bold text-amber-700", children: "Example" }))] }), _jsxs("span", { className: "text-xs text-gray-500 flex items-center gap-2", children: [_jsx("span", { className: "font-bold text-blue-700", children: c.answer }), _jsxs("span", { children: ["(", c.length, " ch\u1EEF)"] }), _jsxs("span", { children: ["[", c.direction === 'across' ? '→ Ngang' : '↓ Dọc', " (", c.startRow, ",", c.startCol, ")]"] })] })] })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => handleEditClue(c), className: "p-1 text-gray-500 hover:text-blue-600 rounded", title: "S\u1EEDa", children: _jsx(Edit2, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => handleDeleteClue(c.id), className: "p-1 text-gray-500 hover:text-red-600 rounded", title: "X\u00F3a", children: _jsx(Trash2, { className: "h-4 w-4" }) })] })] }, c.id)))] })] }), _jsxs("div", { className: "lg:col-span-7 flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-bold text-gray-700", children: "Ma tr\u1EADn l\u01B0\u1EDBi \u00F4 ch\u1EEF tr\u1EF1c quan:" }), conflicts.length > 0 && (_jsxs("span", { className: "flex items-center gap-1 text-xs font-bold text-red-600 bg-red-50 px-2 py-0.5 rounded border border-red-200", children: [_jsx(AlertCircle, { className: "h-3.5 w-3.5" }), _jsxs("span", { children: ["C\u00F3 ", conflicts.length, " \u00F4 b\u1ECB xung \u0111\u1ED9t ch\u1EEF c\u00E1i!"] })] }))] }), _jsx("div", { className: "flex justify-center overflow-x-auto p-4 bg-gray-100 rounded-xl border border-gray-300 min-h-[380px]", children: _jsx("div", { className: "inline-grid gap-1", style: {
                                                 gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
                                             }, children: Array.from({ length: rows }).map((_, rIdx) => {
                                                 const r = rIdx + 1;

package/dist/components/questions/types/crossword-puzzle/transform.js

@@ -1,67 +1,96 @@
+function asSubtype(value) {
+    return value === 'HIDDEN_WORD' ? 'HIDDEN_WORD' : 'STANDARD';
+}
+function mapClue(raw) {
+    return {
+        number: Number(raw.number),
+        clue: String(raw.clue || '').trim(),
+        startRow: Number(raw.startRow) || 1,
+        startCol: Number(raw.startCol) || 1,
+        length: Number(raw.length) || (raw.answer ? String(raw.answer).trim().length : 1),
+        ...(raw.isExample === true ? { isExample: true } : {}),
+    };
+}
+function collectAnswers(formClues, hiddenWord, existing) {
+    const answers = { ...(existing || {}) };
+    for (const c of formClues) {
+        const key = `${c.direction}-${c.number}`;
+        if (c.answer) {
+            answers[key] = String(c.answer).trim().toUpperCase();
+        }
+    }
+    const hidden = (hiddenWord || answers['hidden-word'] || '').trim();
+    if (hidden) {
+        answers['hidden-word'] = hidden.toUpperCase();
+    }
+    return answers;
+}
 export const transformCrosswordPuzzle = (question) => {
     const contentData = question.content;
     const answerData = question.answer;
     let content;
     let correctAnswer;
     if (contentData?.gridSize && contentData?.clues) {
+        const type = asSubtype(contentData.type);
+        const markedColumn = Number(contentData.markedColumn);
         content = {
+            type,
             title: contentData.title || '',
+            ...(contentData.instruction ? { instruction: String(contentData.instruction) } : {}),
             gridSize: {
                 rows: Number(contentData.gridSize.rows) || 12,
                 cols: Number(contentData.gridSize.cols) || 12,
             },
+            ...(type === 'HIDDEN_WORD' && Number.isFinite(markedColumn) && markedColumn > 0
+                ? { markedColumn }
+                : {}),
             clues: {
-                across: Array.isArray(contentData.clues.across) ? contentData.clues.across : [],
-                down: Array.isArray(contentData.clues.down) ? contentData.clues.down : [],
+                across: Array.isArray(contentData.clues.across)
+                    ? contentData.clues.across.map(mapClue)
+                    : [],
+                down: Array.isArray(contentData.clues.down)
+                    ? contentData.clues.down.map(mapClue)
+                    : [],
             },
         };
+        const answers = { ...(answerData?.answers || {}) };
+        const hidden = String(answerData?.hiddenWord || answers['hidden-word'] || '').trim();
+        if (type === 'HIDDEN_WORD' && hidden) {
+            answers['hidden-word'] = hidden.toUpperCase();
+        }
         correctAnswer = {
-            answers: answerData?.answers || {},
+            answers,
             caseSensitive: answerData?.caseSensitive || false,
         };
     }
     else if (Array.isArray(contentData?.clues)) {
         const formClues = contentData.clues;
-        const across = formClues
-            .filter((c) => c.direction === 'across')
-            .map((c) => ({
-            number: Number(c.number),
-            clue: String(c.clue || '').trim(),
-            startRow: Number(c.startRow) || 1,
-            startCol: Number(c.startCol) || 1,
-            length: Number(c.length) || (c.answer ? String(c.answer).trim().length : 1),
-        }));
-        const down = formClues
-            .filter((c) => c.direction === 'down')
-            .map((c) => ({
-            number: Number(c.number),
-            clue: String(c.clue || '').trim(),
-            startRow: Number(c.startRow) || 1,
-            startCol: Number(c.startCol) || 1,
-            length: Number(c.length) || (c.answer ? String(c.answer).trim().length : 1),
-        }));
+        const type = asSubtype(contentData.type);
+        const markedColumn = Number(contentData.markedColumn);
         content = {
+            type,
             title: contentData.title || '',
+            ...(contentData.instruction ? { instruction: String(contentData.instruction) } : {}),
             gridSize: {
                 rows: Number(contentData.rows) || 12,
                 cols: Number(contentData.cols) || 12,
             },
-            clues: { across, down },
+            ...(type === 'HIDDEN_WORD' && Number.isFinite(markedColumn) && markedColumn > 0
+                ? { markedColumn }
+                : {}),
+            clues: {
+                across: formClues.filter((c) => c.direction === 'across').map(mapClue),
+                down: formClues.filter((c) => c.direction === 'down').map(mapClue),
+            },
         };
-        const answers = {};
-        for (const c of formClues) {
-            const key = `${c.direction}-${c.number}`;
-            if (c.answer) {
-                answers[key] = String(c.answer).trim().toUpperCase();
-            }
-        }
         correctAnswer = {
-            answers,
+            answers: collectAnswers(formClues, contentData.hiddenWord, answerData?.answers),
             caseSensitive: contentData.caseSensitive || false,
         };
     }
     else {
         content = {
+            type: 'STANDARD',
             gridSize: { rows: 12, cols: 12 },
             clues: { across: [], down: [] },
         };

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

@@ -2,13 +2,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useMemo } from 'react';
 import { Input } from '../../../../components/ui/input';
-import { Check, X, PenLine, AlertTriangle, ClipboardList, Lightbulb, BookOpen, Hash, Volume2, } from 'lucide-react';
+import { Check, X, PenLine, ClipboardList, Lightbulb, BookOpen, Hash, Volume2, } from 'lucide-react';
 import { ImageLabelWordBank } from '../../groups/ImageLabelWordBank';
 import { hasImageLabels } from '../../_shared/types/question-group.utils';
 import { extractPlaceholderIndices, formatBlankAnswersDisplay, getPrimaryBlankAnswer, isBlankInputCorrect, normalizeBlankAnswers, normalizeFillInBlankAnswers, } from './answer-utils';
 import { parseFillBlankSegments } from '../../../../shared/lib/utils/fill-in-blank';
 import { cn } from '../../../../shared/lib/utils';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { KidPrompt, KidQuestionCard } from '../../_shared/components/compact';
 // Sub-component: Resolve presigned URL for group image
 function GroupImage({ src, alt, className }) {
     const { previewUrl, isLoading } = usePresignedFileUrl(src);
@@ -143,11 +144,11 @@ export function FillInBlankClient({ questionData, questionConfig, onSubmit, isRe
                     const userInput = answers[placeholderIndex] || '';
                     const isCorrect = isReviewMode && isAnswerCorrect(placeholderIndex, userInput);
                     const isWrong = isReviewMode && userInput && !isCorrect;
-                    return (_jsxs("span", { className: "relative inline-flex items-center mx-0.5", children: [_jsx("span", { className: "flex h-5 w-5 items-center justify-center rounded-md bg-orange-100 text-[10px] font-bold text-orange-600 mr-1 ring-1 ring-orange-200/60", children: placeholderIndex + 1 }), _jsx(Input, { value: userInput, onChange: (e) => handleAnswerChange(placeholderIndex, e.target.value), disabled: isReviewMode, className: cn('h-9 w-28 text-center text-sm font-medium rounded-lg border-2 transition-all duration-200', 'focus:ring-2 focus:ring-offset-1 focus:outline-none', isReviewMode
+                    return (_jsxs("span", { className: "relative inline-flex items-center mx-0.5", children: [_jsx("span", { className: "flex h-5 w-5 items-center justify-center rounded-md bg-orange-100 text-[10px] font-bold text-orange-600 mr-1 ring-1 ring-orange-200/60", children: placeholderIndex + 1 }), _jsx(Input, { value: userInput, onChange: (e) => handleAnswerChange(placeholderIndex, e.target.value), disabled: isReviewMode, className: cn('h-8 w-28 text-center text-sm font-medium rounded-md border px-3 py-1.5 transition-all duration-200', 'focus:ring-2 focus:ring-offset-1 focus:outline-none', isReviewMode
                                     ? isCorrect
-                                        ? 'border-emerald-400 bg-emerald-50 text-emerald-700'
+                                        ? 'border-green-400 bg-green-50 text-green-800'
                                         : isWrong
-                                            ? 'border-red-400 bg-red-50 text-red-700'
+                                            ? 'border-red-400 bg-red-50 text-red-800'
                                             : 'border-gray-200 bg-gray-50 text-gray-500'
                                     : 'border-orange-200 bg-white hover:border-orange-300 focus:border-orange-400 focus:ring-orange-200/50'), placeholder: "..." }), isReviewMode && (isCorrect || isWrong) && (_jsx("span", { className: cn('absolute -right-1.5 -top-1.5 flex h-4 w-4 items-center justify-center rounded-full shadow-sm ring-2 ring-white', isCorrect ? 'bg-emerald-500' : 'bg-red-500'), children: isCorrect ? (_jsx(Check, { className: "h-2.5 w-2.5 text-white" })) : (_jsx(X, { className: "h-2.5 w-2.5 text-white" })) }))] }, partIndex));
                 }
@@ -162,11 +163,11 @@ export function FillInBlankClient({ questionData, questionConfig, onSubmit, isRe
                     const userInput = answers[blankIndex] || '';
                     const isCorrect = isReviewMode && isAnswerCorrect(blankIndex, userInput);
                     const isWrong = isReviewMode && userInput && !isCorrect;
-                    return (_jsxs("span", { className: "relative inline-flex items-center mx-0.5", children: [_jsx(Input, { value: userInput, onChange: (e) => handleAnswerChange(blankIndex, e.target.value), disabled: isReviewMode, className: cn('h-9 w-32 text-center text-sm font-medium rounded-lg border-2 transition-all duration-200', 'focus:ring-2 focus:ring-offset-1 focus:outline-none', isReviewMode
+                    return (_jsxs("span", { className: "relative inline-flex items-center mx-0.5", children: [_jsx(Input, { value: userInput, onChange: (e) => handleAnswerChange(blankIndex, e.target.value), disabled: isReviewMode, className: cn('h-8 w-32 text-center text-sm font-medium rounded-md border px-3 py-1.5 transition-all duration-200', 'focus:ring-2 focus:ring-offset-1 focus:outline-none', isReviewMode
                                     ? isCorrect
-                                        ? 'border-emerald-400 bg-emerald-50 text-emerald-700'
+                                        ? 'border-green-400 bg-green-50 text-green-800'
                                         : isWrong
-                                            ? 'border-red-400 bg-red-50 text-red-700'
+                                            ? 'border-red-400 bg-red-50 text-red-800'
                                             : 'border-gray-200 bg-gray-50 text-gray-500'
                                     : 'border-orange-200 bg-white hover:border-orange-300 focus:border-orange-400 focus:ring-orange-200/50'), placeholder: "..." }), isReviewMode && (isCorrect || isWrong) && (_jsx("span", { className: cn('absolute -right-1.5 -top-1.5 flex h-4 w-4 items-center justify-center rounded-full shadow-sm ring-2 ring-white', isCorrect ? 'bg-emerald-500' : 'bg-red-500'), children: isCorrect ? (_jsx(Check, { className: "h-2.5 w-2.5 text-white" })) : (_jsx(X, { className: "h-2.5 w-2.5 text-white" })) }))] }, partIdx));
                 }
@@ -208,21 +209,17 @@ export function FillInBlankClient({ questionData, questionConfig, onSubmit, isRe
     // =====================================================
     if (!isLegacyFormat) {
         const hasAnyAnswer = placeholderIndices.some(idx => (answers[idx] || '').trim());
-        return (_jsxs("div", { className: "space-y-4", children: [renderGroupBlock(), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all hover:shadow-md", 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-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-gradient-to-br from-orange-500 to-amber-600 text-white", children: _jsx(PenLine, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-semibold text-gray-700", children: "\u0110i\u1EC1n v\u00E0o ch\u1ED7 tr\u1ED1ng" }), _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-700 ring-1 ring-inset ring-orange-200/60", children: [_jsx(Hash, { className: "h-3 w-3" }), placeholderIndices.length] })] })] }), isReviewMode && score && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-bold', score.correct === score.total
-                                        ? 'bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200/60'
-                                        : score.correct >= score.total / 2
-                                            ? 'bg-yellow-100 text-yellow-700 ring-1 ring-yellow-200/60'
-                                            : 'bg-red-100 text-red-700 ring-1 ring-red-200/60'), children: [score.correct === score.total && _jsx(Check, { className: "h-3 w-3" }), score.correct, "/", score.total, " \u0111\u00FAng"] }))] }), _jsxs("div", { className: "space-y-3 p-3", children: [showAudio && cleanAudioUrl && (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-indigo-100 bg-gradient-to-r from-indigo-50 to-blue-50 p-3", children: [_jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-indigo-100", children: _jsx(Volume2, { className: "h-4 w-4 text-indigo-600" }) }), _jsx("audio", { controls: true, className: "h-9 w-full", src: audioPreviewUrl || cleanAudioUrl, preload: "metadata", children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." })] })), _jsx("div", { className: "rounded-xl bg-gradient-to-r from-orange-50/80 to-amber-50/50 p-5 border border-orange-100/80", children: renderQuestionWithBlanks() }), renderQuestionImage(), renderHints(), isReviewMode && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-white overflow-hidden shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-gray-100 bg-gradient-to-r from-slate-50 to-gray-50 px-4 py-2.5", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-slate-500 text-white", children: _jsx(ClipboardList, { className: "h-3 w-3" }) }), _jsx("h4", { className: "text-xs font-semibold text-gray-600 uppercase tracking-wider", children: "Chi ti\u1EBFt \u0111\u00E1p \u00E1n" })] }), _jsx("div", { className: "p-4 space-y-2.5", children: placeholderIndices.map((idx) => {
-                                                const userInput = answers[idx] || '';
-                                                const correctAnswer = formatBlankAnswersDisplay(correctAnswersMatrix[idx]) || '—';
-                                                const isCorrect = isAnswerCorrect(idx, userInput);
-                                                const hasInput = userInput.trim().length > 0;
-                                                return (_jsxs("div", { className: cn('rounded-lg border p-3 transition-colors', isCorrect
-                                                        ? 'border-emerald-200 bg-emerald-50/50'
-                                                        : hasInput
-                                                            ? 'border-red-200 bg-red-50/50'
-                                                            : 'border-gray-100 bg-gray-50/50'), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-orange-100 text-xs font-bold text-orange-600 ring-1 ring-orange-200/60", children: idx + 1 }), _jsxs("span", { className: "text-sm text-gray-500", children: ["Ch\u1ED7 tr\u1ED1ng ", idx + 1] })] }), _jsx("div", { className: cn('flex items-center gap-1 text-xs font-semibold', isCorrect ? 'text-emerald-600' : hasInput ? 'text-red-600' : 'text-gray-400'), children: isCorrect ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "h-3.5 w-3.5" }), " \u0110\u00FAng"] })) : hasInput ? (_jsxs(_Fragment, { children: [_jsx(X, { className: "h-3.5 w-3.5" }), " Sai"] })) : ('Bỏ trống') })] }), _jsxs("div", { className: "mt-2 grid grid-cols-2 gap-2 text-sm", children: [_jsxs("div", { className: "flex items-center justify-between rounded-md bg-white px-3 py-2 border border-gray-100", children: [_jsx("span", { className: "text-gray-500 text-xs", children: "\u0110\u00E3 nh\u1EADp" }), _jsx("span", { className: cn('font-semibold', isCorrect ? 'text-emerald-600' : hasInput ? 'text-red-600' : 'text-gray-400 italic'), children: userInput || '—' })] }), _jsxs("div", { className: "flex items-center justify-between rounded-md bg-emerald-50 px-3 py-2 border border-emerald-100", children: [_jsx("span", { className: "text-gray-500 text-xs", children: "\u0110\u00E1p \u00E1n" }), _jsx("span", { className: "font-semibold text-emerald-600", children: correctAnswer })] })] })] }, idx));
-                                            }) })] })), !isReviewMode && !hasAnyAnswer && (_jsxs("div", { className: "rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3 flex items-center gap-2.5", children: [_jsx("div", { className: "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white", children: _jsx(AlertTriangle, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-sm text-amber-800", children: "Vui l\u00F2ng \u0111i\u1EC1n c\u00E2u tr\u1EA3 l\u1EDDi v\u00E0o c\u00E1c ch\u1ED7 tr\u1ED1ng" })] }))] })] }), renderExplanation()] }));
+        return (_jsxs("div", { className: "space-y-4", children: [renderGroupBlock(), _jsxs(KidQuestionCard, { icon: _jsx(PenLine, { className: "h-3.5 w-3.5" }), title: "\u0110i\u1EC1n v\u00E0o ch\u1ED7 tr\u1ED1ng", points: questionData.points, isExample: questionData.isExample, review: isReviewMode && hasAnyAnswer ? (score && score.correct === score.total ? 'correct' : 'wrong') : null, headerExtra: _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-700", children: [_jsx(Hash, { className: "h-3 w-3" }), placeholderIndices.length] }), children: [showAudio && cleanAudioUrl && (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-indigo-100 bg-gradient-to-r from-indigo-50 to-blue-50 p-3", children: [_jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-indigo-100", children: _jsx(Volume2, { className: "h-4 w-4 text-indigo-600" }) }), _jsx("audio", { controls: true, className: "h-9 w-full", src: audioPreviewUrl || cleanAudioUrl, preload: "metadata", children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." })] })), _jsx(KidPrompt, { children: renderQuestionWithBlanks() }), renderQuestionImage(), renderHints(), isReviewMode && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-white overflow-hidden shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-gray-100 bg-gradient-to-r from-slate-50 to-gray-50 px-4 py-2.5", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-slate-500 text-white", children: _jsx(ClipboardList, { className: "h-3 w-3" }) }), _jsx("h4", { className: "text-xs font-semibold text-gray-600 uppercase tracking-wider", children: "Chi ti\u1EBFt \u0111\u00E1p \u00E1n" })] }), _jsx("div", { className: "p-4 space-y-2.5", children: placeholderIndices.map((idx) => {
+                                        const userInput = answers[idx] || '';
+                                        const correctAnswer = formatBlankAnswersDisplay(correctAnswersMatrix[idx]) || '—';
+                                        const isCorrect = isAnswerCorrect(idx, userInput);
+                                        const hasInput = userInput.trim().length > 0;
+                                        return (_jsxs("div", { className: cn('rounded-lg border p-3 transition-colors', isCorrect
+                                                ? 'border-emerald-200 bg-emerald-50/50'
+                                                : hasInput
+                                                    ? 'border-red-200 bg-red-50/50'
+                                                    : 'border-gray-100 bg-gray-50/50'), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-orange-100 text-xs font-bold text-orange-600 ring-1 ring-orange-200/60", children: idx + 1 }), _jsxs("span", { className: "text-sm text-gray-500", children: ["Ch\u1ED7 tr\u1ED1ng ", idx + 1] })] }), _jsx("div", { className: cn('flex items-center gap-1 text-xs font-semibold', isCorrect ? 'text-emerald-600' : hasInput ? 'text-red-600' : 'text-gray-400'), children: isCorrect ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "h-3.5 w-3.5" }), " \u0110\u00FAng"] })) : hasInput ? (_jsxs(_Fragment, { children: [_jsx(X, { className: "h-3.5 w-3.5" }), " Sai"] })) : ('Bỏ trống') })] }), _jsxs("div", { className: "mt-2 grid grid-cols-2 gap-2 text-sm", children: [_jsxs("div", { className: "flex items-center justify-between rounded-md bg-white px-3 py-2 border border-gray-100", children: [_jsx("span", { className: "text-gray-500 text-xs", children: "\u0110\u00E3 nh\u1EADp" }), _jsx("span", { className: cn('font-semibold', isCorrect ? 'text-emerald-600' : hasInput ? 'text-red-600' : 'text-gray-400 italic'), children: userInput || '—' })] }), _jsxs("div", { className: "flex items-center justify-between rounded-md bg-emerald-50 px-3 py-2 border border-emerald-100", children: [_jsx("span", { className: "text-gray-500 text-xs", children: "\u0110\u00E1p \u00E1n" }), _jsx("span", { className: "font-semibold text-emerald-600", children: correctAnswer })] })] })] }, idx));
+                                    }) })] })), !isReviewMode && !hasAnyAnswer && (_jsxs("div", { className: "flex items-center gap-2 rounded-md border border-amber-200 bg-amber-50 px-2.5 py-1.5", children: [_jsx("div", { className: "flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white", children: _jsx("span", { className: "text-[10px] font-bold", children: "!" }) }), _jsx("span", { className: "text-xs text-amber-800", children: "Vui l\u00F2ng \u0111i\u1EC1n c\u00E2u tr\u1EA3 l\u1EDDi v\u00E0o c\u00E1c ch\u1ED7 tr\u1ED1ng" })] }))] }), renderExplanation()] }));
     }
     // =====================================================
     //  LEGACY FORMAT RENDER
@@ -231,15 +228,13 @@ export function FillInBlankClient({ questionData, questionConfig, onSubmit, isRe
                 const userInput = answers[index] || '';
                 const isCorrect = isReviewMode && isAnswerCorrect(index, userInput);
                 const hasAnswered = userInput.trim() !== '';
-                return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all hover:shadow-md", 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-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-gradient-to-br from-orange-500 to-amber-600 text-white", children: _jsx(PenLine, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-semibold text-gray-700", children: ["C\u00E2u ", index + 1, ": \u0110i\u1EC1n v\u00E0o ch\u1ED7 tr\u1ED1ng"] })] }), isReviewMode && hasAnswered && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-bold', isCorrect
-                                        ? 'bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200/60'
-                                        : 'bg-red-100 text-red-700 ring-1 ring-red-200/60'), children: [isCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), isCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "space-y-3 p-3", children: [index === 0 && showAudio && cleanAudioUrl && (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-indigo-100 bg-gradient-to-r from-indigo-50 to-blue-50 p-3", children: [_jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-indigo-100", children: _jsx(Volume2, { className: "h-4 w-4 text-indigo-600" }) }), _jsx("audio", { controls: true, className: "h-9 w-full", src: audioPreviewUrl || cleanAudioUrl, preload: "metadata", children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." })] })), _jsx("div", { className: "rounded-xl bg-gradient-to-r from-orange-50/80 to-amber-50/50 p-5 border border-orange-100/80", children: renderLegacyBlank(blank.text, blank.id, index) }), index === 0 && renderQuestionImage(), index === 0 && renderHints(), isReviewMode && (_jsx("div", { className: cn('rounded-xl border p-3 transition-colors', isCorrect
-                                        ? 'border-emerald-200 bg-emerald-50/50'
-                                        : hasAnswered
-                                            ? 'border-red-200 bg-red-50/50'
-                                            : 'border-gray-100 bg-gray-50/50'), children: _jsxs("div", { className: "space-y-2.5", children: [_jsxs("div", { className: "flex items-center justify-between rounded-md bg-white p-3 border border-gray-100", children: [_jsx("span", { className: "text-sm text-gray-500", children: "\u0110\u00E3 nh\u1EADp:" }), _jsx("span", { className: cn('text-sm font-semibold', isCorrect ? 'text-emerald-600' : hasAnswered ? 'text-red-600' : 'text-gray-400 italic'), children: userInput || '—' })] }), _jsxs("div", { className: "flex items-center justify-between rounded-md bg-emerald-50 p-3 border border-emerald-100", children: [_jsx("span", { className: "text-sm text-gray-500", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng:" }), _jsx("span", { className: "text-sm font-semibold text-emerald-600", children: formatBlankAnswersDisplay(blank.correctAnswers ?? normalizeBlankAnswers(blank.correctAnswer)) || '—' })] }), _jsxs("div", { className: cn('flex items-center justify-between rounded-md p-3 border', isCorrect
-                                                    ? 'bg-emerald-50 border-emerald-200'
-                                                    : 'bg-red-50 border-red-200'), children: [_jsx("span", { className: "text-sm text-gray-500", children: "K\u1EBFt qu\u1EA3:" }), _jsx("div", { className: cn('flex items-center gap-1.5 text-sm font-bold', isCorrect ? 'text-emerald-600' : 'text-red-600'), children: isCorrect ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "h-4 w-4" }), " Ch\u00EDnh x\u00E1c"] })) : (_jsxs(_Fragment, { children: [_jsx(X, { className: "h-4 w-4" }), " Sai"] })) })] })] }) })), !isReviewMode && !hasAnswered && (_jsxs("div", { className: "rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3 flex items-center gap-2.5", children: [_jsx("div", { className: "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white", children: _jsx(AlertTriangle, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-sm text-amber-800", children: "Vui l\u00F2ng \u0111i\u1EC1n c\u00E2u tr\u1EA3 l\u1EDDi" })] }))] })] }, blank.id));
+                return (_jsxs(KidQuestionCard, { icon: _jsx(PenLine, { className: "h-3.5 w-3.5" }), title: `Câu ${index + 1}: Điền vào chỗ trống`, review: isReviewMode && hasAnswered ? (isCorrect ? 'correct' : 'wrong') : null, children: [index === 0 && showAudio && cleanAudioUrl && (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-indigo-100 bg-gradient-to-r from-indigo-50 to-blue-50 p-3", children: [_jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-indigo-100", children: _jsx(Volume2, { className: "h-4 w-4 text-indigo-600" }) }), _jsx("audio", { controls: true, className: "h-9 w-full", src: audioPreviewUrl || cleanAudioUrl, preload: "metadata", children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." })] })), _jsx(KidPrompt, { children: renderLegacyBlank(blank.text, blank.id, index) }), index === 0 && renderQuestionImage(), index === 0 && renderHints(), isReviewMode && (_jsx("div", { className: cn('rounded-xl border p-3 transition-colors', isCorrect
+                                ? 'border-emerald-200 bg-emerald-50/50'
+                                : hasAnswered
+                                    ? 'border-red-200 bg-red-50/50'
+                                    : 'border-gray-100 bg-gray-50/50'), children: _jsxs("div", { className: "space-y-2.5", children: [_jsxs("div", { className: "flex items-center justify-between rounded-md bg-white p-3 border border-gray-100", children: [_jsx("span", { className: "text-sm text-gray-500", children: "\u0110\u00E3 nh\u1EADp:" }), _jsx("span", { className: cn('text-sm font-semibold', isCorrect ? 'text-emerald-600' : hasAnswered ? 'text-red-600' : 'text-gray-400 italic'), children: userInput || '—' })] }), _jsxs("div", { className: "flex items-center justify-between rounded-md bg-emerald-50 p-3 border border-emerald-100", children: [_jsx("span", { className: "text-sm text-gray-500", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng:" }), _jsx("span", { className: "text-sm font-semibold text-emerald-600", children: formatBlankAnswersDisplay(blank.correctAnswers ?? normalizeBlankAnswers(blank.correctAnswer)) || '—' })] }), _jsxs("div", { className: cn('flex items-center justify-between rounded-md p-3 border', isCorrect
+                                            ? 'bg-emerald-50 border-emerald-200'
+                                            : 'bg-red-50 border-red-200'), children: [_jsx("span", { className: "text-sm text-gray-500", children: "K\u1EBFt qu\u1EA3:" }), _jsx("div", { className: cn('flex items-center gap-1.5 text-sm font-bold', isCorrect ? 'text-emerald-600' : 'text-red-600'), children: isCorrect ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "h-4 w-4" }), " Ch\u00EDnh x\u00E1c"] })) : (_jsxs(_Fragment, { children: [_jsx(X, { className: "h-4 w-4" }), " Sai"] })) })] })] }) })), !isReviewMode && !hasAnswered && (_jsxs("div", { className: "flex items-center gap-2 rounded-md border border-amber-200 bg-amber-50 px-2.5 py-1.5", children: [_jsx("div", { className: "flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white", children: _jsx("span", { className: "text-[10px] font-bold", children: "!" }) }), _jsx("span", { className: "text-xs text-amber-800", children: "Vui l\u00F2ng \u0111i\u1EC1n c\u00E2u tr\u1EA3 l\u1EDDi" })] }))] }, blank.id));
             }), isReviewMode && score && (questionData.blanks?.length || 0) > 1 && (_jsx("div", { className: cn('overflow-hidden rounded-xl border shadow-sm', score.correct === score.total
                     ? 'border-emerald-200 bg-gradient-to-r from-emerald-50 to-green-50'
                     : score.correct >= score.total / 2

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

@@ -0,0 +1,6 @@
+type FillInBlankAnswerKeyProps = {
+    answersByBlank: string[][];
+    blankIndices: number[];
+};
+export declare function FillInBlankAnswerKey({ answersByBlank, blankIndices, }: FillInBlankAnswerKeyProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { acceptedAnswerList } from './blank-utils';
+function AnswerOrList({ answers }) {
+    if (answers.length === 0) {
+        return _jsx("span", { className: "font-semibold text-green-900", children: "(tr\u1ED1ng)" });
+    }
+    return (_jsx(_Fragment, { children: answers.map((answer, index) => (_jsxs(Fragment, { children: [index > 0 && (_jsx("span", { className: "mx-1 text-xs font-normal italic text-green-600", children: "ho\u1EB7c" })), _jsx("span", { className: "font-semibold text-green-900", children: answer })] }, `${answer}-${index}`))) }));
+}
+export function FillInBlankAnswerKey({ answersByBlank, blankIndices, }) {
+    const rows = blankIndices.map((blankIndex, order) => ({
+        order: order + 1,
+        answers: acceptedAnswerList(answersByBlank[blankIndex]),
+    }));
+    const manyBlanks = rows.length > 1;
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "text-xs font-semibold text-green-800", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("div", { className: "grid grid-cols-2 gap-1.5", children: rows.map((row) => (_jsxs("div", { className: "min-w-0 rounded-md border border-green-200 bg-white px-2 py-1.5 text-sm", children: [manyBlanks && (_jsxs("div", { className: "text-[10px] font-semibold uppercase tracking-wide text-green-600", children: ["Ch\u1ED7 tr\u1ED1ng ", row.order] })), _jsx("div", { className: "flex flex-wrap items-baseline", children: _jsx(AnswerOrList, { answers: row.answers }) })] }, row.order))) })] }));
+}