@tinyweb_dev/oe-exam-sdk 1.0.9 → 1.0.11

package/dist/components/questions/types/true-false/TrueFalseClient.js

@@ -1,20 +1,17 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
-import { Check, X, CircleHelp } from 'lucide-react';
+import { Lightbulb } from 'lucide-react';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-import { cn } from '../../../../shared/lib/utils';
+import { KidChoiceRow, KidPrompt, KidQuestionCard } from '../../_shared/components/compact';
 export function TrueFalseClient({ questionData, onSubmit, isReviewMode = false, userAnswer, }) {
     const [selectedAnswer, setSelectedAnswer] = useState(userAnswer !== undefined ? userAnswer : undefined);
-    // Presigned URL for image
     const { previewUrl: imagePreviewUrl, isLoading } = usePresignedFileUrl(questionData.imageUrl || '');
-    // Sync userAnswer
     useEffect(() => {
         if (userAnswer !== undefined) {
             setSelectedAnswer(userAnswer);
         }
     }, [userAnswer]);
-    // Handle answer change
     const handleAnswerChange = (value) => {
         if (isReviewMode)
             return;
@@ -23,53 +20,7 @@ export function TrueFalseClient({ questionData, onSubmit, isReviewMode = false,
     };
     const hasAnswered = selectedAnswer !== undefined;
     const isAnswerCorrect = isReviewMode && selectedAnswer === questionData.answer;
-    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 bg-gradient-to-br from-emerald-500 to-teal-600 text-white shadow-sm", children: _jsx(CircleHelp, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "\u0110\u00FAng / Sai" })] }), isReviewMode && hasAnswered && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isAnswerCorrect
-                                ? 'bg-green-100 text-green-700'
-                                : 'bg-red-100 text-red-700'), children: [isAnswerCorrect ? (_jsx(Check, { className: "h-3.5 w-3.5" })) : (_jsx(X, { className: "h-3.5 w-3.5" })), isAnswerCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "space-y-3 p-3", children: [_jsx("div", { className: "rounded-lg border border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-4", children: _jsx("h3", { className: "text-base font-semibold leading-relaxed text-gray-800", children: questionData.question || 'Chưa nhập câu hỏi' }) }), (imagePreviewUrl || questionData.imageUrl) && (_jsxs("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100", children: [_jsx("div", { className: "border-b border-gray-100 px-3 py-1.5", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-red-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-yellow-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-green-400" }), _jsx("span", { className: "ml-2 text-xs font-medium text-gray-500", children: "H\u00ECnh \u1EA3nh" })] }) }), _jsx("div", { className: "flex items-center justify-center p-4", children: isLoading ? (_jsx("div", { className: "flex h-48 items-center justify-center", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-blue-500" }) })) : (
-                                    /* eslint-disable-next-line @next/next/no-img-element */
-                                    _jsx("img", { src: imagePreviewUrl || questionData.imageUrl, alt: "Question illustration", className: "max-h-56 w-auto rounded-md object-contain" })) })] })), _jsxs("div", { className: "space-y-2.5", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-gray-500", children: "Ch\u1ECDn \u0111\u00E1p \u00E1n" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("button", { type: "button", onClick: () => handleAnswerChange(true), disabled: isReviewMode, className: cn('group flex items-center justify-center gap-3 rounded-xl border-2 p-4 transition-all', isReviewMode
-                                                ? questionData.answer === true
-                                                    ? 'border-green-400 bg-green-50'
-                                                    : selectedAnswer === true
-                                                        ? 'border-red-400 bg-red-50'
-                                                        : 'border-gray-200 bg-gray-50'
-                                                : selectedAnswer === true
-                                                    ? 'border-emerald-500 bg-emerald-50 shadow-sm ring-2 ring-emerald-100'
-                                                    : 'border-gray-200 bg-white hover:border-emerald-300 hover:bg-emerald-50/50 hover:shadow-sm'), children: [_jsx("div", { className: cn('flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold transition-all', isReviewMode
-                                                        ? questionData.answer === true
-                                                            ? 'bg-green-500 text-white'
-                                                            : selectedAnswer === true
-                                                                ? 'bg-red-500 text-white'
-                                                                : 'bg-gray-200 text-gray-600'
-                                                        : selectedAnswer === true
-                                                            ? 'bg-emerald-500 text-white shadow-sm'
-                                                            : 'bg-gray-100 text-gray-500 group-hover:bg-emerald-100 group-hover:text-emerald-600'), children: _jsx(Check, { className: "h-4 w-4" }) }), _jsx("span", { className: cn('text-base font-semibold', isReviewMode && questionData.answer === true
-                                                        ? 'text-green-800'
-                                                        : isReviewMode && selectedAnswer === true
-                                                            ? 'text-red-800'
-                                                            : selectedAnswer === true
-                                                                ? 'text-emerald-700'
-                                                                : 'text-gray-600'), children: "\u0110\u00FAng (True)" }), isReviewMode && (questionData.answer === true || selectedAnswer === true) && (_jsx("div", { className: cn('flex h-6 w-6 items-center justify-center rounded-full', questionData.answer === true ? 'bg-green-500' : 'bg-red-500'), children: questionData.answer === true ? (_jsx(Check, { className: "h-4 w-4 text-white" })) : (_jsx(X, { className: "h-4 w-4 text-white" })) }))] }), _jsxs("button", { type: "button", onClick: () => handleAnswerChange(false), disabled: isReviewMode, className: cn('group flex items-center justify-center gap-3 rounded-xl border-2 p-4 transition-all', isReviewMode
-                                                ? questionData.answer === false
-                                                    ? 'border-green-400 bg-green-50'
-                                                    : selectedAnswer === false
-                                                        ? 'border-red-400 bg-red-50'
-                                                        : 'border-gray-200 bg-gray-50'
-                                                : selectedAnswer === false
-                                                    ? 'border-red-500 bg-red-50 shadow-sm ring-2 ring-red-100'
-                                                    : 'border-gray-200 bg-white hover:border-red-300 hover:bg-red-50/50 hover:shadow-sm'), children: [_jsx("div", { className: cn('flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold transition-all', isReviewMode
-                                                        ? questionData.answer === false
-                                                            ? 'bg-green-500 text-white'
-                                                            : selectedAnswer === false
-                                                                ? 'bg-red-500 text-white'
-                                                                : 'bg-gray-200 text-gray-600'
-                                                        : selectedAnswer === false
-                                                            ? 'bg-red-500 text-white shadow-sm'
-                                                            : 'bg-gray-100 text-gray-500 group-hover:bg-red-100 group-hover:text-red-600'), children: _jsx(X, { className: "h-4 w-4" }) }), _jsx("span", { className: cn('text-base font-semibold', isReviewMode && questionData.answer === false
-                                                        ? 'text-green-800'
-                                                        : isReviewMode && selectedAnswer === false
-                                                            ? 'text-red-800'
-                                                            : selectedAnswer === false
-                                                                ? 'text-red-700'
-                                                                : 'text-gray-600'), children: "Sai (False)" }), isReviewMode && (questionData.answer === false || selectedAnswer === false) && (_jsx("div", { className: cn('flex h-6 w-6 items-center justify-center rounded-full', questionData.answer === false ? 'bg-green-500' : 'bg-red-500'), children: questionData.answer === false ? (_jsx(Check, { className: "h-4 w-4 text-white" })) : (_jsx(X, { className: "h-4 w-4 text-white" })) }))] })] })] }), !isReviewMode && !hasAnswered && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3", children: [_jsx("div", { className: "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white", children: _jsx("span", { className: "text-xs font-bold", children: "!" }) }), _jsx("span", { className: "text-sm text-amber-800", children: "Vui l\u00F2ng ch\u1ECDn \u0111\u00E1p \u00E1n" })] })), isReviewMode && questionData.explanation && (_jsxs("div", { className: "rounded-lg border border-blue-200 bg-blue-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold text-blue-800", children: "Gi\u1EA3i th\u00EDch:" }), _jsx("p", { className: "mt-1 text-sm text-blue-700", children: questionData.explanation })] }))] })] }) }));
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs(KidQuestionCard, { title: "\u0110\u00FAng / Sai", isExample: questionData.isExample, review: isReviewMode && hasAnswered ? (isAnswerCorrect ? 'correct' : 'wrong') : null, children: [_jsx(KidPrompt, { children: questionData.question || 'Chưa nhập câu hỏi' }), (imagePreviewUrl || questionData.imageUrl) && (_jsxs("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100", children: [_jsx("div", { className: "border-b border-gray-100 px-3 py-1.5", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-red-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-yellow-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-green-400" }), _jsx("span", { className: "ml-2 text-xs font-medium text-gray-500", children: "H\u00ECnh \u1EA3nh" })] }) }), _jsx("div", { className: "flex items-center justify-center p-4", children: isLoading ? (_jsx("div", { className: "flex h-48 items-center justify-center", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-blue-500" }) })) : (
+                                /* eslint-disable-next-line @next/next/no-img-element */
+                                _jsx("img", { src: imagePreviewUrl || questionData.imageUrl, alt: "H\u00ECnh \u1EA3nh c\u00E2u h\u1ECFi", className: "max-h-56 w-auto rounded-md object-contain" })) })] })), _jsxs("div", { className: "space-y-1.5", children: [_jsx(KidChoiceRow, { letter: "T", selected: selectedAnswer === true, isReviewMode: isReviewMode, isCorrect: isReviewMode && questionData.answer === true, onClick: () => handleAnswerChange(true), children: "\u0110\u00FAng" }), _jsx(KidChoiceRow, { letter: "F", selected: selectedAnswer === false, isReviewMode: isReviewMode, isCorrect: isReviewMode && questionData.answer === false, onClick: () => handleAnswerChange(false), children: "Sai" })] }), !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: "Vui l\u00F2ng ch\u1ECDn \u0111\u00E1p \u00E1n" })] }))] }), isReviewMode && questionData.explanation && (_jsxs("div", { className: "flex items-start gap-2 rounded-md border border-amber-200 bg-amber-50 px-3 py-2", children: [_jsx(Lightbulb, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-600" }), _jsxs("p", { className: "text-xs text-gray-700", children: [_jsx("span", { className: "font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch: " }), questionData.explanation] })] }))] }));
 }

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