@tinyweb_dev/oe-exam-sdk 1.0.9 → 1.0.10

package/dist/components/questions/types/word-ordering/WordOrderingClient.js

@@ -1,9 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useCallback, useMemo } from 'react';
-import { Check, X, ArrowUpDown, Lightbulb } from 'lucide-react';
+import { Check, X, ArrowUpDown } from 'lucide-react';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
 import { cn } from '../../../../shared/lib/utils';
+import { KidQuestionCard } from '../../_shared/components/compact';
 function toWordList(value) {
     if (Array.isArray(value)) {
         return value.filter((item) => typeof item === 'string');
@@ -86,17 +87,17 @@ export function WordOrderingClient({ questionData, onSubmit, isReviewMode = fals
     const isWrong = isReviewMode && selectedWords.length > 0 && !isCorrect;
     const isComplete = selectedWords.length === words.length;
     const displayExplanation = explanation || questionData.explanation;
-    return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-gradient-to-br from-amber-500 to-orange-600 text-white", children: _jsx(ArrowUpDown, { className: "h-3.5 w-3.5" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "S\u1EAFp x\u1EBFp t\u1EEB" }), isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Lightbulb, { className: "h-3 w-3" }), "V\u00ED d\u1EE5"] }))] }), isReviewMode && isComplete && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isCorrect ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'), children: [isCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), isCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "space-y-3 p-3", children: [(imagePreviewUrl || imageUrl) && (_jsx("div", { className: "flex justify-center", children: _jsx("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gray-50", children: isLoading ? (_jsx("div", { className: "flex h-48 w-48 items-center justify-center", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-amber-500" }) })) : (_jsx("img", { src: imagePreviewUrl || imageUrl, alt: "H\u00ECnh \u1EA3nh c\u00E2u h\u1ECFi", className: "max-h-56 w-auto object-contain p-2" })) }) })), _jsxs("div", { className: "space-y-2", children: [_jsx("span", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider", children: "\u0110\u00E1p \u00E1n c\u1EE7a b\u1EA1n" }), _jsx("div", { className: "flex flex-wrap gap-2 min-h-[48px] rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-3", children: selectedWords.length === 0 ? (_jsx("span", { className: "text-sm text-gray-400 italic", children: "Nh\u1EA5n v\u00E0o c\u00E1c t\u1EEB b\u00EAn d\u01B0\u1EDBi \u0111\u1EC3 s\u1EAFp x\u1EBFp..." })) : (selectedWords.map((word, index) => {
-                                        const isWordCorrect = isReviewMode && answer[index] === word;
-                                        const isWordWrong = isReviewMode && answer[index] !== word;
-                                        return (_jsxs("button", { type: "button", onClick: () => handleRemoveWord(index), disabled: isReviewMode, className: cn('inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm font-semibold transition-all shadow-sm', isReviewMode
-                                                ? isWordCorrect
-                                                    ? 'bg-green-100 text-green-800 border border-green-300'
-                                                    : 'bg-red-100 text-red-800 border border-red-300'
-                                                : 'bg-amber-100 text-amber-800 border border-amber-300 hover:bg-amber-200 cursor-pointer'), children: [word, isReviewMode && (isWordCorrect
-                                                    ? _jsx(Check, { className: "h-3.5 w-3.5 text-green-600" })
-                                                    : _jsx(X, { className: "h-3.5 w-3.5 text-red-600" }))] }, `selected-${index}`));
-                                    })) })] }), availableWords.length > 0 && (_jsxs("div", { className: "space-y-2", children: [_jsx("span", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider", children: "T\u1EEB c\u00F3 s\u1EB5n" }), _jsx("div", { className: "flex flex-wrap gap-2", children: availableWords.map((word, index) => (_jsx("button", { type: "button", onClick: () => handleSelectWord(word, index), disabled: isReviewMode, className: cn('rounded-lg border-2 px-3 py-2 text-sm font-semibold transition-all shadow-sm', isReviewMode
-                                            ? 'border-gray-200 bg-gray-100 text-gray-500 cursor-default'
-                                            : 'border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100 hover:border-blue-300 cursor-pointer hover:shadow-md'), children: word }, `available-${index}`))) })] })), isReviewMode && isWrong && (_jsxs("div", { className: "rounded-lg border border-green-200 bg-green-50 p-3", children: [_jsx("span", { className: "text-xs font-medium text-green-600 uppercase tracking-wider", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: answer.map((word, index) => (_jsx("span", { className: "rounded-lg bg-green-100 px-3 py-1.5 text-sm font-semibold text-green-800 border border-green-300", children: word }, `correct-${index}`))) })] })), isReviewMode && displayExplanation && (_jsxs("div", { className: "rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-3", children: [_jsx("span", { className: "text-xs font-medium text-blue-600 uppercase tracking-wider", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-blue-800", children: displayExplanation })] }))] })] }) }));
+    return (_jsx("div", { className: "space-y-4", children: _jsxs(KidQuestionCard, { icon: _jsx(ArrowUpDown, { className: "h-3.5 w-3.5" }), title: "S\u1EAFp x\u1EBFp t\u1EEB", isExample: isExample, review: isReviewMode && isComplete ? (isCorrect ? 'correct' : 'wrong') : null, children: [(imagePreviewUrl || imageUrl) && (_jsx("div", { className: "flex justify-center", children: _jsx("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gray-50", children: isLoading ? (_jsx("div", { className: "flex h-48 w-48 items-center justify-center", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-amber-500" }) })) : (_jsx("img", { src: imagePreviewUrl || imageUrl, alt: "H\u00ECnh \u1EA3nh c\u00E2u h\u1ECFi", className: "max-h-56 w-auto object-contain p-2" })) }) })), _jsxs("div", { className: "space-y-2", children: [_jsx("span", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider", children: "\u0110\u00E1p \u00E1n c\u1EE7a b\u1EA1n" }), _jsx("div", { className: "flex flex-wrap gap-2 min-h-[48px] rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-3", children: selectedWords.length === 0 ? (_jsx("span", { className: "text-sm text-gray-400 italic", children: "Nh\u1EA5n v\u00E0o c\u00E1c t\u1EEB b\u00EAn d\u01B0\u1EDBi \u0111\u1EC3 s\u1EAFp x\u1EBFp..." })) : (selectedWords.map((word, index) => {
+                                const isWordCorrect = isReviewMode && answer[index] === word;
+                                const isWordWrong = isReviewMode && answer[index] !== word;
+                                return (_jsxs("button", { type: "button", onClick: () => handleRemoveWord(index), disabled: isReviewMode, className: cn('inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm font-semibold transition-all shadow-sm', isReviewMode
+                                        ? isWordCorrect
+                                            ? 'bg-green-100 text-green-800 border border-green-300'
+                                            : 'bg-red-100 text-red-800 border border-red-300'
+                                        : 'cursor-pointer border border-blue-500 bg-blue-50 text-blue-800 ring-2 ring-blue-100 hover:bg-blue-100'), children: [word, isReviewMode && (isWordCorrect
+                                            ? _jsx(Check, { className: "h-3.5 w-3.5 text-green-600" })
+                                            : _jsx(X, { className: "h-3.5 w-3.5 text-red-600" }))] }, `selected-${index}`));
+                            })) })] }), availableWords.length > 0 && (_jsxs("div", { className: "space-y-2", children: [_jsx("span", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider", children: "T\u1EEB c\u00F3 s\u1EB5n" }), _jsx("div", { className: "flex flex-wrap gap-2", children: availableWords.map((word, index) => (_jsx("button", { type: "button", onClick: () => handleSelectWord(word, index), disabled: isReviewMode, className: cn('rounded-lg border-2 px-3 py-2 text-sm font-semibold transition-all shadow-sm', isReviewMode
+                                    ? 'border-gray-200 bg-gray-100 text-gray-500 cursor-default'
+                                    : 'border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100 hover:border-blue-300 cursor-pointer hover:shadow-md'), children: word }, `available-${index}`))) })] })), isReviewMode && isWrong && (_jsxs("div", { className: "rounded-lg border border-green-200 bg-green-50 p-3", children: [_jsx("span", { className: "text-xs font-medium text-green-600 uppercase tracking-wider", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: answer.map((word, index) => (_jsx("span", { className: "rounded-lg bg-green-100 px-3 py-1.5 text-sm font-semibold text-green-800 border border-green-300", children: word }, `correct-${index}`))) })] })), isReviewMode && displayExplanation && (_jsxs("div", { className: "rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-3", children: [_jsx("span", { className: "text-xs font-medium text-blue-600 uppercase tracking-wider", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-blue-800", children: displayExplanation })] }))] }) }));
 }

package/dist/components/questions/types/word-ordering-group/WordOrderingGroupClient.js

@@ -1,7 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Lightbulb, Star } from 'lucide-react';
+import { Lightbulb } from 'lucide-react';
 import { WordOrderingClient } from '../word-ordering/WordOrderingClient';
+import { KidInstruction, KidQuestionCard } from '../../_shared/components/compact';
 export function WordOrderingGroupClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, }) {
     const items = questionData.items || [];
     const handleItemSubmit = (itemIndex, ordered) => {
@@ -16,11 +17,11 @@ export function WordOrderingGroupClient({ questionData, isReviewMode = false, us
         });
         onAnswerChange(next);
     };
-    return (_jsxs("div", { className: "space-y-4", children: [questionData.instruction && (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800", children: questionData.instruction })), items.map((item, itemIndex) => (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] }))] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsx("div", { className: "space-y-3 p-3", children: _jsx(WordOrderingClient, { questionData: {
-                                words: item.words,
-                                answer: item.answer,
-                                isExample: item.isExample,
-                                points: item.points,
-                                imageUrl: item.imageUrl,
-                            }, isReviewMode: isReviewMode || item.isExample, userAnswer: item.isExample ? item.answer : userAnswers[itemIndex], onSubmit: (ordered) => handleItemSubmit(itemIndex, ordered) }) })] }, `${item.questionNumber}-${itemIndex}`))), isReviewMode && questionData.explanation && (_jsxs("div", { className: "flex items-start gap-2 rounded-xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-800", children: [_jsx(Lightbulb, { className: "mt-0.5 h-4 w-4 flex-shrink-0" }), questionData.explanation] }))] }));
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(KidInstruction, { children: questionData.instruction }), items.map((item, itemIndex) => (_jsx(KidQuestionCard, { title: `Câu ${item.questionNumber || itemIndex + 1}`, points: item.points || 0, isExample: item.isExample, children: _jsx(WordOrderingClient, { questionData: {
+                        words: item.words,
+                        answer: item.answer,
+                        isExample: item.isExample,
+                        points: item.points,
+                        imageUrl: item.imageUrl,
+                    }, isReviewMode: isReviewMode || item.isExample, userAnswer: item.isExample ? item.answer : userAnswers[itemIndex], onSubmit: (ordered) => handleItemSubmit(itemIndex, ordered) }) }, `${item.questionNumber}-${itemIndex}`))), isReviewMode && questionData.explanation && (_jsxs("div", { className: "flex items-start gap-2 rounded-xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-800", children: [_jsx(Lightbulb, { className: "mt-0.5 h-4 w-4 flex-shrink-0" }), questionData.explanation] }))] }));
 }

package/dist/components/questions/types/write-correct-verb-form/WriteCorrectVerbFormClient.js

@@ -3,7 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import { Input } from '../../../../components/ui/input';
 import { cn } from '../../../../shared/lib/utils';
-import { Check, X, FileText, PenLine, AlertTriangle, Lightbulb } from 'lucide-react';
+import { Check, X, PenLine, AlertTriangle, Lightbulb } from 'lucide-react';
+import { KidInstruction, KidPrompt, KidQuestionCard } from '../../_shared/components/compact';
 export function WriteCorrectVerbFormClient({ questionData, onSubmit, isReviewMode = false, userAnswer = '', }) {
     // ============ STATE ============
     const [answer, setAnswer] = useState(userAnswer || '');
@@ -39,7 +40,9 @@ export function WriteCorrectVerbFormClient({ questionData, onSubmit, isReviewMod
         const parts = questionData.sentence.split(/(\{0\})/g);
         return (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 text-lg leading-relaxed", children: parts.map((part, index) => {
                 if (part === '{0}') {
-                    return (_jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsxs("div", { className: "relative inline-flex items-center", children: [_jsx(Input, { value: questionData.correctAnswer, readOnly: true, disabled: true, className: cn('w-36 text-center font-semibold border-2 rounded-lg transition-all', 'border-green-400 bg-green-50 text-green-800 cursor-not-allowed') }), isReviewMode && (_jsx("div", { className: cn('absolute -right-7 top-1/2 -translate-y-1/2 flex h-5 w-5 items-center justify-center rounded-full', isCorrect ? 'bg-green-500' : isWrong ? 'bg-red-500' : 'bg-gray-300'), children: isCorrect ? (_jsx(Check, { className: "h-3 w-3 text-white" })) : isWrong ? (_jsx(X, { className: "h-3 w-3 text-white" })) : null }))] }), _jsxs("span", { className: "rounded-lg bg-amber-100 px-2 py-0.5 text-sm font-medium text-amber-700", children: ["(", questionData.verbHint, ")"] })] }, index));
+                    return (_jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsxs("div", { className: "relative inline-flex items-center", children: [_jsx(Input, { value: questionData.correctAnswer, readOnly: true, disabled: true, className: cn('w-36 text-sm text-center font-semibold border px-3 py-1.5 rounded-md transition-all cursor-not-allowed', isReviewMode && isWrong
+                                            ? 'border-red-400 bg-red-50 text-red-800'
+                                            : 'border-green-400 bg-green-50 text-green-800') }), isReviewMode && (_jsx("div", { className: cn('absolute -right-7 top-1/2 -translate-y-1/2 flex h-5 w-5 items-center justify-center rounded-full', isCorrect ? 'bg-green-500' : isWrong ? 'bg-red-500' : 'bg-gray-300'), children: isCorrect ? (_jsx(Check, { className: "h-3 w-3 text-white" })) : isWrong ? (_jsx(X, { className: "h-3 w-3 text-white" })) : null }))] }), _jsxs("span", { className: "rounded-lg bg-amber-100 px-2 py-0.5 text-sm font-medium text-amber-700", children: ["(", questionData.verbHint, ")"] })] }, index));
                 }
                 else {
                     return _jsx("span", { className: "text-gray-800", children: part }, index);
@@ -47,15 +50,15 @@ export function WriteCorrectVerbFormClient({ questionData, onSubmit, isReviewMod
             }) }));
     };
     // ============ RENDER ============
-    return (_jsxs("div", { className: "space-y-3", children: [questionData.instruction && (_jsx("div", { className: "overflow-hidden rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 shadow-sm", children: _jsxs("div", { className: "flex items-center gap-2 px-3 py-2", children: [_jsx("div", { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: _jsx(FileText, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-blue-900", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx("p", { className: "text-sm text-blue-700", children: questionData.instruction })] })] }) })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: cn('flex items-center justify-between border-b px-3 py-2', isReviewMode && isCorrect && 'border-green-200 bg-gradient-to-r from-green-50 to-emerald-50', isReviewMode && isWrong && 'border-red-200 bg-gradient-to-r from-red-50 to-rose-50', (!isReviewMode || (!isCorrect && !isWrong)) && 'border-gray-100 bg-gradient-to-r from-gray-50 to-white'), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: cn('flex h-7 w-7 items-center justify-center rounded-md text-white', isReviewMode && isCorrect && 'bg-gradient-to-br from-green-500 to-emerald-600', isReviewMode && isWrong && 'bg-gradient-to-br from-red-500 to-rose-600', (!isReviewMode || (!isCorrect && !isWrong)) && 'bg-gradient-to-br from-violet-500 to-purple-600'), children: _jsx(PenLine, { className: "h-3.5 w-3.5" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Chia \u0111\u1ED9ng t\u1EEB \u0111\u00FAng" })] }), isReviewMode && hasAnswered && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isCorrect ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'), children: [isCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), isCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "space-y-3 p-3", children: [_jsx("div", { className: "rounded-xl bg-gradient-to-br from-slate-50 to-gray-50 border border-gray-100 p-5", children: renderSentenceWithInput() }), isReviewMode && (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: cn('rounded-xl border-2 p-4', isCorrect
-                                                    ? 'border-green-200 bg-green-50'
-                                                    : isWrong
-                                                        ? 'border-red-200 bg-red-50'
-                                                        : 'border-gray-200 bg-gray-50'), children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx("div", { className: cn('flex h-6 w-6 items-center justify-center rounded-lg', isCorrect ? 'bg-green-200' : isWrong ? 'bg-red-200' : 'bg-gray-200'), children: isCorrect ? (_jsx(Check, { className: "h-3.5 w-3.5 text-green-700" })) : isWrong ? (_jsx(X, { className: "h-3.5 w-3.5 text-red-700" })) : (_jsx("span", { className: "text-xs text-gray-500", children: "?" })) }), _jsx("span", { className: "text-xs font-medium text-gray-600", children: "C\u00E2u tr\u1EA3 l\u1EDDi c\u1EE7a b\u1EA1n" })] }), _jsx("p", { className: cn('text-lg font-bold', isCorrect ? 'text-green-700' : isWrong ? 'text-red-700' : 'text-gray-400'), children: answer || '(Chưa trả lời)' })] }), _jsxs("div", { className: "rounded-xl border-2 border-green-200 bg-gradient-to-br from-green-50 to-emerald-50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-lg bg-green-200", children: _jsx(Check, { className: "h-3.5 w-3.5 text-green-700" }) }), _jsx("span", { className: "text-xs font-medium text-gray-600", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" })] }), _jsx("p", { className: "text-lg font-bold text-green-700", children: questionData.correctAnswer })] })] }), _jsx("div", { className: cn('rounded-xl p-4', isCorrect
-                                            ? 'bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200'
-                                            : 'bg-gradient-to-r from-red-50 to-rose-50 border border-red-200'), children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: cn('flex h-10 w-10 items-center justify-center rounded-xl text-white shadow-sm', isCorrect
-                                                        ? 'bg-gradient-to-br from-green-500 to-emerald-600'
-                                                        : 'bg-gradient-to-br from-red-500 to-rose-600'), children: isCorrect ? _jsx(Check, { className: "h-5 w-5" }) : _jsx(X, { className: "h-5 w-5" }) }), _jsxs("div", { children: [_jsx("p", { className: cn('text-sm font-semibold', isCorrect ? 'text-green-800' : 'text-red-800'), children: isCorrect ? 'Chính xác!' : 'Chưa đúng' }), _jsx("p", { className: cn('text-xs', isCorrect ? 'text-green-600' : 'text-red-600'), children: isCorrect
-                                                                ? 'Bạn đã chia động từ đúng.'
-                                                                : `Đáp án đúng là "${questionData.correctAnswer}".` })] })] }) }), questionData.explanation && (_jsx("div", { className: "rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border border-blue-200", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-lg bg-blue-500 text-white", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-xs font-semibold text-blue-700 uppercase tracking-wider", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-gray-700 leading-relaxed", children: questionData.explanation })] })] }) }))] })), !isReviewMode && !hasAnswered && (_jsx("div", { className: "rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 text-white shadow-sm", children: _jsx("span", { className: "text-sm font-bold", children: "!" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-amber-800", children: "Nh\u1EADp d\u1EA1ng \u0111\u00FAng c\u1EE7a \u0111\u1ED9ng t\u1EEB" }), _jsx("p", { className: "text-xs text-amber-600", children: "S\u1EED d\u1EE5ng g\u1EE3i \u00FD trong ngo\u1EB7c \u0111\u1EC3 chia \u0111\u1ED9ng t\u1EEB ph\u00F9 h\u1EE3p." })] })] }) }))] })] }), !isReviewMode && questionData.caseSensitive && (_jsx("div", { className: "overflow-hidden rounded-xl border border-yellow-200 bg-gradient-to-r from-yellow-50 to-amber-50 shadow-sm", children: _jsxs("div", { className: "flex items-center gap-2 px-3 py-2", children: [_jsx("div", { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md bg-gradient-to-br from-yellow-400 to-amber-500 text-white", children: _jsx(AlertTriangle, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-yellow-900", children: "L\u01B0u \u00FD quan tr\u1ECDng" }), _jsx("p", { className: "text-sm text-yellow-700", children: "\u0110\u00E1p \u00E1n c\u00F3 ph\u00E2n bi\u1EC7t ch\u1EEF hoa/th\u01B0\u1EDDng" })] })] }) }))] }));
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx(KidInstruction, { children: questionData.instruction }), _jsxs(KidQuestionCard, { icon: _jsx(PenLine, { className: "h-3.5 w-3.5" }), title: "Chia \u0111\u1ED9ng t\u1EEB \u0111\u00FAng", points: questionData.points, review: isReviewMode && hasAnswered ? (isCorrect ? 'correct' : 'wrong') : null, children: [_jsx(KidPrompt, { children: renderSentenceWithInput() }), isReviewMode && (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: cn('rounded-xl border-2 p-4', isCorrect
+                                            ? 'border-green-200 bg-green-50'
+                                            : isWrong
+                                                ? 'border-red-200 bg-red-50'
+                                                : 'border-gray-200 bg-gray-50'), children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx("div", { className: cn('flex h-6 w-6 items-center justify-center rounded-lg', isCorrect ? 'bg-green-200' : isWrong ? 'bg-red-200' : 'bg-gray-200'), children: isCorrect ? (_jsx(Check, { className: "h-3.5 w-3.5 text-green-700" })) : isWrong ? (_jsx(X, { className: "h-3.5 w-3.5 text-red-700" })) : (_jsx("span", { className: "text-xs text-gray-500", children: "?" })) }), _jsx("span", { className: "text-xs font-medium text-gray-600", children: "C\u00E2u tr\u1EA3 l\u1EDDi c\u1EE7a b\u1EA1n" })] }), _jsx("p", { className: cn('text-lg font-bold', isCorrect ? 'text-green-700' : isWrong ? 'text-red-700' : 'text-gray-400'), children: answer || '(Chưa trả lời)' })] }), _jsxs("div", { className: "rounded-xl border-2 border-green-200 bg-gradient-to-br from-green-50 to-emerald-50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-lg bg-green-200", children: _jsx(Check, { className: "h-3.5 w-3.5 text-green-700" }) }), _jsx("span", { className: "text-xs font-medium text-gray-600", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" })] }), _jsx("p", { className: "text-lg font-bold text-green-700", children: questionData.correctAnswer })] })] }), _jsx("div", { className: cn('rounded-xl p-4', isCorrect
+                                    ? 'bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200'
+                                    : 'bg-gradient-to-r from-red-50 to-rose-50 border border-red-200'), children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: cn('flex h-10 w-10 items-center justify-center rounded-xl text-white shadow-sm', isCorrect
+                                                ? 'bg-gradient-to-br from-green-500 to-emerald-600'
+                                                : 'bg-gradient-to-br from-red-500 to-rose-600'), children: isCorrect ? _jsx(Check, { className: "h-5 w-5" }) : _jsx(X, { className: "h-5 w-5" }) }), _jsxs("div", { children: [_jsx("p", { className: cn('text-sm font-semibold', isCorrect ? 'text-green-800' : 'text-red-800'), children: isCorrect ? 'Chính xác!' : 'Chưa đúng' }), _jsx("p", { className: cn('text-xs', isCorrect ? 'text-green-600' : 'text-red-600'), children: isCorrect
+                                                        ? 'Bạn đã chia động từ đúng.'
+                                                        : `Đáp án đúng là "${questionData.correctAnswer}".` })] })] }) }), questionData.explanation && (_jsx("div", { className: "rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border border-blue-200", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-lg bg-blue-500 text-white", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-xs font-semibold text-blue-700 uppercase tracking-wider", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-gray-700 leading-relaxed", children: questionData.explanation })] })] }) }))] })), !isReviewMode && !hasAnswered && (_jsxs("div", { className: "flex items-center gap-2 rounded-md border border-amber-200 bg-amber-50 px-2.5 py-1.5", children: [_jsx("div", { className: "flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white", children: _jsx("span", { className: "text-[10px] font-bold", children: "!" }) }), _jsx("span", { className: "text-xs text-amber-800", children: "Nh\u1EADp d\u1EA1ng \u0111\u00FAng c\u1EE7a \u0111\u1ED9ng t\u1EEB theo g\u1EE3i \u00FD trong ngo\u1EB7c" })] }))] }), !isReviewMode && questionData.caseSensitive && (_jsx("div", { className: "overflow-hidden rounded-xl border border-yellow-200 bg-gradient-to-r from-yellow-50 to-amber-50 shadow-sm", children: _jsxs("div", { className: "flex items-center gap-2 px-3 py-2", children: [_jsx("div", { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md bg-gradient-to-br from-yellow-400 to-amber-500 text-white", children: _jsx(AlertTriangle, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-yellow-900", children: "L\u01B0u \u00FD quan tr\u1ECDng" }), _jsx("p", { className: "text-sm text-yellow-700", children: "\u0110\u00E1p \u00E1n c\u00F3 ph\u00E2n bi\u1EC7t ch\u1EEF hoa/th\u01B0\u1EDDng" })] })] }) }))] }));
 }

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

@@ -13,9 +13,6 @@ function readCrossOutAnswers(value) {
 }
 export function CrossOutWordGroupViewer({ question, isReviewMode = false, userAnswer, onSubmitAnswer, }) {
     const questionData = mapQuestionToCrossOutWordGroupData(question);
-    const storedAnswers = readCrossOutAnswers(userAnswer);
-    const userAnswers = isReviewMode && !storedAnswers
-        ? questionData.items.map((item) => item.correctAnswer)
-        : storedAnswers;
+    const userAnswers = readCrossOutAnswers(userAnswer);
     return (_jsx(CrossOutWordGroupClient, { questionData: questionData, isReviewMode: isReviewMode, userAnswers: userAnswers, onAnswerChange: isReviewMode ? undefined : onSubmitAnswer }));
 }

package/dist/components/questions/viewer/FillInBlankGroupViewer.d.ts

@@ -3,8 +3,12 @@ import type { FillInBlankGroupStudentItemAnswer } from '../_shared/types/fill-in
 type FillInBlankGroupViewerProps = {
     question: Question;
     isReviewMode?: boolean;
-    userAnswer?: FillInBlankGroupStudentItemAnswer[];
-    onSubmitAnswer?: (answer: FillInBlankGroupStudentItemAnswer[]) => void;
+    userAnswer?: FillInBlankGroupStudentItemAnswer[] | {
+        answer?: FillInBlankGroupStudentItemAnswer[];
+    };
+    onSubmitAnswer?: (answer: {
+        answer: FillInBlankGroupStudentItemAnswer[];
+    } | FillInBlankGroupStudentItemAnswer[]) => void;
 };
 export declare function FillInBlankGroupViewer({ question, isReviewMode, userAnswer, onSubmitAnswer, }: FillInBlankGroupViewerProps): import("react").JSX.Element;
 export {};

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

@@ -2,13 +2,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FillInBlankGroupClient } from '../types/fill-in-blank-group/FillInBlankGroupClient';
 import { mapQuestionToFillInBlankGroupData } from '../types/fill-in-blank-group/map-fill-in-blank-group-data';
+function readFillInBlankAnswers(value) {
+    if (Array.isArray(value)) {
+        return value;
+    }
+    if (value && typeof value === 'object' && Array.isArray(value.answer)) {
+        return value.answer;
+    }
+    return undefined;
+}
 export function FillInBlankGroupViewer({ question, isReviewMode = false, userAnswer, onSubmitAnswer, }) {
     const questionData = mapQuestionToFillInBlankGroupData(question);
-    const studentAnswers = Array.isArray(userAnswer) ? userAnswer : undefined;
-    const reviewAnswers = isReviewMode && !studentAnswers
-        ? questionData.items.map((item) => ({
-            answers: item.answers.map((alts) => alts[0] || ''),
-        }))
-        : studentAnswers;
-    return (_jsx(FillInBlankGroupClient, { questionData: questionData, isReviewMode: isReviewMode, userAnswers: reviewAnswers, onAnswerChange: isReviewMode ? undefined : onSubmitAnswer }));
+    const userAnswers = readFillInBlankAnswers(userAnswer);
+    return (_jsx(FillInBlankGroupClient, { questionData: questionData, isReviewMode: isReviewMode, userAnswers: userAnswers, onAnswerChange: isReviewMode
+            ? undefined
+            : (answers) => onSubmitAnswer?.({ answer: answers }) }));
 }

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

@@ -484,7 +484,7 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
         const answers = raw.answers && typeof raw.answers === 'object' && !Array.isArray(raw.answers)
             ? raw.answers
             : raw;
-        return (_jsx(CrosswordPuzzleClient, { content: question.content, correctAnswer: question.correctAnswer ?? question.answer, isReviewMode: isReviewMode, userAnswers: answers, onAnswerChange: isReviewMode
+        return (_jsx(CrosswordPuzzleClient, { content: question.content, correctAnswer: question.correctAnswer ?? question.answer, isReviewMode: isReviewMode, questionNumber: question.questionNumber, userAnswers: answers, onAnswerChange: isReviewMode
                 ? undefined
                 : (key, value) => {
                     onSubmitAnswer?.({ answers: { ...answers, [key]: value } });
@@ -521,7 +521,7 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
             case 'SPONTANEOUS_QA':
                 return (_jsx(SpontaneousQAClient, { questionData: mapQuestionToSpontaneousQAData(question), isReviewMode: isReviewMode }));
             case 'SPONTANEOUS_QA_GROUP':
-                return (_jsx(SpontaneousQaGroupViewer, { question: question, isReviewMode: isReviewMode }));
+                return (_jsx(SpontaneousQaGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer, gradeDetails: gradeDetails, disabled: !onSubmitAnswer }));
             case 'WORD_ORDER_AND_MATCH_GROUP':
             case 'WORD_ORDER_AND_MATCH':
                 return (_jsx(WordOrderAndMatchGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer, onSubmitAnswer: onSubmitAnswer }));

package/dist/components/questions/viewer/SpontaneousQaGroupViewer.d.ts

@@ -1,5 +1,11 @@
 import type { Question } from '../../../shared/types/entities/question.types';
-export declare function SpontaneousQaGroupViewer({ question, isReviewMode, }: {
+import type { SpontaneousQaGroupGradeDetail } from '../_shared/types/spontaneous-qa-group.type';
+export declare function SpontaneousQaGroupViewer({ question, isReviewMode, userAnswer, onItemRecorded, uploadingIndex, gradeDetails, disabled, }: {
     question: Question;
     isReviewMode?: boolean;
+    userAnswer?: unknown;
+    onItemRecorded?: (flattenIndex: number, blob: Blob) => void;
+    uploadingIndex?: number | null;
+    gradeDetails?: SpontaneousQaGroupGradeDetail[];
+    disabled?: boolean;
 }): import("react").JSX.Element;

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

@@ -2,6 +2,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SpontaneousQaGroupClient } from '../types/spontaneous-qa-group/SpontaneousQaGroupClient';
 import { mapQuestionToSpontaneousQaGroupData } from '../types/spontaneous-qa-group/map-spontaneous-qa-group-data';
-export function SpontaneousQaGroupViewer({ question, isReviewMode = false, }) {
-    return (_jsx(SpontaneousQaGroupClient, { questionData: mapQuestionToSpontaneousQaGroupData(question), isReviewMode: isReviewMode }));
+function readStudentAnswer(value) {
+    if (!value || typeof value !== 'object' || Array.isArray(value)) {
+        return undefined;
+    }
+    const keys = value.audioKeys;
+    if (!Array.isArray(keys)) {
+        return undefined;
+    }
+    return {
+        audioKeys: keys.map((key) => (typeof key === 'string' && key.trim() !== '' ? key : null)),
+    };
+}
+export function SpontaneousQaGroupViewer({ question, isReviewMode = false, userAnswer, onItemRecorded, uploadingIndex, gradeDetails, disabled, }) {
+    return (_jsx(SpontaneousQaGroupClient, { questionData: mapQuestionToSpontaneousQaGroupData(question), isReviewMode: isReviewMode, userAnswer: readStudentAnswer(userAnswer), onItemRecorded: isReviewMode ? undefined : onItemRecorded, uploadingIndex: uploadingIndex, gradeDetails: isReviewMode ? undefined : gradeDetails, disabled: disabled }));
 }

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

@@ -218,7 +218,7 @@ export function renderMoversReviewBody(ctx) {
         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 }));
+            return (_jsx(MoversCrosswordPuzzleRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: questionCount, title: data.title, gridSize: data.gridSize, markedColumn: data.markedColumn, hiddenWord: data.hiddenWord, clues: data.clues, answers: answers, correctAnswers: data.correctAnswers, onAnswerChange: handleAnswerChange, isReviewMode: true, caseSensitive: data.caseSensitive || firstQuestion?.correct_answer?.caseSensitive || false }));
         }
         default:
             return null;

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

@@ -140,13 +140,20 @@ 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' || answer.questionType === 'CROSSWORD_PUZZLE') && isRecord(correct.cells || correct.answers)) {
+    if (answer.questionType === 'FILL_MISSING_WORDS_IN_GRID' && 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,
         };
     }
+    if (answer.questionType === 'CROSSWORD_PUZZLE' && isRecord(correct.cells)) {
+        const rawCells = correct.cells;
+        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) {
     if (value == null)

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

@@ -537,18 +537,27 @@ const reverseCrossOutWordGroup = (apiQuestion) => {
         const fallback = asRecord(fallbackAnswers[index]);
         const answerRaw = Object.keys(itemAnswer).length > 0 ? itemAnswer : fallback;
         const isExample = item.isExample === true;
-        const type = itemContent.type === 'CROSS_OUT_AND_REPLACE' ||
-            answerRaw.type === 'CROSS_OUT_AND_REPLACE'
+        const type = itemContent.type === 'CROSS_OUT_AND_REPLACE'
             ? 'CROSS_OUT_AND_REPLACE'
-            : 'CROSS_OUT';
+            : itemContent.type === 'CROSS_OUT'
+                ? 'CROSS_OUT'
+                : answerRaw.type === 'CROSS_OUT_AND_REPLACE'
+                    ? 'CROSS_OUT_AND_REPLACE'
+                    : 'CROSS_OUT';
+        const rawIndex = answerRaw.wordIndex;
+        const wordIndex = typeof rawIndex === 'number' && Number.isInteger(rawIndex) && rawIndex >= 0
+            ? rawIndex
+            : null;
         const correctAnswer = type === 'CROSS_OUT_AND_REPLACE'
             ? {
                 type: 'CROSS_OUT_AND_REPLACE',
+                wordIndex,
                 crossOut: asString(answerRaw.crossOut),
                 replaceWith: asString(answerRaw.replaceWith),
             }
             : {
                 type: 'CROSS_OUT',
+                wordIndex,
                 crossOut: asString(answerRaw.crossOut),
             };
         return {
@@ -638,12 +647,14 @@ const reverseSpontaneousQaGroup = (apiQuestion) => {
                 const fallback = asRecord(flattenedAnswers[questionIndex]);
                 const expected = asArray(childAnswer.expectedAnswers ?? fallback.expectedAnswers)
                     .filter((value) => typeof value === 'string');
+                const isExample = child.isExample === true;
                 return {
                     questionText: asString(childContent.questionText),
                     inputType: asString(childContent.inputType, 'TEXT') === 'AUDIO' ? 'AUDIO' : 'TEXT',
                     audioUrl: asString(childContent.audioUrl),
                     expectedAnswers: expected.length > 0 ? expected : [''],
-                    points: asNumber(child.points, 1),
+                    isExample,
+                    points: isExample ? 0 : asNumber(child.points, 1),
                     questionNumber: asNumber(child.questionNumber, questionIndex + 1),
                 };
             }),
@@ -890,6 +901,9 @@ function reverseCrosswordPuzzle(apiQuestion) {
     const rows = apiContent.gridSize?.rows || apiContent.rows || 12;
     const cols = apiContent.gridSize?.cols || apiContent.cols || 12;
     const title = apiContent.title || '';
+    const type = apiContent.type === 'HIDDEN_WORD' ? 'HIDDEN_WORD' : 'STANDARD';
+    const instruction = asString(apiQuestion.instruction, asString(apiContent.instruction));
+    const markedColumn = typeof apiContent.markedColumn === 'number' ? apiContent.markedColumn : undefined;
     const across = Array.isArray(apiContent.clues?.across) ? apiContent.clues.across : [];
     const down = Array.isArray(apiContent.clues?.down) ? apiContent.clues.down : [];
     const answers = apiAnswer.answers || {};
@@ -904,6 +918,7 @@ function reverseCrosswordPuzzle(apiQuestion) {
             length: a.length || 1,
             direction: 'across',
             answer: answers[`across-${a.number}`] || '',
+            ...(a.isExample === true ? { isExample: true } : {}),
         });
     }
     for (const d of down) {
@@ -916,24 +931,32 @@ function reverseCrosswordPuzzle(apiQuestion) {
             length: d.length || 1,
             direction: 'down',
             answer: answers[`down-${d.number}`] || '',
+            ...(d.isExample === true ? { isExample: true } : {}),
         });
     }
     return {
         content: {
+            type,
             title,
+            instruction,
             rows,
             cols,
             gridSize: { rows, cols },
+            ...(type === 'HIDDEN_WORD' && markedColumn ? { markedColumn } : {}),
             clues: { across, down },
         },
         answer: {
+            type,
             title,
+            instruction,
             rows,
             cols,
+            ...(type === 'HIDDEN_WORD' && markedColumn ? { markedColumn } : {}),
+            hiddenWord: answers['hidden-word'] || '',
             clues,
             answers,
             caseSensitive: apiAnswer.caseSensitive || false,
-            explanation: apiQuestion.explanation || '',
+            explanation: asString(apiQuestion.explanation),
         },
     };
 }
@@ -944,6 +967,7 @@ function reverseFindWordsInMatrix(apiQuestion) {
     const rows = apiContent.gridSize?.rows || (Array.isArray(apiContent.grid) ? apiContent.grid.length : 14);
     const cols = apiContent.gridSize?.cols || (Array.isArray(apiContent.grid?.[0]) ? apiContent.grid[0].length : 14);
     const title = apiContent.title || '';
+    const instruction = typeof apiContent.instruction === 'string' ? apiContent.instruction : '';
     const grid = Array.isArray(apiContent.grid) ? apiContent.grid : [];
     const categories = Array.isArray(apiContent.categories) ? apiContent.categories : [];
     const wordBank = Array.isArray(apiContent.wordBank) ? apiContent.wordBank : [];
@@ -977,6 +1001,7 @@ function reverseFindWordsInMatrix(apiQuestion) {
         content: {
             type,
             title,
+            instruction,
             rows,
             cols,
             gridSize: { rows, cols },
@@ -989,6 +1014,7 @@ function reverseFindWordsInMatrix(apiQuestion) {
         answer: {
             type,
             title,
+            instruction,
             rows,
             cols,
             grid,

package/dist/shared/types/questions/crossword-puzzle.d.ts

@@ -20,6 +20,7 @@ export type CrosswordSubtype = 'STANDARD' | 'HIDDEN_WORD';
 export interface CrosswordPuzzleContent {
     type?: CrosswordSubtype;
     title?: string;
+    instruction?: string;
     gridSize: {
         rows: number;
         cols: number;

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

@@ -30,6 +30,7 @@ export interface ExampleSelection {
 export interface FindWordsInMatrixContent {
     type?: FindWordsInMatrixType;
     title?: string;
+    instruction?: string;
     gridSize: {
         rows: number;
         cols: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinyweb_dev/oe-exam-sdk",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "Reusable OceanEdu question components.",
   "type": "module",
   "main": "./dist/index.js",