@tinyweb_dev/oe-exam-sdk 1.0.9 → 1.0.11

package/dist/components/questions/types/word-order-and-match-group/WordOrderAndMatchGroupClient.js

@@ -1,8 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useCallback } from 'react';
-import { Check, X, RotateCcw, Sparkles } from 'lucide-react';
+import { X, RotateCcw } from 'lucide-react';
 import { cn } from '../../../../shared/lib/utils';
+import { KidInstruction, KidQuestionCard } from '../../_shared/components/compact';
 export function WordOrderAndMatchGroupClient({ questionData, isReviewMode = false, userAnswers, onAnswerChange, }) {
     const { instruction, matchOptions = ['A', 'B', 'C', 'D', 'E', 'F'], items = [] } = questionData;
     // Initialize interactive state for each item
@@ -140,7 +141,7 @@ export function WordOrderAndMatchGroupClient({ questionData, isReviewMode = fals
             return next;
         });
     }, [isReviewMode, items, onAnswerChange]);
-    return (_jsxs("div", { className: "w-full space-y-6", children: [_jsx("div", { className: "rounded-2xl border border-indigo-100 bg-gradient-to-r from-indigo-50/80 via-blue-50/50 to-white p-4 sm:p-5 shadow-sm", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "mt-0.5 rounded-lg bg-indigo-600 p-1.5 text-white shadow-sm", children: _jsx(Sparkles, { className: "h-4 w-4" }) }), _jsxs("div", { className: "flex-1 space-y-3", children: [_jsx("p", { className: "text-sm sm:text-base font-semibold text-gray-900 leading-relaxed", children: instruction || 'Put the useful phrases in order, then match them to parts A–F.' }), matchOptions.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-1.5 pt-1", children: [_jsx("span", { className: "text-xs font-semibold text-gray-500 mr-1", children: "Match Options:" }), matchOptions.map((opt) => (_jsx("span", { className: "inline-flex h-7 min-w-[28px] items-center justify-center rounded-lg border border-indigo-200 bg-white px-2.5 text-xs font-bold text-indigo-700 shadow-xs", children: opt }, opt)))] }))] })] }) }), _jsx("div", { className: "space-y-4", children: items.map((item, itemIdx) => {
+    return (_jsxs("div", { className: "w-full space-y-6", children: [_jsx(KidInstruction, { children: instruction || 'Put the useful phrases in order, then match them to parts A–F.' }), matchOptions.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx("span", { className: "text-xs font-semibold text-gray-500 mr-1", children: "Match Options:" }), matchOptions.map((opt) => (_jsx("span", { className: "inline-flex h-7 min-w-[28px] items-center justify-center rounded-lg border border-blue-200 bg-white px-2.5 text-xs font-bold text-blue-700 shadow-xs", children: opt }, opt)))] })), _jsx("div", { className: "space-y-4", children: items.map((item, itemIdx) => {
                     const state = itemStates[itemIdx] || { placedIndices: [], selectedLabel: '' };
                     const userAns = userAnswers?.[itemIdx];
                     const isExample = item.isExample === true;
@@ -151,40 +152,34 @@ export function WordOrderAndMatchGroupClient({ questionData, isReviewMode = fals
                     const isPhraseCorrect = normalizeStr(userPhrase) === normalizeStr(item.orderedPhrase || '');
                     const isLabelCorrect = (userLabel || '').trim().toUpperCase() === (item.matchLabel || '').trim().toUpperCase();
                     const isItemAllCorrect = isPhraseCorrect && isLabelCorrect;
-                    return (_jsxs("div", { className: cn('overflow-hidden rounded-xl border bg-white shadow-xs transition-all', isExample
-                            ? 'border-amber-200 bg-amber-50/30'
-                            : isReviewMode
-                                ? isItemAllCorrect
-                                    ? 'border-emerald-200 bg-emerald-50/20'
-                                    : 'border-rose-200 bg-rose-50/20'
-                                : 'border-gray-200 hover:border-indigo-200'), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-gray-100 px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: cn('inline-flex h-6 items-center rounded-md px-2 text-xs font-bold', isExample
-                                                    ? 'bg-amber-100 text-amber-800'
-                                                    : 'bg-indigo-100 text-indigo-800'), children: isExample ? 'Ví dụ (Example)' : `Câu ${item.questionNumber || itemIdx + 1}` }), !isExample && typeof item.points === 'number' && (_jsxs("span", { className: "text-xs font-medium text-gray-500", children: ["(", item.points, " ", item.points > 1 ? 'điểm' : 'điểm', ")"] }))] }), isReviewMode && !isExample && (_jsx("div", { className: "flex items-center gap-1.5", children: isItemAllCorrect ? (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-bold text-emerald-700", children: [_jsx(Check, { className: "h-3.5 w-3.5" }), " \u0110\u00FAng"] })) : (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-rose-100 px-2.5 py-0.5 text-xs font-bold text-rose-700", children: [_jsx(X, { className: "h-3.5 w-3.5" }), " Sai"] })) }))] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 p-3 lg:grid-cols-12", children: [_jsxs("div", { className: "space-y-3 lg:col-span-8 xl:col-span-9", children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider", children: "1. S\u1EAFp x\u1EBFp c\u00E1c t\u1EEB th\u00E0nh c\u00E2u ho\u00E0n ch\u1EC9nh:" }), _jsxs("div", { className: cn('min-h-[52px] rounded-xl border-2 border-dashed p-2.5 transition-colors flex flex-wrap items-center gap-1.5', state.placedIndices.length > 0
-                                                    ? 'border-indigo-300 bg-indigo-50/40'
-                                                    : 'border-gray-300 bg-gray-50/60'), children: [state.placedIndices.length === 0 ? (_jsx("span", { className: "text-xs italic text-gray-400 select-none", children: "Nh\u1EA5n v\u00E0o c\u00E1c t\u1EEB b\u00EAn d\u01B0\u1EDBi \u0111\u1EC3 gh\u00E9p c\u00E2u..." })) : (state.placedIndices.map((wordIdx, orderIdx) => {
-                                                        const word = item.scrambledWords[wordIdx];
-                                                        return (_jsxs("button", { type: "button", disabled: isReviewMode || isExample, onClick: () => handleWordClick(itemIdx, wordIdx), className: cn('group inline-flex items-center gap-1 rounded-lg px-2.5 py-1 text-xs sm:text-sm font-semibold transition-all shadow-xs', isExample
-                                                                ? 'bg-amber-100 text-amber-900 border border-amber-300 cursor-default'
-                                                                : isReviewMode
-                                                                    ? 'bg-indigo-100 text-indigo-900 border border-indigo-200 cursor-default'
-                                                                    : 'bg-indigo-600 text-white hover:bg-rose-500 active:scale-95 cursor-pointer'), children: [_jsx("span", { children: word }), !isReviewMode && !isExample && (_jsx(X, { className: "h-3 w-3 opacity-60 group-hover:opacity-100" }))] }, `placed-${wordIdx}-${orderIdx}`));
-                                                    })), state.placedIndices.length > 0 && !isReviewMode && !isExample && (_jsx("button", { type: "button", onClick: () => handleResetItem(itemIdx), className: "ml-auto inline-flex items-center gap-1 rounded-md p-1 text-xs text-gray-400 hover:bg-white hover:text-gray-700", title: "\u0110\u1EB7t l\u1EA1i", children: _jsx(RotateCcw, { className: "h-3.5 w-3.5" }) }))] }), (!isExample || !isReviewMode) && (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 pt-1", children: item.scrambledWords.map((word, wordIdx) => {
-                                                    const isPlaced = state.placedIndices.includes(wordIdx);
-                                                    return (_jsx("button", { type: "button", disabled: isReviewMode || isExample || isPlaced, onClick: () => handleWordClick(itemIdx, wordIdx), className: cn('rounded-lg border px-3 py-1 text-xs sm:text-sm font-medium transition-all', isPlaced
-                                                            ? 'border-dashed border-gray-200 bg-gray-100 text-gray-300 opacity-50 cursor-not-allowed'
-                                                            : 'border-gray-300 bg-white text-gray-800 shadow-xs hover:border-indigo-400 hover:bg-indigo-50/50 active:scale-95 cursor-pointer'), children: word }, `word-${wordIdx}`));
-                                                }) })), isReviewMode && !isExample && !isPhraseCorrect && (_jsxs("div", { className: "mt-2 rounded-lg bg-emerald-50 border border-emerald-200 p-2.5 text-xs text-emerald-800", children: [_jsx("span", { className: "font-bold", children: "C\u00E2u \u0111\u00FAng:" }), " ", item.orderedPhrase] }))] }), _jsxs("div", { className: "space-y-3 lg:col-span-4 xl:col-span-3 border-t lg:border-t-0 lg:border-l border-gray-100 pt-3 lg:pt-0 lg:pl-4", children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider", children: "2. Ch\u1ECDn nh\u00E3n n\u1ED1i:" }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: matchOptions.map((opt) => {
-                                                    const isSelected = state.selectedLabel === opt;
-                                                    const isCorrectOpt = (item.matchLabel || '').trim().toUpperCase() === opt;
-                                                    return (_jsx("button", { type: "button", disabled: isReviewMode || isExample, onClick: () => handleLabelSelect(itemIdx, opt), className: cn('h-9 w-9 sm:h-10 sm:w-10 rounded-xl font-bold text-sm transition-all flex items-center justify-center', isReviewMode
-                                                            ? isCorrectOpt
-                                                                ? 'bg-emerald-600 text-white ring-2 ring-emerald-300'
-                                                                : isSelected
-                                                                    ? 'bg-rose-500 text-white line-through'
-                                                                    : 'bg-gray-100 text-gray-400 opacity-60'
+                    return (_jsx(KidQuestionCard, { title: isExample ? 'Ví dụ (Example)' : `Câu ${item.questionNumber || itemIdx + 1}`, points: !isExample && typeof item.points === 'number' ? item.points : undefined, isExample: isExample, review: isReviewMode && !isExample ? (isItemAllCorrect ? 'correct' : 'wrong') : null, children: _jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-12", children: [_jsxs("div", { className: "space-y-3 lg:col-span-8 xl:col-span-9", children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider", children: "1. S\u1EAFp x\u1EBFp c\u00E1c t\u1EEB th\u00E0nh c\u00E2u ho\u00E0n ch\u1EC9nh:" }), _jsxs("div", { className: cn('min-h-[52px] rounded-xl border-2 border-dashed p-2.5 transition-colors flex flex-wrap items-center gap-1.5', state.placedIndices.length > 0
+                                                ? 'border-blue-300 bg-blue-50/40'
+                                                : 'border-gray-300 bg-gray-50/60'), children: [state.placedIndices.length === 0 ? (_jsx("span", { className: "text-xs italic text-gray-400 select-none", children: "Nh\u1EA5n v\u00E0o c\u00E1c t\u1EEB b\u00EAn d\u01B0\u1EDBi \u0111\u1EC3 gh\u00E9p c\u00E2u..." })) : (state.placedIndices.map((wordIdx, orderIdx) => {
+                                                    const word = item.scrambledWords[wordIdx];
+                                                    return (_jsxs("button", { type: "button", disabled: isReviewMode || isExample, onClick: () => handleWordClick(itemIdx, wordIdx), className: cn('group inline-flex items-center gap-1 rounded-lg px-2.5 py-1 text-xs sm:text-sm font-semibold transition-all shadow-xs', isExample
+                                                            ? 'bg-amber-100 text-amber-900 border border-amber-300 cursor-default'
+                                                            : isReviewMode
+                                                                ? isPhraseCorrect
+                                                                    ? 'border border-green-300 bg-green-50 text-green-800'
+                                                                    : 'border border-red-300 bg-red-50 text-red-800'
+                                                                : 'cursor-pointer border border-blue-500 bg-blue-50 text-blue-800 ring-2 ring-blue-100 hover:bg-blue-100 active:scale-95'), children: [_jsx("span", { children: word }), !isReviewMode && !isExample && (_jsx(X, { className: "h-3 w-3 opacity-60 group-hover:opacity-100" }))] }, `placed-${wordIdx}-${orderIdx}`));
+                                                })), state.placedIndices.length > 0 && !isReviewMode && !isExample && (_jsx("button", { type: "button", onClick: () => handleResetItem(itemIdx), className: "ml-auto inline-flex items-center gap-1 rounded-md p-1 text-xs text-gray-400 hover:bg-white hover:text-gray-700", title: "\u0110\u1EB7t l\u1EA1i", children: _jsx(RotateCcw, { className: "h-3.5 w-3.5" }) }))] }), (!isExample || !isReviewMode) && (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 pt-1", children: item.scrambledWords.map((word, wordIdx) => {
+                                                const isPlaced = state.placedIndices.includes(wordIdx);
+                                                return (_jsx("button", { type: "button", disabled: isReviewMode || isExample || isPlaced, onClick: () => handleWordClick(itemIdx, wordIdx), className: cn('rounded-lg border px-3 py-1 text-xs sm:text-sm font-medium transition-all', isPlaced
+                                                        ? 'border-dashed border-gray-200 bg-gray-100 text-gray-300 opacity-50 cursor-not-allowed'
+                                                        : 'cursor-pointer border-gray-300 bg-white text-gray-800 shadow-xs hover:border-blue-400 hover:bg-blue-50/50 active:scale-95'), children: word }, `word-${wordIdx}`));
+                                            }) })), isReviewMode && !isExample && !isPhraseCorrect && (_jsxs("div", { className: "mt-2 rounded-lg bg-green-50 border border-green-200 p-2.5 text-xs text-green-800", children: [_jsx("span", { className: "font-bold", children: "C\u00E2u \u0111\u00FAng:" }), " ", item.orderedPhrase] }))] }), _jsxs("div", { className: "space-y-3 lg:col-span-4 xl:col-span-3 border-t lg:border-t-0 lg:border-l border-gray-100 pt-3 lg:pt-0 lg:pl-4", children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider", children: "2. Ch\u1ECDn nh\u00E3n n\u1ED1i:" }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: matchOptions.map((opt) => {
+                                                const isSelected = state.selectedLabel === opt;
+                                                const isCorrectOpt = (item.matchLabel || '').trim().toUpperCase() === opt;
+                                                return (_jsx("button", { type: "button", disabled: isReviewMode || isExample, onClick: () => handleLabelSelect(itemIdx, opt), className: cn('h-9 w-9 sm:h-10 sm:w-10 rounded-xl font-bold text-sm transition-all flex items-center justify-center', isReviewMode
+                                                        ? isCorrectOpt
+                                                            ? 'bg-green-600 text-white ring-2 ring-green-300'
                                                             : isSelected
-                                                                ? 'bg-indigo-600 text-white shadow-md scale-105'
-                                                                : 'border border-gray-200 bg-white text-gray-700 hover:border-indigo-300 hover:bg-indigo-50/50 cursor-pointer'), children: opt }, `opt-${opt}`));
-                                                }) }), isReviewMode && !isExample && !isLabelCorrect && (_jsxs("div", { className: "text-xs text-emerald-800", children: [_jsx("span", { className: "font-bold", children: "Nh\u00E3n \u0111\u00FAng:" }), " [", item.matchLabel, "]"] }))] })] })] }, itemIdx));
+                                                                ? 'bg-red-500 text-white line-through'
+                                                                : 'bg-gray-100 text-gray-400 opacity-60'
+                                                        : isSelected
+                                                            ? 'scale-105 border border-blue-500 bg-blue-50 text-blue-800 shadow-md ring-2 ring-blue-100'
+                                                            : 'cursor-pointer border border-gray-200 bg-white text-gray-700 hover:border-blue-300 hover:bg-blue-50/50'), children: opt }, `opt-${opt}`));
+                                            }) }), isReviewMode && !isExample && !isLabelCorrect && (_jsxs("div", { className: "text-xs text-green-800", children: [_jsx("span", { className: "font-bold", children: "Nh\u00E3n \u0111\u00FAng:" }), " [", item.matchLabel, "]"] }))] })] }) }, itemIdx));
                 }) })] }));
 }

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

@@ -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, MoversGridFillRenderer, MoversLabelThePictureRenderer, MoversMatchByWritingAnswerRenderer, MoversMatchWordToPictureRenderer, MoversReadingPassageRenderer, MoversTrueFalseRenderer, MoversTrueFalseCorrectGroupRenderer, MoversFillInBlankGroupRenderer, MoversMatchingWithLinesGroupRenderer, MoversCrossOutWordGroupRenderer, MoversWordFillParagraphRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderingRenderer, MoversWordOrderingGroupRenderer, MoversWriteSentencesRenderer, MoversWritingRenderer, MoversCrosswordPuzzleRenderer, ChooseThenAnswerGroupRenderer, SortWordsIntoCategoriesRenderer, } from '../../../components/exams/take/components/question-renderers';
-import { transformAnswerTheQuestion, transformGridFill, transformLabelPicture, transformMatchByWritingAnswer, transformMatchWordToPicture, transformReadingPassage, transformTrueFalse, transformTrueFalseCorrectGroup, transformFillInBlankGroup, transformMatchingWithLinesGroup, transformWordFillParagraph, transformWordFillStructuredForm, transformWordOrdering, transformWordOrderingGroupTake, transformWriteSentences, transformWriteShortLetter, transformCrosswordPuzzle, transformChooseThenAnswerGroup, transformSortWordsIntoCategories, } from '../../../components/exams/take/utils/question-transformers';
+import { MoversAnswerTheQuestionRenderer, MoversGridFillRenderer, MoversLabelThePictureRenderer, MoversMatchByWritingAnswerRenderer, MoversMatchWordToPictureRenderer, MoversMatchWordToPictureGroupRenderer, MoversReadingPassageRenderer, MoversTrueFalseRenderer, MoversTrueFalseCorrectGroupRenderer, MoversFillInBlankGroupRenderer, MoversMatchingWithLinesGroupRenderer, MoversCrossOutWordGroupRenderer, MoversWordFillParagraphRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderingRenderer, MoversWordOrderingGroupRenderer, MoversWriteSentencesRenderer, MoversWritingRenderer, MoversCrosswordPuzzleRenderer, ChooseThenAnswerGroupRenderer, SortWordsIntoCategoriesRenderer, } from '../../../components/exams/take/components/question-renderers';
+import { transformAnswerTheQuestion, transformGridFill, transformLabelPicture, transformMatchByWritingAnswer, transformMatchWordToPicture, transformMatchWordToPictureGroup, transformReadingPassage, transformTrueFalse, transformTrueFalseCorrectGroup, transformFillInBlankGroup, transformMatchingWithLinesGroup, transformWordFillParagraph, transformWordFillStructuredForm, transformWordOrdering, transformWordOrderingGroupTake, transformWriteSentences, transformWriteShortLetter, transformCrosswordPuzzle, transformChooseThenAnswerGroup, transformSortWordsIntoCategories, } 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;
@@ -183,6 +183,10 @@ export function renderMoversReviewBody(ctx) {
             const data = transformMatchByWritingAnswer(apiQuestions);
             return (_jsx(MoversMatchByWritingAnswerRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: questionCount, audioUrl: part.audioUrl, options: data.options, questions: data.questions, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true, viewMode: data.viewMode, groupImageUrl: data.groupImageUrl, correctAnswerTextMap: correctAnswerTextMap, isCorrectMap: isCorrectMap }));
         }
+        case 'MATCH_WORD_TO_PICTURE_GROUP': {
+            const data = transformMatchWordToPictureGroup(apiQuestions);
+            return (_jsx(MoversMatchWordToPictureGroupRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: data.questions.filter((q) => !q.isExample).length, audioUrl: part.audioUrl, data: data, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true }));
+        }
         case 'MATCH_WORD_TO_PICTURE': {
             const data = transformMatchWordToPicture(apiQuestions);
             return (_jsx(MoversMatchWordToPictureRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: questionCount, wordBank: data.wordBank, questions: data.questions, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true, correctAnswerTextMap: correctAnswerTextMap, isCorrectMap: isCorrectMap }));
@@ -218,7 +222,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

@@ -11,6 +11,7 @@ const FLATTENED_ANSWER_TYPES = new Set([
     'CHOOSE_THEN_ANSWER_GROUP',
     'FILL_IN_BLANK_GROUP',
     'MATCHING_WITH_LINES_GROUP',
+    'MATCH_WORD_TO_PICTURE_GROUP',
 ]);
 export function transformResultAnswersForReview(answers, templateParts = []) {
     const groups = groupAnswers(answers);
@@ -140,13 +141,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)
@@ -275,6 +283,17 @@ function transformStudentAnswer(questionId, questionType, value) {
             typeof item === 'string' ? item : '',
         ]));
     }
+    if (questionType === 'MATCH_WORD_TO_PICTURE_GROUP') {
+        const answer = Array.isArray(record.answer)
+            ? record.answer
+            : Array.isArray(value)
+                ? value
+                : [];
+        return Object.fromEntries(answer.map((item, index) => [
+            `${questionId}-item-${index}`,
+            typeof item === 'string' ? item : '',
+        ]));
+    }
     if (questionType === 'CHOOSE_THE_CORRECT_ANSWER' || questionType === 'CHOOSE_CORRECT_ADJECTIVE') {
         const rawAns = record.answer ?? record.optionId ?? record.optionIds;
         const ids = getOptionIds(questionId, rawAns);