@tinyweb_dev/oe-exam-sdk 1.0.6 → 1.0.8

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

@@ -1,14 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from 'react';
-import { Button } from '../../../../components/ui/button';
 import { Label } from '../../../../components/ui/label';
 import { Input } from '../../../../components/ui/input';
-import { Textarea } from '../../../../components/ui/textarea';
-import { PointsInput } from '../../../../components/ui/points-input';
-import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
 import { Switch } from '../../../../components/ui/switch';
-import { Pencil, Eye, Lightbulb, PenTool, MessageSquare, ToggleLeft, CheckCircle2, BookOpen } from 'lucide-react';
+import { Eye, PenTool, MessageSquare, ToggleLeft, CheckCircle2 } from 'lucide-react';
+import { CompactCreatorHeader, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
 import { WriteCorrectVerbFormClient } from './WriteCorrectVerbFormClient';
 import { useDebouncedCallback } from '../../../../shared/lib/hooks';
 function WriteCorrectVerbFormCreatorContent({ initialData, onSave, onCancel, onChange, externalErrors, onUnsavedChangesChange, validationRef, }) {
@@ -171,25 +168,28 @@ function WriteCorrectVerbFormCreatorContent({ initialData, onSave, onCancel, onC
             caseSensitive,
             instruction,
         };
-        return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(CardTitle, { children: "Write the Correct Form of the Verb (Preview)" }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i Edit Mode"] })] }) }) }), _jsx(WriteCorrectVerbFormClient, { questionData: { ...questionData, explanation }, isReviewMode: true, userAnswer: correctAnswer })] }));
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _jsx(WriteCorrectVerbFormClient, { questionData: { ...questionData, explanation }, isReviewMode: true, userAnswer: correctAnswer })] }));
     }
     // ============ CREATOR UI ============
-    return (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-orange-500 via-amber-500 to-yellow-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-orange-500 to-amber-600 shadow-md", children: _jsx(PenTool, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold text-gray-900", children: "Vi\u1EBFt d\u1EA1ng \u0111\u00FAng c\u1EE7a \u0111\u1ED9ng t\u1EEB" }), _jsx("p", { className: "text-sm text-gray-500", children: "Chia \u0111\u1ED9ng t\u1EEB trong ngo\u1EB7c \u0111\u00FAng th\u00EC" })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !isValid(), className: "gap-2 border-amber-200 text-amber-600 hover:bg-amber-50 hover:text-amber-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsx("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: _jsx(PointsInput, { defaultValue: points, onChange: (e) => setPoints(Number(e.target.value) || 1) }) }), _jsx("div", { className: "rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-5 shadow-sm", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-amber-100", children: _jsx(Lightbulb, { className: "h-4 w-4 text-amber-600" }) }), _jsxs("div", { className: "text-sm text-amber-900", children: [_jsx("p", { className: "font-semibold text-amber-800", children: "H\u01B0\u1EDBng d\u1EABn t\u1EA1o c\u00E2u h\u1ECFi" }), _jsxs("ul", { className: "mt-2 space-y-1.5 text-amber-700", children: [_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-amber-400" }), "S\u1EED d\u1EE5ng ", _jsx("code", { className: "mx-1 rounded bg-amber-100 px-1.5 py-0.5 font-mono text-amber-800", children: '{0}' }), " \u0111\u1EC3 \u0111\u00E1nh d\u1EA5u ch\u1ED7 tr\u1ED1ng trong c\u00E2u"] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-amber-400" }), "Nh\u1EADp \u0111\u1ED9ng t\u1EEB g\u1EE3i \u00FD (d\u1EA1ng nguy\u00EAn m\u1EABu) v\u00E0o \u00F4 \"G\u1EE3i \u00FD \u0111\u1ED9ng t\u1EEB\""] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-amber-400" }), "H\u1ECDc sinh s\u1EBD vi\u1EBFt d\u1EA1ng \u0111\u00FAng c\u1EE7a \u0111\u1ED9ng t\u1EEB \u0111\u1EC3 ho\u00E0n th\u00E0nh c\u00E2u"] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-amber-400" }), "V\u00ED d\u1EE5: ", _jsxs("code", { className: "ml-1 rounded bg-amber-100 px-1.5 py-0.5 font-mono text-amber-800 select-all cursor-pointer", title: "Click \u0111\u1EC3 copy", children: ["John ", '{0}', " his homework at night."] })] })] })] })] }) }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-amber-500" }), "C\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { value: sentence, onChange: (e) => {
-                                            setSentence(e.target.value);
-                                            if (validationErrors.sentence) {
-                                                setValidationErrors(prev => ({ ...prev, sentence: undefined }));
-                                            }
-                                        }, placeholder: "V\u00ED d\u1EE5: John {0} his homework at night.", className: `border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 ${validationErrors.sentence ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), validationErrors.sentence && (_jsx("p", { className: "text-sm text-red-600", children: validationErrors.sentence }))] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: `rounded-xl border-2 p-4 transition-all ${verbHint ? 'border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50' : 'border-gray-200 bg-white'}`, children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-700", children: [_jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-amber-100 text-xs font-bold text-amber-600", children: "V" }), "G\u1EE3i \u00FD \u0111\u1ED9ng t\u1EEB ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { value: verbHint, onChange: (e) => {
-                                                    setVerbHint(e.target.value);
-                                                    if (validationErrors.verbHint) {
-                                                        setValidationErrors(prev => ({ ...prev, verbHint: undefined }));
-                                                    }
-                                                }, placeholder: "V\u00ED d\u1EE5: do", className: `mt-2 border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 ${validationErrors.verbHint ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), validationErrors.verbHint && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: validationErrors.verbHint }))] }), _jsxs("div", { className: `rounded-xl border-2 p-4 transition-all ${correctAnswer ? 'border-green-200 bg-gradient-to-r from-green-50 to-emerald-50' : 'border-gray-200 bg-white'}`, children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-700", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }), "\u0110\u00E1p \u00E1n \u0111\u00FAng ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { value: correctAnswer, onChange: (e) => {
-                                                    setCorrectAnswer(e.target.value);
-                                                    if (validationErrors.correctAnswer) {
-                                                        setValidationErrors(prev => ({ ...prev, correctAnswer: undefined }));
-                                                    }
-                                                }, placeholder: "V\u00ED d\u1EE5: does", className: `mt-2 border-gray-200 bg-white transition-all focus:border-green-300 focus:ring-green-200 ${validationErrors.correctAnswer ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), validationErrors.correctAnswer && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: validationErrors.correctAnswer }))] })] }), _jsxs("div", { className: "flex items-center justify-between rounded-xl border-2 border-gray-200 bg-white p-4 transition-all hover:border-gray-300", 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-gray-100", children: _jsx(ToggleLeft, { className: "h-4 w-4 text-gray-600" }) }), _jsxs("div", { className: "space-y-0.5", children: [_jsx(Label, { htmlFor: "caseSensitive", className: "font-semibold text-gray-800", children: "Ph\u00E2n bi\u1EC7t ch\u1EEF hoa/th\u01B0\u1EDDng" }), _jsx("p", { className: "text-sm text-gray-500", children: "B\u1EADt n\u1EBFu \u0111\u00E1p \u00E1n c\u1EA7n kh\u1EDBp ch\u00EDnh x\u00E1c (v\u00ED d\u1EE5: \"Does\" \u2260 \"does\")" })] })] }), _jsx(Switch, { id: "caseSensitive", checked: caseSensitive, onCheckedChange: setCaseSensitive })] }), sentence && verbHint && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2 text-xs font-semibold text-gray-600", children: [_jsx(Eye, { className: "h-3.5 w-3.5" }), "Xem tr\u01B0\u1EDBc c\u00E2u h\u1ECFi"] }), _jsxs("p", { className: "text-sm text-gray-700", children: [sentence.replace('{0}', '_______'), " ", _jsxs("span", { className: "font-semibold text-amber-600", children: ["(", verbHint, ")"] })] }), correctAnswer && (_jsxs("div", { className: "mt-2 flex items-center gap-2 rounded-lg bg-green-50 px-3 py-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-500" }), _jsxs("span", { className: "text-sm text-green-700", children: ["\u0110\u00E1p \u00E1n: ", _jsx("strong", { children: sentence.replace('{0}', correctAnswer) })] })] }))] })), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100", children: _jsx("span", { className: "text-lg", children: "\u274C" }) }), _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] })] }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-amber-400 to-orange-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { children: _jsx(Textarea, { id: "explanation", value: explanation, onChange: (e) => setExplanation(e.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none" }) })] })] }));
+    return (_jsx("div", { className: "space-y-3", children: _jsxs(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(PenTool, { className: "h-3.5 w-3.5" }), title: "Vi\u1EBFt d\u1EA1ng \u0111\u00FAng c\u1EE7a \u0111\u1ED9ng t\u1EEB", points: { value: points, onValueChange: setPoints }, preview: {
+                    onClick: () => setIsClientMode(true),
+                    disabled: !isValid(),
+                } }), children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { className: "flex items-center gap-1.5 text-sm font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-3.5 w-3.5 text-amber-500" }), "C\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { value: sentence, onChange: (e) => {
+                                setSentence(e.target.value);
+                                if (validationErrors.sentence) {
+                                    setValidationErrors(prev => ({ ...prev, sentence: undefined }));
+                                }
+                            }, placeholder: "V\u00ED d\u1EE5: John {0} his homework at night.", className: `h-8 border-gray-200 bg-white ${validationErrors.sentence ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), validationErrors.sentence && (_jsx("p", { className: "text-sm text-red-600", children: validationErrors.sentence }))] }), _jsxs("div", { className: "grid grid-cols-2 gap-2.5", children: [_jsxs("div", { className: `rounded-md border p-2.5 ${verbHint ? 'border-amber-200 bg-amber-50/70' : 'border-gray-200 bg-white'}`, children: [_jsxs(Label, { className: "flex items-center gap-1.5 text-xs font-semibold text-gray-700", children: [_jsx("span", { className: "flex h-5 w-5 items-center justify-center rounded-md bg-amber-100 text-[10px] font-bold text-amber-600", children: "V" }), "G\u1EE3i \u00FD \u0111\u1ED9ng t\u1EEB ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { value: verbHint, onChange: (e) => {
+                                        setVerbHint(e.target.value);
+                                        if (validationErrors.verbHint) {
+                                            setValidationErrors(prev => ({ ...prev, verbHint: undefined }));
+                                        }
+                                    }, placeholder: "V\u00ED d\u1EE5: do", className: `mt-1.5 h-8 border-gray-200 bg-white ${validationErrors.verbHint ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), validationErrors.verbHint && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: validationErrors.verbHint }))] }), _jsxs("div", { className: `rounded-md border p-2.5 ${correctAnswer ? 'border-green-200 bg-green-50/70' : 'border-gray-200 bg-white'}`, children: [_jsxs(Label, { className: "flex items-center gap-1.5 text-xs font-semibold text-gray-700", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5 text-green-600" }), "\u0110\u00E1p \u00E1n \u0111\u00FAng ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { value: correctAnswer, onChange: (e) => {
+                                        setCorrectAnswer(e.target.value);
+                                        if (validationErrors.correctAnswer) {
+                                            setValidationErrors(prev => ({ ...prev, correctAnswer: undefined }));
+                                        }
+                                    }, placeholder: "V\u00ED d\u1EE5: does", className: `mt-1.5 h-8 border-gray-200 bg-white ${validationErrors.correctAnswer ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), validationErrors.correctAnswer && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: validationErrors.correctAnswer }))] })] }), _jsxs("div", { className: "flex items-center justify-between rounded-md border border-gray-200 bg-white px-2.5 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-gray-100", children: _jsx(ToggleLeft, { className: "h-3.5 w-3.5 text-gray-600" }) }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "caseSensitive", className: "text-sm font-semibold text-gray-800", children: "Ph\u00E2n bi\u1EC7t ch\u1EEF hoa/th\u01B0\u1EDDng" }), _jsx("p", { className: "text-xs text-gray-500", children: "B\u1EADt n\u1EBFu \u0111\u00E1p \u00E1n c\u1EA7n kh\u1EDBp ch\u00EDnh x\u00E1c (v\u00ED d\u1EE5: \"Does\" \u2260 \"does\")" })] })] }), _jsx(Switch, { id: "caseSensitive", checked: caseSensitive, onCheckedChange: setCaseSensitive })] }), sentence && verbHint && (_jsxs("div", { className: "rounded-md border border-gray-200 bg-gray-50 p-2.5", children: [_jsxs("div", { className: "mb-1 flex items-center gap-1.5 text-xs font-semibold text-gray-600", children: [_jsx(Eye, { className: "h-3.5 w-3.5" }), "Xem tr\u01B0\u1EDBc c\u00E2u h\u1ECFi"] }), _jsxs("p", { className: "text-sm text-gray-700", children: [sentence.replace('{0}', '_______'), " ", _jsxs("span", { className: "font-semibold text-amber-600", children: ["(", verbHint, ")"] })] }), correctAnswer && (_jsxs("div", { className: "mt-1.5 flex items-center gap-1.5 rounded-md bg-green-50 px-2.5 py-1.5", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5 text-green-500" }), _jsxs("span", { className: "text-xs text-green-700", children: ["\u0110\u00E1p \u00E1n: ", _jsx("strong", { children: sentence.replace('{0}', correctAnswer) })] })] }))] })), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "flex items-center gap-2 rounded-md border border-red-200 bg-red-50 p-2 text-xs text-red-700", children: [_jsx("span", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("span", { children: externalErrors.join(' · ') })] })), _jsx(CompactExplanationToggle, { value: explanation, onValueChange: setExplanation, defaultVisible: Boolean(initialData?.explanation) })] }) }));
 }
 export function WriteCorrectVerbFormCreator(props) {
     return _jsx(WriteCorrectVerbFormCreatorContent, { ...props });

package/dist/components/questions/types/write-sentences/WriteSentencesCreator.js

@@ -1,13 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from 'react';
-import { Button } from '../../../../components/ui/button';
 import { Input } from '../../../../components/ui/input';
 import { Label } from '../../../../components/ui/label';
 import { Textarea } from '../../../../components/ui/textarea';
-import { PointsInput } from '../../../../components/ui/points-input';
-import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
-import { Pencil, Eye, PenLine, BookOpen, Hash } from 'lucide-react';
+import { PenLine, BookOpen, Hash } from 'lucide-react';
+import { CompactCreatorHeader, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
 import { WriteSentencesClient } from './WriteSentencesClient';
 import { useDebouncedCallback } from '../../../../shared/lib/hooks';
 import { BasicQuestionGroupCard } from '../../groups/BasicQuestionGroupCard';
@@ -152,22 +150,27 @@ function WriteSentencesCreatorContent({ initialData, onChange, externalErrors, v
             instruction,
             sentenceCount,
         };
-        return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "Write Sentences (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i Edit Mode"] })] }) }) }), _jsx(WriteSentencesClient, { questionData: questionData, onSubmit: () => { }, isReviewMode: true, explanation: explanation })] }));
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _jsx(WriteSentencesClient, { questionData: questionData, onSubmit: () => { }, isReviewMode: true, explanation: explanation })] }));
     }
     // Creator UI
-    return (_jsxs("div", { className: "space-y-6", children: [isGrouped && (_jsx(BasicQuestionGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: imageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setImageUrl, uploadIdPrefix: `write-sentences-${partId ?? 'group'}` })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-teal-400 to-emerald-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-teal-500 to-emerald-600 shadow-md", children: _jsx(PenLine, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold text-gray-900", children: "Vi\u1EBFt c\u00E2u" }), _jsx("p", { className: "text-sm text-gray-500", children: "H\u1ECDc sinh t\u1EF1 vi\u1EBFt m\u1ED9t c\u00E2u ho\u00E0n ch\u1EC9nh" })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), className: "gap-2 border-emerald-200 text-emerald-600 hover:bg-emerald-50 hover:text-emerald-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [_jsx("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: _jsx(PointsInput, { defaultValue: points, onChange: (e) => setPoints(Number(e.target.value) || 1) }) }), _jsxs("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: [_jsxs(Label, { htmlFor: "sentenceCount", className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(Hash, { className: "h-4 w-4 text-teal-500" }), "S\u1ED1 c\u00E2u c\u1EA7n vi\u1EBFt ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "sentenceCount", type: "number", min: 1, max: 10, value: sentenceCount ?? '', onChange: (e) => {
-                                                    const raw = e.target.value;
-                                                    if (raw === '') {
-                                                        setSentenceCount(undefined);
-                                                    }
-                                                    else {
-                                                        const val = parseInt(raw, 10);
-                                                        setSentenceCount(isNaN(val) ? undefined : Math.max(1, val));
-                                                    }
-                                                    if (validationErrors.sentenceCount) {
-                                                        setValidationErrors((prev) => ({ ...prev, sentenceCount: undefined }));
-                                                    }
-                                                }, placeholder: "Nh\u1EADp s\u1ED1 c\u00E2u...", className: `mt-1.5 border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200 ${validationErrors.sentenceCount ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), validationErrors.sentenceCount && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: validationErrors.sentenceCount }))] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "instruction", className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(BookOpen, { className: "h-4 w-4 text-teal-500" }), "H\u01B0\u1EDBng d\u1EABn ", _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn)" })] }), _jsx(Textarea, { id: "instruction", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: "V\u00ED d\u1EE5: Now write two sentences about the picture.", rows: 2, className: "border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200" })] }), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100", children: _jsx("span", { className: "text-lg", children: "\u274C" }) }), _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] })] }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-amber-400 to-orange-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { children: _jsx(Textarea, { id: "explanation", value: explanation, onChange: (e) => setExplanation(e.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none" }) })] })] }));
+    return (_jsxs("div", { className: "space-y-3", children: [isGrouped && (_jsx(BasicQuestionGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: imageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setImageUrl, uploadIdPrefix: `write-sentences-${partId ?? 'group'}` })), _jsxs(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(PenLine, { className: "h-3.5 w-3.5" }), title: "Vi\u1EBFt c\u00E2u", points: {
+                        value: points,
+                        onValueChange: setPoints,
+                    }, preview: {
+                        onClick: () => setIsClientMode(true),
+                    } }), children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: "sentenceCount", className: "flex items-center gap-1.5 text-sm font-semibold text-gray-800", children: [_jsx(Hash, { className: "h-3.5 w-3.5 text-teal-500" }), "S\u1ED1 c\u00E2u c\u1EA7n vi\u1EBFt ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "sentenceCount", type: "number", min: 1, max: 10, value: sentenceCount ?? '', onChange: (e) => {
+                                    const raw = e.target.value;
+                                    if (raw === '') {
+                                        setSentenceCount(undefined);
+                                    }
+                                    else {
+                                        const val = parseInt(raw, 10);
+                                        setSentenceCount(isNaN(val) ? undefined : Math.max(1, val));
+                                    }
+                                    if (validationErrors.sentenceCount) {
+                                        setValidationErrors((prev) => ({ ...prev, sentenceCount: undefined }));
+                                    }
+                                }, placeholder: "Nh\u1EADp s\u1ED1 c\u00E2u...", className: `mt-1.5 border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200 ${validationErrors.sentenceCount ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), validationErrors.sentenceCount && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: validationErrors.sentenceCount }))] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: "instruction", className: "flex items-center gap-1.5 text-sm font-semibold text-gray-800", children: [_jsx(BookOpen, { className: "h-3.5 w-3.5 text-teal-500" }), "H\u01B0\u1EDBng d\u1EABn ", _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn)" })] }), _jsx(Textarea, { id: "instruction", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: "V\u00ED d\u1EE5: Now write two sentences about the picture.", rows: 2, className: "border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200" })] }), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "flex items-center gap-2 rounded-md border border-red-200 bg-red-50 p-2 text-xs text-red-700", children: [_jsx("span", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("span", { children: externalErrors.join(' · ') })] }))] }), _jsx(CompactExplanationToggle, { value: explanation, onValueChange: setExplanation })] }));
 }
 export function WriteSentencesCreator(props) {
     return _jsx(WriteSentencesCreatorContent, { ...props });

package/dist/components/questions/types/write-short-paragraph/WriteShortParagraphClient.js

@@ -62,7 +62,7 @@ export function WriteShortParagraphClient({ questionData, onSubmit, isReviewMode
                 return 'Text';
         }
     };
-    return (_jsxs("div", { className: "space-y-6", children: [instruction && (_jsx(Card, { children: _jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-lg", children: instruction }) }) })), contexts.length > 0 && (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Contexts" }) }), _jsx(CardContent, { children: _jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3", children: contexts.map((ctx, index) => (_jsx(ContextDisplay, { context: ctx, index: index }, ctx.id))) }) })] })), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(CardTitle, { children: "Vi\u1EBFt b\u00E0i" }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs("span", { className: `text-sm font-semibold ${isValidWordCount ? 'text-green-600' : 'text-red-600'}`, children: [wordCount, " / ", minWords, maxWords ? ` - ${maxWords}` : '+', " t\u1EEB"] }) })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "writing-answer", children: "N\u1ED9i dung b\u00E0i vi\u1EBFt" }), _jsx(Textarea, { id: "writing-answer", value: answer, onChange: (e) => handleAnswerChange(e.target.value), placeholder: "Nh\u1EADp n\u1ED9i dung b\u00E0i vi\u1EBFt c\u1EE7a b\u1EA1n...", className: "mt-2 min-h-[200px]", rows: 10, disabled: isReviewMode })] }), !isReviewMode && (_jsx("div", { className: "flex items-start gap-2 rounded-lg border p-3", children: isValidWordCount ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "mt-0.5 h-5 w-5 rounded-full bg-green-500" }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-sm font-medium text-green-700", children: "\u0110\u00E3 \u0111\u1EE7 s\u1ED1 t\u1EEB y\u00EAu c\u1EA7u" }), _jsxs("p", { className: "text-xs text-green-600", children: ["B\u1EA1n \u0111\u00E3 vi\u1EBFt ", wordCount, " t\u1EEB. Y\u00EAu c\u1EA7u: ", minWords, maxWords ? ` - ${maxWords}` : '+', " t\u1EEB."] })] })] })) : (_jsxs(_Fragment, { children: [_jsx(AlertCircle, { className: "h-5 w-5 text-amber-500" }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-sm font-medium text-amber-700", children: "Ch\u01B0a \u0111\u1EE7 s\u1ED1 t\u1EEB y\u00EAu c\u1EA7u" }), _jsxs("p", { className: "text-xs text-amber-600", children: ["B\u1EA1n \u0111\u00E3 vi\u1EBFt ", wordCount, " t\u1EEB. C\u1EA7n \u00EDt nh\u1EA5t ", minWords, " t\u1EEB.", maxWords && wordCount > maxWords && _jsxs("span", { children: [" T\u1ED1i \u0111a ", maxWords, " t\u1EEB."] })] })] })] })) }))] })] })] }));
+    return (_jsxs("div", { className: "space-y-3", children: [instruction && (_jsx(Card, { className: "border-0 shadow-sm", children: _jsx(CardHeader, { className: "px-3 py-2", children: _jsx(CardTitle, { className: "text-sm", children: instruction }) }) })), contexts.length > 0 && (_jsxs(Card, { className: "border-0 shadow-sm", children: [_jsx(CardHeader, { className: "px-3 py-2", children: _jsx(CardTitle, { className: "text-sm", children: "Contexts" }) }), _jsx(CardContent, { className: "p-3 space-y-3", children: _jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3", children: contexts.map((ctx, index) => (_jsx(ContextDisplay, { context: ctx, index: index }, ctx.id))) }) })] })), _jsxs(Card, { className: "border-0 shadow-sm", children: [_jsx(CardHeader, { className: "px-3 py-2", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(CardTitle, { className: "text-sm", children: "Vi\u1EBFt b\u00E0i" }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs("span", { className: `text-sm font-semibold ${isValidWordCount ? 'text-green-600' : 'text-red-600'}`, children: [wordCount, " / ", minWords, maxWords ? ` - ${maxWords}` : '+', " t\u1EEB"] }) })] }) }), _jsxs(CardContent, { className: "space-y-3 p-3", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "writing-answer", children: "N\u1ED9i dung b\u00E0i vi\u1EBFt" }), _jsx(Textarea, { id: "writing-answer", value: answer, onChange: (e) => handleAnswerChange(e.target.value), placeholder: "Nh\u1EADp n\u1ED9i dung b\u00E0i vi\u1EBFt c\u1EE7a b\u1EA1n...", className: "mt-2 min-h-[200px]", rows: 10, disabled: isReviewMode })] }), !isReviewMode && (_jsx("div", { className: "flex items-start gap-2 rounded-lg border p-3", children: isValidWordCount ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "mt-0.5 h-5 w-5 rounded-full bg-green-500" }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-sm font-medium text-green-700", children: "\u0110\u00E3 \u0111\u1EE7 s\u1ED1 t\u1EEB y\u00EAu c\u1EA7u" }), _jsxs("p", { className: "text-xs text-green-600", children: ["B\u1EA1n \u0111\u00E3 vi\u1EBFt ", wordCount, " t\u1EEB. Y\u00EAu c\u1EA7u: ", minWords, maxWords ? ` - ${maxWords}` : '+', " t\u1EEB."] })] })] })) : (_jsxs(_Fragment, { children: [_jsx(AlertCircle, { className: "h-5 w-5 text-amber-500" }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-sm font-medium text-amber-700", children: "Ch\u01B0a \u0111\u1EE7 s\u1ED1 t\u1EEB y\u00EAu c\u1EA7u" }), _jsxs("p", { className: "text-xs text-amber-600", children: ["B\u1EA1n \u0111\u00E3 vi\u1EBFt ", wordCount, " t\u1EEB. C\u1EA7n \u00EDt nh\u1EA5t ", minWords, " t\u1EEB.", maxWords && wordCount > maxWords && _jsxs("span", { children: [" T\u1ED1i \u0111a ", maxWords, " t\u1EEB."] })] })] })] })) }))] })] })] }));
 }
 function ContextDisplay({ context, index }) {
     const { previewUrl } = usePresignedFileUrl(context.type !== 'text' ? context.url || '' : '');

package/dist/components/questions/types/write-short-paragraph/WriteShortParagraphCreator.js

@@ -5,8 +5,8 @@ import { Button } from '../../../../components/ui/button';
 import { Label } from '../../../../components/ui/label';
 import { Input } from '../../../../components/ui/input';
 import { Textarea } from '../../../../components/ui/textarea';
-import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
-import { Pencil, Eye, X, Image, Music, FileText } from 'lucide-react';
+import { X, Image, Music, FileText } from 'lucide-react';
+import { CompactCreatorHeader, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
 import { FileUpload } from '../../../../components/ui/file-upload';
 import { WriteShortParagraphClient } from './WriteShortParagraphClient';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
@@ -113,9 +113,12 @@ onChange, }) {
             maxWords,
             instruction,
         };
-        return (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500" }), _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold tracking-tight text-gray-900", children: "Write Short Paragraph (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i Edit Mode"] })] }) })] }), _jsx(WriteShortParagraphClient, { questionData: questionData, onSubmit: () => { } })] }));
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _jsx(WriteShortParagraphClient, { questionData: questionData, onSubmit: () => { } })] }));
     }
-    return (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500" }), _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold tracking-tight text-gray-900", children: "Write Short Paragraph" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "T\u1EA1o b\u00E0i t\u1EADp vi\u1EBFt \u0111o\u1EA1n v\u0103n v\u1EDBi nhi\u1EC1u content (\u1EA3nh, audio, text)" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: contexts.length === 0 || minWords < 1, children: [_jsx(Eye, { className: "mr-2 h-4 w-4" }), "Client Mode"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "instruction", className: "text-sm font-semibold text-gray-700", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Textarea, { id: "instruction", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: "V\u00ED d\u1EE5: Look at the three pictures. Write about this story.", className: "mt-1", rows: 2 })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "minWords", className: "text-sm font-semibold text-gray-700", children: "S\u1ED1 t\u1EEB t\u1ED1i thi\u1EC3u *" }), _jsx(Input, { id: "minWords", type: "number", min: "1", value: minWords, onChange: (e) => setMinWords(parseInt(e.target.value) || 1), placeholder: "20", className: "mt-1" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "maxWords", className: "text-sm font-semibold text-gray-700", children: "S\u1ED1 t\u1EEB t\u1ED1i \u0111a (t\u00F9y ch\u1ECDn)" }), _jsx(Input, { id: "maxWords", type: "number", min: minWords, value: maxWords || '', onChange: (e) => setMaxWords(e.target.value ? parseInt(e.target.value) : undefined), placeholder: "Kh\u00F4ng gi\u1EDBi h\u1EA1n", className: "mt-1" })] })] })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-xl shadow-blue-100/40 ring-1 ring-gray-100", children: [_jsx(CardHeader, { className: "bg-gradient-to-br from-indigo-50/50 via-white to-blue-50/30 pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 shadow-md", children: _jsx(FileText, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "Contexts" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Th\u00EAm c\u00E1c context (\u1EA3nh, audio, ho\u1EB7c text) \u0111\u1EC3 h\u1ECDc sinh xem khi vi\u1EBFt" })] })] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => addContext('image'), className: "flex items-center gap-2 border-indigo-200 bg-indigo-50 text-indigo-700 hover:bg-indigo-100 hover:text-indigo-800", children: [_jsx(Image, { className: "h-4 w-4" }), "Th\u00EAm \u1EA3nh"] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => addContext('audio'), className: "flex items-center gap-2 border-purple-200 bg-purple-50 text-purple-700 hover:bg-purple-100 hover:text-purple-800", children: [_jsx(Music, { className: "h-4 w-4" }), "Th\u00EAm audio"] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => addContext('text'), className: "flex items-center gap-2 border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100 hover:text-blue-800", children: [_jsx(FileText, { className: "h-4 w-4" }), "Th\u00EAm text"] })] })] }) }), _jsx(CardContent, { className: "space-y-4 pt-6", children: contexts.length > 0 ? (contexts.map((ctx, index) => (_jsx(ContextItem, { context: ctx, index: index, onUpdate: updateContext, onRemove: removeContext }, ctx.id)))) : (_jsxs("div", { className: "flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-12", children: [_jsx("div", { className: "mb-4 rounded-full bg-gray-200 p-4", children: _jsx(Image, { className: "h-8 w-8 text-gray-400" }) }), _jsx("p", { className: "mb-2 text-sm font-medium text-gray-700", children: "Ch\u01B0a c\u00F3 context n\u00E0o" }), _jsx("p", { className: "mb-4 text-xs text-gray-500", children: "Nh\u1EA5n c\u00E1c n\u00FAt b\u00EAn tr\u00EAn \u0111\u1EC3 th\u00EAm context" })] })) })] })] }));
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(FileText, { className: "h-3.5 w-3.5" }), title: "Write Short Paragraph", preview: {
+                        onClick: () => setIsClientMode(true),
+                        disabled: contexts.length === 0 || minWords < 1,
+                    } }), children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "instruction", className: "text-sm font-semibold text-gray-700", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Textarea, { id: "instruction", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: "V\u00ED d\u1EE5: Look at the three pictures. Write about this story.", className: "mt-1", rows: 2 })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "minWords", className: "text-sm font-semibold text-gray-700", children: "S\u1ED1 t\u1EEB t\u1ED1i thi\u1EC3u *" }), _jsx(Input, { id: "minWords", type: "number", min: "1", value: minWords, onChange: (e) => setMinWords(parseInt(e.target.value) || 1), placeholder: "20", className: "mt-1" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "maxWords", className: "text-sm font-semibold text-gray-700", children: "S\u1ED1 t\u1EEB t\u1ED1i \u0111a (t\u00F9y ch\u1ECDn)" }), _jsx(Input, { id: "maxWords", type: "number", min: minWords, value: maxWords || '', onChange: (e) => setMaxWords(e.target.value ? parseInt(e.target.value) : undefined), placeholder: "Kh\u00F4ng gi\u1EDBi h\u1EA1n", className: "mt-1" })] })] })] }), _jsx(CompactFieldCard, { header: _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-gray-100", children: _jsx(FileText, { className: "h-3.5 w-3.5 text-gray-600" }) }), _jsx("span", { className: "text-sm font-bold text-gray-900", children: "Contexts" })] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => addContext('image'), className: "flex items-center gap-2 border-indigo-200 bg-indigo-50 text-indigo-700 hover:bg-indigo-100 hover:text-indigo-800", children: [_jsx(Image, { className: "h-4 w-4" }), "Th\u00EAm \u1EA3nh"] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => addContext('audio'), className: "flex items-center gap-2 border-purple-200 bg-purple-50 text-purple-700 hover:bg-purple-100 hover:text-purple-800", children: [_jsx(Music, { className: "h-4 w-4" }), "Th\u00EAm audio"] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => addContext('text'), className: "flex items-center gap-2 border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100 hover:text-blue-800", children: [_jsx(FileText, { className: "h-4 w-4" }), "Th\u00EAm text"] })] })] }), children: contexts.length > 0 ? (contexts.map((ctx, index) => (_jsx(ContextItem, { context: ctx, index: index, onUpdate: updateContext, onRemove: removeContext }, ctx.id)))) : (_jsxs("div", { className: "flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-12", children: [_jsx("div", { className: "mb-4 rounded-full bg-gray-200 p-4", children: _jsx(Image, { className: "h-8 w-8 text-gray-400" }) }), _jsx("p", { className: "mb-2 text-sm font-medium text-gray-700", children: "Ch\u01B0a c\u00F3 context n\u00E0o" }), _jsx("p", { className: "mb-4 text-xs text-gray-500", children: "Nh\u1EA5n c\u00E1c n\u00FAt b\u00EAn tr\u00EAn \u0111\u1EC3 th\u00EAm context" })] })) })] }));
 }
 function ContextItem({ context, index, onUpdate, onRemove }) {
     const { previewUrl } = usePresignedFileUrl(context.type !== 'text' ? context.url || '' : '');

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

@@ -11,12 +11,9 @@ import { ReadAndColorObjectsClient } from '../types/read-and-color-objects/ReadA
 import { ArrangeLettersIntoWordsClient } from '../types/arrange-letters-into-words/ArrangeLettersIntoWordsClient';
 import { WriteShortParagraphClient } from '../types/write-short-paragraph/WriteShortParagraphClient';
 import { LabelThePictureClient } from '../types/label-the-picture/LabelThePictureClient';
-import { LookPictureFillWordHintClient } from '../types/look-picture-fill-word-hint/LookPictureFillWordHintClient';
 import { ReadPassageAndAnswerQuestionsClient } from '../types/read-passage-and-answer-questions/ReadPassageAndAnswerQuestionsClient';
 import { ChooseTheCorrectAnswerClient } from '../types/choose-the-correct-answer/ChooseTheCorrectAnswerClient';
 import { WriteAShortLetterClient } from '../types/write-a-short-letter/WriteAShortLetterClient';
-import { LookPictureChooseCorrectAnswerClient } from '../types/look-picture-choose-correct-answer/LookPictureChooseCorrectAnswerClient';
-import { LookPictureFillBlankChooseAnswerClient } from '../types/look-picture-fill-blank-choose-answer/LookPictureFillBlankChooseAnswerClient';
 import { FillMissingWordsInGridClient } from '../types/fill-missing-words-in-grid/FillMissingWordsInGridClient';
 import { CrosswordPuzzleClient } from '../types/crossword-puzzle/CrosswordPuzzleClient';
 import { FindWordsInMatrixClient } from '../types/find-words-in-matrix/FindWordsInMatrixClient';
@@ -393,50 +390,6 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
                 onSubmitAnswer?.(userConnections);
             } }));
     };
-    const renderLookPictureFillWordHint = () => {
-        const answer = question.answer;
-        const content = question.content;
-        // Check if question has group info (from API)
-        const questionGroup = question.questionGroup;
-        let subQuestions = [];
-        if (answer?.subQuestions && answer.subQuestions.length > 0) {
-            subQuestions = answer.subQuestions;
-        }
-        else if (content?.imageUrl && content?.word) {
-            // Single question format - transform to subQuestions
-            subQuestions = [{
-                    id: question.id,
-                    imageUrl: content.imageUrl,
-                    word: content.word,
-                    correctAnswer: answer?.correctAnswer || '',
-                    groupNumber: questionGroup?.groupNumber || 1,
-                }];
-        }
-        // Get hintLetters from multiple sources (priority order):
-        // 1. questionGroup.payload.hintLetters (from API group payload)
-        // 2. answer.hintLetters
-        // 3. content.hintLetters
-        const hintLetters = questionGroup?.payload?.hintLetters ||
-            answer?.hintLetters ||
-            content?.hintLetters ||
-            [];
-        // Build hintLettersByGroup if we have a groupNumber
-        const groupNumber = questionGroup?.groupNumber || 1;
-        const hintLettersByGroup = {};
-        if (hintLetters.length > 0) {
-            hintLettersByGroup[groupNumber] = hintLetters;
-        }
-        const questionData = {
-            subQuestions,
-            hintLetters,
-            hintLettersByGroup,
-            groups: [{ number: groupNumber, questionCount: subQuestions.length }],
-        };
-        return (_jsx(LookPictureFillWordHintClient, { questionData: questionData, userAnswer: userAnswer, isReviewMode: isReviewMode, explanation: question.explanation, onSubmit: (answers) => {
-                setSelectedAnswer(answers);
-                onSubmitAnswer?.(answers);
-            } }));
-    };
     const renderReadPassageAndAnswerQuestions = () => {
         const answer = question.answer;
         const questionData = {
@@ -450,50 +403,6 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
                 onSubmitAnswer?.(answers);
             } }));
     };
-    const renderLookPictureChooseCorrectAnswer = () => {
-        const content = question.content;
-        const answer = question.answer;
-        // Merge correct answers into subQuestions
-        const subQuestions = (content?.subQuestions || answer?.subQuestions || []).map((sq) => {
-            const correctAnswerId = answer?.answers?.[sq.id] || sq.correctAnswer;
-            return {
-                ...sq,
-                options: (sq.options || []).map((opt) => ({
-                    ...opt,
-                    isCorrect: opt.id === correctAnswerId,
-                })),
-            };
-        });
-        const questionData = {
-            subQuestions,
-        };
-        return (_jsx(LookPictureChooseCorrectAnswerClient, { questionData: questionData, userAnswer: userAnswer, isReviewMode: isReviewMode, onSubmit: (answers) => {
-                setSelectedAnswer(answers);
-                onSubmitAnswer?.(answers);
-            } }));
-    };
-    const renderLookPictureFillBlankChooseAnswer = () => {
-        const content = question.content;
-        const answer = question.answer;
-        // Merge correct answers into subQuestions
-        const subQuestions = (content?.subQuestions || answer?.subQuestions || []).map((sq) => {
-            const correctAnswerId = answer?.answers?.[sq.id] || sq.correctAnswer;
-            return {
-                ...sq,
-                options: (sq.options || []).map((opt) => ({
-                    ...opt,
-                    isCorrect: opt.id === correctAnswerId,
-                })),
-            };
-        });
-        const questionData = {
-            subQuestions,
-        };
-        return (_jsx(LookPictureFillBlankChooseAnswerClient, { questionData: questionData, userAnswer: userAnswer, isReviewMode: isReviewMode, onSubmit: (answers) => {
-                setSelectedAnswer(answers);
-                onSubmitAnswer?.(answers);
-            } }));
-    };
     const renderFillMissingWordsInGrid = () => {
         const content = question.content;
         const answer = question.answer;
@@ -629,19 +538,12 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
             case 'WRITE_A_SHORT_LETTER':
                 return renderWriteAShortLetter();
             // Marketing exam questions grade 1-2
-            case 'LOOK_PICTURE_FILL_WORD_HINT':
-                return renderLookPictureFillWordHint();
             case 'LABEL_THE_PICTURE':
                 return renderLabelThePicture();
             case 'READ_AND_COLOR_OBJECTS':
                 return renderReadAndColorObjects();
             case 'READ_PASSAGE_AND_ANSWER_QUESTIONS':
                 return renderReadPassageAndAnswerQuestions();
-            // Additional marketing exam questions
-            case 'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER':
-                return renderLookPictureChooseCorrectAnswer();
-            case 'LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER':
-                return renderLookPictureFillBlankChooseAnswer();
             case 'FILL_MISSING_WORDS_IN_GRID':
                 return renderFillMissingWordsInGrid();
             case 'WORD_FILL_PARAGRAPH':

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

@@ -1,82 +1,7 @@
 'use client';
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-function isRecord(value) {
-    return typeof value === 'object' && value !== null && !Array.isArray(value);
-}
-function asRecord(value) {
-    return isRecord(value) ? value : {};
-}
-function asString(value, fallback = '') {
-    return typeof value === 'string' ? value : fallback;
-}
-function mapItem(item, index) {
-    const record = asRecord(item);
-    const content = asRecord(record.content);
-    const correctAnswer = asRecord(record.correctAnswer);
-    const expected = Array.isArray(correctAnswer.expectedAnswers)
-        ? correctAnswer.expectedAnswers.map((value) => String(value ?? ''))
-        : [];
-    return {
-        questionText: asString(content.questionText) ||
-            asString(content.question) ||
-            asString(record.questionText),
-        audioUrl: asString(content.audioUrl) || undefined,
-        expectedAnswers: expected,
-        isExample: record.isExample === true,
-        points: typeof record.points === 'number' ? record.points : 1,
-        questionNumber: typeof record.questionNumber === 'number' ? record.questionNumber : index + 1,
-    };
-}
-function isNestedPart(item) {
-    const record = asRecord(item);
-    return Array.isArray(record.questions);
-}
-function resolveGroup(question) {
-    const content = asRecord(question.content);
-    const list = asRecord(question.spontaneousQAList ?? content.spontaneousQAList ?? content);
-    const itemsRaw = Array.isArray(list.items)
-        ? list.items
-        : Array.isArray(content.items)
-            ? content.items
-            : [];
-    const instruction = asString(asRecord(list.meta).instruction) ||
-        asString(asRecord(content.meta).instruction) ||
-        asString(question.explanation) ||
-        'Talk about the topic.';
-    if (itemsRaw.some(isNestedPart)) {
-        return {
-            instruction,
-            parts: itemsRaw.map((item, index) => {
-                const record = asRecord(item);
-                const questions = Array.isArray(record.questions)
-                    ? record.questions.map(mapItem)
-                    : [];
-                return {
-                    partNumber: typeof record.partNumber === 'number' ? record.partNumber : index + 1,
-                    partTitle: asString(record.partTitle) || `PART ${index + 1}`,
-                    topic: asString(record.topic),
-                    questions,
-                };
-            }),
-        };
-    }
-    return {
-        instruction,
-        parts: [
-            {
-                partNumber: 1,
-                partTitle: '',
-                topic: '',
-                questions: itemsRaw.map(mapItem),
-            },
-        ],
-    };
-}
-function QaPromptCard({ item, index, isReviewMode = false, }) {
-    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-gray-50 px-4 py-2.5", children: [_jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || index + 1] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-2 p-4", children: [_jsx("p", { className: "text-sm font-semibold text-gray-800", children: item.questionText || 'Câu hỏi chưa được nhập' }), item.audioUrl ? (_jsxs("p", { className: "text-xs text-gray-500", children: ["Audio: ", item.audioUrl] })) : null, isReviewMode && item.expectedAnswers.length > 0 ? (_jsxs("div", { className: "rounded-lg border border-emerald-100 bg-emerald-50 px-3 py-2 text-sm text-emerald-800", children: [_jsx("p", { className: "mb-1 font-medium", children: "G\u1EE3i \u00FD \u0111\u00E1p \u00E1n" }), _jsx("ul", { className: "list-disc space-y-1 pl-4", children: item.expectedAnswers.map((answer) => (_jsx("li", { children: answer }, answer))) })] })) : null] })] }));
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SpontaneousQaGroupClient } from '../types/spontaneous-qa-group/SpontaneousQaGroupClient';
+import { mapQuestionToSpontaneousQaGroupData } from '../types/spontaneous-qa-group/map-spontaneous-qa-group-data';
 export function SpontaneousQaGroupViewer({ question, isReviewMode = false, }) {
-    const { instruction, parts } = resolveGroup(question);
-    const showPartChrome = parts.length > 1 || parts.some((part) => part.partTitle || part.topic);
-    return (_jsxs("div", { className: "space-y-5", children: [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: instruction })) : null, parts.map((part) => (_jsxs("section", { className: "space-y-3", children: [showPartChrome ? (_jsxs("div", { children: [part.partTitle ? (_jsx("h3", { className: "text-base font-bold tracking-wide text-sky-600", children: part.partTitle })) : null, part.topic ? (_jsx("p", { className: "text-sm font-semibold text-slate-600", children: part.topic })) : null] })) : null, _jsx("div", { className: "space-y-3", children: part.questions.map((item, index) => (_jsx(QaPromptCard, { item: item, index: index, isReviewMode: isReviewMode }, `${part.partNumber}-${item.questionNumber}-${index}`))) })] }, `part-${part.partNumber}`)))] }));
+    return (_jsx(SpontaneousQaGroupClient, { questionData: mapQuestionToSpontaneousQaGroupData(question), isReviewMode: isReviewMode }));
 }

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

@@ -4,8 +4,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Movers fallback review cases (isReviewMode=true).
  * Source: oe-exam-fe ReviewQuestionRenderer.tsx
  */
-import { MoversAnswerTheQuestionRenderer, MoversFillWordHintRenderer, MoversGridFillRenderer, MoversLabelThePictureRenderer, MoversMatchByWritingAnswerRenderer, MoversMatchWordToPictureRenderer, MoversPictureChooseRenderer, MoversPictureFillBlankChooseRenderer, MoversReadingPassageRenderer, MoversTrueFalseRenderer, MoversTrueFalseCorrectGroupRenderer, MoversFillInBlankGroupRenderer, MoversMatchingWithLinesGroupRenderer, MoversCrossOutWordGroupRenderer, MoversWordFillParagraphRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderingRenderer, MoversWordOrderingGroupRenderer, MoversWriteSentencesRenderer, MoversWritingRenderer, MoversCrosswordPuzzleRenderer, ChooseThenAnswerGroupRenderer, SortWordsIntoCategoriesRenderer, } from '../../../components/exams/take/components/question-renderers';
-import { transformAnswerTheQuestion, transformFillWordHint, transformGridFill, transformLabelPicture, transformMatchByWritingAnswer, transformMatchWordToPicture, transformPictureChoose, transformPictureFillBlankChoose, transformReadingPassage, transformTrueFalse, transformTrueFalseCorrectGroup, transformFillInBlankGroup, transformMatchingWithLinesGroup, transformWordFillParagraph, transformWordFillStructuredForm, transformWordOrdering, transformWordOrderingGroupTake, transformWriteSentences, transformWriteShortLetter, transformCrosswordPuzzle, transformChooseThenAnswerGroup, transformSortWordsIntoCategories, } from '../../../components/exams/take/utils/question-transformers';
+import { MoversAnswerTheQuestionRenderer, MoversGridFillRenderer, MoversLabelThePictureRenderer, MoversMatchByWritingAnswerRenderer, MoversMatchWordToPictureRenderer, MoversReadingPassageRenderer, MoversTrueFalseRenderer, MoversTrueFalseCorrectGroupRenderer, MoversFillInBlankGroupRenderer, MoversMatchingWithLinesGroupRenderer, MoversCrossOutWordGroupRenderer, MoversWordFillParagraphRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderingRenderer, MoversWordOrderingGroupRenderer, MoversWriteSentencesRenderer, MoversWritingRenderer, MoversCrosswordPuzzleRenderer, ChooseThenAnswerGroupRenderer, SortWordsIntoCategoriesRenderer, } from '../../../components/exams/take/components/question-renderers';
+import { transformAnswerTheQuestion, transformGridFill, transformLabelPicture, transformMatchByWritingAnswer, transformMatchWordToPicture, transformReadingPassage, transformTrueFalse, transformTrueFalseCorrectGroup, transformFillInBlankGroup, transformMatchingWithLinesGroup, transformWordFillParagraph, transformWordFillStructuredForm, transformWordOrdering, transformWordOrderingGroupTake, transformWriteSentences, transformWriteShortLetter, transformCrosswordPuzzle, transformChooseThenAnswerGroup, transformSortWordsIntoCategories, } from '../../../components/exams/take/utils/question-transformers';
 import { normalizeCrossOutWordGroupAnswer, transformCrossOutWordGroup, } from '../../../components/exams/take/utils/cross-out-word-group.transformer';
 function asApiQuestions(questions) {
     return questions;
@@ -28,22 +28,6 @@ export function renderMoversReviewBody(ctx) {
             const gradingInfo = essayGradingMap[firstQuestion.id];
             return (_jsx(MoversWritingRenderer, { partNumber: partNo, partName: part.name, prompt: data.prompt, requirements: data.requirements, minWords: data.minWords, maxWords: data.maxWords, answer: writingAnswer, onAnswerChange: handleAnswerChange, isReviewMode: true, guideImages: data.guideImages, passage: data.passage, teacherScore: gradingInfo?.score, maxScore: gradingInfo?.maxScore, teacherFeedback: gradingInfo?.teacherFeedback, writingAssessment: gradingInfo?.writingAssessment }));
         }
-        case 'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER': {
-            const data = transformPictureChoose(apiQuestions);
-            const subQuestionsWithCorrect = data.subQuestions.map((sq) => ({
-                ...sq,
-                correctOptionId: correctOptionIdMap[sq.id],
-            }));
-            return (_jsx(MoversPictureChooseRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: questionCount, subQuestions: subQuestionsWithCorrect, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true }));
-        }
-        case 'LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER': {
-            const data = transformPictureFillBlankChoose(apiQuestions);
-            const subQuestionsWithCorrect = data.subQuestions.map((sq) => ({
-                ...sq,
-                correctOptionId: correctOptionIdMap[sq.id],
-            }));
-            return (_jsx(MoversPictureFillBlankChooseRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: questionCount, subQuestions: subQuestionsWithCorrect, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true }));
-        }
         case 'READ_PASSAGE_AND_ANSWER_QUESTIONS': {
             const data = transformReadingPassage(apiQuestions);
             return (_jsx(MoversReadingPassageRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: data.questions.length, passageTitle: data.passageTitle, passage: data.passage, passageImageUrl: data.passageImageUrl, questions: data.questions, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true, correctOptionIdMap: correctOptionIdMap }));
@@ -58,14 +42,6 @@ export function renderMoversReviewBody(ctx) {
             }));
             return (_jsx(MoversLabelThePictureRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: data.labels.length, imageUrl: data.imageUrl, wordBank: data.wordBank, labels: labelsWithCorrect, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true }));
         }
-        case 'LOOK_PICTURE_FILL_WORD_HINT': {
-            const data = transformFillWordHint(apiQuestions);
-            const subQuestionsWithCorrect = data.subQuestions.map((sq) => ({
-                ...sq,
-                correctAnswer: correctAnswerTextMap[sq.id],
-            }));
-            return (_jsx(MoversFillWordHintRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: questionCount, hintLetters: data.hintLetters, subQuestions: subQuestionsWithCorrect, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true }));
-        }
         case 'FILL_MISSING_WORDS_IN_GRID': {
             const data = transformGridFill(apiQuestions);
             const questionId = questions[0]?.id;

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

@@ -1,7 +1,6 @@
 import { normalizeCrossOutWordGroupAnswer } from '../../components/exams/take/utils/cross-out-word-group.transformer';
 const FLATTENED_ANSWER_TYPES = new Set([
     'READ_PASSAGE_AND_ANSWER_QUESTIONS',
-    'LOOK_PICTURE_FILL_WORD_HINT',
     'LABEL_THE_PICTURE',
     'READ_AND_COLOR_OBJECTS',
     'IMAGE_OBJECT_MATCHING',
@@ -286,9 +285,6 @@ function transformStudentAnswer(questionId, questionType, value) {
     }
     if (questionType === 'LABEL_THE_PICTURE')
         return record.answers ?? value;
-    if (questionType === 'LOOK_PICTURE_FILL_WORD_HINT' && typeof record.answer === 'string' && record.answer.includes(',')) {
-        return Object.fromEntries(record.answer.split(',').map((item, index) => [`${questionId}-blank-${index}`, item.trim()]));
-    }
     if (questionType === 'WORD_FILL_PARAGRAPH') {
         if (Array.isArray(record.answers))
             return record.answers;

package/dist/components/ui/points-input.d.ts

@@ -4,6 +4,7 @@ interface PointsInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, '
     error?: string;
     required?: boolean;
     allowZero?: boolean;
+    onValueChange?: (value: number) => void;
 }
 /**
  * A specialized input component for "Điểm số" (points/score) fields.

package/dist/components/ui/points-input.js

@@ -10,7 +10,7 @@ import { cn } from '../../shared/lib/utils';
  * - Allows clearing the input to enter new values
  * - Strips non-digit characters automatically
  */
-export const PointsInput = forwardRef(({ label = 'Điểm số', error, required = true, allowZero = false, className, id, ...props }, ref) => {
+export const PointsInput = forwardRef(({ label = 'Điểm số', error, required = true, allowZero = false, className, id, onValueChange, onChange, ...props }, ref) => {
     const inputId = id || 'points';
     const handleInput = (e) => {
         const input = e.target;
@@ -28,6 +28,16 @@ export const PointsInput = forwardRef(({ label = 'Điểm số', error, required
             input.value = intValue < minVal ? minVal.toString() : intValue.toString();
         }
     };
-    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Label, { htmlFor: inputId, className: "whitespace-nowrap text-sm font-medium", children: [label, " ", required && _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { ref: ref, id: inputId, type: "number", step: "1", min: allowZero ? "0" : "1", onInput: handleInput, className: cn('w-20', error && 'border-red-500 focus:ring-red-500', className), ...props }), error && _jsx("p", { className: "text-sm text-red-600", children: error })] }));
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Label, { htmlFor: inputId, className: "whitespace-nowrap text-sm font-medium", children: [label, " ", required && _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { ref: ref, id: inputId, type: "number", step: "1", min: allowZero ? "0" : "1", onInput: handleInput, onChange: (e) => {
+                    onChange?.(e);
+                    if (onValueChange) {
+                        const raw = e.target.value;
+                        if (raw === '')
+                            return;
+                        const parsed = parseInt(raw, 10);
+                        if (!Number.isNaN(parsed))
+                            onValueChange(parsed);
+                    }
+                }, className: cn('w-20', error && 'border-red-500 focus:ring-red-500', className), ...props }), error && _jsx("p", { className: "text-sm text-red-600", children: error })] }));
 });
 PointsInput.displayName = 'PointsInput';