@tinyweb_dev/oe-exam-sdk 0.1.31 → 0.2.0

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

@@ -0,0 +1,80 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+export function CrosswordPuzzleClient({ content, correctAnswer, isReviewMode = false, userAnswers = {}, }) {
+    const rows = content?.gridSize?.rows || 12;
+    const cols = content?.gridSize?.cols || 12;
+    const acrossClues = content?.clues?.across || [];
+    const downClues = content?.clues?.down || [];
+    // Build grid cell mapping
+    const { cellMap, clueNumberMap } = useMemo(() => {
+        const cMap = new Map();
+        const numMap = new Map();
+        for (const c of acrossClues) {
+            numMap.set(`${c.startRow}-${c.startCol}`, c.number);
+            for (let i = 0; i < c.length; i++) {
+                const key = `${c.startRow}-${c.startCol + i}`;
+                const existing = cMap.get(key) || {};
+                cMap.set(key, { ...existing, across: c });
+            }
+        }
+        for (const c of downClues) {
+            if (!numMap.has(`${c.startRow}-${c.startCol}`)) {
+                numMap.set(`${c.startRow}-${c.startCol}`, c.number);
+            }
+            for (let i = 0; i < c.length; i++) {
+                const key = `${c.startRow + i}-${c.startCol}`;
+                const existing = cMap.get(key) || {};
+                cMap.set(key, { ...existing, down: c });
+            }
+        }
+        return { cellMap: cMap, clueNumberMap: numMap };
+    }, [acrossClues, downClues]);
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-4 bg-white rounded-xl border border-gray-200", children: [content?.title && (_jsx("h3", { className: "text-lg font-bold text-gray-800 text-center", children: content.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-lg border border-blue-200 bg-blue-50/50 p-4", children: [_jsxs("h4", { className: "font-bold text-blue-900 mb-2.5 flex items-center gap-2", children: [_jsx("span", { className: "px-2 py-0.5 rounded bg-blue-600 text-white text-xs font-semibold", children: "Across" }), _jsx("span", { children: "H\u00E0ng ngang" })] }), _jsx("div", { className: "flex flex-col gap-2 max-h-60 overflow-y-auto pr-1", children: acrossClues.map((c) => {
+                                            const answer = correctAnswer?.answers?.[`across-${c.number}`];
+                                            const userAns = userAnswers[`across-${c.number}`];
+                                            return (_jsxs("div", { className: "flex items-start gap-2 text-sm bg-white p-2 rounded border border-blue-100", children: [_jsxs("span", { className: "font-bold text-blue-700 min-w-[20px]", children: [c.number, "."] }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-gray-800", children: c.clue }), isReviewMode && answer && (_jsxs("div", { className: "text-xs mt-1", children: [_jsx("span", { className: "text-gray-500", children: "\u0110\u00E1p \u00E1n: " }), _jsx("span", { className: "font-bold text-green-700", children: answer }), userAns && userAns !== answer && (_jsx("span", { className: "ml-2 line-through text-red-500 font-semibold", children: userAns }))] }))] }), _jsxs("span", { className: "text-xs text-gray-400", children: ["(", c.length, " ch\u1EEF)"] })] }, `across-${c.number}`));
+                                        }) })] }), _jsxs("div", { className: "rounded-lg border border-purple-200 bg-purple-50/50 p-4", children: [_jsxs("h4", { className: "font-bold text-purple-900 mb-2.5 flex items-center gap-2", children: [_jsx("span", { className: "px-2 py-0.5 rounded bg-purple-600 text-white text-xs font-semibold", children: "Down" }), _jsx("span", { children: "H\u00E0ng d\u1ECDc" })] }), _jsx("div", { className: "flex flex-col gap-2 max-h-60 overflow-y-auto pr-1", children: downClues.map((c) => {
+                                            const answer = correctAnswer?.answers?.[`down-${c.number}`];
+                                            const userAns = userAnswers[`down-${c.number}`];
+                                            return (_jsxs("div", { className: "flex items-start gap-2 text-sm bg-white p-2 rounded border border-purple-100", children: [_jsxs("span", { className: "font-bold text-purple-700 min-w-[20px]", children: [c.number, "."] }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-gray-800", children: c.clue }), isReviewMode && answer && (_jsxs("div", { className: "text-xs mt-1", children: [_jsx("span", { className: "text-gray-500", children: "\u0110\u00E1p \u00E1n: " }), _jsx("span", { className: "font-bold text-green-700", children: answer }), userAns && userAns !== answer && (_jsx("span", { className: "ml-2 line-through text-red-500 font-semibold", children: userAns }))] }))] }), _jsxs("span", { className: "text-xs text-gray-400", children: ["(", c.length, " ch\u1EEF)"] })] }, `down-${c.number}`));
+                                        }) })] })] }), _jsx("div", { className: "lg:col-span-7 flex justify-center overflow-x-auto p-4 bg-gray-50 rounded-xl border border-gray-200", children: _jsx("div", { className: "inline-grid gap-1", style: {
+                                gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+                            }, children: Array.from({ length: rows }).map((_, rIdx) => {
+                                const r = rIdx + 1;
+                                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-9 sm:w-9 md:h-10 md:w-10 bg-transparent" }, key));
+                                    }
+                                    const isMarked = content?.markedColumn && c === content.markedColumn;
+                                    const isExample = Boolean(cellInfo.across?.isExample || cellInfo.down?.isExample);
+                                    // If in review mode or cell is an example, display correct answer letter
+                                    let previewLetter = '';
+                                    if (isReviewMode || isExample) {
+                                        if (cellInfo.across && correctAnswer?.answers) {
+                                            const word = correctAnswer.answers[`across-${cellInfo.across.number}`] || '';
+                                            const offset = c - cellInfo.across.startCol;
+                                            previewLetter = word[offset] || '';
+                                        }
+                                        else if (cellInfo.down && correctAnswer?.answers) {
+                                            const word = correctAnswer.answers[`down-${cellInfo.down.number}`] || '';
+                                            const offset = r - cellInfo.down.startRow;
+                                            previewLetter = word[offset] || '';
+                                        }
+                                    }
+                                    else if (userAnswers?.[key]) {
+                                        previewLetter = userAnswers[key];
+                                    }
+                                    let cellBg = isMarked ? 'bg-slate-200' : 'bg-white';
+                                    let textColor = isExample ? 'text-orange-600' : 'text-gray-800';
+                                    if (isReviewMode && previewLetter) {
+                                        textColor = 'text-green-700 font-extrabold';
+                                    }
+                                    return (_jsxs("div", { className: `relative flex items-center justify-center rounded border-2 border-gray-400 font-bold shadow-sm h-8 w-8 sm:h-9 sm:w-9 md:h-10 md:w-10 text-sm sm:text-base md:text-lg ${cellBg} ${textColor}`, children: [clueNum && (_jsx("span", { className: "absolute top-0.5 left-1 text-[9px] font-bold text-gray-500 leading-none", children: clueNum })), _jsx("span", { children: previewLetter })] }, key));
+                                });
+                            }) }) })] })] }));
+}

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

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

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

@@ -0,0 +1,213 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from 'react';
+import { Plus, Trash2, Edit2, Check, AlertCircle } from 'lucide-react';
+export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChangesChange, }) {
+    const [title, setTitle] = useState(() => {
+        return initialData?.content?.title || 'Nationalities Crossword';
+    });
+    const [rows, setRows] = useState(() => {
+        return initialData?.content?.gridSize?.rows || initialData?.content?.rows || 12;
+    });
+    const [cols, setCols] = useState(() => {
+        return initialData?.content?.gridSize?.cols || initialData?.content?.cols || 12;
+    });
+    const [caseSensitive, setCaseSensitive] = useState(() => {
+        return initialData?.answer?.caseSensitive || initialData?.correctAnswer?.caseSensitive || false;
+    });
+    const [points, setPoints] = useState(() => {
+        return initialData?.points ?? 11;
+    });
+    const [clues, setClues] = useState(() => {
+        if (Array.isArray(initialData?.content?.clues)) {
+            return initialData.content.clues;
+        }
+        const across = initialData?.content?.clues?.across || [];
+        const down = initialData?.content?.clues?.down || [];
+        const answers = initialData?.answer?.answers || initialData?.correctAnswer?.answers || {};
+        const items = [];
+        for (const a of across) {
+            items.push({
+                id: `across-${a.number}-${Date.now()}-${Math.random()}`,
+                number: a.number,
+                clue: a.clue,
+                startRow: a.startRow,
+                startCol: a.startCol,
+                length: a.length,
+                direction: 'across',
+                answer: answers[`across-${a.number}`] || '',
+            });
+        }
+        for (const d of down) {
+            items.push({
+                id: `down-${d.number}-${Date.now()}-${Math.random()}`,
+                number: d.number,
+                clue: d.clue,
+                startRow: d.startRow,
+                startCol: d.startCol,
+                length: d.length,
+                direction: 'down',
+                answer: answers[`down-${d.number}`] || '',
+            });
+        }
+        return items;
+    });
+    const [editingClueId, setEditingClueId] = useState(null);
+    const [formNumber, setFormNumber] = useState(1);
+    const [formDirection, setFormDirection] = useState('across');
+    const [formClue, setFormClue] = useState('');
+    const [formAnswer, setFormAnswer] = useState('');
+    const [formStartRow, setFormStartRow] = useState(1);
+    const [formStartCol, setFormStartCol] = useState(1);
+    const { cellMap, clueNumberMap, conflicts } = useMemo(() => {
+        const cMap = new Map();
+        const numMap = new Map();
+        const conflictList = [];
+        for (const item of clues) {
+            const startKey = `${item.startRow}-${item.startCol}`;
+            const existingNums = numMap.get(startKey) || [];
+            if (!existingNums.includes(item.number)) {
+                numMap.set(startKey, [...existingNums, item.number]);
+            }
+            const word = (item.answer || '').trim().toUpperCase();
+            const length = item.length || word.length || 1;
+            for (let i = 0; i < length; i++) {
+                const r = item.direction === 'across' ? item.startRow : item.startRow + i;
+                const c = item.direction === 'across' ? item.startCol + i : item.startCol;
+                const key = `${r}-${c}`;
+                const letter = word[i] || '';
+                const list = cMap.get(key) || [];
+                if (letter && list.some((x) => x.letter && x.letter !== letter)) {
+                    conflictList.push(key);
+                }
+                list.push({ letter, clueId: item.id, dir: item.direction });
+                cMap.set(key, list);
+            }
+        }
+        return { cellMap: cMap, clueNumberMap: numMap, conflicts: conflictList };
+    }, [clues]);
+    useEffect(() => {
+        if (!onChange)
+            return;
+        const across = clues
+            .filter((c) => c.direction === 'across')
+            .map((c) => ({
+            number: c.number,
+            clue: c.clue.trim(),
+            startRow: c.startRow,
+            startCol: c.startCol,
+            length: c.length || c.answer.trim().length,
+        }));
+        const down = clues
+            .filter((c) => c.direction === 'down')
+            .map((c) => ({
+            number: c.number,
+            clue: c.clue.trim(),
+            startRow: c.startRow,
+            startCol: c.startCol,
+            length: c.length || c.answer.trim().length,
+        }));
+        const answers = {};
+        for (const c of clues) {
+            if (c.answer) {
+                answers[`${c.direction}-${c.number}`] = c.answer.trim().toUpperCase();
+            }
+        }
+        onChange({
+            content: {
+                title,
+                gridSize: { rows, cols },
+                clues: { across, down },
+            },
+            answer: {
+                answers,
+                caseSensitive,
+            },
+            points,
+        });
+        onUnsavedChangesChange?.(true);
+    }, [title, rows, cols, clues, caseSensitive, points, onChange, onUnsavedChangesChange]);
+    const handleSaveClue = (e) => {
+        e.preventDefault();
+        if (!formClue.trim() || !formAnswer.trim())
+            return;
+        const cleanAnswer = formAnswer.trim().toUpperCase();
+        const length = cleanAnswer.length;
+        if (editingClueId) {
+            setClues((prev) => prev.map((c) => c.id === editingClueId
+                ? {
+                    ...c,
+                    number: formNumber,
+                    direction: formDirection,
+                    clue: formClue.trim(),
+                    answer: cleanAnswer,
+                    startRow: formStartRow,
+                    startCol: formStartCol,
+                    length,
+                }
+                : c));
+            setEditingClueId(null);
+        }
+        else {
+            const newClue = {
+                id: `clue-${Date.now()}-${Math.random()}`,
+                number: formNumber,
+                direction: formDirection,
+                clue: formClue.trim(),
+                answer: cleanAnswer,
+                startRow: formStartRow,
+                startCol: formStartCol,
+                length,
+            };
+            setClues((prev) => [...prev, newClue]);
+        }
+        setFormClue('');
+        setFormAnswer('');
+        setFormNumber((prev) => prev + 1);
+    };
+    const handleEditClue = (c) => {
+        setEditingClueId(c.id);
+        setFormNumber(c.number);
+        setFormDirection(c.direction);
+        setFormClue(c.clue);
+        setFormAnswer(c.answer);
+        setFormStartRow(c.startRow);
+        setFormStartCol(c.startCol);
+    };
+    const handleDeleteClue = (id) => {
+        setClues((prev) => prev.filter((c) => c.id !== id));
+        if (editingClueId === id) {
+            setEditingClueId(null);
+            setFormClue('');
+            setFormAnswer('');
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-4 bg-white rounded-xl border border-gray-200", children: [_jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 p-4 bg-gray-50 rounded-lg border border-gray-200", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold text-gray-700 mb-1", children: "Ti\u00EAu \u0111\u1EC1 \u00F4 ch\u1EEF" }), _jsx("input", { type: "text", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "vd: Nationalities Crossword", className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-blue-500 outline-none" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold text-gray-700 mb-1", children: "K\u00EDch th\u01B0\u1EDBc l\u01B0\u1EDBi (H\u00E0ng x C\u1ED9t)" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "number", min: 3, max: 30, value: rows, onChange: (e) => setRows(Math.max(3, parseInt(e.target.value) || 12)), className: "w-20 px-2 py-1.5 text-sm border border-gray-300 rounded outline-none" }), _jsx("span", { className: "text-gray-500 font-bold", children: "x" }), _jsx("input", { type: "number", min: 3, max: 30, value: cols, onChange: (e) => setCols(Math.max(3, parseInt(e.target.value) || 12)), className: "w-20 px-2 py-1.5 text-sm border border-gray-300 rounded outline-none" })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold text-gray-700 mb-1", children: "\u0110i\u1EC3m s\u1ED1" }), _jsx("input", { type: "number", min: 0, step: 0.5, value: points, onChange: (e) => setPoints(parseFloat(e.target.value) || 1), className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded outline-none" })] }), _jsx("div", { className: "flex items-center pt-5", children: _jsxs("label", { className: "flex items-center gap-2 text-sm text-gray-700 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: caseSensitive, onChange: (e) => setCaseSensitive(e.target.checked), className: "rounded text-blue-600 focus:ring-blue-500 h-4 w-4" }), _jsx("span", { children: "Ph\u00E2n bi\u1EC7t hoa/th\u01B0\u1EDDng" })] }) })] }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-6", children: [_jsxs("div", { className: "lg:col-span-5 flex flex-col gap-4", children: [_jsxs("form", { onSubmit: handleSaveClue, className: "p-4 rounded-xl border border-blue-200 bg-blue-50/40 flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm font-bold text-blue-900", children: editingClueId ? 'Chỉnh sửa gợi ý' : 'Thêm gợi ý mới' }), editingClueId && (_jsx("button", { type: "button", onClick: () => {
+                                                    setEditingClueId(null);
+                                                    setFormClue('');
+                                                    setFormAnswer('');
+                                                }, className: "text-xs text-gray-500 hover:text-gray-700 underline", children: "H\u1EE7y ch\u1EC9nh s\u1EEDa" }))] }), _jsxs("div", { className: "grid grid-cols-3 gap-2", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-[11px] font-semibold text-gray-600 mb-0.5", children: "S\u1ED1 Clue" }), _jsx("input", { type: "number", min: 1, value: formNumber, onChange: (e) => setFormNumber(parseInt(e.target.value) || 1), className: "w-full px-2 py-1 text-sm border border-gray-300 rounded outline-none" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[11px] font-semibold text-gray-600 mb-0.5", children: "H\u01B0\u1EDBng" }), _jsxs("select", { value: formDirection, onChange: (e) => setFormDirection(e.target.value), className: "w-full px-2 py-1 text-sm border border-gray-300 rounded outline-none bg-white", children: [_jsx("option", { value: "across", children: "Across (Ngang)" }), _jsx("option", { value: "down", children: "Down (D\u1ECDc)" })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[11px] font-semibold text-gray-600 mb-0.5", children: "To\u1EA1 \u0111\u1ED9 (R, C)" }), _jsxs("div", { className: "flex gap-1", children: [_jsx("input", { type: "number", min: 1, max: rows, value: formStartRow, onChange: (e) => setFormStartRow(parseInt(e.target.value) || 1), placeholder: "R", className: "w-1/2 px-1 py-1 text-xs border border-gray-300 rounded text-center" }), _jsx("input", { type: "number", min: 1, max: cols, value: formStartCol, onChange: (e) => setFormStartCol(parseInt(e.target.value) || 1), placeholder: "C", className: "w-1/2 px-1 py-1 text-xs border border-gray-300 rounded text-center" })] })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[11px] font-semibold text-gray-600 mb-0.5", children: "C\u00E2u g\u1EE3i \u00FD (Clue)" }), _jsx("input", { type: "text", value: formClue, onChange: (e) => setFormClue(e.target.value), placeholder: "vd: Spain, Capital of France...", className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded outline-none", required: true })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[11px] font-semibold text-gray-600 mb-0.5", children: "T\u1EEB \u0111\u00E1p \u00E1n (Answer Word)" }), _jsx("input", { type: "text", value: formAnswer, onChange: (e) => setFormAnswer(e.target.value), placeholder: "vd: SPANISH", className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded outline-none uppercase font-semibold", required: true })] }), _jsxs("button", { type: "submit", className: "mt-1 flex items-center justify-center gap-1.5 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm font-semibold transition", children: [editingClueId ? _jsx(Check, { className: "h-4 w-4" }) : _jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { children: editingClueId ? 'Cập nhật gợi ý' : 'Thêm vào danh sách' })] })] }), _jsxs("div", { className: "flex flex-col gap-2 max-h-[420px] overflow-y-auto pr-1", children: [_jsxs("span", { className: "text-xs font-bold text-gray-600", children: ["Danh s\u00E1ch (", clues.length, " t\u1EEB):"] }), clues.length === 0 && (_jsx("p", { className: "text-xs text-gray-400 italic", children: "Ch\u01B0a c\u00F3 g\u1EE3i \u00FD n\u00E0o. H\u00E3y th\u00EAm g\u1EE3i \u00FD \u1EDF tr\u00EAn." })), clues.map((c) => (_jsxs("div", { className: "flex items-center justify-between p-2.5 bg-white rounded-lg border border-gray-200 hover:border-blue-300 transition text-sm shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [_jsx("span", { className: `flex items-center justify-center h-6 w-6 rounded text-xs font-bold text-white ${c.direction === 'across' ? 'bg-blue-600' : 'bg-purple-600'}`, children: c.number }), _jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [_jsx("span", { className: "font-semibold text-gray-800 truncate", children: c.clue }), _jsxs("span", { className: "text-xs text-gray-500 flex items-center gap-2", children: [_jsx("span", { className: "font-bold text-blue-700", children: c.answer }), _jsxs("span", { children: ["(", c.length, " ch\u1EEF)"] }), _jsxs("span", { children: ["[", c.direction === 'across' ? '→ Ngang' : '↓ Dọc', " (", c.startRow, ",", c.startCol, ")]"] })] })] })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => handleEditClue(c), className: "p-1 text-gray-500 hover:text-blue-600 rounded", title: "S\u1EEDa", children: _jsx(Edit2, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => handleDeleteClue(c.id), className: "p-1 text-gray-500 hover:text-red-600 rounded", title: "X\u00F3a", children: _jsx(Trash2, { className: "h-4 w-4" }) })] })] }, c.id)))] })] }), _jsxs("div", { className: "lg:col-span-7 flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-bold text-gray-700", children: "Ma tr\u1EADn l\u01B0\u1EDBi \u00F4 ch\u1EEF tr\u1EF1c quan:" }), conflicts.length > 0 && (_jsxs("span", { className: "flex items-center gap-1 text-xs font-bold text-red-600 bg-red-50 px-2 py-0.5 rounded border border-red-200", children: [_jsx(AlertCircle, { className: "h-3.5 w-3.5" }), _jsxs("span", { children: ["C\u00F3 ", conflicts.length, " \u00F4 b\u1ECB xung \u0111\u1ED9t ch\u1EEF c\u00E1i!"] })] }))] }), _jsx("div", { className: "flex justify-center overflow-x-auto p-4 bg-gray-100 rounded-xl border border-gray-300 min-h-[380px]", children: _jsx("div", { className: "inline-grid gap-1", style: {
+                                        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 cellEntries = cellMap.get(key);
+                                            const clueNums = clueNumberMap.get(key);
+                                            const isConflict = conflicts.includes(key);
+                                            if (!cellEntries || cellEntries.length === 0) {
+                                                return (_jsx("button", { type: "button", onClick: () => {
+                                                        setFormStartRow(r);
+                                                        setFormStartCol(c);
+                                                    }, title: `Ô trống (${r},${c}) - Click để chọn toạ độ bắt đầu`, className: "h-8 w-8 sm:h-9 sm:w-9 md:h-10 md:w-10 bg-transparent hover:bg-gray-200/60 rounded flex items-center justify-center transition text-[10px] text-gray-300 hover:text-gray-500", children: "\u00B7" }, key));
+                                            }
+                                            const displayLetter = cellEntries[0]?.letter || '';
+                                            return (_jsxs("div", { className: `relative flex items-center justify-center rounded border-2 font-bold shadow-sm h-8 w-8 sm:h-9 sm:w-9 md:h-10 md:w-10 text-sm sm:text-base md:text-lg select-none transition ${isConflict
+                                                    ? 'border-red-500 bg-red-100 text-red-700 animate-pulse'
+                                                    : cellEntries.length > 1
+                                                        ? 'border-indigo-400 bg-indigo-50 text-indigo-900'
+                                                        : 'border-gray-400 bg-white text-gray-800'}`, children: [clueNums && clueNums.length > 0 && (_jsx("span", { className: "absolute top-0.5 left-0.5 text-[9px] font-bold text-gray-500 leading-none", children: clueNums.join('/') })), _jsx("span", { children: displayLetter })] }, key));
+                                        });
+                                    }) }) })] })] })] }));
+}

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,75 @@
+export const transformCrosswordPuzzle = (question) => {
+    const contentData = question.content;
+    const answerData = question.answer;
+    let content;
+    let correctAnswer;
+    if (contentData?.gridSize && contentData?.clues) {
+        content = {
+            title: contentData.title || '',
+            gridSize: {
+                rows: Number(contentData.gridSize.rows) || 12,
+                cols: Number(contentData.gridSize.cols) || 12,
+            },
+            clues: {
+                across: Array.isArray(contentData.clues.across) ? contentData.clues.across : [],
+                down: Array.isArray(contentData.clues.down) ? contentData.clues.down : [],
+            },
+        };
+        correctAnswer = {
+            answers: answerData?.answers || {},
+            caseSensitive: answerData?.caseSensitive || false,
+        };
+    }
+    else if (Array.isArray(contentData?.clues)) {
+        const formClues = contentData.clues;
+        const across = formClues
+            .filter((c) => c.direction === 'across')
+            .map((c) => ({
+            number: Number(c.number),
+            clue: String(c.clue || '').trim(),
+            startRow: Number(c.startRow) || 1,
+            startCol: Number(c.startCol) || 1,
+            length: Number(c.length) || (c.answer ? String(c.answer).trim().length : 1),
+        }));
+        const down = formClues
+            .filter((c) => c.direction === 'down')
+            .map((c) => ({
+            number: Number(c.number),
+            clue: String(c.clue || '').trim(),
+            startRow: Number(c.startRow) || 1,
+            startCol: Number(c.startCol) || 1,
+            length: Number(c.length) || (c.answer ? String(c.answer).trim().length : 1),
+        }));
+        content = {
+            title: contentData.title || '',
+            gridSize: {
+                rows: Number(contentData.rows) || 12,
+                cols: Number(contentData.cols) || 12,
+            },
+            clues: { across, down },
+        };
+        const answers = {};
+        for (const c of formClues) {
+            const key = `${c.direction}-${c.number}`;
+            if (c.answer) {
+                answers[key] = String(c.answer).trim().toUpperCase();
+            }
+        }
+        correctAnswer = {
+            answers,
+            caseSensitive: contentData.caseSensitive || false,
+        };
+    }
+    else {
+        content = {
+            gridSize: { rows: 12, cols: 12 },
+            clues: { across: [], down: [] },
+        };
+        correctAnswer = { answers: {}, caseSensitive: false };
+    }
+    return {
+        apiContent: content,
+        apiCorrectAnswer: correctAnswer,
+        explanation: answerData?.explanation || question.explanation || '',
+    };
+};

package/dist/components/questions/viewer/QuestionViewer.js

@@ -19,6 +19,7 @@ import { LookPictureChooseCorrectAnswerClient } from '../types/look-picture-choo
 import { LookPictureFillBlankChooseAnswerClient } from '../types/look-picture-fill-blank-choose-answer/LookPictureFillBlankChooseAnswerClient';
 import { FillMissingWordsInGridClient } from '../types/fill-missing-words-in-grid/FillMissingWordsInGridClient';
 import { WordFillStructuredFormClient } from '../types/word-fill-structured-form/WordFillStructuredFormClient';
+import { CrosswordPuzzleClient } from '../types/crossword-puzzle/CrosswordPuzzleClient';
 import { parseFillBlankStemLine } from '../_shared/utils/parseFillBlankStem';
 import { WordFillStructuredFormViewer } from './WordFillStructuredFormViewer';
 import { ChooseTheCorrectAnswerGroupViewer } from './ChooseTheCorrectAnswerGroupViewer';
@@ -643,6 +644,8 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
                 return renderWordFillParagraph();
             case 'WORD_FILL_STRUCTURED_FORM':
                 return (_jsx(WordFillStructuredFormViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer, onSubmitAnswer: onSubmitAnswer }));
+            case 'CROSSWORD_PUZZLE':
+                return (_jsx(CrosswordPuzzleClient, { content: question.content, correctAnswer: question.answer, isReviewMode: isReviewMode, userAnswers: userAnswer }));
             default:
                 return _jsxs("div", { children: ["Lo\u1EA1i c\u00E2u h\u1ECFi kh\u00F4ng \u0111\u01B0\u1EE3c h\u1ED7 tr\u1EE3: ", question.type] });
         }
@@ -653,8 +656,8 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
      * parseFillBlankStemLine (or paragraph renderer). Dumping raw text shows markdown.
      */
     const resolveCardTitle = () => {
-        // WFSF shows Bài N + instruction inside the client — no outer card label.
-        if (question.type === 'WORD_FILL_STRUCTURED_FORM') {
+        // WFSF and Crossword show title/instruction inside the client — no outer card label.
+        if (question.type === 'WORD_FILL_STRUCTURED_FORM' || question.type === 'CROSSWORD_PUZZLE') {
             return null;
         }
         // Modern fill stems live entirely in the body; title is a short label.
@@ -676,8 +679,8 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
         return stripLightweightMarkdown(raw) || 'Câu hỏi';
     };
     const cardTitle = resolveCardTitle();
-    // WFSF already has its own bordered shell — avoid double Card border.
-    if (question.type === 'WORD_FILL_STRUCTURED_FORM') {
+    // WFSF and Crossword already have their own bordered shell — avoid double Card border.
+    if (question.type === 'WORD_FILL_STRUCTURED_FORM' || question.type === 'CROSSWORD_PUZZLE') {
         return (_jsx("div", { className: "space-y-4", children: renderQuestion() }));
     }
     return (_jsxs(Card, { children: [cardTitle ? (_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "flex items-center justify-between", children: [_jsx("span", { className: "min-w-0 pr-2 text-base font-semibold leading-snug", children: cardTitle }), _jsxs("span", { className: "shrink-0 text-sm font-normal text-gray-500", children: [question.points, " \u0111i\u1EC3m"] })] }) })) : null, _jsx(CardContent, { className: cardTitle ? 'space-y-4' : 'space-y-4 pt-4', children: renderQuestion() })] }));

package/dist/components/results/renderers/review-question-body-movers.js

@@ -4,8 +4,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Movers fallback review cases (isReviewMode=true).
  * Source: oe-exam-fe ReviewQuestionRenderer.tsx
  */
-import { MoversAnswerTheQuestionRenderer, MoversFillWordHintRenderer, MoversGridFillRenderer, MoversLabelThePictureRenderer, MoversMatchByWritingAnswerRenderer, MoversPictureChooseRenderer, MoversPictureFillBlankChooseRenderer, MoversReadingPassageRenderer, MoversTrueFalseRenderer, MoversCrossOutWordGroupRenderer, MoversWordFillParagraphRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderingRenderer, MoversWriteSentencesRenderer, MoversWritingRenderer, } from '../../../components/exams/take/components/question-renderers';
-import { transformAnswerTheQuestion, transformFillWordHint, transformGridFill, transformLabelPicture, transformMatchByWritingAnswer, transformPictureChoose, transformPictureFillBlankChoose, transformReadingPassage, transformTrueFalse, transformWordFillParagraph, transformWordFillStructuredForm, transformWordOrdering, transformWriteSentences, transformWriteShortLetter, } from '../../../components/exams/take/utils/question-transformers';
+import { MoversAnswerTheQuestionRenderer, MoversFillWordHintRenderer, MoversGridFillRenderer, MoversLabelThePictureRenderer, MoversMatchByWritingAnswerRenderer, MoversPictureChooseRenderer, MoversPictureFillBlankChooseRenderer, MoversReadingPassageRenderer, MoversTrueFalseRenderer, MoversCrossOutWordGroupRenderer, MoversWordFillParagraphRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderingRenderer, MoversWriteSentencesRenderer, MoversWritingRenderer, MoversCrosswordPuzzleRenderer, } from '../../../components/exams/take/components/question-renderers';
+import { transformAnswerTheQuestion, transformFillWordHint, transformGridFill, transformLabelPicture, transformMatchByWritingAnswer, transformPictureChoose, transformPictureFillBlankChoose, transformReadingPassage, transformTrueFalse, transformWordFillParagraph, transformWordFillStructuredForm, transformWordOrdering, transformWriteSentences, transformWriteShortLetter, transformCrosswordPuzzle, } from '../../../components/exams/take/utils/question-transformers';
 import { normalizeCrossOutWordGroupAnswer, transformCrossOutWordGroup, } from '../../../components/exams/take/utils/cross-out-word-group.transformer';
 function asApiQuestions(questions) {
     return questions;
@@ -142,6 +142,11 @@ export function renderMoversReviewBody(ctx) {
             const data = transformWordFillStructuredForm(apiQuestions);
             return (_jsx(MoversWordFillStructuredFormRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: questionCount, audioUrl: data.audioUrl || part.audioUrl, groupTitle: data.groupTitle, groupContent: data.groupContent, groupImageUrl: data.groupImageUrl, questions: data.questions, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true }));
         }
+        case 'CROSSWORD_PUZZLE': {
+            const data = transformCrosswordPuzzle(apiQuestions);
+            const firstQuestion = apiQuestions[0];
+            return (_jsx(MoversCrosswordPuzzleRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: questionCount, title: data.title, gridSize: data.gridSize, clues: data.clues, answers: answers, correctAnswers: data.correctAnswers, onAnswerChange: handleAnswerChange, isReviewMode: true, caseSensitive: firstQuestion?.correct_answer?.caseSensitive || false }));
+        }
         default:
             return null;
     }

package/dist/components/results/review-data.js

@@ -137,8 +137,12 @@ function addCorrectAnswerMaps(result, answer) {
         texts.forEach((text, index) => { result.correctAnswerTextMap[`${answer.questionId}-blank-${index}`] = text; });
     if (answer.questionType === 'LABEL_THE_PICTURE' && isRecord(correct.labels))
         Object.entries(correct.labels).forEach(([id, value]) => { result.correctAnswerTextMap[id] = String(value); });
-    if (answer.questionType === 'FILL_MISSING_WORDS_IN_GRID' && isRecord(correct.cells)) {
-        result.cellAnswersMap[answer.questionId] = { cells: correct.cells, caseSensitive: correct.caseSensitive === true };
+    if ((answer.questionType === 'FILL_MISSING_WORDS_IN_GRID' || answer.questionType === 'CROSSWORD_PUZZLE') && isRecord(correct.cells || correct.answers)) {
+        const rawCells = (correct.cells || correct.answers);
+        result.cellAnswersMap[answer.questionId] = {
+            cells: Object.fromEntries(Object.entries(rawCells).map(([k, v]) => [k, { correctAnswer: String(v) }])),
+            caseSensitive: correct.caseSensitive === true,
+        };
     }
 }
 function transformStudentAnswer(questionId, questionType, value) {
@@ -204,8 +208,8 @@ function transformStudentAnswer(questionId, questionType, value) {
         const keys = Object.keys(record).filter((key) => /^\d+$/.test(key)).sort((a, b) => Number(a) - Number(b));
         return keys.map((key) => record[key]);
     }
-    if (questionType === 'READ_AND_COLOR_OBJECTS' || questionType === 'IMAGE_OBJECT_MATCHING')
-        return record.answers ?? value;
+    if (questionType === 'READ_AND_COLOR_OBJECTS' || questionType === 'IMAGE_OBJECT_MATCHING' || questionType === 'CROSSWORD_PUZZLE')
+        return record.cells ?? record.answers ?? value;
     if (questionType === 'WRITE_A_SHORT_LETTER')
         return typeof value === 'string' ? value : record.answer ?? '';
     return record.answer ?? value;

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

@@ -78,6 +78,7 @@ export const QUESTION_TYPE_SKILLS = {
     'READING_PASSAGE_FILL': SkillEnum.READING,
     'FILL_BLANK': SkillEnum.READING,
     'WORD_FILL_STRUCTURED_FORM': SkillEnum.READING,
+    'CROSSWORD_PUZZLE': SkillEnum.READING,
     // ========================================
     // WRITING SKILLS (Viết)
     // ========================================
@@ -204,6 +205,7 @@ export const QUESTION_TYPE_LABELS = {
     'WORD_FILL_PARAGRAPH': 'Điền từ vào đoạn văn',
     'MATCH_BY_WRITING_ANSWER': 'Ghép đáp án bằng cách viết',
     'WORD_FILL_STRUCTURED_FORM': 'Điền từ vào biểu mẫu có cấu trúc',
+    'CROSSWORD_PUZZLE': 'Giải ô chữ (Crossword)',
     // ========================================
     // WRITING SKILLS (Viết)
     // ========================================

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

@@ -446,7 +446,61 @@ const handlers = {
     SPEAKING_CONVERSATION: reverseGroupPayload,
     SPEAKING_CUE_CARD: reverseSimpleAnswer,
     GN_SPEAKING_INTERVIEW: reverseGroupPayload,
+    CROSSWORD_PUZZLE: reverseCrosswordPuzzle,
 };
+function reverseCrosswordPuzzle(apiQuestion) {
+    const apiContent = (apiQuestion.content || {});
+    const apiAnswer = (apiQuestion.correctAnswer || apiQuestion.correct_answer || apiQuestion.answer || {});
+    const rows = apiContent.gridSize?.rows || apiContent.rows || 12;
+    const cols = apiContent.gridSize?.cols || apiContent.cols || 12;
+    const title = apiContent.title || '';
+    const across = Array.isArray(apiContent.clues?.across) ? apiContent.clues.across : [];
+    const down = Array.isArray(apiContent.clues?.down) ? apiContent.clues.down : [];
+    const answers = apiAnswer.answers || {};
+    const clues = [];
+    for (const a of across) {
+        clues.push({
+            id: `across-${a.number}-${Date.now()}-${Math.random()}`,
+            number: a.number,
+            clue: a.clue || '',
+            startRow: a.startRow || 1,
+            startCol: a.startCol || 1,
+            length: a.length || 1,
+            direction: 'across',
+            answer: answers[`across-${a.number}`] || '',
+        });
+    }
+    for (const d of down) {
+        clues.push({
+            id: `down-${d.number}-${Date.now()}-${Math.random()}`,
+            number: d.number,
+            clue: d.clue || '',
+            startRow: d.startRow || 1,
+            startCol: d.startCol || 1,
+            length: d.length || 1,
+            direction: 'down',
+            answer: answers[`down-${d.number}`] || '',
+        });
+    }
+    return {
+        content: {
+            title,
+            rows,
+            cols,
+            gridSize: { rows, cols },
+            clues: { across, down },
+        },
+        answer: {
+            title,
+            rows,
+            cols,
+            clues,
+            answers,
+            caseSensitive: apiAnswer.caseSensitive || false,
+            explanation: apiQuestion.explanation || '',
+        },
+    };
+}
 export function transformApiQuestionToFrontend(apiQuestion) {
     const questionType = String(apiQuestion.questionType ?? apiQuestion.question_type ?? apiQuestion.type ?? '');
     const handlerResult = (handlers[questionType] ?? defaultReverse)(apiQuestion);