@tinyweb_dev/oe-exam-sdk 0.2.0 → 0.2.2

package/dist/components/exams/take/components/QuestionRenderer.js

@@ -8,9 +8,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * 2. Transforms data to renderer-specific props
  * 3. Renders the correct component for each question type
  */
-import { MoversListenAndWriteRenderer, MoversChooseBestAnswerRenderer, MoversChooseAdjectiveRenderer, MoversWritingRenderer, MoversColoringRenderer, MoversPictureChooseRenderer, MoversPictureFillBlankChooseRenderer, MoversReadingPassageRenderer, MoversLabelThePictureRenderer, MoversFillWordHintRenderer, MoversGridFillRenderer, MoversTrueFalseRenderer, MoversCrossOutWordGroupRenderer, MoversAnswerTheQuestionRenderer, MoversWriteSentencesRenderer, MoversWordOrderingRenderer, MoversWordFillParagraphRenderer, MoversMatchByWritingAnswerRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderAndMatchGroupRenderer, MoversCrosswordPuzzleRenderer, } from './question-renderers';
+import { MoversListenAndWriteRenderer, MoversChooseBestAnswerRenderer, MoversChooseAdjectiveRenderer, MoversWritingRenderer, MoversColoringRenderer, MoversPictureChooseRenderer, MoversPictureFillBlankChooseRenderer, MoversReadingPassageRenderer, MoversLabelThePictureRenderer, MoversFillWordHintRenderer, MoversGridFillRenderer, MoversTrueFalseRenderer, MoversCrossOutWordGroupRenderer, MoversAnswerTheQuestionRenderer, MoversWriteSentencesRenderer, MoversWordOrderingRenderer, MoversWordFillParagraphRenderer, MoversMatchByWritingAnswerRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderAndMatchGroupRenderer, MoversCrosswordPuzzleRenderer, FindWordsInMatrixRenderer, } from './question-renderers';
 import { SpeakingQuestionRenderer } from './speaking/renderers';
-import { transformFillInBlank, transformWriteCorrectVerbForm, transformChooseCorrectAnswer, transformChooseTheCorrectAnswerGroup, transformChooseCorrectAdjective, transformWriteShortLetter, transformColorObjects, transformPictureChoose, transformPictureFillBlankChoose, transformReadingPassage, transformLabelPicture, transformFillWordHint, transformGridFill, transformAnswerTheQuestion, transformAnswerTheQuestionGroup, transformTrueFalse, transformTrueFalseGroup, transformWordOrdering, transformWordFillParagraph, transformMatchByWritingAnswer, transformWriteSentences, transformWordFillStructuredForm, transformWordOrderAndMatchGroup, transformCrosswordPuzzle, } from '../utils/question-transformers';
+import { transformFillInBlank, transformWriteCorrectVerbForm, transformChooseCorrectAnswer, transformChooseTheCorrectAnswerGroup, transformChooseCorrectAdjective, transformWriteShortLetter, transformColorObjects, transformPictureChoose, transformPictureFillBlankChoose, transformReadingPassage, transformLabelPicture, transformFillWordHint, transformGridFill, transformAnswerTheQuestion, transformAnswerTheQuestionGroup, transformTrueFalse, transformTrueFalseGroup, transformWordOrdering, transformWordFillParagraph, transformMatchByWritingAnswer, transformWriteSentences, transformWordFillStructuredForm, transformWordOrderAndMatchGroup, transformCrosswordPuzzle, transformFindWordsInMatrix, } from '../utils/question-transformers';
 import { transformCrossOutWordGroup } from '../utils/cross-out-word-group.transformer';
 import { normalizeColoringAssignments } from '../utils/coloring-assignments';
 export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode = false, onExit, onPartComplete, onPartBack, speakingTheme, initialQuestionIndex, skipTeacherVideo, onTeacherIntroPlayed, currentQuestionIndex, }) {
@@ -137,6 +137,14 @@ export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode =
                     onAnswerChange(regionId, hintItemId);
                 }, isReviewMode: isReviewMode }));
         }
+        case 'CROSSWORD_PUZZLE': {
+            const data = transformCrosswordPuzzle(questions);
+            return (_jsx(MoversCrosswordPuzzleRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, title: data.title, gridSize: data.gridSize, clues: data.clues, answers: answers, correctAnswers: data.correctAnswers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+        }
+        case 'FIND_WORDS_IN_MATRIX': {
+            const data = transformFindWordsInMatrix(questions);
+            return (_jsx(FindWordsInMatrixRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, type: data.type, title: data.title, gridSize: data.gridSize, grid: data.grid, categories: data.categories, wordBank: data.wordBank, exampleSelection: data.exampleSelection, correctWords: data.correctWords, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, questionId: questions[0]?.id || 'find-words' }));
+        }
         case 'ANSWER_THE_QUESTION': {
             const data = transformAnswerTheQuestion(questions);
             return (_jsx(MoversAnswerTheQuestionRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, imageUrl: data.imageUrl, audioUrl: part.audioUrl, title: data.title, groupContent: data.groupContent, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));

package/dist/components/exams/take/components/question-renderers/FindWordsInMatrixRenderer.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { FindWordsInMatrixRendererProps } from '../../types';
+export declare function FindWordsInMatrixRenderer({ partNumber, partName, questionCount, instruction, type, title, gridSize, grid, categories, wordBank, exampleSelection, selectedWords: propSelectedWords, correctWords, answers, onAnswerChange, isReviewMode, questionId, }: FindWordsInMatrixRendererProps): React.JSX.Element;
+export default FindWordsInMatrixRenderer;

package/dist/components/exams/take/components/question-renderers/FindWordsInMatrixRenderer.js

@@ -0,0 +1,389 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { Badge } from '../../../../../components/ui/badge';
+import { Card } from '../../../../../components/ui/card';
+import { Button } from '../../../../../components/ui/button';
+import { RotateCcw, Layers, Sparkles, Eye, Undo2, } from 'lucide-react';
+import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+// Distinct pastel color palette for word highlights
+const HIGHLIGHT_PALETTE = [
+    { bg: 'bg-amber-100 text-amber-900 border-amber-400', badge: 'bg-amber-500 text-white', color: '#f59e0b', ring: 'ring-amber-400' },
+    { bg: 'bg-emerald-100 text-emerald-900 border-emerald-400', badge: 'bg-emerald-500 text-white', color: '#10b981', ring: 'ring-emerald-400' },
+    { bg: 'bg-sky-100 text-sky-900 border-sky-400', badge: 'bg-sky-500 text-white', color: '#0ea5e9', ring: 'ring-sky-400' },
+    { bg: 'bg-purple-100 text-purple-900 border-purple-400', badge: 'bg-purple-500 text-white', color: '#a855f7', ring: 'ring-purple-400' },
+    { bg: 'bg-rose-100 text-rose-900 border-rose-400', badge: 'bg-rose-500 text-white', color: '#f43f5e', ring: 'ring-rose-400' },
+    { bg: 'bg-indigo-100 text-indigo-900 border-indigo-400', badge: 'bg-indigo-500 text-white', color: '#6366f1', ring: 'ring-indigo-400' },
+    { bg: 'bg-teal-100 text-teal-900 border-teal-400', badge: 'bg-teal-500 text-white', color: '#14b8a6', ring: 'ring-teal-400' },
+    { bg: 'bg-yellow-100 text-yellow-900 border-yellow-400', badge: 'bg-yellow-500 text-white', color: '#eab308', ring: 'ring-yellow-400' },
+    { bg: 'bg-pink-100 text-pink-900 border-pink-400', badge: 'bg-pink-500 text-white', color: '#ec4899', ring: 'ring-pink-400' },
+    { bg: 'bg-cyan-100 text-cyan-900 border-cyan-400', badge: 'bg-cyan-500 text-white', color: '#06b6d4', ring: 'ring-cyan-400' },
+];
+// Calculate straight line path between start and end (8 directions)
+function getStraightLinePath(start, end) {
+    const dr = end.row - start.row;
+    const dc = end.col - start.col;
+    const stepR = dr === 0 ? 0 : dr > 0 ? 1 : -1;
+    const stepC = dc === 0 ? 0 : dc > 0 ? 1 : -1;
+    if (dr === 0 && dc !== 0) {
+        const len = Math.abs(dc);
+        return Array.from({ length: len + 1 }, (_, i) => ({
+            row: start.row,
+            col: start.col + i * stepC,
+        }));
+    }
+    if (dc === 0 && dr !== 0) {
+        const len = Math.abs(dr);
+        return Array.from({ length: len + 1 }, (_, i) => ({
+            row: start.row + i * stepR,
+            col: start.col,
+        }));
+    }
+    if (Math.abs(dr) === Math.abs(dc) && dr !== 0) {
+        const len = Math.abs(dr);
+        return Array.from({ length: len + 1 }, (_, i) => ({
+            row: start.row + i * stepR,
+            col: start.col + i * stepC,
+        }));
+    }
+    if (dr === 0 && dc === 0) {
+        return [start];
+    }
+    return [];
+}
+// Helper to compare paths
+function arePathsMatching(p1, p2) {
+    if (!Array.isArray(p1) || !Array.isArray(p2) || p1.length !== p2.length)
+        return false;
+    const forward = p1.every((c, i) => c.row === p2[i]?.row && c.col === p2[i]?.col);
+    if (forward)
+        return true;
+    const rev2 = [...p2].reverse();
+    return p1.every((c, i) => c.row === rev2[i]?.row && c.col === rev2[i]?.col);
+}
+// Clean string for spelling match (remove spaces, symbols)
+function cleanWord(str) {
+    return (str || '').replace(/[\s\-_]/g, '').toUpperCase();
+}
+export function FindWordsInMatrixRenderer({ partNumber, partName, questionCount, instruction, type = 'WORD_BANK', title, gridSize, grid, categories = [], wordBank = [], exampleSelection, selectedWords: propSelectedWords, correctWords = [], answers, onAnswerChange, isReviewMode = false, questionId = 'find-words', }) {
+    const rows = gridSize?.rows || grid?.length || 14;
+    const cols = gridSize?.cols || grid?.[0]?.length || 14;
+    const isCategorize = type === 'CATEGORIZE' && categories.length > 0;
+    // Category lookup map
+    const categoryMap = useMemo(() => {
+        const map = new Map();
+        categories.forEach((c) => map.set(c.id, c.name));
+        return map;
+    }, [categories]);
+    // Non-example words list
+    const playableWords = useMemo(() => wordBank.filter((w) => !w.isExample), [wordBank]);
+    // Parse student answer from answers object
+    const currentAnswer = answers[questionId];
+    const initialStudentWords = Array.isArray(propSelectedWords)
+        ? propSelectedWords
+        : Array.isArray(currentAnswer?.words)
+            ? currentAnswer.words
+            : Array.isArray(currentAnswer)
+                ? currentAnswer
+                : [];
+    const [studentSelections, setStudentSelections] = useState(initialStudentWords);
+    // Active target word selected from Word Bank
+    const [activeWordId, setActiveWordId] = useState(null);
+    // Sequence of tapped cells on the grid for current active word
+    const [tappedPath, setTappedPath] = useState([]);
+    // Sync state if answers change externally
+    useEffect(() => {
+        if (Array.isArray(currentAnswer?.words)) {
+            setStudentSelections(currentAnswer.words);
+        }
+    }, [currentAnswer]);
+    // Determine which word is currently selected/active
+    const activeTargetWord = useMemo(() => {
+        if (activeWordId) {
+            return wordBank.find((w) => w.id === activeWordId && !w.isExample) || null;
+        }
+        // Auto-select first unfound playable word
+        const firstUnfound = playableWords.find((w) => !studentSelections.some((s) => s.wordId === w.id || cleanWord(s.word) === cleanWord(w.word)));
+        return firstUnfound || null;
+    }, [activeWordId, wordBank, playableWords, studentSelections]);
+    // Clean characters of target word
+    const targetChars = useMemo(() => {
+        if (!activeTargetWord)
+            return [];
+        return cleanWord(activeTargetWord.word).split('');
+    }, [activeTargetWord]);
+    // Characters tapped so far
+    const tappedChars = useMemo(() => {
+        return tappedPath.map((c) => (grid[c.row - 1]?.[c.col - 1] || '').toUpperCase());
+    }, [tappedPath, grid]);
+    // Next expected character (supports forward or reverse direction after 1st char)
+    const isReverseMode = useMemo(() => {
+        if (tappedChars.length <= 1 || targetChars.length <= 1)
+            return false;
+        const revChars = [...targetChars].reverse();
+        return tappedChars[0] === revChars[0] && tappedChars[1] === revChars[1];
+    }, [tappedChars, targetChars]);
+    const activeCharSequence = useMemo(() => {
+        return isReverseMode ? [...targetChars].reverse() : targetChars;
+    }, [isReverseMode, targetChars]);
+    const nextExpectedChar = useMemo(() => {
+        if (tappedPath.length >= activeCharSequence.length)
+            return null;
+        return activeCharSequence[tappedPath.length] || null;
+    }, [tappedPath.length, activeCharSequence]);
+    const emitAnswer = useCallback((newSelections) => {
+        setStudentSelections(newSelections);
+        onAnswerChange(questionId, { words: newSelections });
+    }, [onAnswerChange, questionId]);
+    // Complete word found
+    const handleWordFound = useCallback((wordItem, path) => {
+        const newSelection = {
+            wordId: wordItem.id,
+            word: wordItem.word,
+            categoryId: wordItem.categoryId,
+            path,
+        };
+        const updated = [
+            ...studentSelections.filter((s) => s.wordId !== wordItem.id && cleanWord(s.word) !== cleanWord(wordItem.word)),
+            newSelection,
+        ];
+        emitAnswer(updated);
+        setTappedPath([]);
+        // Auto switch to next unfound word
+        const nextRemaining = playableWords.find((w) => w.id !== wordItem.id && !updated.some((s) => s.wordId === w.id || cleanWord(s.word) === cleanWord(w.word)));
+        if (nextRemaining) {
+            setActiveWordId(nextRemaining.id);
+        }
+        else {
+            setActiveWordId(null);
+        }
+    }, [studentSelections, emitAnswer, playableWords]);
+    // Tap a cell on the grid
+    const handleCellTap = (r, c) => {
+        if (isReviewMode || !activeTargetWord || targetChars.length === 0)
+            return;
+        const char = (grid[r - 1]?.[c - 1] || '').toUpperCase();
+        // 1. If clicking the last tapped cell -> undo that cell
+        if (tappedPath.length > 0) {
+            const last = tappedPath[tappedPath.length - 1];
+            if (last.row === r && last.col === c) {
+                setTappedPath((prev) => prev.slice(0, -1));
+                return;
+            }
+        }
+        // 2. If no cells tapped yet -> start of word
+        if (tappedPath.length === 0) {
+            const isStartChar = char === targetChars[0] || char === targetChars[targetChars.length - 1];
+            if (isStartChar) {
+                setTappedPath([{ row: r, col: c }]);
+            }
+            return;
+        }
+        // 3. If cell is already tapped in the current path -> jump to that step
+        const existingIdx = tappedPath.findIndex((p) => p.row === r && p.col === c);
+        if (existingIdx >= 0) {
+            setTappedPath((prev) => prev.slice(0, existingIdx + 1));
+            return;
+        }
+        // 4. Check if shortcut: Two-Tap straight line from start cell to this end cell
+        const startCell = tappedPath[0];
+        const straightPath = getStraightLinePath(startCell, { row: r, col: c });
+        if (straightPath.length === targetChars.length) {
+            const straightLetters = straightPath.map((p) => (grid[p.row - 1]?.[p.col - 1] || '').toUpperCase()).join('');
+            const targetStr = targetChars.join('');
+            const revTargetStr = [...targetChars].reverse().join('');
+            if (straightLetters === targetStr || straightLetters === revTargetStr) {
+                // Complete via two-tap straight line shortcut!
+                handleWordFound(activeTargetWord, straightPath);
+                return;
+            }
+        }
+        // 5. Letter-by-letter tapping: check adjacency to last cell
+        const prev = tappedPath[tappedPath.length - 1];
+        const isAdjacent = Math.abs(r - prev.row) <= 1 && Math.abs(c - prev.col) <= 1;
+        if (isAdjacent && char === nextExpectedChar) {
+            const nextPath = [...tappedPath, { row: r, col: c }];
+            if (nextPath.length === activeCharSequence.length) {
+                // Word completed letter-by-letter!
+                handleWordFound(activeTargetWord, nextPath);
+            }
+            else {
+                setTappedPath(nextPath);
+            }
+        }
+    };
+    // Switch active target word
+    const handleSelectWordBankItem = (wordItem) => {
+        if (isReviewMode || wordItem.isExample)
+            return;
+        setActiveWordId(wordItem.id);
+        setTappedPath([]);
+    };
+    // Remove a found word
+    const handleRemoveSelection = (wordId, wordText) => {
+        if (isReviewMode)
+            return;
+        const updated = studentSelections.filter((s) => s.wordId !== wordId && (!wordText || cleanWord(s.word) !== cleanWord(wordText)));
+        emitAnswer(updated);
+        if (wordId)
+            setActiveWordId(wordId);
+        setTappedPath([]);
+    };
+    // Evaluation for Review Mode
+    const reviewEvaluation = useMemo(() => {
+        if (!isReviewMode)
+            return null;
+        // Evaluate each student selection
+        const evaluatedSelections = studentSelections.map((sel) => {
+            const matchingCorrect = correctWords.find((cw) => {
+                const idMatches = cw.wordId && sel.wordId && cw.wordId === sel.wordId;
+                const textMatches = cw.word && sel.word && cleanWord(cw.word) === cleanWord(sel.word);
+                const pathMatches = arePathsMatching(cw.path, sel.path);
+                return (idMatches || textMatches) && pathMatches;
+            });
+            if (!matchingCorrect) {
+                return { ...sel, status: 'INCORRECT', correctCategoryName: undefined };
+            }
+            if (isCategorize && matchingCorrect.categoryId && sel.categoryId !== matchingCorrect.categoryId) {
+                return {
+                    ...sel,
+                    status: 'WRONG_CATEGORY',
+                    correctCategoryName: categoryMap.get(matchingCorrect.categoryId) || matchingCorrect.categoryId,
+                };
+            }
+            return { ...sel, status: 'CORRECT', correctCategoryName: undefined };
+        });
+        // Determine missed words
+        const missedWords = correctWords.filter((cw) => {
+            return !studentSelections.some((sel) => {
+                const idMatches = cw.wordId && sel.wordId && cw.wordId === sel.wordId;
+                const textMatches = cw.word && sel.word && cleanWord(cw.word) === cleanWord(sel.word);
+                const pathMatches = arePathsMatching(cw.path, sel.path);
+                return (idMatches || textMatches) && pathMatches;
+            });
+        });
+        return { evaluatedSelections, missedWords };
+    }, [isReviewMode, studentSelections, correctWords, isCategorize, categoryMap]);
+    const cellMap = {};
+    // 1. Example word (always orange highlight)
+    if (exampleSelection?.path) {
+        exampleSelection.path.forEach((c) => {
+            cellMap[`${c.row}-${c.col}`] = {
+                colorConfig: HIGHLIGHT_PALETTE[0],
+                label: 'Example',
+                isExample: true,
+            };
+        });
+    }
+    // 2. Confirmed student selections
+    studentSelections.forEach((sel, selIdx) => {
+        const colorIdx = (selIdx + 1) % HIGHLIGHT_PALETTE.length;
+        const colorConfig = HIGHLIGHT_PALETTE[colorIdx];
+        sel.path.forEach((c) => {
+            cellMap[`${c.row}-${c.col}`] = {
+                colorConfig,
+                label: sel.word || `Word #${selIdx + 1}`,
+            };
+        });
+    });
+    // 3. Active tapped path (glowing blue with step numbers)
+    tappedPath.forEach((c, idx) => {
+        cellMap[`${c.row}-${c.col}`] = {
+            colorConfig: {
+                bg: 'bg-blue-500 text-white border-blue-600 shadow-md ring-4 ring-blue-300 dark:ring-blue-800 scale-105',
+                badge: 'bg-blue-600 text-white',
+                color: '#2563eb',
+                ring: 'ring-blue-400',
+            },
+            label: `Chữ thứ ${idx + 1}`,
+            isCurrentTapping: true,
+            stepNumber: idx + 1,
+        };
+    });
+    // 4. In Review Mode: Highlight missed words with dotted solution indicator
+    if (isReviewMode && reviewEvaluation?.missedWords) {
+        reviewEvaluation.missedWords.forEach((mw) => {
+            mw.path.forEach((c) => {
+                if (!cellMap[`${c.row}-${c.col}`]) {
+                    cellMap[`${c.row}-${c.col}`] = {
+                        colorConfig: {
+                            bg: 'bg-amber-50 text-amber-900 border-amber-400 border-dashed',
+                            badge: 'bg-amber-500 text-white',
+                            color: '#d97706',
+                            ring: 'ring-amber-300',
+                        },
+                        label: `Đáp án: ${mw.word || mw.wordId}`,
+                        isReviewMissed: true,
+                    };
+                }
+            });
+        });
+    }
+    const foundCount = studentSelections.length;
+    return (_jsxs("div", { className: "space-y-6 select-none", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, partName: partName, questionCount: questionCount }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction }), isCategorize ? (_jsxs(Card, { className: "p-4 sm:p-5 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-sm rounded-2xl", children: [_jsxs("div", { className: "flex items-center justify-between mb-4 border-b border-gray-100 dark:border-gray-800 pb-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Layers, { className: "h-4 w-4 text-emerald-600" }), _jsxs("span", { className: "text-sm font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider", children: ["Headings (", categories.length, " nh\u00F3m t\u1EEB)"] }), _jsxs(Badge, { variant: "secondary", className: "text-xs font-semibold", children: [foundCount, " / ", playableWords.length, " t\u1EEB"] })] }), !isReviewMode && studentSelections.length > 0 && (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
+                                    emitAnswer([]);
+                                    setTappedPath([]);
+                                }, className: "text-xs text-gray-400 hover:text-red-500 gap-1 h-7", children: [_jsx(RotateCcw, { className: "h-3 w-3" }), " L\u00E0m l\u1EA1i t\u1EA5t c\u1EA3"] }))] }), _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("div", { className: "p-3.5 rounded-xl bg-gray-50/80 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700 space-y-2.5", children: [_jsxs("div", { className: "font-bold text-sm text-gray-800 dark:text-gray-200 border-b border-gray-200 dark:border-gray-700 pb-1 flex items-center justify-between", children: [_jsx("span", { children: cat.name }), _jsxs(Badge, { variant: "outline", className: "text-xs font-semibold", children: [wordsInCat.filter((w) => studentSelections.some((s) => s.wordId === w.id) || w.isExample).length, " / ", wordsInCat.length] })] }), _jsx("div", { className: "min-h-[60px] flex flex-wrap gap-2 content-start", children: wordsInCat.map((wb, idx) => {
+                                            const isExample = Boolean(wb.isExample);
+                                            const isFound = studentSelections.some((s) => s.wordId === wb.id || cleanWord(s.word) === cleanWord(wb.word));
+                                            const isActive = activeTargetWord?.id === wb.id && !isFound && !isExample;
+                                            return (_jsxs("div", { onClick: () => !isExample && !isFound && handleSelectWordBankItem(wb), className: `px-3 py-1.5 rounded-xl text-sm font-semibold transition-all duration-150 border flex items-center gap-1.5 ${isExample
+                                                    ? 'bg-amber-50 text-amber-800 border-amber-300 italic opacity-80 cursor-default line-through'
+                                                    : isFound
+                                                        ? 'bg-emerald-50 text-emerald-800 border-emerald-300 line-through shadow-xs cursor-pointer'
+                                                        : isActive
+                                                            ? 'bg-blue-50 text-blue-900 border-blue-500 ring-2 ring-blue-400 font-extrabold scale-105 shadow-sm cursor-pointer'
+                                                            : 'bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-gray-200 dark:border-gray-700 hover:border-blue-300 cursor-pointer'}`, children: [_jsx("span", { children: wb.word }), isExample && _jsx("span", { className: "text-xs text-amber-600 font-bold no-underline", children: "(Ex)" }), isFound && !isExample && (_jsx("button", { type: "button", onClick: (e) => {
+                                                            e.stopPropagation();
+                                                            handleRemoveSelection(wb.id, wb.word);
+                                                        }, className: "text-gray-400 hover:text-red-500 text-xs ml-1", title: "B\u1EA5m \u0111\u1EC3 x\u00F3a t\u1EEB n\u00E0y", children: "\u2715" }))] }, wb.id || idx));
+                                        }) })] }, cat.id));
+                        }) })] })) : (
+            /* WORD_BANK MODE */
+            _jsxs(Card, { className: "p-4 sm:p-5 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-sm rounded-2xl", children: [_jsxs("div", { className: "flex items-center justify-between mb-3 border-b border-gray-100 dark:border-gray-800 pb-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider", children: "Word Bank (Danh s\u00E1ch t\u1EEB c\u1EA7n t\u00ECm)" }), _jsxs(Badge, { variant: "secondary", className: "text-xs font-semibold", children: [foundCount, " / ", playableWords.length, " t\u1EEB"] })] }), !isReviewMode && studentSelections.length > 0 && (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
+                                    emitAnswer([]);
+                                    setTappedPath([]);
+                                }, className: "text-xs text-gray-400 hover:text-red-500 gap-1 h-7", children: [_jsx(RotateCcw, { className: "h-3 w-3" }), " L\u00E0m l\u1EA1i t\u1EA5t c\u1EA3"] }))] }), _jsx("div", { className: "flex flex-wrap gap-2.5", children: wordBank.map((wb, idx) => {
+                            const isExample = Boolean(wb.isExample);
+                            const isFound = studentSelections.some((s) => s.wordId === wb.id || cleanWord(s.word) === cleanWord(wb.word));
+                            const isActive = activeTargetWord?.id === wb.id && !isFound && !isExample;
+                            return (_jsxs("div", { onClick: () => !isExample && !isFound && handleSelectWordBankItem(wb), className: `relative px-3.5 py-2 rounded-xl text-sm sm:text-base font-semibold transition-all duration-200 border flex items-center gap-1.5 ${isExample
+                                    ? 'bg-amber-50 dark:bg-amber-950/40 text-amber-800 dark:text-amber-200 border-amber-300 dark:border-amber-700 line-through opacity-80 cursor-default'
+                                    : isFound
+                                        ? 'bg-emerald-50 dark:bg-emerald-950/40 text-emerald-800 dark:text-emerald-200 border-emerald-300 dark:border-emerald-700 line-through shadow-xs cursor-pointer'
+                                        : isActive
+                                            ? 'bg-blue-50 dark:bg-blue-950/60 text-blue-900 dark:text-blue-100 border-blue-500 ring-3 ring-blue-400/50 font-extrabold scale-105 shadow-md cursor-pointer'
+                                            : 'bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-gray-200 dark:border-gray-700 hover:border-blue-400 cursor-pointer shadow-2xs'}`, children: [_jsx("span", { children: wb.word }), isExample && (_jsx("span", { className: "text-xs text-amber-600 font-bold no-underline", children: "(Example)" })), isFound && !isExample && (_jsx("span", { className: "text-xs text-emerald-600 font-bold no-underline", children: "\u2713" })), isFound && !isExample && !isReviewMode && (_jsx("button", { type: "button", onClick: (e) => {
+                                            e.stopPropagation();
+                                            handleRemoveSelection(wb.id, wb.word);
+                                        }, className: "ml-1 text-gray-400 hover:text-red-500 text-xs", title: "B\u1EA5m \u0111\u1EC3 x\u00F3a t\u1EEB n\u00E0y", children: "\u2715" })), isActive && (_jsx("span", { className: "ml-1 text-[11px] bg-blue-600 text-white px-1.5 py-0.5 rounded-md font-bold uppercase tracking-wider animate-pulse", children: "\u0110ang t\u00ECm" }))] }, wb.id || idx));
+                        }) })] })), !isReviewMode && activeTargetWord && (_jsxs(Card, { className: "p-4 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/40 dark:to-indigo-950/40 border-2 border-blue-300 dark:border-blue-700 rounded-2xl shadow-sm space-y-3", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Sparkles, { className: "h-5 w-5 text-blue-600 dark:text-blue-400 animate-bounce" }), _jsx("span", { className: "text-xs sm:text-sm font-extrabold text-blue-900 dark:text-blue-100 uppercase tracking-wider", children: "M\u1EE5c ti\u00EAu hi\u1EC7n t\u1EA1i:" }), _jsxs("span", { className: "text-base sm:text-lg font-black text-blue-700 dark:text-blue-300", children: ["\"", activeTargetWord.word, "\""] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [tappedPath.length > 0 && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setTappedPath((prev) => prev.slice(0, -1)), className: "h-8 text-xs font-bold gap-1 bg-white hover:bg-rose-50 hover:text-rose-600 border-gray-300", children: [_jsx(Undo2, { className: "h-3.5 w-3.5" }), " X\u00F3a ch\u1EEF v\u1EEBa b\u1EA5m (\u232B)"] })), tappedPath.length > 0 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setTappedPath([]), className: "h-8 text-xs text-gray-500 hover:text-gray-800", children: "L\u00E0m l\u1EA1i" }))] })] }), _jsx("div", { className: "flex flex-wrap items-center gap-2 pt-1", children: activeCharSequence.map((targetChar, idx) => {
+                            const isFilled = idx < tappedPath.length;
+                            const isNext = idx === tappedPath.length;
+                            return (_jsx("div", { className: `h-10 w-10 sm:h-12 sm:w-12 rounded-xl flex items-center justify-center font-black text-lg sm:text-xl transition-all duration-200 border ${isFilled
+                                    ? 'bg-blue-600 text-white border-blue-700 shadow-md scale-105'
+                                    : isNext
+                                        ? 'bg-white dark:bg-gray-800 text-blue-600 border-blue-500 border-2 ring-4 ring-blue-200 dark:ring-blue-900 animate-pulse'
+                                        : 'bg-white/80 dark:bg-gray-800/80 text-gray-400 border-gray-200 dark:border-gray-700'}`, children: isFilled ? tappedChars[idx] || targetChar : targetChar }, idx));
+                        }) }), _jsx("p", { className: "text-xs text-blue-700/80 dark:text-blue-300/80 font-medium", children: "\uD83D\uDC49 Ch\u1EA1m l\u1EA7n l\u01B0\u1EE3t t\u1EEBng ch\u1EEF c\u00E1i tr\u00EAn b\u1EA3ng ch\u1EEF c\u00E1i b\u00EAn d\u01B0\u1EDBi. (Ho\u1EB7c ch\u1EA1m ch\u1EEF c\u00E1i \u0111\u1EA7u \u2794 ch\u1EA1m ch\u1EEF c\u00E1i cu\u1ED1i \u0111\u1EC3 khoanh nhanh)." })] })), _jsx("div", { className: "flex flex-col items-center justify-center p-2 sm:p-4 bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-800", children: _jsx("div", { className: "overflow-x-auto max-w-full p-2 flex justify-center", children: _jsx("div", { className: "inline-grid gap-1.5 sm:gap-2 p-3 sm:p-4 bg-amber-50/30 dark:bg-gray-950/40 rounded-2xl border border-amber-200/60 dark:border-gray-800 touch-none", 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 = cellMap[`${r}-${c}`];
+                                return (_jsxs("button", { type: "button", onClick: () => handleCellTap(r, c), className: `relative h-9 w-9 sm:h-11 sm:w-11 md:h-12 md:w-12 flex items-center justify-center font-black text-base sm:text-lg select-none rounded-xl sm:rounded-2xl transition-all duration-150 cursor-pointer border ${highlight
+                                        ? `${highlight.colorConfig.bg} font-extrabold shadow-sm scale-95 border-2`
+                                        : 'border-transparent bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 hover:bg-blue-100/70 hover:border-blue-300 dark:hover:bg-gray-700 shadow-2xs'}`, title: highlight ? `${highlight.label} (${r},${c})` : `(${r},${c})`, children: [_jsx("span", { children: char || '·' }), highlight?.stepNumber && (_jsx("span", { className: "absolute -top-1.5 -right-1.5 h-4 w-4 rounded-full bg-white text-blue-600 text-[10px] font-black flex items-center justify-center shadow-xs border border-blue-400", children: highlight.stepNumber }))] }, `${r}-${c}`));
+                            });
+                        }) }) }) }), isReviewMode && correctWords.length > 0 && (_jsxs(Card, { className: "p-4 bg-gray-50/80 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700 space-y-3 rounded-2xl", children: [_jsxs("div", { className: "flex items-center gap-2 font-bold text-sm text-gray-800 dark:text-gray-200 border-b pb-2", children: [_jsx(Eye, { className: "h-4 w-4 text-blue-600" }), _jsxs("span", { children: ["\u0110\u00E1p \u00E1n chi ti\u1EBFt (", correctWords.length, " t\u1EEB)"] })] }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2.5", children: correctWords.map((cw, idx) => {
+                            const catName = cw.categoryId ? categoryMap.get(cw.categoryId) : undefined;
+                            const pathStr = cw.path?.map((p) => `[${p.row},${p.col}]`).join(' → ');
+                            return (_jsxs("div", { className: "p-2.5 rounded-lg bg-white dark:bg-gray-900 border text-xs space-y-1 shadow-2xs", children: [_jsxs("div", { className: "flex items-center justify-between font-bold", children: [_jsx("span", { className: "text-emerald-700 dark:text-emerald-300 uppercase", children: cw.word || cw.wordId }), catName && (_jsx(Badge, { variant: "outline", className: "text-[10px] bg-blue-50 text-blue-800 border-blue-200", children: catName }))] }), _jsx("div", { className: "text-[11px] text-gray-400 font-mono truncate", title: pathStr, children: pathStr })] }, cw.wordId || idx));
+                        }) })] }))] }));
+}
+export default FindWordsInMatrixRenderer;

package/dist/components/exams/take/components/question-renderers/MoversCrosswordPuzzleRenderer.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { MoversCrosswordPuzzleRendererProps } from '../../types';
-export declare function MoversCrosswordPuzzleRenderer({ partNumber, partName, questionCount, instruction, title, gridSize, clues, answers, correctAnswers, onAnswerChange, isReviewMode, caseSensitive, }: MoversCrosswordPuzzleRendererProps): React.JSX.Element;
+export declare function MoversCrosswordPuzzleRenderer({ partNumber, partName, questionCount, instruction, title, gridSize, markedColumn, hiddenWord, clues, answers, correctAnswers, onAnswerChange, isReviewMode, caseSensitive, }: MoversCrosswordPuzzleRendererProps): React.JSX.Element;

package/dist/components/exams/take/components/question-renderers/MoversCrosswordPuzzleRenderer.js

@@ -4,7 +4,7 @@ import { useState, useMemo, useRef, useEffect } from 'react';
 import { Check, X } from 'lucide-react';
 import CambridgeYlePartBanner from '../../../../themes/cambridge-yle/CambridgeYlePartBanner';
 import CambridgeYleInstructionBanner from '../../../../themes/cambridge-yle/CambridgeYleInstructionBanner';
-export function MoversCrosswordPuzzleRenderer({ partNumber, partName, questionCount, instruction, title, gridSize, clues, answers = {}, correctAnswers = {}, onAnswerChange, isReviewMode = false, caseSensitive = false, }) {
+export function MoversCrosswordPuzzleRenderer({ partNumber, partName, questionCount, instruction, title, gridSize, markedColumn, hiddenWord, clues, answers = {}, correctAnswers = {}, onAnswerChange, isReviewMode = false, caseSensitive = false, }) {
     const rows = gridSize?.rows || 12;
     const cols = gridSize?.cols || 12;
     const acrossClues = useMemo(() => clues?.across || [], [clues?.across]);
@@ -258,9 +258,31 @@ export function MoversCrosswordPuzzleRenderer({ partNumber, partName, questionCo
                                             const isSelected = selectedCell?.r === r && selectedCell?.c === c;
                                             const isWordActive = activeWordCells.some((cell) => cell.r === r && cell.c === c);
                                             const reviewStatus = getCellReviewStatus(r, c);
-                                            const cellValue = answers[key] || '';
-                                            let cellStyle = 'border-gray-400 bg-white text-gray-800';
-                                            if (isReviewMode && reviewStatus) {
+                                            const isMarked = markedColumn && c === markedColumn;
+                                            const isExample = cellInfo.across?.isExample || cellInfo.down?.isExample;
+                                            // Example letter resolution
+                                            let exampleLetter = '';
+                                            if (isExample) {
+                                                if (cellInfo.across?.isExample && correctAnswers[`across-${cellInfo.across.number}`]) {
+                                                    const word = correctAnswers[`across-${cellInfo.across.number}`];
+                                                    exampleLetter = word[c - cellInfo.across.startCol] || '';
+                                                }
+                                                else if (cellInfo.down?.isExample && correctAnswers[`down-${cellInfo.down.number}`]) {
+                                                    const word = correctAnswers[`down-${cellInfo.down.number}`];
+                                                    exampleLetter = word[r - cellInfo.down.startRow] || '';
+                                                }
+                                            }
+                                            const cellValue = isExample ? exampleLetter : (answers[key] || '');
+                                            // Dynamic styles
+                                            let cellStyle = isMarked
+                                                ? 'border-gray-400 bg-gray-400 text-gray-950 shadow-sm ring-1 ring-gray-400/50'
+                                                : 'border-gray-300 bg-gray-100 text-gray-800';
+                                            if (isExample) {
+                                                cellStyle = isMarked
+                                                    ? 'border-orange-400 bg-gray-400 text-orange-600 font-bold italic shadow-sm ring-1 ring-gray-400/50'
+                                                    : 'border-gray-300 bg-gray-100 text-orange-600 font-bold italic';
+                                            }
+                                            else if (isReviewMode && reviewStatus) {
                                                 if (reviewStatus.isCorrect) {
                                                     cellStyle = 'border-green-500 bg-green-100 text-green-700 font-bold';
                                                 }
@@ -269,17 +291,21 @@ export function MoversCrosswordPuzzleRenderer({ partNumber, partName, questionCo
                                                 }
                                             }
                                             else if (isSelected) {
-                                                cellStyle = 'border-blue-600 bg-blue-100 ring-2 ring-blue-500 text-blue-900 font-bold';
+                                                cellStyle = isMarked
+                                                    ? 'border-blue-600 bg-blue-200 ring-2 ring-blue-600 text-blue-950 font-bold'
+                                                    : 'border-blue-600 bg-blue-100 ring-2 ring-blue-500 text-blue-900 font-bold';
                                             }
                                             else if (isWordActive) {
-                                                cellStyle = 'border-blue-400 bg-blue-50 text-blue-900';
+                                                cellStyle = isMarked
+                                                    ? 'border-blue-500 bg-slate-300 text-blue-950 font-bold ring-1 ring-blue-400'
+                                                    : 'border-blue-400 bg-blue-50 text-blue-900';
                                             }
                                             return (_jsxs("div", { onClick: () => handleCellClick(r, c), className: `relative flex items-center justify-center rounded-lg border-2 font-bold shadow-sm h-8 w-8 sm:h-10 sm:w-10 md:h-11 md:w-11 text-base sm:text-lg transition-all select-none cursor-pointer ${cellStyle}`, children: [clueNum && (_jsx("span", { className: "absolute top-0.5 left-1 text-[9px] sm:text-[10px] font-bold text-gray-500 leading-none", children: clueNum })), !isReviewMode ? (_jsx("input", { ref: (el) => {
                                                             if (el)
                                                                 inputRefs.current.set(key, el);
                                                             else
                                                                 inputRefs.current.delete(key);
-                                                        }, type: "text", maxLength: 1, value: cellValue, onChange: (e) => handleInputChange(e.target.value, r, c), onKeyDown: (e) => handleKeyDown(e, r, c), onFocus: () => handleCellClick(r, c), className: "w-full h-full text-center bg-transparent uppercase font-bold outline-none cursor-pointer" })) : (_jsxs("div", { className: "flex flex-col items-center justify-center", children: [_jsx("span", { children: cellValue || '—' }), reviewStatus && !reviewStatus.isCorrect && (_jsx("span", { className: "absolute -bottom-1 -right-1 text-[9px] bg-green-600 text-white font-bold px-1 rounded-full shadow", children: reviewStatus.expected }))] })), isReviewMode && reviewStatus && (_jsx("span", { className: `absolute -top-1 -right-1 rounded-full p-0.5 text-white ${reviewStatus.isCorrect ? 'bg-green-500' : 'bg-red-500'}`, children: reviewStatus.isCorrect ? (_jsx(Check, { className: "h-2.5 w-2.5" })) : (_jsx(X, { className: "h-2.5 w-2.5" })) }))] }, key));
+                                                        }, type: "text", maxLength: 1, disabled: Boolean(isExample), value: cellValue, onChange: (e) => handleInputChange(e.target.value, r, c), onKeyDown: (e) => handleKeyDown(e, r, c), onFocus: () => handleCellClick(r, c), className: `w-full h-full text-center bg-transparent uppercase font-bold outline-none ${isExample ? 'cursor-default' : 'cursor-pointer'}` })) : (_jsxs("div", { className: "flex flex-col items-center justify-center", children: [_jsx("span", { children: cellValue || '—' }), reviewStatus && !reviewStatus.isCorrect && (_jsx("span", { className: "absolute -bottom-1 -right-1 text-[9px] bg-green-600 text-white font-bold px-1 rounded-full shadow", children: reviewStatus.expected }))] })), isReviewMode && reviewStatus && (_jsx("span", { className: `absolute -top-1 -right-1 rounded-full p-0.5 text-white ${reviewStatus.isCorrect ? 'bg-green-500' : 'bg-red-500'}`, children: reviewStatus.isCorrect ? (_jsx(Check, { className: "h-2.5 w-2.5" })) : (_jsx(X, { className: "h-2.5 w-2.5" })) }))] }, key));
                                         });
                                     }) }) })] })] })] }));
 }

package/dist/components/exams/take/components/question-renderers/index.d.ts

@@ -19,4 +19,5 @@ export { MoversMatchByWritingAnswerRenderer } from './MoversMatchByWritingAnswer
 export { MoversWordFillStructuredFormRenderer } from './MoversWordFillStructuredFormRenderer';
 export { MoversWordOrderAndMatchGroupRenderer } from './MoversWordOrderAndMatchGroupRenderer';
 export { MoversCrosswordPuzzleRenderer } from './MoversCrosswordPuzzleRenderer';
+export { FindWordsInMatrixRenderer } from './FindWordsInMatrixRenderer';
 export { ArticlesViewer } from './ArticlesViewer';

package/dist/components/exams/take/components/question-renderers/index.js

@@ -23,4 +23,5 @@ export { MoversMatchByWritingAnswerRenderer } from './MoversMatchByWritingAnswer
 export { MoversWordFillStructuredFormRenderer } from './MoversWordFillStructuredFormRenderer';
 export { MoversWordOrderAndMatchGroupRenderer } from './MoversWordOrderAndMatchGroupRenderer';
 export { MoversCrosswordPuzzleRenderer } from './MoversCrosswordPuzzleRenderer';
+export { FindWordsInMatrixRenderer } from './FindWordsInMatrixRenderer';
 export { ArticlesViewer } from './ArticlesViewer';

package/dist/components/exams/take/types.d.ts

@@ -317,3 +317,53 @@ export interface MoversCrosswordPuzzleRendererProps {
     isReviewMode?: boolean;
     caseSensitive?: boolean;
 }
+export type FindWordsInMatrixType = 'WORD_BANK' | 'CATEGORIZE';
+export interface FindWordsInMatrixCategoryItem {
+    id: string;
+    name: string;
+    color?: string;
+}
+export interface FindWordsInMatrixWordBankItem {
+    id: string;
+    word: string;
+    isExample?: boolean;
+    categoryId?: string;
+}
+export interface FindWordsInMatrixSelectionItem {
+    wordId?: string;
+    word?: string;
+    categoryId?: string;
+    path: Array<{
+        row: number;
+        col: number;
+    }>;
+}
+export interface FindWordsInMatrixRendererProps {
+    partNumber: number;
+    partName?: string;
+    questionCount: number;
+    instruction: string;
+    type?: FindWordsInMatrixType;
+    title?: string;
+    gridSize: {
+        rows: number;
+        cols: number;
+    };
+    grid: string[][];
+    categories?: FindWordsInMatrixCategoryItem[];
+    wordBank: FindWordsInMatrixWordBankItem[];
+    exampleSelection?: {
+        wordId: string;
+        categoryId?: string;
+        path: Array<{
+            row: number;
+            col: number;
+        }>;
+    };
+    selectedWords?: FindWordsInMatrixSelectionItem[];
+    correctWords?: FindWordsInMatrixSelectionItem[];
+    answers: Record<string, any>;
+    onAnswerChange: (questionId: string, value: any) => void;
+    isReviewMode?: boolean;
+    questionId?: string;
+}