@tinyweb_dev/oe-exam-sdk 1.0.0 → 1.0.1

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

@@ -15,13 +15,31 @@ import { blankHasAnswer, compactFillInBlankAnswers, formatBlankAnswersDisplay, e
 import { useDebouncedCallback, usePresignedFileUrl } from '../../../../shared/lib/hooks';
 import { FileUpload } from '../../../../components/ui/file-upload';
 import { BasicQuestionGroupCard } from '../../groups/BasicQuestionGroupCard';
+import { ImageLabelGroupCard } from '../../groups/ImageLabelGroupCard';
 import { useBasicQuestionGroup } from '../../_shared/hooks/useBasicQuestionGroup';
-function FillInBlankCreatorContent({ initialData, onChange, externalErrors, validationRef, groups, questionIndexInPart, partId, questionConfig, headerExtra, }) {
+function resolveInitialImageLabels(initialData, suggestedAnswers) {
+    const fromPayload = initialData?.imageLabels || initialData?.questionGroup?.payload?.imageLabels;
+    if (Array.isArray(fromPayload) && fromPayload.length > 0) {
+        return fromPayload.map((item) => ({
+            imageUrl: item?.imageUrl || '',
+            label: item?.label || '',
+        }));
+    }
+    if (suggestedAnswers?.length) {
+        return suggestedAnswers.map((label) => ({ imageUrl: '', label }));
+    }
+    return [];
+}
+function FillInBlankCreatorContent({ initialData, onChange, externalErrors, validationRef, groups, questionIndexInPart, partId, questionConfig, groupType, suggestedAnswers, headerExtra, }) {
+    const effectiveGroupType = (groupType || 'BASIC').toUpperCase();
+    const isImageLabelGroup = effectiveGroupType === 'IMAGE_LABEL';
+    const initialImageLabels = resolveInitialImageLabels(initialData, suggestedAnswers);
     // ============ GROUP (shared title / content / image) ============
-    const { isGrouped, currentGroupNumber, groupTitle, groupSubtitle, groupContent, imageUrl: groupImageUrl, setGroupTitle, setGroupSubtitle, setGroupContent, setImageUrl: setGroupImageUrl, } = useBasicQuestionGroup({
+    const { isGrouped, currentGroupNumber, isFirstInGroup, groupTitle, groupSubtitle, groupContent, imageUrl: groupImageUrl, imageLabels, setGroupTitle, setGroupSubtitle, setGroupContent, setImageUrl: setGroupImageUrl, setImageLabels, } = useBasicQuestionGroup({
         partId,
         groups,
         questionIndexInPart,
+        imageLabelCount: isImageLabelGroup ? (initialImageLabels.length || 1) : 0,
         initialData: {
             title: (() => {
                 if (initialData?.content?.passageTitle)
@@ -60,6 +78,7 @@ function FillInBlankCreatorContent({ initialData, onChange, externalErrors, vali
                     return initialData.groupImageUrl;
                 return '';
             })(),
+            imageLabels: initialImageLabels,
         },
     });
     // ============ STATE ============
@@ -232,10 +251,11 @@ function FillInBlankCreatorContent({ initialData, onChange, externalErrors, vali
                     groupContent: isGrouped ? groupContent : '',
                     groupNumber: currentGroupNumber,
                     groups,
+                    ...(isGrouped && isImageLabelGroup ? { imageLabels } : {}),
                 }),
             };
         }
-    }, [validationRef, question, answers, explanation, points, isGrouped, imageUrl, groupImageUrl, audioUrl, includesAudio, showHints, hints, groupTitle, groupSubtitle, groupContent, currentGroupNumber, groups, isExample, validateForm]);
+    }, [validationRef, question, answers, explanation, points, isGrouped, imageUrl, groupImageUrl, audioUrl, includesAudio, showHints, hints, groupTitle, groupSubtitle, groupContent, currentGroupNumber, groups, isExample, validateForm, isImageLabelGroup, imageLabels]);
     // ============ SYNC INITIAL DATA ============
     useEffect(() => {
         const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
@@ -290,6 +310,7 @@ function FillInBlankCreatorContent({ initialData, onChange, externalErrors, vali
                 groupContent,
                 groupNumber: currentGroupNumber,
                 groups,
+                ...(isImageLabelGroup ? { imageLabels } : {}),
             });
             previousPayloadRef.current = currentPayload;
             return;
@@ -310,13 +331,14 @@ function FillInBlankCreatorContent({ initialData, onChange, externalErrors, vali
             groupContent: isGrouped ? groupContent : '',
             groupNumber: currentGroupNumber,
             groups,
+            ...(isGrouped && isImageLabelGroup ? { imageLabels } : {}),
         };
         const payloadString = JSON.stringify(payload);
         if (previousPayloadRef.current !== payloadString) {
             previousPayloadRef.current = payloadString;
             debouncedOnChange(payload);
         }
-    }, [question, answers, explanation, points, isGrouped, imageUrl, groupImageUrl, audioUrl, includesAudio, showHints, hints, isExample, groupTitle, groupSubtitle, groupContent, currentGroupNumber, groups, debouncedOnChange]);
+    }, [question, answers, explanation, points, isGrouped, imageUrl, groupImageUrl, audioUrl, includesAudio, showHints, hints, isExample, groupTitle, groupSubtitle, groupContent, currentGroupNumber, groups, debouncedOnChange, isImageLabelGroup, imageLabels]);
     // Ensure blank slot exists then update alternative at altIndex
     const updateBlankAnswer = (blankIndex, altIndex, value) => {
         setAnswers((prev) => {
@@ -394,11 +416,12 @@ function FillInBlankCreatorContent({ initialData, onChange, externalErrors, vali
             groupContent: isGrouped ? groupContent : '',
             groupImageUrl: isGrouped ? (groupDisplayPreviewUrl || groupImageUrl) : '',
             groupNumber: isGrouped ? currentGroupNumber : undefined,
+            ...(isGrouped && isImageLabelGroup ? { imageLabels } : {}),
         };
         return (_jsxs("div", { className: "space-y-4", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(CardTitle, { children: "Fill In Blank (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(FillInBlankClient, { questionData: questionData, questionConfig: questionConfig, autoFillCorrectAnswers: true, isReviewMode: false, explanation: explanation })] }));
     }
     // ============ CREATOR UI ============
-    return (_jsxs("div", { className: "space-y-4", children: [isGrouped && (_jsx(BasicQuestionGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, uploadIdPrefix: `fill-in-blank-${partId ?? 'group'}` })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 shadow-sm", children: _jsx(Type, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "\u0110i\u1EC1n v\u00E0o ch\u1ED7 tr\u1ED1ng" }), _jsx("p", { className: "text-xs text-gray-500", children: "H\u1ED7 tr\u1EE3 nhi\u1EC1u ch\u1ED7 tr\u1ED1ng trong m\u1ED9t c\u00E2u h\u1ECFi" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [headerExtra, _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !question?.trim() || placeholderIndices.length === 0, className: "gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] })] }) }), _jsxs(CardContent, { className: "space-y-4 px-4 pb-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [_jsx(PointsInput, { value: points, onChange: (e) => setPoints(parseFloat(e.target.value) || 1) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "show-suggested-words", checked: showHints, onCheckedChange: setShowHints }), _jsx(Label, { htmlFor: "show-suggested-words", className: "cursor-pointer text-sm font-medium text-gray-700", children: "Hi\u1EC3n th\u1ECB t\u1EEB g\u1EE3i \u00FD" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "isExample", checked: isExample, onCheckedChange: setIsExample }), _jsx(Label, { htmlFor: "isExample", className: "cursor-pointer text-sm font-medium text-gray-700", children: "\u0110\u00E1nh d\u1EA5u l\u00E0 c\u00E2u h\u1ECFi Example" })] })] }), _jsx("div", { className: "rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-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-blue-100", children: _jsx(Lightbulb, { className: "h-4 w-4 text-blue-600" }) }), _jsxs("div", { className: "text-sm text-blue-900", children: [_jsx("p", { className: "font-semibold text-blue-800", children: "H\u01B0\u1EDBng d\u1EABn t\u1EA1o c\u00E2u h\u1ECFi" }), _jsxs("ul", { className: "mt-2 space-y-1.5 text-blue-700", children: [_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }), "S\u1EED d\u1EE5ng ", _jsx("code", { className: "mx-1 rounded bg-blue-100 px-1.5 py-0.5 font-mono text-blue-800", children: '{0}' }), ", ", _jsx("code", { className: "mx-1 rounded bg-blue-100 px-1.5 py-0.5 font-mono text-blue-800", children: '{1}' }), ", ", _jsx("code", { className: "mx-1 rounded bg-blue-100 px-1.5 py-0.5 font-mono text-blue-800", children: '{2}' }), "... \u0111\u1EC3 \u0111\u00E1nh d\u1EA5u c\u00E1c ch\u1ED7 tr\u1ED1ng"] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }), "H\u1EC7 th\u1ED1ng s\u1EBD t\u1EF1 \u0111\u1ED9ng t\u1EA1o \u00F4 nh\u1EADp \u0111\u00E1p \u00E1n cho m\u1ED7i ch\u1ED7 tr\u1ED1ng"] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }), "V\u00ED d\u1EE5: \u201CHe ", '{0}', " 10 years old and she ", '{1}', " 12.\u201D"] })] })] })] }) }), !isGrouped && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-indigo-500" }), "H\u00ECnh \u1EA3nh ", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn)" })] }), _jsx(FileUpload, { id: "fill-in-blank-image", label: "", accept: "image/*", value: imageUrl || '', onChange: (url) => {
+    return (_jsxs("div", { className: "space-y-4", children: [isGrouped && isImageLabelGroup && (_jsx(ImageLabelGroupCard, { groupNumber: currentGroupNumber, imageLabels: imageLabels, onImageLabelsChange: setImageLabels, title: groupTitle, onTitleChange: setGroupTitle, isReadOnly: !isFirstInGroup, uploadIdPrefix: `fill-in-blank-${partId ?? 'image-label'}` })), isGrouped && !isImageLabelGroup && (_jsx(BasicQuestionGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, uploadIdPrefix: `fill-in-blank-${partId ?? 'group'}` })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 shadow-sm", children: _jsx(Type, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "\u0110i\u1EC1n v\u00E0o ch\u1ED7 tr\u1ED1ng" }), _jsx("p", { className: "text-xs text-gray-500", children: "H\u1ED7 tr\u1EE3 nhi\u1EC1u ch\u1ED7 tr\u1ED1ng trong m\u1ED9t c\u00E2u h\u1ECFi" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [headerExtra, _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !question?.trim() || placeholderIndices.length === 0, className: "gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] })] }) }), _jsxs(CardContent, { className: "space-y-4 px-4 pb-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [_jsx(PointsInput, { value: points, onChange: (e) => setPoints(parseFloat(e.target.value) || 1) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "show-suggested-words", checked: showHints, onCheckedChange: setShowHints }), _jsx(Label, { htmlFor: "show-suggested-words", className: "cursor-pointer text-sm font-medium text-gray-700", children: "Hi\u1EC3n th\u1ECB t\u1EEB g\u1EE3i \u00FD" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "isExample", checked: isExample, onCheckedChange: setIsExample }), _jsx(Label, { htmlFor: "isExample", className: "cursor-pointer text-sm font-medium text-gray-700", children: "\u0110\u00E1nh d\u1EA5u l\u00E0 c\u00E2u h\u1ECFi Example" })] })] }), _jsx("div", { className: "rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-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-blue-100", children: _jsx(Lightbulb, { className: "h-4 w-4 text-blue-600" }) }), _jsxs("div", { className: "text-sm text-blue-900", children: [_jsx("p", { className: "font-semibold text-blue-800", children: "H\u01B0\u1EDBng d\u1EABn t\u1EA1o c\u00E2u h\u1ECFi" }), _jsxs("ul", { className: "mt-2 space-y-1.5 text-blue-700", children: [_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }), "S\u1EED d\u1EE5ng ", _jsx("code", { className: "mx-1 rounded bg-blue-100 px-1.5 py-0.5 font-mono text-blue-800", children: '{0}' }), ", ", _jsx("code", { className: "mx-1 rounded bg-blue-100 px-1.5 py-0.5 font-mono text-blue-800", children: '{1}' }), ", ", _jsx("code", { className: "mx-1 rounded bg-blue-100 px-1.5 py-0.5 font-mono text-blue-800", children: '{2}' }), "... \u0111\u1EC3 \u0111\u00E1nh d\u1EA5u c\u00E1c ch\u1ED7 tr\u1ED1ng"] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }), "H\u1EC7 th\u1ED1ng s\u1EBD t\u1EF1 \u0111\u1ED9ng t\u1EA1o \u00F4 nh\u1EADp \u0111\u00E1p \u00E1n cho m\u1ED7i ch\u1ED7 tr\u1ED1ng"] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }), "V\u00ED d\u1EE5: \u201CHe ", '{0}', " 10 years old and she ", '{1}', " 12.\u201D"] })] })] })] }) }), !isGrouped && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-indigo-500" }), "H\u00ECnh \u1EA3nh ", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn)" })] }), _jsx(FileUpload, { id: "fill-in-blank-image", label: "", accept: "image/*", value: imageUrl || '', onChange: (url) => {
                                             setImageUrl(url);
                                         }, onPresignedUrlChange: setImagePreviewUrl, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }), displayPreviewUrl && (_jsx(ImagePreview, { src: displayPreviewUrl, alt: "Preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] })), includesAudio && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Volume2, { className: "h-4 w-4 text-indigo-500" }), "Audio c\u00E2u h\u1ECFi"] }), _jsx(FileUpload, { id: "fill-in-blank-audio", label: "", accept: "audio/*", value: audioUrl || '', onChange: (url) => {
                                             setAudioUrl(url);

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

@@ -130,6 +130,9 @@ export const fillInBlankRegistration = {
                 groups: answer?.groups || initialData?.groups,
             };
         }
+        if (creatorData) {
+            creatorData.imageLabels = groupPayload?.imageLabels || answer?.imageLabels || undefined;
+        }
         return creatorData;
     },
     getExtraProps: (ctx) => ({
@@ -139,6 +142,8 @@ export const fillInBlankRegistration = {
         questionIndexInPart: ctx.questionIndexInPart,
         partId: ctx.partId,
         questionConfig: ctx.questionConfig,
+        groupType: ctx.groupType,
+        suggestedAnswers: ctx.suggestedAnswers,
     }),
     wrapOnSave: (data, ctx) => ({
         type: ctx.questionType,

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

@@ -4,13 +4,16 @@ export const transformFillInBlank = (question) => {
     // Helper: build basicGroupData if any group field is present.
     // NOTE: only `groupImageUrl` belongs to the group card — the per-question `imageUrl`
     // goes into content (same split as CHOOSE_THE_CORRECT_ANSWER).
-    const hasGroupData = !!(answerData?.title || answerData?.subtitle || answerData?.groupContent || answerData?.groupImageUrl);
+    const imageLabels = Array.isArray(answerData?.imageLabels) ? answerData.imageLabels : undefined;
+    const hasImageLabels = Array.isArray(imageLabels) && imageLabels.some((item) => Boolean(item?.imageUrl?.trim() || item?.label?.trim()));
+    const hasGroupData = !!(answerData?.title || answerData?.subtitle || answerData?.groupContent || answerData?.groupImageUrl || hasImageLabels);
     const basicGroupData = hasGroupData
         ? {
             title: answerData.title || '',
             subtitle: answerData.subtitle || '',
             content: answerData.groupContent || '',
             imageUrl: answerData.groupImageUrl || '',
+            ...(hasImageLabels ? { imageLabels } : {}),
         }
         : undefined;
     const groupNumber = answerData?.groupNumber || 1;

package/dist/components/questions/types/speaking-cue-card/SpeakingCueCardClient.d.ts

@@ -0,0 +1,11 @@
+export interface SpeakingCueCardClientProps {
+    questionData: {
+        cueCardHtml: string;
+        isBackup?: boolean;
+        expectedAnswers?: string[];
+        explanation?: string;
+    };
+    isReviewMode?: boolean;
+}
+export declare function mapQuestionToSpeakingCueCardData(question: Record<string, unknown> | null | undefined): SpeakingCueCardClientProps['questionData'];
+export declare function SpeakingCueCardClient({ questionData, isReviewMode, }: SpeakingCueCardClientProps): import("react").JSX.Element;

package/dist/components/questions/types/speaking-cue-card/SpeakingCueCardClient.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Mic, CheckCircle2, Info, CreditCard } from 'lucide-react';
+import { RichTextHtml } from '../../../../components/shared/RichTextHtml';
+function asRecord(value) {
+    return value && typeof value === 'object' && !Array.isArray(value)
+        ? value
+        : {};
+}
+export function mapQuestionToSpeakingCueCardData(question) {
+    const source = asRecord(question);
+    const content = asRecord(source.content);
+    const answer = asRecord(source.correctAnswer ?? source.correct_answer ?? source.answer);
+    const expectedAnswers = Array.isArray(answer.expectedAnswers)
+        ? answer.expectedAnswers.filter((item) => typeof item === 'string' && item.trim() !== '')
+        : [];
+    return {
+        cueCardHtml: typeof content.cueCardHtml === 'string' ? content.cueCardHtml : '',
+        isBackup: content.isBackup === true,
+        expectedAnswers,
+        explanation: typeof source.explanation === 'string' ? source.explanation : '',
+    };
+}
+export function SpeakingCueCardClient({ questionData, isReviewMode = false, }) {
+    const answers = questionData.expectedAnswers || [];
+    return (_jsxs("div", { className: "space-y-4", children: [questionData.isBackup && (_jsxs("div", { className: "inline-flex self-center items-center gap-1.5 px-3 py-1.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 text-xs font-bold shadow-sm", children: [_jsx("span", { children: "\uD83D\uDD04" }), " C\u00E2u h\u1ECFi d\u1EF1 ph\u00F2ng"] })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsx("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-purple-50 to-indigo-50 px-5 py-3", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-purple-500 to-indigo-600 text-white shadow-sm", children: _jsx(CreditCard, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Th\u1EBB g\u1EE3i \u00FD (Cue Card)" })] }) }), _jsxs("div", { className: "p-5 space-y-5", children: [_jsx("div", { className: "rounded-xl border border-purple-100 bg-purple-50/40 px-5 py-4", children: _jsx(RichTextHtml, { html: questionData.cueCardHtml, className: "text-sm text-slate-800", fallback: _jsx("p", { className: "text-sm text-gray-400", children: "Ch\u01B0a c\u00F3 n\u1ED9i dung cue card" }) }) }), _jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-dashed border-gray-300 bg-gray-50/80 px-4 py-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-purple-50 ring-2 ring-purple-100/50", children: _jsx(Mic, { className: "w-4 h-4 text-purple-400" }) }), _jsx("p", { className: "text-xs text-gray-400", children: "H\u1ECDc sinh \u0111\u1ECDc th\u1EBB g\u1EE3i \u00FD, chu\u1EA9n b\u1ECB, r\u1ED3i tr\u1EA3 l\u1EDDi b\u1EB1ng gi\u1ECDng n\u00F3i" })] }), isReviewMode && answers.length > 0 && (_jsxs("div", { className: "rounded-xl border border-green-200 bg-green-50/80 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }), _jsx("h4", { className: "text-sm font-semibold text-green-800", children: "\u0110\u00E1p \u00E1n m\u1EABu" })] }), _jsx("div", { className: "space-y-2", children: answers.map((answer, index) => (_jsxs("div", { className: "flex items-center gap-2.5 rounded-lg bg-white/70 border border-green-100 px-3 py-2", children: [_jsx("span", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-green-100 text-green-700 text-xs font-bold", children: index + 1 }), _jsx("span", { className: "text-sm text-green-800", children: answer })] }, `${answer}-${index}`))) })] })), isReviewMode && questionData.explanation && (_jsxs("div", { className: "rounded-xl border border-amber-200 bg-amber-50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Info, { className: "h-4 w-4 text-amber-600" }), _jsx("p", { className: "text-sm font-semibold text-amber-800", children: "Gi\u1EA3i th\u00EDch" })] }), _jsx("p", { className: "text-sm text-amber-700 leading-relaxed whitespace-pre-wrap", children: questionData.explanation })] }))] })] })] }));
+}

package/dist/components/questions/types/spontaneous-qa/SpontaneousQAClient.d.ts

@@ -0,0 +1,2 @@
+import type { SpontaneousQAClientProps } from '../../_shared/types/spontaneous-qa.type';
+export declare function SpontaneousQAClient({ questionData, isReviewMode, }: SpontaneousQAClientProps): import("react").JSX.Element;

package/dist/components/questions/types/spontaneous-qa/SpontaneousQAClient.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Mic, CheckCircle2, Info, FileQuestion, Volume2 } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+function sampleAnswers(questionData) {
+    const fromExpected = (questionData.expectedAnswers || []).filter((item) => item.trim() !== '');
+    if (fromExpected.length > 0)
+        return fromExpected;
+    return (questionData.sampleAnswers || []).filter((item) => item.trim() !== '');
+}
+export function SpontaneousQAClient({ questionData, isReviewMode = false, }) {
+    const { previewUrl: questionAudioUrl } = usePresignedFileUrl(questionData.audioUrl || '');
+    const answers = sampleAnswers(questionData);
+    return (_jsxs("div", { className: "space-y-4", children: [questionData.isBackup && (_jsxs("div", { className: "inline-flex self-center items-center gap-1.5 px-3 py-1.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 text-xs font-bold shadow-sm", children: [_jsx("span", { children: "\uD83D\uDD04" }), " C\u00E2u h\u1ECFi d\u1EF1 ph\u00F2ng"] })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsx("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-indigo-50 to-blue-50 px-5 py-3", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-blue-600 text-white shadow-sm", children: _jsx(Mic, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "H\u1ECFi \u0111\u00E1p t\u1EF1 ph\u00E1t" })] }) }), _jsxs("div", { className: "p-5 space-y-5", children: [questionData.questionText && (_jsxs("div", { className: "flex gap-3", children: [_jsx(FileQuestion, { className: "h-5 w-5 text-indigo-500 shrink-0 mt-0.5" }), _jsx("div", { className: "text-base font-semibold text-gray-800", children: questionData.questionText })] })), questionAudioUrl ? (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-blue-100 bg-blue-50/60 px-4 py-3", children: [_jsx(Volume2, { className: "h-4 w-4 text-blue-500 shrink-0" }), _jsx("audio", { controls: true, src: questionAudioUrl, className: "h-8 w-full max-w-md", children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." })] })) : questionData.audioUrl ? (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3", children: [_jsx(Volume2, { className: "h-4 w-4 text-gray-400" }), _jsx("span", { className: "text-xs text-gray-400", children: "\u0110ang t\u1EA3i audio c\u00E2u h\u1ECFi..." })] })) : (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3", children: [_jsx(Volume2, { className: "h-4 w-4 text-gray-400" }), _jsx("span", { className: "text-xs text-gray-400", children: "Ch\u01B0a c\u00F3 audio c\u00E2u h\u1ECFi" })] })), _jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-dashed border-gray-300 bg-gray-50/80 px-4 py-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-indigo-50 ring-2 ring-indigo-100/50", children: _jsx(Mic, { className: "w-4 h-4 text-indigo-400" }) }), _jsx("p", { className: "text-xs text-gray-400", children: "H\u1ECDc sinh nghe c\u00E2u h\u1ECFi r\u1ED3i nh\u1EA5n micro \u0111\u1EC3 tr\u1EA3 l\u1EDDi b\u1EB1ng gi\u1ECDng n\u00F3i" })] }), isReviewMode && answers.length > 0 && (_jsxs("div", { className: "rounded-xl border border-green-200 bg-green-50/80 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }), _jsx("h4", { className: "text-sm font-semibold text-green-800", children: "\u0110\u00E1p \u00E1n m\u1EABu" })] }), _jsx("div", { className: "space-y-2", children: answers.map((answer, index) => (_jsxs("div", { className: "flex items-center gap-2.5 rounded-lg bg-white/70 border border-green-100 px-3 py-2", children: [_jsx("span", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-green-100 text-green-700 text-xs font-bold", children: index + 1 }), _jsx("span", { className: "text-sm text-green-800", children: answer })] }, `${answer}-${index}`))) })] })), isReviewMode && questionData.explanation && (_jsxs("div", { className: "rounded-xl border border-amber-200 bg-amber-50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Info, { className: "h-4 w-4 text-amber-600" }), _jsx("p", { className: "text-sm font-semibold text-amber-800", children: "Gi\u1EA3i th\u00EDch" })] }), _jsx("p", { className: "text-sm text-amber-700 leading-relaxed whitespace-pre-wrap", children: questionData.explanation })] }))] })] })] }));
+}

package/dist/components/questions/types/spontaneous-qa/map-spontaneous-qa-data.d.ts

@@ -0,0 +1,2 @@
+import type { SpontaneousQAClientProps } from '../../_shared/types/spontaneous-qa.type';
+export declare function mapQuestionToSpontaneousQAData(question: Record<string, unknown> | null | undefined): SpontaneousQAClientProps['questionData'];

package/dist/components/questions/types/spontaneous-qa/map-spontaneous-qa-data.js

@@ -0,0 +1,33 @@
+function asRecord(value) {
+    return value && typeof value === 'object' && !Array.isArray(value)
+        ? value
+        : {};
+}
+function asStringList(value) {
+    if (Array.isArray(value)) {
+        return value.filter((item) => typeof item === 'string' && item.trim() !== '');
+    }
+    if (typeof value === 'string' && value.trim())
+        return [value];
+    return [];
+}
+export function mapQuestionToSpontaneousQAData(question) {
+    const source = asRecord(question);
+    const content = asRecord(source.content);
+    const answer = asRecord(source.correctAnswer ?? source.correct_answer ?? source.answer);
+    const expectedAnswers = asStringList(answer.expectedAnswers).length
+        ? asStringList(answer.expectedAnswers)
+        : asStringList(answer.sampleAnswers).length
+            ? asStringList(answer.sampleAnswers)
+            : asStringList(answer.sampleAnswer);
+    return {
+        inputType: content.inputType === 'AUDIO' ? 'AUDIO' : 'TEXT',
+        audioUrl: typeof content.audioUrl === 'string' ? content.audioUrl : '',
+        questionText: typeof content.questionText === 'string' ? content.questionText : '',
+        expectedAnswers,
+        sampleAnswers: expectedAnswers,
+        explanation: typeof source.explanation === 'string' ? source.explanation : '',
+        isBackup: content.isBackup === true,
+        points: typeof source.points === 'number' ? source.points : undefined,
+    };
+}

package/dist/components/questions/types/word-fill-structured-form/map-wfsf-question-data.js

@@ -58,6 +58,7 @@ export function mapQuestionToWfsfData(question) {
     const source = asRecord(question);
     const apiContent = asRecord(source.content);
     const answer = asRecord(source.answer);
+    const meta = asRecord(source.meta);
     const correctAnswer = asRecord(source.correctAnswer ??
         source.correct_answer ??
         answer.correctAnswer ??
@@ -66,7 +67,13 @@ export function mapQuestionToWfsfData(question) {
         ? parseFloat(String(source.total_points))
         : answer.points ?? source.points ?? 1;
     const points = Number.isFinite(Number(pointsRaw)) ? Number(pointsRaw) : 1;
-    const instruction = String(apiContent.instruction || answer.instruction || source.instruction || source.explanation || '');
+    // Pearson bank stores rubric on meta.instruction; school/API use content.instruction.
+    const instruction = String(apiContent.instruction ||
+        answer.instruction ||
+        source.instruction ||
+        meta.instruction ||
+        source.explanation ||
+        '');
     const explanation = String(answer.explanation || '');
     const content = resolveHtmlContent(apiContent, answer);
     const rawWordBank = apiContent.wordBank ?? answer.wordBank;

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

@@ -34,6 +34,10 @@ export const transformWordFillStructuredForm = (question) => {
         audioUrls,
         content: answerData.content,
     };
+    const instructionText = String(answerData.instruction ?? '').trim();
+    if (instructionText) {
+        apiContent.instruction = instructionText;
+    }
     if (answerData.blankStyle) {
         apiContent.blankStyle = answerData.blankStyle;
     }

package/dist/components/questions/types/word-ordering/WordOrderingClient.js

@@ -1,49 +1,67 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { Check, X, ArrowUpDown, Lightbulb } from 'lucide-react';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
 import { cn } from '../../../../shared/lib/utils';
-export function WordOrderingClient({ questionData, onSubmit, isReviewMode = false, userAnswer, autoFillCorrectAnswers = false, explanation, }) {
-    const { words = [], answer = [], isExample, imageUrl } = questionData;
-    // State: the user's current arrangement
-    const [selectedWords, setSelectedWords] = useState(userAnswer || (autoFillCorrectAnswers ? answer : []));
-    // Words remaining in the pool
-    const [availableWords, setAvailableWords] = useState(() => {
-        const initial = userAnswer || (autoFillCorrectAnswers ? answer : []);
-        if (initial.length > 0) {
-            // Remove used words from available pool
-            const remaining = [...words];
-            initial.forEach((w) => {
-                const idx = remaining.indexOf(w);
-                if (idx >= 0)
-                    remaining.splice(idx, 1);
-            });
-            return remaining;
+function toWordList(value) {
+    if (Array.isArray(value)) {
+        return value.filter((item) => typeof item === 'string');
+    }
+    if (value && typeof value === 'object') {
+        const nested = value.answer;
+        if (Array.isArray(nested)) {
+            return nested.filter((item) => typeof item === 'string');
         }
-        return [...words];
+    }
+    return [];
+}
+function resolveSelectedWords(userAnswer, answer, autoFillCorrectAnswers) {
+    if (Array.isArray(userAnswer)) {
+        return toWordList(userAnswer);
+    }
+    const nested = toWordList(userAnswer);
+    if (nested.length > 0) {
+        return nested;
+    }
+    return autoFillCorrectAnswers ? answer : [];
+}
+function remainingWords(words, selected) {
+    const remaining = [...words];
+    selected.forEach((word) => {
+        const idx = remaining.indexOf(word);
+        if (idx >= 0)
+            remaining.splice(idx, 1);
     });
+    return remaining;
+}
+export function WordOrderingClient({ questionData, onSubmit, isReviewMode = false, userAnswer, autoFillCorrectAnswers = false, explanation, }) {
+    const words = useMemo(() => toWordList(questionData.words), [questionData.words]);
+    const answer = useMemo(() => toWordList(questionData.answer), [questionData.answer]);
+    const { isExample, imageUrl } = questionData;
+    const initialSelected = resolveSelectedWords(userAnswer, answer, autoFillCorrectAnswers);
+    const [selectedWords, setSelectedWords] = useState(initialSelected);
+    const [availableWords, setAvailableWords] = useState(() => remainingWords(words, initialSelected));
     const { previewUrl: imagePreviewUrl, isLoading } = usePresignedFileUrl(imageUrl || '');
-    // Sync with userAnswer changes
     useEffect(() => {
-        if (userAnswer) {
-            setSelectedWords(userAnswer);
-            const remaining = [...words];
-            userAnswer.forEach((w) => {
-                const idx = remaining.indexOf(w);
-                if (idx >= 0)
-                    remaining.splice(idx, 1);
-            });
-            setAvailableWords(remaining);
-        }
-    }, [userAnswer]);
-    // Reset when words change (question navigation)
+        if (userAnswer == null)
+            return;
+        if (!Array.isArray(userAnswer) && toWordList(userAnswer).length === 0)
+            return;
+        const next = resolveSelectedWords(userAnswer, answer, false);
+        setSelectedWords(next);
+        setAvailableWords(remainingWords(words, next));
+    }, [userAnswer, words, answer]);
+    const wordsString = JSON.stringify(words);
+    const hasUserAnswer = Array.isArray(userAnswer)
+        ? true
+        : toWordList(userAnswer).length > 0;
     useEffect(() => {
-        if (!userAnswer && !autoFillCorrectAnswers) {
+        if (!hasUserAnswer && !autoFillCorrectAnswers) {
             setSelectedWords([]);
             setAvailableWords([...words]);
         }
-    }, [JSON.stringify(words)]);
+    }, [wordsString, hasUserAnswer, autoFillCorrectAnswers, words]);
     const handleSelectWord = useCallback((word, poolIndex) => {
         if (isReviewMode)
             return;

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

@@ -32,6 +32,9 @@ import { FillInBlankGroupViewer } from './FillInBlankGroupViewer';
 import { MatchingWithLinesGroupViewer } from './MatchingWithLinesGroupViewer';
 import { CrossOutWordGroupViewer } from './CrossOutWordGroupViewer';
 import { SpontaneousQaGroupViewer } from './SpontaneousQaGroupViewer';
+import { SpontaneousQAClient } from '../types/spontaneous-qa/SpontaneousQAClient';
+import { mapQuestionToSpontaneousQAData } from '../types/spontaneous-qa/map-spontaneous-qa-data';
+import { SpeakingCueCardClient, mapQuestionToSpeakingCueCardData, } from '../types/speaking-cue-card/SpeakingCueCardClient';
 import { WordOrderAndMatchGroupViewer } from './WordOrderAndMatchGroupViewer';
 import { AnswerTheQuestionViewer } from './AnswerTheQuestionViewer';
 import { AnswerTheQuestionGroupViewer } from './AnswerTheQuestionGroupViewer';
@@ -633,7 +636,11 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
         return (_jsxs("div", { className: "space-y-3", children: [content.title ? _jsx("h3", { className: "text-center text-lg font-bold uppercase text-slate-800", children: content.title }) : null, content.imageUrl ? (_jsx("div", { className: "flex justify-center", children: _jsx("img", { src: String(content.imageUrl), alt: "", className: "max-h-[180px] rounded-lg object-contain" }) })) : null, _jsx("div", { className: "space-y-2 text-base leading-relaxed text-slate-800", children: paragraph.split('\n').map((line, li) => (_jsx("div", { className: "flex flex-wrap items-baseline", children: renderLine(line, `wfp-${li}`) }, `wfp-l${li}`))) }), isReviewMode && correctAnswers.length > 0 ? (_jsxs("div", { className: "rounded-lg border border-emerald-200 bg-emerald-50/80 p-2.5 text-sm text-emerald-800", children: [_jsx("span", { className: "font-semibold", children: "\u0110\u00E1p \u00E1n: " }), correctAnswers.map((a, i) => (_jsxs("span", { className: "mr-2", children: ["(", i + 1, ") ", _jsx("span", { className: "font-bold underline", children: a || '—' })] }, `wfp-a${i}`)))] })) : null] }));
     };
     const renderQuestion = () => {
-        switch (question.type) {
+        const resolvedType = String(question.type ||
+            question.questionType ||
+            question.question_type ||
+            '');
+        switch (resolvedType) {
             case 'CHOOSE_THE_CORRECT_ANSWER':
                 return renderChooseTheCorrectAnswer();
             case 'CHOOSE_THE_CORRECT_ANSWER_GROUP':
@@ -654,6 +661,10 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
                 return (_jsx(AnswerTheQuestionViewer, { question: question, isReviewMode: isReviewMode, userAnswer: typeof userAnswer === 'string' ? userAnswer : undefined, onSubmitAnswer: onSubmitAnswer }));
             case 'ANSWER_THE_QUESTION_GROUP':
                 return (_jsx(AnswerTheQuestionGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer }));
+            case 'SPEAKING_CUE_CARD':
+                return (_jsx(SpeakingCueCardClient, { questionData: mapQuestionToSpeakingCueCardData(question), isReviewMode: isReviewMode }));
+            case 'SPONTANEOUS_QA':
+                return (_jsx(SpontaneousQAClient, { questionData: mapQuestionToSpontaneousQAData(question), isReviewMode: isReviewMode }));
             case 'SPONTANEOUS_QA_GROUP':
                 return (_jsx(SpontaneousQaGroupViewer, { question: question, isReviewMode: isReviewMode }));
             case 'WORD_ORDER_AND_MATCH_GROUP':

package/dist/components/results/renderers/ReviewListenAndWriteRenderer.d.ts

@@ -1,4 +1,5 @@
 import type { FillBlankQuestion } from '../../../components/exams/take/types';
+import { type ImageLabelData } from '../../questions/_shared/types/question-group.type';
 interface ReviewListenAndWriteRendererProps {
     partNumber: number;
     questionCount: number;
@@ -12,6 +13,7 @@ interface ReviewListenAndWriteRendererProps {
     questions: FillBlankQuestion[];
     answers: Record<string, unknown>;
     isCorrectMap: Record<string, boolean | null>;
+    imageLabels?: ImageLabelData[];
 }
-export declare function ReviewListenAndWriteRenderer({ partNumber, questionCount, instruction, partName, audioUrl, title, exampleText, questions, answers, isCorrectMap, }: ReviewListenAndWriteRendererProps): import("react").JSX.Element;
+export declare function ReviewListenAndWriteRenderer({ partNumber, questionCount, instruction, partName, audioUrl, title, exampleText, questions, answers, isCorrectMap, imageLabels, }: ReviewListenAndWriteRendererProps): import("react").JSX.Element;
 export {};

package/dist/components/results/renderers/ReviewListenAndWriteRenderer.js

@@ -6,7 +6,9 @@ import CambridgeYlePartBanner from '../../../components/themes/cambridge-yle/Cam
 import CambridgeYleInstructionBanner from '../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
 import CambridgeYleAudioPlayer from '../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer';
 import { countBlanks, formatAcceptedAnswers, hasAnyBlankValue, isBlankCorrect, toBlankValues, } from '../../../shared/lib/utils/fill-in-blank';
-export function ReviewListenAndWriteRenderer({ partNumber, questionCount, instruction, partName, audioUrl, title, exampleText, questions, answers, isCorrectMap, }) {
+import { ImageLabelWordBank } from '../../questions/groups/ImageLabelWordBank';
+import { hasImageLabels } from '../../questions/_shared/types/question-group.type';
+export function ReviewListenAndWriteRenderer({ partNumber, questionCount, instruction, partName, audioUrl, title, exampleText, questions, answers, isCorrectMap, imageLabels, }) {
     /**
      * Get answer status from API's isCorrect field
      * Returns: 'correct' | 'incorrect' | 'unanswered'
@@ -44,7 +46,7 @@ export function ReviewListenAndWriteRenderer({ partNumber, questionCount, instru
             return 'unanswered';
         return isBlankCorrect(userValue, accepted) ? 'correct' : 'incorrect';
     };
-    return (_jsxs("div", { className: "flex flex-col gap-6 h-full", children: [_jsxs("div", { className: "flex flex-col gap-4 pb-0 pt-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: true }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, hasExample: !!exampleText, isReviewMode: true }), audioUrl && _jsx(CambridgeYleAudioPlayer, { audioSrc: audioUrl, compact: true })] }), _jsxs("div", { className: "flex flex-col gap-6 pb-6 pl-2 pt-2", children: [_jsx("h2", { className: "text-center text-3xl font-bold uppercase text-coral-500", children: title }), _jsx("div", { className: "flex flex-col gap-4", children: questions.map((question) => {
+    return (_jsxs("div", { className: "flex flex-col gap-6 h-full", children: [_jsxs("div", { className: "flex flex-col gap-4 pb-0 pt-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: true }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, hasExample: !!exampleText, isReviewMode: true }), hasImageLabels(imageLabels) && (_jsx(ImageLabelWordBank, { items: imageLabels, className: "rounded-2xl border border-slate-200 bg-slate-50/80 p-4 shadow-sm" })), audioUrl && _jsx(CambridgeYleAudioPlayer, { audioSrc: audioUrl, compact: true })] }), _jsxs("div", { className: "flex flex-col gap-6 pb-6 pl-2 pt-2", children: [_jsx("h2", { className: "text-center text-3xl font-bold uppercase text-coral-500", children: title }), _jsx("div", { className: "flex flex-col gap-4", children: questions.map((question) => {
                             const status = getAnswerStatus(question.id);
                             const userValues = toBlankValues(answers[question.id], countBlanks(question.segments));
                             const renderBlank = (blankIndex) => {

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

@@ -27,8 +27,8 @@ export function renderDedicatedReviewBody(ctx) {
     const apiQuestions = asApiQuestions(questions);
     switch (questionType) {
         case 'FILL_IN_BLANK': {
-            const data = transformFillInBlank(apiQuestions);
-            return (_jsx(ReviewListenAndWriteRenderer, { partNumber: partNo, questionCount: questionCount, partName: part.name, instruction: part.instructions || data.instruction, title: data.title, imageUrl: data.imageUrl, audioUrl: data.audioUrl, exampleText: data.exampleText, exampleHighlight: data.exampleHighlight, questions: data.questions, answers: answers, isCorrectMap: isCorrectMap }));
+            const data = transformFillInBlank(apiQuestions, { suggestedAnswers: part.suggestedAnswers });
+            return (_jsx(ReviewListenAndWriteRenderer, { partNumber: partNo, questionCount: questionCount, partName: part.name, instruction: part.instructions || data.instruction, title: data.title, imageUrl: data.imageUrl, audioUrl: data.audioUrl, exampleText: data.exampleText, exampleHighlight: data.exampleHighlight, questions: data.questions, answers: answers, isCorrectMap: isCorrectMap, imageLabels: data.imageLabels }));
         }
         case 'WRITE_CORRECT_VERB_FORM': {
             const data = transformWriteCorrectVerbForm(apiQuestions);

package/dist/components/themes/english-certification/EnglishCertificationQuestionRenderer.js

@@ -13,6 +13,8 @@ import { EcMatchByWritingAnswer } from './EcMatchByWritingAnswer';
 import { EcAnswerTheQuestion } from './EcAnswerTheQuestion';
 import { EcWordFillParagraph } from './EcWordFillParagraph';
 import { EcWritingTask } from './EcWritingTask';
+import { MoversListenAndWriteRenderer } from '../../../components/exams/take/components/question-renderers/MoversListenAndWriteRenderer';
+import { transformFillInBlank } from '../../../components/exams/take/utils/question-transformers';
 /**
  * Question types that the branded English Certification theme renders natively
  * as multiple-choice cards (TOEIC + IELTS MCQ variants such as TRUE/FALSE/NOT GIVEN).
@@ -67,6 +69,12 @@ export function EnglishCertificationQuestionRenderer({ part, partConfig, answers
                 return (_jsx(EcAnswerTheQuestion, { part: part, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
             case 'WORD_FILL_PARAGRAPH':
                 return (_jsx(EcWordFillParagraph, { part: part, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+            case 'FILL_IN_BLANK': {
+                const data = transformFillInBlank(part.questions, {
+                    suggestedAnswers: part.suggestedAnswers,
+                });
+                return (_jsx(MoversListenAndWriteRenderer, { partNumber: part.partNo ?? 0, partName: part.name, questionCount: part.questions.filter((q) => !q.is_example).length, instruction: part.instructions || data.instruction, title: data.title, imageUrl: data.groupImageUrl || data.imageUrl, audioUrl: data.audioUrl || part.audioUrl, exampleText: data.exampleText, exampleHighlight: data.exampleHighlight, questions: data.questions, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, showHints: data.showHints, groupContent: data.groupContent, groupTitle: data.groupTitle, imageLabels: data.imageLabels }));
+            }
             case 'WRITE_A_SHORT_LETTER':
                 return (_jsx(EcWritingTask, { part: part, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
             default:

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export * as Results from './components/results';
 export * as Themes from './components/themes';
 export * as Shared from './shared';
 export { buildExamTemplatePayload, createContestRoomsApi, createExamCreateApi, createExamEntryApi, createExamQuestionsApi, createExamQuestionsFetchApi, createExamTakingApi, createMockContestRoomsApi, createMockCreateExamApi, createMockExamEntryApi, createMockExamQuestionsApi, createMockExamTakingApi, createMockResultReviewApi, createResultReviewApi } from './api';
-export type { AnswerGradingStatusItem, AnswersGradingStatusResult, ContestRoomListItem, ContestRoomRegistrationStatus, ContestRoomVisibility, ContestRoomsContestDetail, ContestRoomsFetchApiOptions, ContestRoomsSdkApi, CreateExamFetchApiOptions, CreateExamPayload, CreateExamSdkApi, ExamFormData, ExamLevelOption, ExamQuestionsSdkApi, ExamResponse, ExamTakingAnswerValue, ExamTakingAttempt, ExamTakingFetchApiOptions, ExamTakingQuestion, ExamTakingQuestionsResult, ExamTakingRoom, ExamTakingSdkApi, ExamTakingTemplatePart, ExamTemplatePayload, ExamWithTemplate, ExistingQuestionBank, FetchApiOptions, GradingSummary, QuestionSearchItem, SaveExamInput, SaveExamTakingAnswersInput, SaveQuestionInput, SaveQuestionResult, SearchQuestionBankInput, SearchQuestionBankResult, SubmitExamTakingAttemptResult, UpdateExamTemplateInput, UpdatePartAudioInput, UploadAudioAnswerResult } from './api';
+export type { AnswerGradingStatusItem, AnswersGradingStatusResult, ContestRoomListItem, ContestRoomRegistrationStatus, ContestRoomVisibility, ContestRoomsContestDetail, ContestRoomsFetchApiOptions, ContestRoomsSdkApi, CreateExamFetchApiOptions, CreateExamPayload, CreateExamSdkApi, ExamFormData, ExamLevelOption, ExamQuestionsSdkApi, ExamResponse, ExamTakingAnswerValue, ExamTakingAttempt, ExamTakingFetchApiOptions, ExamTakingQuestion, ExamTakingQuestionsResult, ExamTakingRoom, ExamTakingSdkApi, ExamTakingTemplatePart, ExamTemplatePayload, ExamWithTemplate, ExistingQuestionBank, FetchApiOptions, GradingSummary, QuestionBankFiltersInput, QuestionBankFiltersResult, QuestionSearchItem, SaveExamInput, SaveExamTakingAnswersInput, SaveQuestionInput, SaveQuestionResult, SearchQuestionBankInput, SearchQuestionBankResult, SubmitExamTakingAttemptResult, UpdateExamTemplateInput, UpdatePartAudioInput, UploadAudioAnswerResult } from './api';
 export { CreateExamPageContainer, ExamPreviewDialog, ExamPreviewMode, ExamQuestionsPageContainer, ExamTakingPageContainer, ExamViewDialog, StudentContestRoomsPageContainer, StudentExamEntryPageContainer } from './components/exams';
 export type { CreateExamPageContainerProps, CreateExamTexts, ExamPreviewDialogProps, ExamQuestionsPageContainerProps, ExamTakingPageContainerProps, ExamViewDialogExam, ExamViewDialogProps, StudentContestRoomsPageContainerProps, StudentExamEntryPageContainerProps } from './components/exams';
 export { ResultReviewPageContainer } from './components/results';
@@ -15,8 +15,8 @@ export { QuestionCreator } from './components/questions/creator/QuestionCreator'
 export type { QuestionCreatorProps } from './components/questions/creator/QuestionCreator';
 export { QuestionGroupCreator } from './components/questions/creator/QuestionGroupCreator';
 export type { QuestionGroupCreatorProps } from './components/questions/creator/QuestionGroupCreator';
-export { DifficultyLevel, EditQuestionBankDialog, QuestionBankEditorType, QuestionEditorRenderer, } from './components/questions/question-bank';
-export type { EditQuestionBankDialogProps, QuestionBankEditItem, QuestionEditorChangeData, QuestionEditorRendererProps, SkillType as QuestionBankSkillType, UpdateQuestionBankDto, } from './components/questions/question-bank';
+export { DifficultyLevel, EditQuestionBankDialog, QuestionBankEditorType, QuestionBankPickerDialog, QuestionEditorRenderer, } from './components/questions/question-bank';
+export type { EditQuestionBankDialogProps, QuestionBankEditItem, QuestionBankLessonSuggestion, QuestionBankPickerDefaultFilters, QuestionBankPickerDialogProps, QuestionEditorChangeData, QuestionEditorRendererProps, SkillType as QuestionBankSkillType, UpdateQuestionBankDto, } from './components/questions/question-bank';
 export { renderDedicatedComponent } from './components/questions/creator/dedicated-component-router';
 export type { DedicatedComponentRouterProps, ValidationRef, } from './components/questions/creator/dedicated-component-router';
 export { questionTypeRegistry } from './components/questions/creator/question-type-registry';
@@ -24,6 +24,7 @@ export type { QuestionTypeRegistration, RouterContext, } from './components/ques
 export { QUESTION_TYPE_CONFIG, QUESTION_TYPES_WITH_DEDICATED_COMPONENTS } from './components/questions/_shared/config/question-types.config';
 export { validateQuestion } from './components/questions/_shared/utils/question-validation';
 export { buildAnswerPayload } from './components/questions/_shared/utils/answer-builder';
+export { transformApiQuestionToFrontend, transformApiQuestionsToFrontend, } from './shared/lib/utils/question-reverse-transform';
 export type { QuestionFormState } from './components/questions/_shared/hooks/useQuestionFormState';
 export * from './components/questions/_shared/types';
 export { QuestionViewer, QuestionGroupViewer, WordFillStructuredFormViewer, ChooseTheCorrectAnswerGroupViewer, TrueFalseGroupViewer, TrueFalseCorrectGroupViewer, FillInBlankGroupViewer, MatchingWithLinesGroupViewer, CrossOutWordGroupViewer, SpontaneousQaGroupViewer, WordOrderAndMatchGroupViewer, AnswerTheQuestionGroupViewer, MatchWordToPictureViewer, MatchWordToPictureGroupViewer, MatchColumnsToMakeSentencesViewer, WordOrderingGroupViewer, SortWordsIntoCategoriesViewer, ChooseThenAnswerGroupViewer, } from './components/questions/viewer';

package/dist/index.js

@@ -14,11 +14,12 @@ export { CreateExamPageContainer, ExamPreviewDialog, ExamPreviewMode, ExamQuesti
 export { ResultReviewPageContainer } from './components/results';
 export { QuestionCreator } from './components/questions/creator/QuestionCreator';
 export { QuestionGroupCreator } from './components/questions/creator/QuestionGroupCreator';
-export { DifficultyLevel, EditQuestionBankDialog, QuestionBankEditorType, QuestionEditorRenderer, } from './components/questions/question-bank';
+export { DifficultyLevel, EditQuestionBankDialog, QuestionBankEditorType, QuestionBankPickerDialog, QuestionEditorRenderer, } from './components/questions/question-bank';
 export { renderDedicatedComponent } from './components/questions/creator/dedicated-component-router';
 export { questionTypeRegistry } from './components/questions/creator/question-type-registry';
 export { QUESTION_TYPE_CONFIG, QUESTION_TYPES_WITH_DEDICATED_COMPONENTS } from './components/questions/_shared/config/question-types.config';
 export { validateQuestion } from './components/questions/_shared/utils/question-validation';
 export { buildAnswerPayload } from './components/questions/_shared/utils/answer-builder';
+export { transformApiQuestionToFrontend, transformApiQuestionsToFrontend, } from './shared/lib/utils/question-reverse-transform';
 export * from './components/questions/_shared/types';
 export { QuestionViewer, QuestionGroupViewer, WordFillStructuredFormViewer, ChooseTheCorrectAnswerGroupViewer, TrueFalseGroupViewer, TrueFalseCorrectGroupViewer, FillInBlankGroupViewer, MatchingWithLinesGroupViewer, CrossOutWordGroupViewer, SpontaneousQaGroupViewer, WordOrderAndMatchGroupViewer, AnswerTheQuestionGroupViewer, MatchWordToPictureViewer, MatchWordToPictureGroupViewer, MatchColumnsToMakeSentencesViewer, WordOrderingGroupViewer, SortWordsIntoCategoriesViewer, ChooseThenAnswerGroupViewer, } from './components/questions/viewer';

package/dist/shared/constants/ApiConstant.d.ts

@@ -86,6 +86,7 @@ export declare const API_ENDPOINTS: {
         readonly QUESTION_BANKS: "/api/v1/manage/question-banks";
         readonly QUESTION_BANK_DETAIL: (id: string) => string;
         readonly QUESTION_BANKS_STATISTICS: "/api/v1/manage/question-banks/statistics";
+        readonly QUESTION_BANKS_FILTERS: "/api/v1/manage/question-banks/filters";
         readonly SCHEDULES_SUMMARY: "/api/v1/manage/schedules/summary";
         readonly SCHEDULES_CALENDAR: "/api/v1/manage/schedules/calendar";
         readonly SCHEDULES: "/api/v1/manage/schedules";

package/dist/shared/constants/ApiConstant.js

@@ -95,6 +95,7 @@ export const API_ENDPOINTS = {
         QUESTION_BANKS: `/api/${API_VERSION}/manage/question-banks`,
         QUESTION_BANK_DETAIL: (id) => `/api/${API_VERSION}/manage/question-banks/${id}`,
         QUESTION_BANKS_STATISTICS: `/api/${API_VERSION}/manage/question-banks/statistics`,
+        QUESTION_BANKS_FILTERS: `/api/${API_VERSION}/manage/question-banks/filters`,
         // Schedules endpoints
         SCHEDULES_SUMMARY: `/api/${API_VERSION}/manage/schedules/summary`,
         SCHEDULES_CALENDAR: `/api/${API_VERSION}/manage/schedules/calendar`,

package/dist/shared/lib/rich-text.d.ts

@@ -1,3 +1,7 @@
 /** Strip HTML tags/entities so empty TipTap documents (`<p></p>`) count as blank. */
 export declare function richTextToPlainText(value: string | null | undefined): string;
 export declare function isRichTextEmpty(value: string | null | undefined): boolean;
+/** True when HTML has marks/blocks beyond a plain paragraph (bold, list, table, …). */
+export declare function hasRichTextFormatting(value: string | null | undefined): boolean;
+/** Show stored TipTap HTML as editable plain text without collapsing line breaks. */
+export declare function htmlToPlainEditorText(value: string | null | undefined): string;