@tinyweb_dev/oe-exam-sdk 0.1.31 → 0.1.32

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, } 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, } 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, } 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, } 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, }) {
@@ -112,6 +112,10 @@ export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode =
             const data = transformGridFill(questions);
             return (_jsx(MoversGridFillRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, grid: data.grid, rows: data.rows, columns: data.columns, cellAnswers: {}, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, disabledCells: data.disabledCells }));
         }
+        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 'IMAGE_OBJECT_MATCHING': {
             // Reuse coloring renderer — same content structure as READ_AND_COLOR_OBJECTS
             const data = transformColorObjects(questions);

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

@@ -0,0 +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;

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

@@ -0,0 +1,285 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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, }) {
+    const rows = gridSize?.rows || 12;
+    const cols = gridSize?.cols || 12;
+    const acrossClues = useMemo(() => clues?.across || [], [clues?.across]);
+    const downClues = useMemo(() => clues?.down || [], [clues?.down]);
+    const [activeDirection, setActiveDirection] = useState('across');
+    const [activeClueNumber, setActiveClueNumber] = useState(() => {
+        return acrossClues[0]?.number || downClues[0]?.number || 1;
+    });
+    const [selectedCell, setSelectedCell] = useState(null);
+    const inputRefs = useRef(new Map());
+    const { cellMap, clueNumberMap, wordCellsMap } = useMemo(() => {
+        const cMap = new Map();
+        const numMap = new Map();
+        const wMap = new Map();
+        for (const c of acrossClues) {
+            numMap.set(`${c.startRow}-${c.startCol}`, c.number);
+            const cells = [];
+            for (let i = 0; i < c.length; i++) {
+                const key = `${c.startRow}-${c.startCol + i}`;
+                cells.push({ r: c.startRow, c: c.startCol + i });
+                const existing = cMap.get(key) || {};
+                cMap.set(key, { ...existing, across: c });
+            }
+            wMap.set(`across-${c.number}`, cells);
+        }
+        for (const c of downClues) {
+            if (!numMap.has(`${c.startRow}-${c.startCol}`)) {
+                numMap.set(`${c.startRow}-${c.startCol}`, c.number);
+            }
+            const cells = [];
+            for (let i = 0; i < c.length; i++) {
+                const key = `${c.startRow + i}-${c.startCol}`;
+                cells.push({ r: c.startRow + i, c: c.startCol });
+                const existing = cMap.get(key) || {};
+                cMap.set(key, { ...existing, down: c });
+            }
+            wMap.set(`down-${c.number}`, cells);
+        }
+        return { cellMap: cMap, clueNumberMap: numMap, wordCellsMap: wMap };
+    }, [acrossClues, downClues]);
+    useEffect(() => {
+        if (!selectedCell) {
+            const firstClue = acrossClues[0] || downClues[0];
+            if (firstClue) {
+                setSelectedCell({ r: firstClue.startRow, c: firstClue.startCol });
+            }
+        }
+    }, [acrossClues, downClues, selectedCell]);
+    const activeWordCells = useMemo(() => {
+        return wordCellsMap.get(`${activeDirection}-${activeClueNumber}`) || [];
+    }, [wordCellsMap, activeDirection, activeClueNumber]);
+    const handleSelectClue = (number, direction) => {
+        setActiveDirection(direction);
+        setActiveClueNumber(number);
+        const clueList = direction === 'across' ? acrossClues : downClues;
+        const clue = clueList.find((c) => c.number === number);
+        if (clue) {
+            setSelectedCell({ r: clue.startRow, c: clue.startCol });
+            const key = `${clue.startRow}-${clue.startCol}`;
+            inputRefs.current.get(key)?.focus();
+        }
+    };
+    const handleCellClick = (r, c) => {
+        const key = `${r}-${c}`;
+        const cellInfo = cellMap.get(key);
+        if (!cellInfo)
+            return;
+        if (selectedCell?.r === r && selectedCell?.c === c && cellInfo.across && cellInfo.down) {
+            const newDir = activeDirection === 'across' ? 'down' : 'across';
+            setActiveDirection(newDir);
+            const newClue = newDir === 'across' ? cellInfo.across : cellInfo.down;
+            if (newClue)
+                setActiveClueNumber(newClue.number);
+        }
+        else {
+            if (activeDirection === 'across' && cellInfo.across) {
+                setActiveClueNumber(cellInfo.across.number);
+            }
+            else if (activeDirection === 'down' && cellInfo.down) {
+                setActiveClueNumber(cellInfo.down.number);
+            }
+            else if (cellInfo.across) {
+                setActiveDirection('across');
+                setActiveClueNumber(cellInfo.across.number);
+            }
+            else if (cellInfo.down) {
+                setActiveDirection('down');
+                setActiveClueNumber(cellInfo.down.number);
+            }
+            setSelectedCell({ r, c });
+        }
+    };
+    const moveToNextCell = (r, c) => {
+        const cells = activeWordCells;
+        const currIdx = cells.findIndex((cell) => cell.r === r && cell.c === c);
+        if (currIdx >= 0 && currIdx < cells.length - 1) {
+            const next = cells[currIdx + 1];
+            setSelectedCell(next);
+            inputRefs.current.get(`${next.r}-${next.c}`)?.focus();
+        }
+    };
+    const moveToPrevCell = (r, c) => {
+        const cells = activeWordCells;
+        const currIdx = cells.findIndex((cell) => cell.r === r && cell.c === c);
+        if (currIdx > 0) {
+            const prev = cells[currIdx - 1];
+            setSelectedCell(prev);
+            inputRefs.current.get(`${prev.r}-${prev.c}`)?.focus();
+        }
+    };
+    const handleKeyDown = (e, r, c) => {
+        if (isReviewMode)
+            return;
+        if (e.key === 'Backspace') {
+            const key = `${r}-${c}`;
+            if (!answers[key]) {
+                e.preventDefault();
+                moveToPrevCell(r, c);
+                const cells = activeWordCells;
+                const currIdx = cells.findIndex((cell) => cell.r === r && cell.c === c);
+                if (currIdx > 0) {
+                    const prev = cells[currIdx - 1];
+                    onAnswerChange(`${prev.r}-${prev.c}`, '');
+                }
+            }
+            else {
+                onAnswerChange(key, '');
+            }
+        }
+        else if (e.key === 'ArrowRight') {
+            e.preventDefault();
+            if (activeDirection !== 'across') {
+                setActiveDirection('across');
+                const info = cellMap.get(`${r}-${c}`);
+                if (info?.across)
+                    setActiveClueNumber(info.across.number);
+            }
+            else {
+                moveToNextCell(r, c);
+            }
+        }
+        else if (e.key === 'ArrowLeft') {
+            e.preventDefault();
+            if (activeDirection !== 'across') {
+                setActiveDirection('across');
+                const info = cellMap.get(`${r}-${c}`);
+                if (info?.across)
+                    setActiveClueNumber(info.across.number);
+            }
+            else {
+                moveToPrevCell(r, c);
+            }
+        }
+        else if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            if (activeDirection !== 'down') {
+                setActiveDirection('down');
+                const info = cellMap.get(`${r}-${c}`);
+                if (info?.down)
+                    setActiveClueNumber(info.down.number);
+            }
+            else {
+                moveToNextCell(r, c);
+            }
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            if (activeDirection !== 'down') {
+                setActiveDirection('down');
+                const info = cellMap.get(`${r}-${c}`);
+                if (info?.down)
+                    setActiveClueNumber(info.down.number);
+            }
+            else {
+                moveToPrevCell(r, c);
+            }
+        }
+    };
+    const handleInputChange = (val, r, c) => {
+        if (isReviewMode)
+            return;
+        const cleanVal = val.slice(-1).toUpperCase();
+        const key = `${r}-${c}`;
+        onAnswerChange(key, cleanVal);
+        if (cleanVal) {
+            moveToNextCell(r, c);
+        }
+    };
+    const getCellReviewStatus = (r, c) => {
+        if (!isReviewMode)
+            return null;
+        const key = `${r}-${c}`;
+        const userLetter = (answers[key] || '').trim();
+        const cellInfo = cellMap.get(key);
+        if (!cellInfo)
+            return null;
+        let expectedLetter = '';
+        if (cellInfo.across && correctAnswers[`across-${cellInfo.across.number}`]) {
+            const word = correctAnswers[`across-${cellInfo.across.number}`];
+            const offset = c - cellInfo.across.startCol;
+            expectedLetter = word[offset] || '';
+        }
+        else if (cellInfo.down && correctAnswers[`down-${cellInfo.down.number}`]) {
+            const word = correctAnswers[`down-${cellInfo.down.number}`];
+            const offset = r - cellInfo.down.startRow;
+            expectedLetter = word[offset] || '';
+        }
+        if (!expectedLetter)
+            return null;
+        const isMatch = caseSensitive
+            ? userLetter === expectedLetter
+            : userLetter.toLowerCase() === expectedLetter.toLowerCase();
+        return { isCorrect: isMatch, expected: expectedLetter, user: userLetter };
+    };
+    return (_jsxs("div", { className: "flex h-full flex-col gap-4 overflow-y-auto p-3 sm:gap-5 sm:p-4 md:gap-6 md:p-6", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode })] }), title && (_jsx("h3", { className: "text-center text-lg font-bold text-gray-800 tracking-wide", children: title })), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-6 items-start", children: [_jsxs("div", { className: "lg:col-span-5 flex flex-col gap-4", children: [_jsxs("div", { className: "rounded-xl border-2 border-blue-200 bg-blue-50/40 p-4 shadow-sm", children: [_jsxs("h4", { className: "font-bold text-blue-900 mb-3 flex items-center justify-between", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "px-2 py-0.5 rounded bg-blue-600 text-white text-xs font-bold uppercase", children: "Across" }), _jsx("span", { children: "H\u00E0ng ngang" })] }), _jsxs("span", { className: "text-xs text-blue-600 font-medium", children: ["(", acrossClues.length, " c\u00E2u)"] })] }), _jsx("div", { className: "flex flex-col gap-2 max-h-72 overflow-y-auto pr-1", children: acrossClues.map((c) => {
+                                            const isActive = activeDirection === 'across' && activeClueNumber === c.number;
+                                            const answerKey = `across-${c.number}`;
+                                            const expectedWord = correctAnswers[answerKey];
+                                            let userWord = '';
+                                            for (let i = 0; i < c.length; i++) {
+                                                userWord += (answers[`${c.startRow}-${c.startCol + i}`] || '').trim();
+                                            }
+                                            const isFilled = userWord.length === c.length;
+                                            return (_jsxs("button", { type: "button", onClick: () => handleSelectClue(c.number, 'across'), className: `flex items-start gap-2.5 p-2.5 rounded-lg border text-left transition ${isActive
+                                                    ? 'border-blue-600 bg-blue-100/90 shadow-sm ring-1 ring-blue-500'
+                                                    : 'border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-50/60'}`, children: [_jsx("span", { className: `flex items-center justify-center h-6 w-6 rounded-md text-xs font-bold ${isActive ? 'bg-blue-600 text-white' : 'bg-blue-100 text-blue-800'}`, children: c.number }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-semibold text-gray-800", children: c.clue }), isReviewMode && expectedWord && (_jsxs("div", { className: "text-xs mt-1 flex items-center gap-2", children: [_jsx("span", { className: "text-gray-500", children: "\u0110\u00E1p \u00E1n:" }), _jsx("span", { className: "font-bold text-green-700", children: expectedWord }), userWord && userWord !== expectedWord && (_jsx("span", { className: "line-through text-red-500 font-semibold", children: userWord }))] }))] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs("span", { className: "text-xs text-gray-400 font-medium", children: ["(", c.length, ")"] }), isFilled && !isReviewMode && (_jsx("span", { className: "h-2 w-2 rounded-full bg-blue-500" }))] })] }, `across-${c.number}`));
+                                        }) })] }), _jsxs("div", { className: "rounded-xl border-2 border-purple-200 bg-purple-50/40 p-4 shadow-sm", children: [_jsxs("h4", { className: "font-bold text-purple-900 mb-3 flex items-center justify-between", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "px-2 py-0.5 rounded bg-purple-600 text-white text-xs font-bold uppercase", children: "Down" }), _jsx("span", { children: "H\u00E0ng d\u1ECDc" })] }), _jsxs("span", { className: "text-xs text-purple-600 font-medium", children: ["(", downClues.length, " c\u00E2u)"] })] }), _jsx("div", { className: "flex flex-col gap-2 max-h-72 overflow-y-auto pr-1", children: downClues.map((c) => {
+                                            const isActive = activeDirection === 'down' && activeClueNumber === c.number;
+                                            const answerKey = `down-${c.number}`;
+                                            const expectedWord = correctAnswers[answerKey];
+                                            let userWord = '';
+                                            for (let i = 0; i < c.length; i++) {
+                                                userWord += (answers[`${c.startRow + i}-${c.startCol}`] || '').trim();
+                                            }
+                                            const isFilled = userWord.length === c.length;
+                                            return (_jsxs("button", { type: "button", onClick: () => handleSelectClue(c.number, 'down'), className: `flex items-start gap-2.5 p-2.5 rounded-lg border text-left transition ${isActive
+                                                    ? 'border-purple-600 bg-purple-100/90 shadow-sm ring-1 ring-purple-500'
+                                                    : 'border-gray-200 bg-white hover:border-purple-300 hover:bg-purple-50/60'}`, children: [_jsx("span", { className: `flex items-center justify-center h-6 w-6 rounded-md text-xs font-bold ${isActive ? 'bg-purple-600 text-white' : 'bg-purple-100 text-purple-800'}`, children: c.number }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-semibold text-gray-800", children: c.clue }), isReviewMode && expectedWord && (_jsxs("div", { className: "text-xs mt-1 flex items-center gap-2", children: [_jsx("span", { className: "text-gray-500", children: "\u0110\u00E1p \u00E1n:" }), _jsx("span", { className: "font-bold text-green-700", children: expectedWord }), userWord && userWord !== expectedWord && (_jsx("span", { className: "line-through text-red-500 font-semibold", children: userWord }))] }))] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs("span", { className: "text-xs text-gray-400 font-medium", children: ["(", c.length, ")"] }), isFilled && !isReviewMode && (_jsx("span", { className: "h-2 w-2 rounded-full bg-purple-500" }))] })] }, `down-${c.number}`));
+                                        }) })] })] }), _jsxs("div", { className: "lg:col-span-7 flex flex-col items-center gap-4 bg-gray-50/80 p-4 sm:p-6 rounded-2xl border-2 border-gray-200 shadow-sm", children: [!isReviewMode && (_jsxs("div", { className: "flex items-center gap-3 text-xs font-semibold text-gray-600 bg-white px-3 py-1.5 rounded-full border border-gray-200 shadow-sm", children: [_jsx("span", { children: "\u0110ang ch\u1ECDn:" }), _jsx("span", { className: "flex items-center gap-1 text-blue-700", children: activeDirection === 'across' ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "font-bold", children: ["Across ", activeClueNumber] }), _jsx("span", { className: "text-gray-400 font-normal", children: "(Ngang)" })] })) : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "font-bold", children: ["Down ", activeClueNumber] }), _jsx("span", { className: "text-gray-400 font-normal", children: "(D\u1ECDc)" })] })) }), _jsx("span", { className: "text-gray-300", children: "|" }), _jsx("span", { className: "text-gray-500 font-normal", children: "Click \u0111\u00FAp \u00F4 giao nhau \u0111\u1EC3 \u0111\u1ED5i chi\u1EC1u" })] })), _jsx("div", { className: "overflow-x-auto max-w-full p-2", children: _jsx("div", { className: "inline-grid gap-1 sm:gap-1.5", 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 key = `${r}-${c}`;
+                                            const cellInfo = cellMap.get(key);
+                                            const clueNum = clueNumberMap.get(key);
+                                            if (!cellInfo) {
+                                                return (_jsx("div", { className: "h-8 w-8 sm:h-10 sm:w-10 md:h-11 md:w-11 bg-transparent" }, key));
+                                            }
+                                            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) {
+                                                if (reviewStatus.isCorrect) {
+                                                    cellStyle = 'border-green-500 bg-green-100 text-green-700 font-bold';
+                                                }
+                                                else {
+                                                    cellStyle = 'border-red-500 bg-red-100 text-red-700 font-bold';
+                                                }
+                                            }
+                                            else if (isSelected) {
+                                                cellStyle = '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';
+                                            }
+                                            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));
+                                        });
+                                    }) }) })] })] })] }));
+}

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

@@ -18,4 +18,5 @@ export { MoversWordFillParagraphRenderer } from './MoversWordFillParagraphRender
 export { MoversMatchByWritingAnswerRenderer } from './MoversMatchByWritingAnswerRenderer';
 export { MoversWordFillStructuredFormRenderer } from './MoversWordFillStructuredFormRenderer';
 export { MoversWordOrderAndMatchGroupRenderer } from './MoversWordOrderAndMatchGroupRenderer';
+export { MoversCrosswordPuzzleRenderer } from './MoversCrosswordPuzzleRenderer';
 export { ArticlesViewer } from './ArticlesViewer';

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

@@ -22,4 +22,5 @@ export { MoversWordFillParagraphRenderer } from './MoversWordFillParagraphRender
 export { MoversMatchByWritingAnswerRenderer } from './MoversMatchByWritingAnswerRenderer';
 export { MoversWordFillStructuredFormRenderer } from './MoversWordFillStructuredFormRenderer';
 export { MoversWordOrderAndMatchGroupRenderer } from './MoversWordOrderAndMatchGroupRenderer';
+export { MoversCrosswordPuzzleRenderer } from './MoversCrosswordPuzzleRenderer';
 export { ArticlesViewer } from './ArticlesViewer';

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

@@ -287,3 +287,33 @@ export interface MoversGridFillRendererProps {
     caseSensitive?: boolean;
     disabledCells?: string[];
 }
+export interface CrosswordClueItem {
+    number: number;
+    clue: string;
+    startRow: number;
+    startCol: number;
+    length: number;
+    isExample?: boolean;
+}
+export interface MoversCrosswordPuzzleRendererProps {
+    partNumber: number;
+    partName?: string;
+    questionCount: number;
+    instruction: string;
+    title?: string;
+    gridSize: {
+        rows: number;
+        cols: number;
+    };
+    markedColumn?: number;
+    hiddenWord?: string;
+    clues: {
+        across: CrosswordClueItem[];
+        down: CrosswordClueItem[];
+    };
+    answers: Record<string, string>;
+    correctAnswers?: Record<string, string>;
+    onAnswerChange: (key: string, value: string) => void;
+    isReviewMode?: boolean;
+    caseSensitive?: boolean;
+}

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

@@ -106,7 +106,7 @@ function findParentQuestion(subQuestionId, parts) {
  */
 function findGridParentQuestion(parts) {
     for (const part of parts) {
-        if (part.questionType === 'FILL_MISSING_WORDS_IN_GRID') {
+        if (part.questionType === 'FILL_MISSING_WORDS_IN_GRID' || part.questionType === 'CROSSWORD_PUZZLE') {
             if (part.questions.length > 0) {
                 return {
                     parentId: part.questions[0].id,
@@ -417,10 +417,40 @@ export function transformAnswersForSubmission(answers, parts) {
     }
     // Add grid cell answers (grouped under parent question)
     for (const [parentId, cellAnswers] of gridCellAnswers) {
-        result.push({
-            questionId: parentId,
-            answer: { answers: cellAnswers },
-        });
+        const parentPart = parts.find((p) => p.questions.some((q) => q.id === parentId));
+        if (parentPart?.questionType === 'CROSSWORD_PUZZLE') {
+            const q = parentPart.questions.find((x) => x.id === parentId);
+            const content = q?.content;
+            const words = {};
+            if (content?.clues) {
+                const across = content.clues.across || [];
+                const down = content.clues.down || [];
+                for (const c of across) {
+                    let word = '';
+                    for (let i = 0; i < (c.length || 1); i++) {
+                        word += (cellAnswers[`${c.startRow}-${c.startCol + i}`] || '').trim();
+                    }
+                    words[`across-${c.number}`] = word;
+                }
+                for (const c of down) {
+                    let word = '';
+                    for (let i = 0; i < (c.length || 1); i++) {
+                        word += (cellAnswers[`${c.startRow + i}-${c.startCol}`] || '').trim();
+                    }
+                    words[`down-${c.number}`] = word;
+                }
+            }
+            result.push({
+                questionId: parentId,
+                answer: { answers: words, cells: cellAnswers },
+            });
+        }
+        else {
+            result.push({
+                questionId: parentId,
+                answer: { answers: cellAnswers },
+            });
+        }
     }
     // Add label answers (grouped under parent question)
     for (const [parentId, labels] of labelAnswers) {

package/dist/components/exams/take/utils/question-transformers.d.ts

@@ -5,7 +5,7 @@
  * Each transformer handles specific question type data structure.
  */
 import type { FillBlankQuestion, ChooseBestAnswerQuestion, PictureChooseSubQuestion, PictureFillBlankSubQuestion, ReadingPassageQuestion, LabelThePictureLabel, FillWordHintSubQuestion, ColoringHintItem, ColoringRegion } from '../types';
-export type QuestionType = 'FILL_IN_BLANK' | 'WRITE_CORRECT_VERB_FORM' | 'CHOOSE_THE_CORRECT_ANSWER' | 'CHOOSE_THE_CORRECT_ANSWER_GROUP' | 'CHOOSE_CORRECT_ADJECTIVE' | 'WRITE_A_SHORT_LETTER' | 'READ_AND_COLOR_OBJECTS' | 'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER' | 'LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER' | 'READ_PASSAGE_AND_ANSWER_QUESTIONS' | 'LABEL_THE_PICTURE' | 'LOOK_PICTURE_FILL_WORD_HINT' | 'FILL_MISSING_WORDS_IN_GRID' | 'IMAGE_OBJECT_MATCHING' | 'ANSWER_THE_QUESTION' | 'ANSWER_THE_QUESTION_GROUP' | 'TRUE_FALSE' | 'TRUE_FALSE_GROUP' | 'CROSS_OUT_WORD_GROUP' | 'WORD_ORDERING' | 'WORD_FILL_PARAGRAPH' | 'MATCH_BY_WRITING_ANSWER' | 'WRITE_SENTENCES' | 'WORD_FILL_STRUCTURED_FORM' | 'WORD_ORDER_AND_MATCH_GROUP' | 'LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE' | 'LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP' | 'LISTEN_AND_DRAG_OBJECTS_INTO_SCENE' | 'LISTEN_AND_SPEAK_ANSWER' | 'LISTEN_AND_SPEAK_COMPARE_IMAGES' | 'LISTEN_AND_SPEAK_WITH_STORY_IMAGES' | 'LISTEN_AND_SPEAK_IMAGE_GROUP' | 'LISTEN_AND_SPEAK_ODD_ONE_OUT' | 'LISTEN_AND_SPEAK_QUESTION_LIST' | 'LISTEN_AND_SPEAK_INFO_EXCHANGE' | 'READ_DISPLAYED_CONTENT' | 'SPEAKING_DESCRIBE_IMAGE' | 'SPONTANEOUS_QA' | 'SPONTANEOUS_QA_GROUP' | 'SPEAKING_CONVERSATION' | 'GN_SPEAKING_INTERVIEW' | 'SPEAKING_CUE_CARD';
+export type QuestionType = 'FILL_IN_BLANK' | 'WRITE_CORRECT_VERB_FORM' | 'CHOOSE_THE_CORRECT_ANSWER' | 'CHOOSE_THE_CORRECT_ANSWER_GROUP' | 'CHOOSE_CORRECT_ADJECTIVE' | 'WRITE_A_SHORT_LETTER' | 'READ_AND_COLOR_OBJECTS' | 'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER' | 'LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER' | 'READ_PASSAGE_AND_ANSWER_QUESTIONS' | 'LABEL_THE_PICTURE' | 'LOOK_PICTURE_FILL_WORD_HINT' | 'FILL_MISSING_WORDS_IN_GRID' | 'IMAGE_OBJECT_MATCHING' | 'ANSWER_THE_QUESTION' | 'ANSWER_THE_QUESTION_GROUP' | 'TRUE_FALSE' | 'TRUE_FALSE_GROUP' | 'CROSS_OUT_WORD_GROUP' | 'WORD_ORDERING' | 'WORD_FILL_PARAGRAPH' | 'MATCH_BY_WRITING_ANSWER' | 'WRITE_SENTENCES' | 'WORD_FILL_STRUCTURED_FORM' | 'CROSSWORD_PUZZLE' | 'WORD_ORDER_AND_MATCH_GROUP' | 'LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE' | 'LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP' | 'LISTEN_AND_DRAG_OBJECTS_INTO_SCENE' | 'LISTEN_AND_SPEAK_ANSWER' | 'LISTEN_AND_SPEAK_COMPARE_IMAGES' | 'LISTEN_AND_SPEAK_WITH_STORY_IMAGES' | 'LISTEN_AND_SPEAK_IMAGE_GROUP' | 'LISTEN_AND_SPEAK_ODD_ONE_OUT' | 'LISTEN_AND_SPEAK_QUESTION_LIST' | 'LISTEN_AND_SPEAK_INFO_EXCHANGE' | 'READ_DISPLAYED_CONTENT' | 'SPEAKING_DESCRIBE_IMAGE' | 'SPONTANEOUS_QA' | 'SPONTANEOUS_QA_GROUP' | 'SPEAKING_CONVERSATION' | 'GN_SPEAKING_INTERVIEW' | 'SPEAKING_CUE_CARD';
 export interface ApiQuestion {
     id: string;
     content: any;
@@ -415,3 +415,25 @@ export interface WordOrderAndMatchGroupPartData {
     explanation?: string;
 }
 export declare function transformWordOrderAndMatchGroup(questions: ApiQuestion[]): WordOrderAndMatchGroupPartData;
+export interface CrosswordClueItem {
+    number: number;
+    clue: string;
+    startRow: number;
+    startCol: number;
+    length: number;
+}
+export interface CrosswordPuzzlePartData {
+    title?: string;
+    instruction: string;
+    gridSize: {
+        rows: number;
+        cols: number;
+    };
+    clues: {
+        across: CrosswordClueItem[];
+        down: CrosswordClueItem[];
+    };
+    correctAnswers: Record<string, string>;
+    explanation?: string;
+}
+export declare function transformCrosswordPuzzle(questions: ApiQuestion[]): CrosswordPuzzlePartData;

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

@@ -1168,3 +1168,39 @@ export function transformWordOrderAndMatchGroup(questions) {
         explanation: parent?.explanation,
     };
 }
+export function transformCrosswordPuzzle(questions) {
+    const question = questions[0];
+    const content = (question?.content || {});
+    const correctAnswer = (question?.correct_answer || question?.correctAnswer || {});
+    const rows = content?.gridSize?.rows || content?.rows || 12;
+    const cols = content?.gridSize?.cols || content?.cols || 12;
+    const across = Array.isArray(content?.clues?.across)
+        ? content.clues.across.map((c) => ({
+            number: Number(c.number),
+            clue: String(c.clue || '').trim(),
+            startRow: Number(c.startRow) || 1,
+            startCol: Number(c.startCol) || 1,
+            length: Number(c.length) || 1,
+        }))
+        : [];
+    const down = Array.isArray(content?.clues?.down)
+        ? content.clues.down.map((c) => ({
+            number: Number(c.number),
+            clue: String(c.clue || '').trim(),
+            startRow: Number(c.startRow) || 1,
+            startCol: Number(c.startCol) || 1,
+            length: Number(c.length) || 1,
+        }))
+        : [];
+    const correctAnswers = correctAnswer?.answers && typeof correctAnswer.answers === 'object'
+        ? correctAnswer.answers
+        : {};
+    return {
+        title: content?.title || '',
+        instruction: question?.instruction || content?.instruction || 'Complete the crossword.',
+        gridSize: { rows, cols },
+        clues: { across, down },
+        correctAnswers,
+        explanation: question?.explanation,
+    };
+}

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

@@ -317,6 +317,11 @@ export const QUESTION_TYPE_CONFIG = {
         requiresContent: true,
         hasDedicatedComponent: true,
     },
+    CROSSWORD_PUZZLE: {
+        label: 'Giải ô chữ (Crossword)',
+        requiresContent: true,
+        hasDedicatedComponent: true,
+    },
 };
 export const QUESTION_TYPES_WITH_DEDICATED_COMPONENTS = [
     'FILL_IN_BLANK',
@@ -362,6 +367,7 @@ export const QUESTION_TYPES_WITH_DEDICATED_COMPONENTS = [
     'GN_SPEAKING_INTERVIEW',
     'SPEAKING_CUE_CARD',
     'WORD_FILL_STRUCTURED_FORM',
+    'CROSSWORD_PUZZLE',
 ];
 export function getQuestionTypeLabel(type) {
     return QUESTION_TYPE_CONFIG[type]?.label || type;

package/dist/components/questions/_shared/types/crossword-puzzle.type.d.ts

@@ -0,0 +1,16 @@
+import type { CrosswordClue, CrosswordPuzzleContent, CrosswordPuzzleCorrectAnswer } from '../../../../shared/types/questions/crossword-puzzle';
+export interface CrosswordClueFormItem extends CrosswordClue {
+    id: string;
+    answer: string;
+    direction: 'across' | 'down';
+}
+export interface CrosswordPuzzleFormState {
+    title?: string;
+    rows: number;
+    cols: number;
+    clues: CrosswordClueFormItem[];
+    caseSensitive: boolean;
+    points: number;
+    explanation?: string;
+}
+export type { CrosswordClue, CrosswordPuzzleContent, CrosswordPuzzleCorrectAnswer };

package/dist/components/questions/_shared/types/crossword-puzzle.type.js

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

package/dist/components/questions/components/QuestionSearchDropdown.js

@@ -34,7 +34,7 @@ const PASSAGE_BASED_TYPES = [
     'READ_PASSAGE_AND_COMPLETE_STORY',
 ];
 // Grid-based question types
-const GRID_BASED_TYPES = ['FILL_MISSING_WORDS_IN_GRID'];
+const GRID_BASED_TYPES = ['FILL_MISSING_WORDS_IN_GRID', 'CROSSWORD_PUZZLE'];
 // Get display icon for question type
 const getQuestionTypeIcon = (type) => {
     if (IMAGE_BASED_TYPES.includes(type)) {

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

@@ -43,6 +43,7 @@ import { gnSpeakingInterviewRegistration } from '../types/gn-speaking-interview/
 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';
 // ─── Registry map ───────────────────────────────────────────────────────────
 export const questionTypeRegistry = {
     CHOOSE_THE_CORRECT_ANSWER: chooseTheCorrectAnswerRegistration,
@@ -89,4 +90,5 @@ export const questionTypeRegistry = {
     GN_SPEAKING_INTERVIEW: gnSpeakingInterviewRegistration,
     SPEAKING_CUE_CARD: speakingCueCardRegistration,
     WORD_FILL_STRUCTURED_FORM: wordFillStructuredFormRegistration,
+    CROSSWORD_PUZZLE: crosswordPuzzleRegistration,
 };

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

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

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

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 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';
 /** Marketing question types supported by the question-bank editor. */
 export var QuestionBankEditorType;
 (function (QuestionBankEditorType) {
@@ -19,6 +20,7 @@ export var QuestionBankEditorType;
     QuestionBankEditorType["WRITE_CORRECT_VERB_FORM"] = "WRITE_CORRECT_VERB_FORM";
     QuestionBankEditorType["FILL_IN_BLANK"] = "FILL_IN_BLANK";
     QuestionBankEditorType["CHOOSE_CORRECT_ADJECTIVE"] = "CHOOSE_CORRECT_ADJECTIVE";
+    QuestionBankEditorType["CROSSWORD_PUZZLE"] = "CROSSWORD_PUZZLE";
 })(QuestionBankEditorType || (QuestionBankEditorType = {}));
 /**
  * Renders the appropriate Creator for a question-bank item.
@@ -69,6 +71,20 @@ export function QuestionEditorRenderer({ questionType, content, correctAnswer, e
             return renderFillInBlankEditor(adapterProps);
         case QuestionBankEditorType.CHOOSE_CORRECT_ADJECTIVE:
             return renderChooseCorrectAdjectiveEditor(adapterProps);
+        case QuestionBankEditorType.CROSSWORD_PUZZLE:
+            return (_jsx(CrosswordPuzzleCreator, { 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.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { CrosswordPuzzleContent, CrosswordPuzzleCorrectAnswer } from '../../../../shared/types/questions/crossword-puzzle';
+interface CrosswordPuzzleClientProps {
+    content: CrosswordPuzzleContent;
+    correctAnswer?: CrosswordPuzzleCorrectAnswer;
+    isReviewMode?: boolean;
+    userAnswers?: Record<string, string>;
+    onAnswerChange?: (key: string, value: string) => void;
+}
+export declare function CrosswordPuzzleClient({ content, correctAnswer, isReviewMode, userAnswers, }: CrosswordPuzzleClientProps): React.JSX.Element;
+export {};