@tinyweb_dev/oe-exam-sdk 0.2.0 → 0.2.2

package/dist/components/questions/types/find-words-in-matrix/FindWordsInMatrixCreator.js

@@ -0,0 +1,302 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { Button } from '../../../../components/ui/button';
+import { Input } from '../../../../components/ui/input';
+import { Label } from '../../../../components/ui/label';
+import { Card } from '../../../../components/ui/card';
+import { Badge } from '../../../../components/ui/badge';
+import { Checkbox } from '../../../../components/ui/checkbox';
+import { Textarea } from '../../../../components/ui/textarea';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../../../components/ui/select';
+import { Plus, Trash2, Sparkles, Clipboard, MousePointer, RotateCcw, Layers, ListFilter, FolderPlus, } from 'lucide-react';
+const PALETTE = [
+    '#f59e0b', '#10b981', '#0ea5e9', '#8b5cf6', '#f43f5e',
+    '#6366f1', '#14b8a6', '#eab308', '#ec4899', '#06b6d4',
+];
+export function FindWordsInMatrixCreator({ initialData, onChange, onUnsavedChangesChange, }) {
+    // Parse initial state
+    const parseInitial = () => {
+        const content = initialData?.content || {};
+        const answer = initialData?.answer || {};
+        const type = content.type || (Array.isArray(content.categories) && content.categories.length > 0 ? 'CATEGORIZE' : 'WORD_BANK');
+        const rows = Number(content.gridSize?.rows) || (Array.isArray(content.grid) ? content.grid.length : 14);
+        const cols = Number(content.gridSize?.cols) || (Array.isArray(content.grid?.[0]) ? content.grid[0].length : 14);
+        let grid = [];
+        if (Array.isArray(content.grid) && content.grid.length > 0) {
+            grid = content.grid.map((row) => Array.isArray(row) ? [...row].map((c) => String(c || '').toUpperCase()) : Array(cols).fill(''));
+        }
+        else {
+            grid = Array.from({ length: rows }, () => Array(cols).fill(''));
+        }
+        const categories = Array.isArray(content.categories) && content.categories.length > 0
+            ? content.categories
+            : [
+                { id: 'cat_1', name: 'Plants' },
+                { id: 'cat_2', name: 'Animals' },
+            ];
+        const words = [];
+        if (Array.isArray(content.wordBank)) {
+            const correctMap = new Map();
+            if (Array.isArray(answer.words)) {
+                answer.words.forEach((cw) => {
+                    if (cw.wordId && Array.isArray(cw.path)) {
+                        correctMap.set(cw.wordId, cw);
+                    }
+                });
+            }
+            content.wordBank.forEach((wb) => {
+                const isEx = Boolean(wb.isExample);
+                const correctInfo = correctMap.get(wb.id);
+                let path = correctInfo?.path;
+                let categoryId = wb.categoryId || correctInfo?.categoryId;
+                if (isEx && content.exampleSelection?.wordId === wb.id) {
+                    path = content.exampleSelection.path;
+                    if (content.exampleSelection.categoryId) {
+                        categoryId = content.exampleSelection.categoryId;
+                    }
+                }
+                words.push({
+                    id: wb.id || `w_${Math.random().toString(36).substring(2, 9)}`,
+                    word: wb.word || '',
+                    isExample: isEx,
+                    ...(categoryId ? { categoryId } : {}),
+                    path: path || [],
+                });
+            });
+        }
+        return {
+            type,
+            title: content.title || '',
+            instruction: initialData?.instruction || 'Find these words in the wordsearch box.',
+            rows,
+            cols,
+            grid,
+            categories,
+            words,
+            points: Number(initialData?.points) || 1,
+            explanation: initialData?.explanation || '',
+        };
+    };
+    const [state, setState] = useState(parseInitial);
+    const [selectedWordIdx, setSelectedWordIdx] = useState(null);
+    const [isPickingPath, setIsPickingPath] = useState(false);
+    const [pasteModalOpen, setPasteModalOpen] = useState(false);
+    const [pasteText, setPasteText] = useState('');
+    const updateState = useCallback((updater) => {
+        setState((prev) => {
+            const next = updater(prev);
+            if (onChange) {
+                onChange({
+                    content: {
+                        type: next.type,
+                        title: next.title,
+                        gridSize: { rows: next.rows, cols: next.cols },
+                        grid: next.grid,
+                        ...(next.type === 'CATEGORIZE' ? { categories: next.categories } : {}),
+                        words: next.words,
+                    },
+                    answer: {
+                        words: next.words
+                            .filter((w) => !w.isExample && w.path && w.path.length > 0)
+                            .map((w) => ({
+                            wordId: w.id,
+                            word: w.word,
+                            ...(w.categoryId ? { categoryId: w.categoryId } : {}),
+                            path: w.path,
+                        })),
+                    },
+                    points: next.points,
+                    explanation: next.explanation,
+                });
+            }
+            onUnsavedChangesChange?.(true);
+            return next;
+        });
+    }, [onChange, onUnsavedChangesChange]);
+    // Resize Grid helper
+    const handleResize = (newRows, newCols) => {
+        const r = Math.max(4, Math.min(25, newRows));
+        const c = Math.max(4, Math.min(25, newCols));
+        updateState((prev) => {
+            const newGrid = Array.from({ length: r }, (_, rIdx) => Array.from({ length: c }, (_, cIdx) => prev.grid[rIdx]?.[cIdx] || ''));
+            return { ...prev, rows: r, cols: c, grid: newGrid };
+        });
+    };
+    // Cell character change
+    const handleCellChange = (rIdx, cIdx, val) => {
+        const char = val.slice(-1).toUpperCase();
+        updateState((prev) => {
+            const newGrid = prev.grid.map((row) => [...row]);
+            newGrid[rIdx][cIdx] = char;
+            return { ...prev, grid: newGrid };
+        });
+    };
+    // Fill empty with random letters
+    const handleRandomFill = () => {
+        const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+        updateState((prev) => {
+            const newGrid = prev.grid.map((row) => row.map((cell) => (cell.trim() ? cell : letters[Math.floor(Math.random() * letters.length)])));
+            return { ...prev, grid: newGrid };
+        });
+    };
+    // Paste matrix string
+    const handleApplyPaste = () => {
+        const lines = pasteText
+            .split('\n')
+            .map((l) => l.trim().replace(/\s+/g, '').toUpperCase())
+            .filter(Boolean);
+        if (lines.length === 0)
+            return;
+        const r = lines.length;
+        const c = Math.max(...lines.map((l) => l.length));
+        const newGrid = Array.from({ length: r }, (_, rIdx) => Array.from({ length: c }, (_, cIdx) => lines[rIdx]?.[cIdx] || ''));
+        updateState((prev) => ({
+            ...prev,
+            rows: r,
+            cols: c,
+            grid: newGrid,
+        }));
+        setPasteModalOpen(false);
+        setPasteText('');
+    };
+    // Category management
+    const handleAddCategory = () => {
+        const newCat = {
+            id: `cat_${Date.now()}_${Math.random().toString(36).substring(2, 5)}`,
+            name: `Nhóm #${state.categories.length + 1}`,
+        };
+        updateState((prev) => ({
+            ...prev,
+            categories: [...prev.categories, newCat],
+        }));
+    };
+    const handleRemoveCategory = (catId) => {
+        updateState((prev) => ({
+            ...prev,
+            categories: prev.categories.filter((c) => c.id !== catId),
+            words: prev.words.map((w) => (w.categoryId === catId ? { ...w, categoryId: undefined } : w)),
+        }));
+    };
+    // Add word to word bank
+    const handleAddWord = () => {
+        const newWord = {
+            id: `w_${Date.now()}_${Math.random().toString(36).substring(2, 6)}`,
+            word: '',
+            isExample: false,
+            ...(state.type === 'CATEGORIZE' && state.categories[0] ? { categoryId: state.categories[0].id } : {}),
+            path: [],
+        };
+        updateState((prev) => ({ ...prev, words: [...prev.words, newWord] }));
+        setSelectedWordIdx(state.words.length);
+    };
+    // Remove word
+    const handleRemoveWord = (idx) => {
+        updateState((prev) => ({
+            ...prev,
+            words: prev.words.filter((_, i) => i !== idx),
+        }));
+        if (selectedWordIdx === idx) {
+            setSelectedWordIdx(null);
+            setIsPickingPath(false);
+        }
+    };
+    // Handle cell click during Path Picking Mode
+    const handleCellClickForPath = (r, c) => {
+        if (selectedWordIdx === null || !isPickingPath)
+            return;
+        const activeWord = state.words[selectedWordIdx];
+        if (!activeWord)
+            return;
+        const currentPath = activeWord.path || [];
+        const cellIdx = currentPath.findIndex((item) => item.row === r && item.col === c);
+        let nextPath;
+        if (cellIdx >= 0) {
+            nextPath = currentPath.filter((_, i) => i !== cellIdx);
+        }
+        else {
+            nextPath = [...currentPath, { row: r, col: c }];
+        }
+        updateState((prev) => {
+            const nextWords = [...prev.words];
+            nextWords[selectedWordIdx] = { ...activeWord, path: nextPath };
+            return { ...prev, words: nextWords };
+        });
+    };
+    // Path highlight mapping
+    const cellColorMap = {};
+    state.words.forEach((w, idx) => {
+        const color = PALETTE[idx % PALETTE.length];
+        w.path?.forEach((coord) => {
+            cellColorMap[`${coord.row}-${coord.col}`] = { color, word: w.word };
+        });
+    });
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { className: "p-4 space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { className: "font-semibold text-sm mb-2 block", children: "D\u1EA1ng b\u00E0i t\u1EADp (Type / Mode)" }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [_jsxs("button", { type: "button", onClick: () => updateState((p) => ({ ...p, type: 'WORD_BANK' })), className: `flex items-center gap-3 p-3 rounded-xl border text-left transition-all ${state.type === 'WORD_BANK'
+                                            ? 'border-blue-500 bg-blue-50/60 dark:bg-blue-950/30 text-blue-900 dark:text-blue-200 ring-2 ring-blue-400'
+                                            : 'border-gray-200 hover:bg-gray-50 dark:border-gray-700 text-gray-700 dark:text-gray-300'}`, children: [_jsx("div", { className: "p-2 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-600", children: _jsx(ListFilter, { className: "h-5 w-5" }) }), _jsxs("div", { children: [_jsx("div", { className: "font-bold text-sm", children: "1. Danh s\u00E1ch t\u1EEB (Word Bank)" }), _jsx("div", { className: "text-xs text-gray-500", children: "T\u00ECm c\u00E1c t\u1EEB c\u00F3 s\u1EB5n trong b\u1EA3ng ch\u1EEF c\u00E1i (VD: Gadgets)." })] })] }), _jsxs("button", { type: "button", onClick: () => updateState((p) => ({ ...p, type: 'CATEGORIZE' })), className: `flex items-center gap-3 p-3 rounded-xl border text-left transition-all ${state.type === 'CATEGORIZE'
+                                            ? 'border-emerald-500 bg-emerald-50/60 dark:bg-emerald-950/30 text-emerald-900 dark:text-emerald-200 ring-2 ring-emerald-400'
+                                            : 'border-gray-200 hover:bg-gray-50 dark:border-gray-700 text-gray-700 dark:text-gray-300'}`, children: [_jsx("div", { className: "p-2 rounded-lg bg-emerald-100 dark:bg-emerald-900 text-emerald-600", children: _jsx(Layers, { className: "h-5 w-5" }) }), _jsxs("div", { children: [_jsx("div", { className: "font-bold text-sm", children: "2. T\u00ECm t\u1EEB & Ph\u00E2n nh\u00F3m (Categorize)" }), _jsx("div", { className: "text-xs text-gray-500", children: "T\u00ECm t\u1EEB \u1EA9n v\u00E0 x\u1EBFp v\u00E0o c\u00E1c nh\u00F3m ti\u00EAu \u0111\u1EC1 (VD: Plants / Animals)." })] })] })] })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 pt-2 border-t", children: [_jsxs("div", { className: "md:col-span-2", children: [_jsx(Label, { className: "font-semibold", children: "Ti\u00EAu \u0111\u1EC1 b\u00E0i t\u1EADp" }), _jsx(Input, { value: state.title || '', onChange: (e) => updateState((p) => ({ ...p, title: e.target.value })), placeholder: state.type === 'CATEGORIZE' ? 'VD: Plants and Animals Word Search' : 'VD: Technology Gadgets Word Search', className: "mt-1" })] }), _jsxs("div", { children: [_jsx(Label, { className: "font-semibold", children: "K\u00EDch th\u01B0\u1EDBc ma tr\u1EADn (H\u00E0ng x C\u1ED9t)" }), _jsxs("div", { className: "flex items-center gap-2 mt-1", children: [_jsx(Input, { type: "number", min: 4, max: 25, value: state.rows, onChange: (e) => handleResize(Number(e.target.value), state.cols), className: "w-20 text-center font-bold" }), _jsx("span", { className: "font-bold text-gray-400", children: "\u00D7" }), _jsx(Input, { type: "number", min: 4, max: 25, value: state.cols, onChange: (e) => handleResize(state.rows, Number(e.target.value)), className: "w-20 text-center font-bold" })] })] })] })] }), state.type === 'CATEGORIZE' && (_jsxs(Card, { className: "p-4 space-y-3 bg-emerald-50/30 dark:bg-emerald-950/10 border-emerald-200 dark:border-emerald-800", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsxs("h4", { className: "font-bold text-sm text-emerald-900 dark:text-emerald-300 flex items-center gap-1.5", children: [_jsx(Layers, { className: "h-4 w-4 text-emerald-600" }), "C\u00E1c nh\u00F3m danh m\u1EE5c (Categories / Headings)"] }), _jsx("p", { className: "text-xs text-gray-500", children: "T\u1EA1o c\u00E1c c\u1ED9t ti\u00EAu \u0111\u1EC1 \u0111\u1EC3 h\u1ECDc sinh ph\u00E2n lo\u1EA1i t\u1EEB v\u00E0o (t\u1ED1i thi\u1EC3u 2 nh\u00F3m)." })] }), _jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: handleAddCategory, className: "gap-1 text-xs", children: [_jsx(FolderPlus, { className: "h-3.5 w-3.5" }), " Th\u00EAm nh\u00F3m"] })] }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3", children: state.categories.map((cat, idx) => (_jsxs("div", { className: "flex items-center gap-2 p-2.5 bg-white dark:bg-gray-900 rounded-lg border shadow-xs", children: [_jsx(Badge, { variant: "secondary", className: "font-mono text-xs", children: idx + 1 }), _jsx(Input, { value: cat.name, onChange: (e) => {
+                                        const val = e.target.value;
+                                        updateState((p) => ({
+                                            ...p,
+                                            categories: p.categories.map((c, i) => (i === idx ? { ...c, name: val } : c)),
+                                        }));
+                                    }, placeholder: "T\u00EAn nh\u00F3m (VD: Plants)", className: "h-8 text-sm font-semibold" }), state.categories.length > 2 && (_jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => handleRemoveCategory(cat.id), className: "h-8 w-8 p-0 text-red-500 hover:text-red-700", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }, cat.id || idx))) })] })), _jsxs(Card, { className: "p-4 space-y-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 border-b pb-3", children: [_jsxs("div", { children: [_jsxs("h4", { className: "font-bold text-base text-gray-800 dark:text-gray-200", children: ["Ma tr\u1EADn ch\u1EEF c\u00E1i (", state.rows, " h\u00E0ng \u00D7 ", state.cols, " c\u1ED9t)"] }), _jsx("p", { className: "text-xs text-gray-500", children: isPickingPath
+                                            ? `👉 Đang gán vị trí cho từ: "${state.words[selectedWordIdx]?.word}". Hãy click các ô trên lưới theo thứ tự.`
+                                            : 'Nhập trực tiếp ký tự vào ô, hoặc dùng các nút công cụ bên phải.' })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setPasteModalOpen(!pasteModalOpen), className: "gap-1 text-xs", children: [_jsx(Clipboard, { className: "h-3.5 w-3.5" }), "Paste ma tr\u1EADn"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: handleRandomFill, className: "gap-1 text-xs text-emerald-600 hover:text-emerald-700", children: [_jsx(Sparkles, { className: "h-3.5 w-3.5" }), "L\u1EA5p ng\u1EABu nhi\u00EAn (A-Z)"] })] })] }), pasteModalOpen && (_jsxs("div", { className: "p-3 bg-blue-50 dark:bg-blue-950/30 rounded-lg border border-blue-200 space-y-2", children: [_jsx(Label, { className: "text-xs font-bold text-blue-900 dark:text-blue-200", children: "D\u00E1n v\u0103n b\u1EA3n ma tr\u1EADn (m\u1ED7i d\u00F2ng 1 h\u00E0ng):" }), _jsx(Textarea, { value: pasteText, onChange: (e) => setPasteText(e.target.value), placeholder: `SEMONOFFP\nCROCODILE\n...`, rows: 4, className: "font-mono text-xs" }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: () => setPasteModalOpen(false), children: "H\u1EE7y" }), _jsx(Button, { size: "sm", onClick: handleApplyPaste, children: "\u00C1p d\u1EE5ng v\u00E0o ma tr\u1EADn" })] })] })), _jsx("div", { className: "overflow-x-auto pb-2 flex justify-center", children: _jsx("div", { className: "inline-grid gap-1 p-2 bg-gray-100 dark:bg-gray-900 rounded-lg border border-gray-300", style: {
+                                gridTemplateColumns: `repeat(${state.cols}, minmax(0, 1fr))`,
+                            }, children: Array.from({ length: state.rows }).map((_, rIdx) => {
+                                const r = rIdx + 1;
+                                return Array.from({ length: state.cols }).map((_, cIdx) => {
+                                    const c = cIdx + 1;
+                                    const char = state.grid[rIdx]?.[cIdx] || '';
+                                    const highlight = cellColorMap[`${r}-${c}`];
+                                    return (_jsx("div", { className: "relative", children: _jsx("input", { type: "text", maxLength: 1, value: char, onChange: (e) => handleCellChange(rIdx, cIdx, e.target.value), onClick: () => isPickingPath && handleCellClickForPath(r, c), className: `h-8 w-8 sm:h-10 sm:w-10 text-center font-bold text-sm sm:text-base uppercase rounded border transition-all ${isPickingPath ? 'cursor-pointer hover:ring-2 hover:ring-blue-400' : ''} ${highlight
+                                                ? 'border-2 text-white font-extrabold shadow-sm'
+                                                : 'bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 border-gray-300'}`, style: highlight ? { backgroundColor: highlight.color, borderColor: highlight.color } : {}, title: highlight ? `${highlight.word} (${r},${c})` : `(${r},${c})` }) }, `${r}-${c}`));
+                                });
+                            }) }) })] }), _jsxs(Card, { className: "p-4 space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between border-b pb-2", children: [_jsxs("div", { children: [_jsx("h4", { className: "font-bold text-base", children: state.type === 'CATEGORIZE' ? 'Danh sách từ & Nhóm phân loại' : 'Danh sách từ cần tìm (Word Bank)' }), _jsxs("p", { className: "text-xs text-gray-500", children: ["Nh\u1EADp t\u1EEB v\u1EF1ng, ", state.type === 'CATEGORIZE' ? 'chọn nhóm thuộc tính, ' : '', "nh\u1EA5n \"G\u00E1n v\u1ECB tr\u00ED\" v\u00E0 click c\u00E1c \u00F4 t\u01B0\u01A1ng \u1EE9ng tr\u00EAn ma tr\u1EADn."] })] }), _jsxs(Button, { type: "button", size: "sm", onClick: handleAddWord, className: "gap-1", children: [_jsx(Plus, { className: "h-4 w-4" }), " Th\u00EAm t\u1EEB"] })] }), _jsx("div", { className: "space-y-3", children: state.words.map((w, idx) => {
+                            const isSelected = selectedWordIdx === idx;
+                            const color = PALETTE[idx % PALETTE.length];
+                            const pathLength = w.path?.length || 0;
+                            const formedText = (w.path || [])
+                                .map((coord) => state.grid[coord.row - 1]?.[coord.col - 1] || '')
+                                .join('');
+                            return (_jsxs("div", { className: `p-3 rounded-lg border transition-all ${isSelected
+                                    ? 'border-blue-500 bg-blue-50/50 dark:bg-blue-950/20 ring-1 ring-blue-400'
+                                    : 'border-gray-200 bg-white dark:bg-gray-900'}`, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx("div", { className: "w-4 h-4 rounded-full flex-shrink-0", style: { backgroundColor: color }, title: `Màu đại diện: ${color}` }), _jsx("div", { className: "flex-1 min-w-[180px]", children: _jsx(Input, { value: w.word, onChange: (e) => {
+                                                        const val = e.target.value;
+                                                        updateState((prev) => {
+                                                            const nextWords = [...prev.words];
+                                                            nextWords[idx] = { ...w, word: val };
+                                                            return { ...prev, words: nextWords };
+                                                        });
+                                                    }, placeholder: `Từ #${idx + 1} (VD: ${state.type === 'CATEGORIZE' ? 'monkey' : 'digital camera'})`, className: "font-medium" }) }), state.type === 'CATEGORIZE' && (_jsx("div", { className: "w-40", children: _jsxs(Select, { value: w.categoryId || state.categories[0]?.id || '', onValueChange: (catVal) => {
+                                                        updateState((prev) => {
+                                                            const nextWords = [...prev.words];
+                                                            nextWords[idx] = { ...w, categoryId: catVal };
+                                                            return { ...prev, words: nextWords };
+                                                        });
+                                                    }, children: [_jsx(SelectTrigger, { className: "h-9 text-xs font-semibold", children: _jsx(SelectValue, { placeholder: "Ch\u1ECDn nh\u00F3m" }) }), _jsx(SelectContent, { children: state.categories.map((c) => (_jsx(SelectItem, { value: c.id, className: "text-xs", children: c.name }, c.id))) })] }) })), _jsx("div", { className: "flex items-center gap-2", children: _jsxs("label", { className: "flex items-center gap-1.5 text-xs text-amber-700 dark:text-amber-300 font-medium cursor-pointer", children: [_jsx(Checkbox, { checked: Boolean(w.isExample), onCheckedChange: (checked) => {
+                                                                updateState((prev) => {
+                                                                    const nextWords = [...prev.words];
+                                                                    nextWords[idx] = { ...w, isExample: Boolean(checked) };
+                                                                    return { ...prev, words: nextWords };
+                                                                });
+                                                            } }), "C\u00E2u v\u00ED d\u1EE5"] }) }), _jsxs(Button, { type: "button", size: "sm", variant: isSelected && isPickingPath ? 'default' : 'outline', onClick: () => {
+                                                    if (isSelected && isPickingPath) {
+                                                        setIsPickingPath(false);
+                                                    }
+                                                    else {
+                                                        setSelectedWordIdx(idx);
+                                                        setIsPickingPath(true);
+                                                    }
+                                                }, className: "gap-1 text-xs", children: [_jsx(MousePointer, { className: "h-3.5 w-3.5" }), isSelected && isPickingPath ? 'Đang chọn ô...' : `Gán vị trí (${pathLength} ô)`] }), pathLength > 0 && (_jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => {
+                                                    updateState((prev) => {
+                                                        const nextWords = [...prev.words];
+                                                        nextWords[idx] = { ...w, path: [] };
+                                                        return { ...prev, words: nextWords };
+                                                    });
+                                                }, className: "text-xs text-gray-500 hover:text-red-500", title: "X\u00F3a \u0111\u01B0\u1EDDng \u0111i \u0111\u00E3 ch\u1ECDn", children: _jsx(RotateCcw, { className: "h-3.5 w-3.5" }) })), _jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => handleRemoveWord(idx), className: "text-red-500 hover:text-red-700 hover:bg-red-50", children: _jsx(Trash2, { className: "h-4 w-4" }) })] }), pathLength > 0 && (_jsxs("div", { className: "mt-2 text-xs flex items-center gap-2 text-gray-600 dark:text-gray-400 pl-7", children: [_jsx("span", { className: "font-semibold", children: "Chu\u1ED7i qu\u00E9t \u0111\u01B0\u1EE3c:" }), _jsx(Badge, { variant: "secondary", className: "font-mono uppercase tracking-widest", children: formedText || '(chưa có chữ)' }), _jsxs("span", { className: "text-gray-400", children: ["(T\u1ECDa \u0111\u1ED9: ", w.path?.map((c) => `[${c.row},${c.col}]`).join(' → '), ")"] })] }))] }, w.id || idx));
+                        }) })] })] }));
+}

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

@@ -0,0 +1,4 @@
+export * from './FindWordsInMatrixCreator';
+export * from './FindWordsInMatrixClient';
+export * from './register';
+export * from './transform';

package/dist/components/questions/types/find-words-in-matrix/index.js

@@ -0,0 +1,4 @@
+export * from './FindWordsInMatrixCreator';
+export * from './FindWordsInMatrixClient';
+export * from './register';
+export * from './transform';

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

@@ -0,0 +1,2 @@
+import type { QuestionTypeRegistration } from '../../creator/question-type-registry';
+export declare const findWordsInMatrixRegistration: QuestionTypeRegistration;

package/dist/components/questions/types/find-words-in-matrix/register.js

@@ -0,0 +1,29 @@
+import { FindWordsInMatrixCreator } from './FindWordsInMatrixCreator';
+export const findWordsInMatrixRegistration = {
+    component: FindWordsInMatrixCreator,
+    useRawInitialData: true,
+    getExtraProps: (ctx) => ({
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+    }),
+    wrapOnSave: (data, ctx) => ({
+        type: ctx.questionType,
+        content: ctx.state.content,
+        points: data.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        ...(data.content !== undefined ? { content: data.content } : {}),
+        answer: data.answer ?? data,
+        explanation: data.explanation || '',
+    }),
+    wrapOnChange: (data, ctx) => ({
+        type: ctx.questionType,
+        points: data.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        content: data.content,
+        answer: data.answer,
+        explanation: data.explanation || '',
+    }),
+};

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

@@ -0,0 +1,2 @@
+import type { TransformHandler } from '../../../../shared/lib/utils/question-transform-types';
+export declare const transformFindWordsInMatrix: TransformHandler;

package/dist/components/questions/types/find-words-in-matrix/transform.js

@@ -0,0 +1,89 @@
+export const transformFindWordsInMatrix = (question) => {
+    const contentData = question.content;
+    const answerData = question.answer;
+    let content;
+    let correctAnswer;
+    const modeType = contentData?.type || (Array.isArray(contentData?.categories) && contentData.categories.length > 0 ? 'CATEGORIZE' : 'WORD_BANK');
+    if (contentData?.gridSize && Array.isArray(contentData?.grid) && Array.isArray(contentData?.wordBank)) {
+        // Already in API shape
+        content = {
+            type: modeType,
+            title: contentData.title || '',
+            gridSize: {
+                rows: Number(contentData.gridSize.rows) || 14,
+                cols: Number(contentData.gridSize.cols) || 14,
+            },
+            grid: contentData.grid,
+            ...(modeType === 'CATEGORIZE' && Array.isArray(contentData.categories) ? { categories: contentData.categories } : {}),
+            wordBank: contentData.wordBank,
+            ...(contentData.exampleSelection ? { exampleSelection: contentData.exampleSelection } : {}),
+        };
+        correctAnswer = {
+            words: Array.isArray(answerData?.words) ? answerData.words : [],
+            caseSensitive: Boolean(answerData?.caseSensitive),
+        };
+    }
+    else if (contentData?.grid && Array.isArray(contentData?.words)) {
+        // Form state format from Creator
+        const rows = Number(contentData.rows) || (Array.isArray(contentData.grid) ? contentData.grid.length : 14);
+        const cols = Number(contentData.cols) || (Array.isArray(contentData.grid?.[0]) ? contentData.grid[0].length : 14);
+        const grid = contentData.grid;
+        const categories = Array.isArray(contentData.categories) ? contentData.categories : [];
+        const wordBank = [];
+        const correctWords = [];
+        let exampleSelection;
+        for (const w of contentData.words) {
+            const item = {
+                id: w.id || `w_${Math.random().toString(36).substring(2, 9)}`,
+                word: String(w.word || '').trim(),
+                ...(w.isExample ? { isExample: true } : {}),
+                ...(w.categoryId ? { categoryId: w.categoryId } : {}),
+            };
+            wordBank.push(item);
+            if (w.path && Array.isArray(w.path) && w.path.length > 0) {
+                if (w.isExample) {
+                    exampleSelection = {
+                        wordId: item.id,
+                        ...(item.categoryId ? { categoryId: item.categoryId } : {}),
+                        path: w.path,
+                    };
+                }
+                else {
+                    correctWords.push({
+                        wordId: item.id,
+                        word: item.word,
+                        ...(item.categoryId ? { categoryId: item.categoryId } : {}),
+                        path: w.path,
+                    });
+                }
+            }
+        }
+        content = {
+            type: modeType,
+            title: contentData.title || '',
+            gridSize: { rows, cols },
+            grid,
+            ...(modeType === 'CATEGORIZE' ? { categories } : {}),
+            wordBank,
+            ...(exampleSelection ? { exampleSelection } : {}),
+        };
+        correctAnswer = {
+            words: correctWords,
+            caseSensitive: Boolean(contentData.caseSensitive),
+        };
+    }
+    else {
+        content = {
+            type: 'WORD_BANK',
+            gridSize: { rows: 14, cols: 14 },
+            grid: Array(14).fill(null).map(() => Array(14).fill('')),
+            wordBank: [],
+        };
+        correctAnswer = { words: [], caseSensitive: false };
+    }
+    return {
+        apiContent: content,
+        apiCorrectAnswer: correctAnswer,
+        explanation: answerData?.explanation || question.explanation || '',
+    };
+};

package/dist/shared/constants/question-skills.js

@@ -79,6 +79,7 @@ export const QUESTION_TYPE_SKILLS = {
     'FILL_BLANK': SkillEnum.READING,
     'WORD_FILL_STRUCTURED_FORM': SkillEnum.READING,
     'CROSSWORD_PUZZLE': SkillEnum.READING,
+    'FIND_WORDS_IN_MATRIX': SkillEnum.READING,
     // ========================================
     // WRITING SKILLS (Viết)
     // ========================================
@@ -206,6 +207,7 @@ export const QUESTION_TYPE_LABELS = {
     'MATCH_BY_WRITING_ANSWER': 'Ghép đáp án bằng cách viết',
     'WORD_FILL_STRUCTURED_FORM': 'Điền từ vào biểu mẫu có cấu trúc',
     'CROSSWORD_PUZZLE': 'Giải ô chữ (Crossword)',
+    'FIND_WORDS_IN_MATRIX': 'Tìm từ trong ma trận (Word Search)',
     // ========================================
     // WRITING SKILLS (Viết)
     // ========================================

package/dist/shared/lib/utils/question-reverse-transform.js

@@ -447,6 +447,7 @@ const handlers = {
     SPEAKING_CUE_CARD: reverseSimpleAnswer,
     GN_SPEAKING_INTERVIEW: reverseGroupPayload,
     CROSSWORD_PUZZLE: reverseCrosswordPuzzle,
+    FIND_WORDS_IN_MATRIX: reverseFindWordsInMatrix,
 };
 function reverseCrosswordPuzzle(apiQuestion) {
     const apiContent = (apiQuestion.content || {});
@@ -501,6 +502,68 @@ function reverseCrosswordPuzzle(apiQuestion) {
         },
     };
 }
+function reverseFindWordsInMatrix(apiQuestion) {
+    const apiContent = (apiQuestion.content || {});
+    const apiAnswer = (apiQuestion.correctAnswer || apiQuestion.correct_answer || apiQuestion.answer || {});
+    const type = apiContent.type || (Array.isArray(apiContent.categories) && apiContent.categories.length > 0 ? 'CATEGORIZE' : 'WORD_BANK');
+    const rows = apiContent.gridSize?.rows || (Array.isArray(apiContent.grid) ? apiContent.grid.length : 14);
+    const cols = apiContent.gridSize?.cols || (Array.isArray(apiContent.grid?.[0]) ? apiContent.grid[0].length : 14);
+    const title = apiContent.title || '';
+    const grid = Array.isArray(apiContent.grid) ? apiContent.grid : [];
+    const categories = Array.isArray(apiContent.categories) ? apiContent.categories : [];
+    const wordBank = Array.isArray(apiContent.wordBank) ? apiContent.wordBank : [];
+    const correctWords = Array.isArray(apiAnswer.words) ? apiAnswer.words : [];
+    const correctMap = new Map();
+    for (const cw of correctWords) {
+        if (cw.wordId) {
+            correctMap.set(cw.wordId, cw);
+        }
+    }
+    const words = wordBank.map((wb) => {
+        const isEx = Boolean(wb.isExample);
+        const correctInfo = correctMap.get(wb.id);
+        let path = correctInfo?.path;
+        let categoryId = wb.categoryId || correctInfo?.categoryId;
+        if (isEx && apiContent.exampleSelection?.wordId === wb.id) {
+            path = apiContent.exampleSelection.path;
+            if (apiContent.exampleSelection.categoryId) {
+                categoryId = apiContent.exampleSelection.categoryId;
+            }
+        }
+        return {
+            id: wb.id || `w_${Math.random().toString(36).substring(2, 9)}`,
+            word: wb.word || '',
+            isExample: isEx,
+            ...(categoryId ? { categoryId } : {}),
+            path: path || [],
+        };
+    });
+    return {
+        content: {
+            type,
+            title,
+            rows,
+            cols,
+            gridSize: { rows, cols },
+            grid,
+            categories,
+            wordBank,
+            words,
+            ...(apiContent.exampleSelection ? { exampleSelection: apiContent.exampleSelection } : {}),
+        },
+        answer: {
+            type,
+            title,
+            rows,
+            cols,
+            grid,
+            categories,
+            words,
+            caseSensitive: Boolean(apiAnswer.caseSensitive),
+            explanation: apiQuestion.explanation || '',
+        },
+    };
+}
 export function transformApiQuestionToFrontend(apiQuestion) {
     const questionType = String(apiQuestion.questionType ?? apiQuestion.question_type ?? apiQuestion.type ?? '');
     const handlerResult = (handlers[questionType] ?? defaultReverse)(apiQuestion);

package/dist/shared/lib/utils/question-transform.js

@@ -42,6 +42,7 @@ import { transformSpeakingCueCard } from '../../../components/questions/types/sp
 import { transformGNSpeakingInterview } from '../../../components/questions/types/gn-speaking-interview/transform';
 import { transformWordFillStructuredForm } from '../../../components/questions/types/word-fill-structured-form/transform';
 import { transformCrosswordPuzzle } from '../../../components/questions/types/crossword-puzzle/transform';
+import { transformFindWordsInMatrix } from '../../../components/questions/types/find-words-in-matrix/transform';
 // ─── Handler map ────────────────────────────────────────────────────────────
 const questionTransformHandlers = {
     // Look picture
@@ -90,6 +91,7 @@ const questionTransformHandlers = {
     GN_SPEAKING_INTERVIEW: transformGNSpeakingInterview,
     WORD_FILL_STRUCTURED_FORM: transformWordFillStructuredForm,
     CROSSWORD_PUZZLE: transformCrosswordPuzzle,
+    FIND_WORDS_IN_MATRIX: transformFindWordsInMatrix,
 };
 /**
  * Transform frontend question format to API format.

package/dist/shared/types/common.types.d.ts

@@ -29,7 +29,7 @@ export declare enum StudentSelectionType {
 }
 export type ResultStatus = 'PENDING' | 'PARTIAL_GRADED' | 'GRADED';
 export type StudentStatus = 'NOT_STARTED' | 'IN_PROGRESS' | 'SUBMITTED';
-export type QuestionType = 'FILL_IN_BLANK' | 'TRUE_FALSE' | 'MATCHING' | 'ORDERING' | 'LISTENING' | 'COLORING' | 'ESSAY' | 'LISTEN_AND_FILL_IN_THE_BLANK_WITH_IMAGE' | 'LISTEN_AND_TICK_ANSWER' | 'LISTEN_AND_FILL_NAME_NUMBER' | 'LISTENING_FILL_BLANK' | 'LISTENING_COLOR' | 'TICK_TRUE_OR_FALSE' | 'TICK_YES_OR_NO' | 'READING_TICK_CROSS' | 'ARRANGE_LETTERS_INTO_WORDS' | 'READ_PASSAGE_AND_COMPLETE_STORY' | 'CLOZE_TEST_WITH_TICK_BOX' | 'READ_AND_CHOOSE_APPROPRIATE_WORD' | 'WRITE_SHORT_PARAGRAPH' | 'LABEL_THE_PICTURE' | 'READING_LETTER_ARRANGE' | 'READING_PASSAGE_FILL' | 'FILL_BLANK' | 'FILL_MISSING_WORDS_IN_GRID' | 'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER' | 'LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER' | 'LOOK_PICTURE_FILL_WORD_HINT' | 'LABEL_THE_PICTURE' | 'READ_AND_COLOR_OBJECTS' | 'IMAGE_OBJECT_MATCHING' | 'READ_PASSAGE_AND_ANSWER_QUESTIONS' | 'CHOOSE_THE_CORRECT_ANSWER' | 'CHOOSE_THE_CORRECT_ANSWER_GROUP' | 'TRUE_FALSE_GROUP' | 'CROSS_OUT_WORD_GROUP' | 'SPONTANEOUS_QA_GROUP' | 'WORD_ORDER_AND_MATCH_GROUP' | 'WRITE_A_SHORT_LETTER' | 'WRITE_CORRECT_VERB_FORM' | 'CHOOSE_CORRECT_ADJECTIVE' | 'ANSWER_THE_QUESTION' | 'ANSWER_THE_QUESTION_GROUP' | 'WORD_ORDERING' | 'WORD_FILL_PARAGRAPH' | 'MATCH_BY_WRITING_ANSWER' | 'WRITE_SENTENCES' | 'LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP' | 'LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE' | 'LISTEN_AND_DRAG_OBJECTS_INTO_SCENE' | 'LISTEN_AND_SPEAK_ANSWER' | 'LISTEN_AND_SPEAK_IMAGE_GROUP' | 'LISTEN_AND_SPEAK_QUESTION_LIST' | 'LISTEN_AND_SPEAK_COMPARE_IMAGES' | 'LISTEN_AND_SPEAK_WITH_STORY_IMAGES' | 'LISTEN_AND_SPEAK_ODD_ONE_OUT' | 'LISTEN_AND_SPEAK_INFO_EXCHANGE' | 'READ_DISPLAYED_CONTENT' | 'SPEAKING_DESCRIBE_IMAGE' | 'SPONTANEOUS_QA' | 'SPEAKING_CONVERSATION' | 'GN_SPEAKING_INTERVIEW' | 'SPEAKING_CUE_CARD' | 'WORD_FILL_STRUCTURED_FORM' | 'CROSSWORD_PUZZLE';
+export type QuestionType = 'FILL_IN_BLANK' | 'TRUE_FALSE' | 'MATCHING' | 'ORDERING' | 'LISTENING' | 'COLORING' | 'ESSAY' | 'LISTEN_AND_FILL_IN_THE_BLANK_WITH_IMAGE' | 'LISTEN_AND_TICK_ANSWER' | 'LISTEN_AND_FILL_NAME_NUMBER' | 'LISTENING_FILL_BLANK' | 'LISTENING_COLOR' | 'TICK_TRUE_OR_FALSE' | 'TICK_YES_OR_NO' | 'READING_TICK_CROSS' | 'ARRANGE_LETTERS_INTO_WORDS' | 'READ_PASSAGE_AND_COMPLETE_STORY' | 'CLOZE_TEST_WITH_TICK_BOX' | 'READ_AND_CHOOSE_APPROPRIATE_WORD' | 'WRITE_SHORT_PARAGRAPH' | 'LABEL_THE_PICTURE' | 'READING_LETTER_ARRANGE' | 'READING_PASSAGE_FILL' | 'FILL_BLANK' | 'FILL_MISSING_WORDS_IN_GRID' | 'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER' | 'LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER' | 'LOOK_PICTURE_FILL_WORD_HINT' | 'LABEL_THE_PICTURE' | 'READ_AND_COLOR_OBJECTS' | 'IMAGE_OBJECT_MATCHING' | 'READ_PASSAGE_AND_ANSWER_QUESTIONS' | 'CHOOSE_THE_CORRECT_ANSWER' | 'CHOOSE_THE_CORRECT_ANSWER_GROUP' | 'TRUE_FALSE_GROUP' | 'CROSS_OUT_WORD_GROUP' | 'SPONTANEOUS_QA_GROUP' | 'WORD_ORDER_AND_MATCH_GROUP' | 'WRITE_A_SHORT_LETTER' | 'WRITE_CORRECT_VERB_FORM' | 'CHOOSE_CORRECT_ADJECTIVE' | 'ANSWER_THE_QUESTION' | 'ANSWER_THE_QUESTION_GROUP' | 'WORD_ORDERING' | 'WORD_FILL_PARAGRAPH' | 'MATCH_BY_WRITING_ANSWER' | 'WRITE_SENTENCES' | 'LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP' | 'LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE' | 'LISTEN_AND_DRAG_OBJECTS_INTO_SCENE' | 'LISTEN_AND_SPEAK_ANSWER' | 'LISTEN_AND_SPEAK_IMAGE_GROUP' | 'LISTEN_AND_SPEAK_QUESTION_LIST' | 'LISTEN_AND_SPEAK_COMPARE_IMAGES' | 'LISTEN_AND_SPEAK_WITH_STORY_IMAGES' | 'LISTEN_AND_SPEAK_ODD_ONE_OUT' | 'LISTEN_AND_SPEAK_INFO_EXCHANGE' | 'READ_DISPLAYED_CONTENT' | 'SPEAKING_DESCRIBE_IMAGE' | 'SPONTANEOUS_QA' | 'SPEAKING_CONVERSATION' | 'GN_SPEAKING_INTERVIEW' | 'SPEAKING_CUE_CARD' | 'WORD_FILL_STRUCTURED_FORM' | 'CROSSWORD_PUZZLE' | 'FIND_WORDS_IN_MATRIX';
 export type Level = 'Pre-A1' | 'A1' | 'A2' | 'B1' | 'B2' | 'C1' | 'C2';
 export type Difficulty = 'EASY' | 'MEDIUM' | 'HARD';
 export type Skill = 'LISTENING' | 'READING' | 'WRITING' | 'SPEAKING';