@tinyweb_dev/oe-exam-sdk 0.2.12 → 0.2.14

package/dist/components/questions/types/fill-in-blank-group/FillInBlankGroupCreator.js

@@ -8,12 +8,13 @@ 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 { RichTextEditor } from '../../../../components/shared/RichTextEditor';
 import { useDebouncedCallback } from '../../../../shared/lib/hooks';
 import { Eye, Pencil, Plus, Star, Trash2 } from 'lucide-react';
 import { FillInBlankGroupClient } from './FillInBlankGroupClient';
 import { FillInBlankGroupMediaField } from './FillInBlankGroupMediaField';
 import { createEmptyFillInBlankGroupItem } from './map-fill-in-blank-group-data';
-import { blankSlotCount, extractPlaceholderIndices, joinSlashAnswers, normalizeAnswersMatrix, parseSlashAnswers, } from './blank-utils';
+import { blankSlotCount, extractPlaceholderIndices, fromFillInBlankImageUrls, hasAnyBlankOptions, joinSlashAnswers, normalizeAnswersMatrix, normalizeWordBank, parseSlashAnswers, toFillInBlankImageUrls, } from './blank-utils';
 import { FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION } from '../../_shared/types/fill-in-blank-group.type';
 function parsePointsValue(raw, allowZero = false) {
     if (raw === '')
@@ -27,6 +28,7 @@ function parsePointsValue(raw, allowZero = false) {
 function syncItemAnswers(item) {
     const indices = extractPlaceholderIndices(item.question || '');
     const requiredLength = blankSlotCount(item.question || '');
+    const wordBank = normalizeWordBank(item.wordBank, requiredLength);
     return {
         ...item,
         answers: normalizeAnswersMatrix(item.answers, requiredLength).map((alts, index) => {
@@ -34,6 +36,7 @@ function syncItemAnswers(item) {
                 return [];
             return alts.length > 0 ? alts : [''];
         }),
+        ...(wordBank ? { wordBank } : { wordBank: undefined }),
     };
 }
 function normalizeItems(rawItems) {
@@ -54,8 +57,9 @@ function sumPoints(items) {
 }
 export function FillInBlankGroupCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }) {
     const [instruction, setInstruction] = useState(initialData?.instruction || FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION);
+    const [passage, setPassage] = useState(initialData?.passage || '');
     const [audioUrl, setAudioUrl] = useState(initialData?.audioUrl || '');
-    const [imageUrl, setImageUrl] = useState(initialData?.imageUrl || '');
+    const [imageUrl, setImageUrl] = useState(fromFillInBlankImageUrls(toFillInBlankImageUrls(initialData?.imageUrl)) ?? '');
     const [showHints, setShowHints] = useState(initialData?.showHints === true);
     const [hintsText, setHintsText] = useState((initialData?.hints || []).join(' / '));
     const [items, setItems] = useState(() => normalizeItems(initialData?.items));
@@ -68,16 +72,22 @@ export function FillInBlankGroupCreator({ initialData, onChange, externalErrors,
         onChangeRef.current = onChange;
     }, [onChange]);
     const parseHints = (value) => parseSlashAnswers(value);
-    const buildPayload = (nextInstruction = instruction, nextItems = items, nextExplanation = explanation, nextAudioUrl = audioUrl, nextImageUrl = imageUrl, nextShowHints = showHints, nextHintsText = hintsText) => ({
-        instruction: nextInstruction,
-        audioUrl: nextAudioUrl,
-        imageUrl: nextImageUrl,
-        showHints: nextShowHints,
-        hints: parseHints(nextHintsText),
-        items: nextItems,
-        explanation: nextExplanation,
-        points: sumPoints(nextItems),
-    });
+    const buildPayload = (nextInstruction = instruction, nextItems = items, nextExplanation = explanation, nextAudioUrl = audioUrl, nextImageUrl = imageUrl, nextShowHints = showHints, nextHintsText = hintsText, nextPassage = passage) => {
+        const viewMode = hasAnyBlankOptions(nextItems) ? 'WITH_OPTIONS' : undefined;
+        const groupImageUrl = fromFillInBlankImageUrls(toFillInBlankImageUrls(nextImageUrl));
+        return {
+            instruction: nextInstruction,
+            ...(nextPassage.trim() ? { passage: nextPassage } : {}),
+            audioUrl: nextAudioUrl,
+            ...(groupImageUrl !== undefined ? { imageUrl: groupImageUrl } : {}),
+            showHints: nextShowHints,
+            hints: parseHints(nextHintsText),
+            ...(viewMode ? { viewMode } : {}),
+            items: nextItems,
+            explanation: nextExplanation,
+            points: sumPoints(nextItems),
+        };
+    };
     const debouncedOnChange = useDebouncedCallback((payload) => {
         onChangeRef.current?.(payload);
     }, 300);
@@ -89,7 +99,7 @@ export function FillInBlankGroupCreator({ initialData, onChange, externalErrors,
             debouncedOnChange(payload);
             onUnsavedChangesChange?.(true);
         }
-    }, [instruction, audioUrl, imageUrl, showHints, hintsText, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
+    }, [instruction, passage, audioUrl, imageUrl, showHints, hintsText, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
     const validate = () => {
         const nextErrors = [];
         if (!instruction.trim()) {
@@ -111,6 +121,16 @@ export function FillInBlankGroupCreator({ initialData, onChange, externalErrors,
                 if (!alts.some((alt) => alt.trim())) {
                     nextErrors.push(`Câu ${index + 1}: Blank {${blankIndex}} cần ít nhất một đáp án.`);
                 }
+                const options = item.wordBank?.[blankIndex]?.options || [];
+                if (options.length >= 2) {
+                    const missing = alts
+                        .map((alt) => alt.trim())
+                        .filter(Boolean)
+                        .filter((alt) => !options.some((option) => option.toLowerCase() === alt.toLowerCase()));
+                    if (missing.length > 0) {
+                        nextErrors.push(`Câu ${index + 1}: Đáp án {${blankIndex}} phải nằm trong options (${options.join(' / ')}).`);
+                    }
+                }
             });
         });
         setErrors(nextErrors);
@@ -123,7 +143,7 @@ export function FillInBlankGroupCreator({ initialData, onChange, externalErrors,
                 getFormData: () => buildPayload(),
             };
         }
-    }, [validationRef, instruction, audioUrl, imageUrl, showHints, hintsText, items, explanation]);
+    }, [validationRef, instruction, passage, audioUrl, imageUrl, showHints, hintsText, items, explanation]);
     const updateItem = (index, patch) => {
         setItems((prev) => {
             const next = [...prev];
@@ -148,11 +168,23 @@ export function FillInBlankGroupCreator({ initialData, onChange, externalErrors,
     };
     const currentPayload = buildPayload();
     const displayErrors = externalErrors && externalErrors.length > 0 ? externalErrors : errors;
-    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-medium text-gray-900", children: "T\u1EA1o c\u00E2u h\u1ECFi \u0110i\u1EC1n ch\u1ED7 tr\u1ED1ng (Nh\u00F3m)" }), _jsxs("p", { className: "text-sm text-gray-500", children: ["M\u1ED7i d\u00F2ng l\u00E0 1 stem c\u00F3 ", '{0}', ". C\u00F3 th\u1EC3 th\u00EAm audio/\u1EA3nh chung ho\u1EB7c t\u1EEBng item."] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsClientMode((prev) => !prev), className: "gap-2", children: [isClientMode ? _jsx(Pencil, { className: "h-4 w-4" }) : _jsx(Eye, { className: "h-4 w-4" }), isClientMode ? 'Chế độ chỉnh sửa' : 'Xem trước học sinh'] })] }), displayErrors.length > 0 && (_jsxs("div", { className: "rounded-lg border border-red-200 bg-red-50 p-4", children: [_jsx("h3", { className: "text-sm font-medium text-red-800", children: "C\u1EA7n s\u1EEDa c\u00E1c l\u1ED7i sau:" }), _jsx("ul", { className: "mt-2 list-disc space-y-1 pl-5 text-sm text-red-700", children: displayErrors.map((err, i) => (_jsx("li", { children: err }, i))) })] })), isClientMode ? (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base font-semibold", children: "Xem tr\u01B0\u1EDBc hi\u1EC3n th\u1ECB h\u1ECDc sinh" }) }), _jsx(CardContent, { children: _jsx(FillInBlankGroupClient, { questionData: currentPayload }) })] })) : (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base font-semibold", children: "H\u01B0\u1EDBng d\u1EABn v\u00E0 media chung" }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "instruction", children: "H\u01B0\u1EDBng d\u1EABn b\u00E0i l\u00E0m" }), _jsx(Input, { id: "instruction", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION, className: "mt-1" })] }), _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsx(FillInBlankGroupMediaField, { id: "fib-group-audio", label: "Audio chung (optional)", accept: "audio/*", value: audioUrl, onChange: setAudioUrl }), _jsx(FillInBlankGroupMediaField, { id: "fib-group-image", label: "\u1EA2nh chung (optional)", accept: "image/*", value: imageUrl, onChange: setImageUrl })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "show-hints", checked: showHints, onCheckedChange: setShowHints }), _jsx(Label, { htmlFor: "show-hints", children: "Hi\u1EC7n h\u1ED9p t\u1EEB g\u1EE3i \u00FD chung" })] }), showHints && (_jsx(Input, { value: hintsText, onChange: (e) => setHintsText(e.target.value), placeholder: "am / is / are" }))] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs(CardTitle, { className: "text-base font-semibold", children: ["Danh s\u00E1ch c\u00E2u (", items.length, ")"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addItem, className: "gap-2", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm c\u00E2u"] })] }), _jsx(CardContent, { className: "space-y-4", children: items.map((item, index) => (_jsxs("div", { className: "space-y-3 rounded-lg border border-gray-200 bg-gray-50/50 p-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("span", { className: "flex items-center gap-2 text-sm font-medium text-gray-700", children: [_jsx("span", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-blue-100 text-xs font-semibold text-blue-700", children: item.questionNumber || index + 1 }), "C\u00E2u ", index + 1] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: `example-${index}`, checked: item.isExample || false, onCheckedChange: (checked) => updateItem(index, { isExample: checked, points: checked ? 0 : 1 }) }), _jsxs(Label, { htmlFor: `example-${index}`, className: "flex cursor-pointer items-center gap-1 text-xs", children: [_jsx(Star, { className: "h-3 w-3 text-amber-500" }), "Example"] })] }), !item.isExample && (_jsx("div", { className: "w-24", children: _jsx(PointsInput, { value: item.points, allowZero: true, onChange: (event) => updateItem(index, {
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-medium text-gray-900", children: "T\u1EA1o c\u00E2u h\u1ECFi \u0110i\u1EC1n ch\u1ED7 tr\u1ED1ng (Nh\u00F3m)" }), _jsxs("p", { className: "text-sm text-gray-500", children: ["M\u1ED7i d\u00F2ng l\u00E0 1 stem c\u00F3 ", '{0}', ". C\u00F3 th\u1EC3 th\u00EAm audio/\u1EA3nh chung ho\u1EB7c t\u1EEBng item."] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsClientMode((prev) => !prev), className: "gap-2", children: [isClientMode ? _jsx(Pencil, { className: "h-4 w-4" }) : _jsx(Eye, { className: "h-4 w-4" }), isClientMode ? 'Chế độ chỉnh sửa' : 'Xem trước học sinh'] })] }), displayErrors.length > 0 && (_jsxs("div", { className: "rounded-lg border border-red-200 bg-red-50 p-4", children: [_jsx("h3", { className: "text-sm font-medium text-red-800", children: "C\u1EA7n s\u1EEDa c\u00E1c l\u1ED7i sau:" }), _jsx("ul", { className: "mt-2 list-disc space-y-1 pl-5 text-sm text-red-700", children: displayErrors.map((err, i) => (_jsx("li", { children: err }, i))) })] })), isClientMode ? (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base font-semibold", children: "Xem tr\u01B0\u1EDBc hi\u1EC3n th\u1ECB h\u1ECDc sinh" }) }), _jsx(CardContent, { children: _jsx(FillInBlankGroupClient, { questionData: currentPayload }) })] })) : (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base font-semibold", children: "H\u01B0\u1EDBng d\u1EABn v\u00E0 media chung" }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "instruction", children: "H\u01B0\u1EDBng d\u1EABn b\u00E0i l\u00E0m" }), _jsx(Input, { id: "instruction", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION, className: "mt-1" })] }), _jsxs("div", { children: [_jsx(Label, { children: "N\u1ED9i dung b\u00E0i \u0111\u1ECDc (Passage)" }), _jsx("div", { className: "mt-1", children: _jsx(RichTextEditor, { value: passage, onChange: setPassage, minHeightClassName: "min-h-[160px]" }) })] }), _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsx(FillInBlankGroupMediaField, { id: "fib-group-audio", label: "Audio chung (optional)", accept: "audio/*", value: audioUrl, onChange: setAudioUrl }), _jsx(FillInBlankGroupMediaField, { id: "fib-group-image", label: "\u1EA2nh chung (optional)", accept: "image/*", value: toFillInBlankImageUrls(imageUrl)[0] || '', onChange: setImageUrl })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "show-hints", checked: showHints, onCheckedChange: setShowHints }), _jsx(Label, { htmlFor: "show-hints", children: "Hi\u1EC7n h\u1ED9p t\u1EEB g\u1EE3i \u00FD chung" })] }), showHints && (_jsx(Input, { value: hintsText, onChange: (e) => setHintsText(e.target.value), placeholder: "am / is / are" }))] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs(CardTitle, { className: "text-base font-semibold", children: ["Danh s\u00E1ch c\u00E2u (", items.length, ")"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addItem, className: "gap-2", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm c\u00E2u"] })] }), _jsx(CardContent, { className: "space-y-4", children: items.map((item, index) => (_jsxs("div", { className: "space-y-3 rounded-lg border border-gray-200 bg-gray-50/50 p-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("span", { className: "flex items-center gap-2 text-sm font-medium text-gray-700", children: [_jsx("span", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-blue-100 text-xs font-semibold text-blue-700", children: item.questionNumber || index + 1 }), "C\u00E2u ", index + 1] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: `example-${index}`, checked: item.isExample || false, onCheckedChange: (checked) => updateItem(index, { isExample: checked, points: checked ? 0 : 1 }) }), _jsxs(Label, { htmlFor: `example-${index}`, className: "flex cursor-pointer items-center gap-1 text-xs", children: [_jsx(Star, { className: "h-3 w-3 text-amber-500" }), "Example"] })] }), !item.isExample && (_jsx("div", { className: "w-24", children: _jsx(PointsInput, { value: item.points, allowZero: true, onChange: (event) => updateItem(index, {
                                                                     points: parsePointsValue(event.target.value, true),
-                                                                }) }) })), items.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeItem(index), className: "text-red-500 hover:bg-red-50", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] })] }), _jsxs("div", { children: [_jsxs(Label, { htmlFor: `question-${index}`, children: ["Stem (d\u00F9ng ", '{0}', ", ", '{1}', "...)"] }), _jsx(Textarea, { id: `question-${index}`, value: item.question, onChange: (e) => updateItem(index, { question: e.target.value }), placeholder: "{0}", className: "mt-1" })] }), extractPlaceholderIndices(item.question).map((blankIndex) => (_jsxs("div", { children: [_jsxs(Label, { htmlFor: `answer-${index}-${blankIndex}`, children: ["\u0110\u00E1p \u00E1n blank ", '{' + blankIndex + '}', " (c\u00E1ch nhau b\u1EDFi /)"] }), _jsx(Input, { id: `answer-${index}-${blankIndex}`, value: joinSlashAnswers(item.answers[blankIndex]), onChange: (e) => {
-                                                        const next = [...item.answers];
-                                                        next[blankIndex] = parseSlashAnswers(e.target.value);
-                                                        updateItem(index, { answers: next });
-                                                    }, placeholder: "is / 's", className: "mt-1" })] }, blankIndex))), _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsx(FillInBlankGroupMediaField, { id: `fib-item-image-${index}`, label: "\u1EA2nh item (optional)", accept: "image/*", value: item.imageUrl || '', onChange: (url) => updateItem(index, { imageUrl: url }) }), !audioUrl && (_jsx(FillInBlankGroupMediaField, { id: `fib-item-audio-${index}`, label: "Audio item (khi kh\u00F4ng c\u00F3 audio nh\u00F3m)", accept: "audio/*", value: item.audioUrl || '', onChange: (url) => updateItem(index, { audioUrl: url }) }))] })] }, index))) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Gi\u1EA3i th\u00EDch" }) }), _jsx(CardContent, { children: _jsx(Textarea, { id: "explanation", value: explanation, onChange: (event) => setExplanation(event.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3 }) })] })] }))] }));
+                                                                }) }) })), items.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeItem(index), className: "text-red-500 hover:bg-red-50", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] })] }), _jsxs("div", { children: [_jsxs(Label, { htmlFor: `question-${index}`, children: ["Stem (d\u00F9ng ", '{0}', ", ", '{1}', "...)"] }), _jsx(Textarea, { id: `question-${index}`, value: item.question, onChange: (e) => updateItem(index, { question: e.target.value }), placeholder: "{0}", className: "mt-1" })] }), extractPlaceholderIndices(item.question).map((blankIndex) => (_jsxs("div", { className: "grid gap-3 md:grid-cols-2", children: [_jsxs("div", { children: [_jsxs(Label, { htmlFor: `answer-${index}-${blankIndex}`, children: ["\u0110\u00E1p \u00E1n blank ", '{' + blankIndex + '}', " (c\u00E1ch nhau b\u1EDFi /)"] }), _jsx(Input, { id: `answer-${index}-${blankIndex}`, value: joinSlashAnswers(item.answers[blankIndex]), onChange: (e) => {
+                                                                const next = [...item.answers];
+                                                                next[blankIndex] = parseSlashAnswers(e.target.value);
+                                                                updateItem(index, { answers: next });
+                                                            }, placeholder: "is / 's", className: "mt-1" })] }), _jsxs("div", { children: [_jsxs(Label, { htmlFor: `options-${index}-${blankIndex}`, children: ["Options blank ", '{' + blankIndex + '}', " (dropdown, c\u00E1ch nhau /)"] }), _jsx(Input, { id: `options-${index}-${blankIndex}`, value: joinSlashAnswers(item.wordBank?.[blankIndex]?.options), onChange: (e) => {
+                                                                const requiredLength = blankSlotCount(item.question);
+                                                                const next = [...(item.wordBank || [])];
+                                                                while (next.length < requiredLength)
+                                                                    next.push(null);
+                                                                const options = parseSlashAnswers(e.target.value);
+                                                                next[blankIndex] = options.length >= 2 ? { options } : null;
+                                                                updateItem(index, {
+                                                                    wordBank: next.some((entry) => entry && entry.options.length >= 2)
+                                                                        ? next
+                                                                        : undefined,
+                                                                });
+                                                            }, placeholder: "can / can't", className: "mt-1" })] })] }, blankIndex))), _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsx(FillInBlankGroupMediaField, { id: `fib-item-image-${index}`, label: "\u1EA2nh item (optional)", accept: "image/*", value: Array.isArray(item.imageUrl) ? (item.imageUrl[0] || '') : (item.imageUrl || ''), onChange: (url) => updateItem(index, { imageUrl: url }) }), !audioUrl && (_jsx(FillInBlankGroupMediaField, { id: `fib-item-audio-${index}`, label: "Audio item (khi kh\u00F4ng c\u00F3 audio nh\u00F3m)", accept: "audio/*", value: item.audioUrl || '', onChange: (url) => updateItem(index, { audioUrl: url }) }))] })] }, index))) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Gi\u1EA3i th\u00EDch" }) }), _jsx(CardContent, { children: _jsx(Textarea, { id: "explanation", value: explanation, onChange: (event) => setExplanation(event.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3 }) })] })] }))] }));
 }

package/dist/components/questions/types/fill-in-blank-group/blank-utils.d.ts

@@ -1,3 +1,4 @@
+import type { FillInBlankWordBankEntry } from '../../_shared/types/fill-in-blank-group.type';
 import { FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION } from '../../_shared/types/fill-in-blank-group.type';
 export { FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION };
 export type FillBlankStemPart = {
@@ -15,6 +16,28 @@ export declare function normalizeAnswersMatrix(raw: unknown, requiredLength?: nu
 export declare function joinSlashAnswers(alts: string[] | undefined): string;
 export declare function parseSlashAnswers(text: string): string[];
 export declare function splitStem(question: string): FillBlankStemPart[];
+export type StemTextDecoration = {
+    type: 'text';
+    value: string;
+} | {
+    type: 'tick';
+    value: string;
+} | {
+    type: 'cross';
+    value: string;
+} | {
+    type: 'br';
+};
+/** Split a stem text fragment into ticks, crosses, line breaks, and plain text. */
+export declare function splitStemTextDecorations(text: string): StemTextDecoration[];
 export declare function normalizeStudentText(value: string): string;
 export declare function isBlankMatch(studentValue: string | undefined, alts: string[] | undefined): boolean;
+export declare function parseWordBankEntry(raw: unknown): FillInBlankWordBankEntry;
+export declare function normalizeWordBank(raw: unknown, requiredLength?: number): FillInBlankWordBankEntry[] | undefined;
+export declare function resolveBlankOptions(blankIndex: number, itemWordBank?: FillInBlankWordBankEntry[], groupWordBank?: FillInBlankWordBankEntry[]): string[] | undefined;
+export declare function hasAnyBlankOptions(items: Array<{
+    wordBank?: FillInBlankWordBankEntry[];
+}>, groupWordBank?: FillInBlankWordBankEntry[]): boolean;
+export declare function toFillInBlankImageUrls(value: unknown): string[];
+export declare function fromFillInBlankImageUrls(urls: string[]): string | string[] | undefined;
 export declare function padStudentAnswers(raw: unknown, blankCount: number): string[];

package/dist/components/questions/types/fill-in-blank-group/blank-utils.js

@@ -75,6 +75,42 @@ export function splitStem(question) {
     }
     return parts;
 }
+const STEM_TICK_MARKS = new Set(['✓', '✔', '✅']);
+const STEM_CROSS_MARKS = new Set(['✗', '✘', '❌', '×']);
+const STEM_DECORATION_RE = /[✓✔✅✗✘❌×]|\n/g;
+/** Split a stem text fragment into ticks, crosses, line breaks, and plain text. */
+export function splitStemTextDecorations(text) {
+    if (!text)
+        return [];
+    const normalized = text.replace(/\r\n/g, '\n');
+    const parts = [];
+    let lastIndex = 0;
+    let match;
+    const regex = new RegExp(STEM_DECORATION_RE.source, 'g');
+    while ((match = regex.exec(normalized)) !== null) {
+        if (match.index > lastIndex) {
+            parts.push({ type: 'text', value: normalized.slice(lastIndex, match.index) });
+        }
+        const token = match[0];
+        if (token === '\n') {
+            parts.push({ type: 'br' });
+        }
+        else if (STEM_TICK_MARKS.has(token)) {
+            parts.push({ type: 'tick', value: token });
+        }
+        else if (STEM_CROSS_MARKS.has(token)) {
+            parts.push({ type: 'cross', value: token });
+        }
+        else {
+            parts.push({ type: 'text', value: token });
+        }
+        lastIndex = match.index + token.length;
+    }
+    if (lastIndex < normalized.length) {
+        parts.push({ type: 'text', value: normalized.slice(lastIndex) });
+    }
+    return parts;
+}
 export function normalizeStudentText(value) {
     return value.toString().trim().toLowerCase().replace(/\s+/g, ' ');
 }
@@ -84,6 +120,59 @@ export function isBlankMatch(studentValue, alts) {
         return false;
     return alts.some((alt) => normalizeStudentText(alt) === user);
 }
+export function parseWordBankEntry(raw) {
+    if (raw == null)
+        return null;
+    const options = Array.isArray(raw)
+        ? raw.map((item) => String(item ?? '').trim()).filter(Boolean)
+        : typeof raw === 'object' && Array.isArray(raw.options)
+            ? raw.options
+                .map((item) => String(item ?? '').trim())
+                .filter(Boolean)
+            : [];
+    return options.length >= 2 ? { options } : null;
+}
+export function normalizeWordBank(raw, requiredLength) {
+    if (!Array.isArray(raw))
+        return undefined;
+    let result = raw.map((entry) => parseWordBankEntry(entry));
+    if (typeof requiredLength === 'number' && requiredLength > 0) {
+        result = result.slice(0, requiredLength);
+        while (result.length < requiredLength)
+            result.push(null);
+    }
+    return result.some((entry) => entry && entry.options.length >= 2) ? result : undefined;
+}
+export function resolveBlankOptions(blankIndex, itemWordBank, groupWordBank) {
+    const entry = itemWordBank?.[blankIndex] ?? groupWordBank?.[blankIndex];
+    if (entry && entry.options.length >= 2)
+        return entry.options;
+    return undefined;
+}
+export function hasAnyBlankOptions(items, groupWordBank) {
+    if (normalizeWordBank(groupWordBank))
+        return true;
+    return items.some((item) => Boolean(normalizeWordBank(item.wordBank)));
+}
+export function toFillInBlankImageUrls(value) {
+    if (Array.isArray(value)) {
+        return value
+            .filter((url) => typeof url === 'string')
+            .map((url) => url.trim())
+            .filter((url) => url.length > 0);
+    }
+    if (typeof value === 'string' && value.trim()) {
+        return [value.trim()];
+    }
+    return [];
+}
+export function fromFillInBlankImageUrls(urls) {
+    if (urls.length === 0)
+        return undefined;
+    if (urls.length === 1)
+        return urls[0];
+    return urls;
+}
 export function padStudentAnswers(raw, blankCount) {
     const values = Array.isArray(raw?.answers)
         ? raw.answers.map((item) => String(item ?? ''))

package/dist/components/questions/types/fill-in-blank-group/map-fill-in-blank-group-data.js

@@ -1,5 +1,5 @@
 import { FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION } from '../../_shared/types/fill-in-blank-group.type';
-import { blankSlotCount, extractPlaceholderIndices, normalizeAnswersMatrix, } from './blank-utils';
+import { blankSlotCount, extractPlaceholderIndices, hasAnyBlankOptions, fromFillInBlankImageUrls, normalizeAnswersMatrix, normalizeWordBank, toFillInBlankImageUrls, } from './blank-utils';
 function isRecord(value) {
     return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
@@ -39,16 +39,18 @@ export function mapFillInBlankGroupItem(item, index, fallbackAnswer) {
             return [];
         return alts.length > 0 ? alts : [''];
     });
+    const wordBank = normalizeWordBank(content.wordBank ?? record.wordBank, blankSlotCount(question));
     return {
         question,
         answers,
         caseSensitive: correctAnswer.caseSensitive === true
             || record.caseSensitive === true
             || fallback.caseSensitive === true,
-        imageUrl: asString(content.imageUrl) || asString(record.imageUrl),
+        imageUrl: fromFillInBlankImageUrls(toFillInBlankImageUrls(content.imageUrl ?? record.imageUrl)),
         audioUrl: asString(content.audioUrl) || asString(record.audioUrl),
         showHints: content.showHints === true,
         hints: asStringArray(content.hints),
+        ...(wordBank ? { wordBank } : {}),
         isExample,
         points: isExample ? 0 : (typeof record.points === 'number' ? record.points : 1),
         questionNumber: typeof record.questionNumber === 'number' ? record.questionNumber : index + 1,
@@ -66,33 +68,49 @@ export function mapQuestionToFillInBlankGroupData(question) {
     const meta = asRecord(content.meta);
     if (Array.isArray(content.items)) {
         const items = content.items.map((item, index) => mapFillInBlankGroupItem(item, index, fallbackAnswers[index]));
+        const groupWordBank = normalizeWordBank(meta.wordBank ?? content.wordBank);
+        const viewMode = meta.viewMode === 'WITH_OPTIONS' || hasAnyBlankOptions(items, groupWordBank)
+            ? 'WITH_OPTIONS'
+            : undefined;
         return {
             instruction: asString(meta.instruction) || FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION,
+            passage: asString(meta.passage),
             audioUrl: asString(meta.audioUrl),
-            imageUrl: asString(meta.imageUrl),
+            imageUrl: fromFillInBlankImageUrls(toFillInBlankImageUrls(meta.imageUrl)),
             showHints: meta.showHints === true,
             hints: asStringArray(meta.hints),
+            ...(viewMode ? { viewMode } : {}),
+            ...(groupWordBank ? { wordBank: groupWordBank } : {}),
             items,
             explanation,
             points: items.reduce((total, item) => (item.isExample ? total : total + (item.points || 0)), 0),
         };
     }
     if (Array.isArray(answer.items)) {
+        const items = answer.items.map((item, index) => mapFillInBlankGroupItem(item, index, fallbackAnswers[index]));
+        const groupWordBank = normalizeWordBank(answer.wordBank);
+        const viewMode = answer.viewMode === 'WITH_OPTIONS' || hasAnyBlankOptions(items, groupWordBank)
+            ? 'WITH_OPTIONS'
+            : undefined;
         return {
             instruction: asString(answer.instruction, FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION),
+            passage: asString(answer.passage),
             audioUrl: asString(answer.audioUrl),
-            imageUrl: asString(answer.imageUrl),
+            imageUrl: fromFillInBlankImageUrls(toFillInBlankImageUrls(answer.imageUrl)),
             showHints: answer.showHints === true,
             hints: asStringArray(answer.hints),
-            items: answer.items.map((item, index) => mapFillInBlankGroupItem(item, index, fallbackAnswers[index])),
+            ...(viewMode ? { viewMode } : {}),
+            ...(groupWordBank ? { wordBank: groupWordBank } : {}),
+            items,
             explanation,
             points: typeof answer.points === 'number' ? answer.points : undefined,
         };
     }
     return {
         instruction: FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION,
+        passage: '',
         audioUrl: '',
-        imageUrl: '',
+        imageUrl: undefined,
         showHints: false,
         hints: [],
         items: [createEmptyFillInBlankGroupItem(1)],

package/dist/components/questions/types/fill-in-blank-group/transform.js

@@ -1,5 +1,5 @@
 import { FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION, FILL_IN_BLANK_ITEM_TYPE, } from '../../_shared/types/fill-in-blank-group.type';
-import { blankSlotCount, extractPlaceholderIndices, normalizeAnswersMatrix, } from './blank-utils';
+import { blankSlotCount, extractPlaceholderIndices, hasAnyBlankOptions, fromFillInBlankImageUrls, normalizeAnswersMatrix, normalizeWordBank, toFillInBlankImageUrls, } from './blank-utils';
 function sumGradablePoints(items) {
     return items.reduce((total, item) => {
         if (item.isExample)
@@ -20,6 +20,9 @@ function toItemAnswer(item) {
         caseSensitive: item.caseSensitive === true,
     };
 }
+function isContentEmpty(html) {
+    return !html || html === '<p></p>' || html === '<p><br></p>' || html.trim() === '';
+}
 /**
  * wrapOnSave nests creator fields under `answer`. getFormData() (Quiz Playground
  * Update save) returns the same fields at the root. Prefer nested items, then root.
@@ -50,15 +53,18 @@ export const transformFillInBlankGroup = (question) => {
         const hints = Array.isArray(item.hints)
             ? item.hints.map((hint) => String(hint ?? '').trim()).filter(Boolean)
             : [];
+        const wordBank = normalizeWordBank(item.wordBank, blankSlotCount(item.question || ''));
+        const imageUrl = fromFillInBlankImageUrls(toFillInBlankImageUrls(item.imageUrl));
         return {
             questionType: FILL_IN_BLANK_ITEM_TYPE,
             ...(item.isExample ? { isExample: true } : {}),
             content: {
                 question: item.question || '',
-                ...(item.imageUrl ? { imageUrl: item.imageUrl } : {}),
+                ...(imageUrl !== undefined ? { imageUrl } : {}),
                 ...(item.audioUrl ? { audioUrl: item.audioUrl } : {}),
                 ...(item.showHints ? { showHints: true } : {}),
                 ...(hints.length > 0 ? { hints } : {}),
+                ...(wordBank ? { wordBank } : {}),
             },
             correctAnswer,
             points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
@@ -68,14 +74,23 @@ export const transformFillInBlankGroup = (question) => {
     const groupHints = Array.isArray(answerData?.hints)
         ? answerData.hints.map((hint) => String(hint ?? '').trim()).filter(Boolean)
         : [];
+    const passage = answerData?.passage?.trim();
+    const groupWordBank = normalizeWordBank(answerData?.wordBank);
+    const viewMode = answerData?.viewMode === 'WITH_OPTIONS' || hasAnyBlankOptions(items, groupWordBank)
+        ? 'WITH_OPTIONS'
+        : undefined;
+    const groupImageUrl = fromFillInBlankImageUrls(toFillInBlankImageUrls(answerData?.imageUrl));
     return {
         apiContent: {
             meta: {
                 instruction: answerData?.instruction || FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION,
+                ...(!isContentEmpty(passage) ? { passage } : {}),
                 ...(answerData?.audioUrl ? { audioUrl: answerData.audioUrl } : {}),
-                ...(answerData?.imageUrl ? { imageUrl: answerData.imageUrl } : {}),
+                ...(groupImageUrl !== undefined ? { imageUrl: groupImageUrl } : {}),
                 ...(answerData?.showHints ? { showHints: true } : {}),
                 ...(groupHints.length > 0 ? { hints: groupHints } : {}),
+                ...(viewMode ? { viewMode } : {}),
+                ...(groupWordBank ? { wordBank: groupWordBank } : {}),
             },
             items: apiItems,
         },

package/dist/components/questions/types/match-word-to-picture-group/MatchWordToPictureGroupClient.js

@@ -1,25 +1,54 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check, CircleHelp, Lightbulb, Star, X } from 'lucide-react';
+import { BookOpen, Check, CircleHelp, Lightbulb, Star, Volume2, X } from 'lucide-react';
 import { cn } from '../../../../shared/lib/utils';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { toMatchWordToPictureImageUrls } from '../../_shared/types/match-word-to-picture-group.type';
 function normalizeWord(value) {
     return value.trim().toLowerCase();
 }
-function ClientImageItem({ url, alt }) {
-    const { previewUrl, isLoading } = usePresignedFileUrl(url);
-    const src = previewUrl ||
-        (typeof url === 'string' &&
-            (url.startsWith('http') || url.startsWith('blob:') || url.startsWith('data:'))
-            ? url
-            : '');
+function isPlayableAudioUrl(value) {
+    return (value.startsWith('http://')
+        || value.startsWith('https://')
+        || value.startsWith('blob:')
+        || value.startsWith('data:'));
+}
+function toPresignKey(value) {
+    const trimmed = value.trim();
+    if (isPlayableAudioUrl(trimmed)) {
+        return trimmed;
+    }
+    return trimmed.replace(/^\/+/, '');
+}
+function ClientAudio({ url }) {
+    const fileKey = toPresignKey(url);
+    const { previewUrl, isLoading } = usePresignedFileUrl(fileKey);
+    const src = previewUrl || (isPlayableAudioUrl(fileKey) ? fileKey : '');
+    if (isLoading) {
+        return (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2", children: [_jsx(Volume2, { className: "h-4 w-4 text-slate-500" }), _jsx("div", { className: "h-8 w-full max-w-xs animate-pulse rounded-md bg-slate-100" })] }));
+    }
+    if (!src) {
+        return null;
+    }
+    return (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2", children: [_jsx(Volume2, { className: "h-4 w-4 text-slate-500" }), _jsx("audio", { controls: true, src: src, className: "h-8 max-w-full", preload: "metadata" })] }));
+}
+function isDisplayableImageUrl(value) {
+    return (value.startsWith('http://')
+        || value.startsWith('https://')
+        || value.startsWith('blob:')
+        || value.startsWith('data:'));
+}
+function ClientImageItem({ url, alt, large = false, }) {
+    const fileKey = toPresignKey(url);
+    const { previewUrl, isLoading } = usePresignedFileUrl(fileKey);
+    const src = previewUrl || (isDisplayableImageUrl(fileKey) ? fileKey : '');
     if (!url) {
         return (_jsx("div", { className: "flex h-28 w-28 items-center justify-center rounded-lg border border-dashed border-gray-300 bg-gray-50 text-xs text-gray-400", children: "Ch\u01B0a c\u00F3 \u1EA3nh" }));
     }
     if (!src && !isLoading) {
         return (_jsx("div", { className: "flex h-28 w-28 items-center justify-center rounded-lg border border-gray-200 bg-gray-50 text-xs text-gray-400", children: "Kh\u00F4ng t\u1EA3i \u0111\u01B0\u1EE3c \u1EA3nh" }));
     }
-    return (_jsx("div", { className: "relative h-28 w-28 flex-shrink-0 overflow-hidden rounded-lg border border-gray-200 bg-gray-50", children: isLoading ? (_jsx("div", { className: "flex h-full w-full items-center justify-center", children: _jsx("div", { className: "h-6 w-6 animate-spin rounded-full border-2 border-gray-200 border-t-violet-500" }) })) : (_jsx("img", { src: src, alt: alt || 'Picture', className: "h-full w-full object-contain" })) }));
+    return (_jsx("div", { className: cn('relative flex-shrink-0 overflow-hidden rounded-lg border border-gray-200 bg-gray-50', large ? 'max-h-80 w-full max-w-xl' : 'h-28 w-28'), children: isLoading ? (_jsx("div", { className: "flex h-28 w-full items-center justify-center", children: _jsx("div", { className: "h-6 w-6 animate-spin rounded-full border-2 border-gray-200 border-t-violet-500" }) })) : (_jsx("img", { src: src, alt: alt || 'Picture', className: cn('object-contain', large ? 'mx-auto max-h-80 w-auto' : 'h-full w-full') })) }));
 }
 export function MatchWordToPictureGroupClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, }) {
     const items = questionData.items || [];
@@ -40,7 +69,7 @@ export function MatchWordToPictureGroupClient({ questionData, isReviewMode = fal
             usedWords.add(normalizeWord(value));
         }
     });
-    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 })), wordBank.length > 0 && (_jsxs("div", { className: "rounded-xl border border-violet-200 bg-gradient-to-r from-violet-50 to-indigo-50 p-4", children: [_jsx("p", { className: "mb-3 text-sm font-semibold text-violet-700", children: "Word bank:" }), _jsx("div", { className: "flex flex-wrap gap-2", children: wordBank.map((word, index) => {
+    return (_jsxs("div", { className: "space-y-4", children: [(questionData.title || questionData.instruction) && (_jsxs("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3", children: [questionData.title && (_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-indigo-500", children: questionData.title })), questionData.instruction && (_jsx("p", { className: "text-sm font-medium text-indigo-800", children: questionData.instruction }))] })), questionData.audioUrl ? _jsx(ClientAudio, { url: questionData.audioUrl }) : null, toMatchWordToPictureImageUrls(questionData.imageUrl).length > 0 ? (_jsx("div", { className: "flex flex-wrap justify-center gap-3 rounded-lg border border-slate-100 bg-slate-50 p-3", children: toMatchWordToPictureImageUrls(questionData.imageUrl).map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh bài (${imageIndex + 1})`, large: true }, `mwtp-cover-${imageIndex}`))) })) : null, questionData.passage ? (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-white p-5 shadow-xs", children: [_jsxs("div", { className: "mb-2.5 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-indigo-700", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: "B\u00E0i \u0111\u1ECDc (Reading Passage)" })] }), _jsx("div", { className: "prose prose-sm max-w-none leading-relaxed text-gray-800", dangerouslySetInnerHTML: { __html: questionData.passage } })] })) : null, wordBank.length > 0 && (_jsxs("div", { className: "rounded-xl border border-violet-200 bg-gradient-to-r from-violet-50 to-indigo-50 p-4", children: [_jsx("p", { className: "mb-3 text-sm font-semibold text-violet-700", children: "Word bank:" }), _jsx("div", { className: "flex flex-wrap gap-2", children: wordBank.map((word, index) => {
                             const isUsed = usedWords.has(normalizeWord(word));
                             return (_jsx("span", { className: cn('rounded-full border px-3 py-1 text-sm font-semibold', isUsed
                                     ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
@@ -52,7 +81,7 @@ export function MatchWordToPictureGroupClient({ questionData, isReviewMode = fal
                 const canSelect = !isReviewMode && !item.isExample && Boolean(onAnswerChange);
                 const isCorrect = normalizeWord(selectedWord) === normalizeWord(item.correctAnswer) &&
                     Boolean(item.correctAnswer);
-                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-4 py-2.5", 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-violet-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: "flex flex-col gap-4 p-4 sm:flex-row sm:items-center", children: [_jsx(ClientImageItem, { url: item.imageUrl, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1}` }), _jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [_jsx("p", { className: "text-sm font-semibold text-gray-800", children: "Ch\u1ECDn t\u1EEB ph\u00F9 h\u1EE3p" }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("select", { value: selectedWord, disabled: !canSelect, onChange: (event) => handleSelect(itemIndex, event.target.value), className: cn('h-10 max-w-xs rounded-md border-2 bg-white px-3 text-sm font-medium', isReviewMode && isCorrect
+                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-4 py-2.5", 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-violet-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: "flex flex-col gap-4 p-4 sm:flex-row sm:items-center", children: [toMatchWordToPictureImageUrls(item.imageUrl).length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-2", children: toMatchWordToPictureImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1}${imageIndex > 0 ? ` (${imageIndex + 1})` : ''}` }, `${item.questionNumber}-${imageIndex}`))) })) : null, _jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [_jsxs("p", { className: "text-sm font-semibold text-gray-800", children: [item.questionNumber || itemIndex + 1, ". Ch\u1ECDn t\u1EEB ph\u00F9 h\u1EE3p"] }), _jsxs("div", { className: "flex items-center gap-3", children: [item.isExample ? (_jsx("span", { className: "text-sm italic text-gray-800 underline decoration-gray-400", children: item.correctAnswer })) : (_jsxs("select", { value: selectedWord, disabled: !canSelect, onChange: (event) => handleSelect(itemIndex, event.target.value), className: cn('h-10 max-w-xs rounded-md border-2 bg-white px-3 text-sm font-medium', isReviewMode && isCorrect
                                                         ? 'border-green-400 bg-green-50 text-green-700'
                                                         : isReviewMode && selectedWord && !isCorrect
                                                             ? 'border-red-400 bg-red-50 text-red-700'
@@ -60,6 +89,6 @@ export function MatchWordToPictureGroupClient({ questionData, isReviewMode = fal
                                                             const isUsedByOther = usedWords.has(normalizeWord(word)) &&
                                                                 normalizeWord(word) !== normalizeWord(selectedWord);
                                                             return (_jsx("option", { value: word, disabled: isUsedByOther, children: word }, `${word}-${wordIndex}`));
-                                                        })] }), isReviewMode && !item.isExample && (_jsx("span", { className: "flex items-center gap-1", children: isCorrect ? (_jsx(Check, { className: "h-5 w-5 text-green-500" })) : (_jsx(X, { className: "h-5 w-5 text-red-500" })) }))] }), isReviewMode && !item.isExample && !isCorrect && (_jsxs("p", { className: "text-sm text-green-700", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", _jsx("strong", { children: item.correctAnswer || '—' })] }))] })] })] }, `${item.questionNumber}-${itemIndex}`));
+                                                        })] })), isReviewMode && !item.isExample && (_jsx("span", { className: "flex items-center gap-1", children: isCorrect ? (_jsx(Check, { className: "h-5 w-5 text-green-500" })) : (_jsx(X, { className: "h-5 w-5 text-red-500" })) }))] }), isReviewMode && !item.isExample && !isCorrect && (_jsxs("p", { className: "text-sm text-green-700", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", _jsx("strong", { children: item.correctAnswer || '—' })] }))] })] })] }, `${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] }))] }));
 }