@tinyweb_dev/oe-exam-sdk 0.2.1 → 0.2.3

package/dist/components/exams/take/utils/question-transformers.js

@@ -1204,3 +1204,27 @@ export function transformCrosswordPuzzle(questions) {
         explanation: question?.explanation,
     };
 }
+export function transformFindWordsInMatrix(questions) {
+    const question = questions[0];
+    const content = (question?.content || {});
+    const correctAnswer = (question?.correct_answer || question?.correctAnswer || {});
+    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);
+    const grid = Array.isArray(content?.grid) ? content.grid : [];
+    const categories = Array.isArray(content?.categories) ? content.categories : undefined;
+    const wordBank = Array.isArray(content?.wordBank) ? content.wordBank : [];
+    const correctWords = Array.isArray(correctAnswer?.words) ? correctAnswer.words : [];
+    return {
+        type,
+        title: content?.title || '',
+        instruction: question?.instruction || content?.instruction || 'Find these words in the wordsearch box.',
+        gridSize: { rows, cols },
+        grid,
+        ...(categories ? { categories } : {}),
+        wordBank,
+        ...(content?.exampleSelection ? { exampleSelection: content.exampleSelection } : {}),
+        correctWords,
+        explanation: question?.explanation,
+    };
+}

package/dist/components/questions/_shared/config/question-types.config.js

@@ -322,6 +322,11 @@ export const QUESTION_TYPE_CONFIG = {
         requiresContent: true,
         hasDedicatedComponent: true,
     },
+    FIND_WORDS_IN_MATRIX: {
+        label: 'Tìm từ trong ma trận (Word Search)',
+        requiresContent: true,
+        hasDedicatedComponent: true,
+    },
 };
 export const QUESTION_TYPES_WITH_DEDICATED_COMPONENTS = [
     'FILL_IN_BLANK',
@@ -368,6 +373,7 @@ export const QUESTION_TYPES_WITH_DEDICATED_COMPONENTS = [
     'SPEAKING_CUE_CARD',
     'WORD_FILL_STRUCTURED_FORM',
     'CROSSWORD_PUZZLE',
+    'FIND_WORDS_IN_MATRIX',
 ];
 export function getQuestionTypeLabel(type) {
     return QUESTION_TYPE_CONFIG[type]?.label || type;

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

@@ -0,0 +1,18 @@
+import type { FindWordsInMatrixType, MatrixCellCoord, CategoryHeadingItem, WordBankItem, ExampleSelection, CorrectWordItem, FindWordsInMatrixContent, FindWordsInMatrixCorrectAnswer, StudentWordSelectionItem } from '../../../../shared/types/questions/find-words-in-matrix';
+export interface WordBankFormItem extends WordBankItem {
+    path?: MatrixCellCoord[];
+}
+export interface FindWordsInMatrixFormState {
+    type: FindWordsInMatrixType;
+    title?: string;
+    instruction?: string;
+    rows: number;
+    cols: number;
+    grid: string[][];
+    categories: CategoryHeadingItem[];
+    words: WordBankFormItem[];
+    caseSensitive?: boolean;
+    points: number;
+    explanation?: string;
+}
+export type { FindWordsInMatrixType, MatrixCellCoord, CategoryHeadingItem, WordBankItem, ExampleSelection, CorrectWordItem, FindWordsInMatrixContent, FindWordsInMatrixCorrectAnswer, StudentWordSelectionItem, };

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

@@ -0,0 +1 @@
+export {};

package/dist/components/questions/creator/question-type-registry.js

@@ -44,6 +44,7 @@ import { speakingCueCardRegistration } from '../types/speaking-cue-card/register
 import { wordFillStructuredFormRegistration } from '../types/word-fill-structured-form/register';
 import { wordOrderAndMatchGroupRegistration } from '../types/word-order-and-match-group/register';
 import { crosswordPuzzleRegistration } from '../types/crossword-puzzle/register';
+import { findWordsInMatrixRegistration } from '../types/find-words-in-matrix/register';
 // ─── Registry map ───────────────────────────────────────────────────────────
 export const questionTypeRegistry = {
     CHOOSE_THE_CORRECT_ANSWER: chooseTheCorrectAnswerRegistration,
@@ -91,4 +92,5 @@ export const questionTypeRegistry = {
     SPEAKING_CUE_CARD: speakingCueCardRegistration,
     WORD_FILL_STRUCTURED_FORM: wordFillStructuredFormRegistration,
     CROSSWORD_PUZZLE: crosswordPuzzleRegistration,
+    FIND_WORDS_IN_MATRIX: findWordsInMatrixRegistration,
 };

package/dist/components/questions/question-bank/QuestionEditorRenderer.d.ts

@@ -15,7 +15,8 @@ export declare enum QuestionBankEditorType {
     WRITE_CORRECT_VERB_FORM = "WRITE_CORRECT_VERB_FORM",
     FILL_IN_BLANK = "FILL_IN_BLANK",
     CHOOSE_CORRECT_ADJECTIVE = "CHOOSE_CORRECT_ADJECTIVE",
-    CROSSWORD_PUZZLE = "CROSSWORD_PUZZLE"
+    CROSSWORD_PUZZLE = "CROSSWORD_PUZZLE",
+    FIND_WORDS_IN_MATRIX = "FIND_WORDS_IN_MATRIX"
 }
 /**
  * Renders the appropriate Creator for a question-bank item.

package/dist/components/questions/question-bank/QuestionEditorRenderer.js

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from 'react';
 import { t } from '../../../shared/lib/i18n';
 import { renderChooseCorrectAdjectiveEditor, renderChooseTheCorrectAnswerEditor, renderFillInBlankEditor, renderFillMissingWordsInGridEditor, renderImageObjectMatchingEditor, renderLabelThePictureEditor, renderLookPictureChooseCorrectAnswerEditor, renderLookPictureFillBlankChooseAnswerEditor, renderLookPictureFillWordHintEditor, renderReadAndColorObjectsEditor, renderReadPassageAndAnswerQuestionsEditor, renderWriteAShortLetterEditor, renderWriteCorrectVerbFormEditor, UnsupportedEditorFallback, } from './editor-adapters';
 import { CrosswordPuzzleCreator } from '../types/crossword-puzzle/CrosswordPuzzleCreator';
+import { FindWordsInMatrixCreator } from '../types/find-words-in-matrix/FindWordsInMatrixCreator';
 /** Marketing question types supported by the question-bank editor. */
 export var QuestionBankEditorType;
 (function (QuestionBankEditorType) {
@@ -21,6 +22,7 @@ export var QuestionBankEditorType;
     QuestionBankEditorType["FILL_IN_BLANK"] = "FILL_IN_BLANK";
     QuestionBankEditorType["CHOOSE_CORRECT_ADJECTIVE"] = "CHOOSE_CORRECT_ADJECTIVE";
     QuestionBankEditorType["CROSSWORD_PUZZLE"] = "CROSSWORD_PUZZLE";
+    QuestionBankEditorType["FIND_WORDS_IN_MATRIX"] = "FIND_WORDS_IN_MATRIX";
 })(QuestionBankEditorType || (QuestionBankEditorType = {}));
 /**
  * Renders the appropriate Creator for a question-bank item.
@@ -85,6 +87,20 @@ export function QuestionEditorRenderer({ questionType, content, correctAnswer, e
                         points: data.points ?? points,
                     });
                 } }));
+        case QuestionBankEditorType.FIND_WORDS_IN_MATRIX:
+            return (_jsx(FindWordsInMatrixCreator, { initialData: {
+                    content,
+                    answer: correctAnswer,
+                    explanation,
+                    points,
+                }, onChange: (data) => {
+                    onChange?.({
+                        content: data.content,
+                        answer: data.answer,
+                        explanation: data.explanation || (explanation ?? undefined),
+                        points: data.points ?? points,
+                    });
+                } }));
         default:
             return (_jsx(UnsupportedEditorFallback, { questionType: questionType, content: content, correctAnswer: correctAnswer, explanation: explanation }));
     }

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

@@ -4,8 +4,8 @@ import { useMemo } from 'react';
 export function CrosswordPuzzleClient({ content, correctAnswer, isReviewMode = false, userAnswers = {}, }) {
     const rows = content?.gridSize?.rows || 12;
     const cols = content?.gridSize?.cols || 12;
-    const acrossClues = content?.clues?.across || [];
-    const downClues = content?.clues?.down || [];
+    const acrossClues = useMemo(() => content?.clues?.across || [], [content?.clues?.across]);
+    const downClues = useMemo(() => content?.clues?.down || [], [content?.clues?.down]);
     // Build grid cell mapping
     const { cellMap, clueNumberMap } = useMemo(() => {
         const cMap = new Map();
@@ -69,7 +69,7 @@ export function CrosswordPuzzleClient({ content, correctAnswer, isReviewMode = f
                                     else if (userAnswers?.[key]) {
                                         previewLetter = userAnswers[key];
                                     }
-                                    let cellBg = isMarked ? 'bg-gray-400 border-gray-400 shadow-sm ring-1 ring-gray-400/50' : 'bg-gray-100 border-gray-300';
+                                    const cellBg = isMarked ? 'bg-gray-400 border-gray-400 shadow-sm ring-1 ring-gray-400/50' : 'bg-gray-100 border-gray-300';
                                     let textColor = isExample
                                         ? 'text-orange-600 font-bold italic'
                                         : isMarked

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { FindWordsInMatrixContent, FindWordsInMatrixCorrectAnswer } from '../../../../shared/types/questions/find-words-in-matrix';
+interface FindWordsInMatrixClientProps {
+    content: FindWordsInMatrixContent;
+    correctAnswer?: FindWordsInMatrixCorrectAnswer;
+    showSolution?: boolean;
+}
+export declare function FindWordsInMatrixClient({ content, correctAnswer, showSolution, }: FindWordsInMatrixClientProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,69 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from '../../../../components/ui/card';
+import { Badge } from '../../../../components/ui/badge';
+// 10 Distinct pastel highlighter colors for word selections
+const WORD_COLORS = [
+    { bg: 'bg-amber-100 text-amber-900 border-amber-400', badge: 'bg-amber-500 text-white', stroke: '#f59e0b' },
+    { bg: 'bg-emerald-100 text-emerald-900 border-emerald-400', badge: 'bg-emerald-500 text-white', stroke: '#10b981' },
+    { bg: 'bg-sky-100 text-sky-900 border-sky-400', badge: 'bg-sky-500 text-white', stroke: '#0ea5e9' },
+    { bg: 'bg-purple-100 text-purple-900 border-purple-400', badge: 'bg-purple-500 text-white', stroke: '#a855f7' },
+    { bg: 'bg-rose-100 text-rose-900 border-rose-400', badge: 'bg-rose-500 text-white', stroke: '#f43f5e' },
+    { bg: 'bg-indigo-100 text-indigo-900 border-indigo-400', badge: 'bg-indigo-500 text-white', stroke: '#6366f1' },
+    { bg: 'bg-teal-100 text-teal-900 border-teal-400', badge: 'bg-teal-500 text-white', stroke: '#14b8a6' },
+    { bg: 'bg-yellow-100 text-yellow-900 border-yellow-400', badge: 'bg-yellow-500 text-white', stroke: '#eab308' },
+    { bg: 'bg-pink-100 text-pink-900 border-pink-400', badge: 'bg-pink-500 text-white', stroke: '#ec4899' },
+    { bg: 'bg-cyan-100 text-cyan-900 border-cyan-400', badge: 'bg-cyan-500 text-white', stroke: '#06b6d4' },
+];
+export function FindWordsInMatrixClient({ content, correctAnswer, showSolution = false, }) {
+    const rows = content.gridSize?.rows || content.grid?.length || 14;
+    const cols = content.gridSize?.cols || content.grid?.[0]?.length || 14;
+    const grid = content.grid || [];
+    const wordBank = content.wordBank || [];
+    const isCategorize = content.type === 'CATEGORIZE' && Array.isArray(content.categories) && content.categories.length > 0;
+    const categories = content.categories || [];
+    // Build cell highlight map
+    const cellColorMap = {};
+    // Example selection
+    if (content.exampleSelection?.path) {
+        for (const c of content.exampleSelection.path) {
+            cellColorMap[`${c.row}-${c.col}`] = { colorIdx: 0, word: 'Example' };
+        }
+    }
+    // Solution paths if visible
+    if (showSolution && correctAnswer?.words) {
+        correctAnswer.words.forEach((item, idx) => {
+            const colorIdx = (idx + 1) % WORD_COLORS.length;
+            item.path?.forEach((c) => {
+                cellColorMap[`${c.row}-${c.col}`] = { colorIdx, word: item.word || item.wordId };
+            });
+        });
+    }
+    return (_jsxs("div", { className: "space-y-6", children: [content.title && (_jsx("h3", { className: "text-lg font-bold text-gray-800 dark:text-gray-100", children: content.title })), isCategorize ? (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4", children: categories.map((cat) => {
+                    const wordsInCat = wordBank.filter((w) => w.categoryId === cat.id);
+                    return (_jsxs(Card, { className: "p-3.5 bg-gray-50/70 dark:bg-gray-800/40 border", children: [_jsxs("div", { className: "font-bold text-sm text-gray-800 dark:text-gray-200 border-b pb-1.5 mb-2.5 flex items-center justify-between", children: [_jsx("span", { children: cat.name }), _jsx(Badge, { variant: "outline", className: "text-xs", children: wordsInCat.length })] }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: wordsInCat.map((w, idx) => {
+                                    const isExample = Boolean(w.isExample);
+                                    return (_jsxs(Badge, { variant: "outline", className: `px-2.5 py-1 text-xs font-medium ${isExample
+                                            ? 'line-through bg-amber-50 text-amber-800 border-amber-300'
+                                            : 'bg-white dark:bg-gray-800'}`, children: [w.word, isExample && _jsx("span", { className: "ml-1 text-amber-600 font-bold", children: "(Ex)" })] }, w.id || idx));
+                                }) })] }, cat.id));
+                }) })) : (_jsxs(Card, { className: "p-4 bg-gray-50 dark:bg-gray-800/50 border-dashed border-2", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3 flex items-center gap-2", children: _jsxs("span", { children: ["Word Bank (", wordBank.length, " words)"] }) }), _jsx("div", { className: "flex flex-wrap gap-2", children: wordBank.map((w, idx) => {
+                            const isExample = Boolean(w.isExample);
+                            return (_jsxs(Badge, { variant: "outline", className: `px-3 py-1.5 text-sm font-medium transition-all ${isExample
+                                    ? 'line-through bg-amber-50 text-amber-800 border-amber-300'
+                                    : 'bg-white dark:bg-gray-800 hover:shadow-sm'}`, children: [w.word, isExample && (_jsx("span", { className: "ml-1.5 text-xs text-amber-600 font-bold no-underline", children: "(Example)" }))] }, w.id || idx));
+                        }) })] })), _jsx("div", { className: "overflow-x-auto pb-2 flex justify-center", children: _jsx("div", { className: "inline-grid gap-1 p-3 bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-800", style: {
+                        gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+                    }, children: Array.from({ length: rows }).map((_, rIdx) => {
+                        const r = rIdx + 1;
+                        return Array.from({ length: cols }).map((_, cIdx) => {
+                            const c = cIdx + 1;
+                            const char = grid[rIdx]?.[cIdx] || '';
+                            const highlight = cellColorMap[`${r}-${c}`];
+                            const colorConfig = highlight ? WORD_COLORS[highlight.colorIdx] : null;
+                            return (_jsx("div", { className: `h-9 w-9 sm:h-11 sm:w-11 flex items-center justify-center font-bold text-sm sm:text-base select-none rounded-md transition-colors border ${colorConfig
+                                    ? `${colorConfig.bg} font-extrabold shadow-sm scale-95`
+                                    : 'border-gray-100 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/30 text-gray-700 dark:text-gray-300'}`, title: highlight ? `${highlight.word} (${r},${c})` : `(${r},${c})`, children: char || '·' }, `${r}-${c}`));
+                        });
+                    }) }) })] }));
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface FindWordsInMatrixCreatorProps {
+    initialData?: any;
+    onChange?: (data: any) => void;
+    onUnsavedChangesChange?: (hasChanges: boolean) => void;
+}
+export declare function FindWordsInMatrixCreator({ initialData, onChange, onUnsavedChangesChange, }: FindWordsInMatrixCreatorProps): React.JSX.Element;
+export {};

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;