@tinyweb_dev/oe-exam-sdk 1.0.9 → 1.0.10

package/dist/components/questions/types/true-false-correct-group/TrueFalseCorrectGroupClient.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check, CircleHelp, Lightbulb, Star, X } from 'lucide-react';
-import { cn } from '../../../../shared/lib/utils';
+import { Lightbulb } from 'lucide-react';
+import { KidChoiceRow, KidInstruction, KidPrompt, KidQuestionCard } from '../../_shared/components/compact';
 function emptyAnswer() {
     return { isTrue: null, correction: '' };
 }
@@ -16,32 +16,30 @@ export function TrueFalseCorrectGroupClient({ questionData, isReviewMode = false
         next[itemIndex] = nextItem;
         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) => {
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(KidInstruction, { children: questionData.instruction }), items.map((item, itemIndex) => {
                 const correctIsTrue = item.isTrue === true;
                 const userValue = item.isExample
                     ? { isTrue: item.isTrue, correction: item.correction }
                     : userAnswers[itemIndex];
                 const canSelect = !isReviewMode && !item.isExample && Boolean(onAnswerChange);
                 const showStudentCorrection = userValue?.isTrue === false || (isReviewMode && !correctIsTrue);
-                return (_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-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _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"] })] }), _jsxs("div", { className: "space-y-3 p-3", children: [_jsx("p", { className: "text-sm font-semibold leading-relaxed text-gray-800", children: item.question || 'Câu hỏi chưa được nhập' }), _jsx("div", { className: "flex items-center gap-3", children: [
-                                        { value: true, label: 'True' },
-                                        { value: false, label: 'False' },
-                                    ].map((opt) => {
-                                        const isCorrect = opt.value === correctIsTrue;
-                                        const isSelected = userValue?.isTrue === opt.value;
-                                        return (_jsxs("button", { type: "button", disabled: !canSelect, onClick: () => emit(itemIndex, {
-                                                isTrue: opt.value,
-                                                correction: opt.value ? '' : (userValue?.correction || ''),
-                                            }), className: cn('flex flex-1 items-center justify-center gap-2 rounded-lg border-2 px-4 py-2 text-sm font-semibold transition-colors', canSelect ? 'cursor-pointer hover:border-blue-300' : 'cursor-default', isReviewMode && isCorrect
-                                                ? 'border-green-500 bg-green-50 text-green-700'
-                                                : isReviewMode && isSelected && !isCorrect
-                                                    ? 'border-red-500 bg-red-50 text-red-700'
-                                                    : isSelected
-                                                        ? 'border-blue-500 bg-blue-50 text-blue-700'
-                                                        : 'border-gray-200 bg-white text-gray-700'), children: [opt.value ? _jsx(Check, { className: "h-4 w-4" }) : _jsx(X, { className: "h-4 w-4" }), _jsx("span", { children: opt.label })] }, String(opt.value)));
-                                    }) }), showStudentCorrection && canSelect ? (_jsxs("div", { className: "rounded-lg border border-slate-200 bg-white px-3 py-2", children: [_jsx("label", { className: "mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500", children: "Correct the false sentence" }), _jsx("textarea", { value: userValue?.correction || '', onChange: (event) => emit(itemIndex, {
-                                                isTrue: false,
-                                                correction: event.target.value,
-                                            }), placeholder: "Write the correct sentence...", rows: 2, className: "w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800 outline-none ring-blue-200 focus:border-blue-400 focus:ring-2" })] })) : null, isReviewMode && !correctIsTrue ? (_jsxs("div", { className: "rounded-lg border border-amber-100 bg-amber-50/70 px-3 py-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-amber-800", children: "C\u00E2u \u0111\u00FAng" }), _jsx("p", { className: "mt-1 text-sm text-amber-900", children: item.correction || 'Chưa nhập câu sửa' }), userValue && userValue.isTrue === false ? (_jsxs("p", { className: "mt-2 text-xs text-slate-600", children: ["H\u1ECDc sinh: ", userValue.correction || '(trống)'] })) : null] })) : null] })] }, `${item.questionNumber}-${itemIndex}`));
+                const hasAnswered = userValue?.isTrue === true || userValue?.isTrue === false;
+                const isAnswerCorrect = userValue?.isTrue === correctIsTrue;
+                return (_jsxs(KidQuestionCard, { title: `Câu ${item.questionNumber || itemIndex + 1}`, points: item.points || 0, isExample: item.isExample, review: isReviewMode && !item.isExample && hasAnswered
+                        ? (isAnswerCorrect ? 'correct' : 'wrong')
+                        : null, children: [_jsx(KidPrompt, { children: item.question || 'Câu hỏi chưa được nhập' }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(KidChoiceRow, { letter: "T", selected: userValue?.isTrue === true, isReviewMode: isReviewMode, isCorrect: isReviewMode && correctIsTrue, disabled: !canSelect, onClick: canSelect
+                                        ? () => emit(itemIndex, {
+                                            isTrue: true,
+                                            correction: '',
+                                        })
+                                        : undefined, children: "\u0110\u00FAng" }), _jsx(KidChoiceRow, { letter: "F", selected: userValue?.isTrue === false, isReviewMode: isReviewMode, isCorrect: isReviewMode && !correctIsTrue, disabled: !canSelect, onClick: canSelect
+                                        ? () => emit(itemIndex, {
+                                            isTrue: false,
+                                            correction: userValue?.correction || '',
+                                        })
+                                        : undefined, children: "Sai" })] }), showStudentCorrection && canSelect ? (_jsxs("div", { className: "rounded-lg border border-slate-200 bg-white px-3 py-2", children: [_jsx("label", { className: "mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500", children: "S\u1EEDa c\u00E2u sai" }), _jsx("textarea", { value: userValue?.correction || '', onChange: (event) => emit(itemIndex, {
+                                        isTrue: false,
+                                        correction: event.target.value,
+                                    }), placeholder: "Vi\u1EBFt c\u00E2u \u0111\u00FAng...", rows: 2, className: "w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800 outline-none ring-blue-200 focus:border-blue-400 focus:ring-2" })] })) : null, isReviewMode && !correctIsTrue ? (_jsxs("div", { className: "rounded-lg border border-amber-100 bg-amber-50/70 px-3 py-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-amber-800", children: "C\u00E2u \u0111\u00FAng" }), _jsx("p", { className: "mt-1 text-sm text-amber-900", children: item.correction || 'Chưa nhập câu sửa' }), userValue && userValue.isTrue === false ? (_jsxs("p", { className: "mt-2 text-xs text-slate-600", children: ["H\u1ECDc sinh: ", userValue.correction || '(trống)'] })) : null] })) : null] }, `${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/true-false-group/TrueFalseGroupClient.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check, CircleHelp, Lightbulb, Star, X } from 'lucide-react';
-import { cn } from '../../../../shared/lib/utils';
+import { Lightbulb } from 'lucide-react';
+import { KidChoiceRow, KidInstruction, KidPrompt, KidQuestionCard } from '../../_shared/components/compact';
 export function TrueFalseGroupClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, }) {
     const items = questionData.items || [];
     const handleSelect = (itemIndex, value) => {
@@ -13,23 +13,14 @@ export function TrueFalseGroupClient({ questionData, isReviewMode = false, userA
         next[itemIndex] = value;
         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) => {
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(KidInstruction, { children: questionData.instruction }), items.map((item, itemIndex) => {
                 const userValue = item.isExample ? item.correctAnswer : userAnswers[itemIndex];
                 const correctAnswer = item.correctAnswer;
                 const canSelect = !isReviewMode && !item.isExample && Boolean(onAnswerChange);
-                return (_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-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _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"] })] }), _jsxs("div", { className: "space-y-3 p-3", children: [_jsx("p", { className: "text-sm font-semibold leading-relaxed text-gray-800", children: item.question || 'Câu hỏi chưa được nhập' }), _jsx("div", { className: "flex items-center gap-3", children: [
-                                        { value: true, label: 'True' },
-                                        { value: false, label: 'False' },
-                                    ].map((opt) => {
-                                        const isCorrect = opt.value === correctAnswer;
-                                        const isSelected = opt.value === userValue;
-                                        return (_jsxs("button", { type: "button", disabled: !canSelect, onClick: () => handleSelect(itemIndex, opt.value), className: cn('flex flex-1 items-center justify-center gap-2 rounded-lg border-2 px-4 py-2 text-sm font-semibold transition-colors', canSelect ? 'cursor-pointer hover:border-blue-300' : 'cursor-default', isReviewMode && isCorrect
-                                                ? 'border-green-500 bg-green-50 text-green-700'
-                                                : isReviewMode && isSelected && !isCorrect
-                                                    ? 'border-red-500 bg-red-50 text-red-700'
-                                                    : isSelected
-                                                        ? 'border-blue-500 bg-blue-50 text-blue-700'
-                                                        : 'border-gray-200 bg-white text-gray-700'), children: [opt.value ? _jsx(Check, { className: "h-4 w-4" }) : _jsx(X, { className: "h-4 w-4" }), _jsx("span", { children: opt.label })] }, String(opt.value)));
-                                    }) })] })] }, `${item.questionNumber}-${itemIndex}`));
+                const hasAnswered = userValue !== undefined;
+                const isAnswerCorrect = userValue === correctAnswer;
+                return (_jsxs(KidQuestionCard, { title: `Câu ${item.questionNumber || itemIndex + 1}`, points: item.points || 0, isExample: item.isExample, review: isReviewMode && !item.isExample && hasAnswered
+                        ? (isAnswerCorrect ? 'correct' : 'wrong')
+                        : null, children: [_jsx(KidPrompt, { children: item.question || 'Câu hỏi chưa được nhập' }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(KidChoiceRow, { letter: "T", selected: userValue === true, isReviewMode: isReviewMode, isCorrect: isReviewMode && correctAnswer === true, disabled: !canSelect, onClick: canSelect ? () => handleSelect(itemIndex, true) : undefined, children: "\u0110\u00FAng" }), _jsx(KidChoiceRow, { letter: "F", selected: userValue === false, isReviewMode: isReviewMode, isCorrect: isReviewMode && correctAnswer === false, disabled: !canSelect, onClick: canSelect ? () => handleSelect(itemIndex, false) : undefined, children: "Sai" })] })] }, `${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/word-fill-paragraph/WordFillParagraphClient.js

@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback, useMemo } from 'react';
 import { Check, X, FileText, Star, Mail } from 'lucide-react';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
 import { cn } from '../../../../shared/lib/utils';
+import { KidPrompt, KidQuestionCard } from '../../_shared/components/compact';
 function parseParagraph(paragraph) {
     const segments = [];
     const regex = /\{(\d+)\}/g;
@@ -144,90 +145,84 @@ export function WordFillParagraphClient({ questionData, onSubmit, isReviewMode =
             .map(idx => ({ blankIdx: idx, answer: answers[idx] || '' }))
             .filter(e => e.answer);
     }, [allBlanks, isExampleBlank, answers]);
-    // ── Render ────────────────────────────────────────────────────────────────
-    const headerGradient = withOptions
-        ? 'bg-gradient-to-br from-emerald-500 to-teal-600'
-        : isDefaultMode
-            ? 'bg-gradient-to-br from-indigo-500 to-blue-600'
-            : 'bg-gradient-to-br from-teal-500 to-cyan-600';
-    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-3", children: [_jsx("div", { className: `flex h-8 w-8 items-center justify-center rounded-lg ${headerGradient} text-white shadow-sm`, children: _jsx(FileText, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "\u0110i\u1EC1n t\u1EEB v\u00E0o \u0111o\u1EA1n v\u0103n" })] }), isReviewMode && allFilled && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isAllCorrect ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'), children: [isAllCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), isAllCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "space-y-3 p-3", children: [title && (_jsx("h2", { className: "text-center text-xl font-bold text-gray-900", children: title })), exampleEntries.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 px-4 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-xs font-semibold text-amber-700 shrink-0", children: [_jsx(Star, { className: "h-3.5 w-3.5 fill-amber-400 text-amber-400" }), "\u0110\u00E3 \u0111i\u1EC1n s\u1EB5n (Example):"] }), exampleEntries.map(({ blankIdx, answer }) => (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-md border border-amber-300 bg-white px-2 py-0.5 text-xs font-semibold text-amber-800", children: [_jsx("span", { className: "text-amber-500", children: '{' + blankIdx + '}' }), answer] }, blankIdx)))] })), (imagePreviewUrl || imageUrl) && (_jsx("div", { className: "flex justify-center", children: _jsx("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gray-50", children: imageLoading ? (_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-teal-500" }) })) : (_jsx("img", { src: imagePreviewUrl || imageUrl, alt: title, className: "max-h-56 w-auto object-contain p-2" })) }) })), _jsxs("div", { className: (emailFrom || emailTo)
-                                ? 'overflow-hidden rounded-xl border border-gray-300 bg-white shadow-sm'
-                                : 'rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50', children: [(emailFrom || emailTo) && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-1.5 border-b border-gray-200 bg-gray-100 px-4 py-2.5", children: [_jsx("span", { className: "h-3 w-3 rounded-full bg-red-400" }), _jsx("span", { className: "h-3 w-3 rounded-full bg-yellow-400" }), _jsx("span", { className: "h-3 w-3 rounded-full bg-green-400" }), _jsxs("div", { className: "ml-3 flex items-center gap-1.5 text-xs text-gray-400", children: [_jsx(Mail, { className: "h-3.5 w-3.5" }), _jsx("span", { children: "Email" })] })] }), _jsxs("div", { className: "border-b border-gray-200 bg-gray-50 px-3 py-2 space-y-1.5 text-sm", children: [emailFrom && (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "w-10 shrink-0 text-xs font-semibold uppercase tracking-wide text-gray-400", children: "From" }), _jsx("span", { className: "font-medium text-gray-800", children: emailFrom })] })), emailTo && (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "w-10 shrink-0 text-xs font-semibold uppercase tracking-wide text-gray-400", children: "To" }), _jsx("span", { className: "font-medium text-gray-800", children: emailTo })] }))] })] })), _jsx("div", { className: `text-base leading-loose text-gray-800 whitespace-pre-wrap ${(emailFrom || emailTo) ? 'p-5 bg-white' : 'p-5 bg-gradient-to-r from-gray-50 to-slate-50'}`, children: segments.map((segment, idx) => {
-                                        if (segment.type === 'text') {
-                                            return _jsx("span", { children: segment.value }, idx);
-                                        }
-                                        const blankIdx = segment.index;
-                                        const filled = filledAnswers[blankIdx];
-                                        const isCorrectFill = isReviewMode && filled === answers[blankIdx];
-                                        const isWrongFill = isReviewMode && !!filled && filled !== answers[blankIdx];
-                                        const example = isExampleBlank(blankIdx);
-                                        // ── Example blank: always shown pre-filled ──────────────────
-                                        if (example) {
-                                            return _jsx(ExampleBadge, { text: answers[blankIdx] || '___' }, idx);
-                                        }
-                                        // ── WITH_OPTIONS blank ──────────────────────────────────────
-                                        if (withOptions) {
-                                            const isExpanded = expandedBlank === blankIdx;
-                                            const blankOptions = wordBank[blankIdx]?.options || [];
-                                            return (_jsxs("span", { className: "relative mx-1 inline-flex flex-col items-center align-middle", children: [_jsxs("button", { type: "button", onClick: () => !isReviewMode && setExpandedBlank(isExpanded ? null : blankIdx), disabled: isReviewMode, className: cn('inline-flex min-w-[80px] items-center rounded border-2 border-dashed px-3 py-0.5 text-center text-sm font-semibold transition-all', isReviewMode
-                                                            ? isCorrectFill
-                                                                ? 'border-green-400 bg-green-50 text-green-800'
-                                                                : isWrongFill
-                                                                    ? 'border-red-400 bg-red-50 text-red-800'
-                                                                    : 'border-gray-300 bg-gray-50 text-gray-400'
-                                                            : isExpanded
-                                                                ? 'border-teal-500 bg-teal-50 text-teal-700 ring-2 ring-teal-200'
-                                                                : filled
-                                                                    ? 'cursor-pointer border-teal-300 bg-teal-50 text-teal-700 hover:bg-teal-100'
-                                                                    : 'cursor-pointer border-gray-300 bg-white text-gray-400 hover:border-teal-300 hover:bg-teal-50'), children: [filled || `(${blankIdx + 1})`, isReviewMode && filled && (isCorrectFill
-                                                                ? _jsx(Check, { className: "ml-1 h-3.5 w-3.5 text-green-600" })
-                                                                : _jsx(X, { className: "ml-1 h-3.5 w-3.5 text-red-600" }))] }), isExpanded && !isReviewMode && blankOptions.length > 0 && (_jsx("div", { className: "absolute left-1/2 top-full z-10 mt-1 flex -translate-x-1/2 gap-1 rounded-lg border border-teal-200 bg-white p-1.5 shadow-lg", children: blankOptions.map((opt, optIdx) => (_jsx("button", { type: "button", onClick: (e) => {
-                                                                e.stopPropagation();
-                                                                handleSelectOption(blankIdx, opt);
-                                                                setExpandedBlank(null);
-                                                            }, className: cn('whitespace-nowrap rounded-md px-2.5 py-1 text-sm font-medium transition-all', filled === opt
-                                                                ? 'bg-teal-500 text-white'
-                                                                : 'bg-gray-50 text-gray-700 hover:bg-teal-100 hover:text-teal-700'), children: opt }, optIdx))) }))] }, idx));
-                                        }
-                                        // ── WITH_WORD_BANK or DEFAULT blank ─────────────────────────
-                                        if (isDefaultMode) {
-                                            // DEFAULT: read-only inputs in review, otherwise show filled/empty state
-                                            return (_jsxs("span", { className: cn('mx-1 inline-flex min-w-[80px] items-center justify-center rounded border-2 px-3 py-0.5 text-sm font-semibold align-middle', isReviewMode
+    return (_jsx("div", { className: "space-y-4", children: _jsxs(KidQuestionCard, { icon: _jsx(FileText, { className: "h-3.5 w-3.5" }), title: "\u0110i\u1EC1n t\u1EEB v\u00E0o \u0111o\u1EA1n v\u0103n", points: questionData.points, isExample: questionData.isExample, review: isReviewMode && allFilled ? (isAllCorrect ? 'correct' : 'wrong') : null, children: [title && (_jsx(KidPrompt, { children: _jsx("h2", { className: "text-sm font-semibold text-gray-800", children: title }) })), exampleEntries.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 px-4 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-xs font-semibold text-amber-700 shrink-0", children: [_jsx(Star, { className: "h-3.5 w-3.5 fill-amber-400 text-amber-400" }), "\u0110\u00E3 \u0111i\u1EC1n s\u1EB5n (Example):"] }), exampleEntries.map(({ blankIdx, answer }) => (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-md border border-amber-300 bg-white px-2 py-0.5 text-xs font-semibold text-amber-800", children: [_jsx("span", { className: "text-amber-500", children: '{' + blankIdx + '}' }), answer] }, blankIdx)))] })), (imagePreviewUrl || imageUrl) && (_jsx("div", { className: "flex justify-center", children: _jsx("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gray-50", children: imageLoading ? (_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-teal-500" }) })) : (_jsx("img", { src: imagePreviewUrl || imageUrl, alt: title, className: "max-h-56 w-auto object-contain p-2" })) }) })), _jsxs("div", { className: (emailFrom || emailTo)
+                        ? 'overflow-hidden rounded-xl border border-gray-300 bg-white shadow-sm'
+                        : 'rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50', children: [(emailFrom || emailTo) && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-1.5 border-b border-gray-200 bg-gray-100 px-4 py-2.5", children: [_jsx("span", { className: "h-3 w-3 rounded-full bg-red-400" }), _jsx("span", { className: "h-3 w-3 rounded-full bg-yellow-400" }), _jsx("span", { className: "h-3 w-3 rounded-full bg-green-400" }), _jsxs("div", { className: "ml-3 flex items-center gap-1.5 text-xs text-gray-400", children: [_jsx(Mail, { className: "h-3.5 w-3.5" }), _jsx("span", { children: "Email" })] })] }), _jsxs("div", { className: "border-b border-gray-200 bg-gray-50 px-3 py-2 space-y-1.5 text-sm", children: [emailFrom && (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "w-10 shrink-0 text-xs font-semibold uppercase tracking-wide text-gray-400", children: "From" }), _jsx("span", { className: "font-medium text-gray-800", children: emailFrom })] })), emailTo && (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "w-10 shrink-0 text-xs font-semibold uppercase tracking-wide text-gray-400", children: "To" }), _jsx("span", { className: "font-medium text-gray-800", children: emailTo })] }))] })] })), _jsx("div", { className: `text-base leading-loose text-gray-800 whitespace-pre-wrap ${(emailFrom || emailTo) ? 'p-5 bg-white' : 'p-5 bg-gradient-to-r from-gray-50 to-slate-50'}`, children: segments.map((segment, idx) => {
+                                if (segment.type === 'text') {
+                                    return _jsx("span", { children: segment.value }, idx);
+                                }
+                                const blankIdx = segment.index;
+                                const filled = filledAnswers[blankIdx];
+                                const isCorrectFill = isReviewMode && filled === answers[blankIdx];
+                                const isWrongFill = isReviewMode && !!filled && filled !== answers[blankIdx];
+                                const example = isExampleBlank(blankIdx);
+                                // ── Example blank: always shown pre-filled ──────────────────
+                                if (example) {
+                                    return _jsx(ExampleBadge, { text: answers[blankIdx] || '___' }, idx);
+                                }
+                                // ── WITH_OPTIONS blank ──────────────────────────────────────
+                                if (withOptions) {
+                                    const isExpanded = expandedBlank === blankIdx;
+                                    const blankOptions = wordBank[blankIdx]?.options || [];
+                                    return (_jsxs("span", { className: "relative mx-1 inline-flex flex-col items-center align-middle", children: [_jsxs("button", { type: "button", onClick: () => !isReviewMode && setExpandedBlank(isExpanded ? null : blankIdx), disabled: isReviewMode, className: cn('inline-flex min-w-[80px] items-center rounded-md border border-dashed px-3 py-1.5 text-center text-sm font-semibold transition-all', isReviewMode
                                                     ? isCorrectFill
                                                         ? 'border-green-400 bg-green-50 text-green-800'
                                                         : isWrongFill
                                                             ? 'border-red-400 bg-red-50 text-red-800'
-                                                            : 'border-dashed border-gray-300 bg-gray-50 text-gray-400'
-                                                    : filled
-                                                        ? 'border-indigo-300 bg-indigo-50 text-indigo-800'
-                                                        : 'border-dashed border-gray-300 bg-white text-gray-400'), children: [filled || `(${blankIdx + 1})`, isReviewMode && filled && (isCorrectFill
-                                                        ? _jsx(Check, { className: "ml-1 h-3.5 w-3.5 text-green-600" })
-                                                        : _jsx(X, { className: "ml-1 h-3.5 w-3.5 text-red-600" }))] }, idx));
-                                        }
-                                        // WITH_WORD_BANK input field
-                                        return (_jsxs("span", { className: "mx-1 inline-flex items-center align-middle", children: [_jsx("input", { type: "text", value: filled || '', onChange: (e) => handleInputChange(blankIdx, e.target.value), disabled: isReviewMode, placeholder: `(${blankIdx + 1})`, className: cn('inline-flex min-w-[80px] max-w-[120px] rounded border-2 border-dashed px-3 py-0.5 text-center text-sm font-semibold transition-all outline-none', isReviewMode
-                                                        ? isCorrectFill
-                                                            ? 'border-green-400 bg-green-50 text-green-800'
-                                                            : isWrongFill
-                                                                ? 'border-red-400 bg-red-50 text-red-800'
-                                                                : 'border-gray-300 bg-gray-50 text-gray-400'
+                                                            : 'border-gray-300 bg-gray-50 text-gray-400'
+                                                    : isExpanded
+                                                        ? 'border-teal-500 bg-teal-50 text-teal-700 ring-2 ring-teal-200'
                                                         : filled
-                                                            ? 'border-teal-300 bg-teal-50 text-teal-700'
-                                                            : 'border-gray-300 bg-white text-gray-400 placeholder:text-gray-300', 'focus:border-teal-500 focus:bg-teal-50 focus:text-teal-700 focus:ring-2 focus:ring-teal-200', isReviewMode ? 'cursor-default' : 'cursor-text') }), isReviewMode && filled && (_jsx("span", { className: "ml-1", children: isCorrectFill
-                                                        ? _jsx(Check, { className: "h-3.5 w-3.5 text-green-600" })
-                                                        : _jsx(X, { className: "h-3.5 w-3.5 text-red-600" }) }))] }, idx));
-                                    }) })] }), !withOptions && !isDefaultMode && (_jsxs("div", { className: "space-y-2", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-gray-500", children: "Word Bank (Reference)" }), _jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", children: wordBank.map((item, index) => {
-                                        const isUsed = usedWords.has(item.word);
-                                        const isExampleWord = item.isExample;
-                                        const hasImage = item.imageUrl && item.imageUrl.trim() !== '';
-                                        return (_jsxs("div", { className: cn('flex flex-col items-center gap-2 rounded-xl border-2 p-3', isExampleWord
-                                                ? 'border-amber-300 bg-amber-50'
-                                                : isUsed
-                                                    ? 'border-emerald-200 bg-emerald-50 opacity-60'
-                                                    : 'border-gray-200 bg-gray-50'), children: [hasImage && _jsx(WordBankImage, { imageUrl: item.imageUrl }), _jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx("span", { className: cn('text-sm font-semibold', isExampleWord ? 'text-amber-700' : isUsed ? 'text-emerald-700' : 'text-gray-700'), children: item.word }), isExampleWord && (_jsxs("span", { className: "flex items-center gap-0.5 rounded-full bg-amber-100 px-1.5 py-0.5 text-[10px] font-semibold text-amber-600", children: [_jsx(Star, { className: "h-2.5 w-2.5 fill-amber-400 text-amber-400" }), "example"] })), isUsed && !isExampleWord && (_jsx("span", { className: "flex items-center gap-0.5 rounded-full bg-emerald-100 px-1.5 py-0.5 text-[10px] font-semibold text-emerald-600", children: "used" }))] })] }, index));
-                                    }) })] })), isReviewMode && !isAllCorrect && (_jsxs("div", { className: "rounded-lg border border-green-200 bg-green-50 p-3", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-green-600", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: answers.map((answer, index) => {
-                                        if (isExampleBlank(index))
-                                            return null;
-                                        return (_jsxs("span", { className: "rounded-lg border border-green-300 bg-green-100 px-3 py-1.5 text-sm font-semibold text-green-800", children: ['{' + index + '}', ": ", answer] }, 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 uppercase tracking-wider text-blue-600", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-blue-800", children: displayExplanation })] }))] })] }) }));
+                                                            ? 'cursor-pointer border-teal-300 bg-teal-50 text-teal-700 hover:bg-teal-100'
+                                                            : 'cursor-pointer border-gray-300 bg-white text-gray-400 hover:border-teal-300 hover:bg-teal-50'), children: [filled || `(${blankIdx + 1})`, isReviewMode && filled && (isCorrectFill
+                                                        ? _jsx(Check, { className: "ml-1 h-3.5 w-3.5 text-green-600" })
+                                                        : _jsx(X, { className: "ml-1 h-3.5 w-3.5 text-red-600" }))] }), isExpanded && !isReviewMode && blankOptions.length > 0 && (_jsx("div", { className: "absolute left-1/2 top-full z-10 mt-1 flex -translate-x-1/2 gap-1 rounded-lg border border-teal-200 bg-white p-1.5 shadow-lg", children: blankOptions.map((opt, optIdx) => (_jsx("button", { type: "button", onClick: (e) => {
+                                                        e.stopPropagation();
+                                                        handleSelectOption(blankIdx, opt);
+                                                        setExpandedBlank(null);
+                                                    }, className: cn('whitespace-nowrap rounded-md px-2.5 py-1 text-sm font-medium transition-all', filled === opt
+                                                        ? 'bg-teal-500 text-white'
+                                                        : 'bg-gray-50 text-gray-700 hover:bg-teal-100 hover:text-teal-700'), children: opt }, optIdx))) }))] }, idx));
+                                }
+                                // ── WITH_WORD_BANK or DEFAULT blank ─────────────────────────
+                                if (isDefaultMode) {
+                                    // DEFAULT: read-only inputs in review, otherwise show filled/empty state
+                                    return (_jsxs("span", { className: cn('mx-1 inline-flex min-w-[80px] items-center justify-center rounded-md border px-3 py-1.5 text-sm font-semibold align-middle', isReviewMode
+                                            ? isCorrectFill
+                                                ? 'border-green-400 bg-green-50 text-green-800'
+                                                : isWrongFill
+                                                    ? 'border-red-400 bg-red-50 text-red-800'
+                                                    : 'border-dashed border-gray-300 bg-gray-50 text-gray-400'
+                                            : filled
+                                                ? 'border-indigo-300 bg-indigo-50 text-indigo-800'
+                                                : 'border-dashed border-gray-300 bg-white text-gray-400'), children: [filled || `(${blankIdx + 1})`, isReviewMode && filled && (isCorrectFill
+                                                ? _jsx(Check, { className: "ml-1 h-3.5 w-3.5 text-green-600" })
+                                                : _jsx(X, { className: "ml-1 h-3.5 w-3.5 text-red-600" }))] }, idx));
+                                }
+                                // WITH_WORD_BANK input field
+                                return (_jsxs("span", { className: "mx-1 inline-flex items-center align-middle", children: [_jsx("input", { type: "text", value: filled || '', onChange: (e) => handleInputChange(blankIdx, e.target.value), disabled: isReviewMode, placeholder: `(${blankIdx + 1})`, className: cn('inline-flex min-w-[80px] max-w-[120px] rounded-md border border-dashed px-3 py-1.5 text-center text-sm font-semibold transition-all outline-none', isReviewMode
+                                                ? isCorrectFill
+                                                    ? 'border-green-400 bg-green-50 text-green-800'
+                                                    : isWrongFill
+                                                        ? 'border-red-400 bg-red-50 text-red-800'
+                                                        : 'border-gray-300 bg-gray-50 text-gray-400'
+                                                : filled
+                                                    ? 'border-teal-300 bg-teal-50 text-teal-700'
+                                                    : 'border-gray-300 bg-white text-gray-400 placeholder:text-gray-300', 'focus:border-teal-500 focus:bg-teal-50 focus:text-teal-700 focus:ring-2 focus:ring-teal-200', isReviewMode ? 'cursor-default' : 'cursor-text') }), isReviewMode && filled && (_jsx("span", { className: "ml-1", children: isCorrectFill
+                                                ? _jsx(Check, { className: "h-3.5 w-3.5 text-green-600" })
+                                                : _jsx(X, { className: "h-3.5 w-3.5 text-red-600" }) }))] }, idx));
+                            }) })] }), !withOptions && !isDefaultMode && (_jsxs("div", { className: "space-y-2", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-gray-500", children: "Word Bank (Reference)" }), _jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", children: wordBank.map((item, index) => {
+                                const isUsed = usedWords.has(item.word);
+                                const isExampleWord = item.isExample;
+                                const hasImage = item.imageUrl && item.imageUrl.trim() !== '';
+                                return (_jsxs("div", { className: cn('flex flex-col items-center gap-2 rounded-xl border-2 p-3', isExampleWord
+                                        ? 'border-amber-300 bg-amber-50'
+                                        : isUsed
+                                            ? 'border-emerald-200 bg-emerald-50 opacity-60'
+                                            : 'border-gray-200 bg-gray-50'), children: [hasImage && _jsx(WordBankImage, { imageUrl: item.imageUrl }), _jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx("span", { className: cn('text-sm font-semibold', isExampleWord ? 'text-amber-700' : isUsed ? 'text-emerald-700' : 'text-gray-700'), children: item.word }), isExampleWord && (_jsxs("span", { className: "flex items-center gap-0.5 rounded-full bg-amber-100 px-1.5 py-0.5 text-[10px] font-semibold text-amber-600", children: [_jsx(Star, { className: "h-2.5 w-2.5 fill-amber-400 text-amber-400" }), "example"] })), isUsed && !isExampleWord && (_jsx("span", { className: "flex items-center gap-0.5 rounded-full bg-emerald-100 px-1.5 py-0.5 text-[10px] font-semibold text-emerald-600", children: "used" }))] })] }, index));
+                            }) })] })), isReviewMode && !isAllCorrect && (_jsxs("div", { className: "rounded-lg border border-green-200 bg-green-50 p-3", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-green-600", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: answers.map((answer, index) => {
+                                if (isExampleBlank(index))
+                                    return null;
+                                return (_jsxs("span", { className: "rounded-lg border border-green-300 bg-green-100 px-3 py-1.5 text-sm font-semibold text-green-800", children: ['{' + index + '}', ": ", answer] }, 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 uppercase tracking-wider text-blue-600", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-blue-800", children: displayExplanation })] }))] }) }));
 }

package/dist/components/questions/types/word-fill-structured-form/WordFillStructuredFormClient.js

@@ -4,6 +4,7 @@ import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { Check, X, FileText, Library } from 'lucide-react';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
 import { cn } from '../../../../shared/lib/utils';
+import { KidInstruction, KidPrompt, KidQuestionCard } from '../../_shared/components/compact';
 import { detectWfsfBankMode, isOptionsWordEntry, normalizeSharedWordBank, } from './wfsf-word-bank.utils';
 import { expandWfsfCorrectAlts, formatWfsfCorrectLabel, isWfsfBlankCorrect, primaryWfsfAnswers, } from '../../../../shared/lib/utils/wfsf-blank-match';
 function normalizeWfsfBlankStyle(raw) {
@@ -160,11 +161,11 @@ export function WordFillStructuredFormClient({ questionData, isReviewMode = fals
         const blankOptions = optionsByKey.get(key);
         if (bankMode === 'WITH_OPTIONS' && blankOptions && blankOptions.length >= 2) {
             const isExpanded = expandedBlank === key;
-            return (_jsxs("span", { className: "relative mx-1 inline-flex flex-col items-center align-baseline", children: [_jsxs("button", { type: "button", onClick: () => !isReviewMode && setExpandedBlank(isExpanded ? null : key), disabled: isReviewMode, className: cn('inline-flex min-w-[90px] items-center justify-center rounded border-2 border-dashed px-2 py-0.5 text-center text-sm font-semibold transition-all', isReviewMode
+            return (_jsxs("span", { className: "relative mx-1 inline-flex flex-col items-center align-baseline", children: [_jsxs("button", { type: "button", onClick: () => !isReviewMode && setExpandedBlank(isExpanded ? null : key), disabled: isReviewMode, className: cn('inline-flex min-w-[90px] items-center justify-center rounded-md border border-dashed px-3 py-1.5 text-center text-sm font-semibold transition-all', isReviewMode
                             ? isCorrectFill
-                                ? 'border-emerald-500 bg-emerald-50 text-emerald-800'
+                                ? 'border-green-400 bg-green-50 text-green-800'
                                 : isWrongFill
-                                    ? 'border-rose-500 bg-rose-50 text-rose-800'
+                                    ? 'border-red-400 bg-red-50 text-red-800'
                                     : 'border-amber-500 bg-amber-50 text-amber-800'
                             : 'border-teal-400 bg-teal-50/50 text-teal-800 hover:bg-teal-50'), children: [filled || `{${key}}`, isReviewMode && filled && (isCorrectFill
                                 ? _jsx(Check, { className: "ml-0.5 h-3.5 w-3.5 text-green-600" })
@@ -175,14 +176,14 @@ export function WordFillStructuredFormClient({ questionData, isReviewMode = fals
         return (_jsxs("span", { className: "relative mx-1 inline-flex items-baseline align-baseline", children: [_jsx("span", { className: "absolute -top-4 left-1 text-[10px] font-semibold text-gray-400", children: key }), _jsx("input", { type: "text", value: filled, onChange: (e) => handleInputChange(key, e.target.value), disabled: isReviewMode, placeholder: "", maxLength: isLetterBlank
                         ? Math.max(1, expandWfsfCorrectAlts(answers[key]).reduce((max, alt) => Math.max(max, alt.trim().length), 0) || 1)
                         : undefined, size: isLetterBlank ? undefined : isPhraseBlank ? 28 : 10, className: cn('inline-block bg-slate-50/40 text-center text-sm font-semibold outline-none transition-all align-baseline hover:bg-slate-100/60 focus:bg-teal-50/60 focus:ring-0', isLetterBlank
-                        ? 'h-7 w-7 rounded border-2 px-0 uppercase'
+                        ? 'h-7 w-7 rounded-md border px-0 uppercase'
                         : isPhraseBlank
-                            ? 'min-w-[16rem] max-w-[36rem] w-[28ch] rounded-t border-b-2 px-2 py-0.5'
-                            : 'min-w-[4.5rem] max-w-[8rem] w-[10ch] rounded-t border-b-2 px-1 py-0.5', isReviewMode
+                            ? 'min-w-[16rem] max-w-[36rem] w-[28ch] rounded-md border px-3 py-1.5'
+                            : 'min-w-[4.5rem] max-w-[8rem] w-[10ch] rounded-md border px-3 py-1.5', isReviewMode
                         ? isCorrectFill
-                            ? 'border-emerald-500 bg-emerald-50 text-emerald-800 font-bold'
+                            ? 'border-green-400 bg-green-50 text-green-800'
                             : isWrongFill
-                                ? 'border-rose-500 bg-rose-50 text-rose-800 font-bold'
+                                ? 'border-red-400 bg-red-50 text-red-800'
                                 : 'border-amber-500 bg-amber-50 text-amber-800'
                         : 'border-slate-400 text-slate-800 focus:border-teal-600'), style: isLetterBlank
                         ? {
@@ -277,12 +278,12 @@ export function WordFillStructuredFormClient({ questionData, isReviewMode = fals
             .map((node, index) => renderNode(node, `root-${index}`))
             .filter((node) => node !== null);
     }, [content, renderBlank]);
-    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 gap-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-3 py-2", children: [_jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [_jsx("div", { className: "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-teal-500 to-cyan-600 text-white shadow-sm", children: _jsx(FileText, { className: "h-4 w-4" }) }), _jsxs("div", { className: "min-w-0", children: [typeof questionNumber === 'number' && questionNumber > 0 ? (_jsxs("p", { className: "text-[11px] font-semibold uppercase tracking-wider text-teal-700", children: ["B\u00E0i ", questionNumber] })) : null, _jsx("span", { className: "block text-sm font-medium leading-snug text-gray-800", children: headerLabel })] })] }), isReviewMode && allFilled && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isAllCorrect ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'), children: [isAllCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), isAllCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "space-y-3 p-3", children: [title && (_jsx("h2", { className: "text-center text-xl font-bold text-gray-900", children: title })), allAudios.length > 0 && (_jsx("div", { className: "flex flex-col items-center gap-2", children: allAudios.map((audio, idx) => (_jsx(ClientAudioItem, { url: audio }, idx))) })), allImages.length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: allImages.map((img, idx) => (_jsx(ClientImageItem, { url: img, alt: title ? `${title} (${idx + 1})` : undefined }, idx))) })), bankMode === 'WITH_WORD_BANK' && sharedWords.length > 0 && (_jsxs("div", { className: "rounded-lg border border-purple-200 bg-gradient-to-r from-purple-50 to-pink-50 p-3", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx(Library, { className: "h-4 w-4 text-purple-600" }), _jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-purple-700", children: "Word Bank" })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: sharedWords.map((item, index) => {
-                                        const used = usedSharedWords.has(item.word.trim().toLowerCase());
-                                        return (_jsxs("span", { className: cn('rounded-full border px-3 py-1 text-sm font-medium', item.isExample
-                                                ? 'border-amber-300 bg-amber-100 text-amber-800'
-                                                : used
-                                                    ? 'border-purple-200 bg-white/60 text-purple-400 line-through'
-                                                    : 'border-purple-300 bg-white text-purple-800'), children: [item.word, item.isExample ? ' (ex)' : ''] }, `${item.word}-${index}`));
-                                    }) })] })), _jsx("div", { className: "structured-form-content space-y-2 rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-5 text-base leading-loose text-gray-800", children: renderedContent }), isReviewMode && !isAllCorrect && (_jsxs("div", { className: "rounded-lg border border-green-200 bg-green-50 p-3", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-green-600", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: expectedBlankKeys.map((key) => (_jsxs("span", { className: "rounded-lg border border-green-300 bg-green-100 px-3 py-1.5 text-sm font-semibold text-green-800", children: [`{${key}}`, ": ", formatWfsfCorrectLabel(answers[key])] }, key))) })] })), 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 uppercase tracking-wider text-blue-600", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-blue-800", children: displayExplanation })] }))] })] }) }));
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(KidInstruction, { children: headerInstruction }), _jsxs(KidQuestionCard, { icon: _jsx(FileText, { className: "h-3.5 w-3.5" }), title: headerInstruction ? DEFAULT_WFSF_HEADER : headerLabel, headerExtra: typeof questionNumber === 'number' && questionNumber > 0 ? (_jsxs("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-teal-700", children: ["B\u00E0i ", questionNumber] })) : undefined, review: isReviewMode && allFilled ? (isAllCorrect ? 'correct' : 'wrong') : null, children: [title && (_jsx(KidPrompt, { children: _jsx("h2", { className: "text-sm font-semibold text-gray-800", children: title }) })), allAudios.length > 0 && (_jsx("div", { className: "flex flex-col items-center gap-2", children: allAudios.map((audio, idx) => (_jsx(ClientAudioItem, { url: audio }, idx))) })), allImages.length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: allImages.map((img, idx) => (_jsx(ClientImageItem, { url: img, alt: title ? `${title} (${idx + 1})` : undefined }, idx))) })), bankMode === 'WITH_WORD_BANK' && sharedWords.length > 0 && (_jsxs("div", { className: "rounded-lg border border-purple-200 bg-gradient-to-r from-purple-50 to-pink-50 p-3", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx(Library, { className: "h-4 w-4 text-purple-600" }), _jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-purple-700", children: "Word Bank" })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: sharedWords.map((item, index) => {
+                                    const used = usedSharedWords.has(item.word.trim().toLowerCase());
+                                    return (_jsxs("span", { className: cn('rounded-full border px-3 py-1 text-sm font-medium', item.isExample
+                                            ? 'border-amber-300 bg-amber-100 text-amber-800'
+                                            : used
+                                                ? 'border-purple-200 bg-white/60 text-purple-400 line-through'
+                                                : 'border-purple-300 bg-white text-purple-800'), children: [item.word, item.isExample ? ' (ex)' : ''] }, `${item.word}-${index}`));
+                                }) })] })), _jsx("div", { className: "structured-form-content space-y-2 rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-5 text-base leading-loose text-gray-800", children: renderedContent }), isReviewMode && !isAllCorrect && (_jsxs("div", { className: "rounded-lg border border-green-200 bg-green-50 p-3", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-green-600", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: expectedBlankKeys.map((key) => (_jsxs("span", { className: "rounded-lg border border-green-300 bg-green-100 px-3 py-1.5 text-sm font-semibold text-green-800", children: [`{${key}}`, ": ", formatWfsfCorrectLabel(answers[key])] }, key))) })] })), 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 uppercase tracking-wider text-blue-600", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-blue-800", children: displayExplanation })] }))] })] }));
 }

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));
                 }) })] }));
 }