@tinyweb_dev/oe-exam-sdk 1.0.1 → 1.0.3

package/dist/components/exams/take/components/question-renderers/MoversListenAndWriteRenderer.d.ts

@@ -1,5 +1,5 @@
 import type { FillBlankQuestion } from '../../types';
-import { type ImageLabelData } from '../../../../questions/_shared/types/question-group.type';
+import type { ImageLabelData } from '../../../../questions/_shared/types/question-group.type';
 interface MoversListenAndWriteRendererProps {
     partNumber: number;
     partName?: string;

package/dist/components/exams/take/components/question-renderers/MoversListenAndWriteRenderer.js

@@ -7,7 +7,7 @@ import CambridgeYleAudioPlayer from '../../../../../components/themes/cambridge-
 import CambridgeYleExampleText from '../../../../../components/themes/cambridge-yle/CambridgeYleExampleText';
 import { countBlanks, formatAcceptedAnswers, getPrimaryAnswer, isBlankCorrect, toBlankValues, } from '../../../../../shared/lib/utils/fill-in-blank';
 import { ImageLabelWordBank } from '../../../../questions/groups/ImageLabelWordBank';
-import { hasImageLabels } from '../../../../questions/_shared/types/question-group.type';
+import { hasImageLabels } from '../../../../questions/_shared/types/question-group.utils';
 /** Preserve author newlines in fill-blank stems by mapping `\n` → `<br />`. */
 function renderTextWithLineBreaks(text) {
     const lines = text.split('\n');

package/dist/components/exams/take/components/question-renderers/MoversWordFillStructuredFormRenderer.js

@@ -6,6 +6,7 @@ import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-y
 import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
 import CambridgeYleAudioPlayer from '../../../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer';
 import { cn } from '../../../../../shared/lib/utils';
+import { expandWfsfCorrectAlts, formatWfsfCorrectLabel, isWfsfBlankCorrect, } from '../../../../../shared/lib/utils/wfsf-blank-match';
 /**
  * Replace `{key}` placeholders with inline blank controls.
  * WITH_OPTIONS blanks become <select>; free-type stay <input>.
@@ -51,14 +52,6 @@ function buildHtmlWithInputPlaceholders(html, wordBank) {
     `;
     });
 }
-function normalizeStructuredAnswer(value, caseSensitive) {
-    const normalized = value
-        .trim()
-        .replace(/[\p{P}]/gu, '')
-        .replace(/\s+/g, ' ')
-        .trim();
-    return caseSensitive ? normalized : normalized.toLowerCase();
-}
 // Stable empty object to avoid new {} on every render (breaks React.memo)
 const emptyObj = {};
 /**
@@ -98,33 +91,33 @@ const StructuredFormQuestion = memo(function StructuredFormQuestion({ question,
             const wrapper = container.querySelector(`[data-blank-wrapper="${key}"]`);
             const hint = container.querySelector(`[data-blank-hint="${key}"]`);
             const userAnswer = initialAnswersRef.current[key] || '';
-            const correctAnswer = question.answers[key] || '';
+            const correctAnswer = question.answers[key];
+            const correctLabel = formatWfsfCorrectLabel(correctAnswer);
             const hasUserAnswer = userAnswer.trim().length > 0;
             const isCorrect = hasUserAnswer
-                && normalizeStructuredAnswer(userAnswer, question.caseSensitive)
-                    === normalizeStructuredAnswer(correctAnswer, question.caseSensitive);
+                && isWfsfBlankCorrect(userAnswer, correctAnswer, question.caseSensitive);
             // Restore saved answer value on mount
-            const shouldReplaceInputWithReviewText = isReviewMode && !isCorrect && correctAnswer.trim().length > 0;
+            const shouldReplaceInputWithReviewText = isReviewMode && !isCorrect && correctLabel.length > 0;
             input.value = shouldReplaceInputWithReviewText
-                ? `${hasUserAnswer ? userAnswer : '(trống)'} → ${correctAnswer}`
+                ? `${hasUserAnswer ? userAnswer : '(trống)'} → ${correctLabel}`
                 : userAnswer;
             input.disabled = isReviewMode;
             const isSelect = input.tagName === 'SELECT';
             // Set classes from blankStyle (letter = square box)
             const blankStyle = question.blankStyle || 'word';
             const isLetter = blankStyle === 'letter';
-            const isPhrase = blankStyle === 'phrase';
+            const isPhrase = blankStyle === 'phrase' || blankStyle === 'translate';
             if (isLetter && !isSelect && 'maxLength' in input) {
-                input.maxLength = Math.max(1, (correctAnswer || ' ').trim().length || 1);
+                const maxAltLen = expandWfsfCorrectAlts(correctAnswer).reduce((max, alt) => Math.max(max, alt.trim().length), 0);
+                input.maxLength = Math.max(1, maxAltLen || 1);
             }
             input.className = cn('structured-blank-input inline-block bg-slate-50/40 text-sm font-semibold outline-none transition-all align-baseline hover:bg-slate-100/60 focus:bg-teal-50/60 focus:ring-0', isSelect
                 ? 'min-w-[5.5rem] max-w-[10rem] rounded border px-2 py-1 text-center'
                 : isLetter
                     ? 'h-7 w-7 rounded border-2 px-0 text-center uppercase'
                     : isPhrase
-                        ? 'min-w-[9rem] max-w-[18rem] w-[14ch] rounded-t border-b-2 px-2 py-0.5 text-center'
-                        : // blankStyle=word — short single-token field
-                            'min-w-[4.5rem] max-w-[7.5rem] w-[8ch] rounded-t border-b-2 px-1 py-0.5 text-center', isReviewMode
+                        ? 'min-w-[16rem] max-w-[36rem] w-[28ch] rounded-t border-b-2 px-2 py-0.5 text-center'
+                        : 'min-w-[4.5rem] max-w-[8rem] w-[10ch] rounded-t border-b-2 px-1 py-0.5 text-center', isReviewMode
                 ? isCorrect
                     ? 'border-emerald-500 bg-emerald-50 text-emerald-800 font-bold'
                     : hasUserAnswer
@@ -132,7 +125,7 @@ const StructuredFormQuestion = memo(function StructuredFormQuestion({ question,
                         : 'border-amber-500 bg-amber-50 text-amber-800 font-bold'
                 : 'border-slate-400 text-slate-800 focus:border-teal-600');
             if (!isSelect && !isLetter && 'size' in input) {
-                input.size = isPhrase ? 18 : 10;
+                input.size = isPhrase ? 28 : 10;
             }
             // letter inline box — host FE may not scan Tailwind h-7/w-7
             if (isLetter) {
@@ -176,7 +169,7 @@ const StructuredFormQuestion = memo(function StructuredFormQuestion({ question,
     }, [processedHtml, isReviewMode]);
     return (_jsxs("div", { className: "space-y-3", children: [question.title && (_jsx("h3", { className: "text-base font-semibold text-gray-800", children: question.title })), question.imageUrl && (_jsx("div", { className: "flex justify-center", children: _jsx("div", { className: "overflow-hidden rounded-lg border border-gray-200", children: _jsx(ResolvedImage, { src: question.imageUrl, alt: question.title || 'Question image', className: "max-h-48 w-auto object-contain" }) }) })), _jsx("div", { ref: containerRef, className: cn('structured-form-content rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4 text-sm leading-relaxed text-gray-800', '[&_.structured-blank-wrapper]:inline-flex [&_.structured-blank-wrapper]:align-baseline [&_.structured-blank-wrapper]:items-baseline [&_.structured-blank-hint]:max-w-[180px]', 
                 // Conversation: speaker column hug name (not equal 50/50 split)
-                '[&_table.dialogue]:w-full [&_table.dialogue]:border-collapse [&_table.dialogue]:table-fixed', '[&_table.dialogue_td.speaker]:w-[1%] [&_table.dialogue_td.speaker]:whitespace-nowrap', '[&_table.dialogue_td.speaker]:align-top [&_table.dialogue_td.speaker]:pr-3', '[&_table.dialogue_td.speaker]:font-semibold [&_table.dialogue_td.speaker]:text-slate-900', '[&_table.dialogue_td]:align-top [&_table.dialogue_td]:py-1.5') }), isReviewMode && (_jsxs("div", { className: "space-y-2 rounded-lg border border-slate-200 bg-slate-50 p-3", children: [_jsxs("div", { className: "flex flex-wrap gap-2 text-[11px] font-medium", children: [_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-1 text-green-700", children: [_jsx("span", { className: "h-2 w-2 rounded-full bg-green-500" }), "\u0110\u00FAng"] }), _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-red-100 px-2 py-1 text-red-700", children: [_jsx("span", { className: "h-2 w-2 rounded-full bg-red-500" }), "Sai"] }), _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-1 text-amber-700", children: [_jsx("span", { className: "h-2 w-2 rounded-full bg-amber-500" }), "Ch\u01B0a tr\u1EA3 l\u1EDDi"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider text-slate-500", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("div", { className: "mt-1 flex flex-wrap gap-1.5", children: Object.entries(question.answers).map(([key, val]) => (_jsxs("span", { className: "rounded border border-green-300 bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800", children: [key, ": ", val] }, key))) })] })] }))] }));
+                '[&_table.dialogue]:w-full [&_table.dialogue]:border-collapse [&_table.dialogue]:table-fixed', '[&_table.dialogue_td.speaker]:w-[1%] [&_table.dialogue_td.speaker]:whitespace-nowrap', '[&_table.dialogue_td.speaker]:align-top [&_table.dialogue_td.speaker]:pr-3', '[&_table.dialogue_td.speaker]:font-semibold [&_table.dialogue_td.speaker]:text-slate-900', '[&_table.dialogue_td]:align-top [&_table.dialogue_td]:py-1.5') }), isReviewMode && (_jsxs("div", { className: "space-y-2 rounded-lg border border-slate-200 bg-slate-50 p-3", children: [_jsxs("div", { className: "flex flex-wrap gap-2 text-[11px] font-medium", children: [_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-1 text-green-700", children: [_jsx("span", { className: "h-2 w-2 rounded-full bg-green-500" }), "\u0110\u00FAng"] }), _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-red-100 px-2 py-1 text-red-700", children: [_jsx("span", { className: "h-2 w-2 rounded-full bg-red-500" }), "Sai"] }), _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-1 text-amber-700", children: [_jsx("span", { className: "h-2 w-2 rounded-full bg-amber-500" }), "Ch\u01B0a tr\u1EA3 l\u1EDDi"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider text-slate-500", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("div", { className: "mt-1 flex flex-wrap gap-1.5", children: Object.entries(question.answers).map(([key, val]) => (_jsxs("span", { className: "rounded border border-green-300 bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800", children: [key, ": ", formatWfsfCorrectLabel(val)] }, key))) })] })] }))] }));
 });
 export function MoversWordFillStructuredFormRenderer({ partNumber, partName, questionCount, instruction, audioUrl, groupTitle, groupContent, groupImageUrl, questions, answers, onAnswerChange, isReviewMode = false, compactLayout = false, }) {
     const answersRef = useRef(answers);

package/dist/components/exams/take/exam-taking.utils.d.ts

@@ -11,7 +11,7 @@ export interface TemplateSection {
     viewMode?: string;
     wordBankConfig?: string[];
 }
-export type WfsfBlankStyle = 'letter' | 'word' | 'phrase';
+export type WfsfBlankStyle = 'letter' | 'word' | 'phrase' | 'translate';
 export type WfsfWordBankEntry = {
     options: string[];
 } | {
@@ -21,7 +21,7 @@ export type WfsfWordBankEntry = {
 export interface WordFillStructuredFormQuestion {
     id: string;
     content: string;
-    answers: Record<string, string>;
+    answers: Record<string, string | string[]>;
     title?: string;
     instruction?: string;
     caseSensitive?: boolean;

package/dist/components/exams/take/exam-taking.utils.js

@@ -118,6 +118,8 @@ export function transformWordFillStructuredForm(questions) {
             return 'letter';
         if (v === 'phrase' || v === 'sentence')
             return 'phrase';
+        if (v === 'translate')
+            return 'translate';
         return 'word';
     };
     const normalizeWordBank = (raw) => {

package/dist/components/exams/take/utils/question-transformers.d.ts

@@ -395,7 +395,7 @@ export declare function transformWriteSentences(questions: ApiQuestion[]): {
     title?: string;
     groupContent?: string;
 };
-export type WfsfBlankStyle = 'letter' | 'word' | 'phrase';
+export type WfsfBlankStyle = 'letter' | 'word' | 'phrase' | 'translate';
 export type WfsfWordBankEntry = {
     options: string[];
 } | {
@@ -408,7 +408,7 @@ export interface WordFillStructuredFormQuestion {
     title: string;
     imageUrl?: string;
     content: string;
-    answers: Record<string, string>;
+    answers: Record<string, string | string[]>;
     caseSensitive: boolean;
     /** letter = square boxes; word / phrase = underline width */
     blankStyle: WfsfBlankStyle;

package/dist/components/exams/take/utils/question-transformers.js

@@ -1209,6 +1209,8 @@ function normalizeWfsfBlankStyle(raw) {
         return 'letter';
     if (v === 'phrase' || v === 'sentence')
         return 'phrase';
+    if (v === 'translate')
+        return 'translate';
     return 'word';
 }
 function normalizeWfsfWordBank(raw) {

package/dist/components/questions/_shared/types/question-group.type.d.ts

@@ -32,7 +32,6 @@ export interface ImageLabelData {
     /** Nhãn / từ hiển thị dưới ảnh */
     label: string;
 }
-export declare function hasImageLabels(items?: ImageLabelData[] | null): boolean;
 /**
  * Shared context fields for a group of ANSWER_THE_QUESTION,
  * CHOOSE_THE_CORRECT_ANSWER, or FILL_IN_BLANK questions.

package/dist/components/questions/_shared/types/question-group.type.js

@@ -9,6 +9,4 @@
  *   - IMAGE_LABEL     → FILL_IN_BLANK word bank (image + label items)
  *   - (future)        → MATCH_BY_WRITING_ANSWER, LISTENING_*, etc.
  */
-export function hasImageLabels(items) {
-    return Array.isArray(items) && items.some((item) => Boolean(item?.imageUrl?.trim() || item?.label?.trim()));
-}
+export {};

package/dist/components/questions/_shared/types/question-group.utils.d.ts

@@ -0,0 +1,2 @@
+import type { ImageLabelData } from './question-group.type';
+export declare function hasImageLabels(items?: ImageLabelData[] | null): boolean;

package/dist/components/questions/_shared/types/question-group.utils.js

@@ -0,0 +1,3 @@
+export function hasImageLabels(items) {
+    return Array.isArray(items) && items.some((item) => Boolean(item?.imageUrl?.trim() || item?.label?.trim()));
+}

package/dist/components/questions/_shared/types/word-fill-structured-form.type.d.ts

@@ -22,7 +22,7 @@ export interface WordFillStructuredFormData {
     audioUrl?: string;
     audioUrls?: string[];
     content: string;
-    answers: Record<string, string>;
+    answers: Record<string, string[]>;
     /**
      * letter = square 1-char box; word = single-word underline; phrase = multi-word; translate = LLM grading.
      * Default when omitted: word.

package/dist/components/questions/groups/ImageLabelWordBank.d.ts

@@ -1,4 +1,4 @@
-import { type ImageLabelData } from '../_shared/types/question-group.type';
+import type { ImageLabelData } from '../_shared/types/question-group.type';
 export interface ImageLabelWordBankProps {
     items?: ImageLabelData[];
     title?: string;

package/dist/components/questions/groups/ImageLabelWordBank.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ResolvedImage } from '../../../components/common/ResolvedImage';
-import { hasImageLabels } from '../_shared/types/question-group.type';
+import { hasImageLabels } from '../_shared/types/question-group.utils';
 /**
  * Horizontal picture + label bank shown to students (and creator preview).
  */

package/dist/components/questions/types/choose-the-correct-answer/ChooseTheCorrectAnswerCreator.js

@@ -449,7 +449,7 @@ function ChooseTheCorrectAnswerCreatorContent({ initialData, onSave, onCancel, o
                                                     ? 'border-violet-300 bg-violet-50 text-violet-700'
                                                     : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'} ${Boolean(multipleAnswers) ? 'cursor-not-allowed opacity-50' : ''}`, children: [_jsx(ListChecks, { className: "h-4 w-4" }), "Nhi\u1EC1u \u0111\u00E1p \u00E1n"] }), _jsxs("button", { type: "button", style: { paddingBlock: 'calc(var(--spacing) * 1)' }, onClick: () => setIsTipTapMode((enabled) => !enabled), title: isTipTapMode ? 'Chuyển về ô nhập thường' : 'Bật định dạng chữ (in đậm, danh sách, bảng)', className: `inline-flex items-center gap-2 rounded-md border px-3.5 text-sm font-medium transition-colors select-none ${isTipTapMode
                                                     ? 'border-indigo-300 bg-indigo-50 text-indigo-700'
-                                                    : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'}`, children: [_jsx(Pilcrow, { className: "h-4 w-4" }), "\u0110\u1ECBnh d\u1EA1ng"] })] })] }), viewMode === 'CONVERSATION' && (_jsxs("div", { className: "space-y-3", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Users, { className: "h-4 w-4 text-indigo-500" }), "H\u1ED9i tho\u1EA1i ", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn - d\u00F9ng cho c\u00E2u h\u1ECFi d\u1EA1ng h\u1ED9i tho\u1EA1i)" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4 rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: "askerName", className: "flex items-center gap-1 text-sm font-medium text-gray-600", children: ["T\u00EAn ng\u01B0\u1EDDi h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "askerName", ...form.register('askerName'), placeholder: "VD: John, Mary, Teacher...", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${form.hasError('askerName') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('askerName') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('askerName') }))] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: "answererName", className: "flex items-center gap-1 text-sm font-medium text-gray-600", children: ["T\u00EAn ng\u01B0\u1EDDi tr\u1EA3 l\u1EDDi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "answererName", ...form.register('answererName'), placeholder: "VD: Tom, Anna, Student...", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${form.hasError('answererName') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('answererName') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('answererName') }))] })] })] })), (!questionConfig || questionConfig.length === 0 || questionConfig.includes('question')) && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "question", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-indigo-500" }), _jsx("span", { className: "flex items-center gap-1", children: "C\u00E2u h\u1ECFi" }), _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsx(ChooseAnswerTextInput, { value: watchedQuestion, onChange: (html) => form.setValue('question', html, { shouldValidate: true }), isTipTapMode: isTipTapMode, placeholder: "Nh\u1EADp c\u00E2u h\u1ECFi..." }), form.hasError('question') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('question') }))] })), ((!questionConfig || questionConfig.length === 0 || questionConfig.includes('imageUrl') || questionConfig.includes('imageUrl ')) && !isImageInputVisible
+                                                    : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'}`, children: [_jsx(Pilcrow, { className: "h-4 w-4" }), "\u0110\u1ECBnh d\u1EA1ng"] })] })] }), viewMode === 'CONVERSATION' && (_jsxs("div", { className: "space-y-3", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Users, { className: "h-4 w-4 text-indigo-500" }), "H\u1ED9i tho\u1EA1i ", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn - d\u00F9ng cho c\u00E2u h\u1ECFi d\u1EA1ng h\u1ED9i tho\u1EA1i)" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4 rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: "askerName", className: "flex items-center gap-1 text-sm font-medium text-gray-600", children: ["T\u00EAn ng\u01B0\u1EDDi h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "askerName", ...form.register('askerName'), placeholder: "VD: John, Mary, Teacher...", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${form.hasError('askerName') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('askerName') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('askerName') }))] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: "answererName", className: "flex items-center gap-1 text-sm font-medium text-gray-600", children: ["T\u00EAn ng\u01B0\u1EDDi tr\u1EA3 l\u1EDDi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "answererName", ...form.register('answererName'), placeholder: "VD: Tom, Anna, Student...", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${form.hasError('answererName') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('answererName') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('answererName') }))] })] })] })), (!questionConfig || questionConfig.length === 0 || questionConfig.includes('question')) && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "question", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-indigo-500" }), _jsx("span", { className: "flex items-center gap-1", children: "C\u00E2u h\u1ECFi" }), _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsx(ChooseAnswerTextInput, { value: watchedQuestion ?? '', onChange: (html) => form.setValue('question', html, { shouldValidate: true }), isTipTapMode: isTipTapMode, placeholder: "Nh\u1EADp c\u00E2u h\u1ECFi..." }), form.hasError('question') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('question') }))] })), ((!questionConfig || questionConfig.length === 0 || questionConfig.includes('imageUrl') || questionConfig.includes('imageUrl ')) && !isImageInputVisible
                                 || !isExplanationVisible) && (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [(!questionConfig || questionConfig.length === 0 || questionConfig.includes('imageUrl') || questionConfig.includes('imageUrl ')) && !isImageInputVisible && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsImageInputVisible(true), className: "gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700", children: [_jsx(ImageIcon, { className: "h-4 w-4" }), watchedImageUrl ? 'Hiện hình ảnh' : 'Thêm hình ảnh'] })), !isExplanationVisible && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsExplanationVisible(true), className: "gap-2 border-amber-200 text-amber-700 hover:bg-amber-50 hover:text-amber-800", children: [_jsx(BookOpen, { className: "h-4 w-4" }), watchedExplanation ? 'Hiện giải thích' : 'Thêm giải thích'] }))] })), (!questionConfig || questionConfig.length === 0 || questionConfig.includes('imageUrl') || questionConfig.includes('imageUrl ')) && isImageInputVisible && (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-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(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setIsImageInputVisible(false), className: "h-8 text-gray-500 hover:text-gray-700", children: "\u1EA8n" })] }), _jsx(FileUpload, { id: "question-image", label: "", accept: "image/*", value: watchedImageUrl || '', onChange: (url) => {
                                             form.setValue('imageUrl', url, { shouldValidate: true });
                                         }, onPresignedUrlChange: setImagePreviewUrl, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }), form.hasError('imageUrl') && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: form.getFieldError('imageUrl') })), displayPreviewUrl && (_jsx(ImagePreview, { src: displayPreviewUrl, alt: "Preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] })), isExplanationVisible && (_jsxs("div", { className: "relative", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setIsExplanationVisible(false), className: "absolute right-3 top-3 z-10 h-8 text-gray-500 hover:text-gray-700", children: "\u1EA8n" }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", 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-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-3.5 w-3.5 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "mt-0.5 text-xs text-gray-500", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { className: "px-4 pb-4", children: _jsx(Textarea, { ...form.register('explanation'), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] resize-none border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200" }) })] })] })), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100", children: _jsx("span", { className: "text-lg", children: "\u274C" }) }), _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] })] })), form.formState.errors.options?.message && (_jsx("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4", children: _jsx("p", { className: "text-sm text-red-600", children: form.formState.errors.options.message }) }))] })] }), (!questionConfig || questionConfig.length === 0 || questionConfig.includes('options')) && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-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-6 w-6 items-center justify-center rounded-md bg-indigo-100", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsxs(CardTitle, { className: "text-base font-semibold text-gray-800", children: ["C\u00E1c l\u1EF1a ch\u1ECDn ", _jsxs("span", { className: "text-xs font-normal text-gray-500", children: ["(", watchedOptions.length, " \u0111\u00E1p \u00E1n)"] })] })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-1.5", children: [_jsx(Type, { className: `h-3.5 w-3.5 ${watchedOptionType === 'text' ? 'text-indigo-600' : 'text-gray-400'}` }), _jsx("span", { className: `text-xs font-medium ${watchedOptionType === 'text' ? 'text-indigo-600' : 'text-gray-400'}`, children: "Text" }), _jsx(Switch, { checked: watchedOptionType === 'image', disabled: true, className: watchedOptionType === 'image' ? '!bg-indigo-600 !opacity-100' : '!bg-indigo-600 !opacity-100', onCheckedChange: (checked) => {

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

@@ -4,7 +4,7 @@ import { useState, useEffect, useMemo } from 'react';
 import { Input } from '../../../../components/ui/input';
 import { Check, X, PenLine, AlertTriangle, ClipboardList, Lightbulb, BookOpen, Hash, Volume2, } from 'lucide-react';
 import { ImageLabelWordBank } from '../../groups/ImageLabelWordBank';
-import { hasImageLabels } from '../../_shared/types/question-group.type';
+import { hasImageLabels } from '../../_shared/types/question-group.utils';
 import { extractPlaceholderIndices, formatBlankAnswersDisplay, getPrimaryBlankAnswer, isBlankInputCorrect, normalizeBlankAnswers, normalizeFillInBlankAnswers, } from './answer-utils';
 import { parseFillBlankSegments } from '../../../../shared/lib/utils/fill-in-blank';
 import { cn } from '../../../../shared/lib/utils';

package/dist/components/questions/types/word-fill-structured-form/WfsfWordBankEditor.d.ts

@@ -8,7 +8,7 @@ export type WfsfWordBankEditorProps = {
     optionsBank: WfsfOptionsWordBankEntry[];
     onOptionsBankChange: (next: WfsfOptionsWordBankEntry[]) => void;
     blankKeys: string[];
-    answers: Record<string, string>;
-    onAnswerChange: (key: string, value: string) => void;
+    answers: Record<string, string[]>;
+    onAnswerChange: (key: string, value: string[]) => void;
 };
 export declare function WfsfWordBankEditor({ mode, onModeChange, sharedBank, onSharedBankChange, optionsBank, onOptionsBankChange, blankKeys, answers, onAnswerChange, }: WfsfWordBankEditorProps): import("react").JSX.Element;

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

@@ -60,9 +60,10 @@ export function WfsfWordBankEditor({ mode, onModeChange, sharedBank, onSharedBan
         next[blankIndex] = { options };
         onOptionsBankChange(next);
         const key = blankKeys[blankIndex];
-        const removed = entry.options[optionIndex];
-        if (key && answers[key] === removed)
-            onAnswerChange(key, '');
+        const removed = entry.options[optionIndex]?.trim();
+        if (key && removed && (answers[key] || []).includes(removed)) {
+            onAnswerChange(key, (answers[key] || []).filter((alt) => alt !== removed));
+        }
     };
     return (_jsxs("div", { className: "space-y-4", children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-indigo-400 to-purple-400" }), _jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-indigo-100", children: _jsx(Library, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "Word Bank / g\u1EE3i \u00FD \u0111\u00E1p \u00E1n" }), _jsx("p", { className: "mt-0.5 text-xs text-gray-500", children: "Ch\u1ECDn ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB cho h\u1ECDc sinh khi l\u00E0m b\u00E0i (WFSF plan 0024/0025)" })] })] }) }), _jsx(CardContent, { className: "space-y-3 px-4 pb-4", children: _jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-3", children: MODE_OPTIONS.map((opt) => {
                                 const active = mode === opt.id;
@@ -76,10 +77,19 @@ export function WfsfWordBankEditor({ mode, onModeChange, sharedBank, onSharedBan
                                                         : 'bg-gradient-to-br from-purple-500 to-pink-600'}`, children: index + 1 }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Checkbox, { id: `wfsf-ex-${index}`, checked: !!item.isExample, onCheckedChange: (c) => toggleSharedExample(index, c === true) }), _jsx(Label, { htmlFor: `wfsf-ex-${index}`, className: "cursor-pointer text-xs text-gray-600", children: "Example" })] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeSharedWord(index), className: "h-7 w-7 p-0 text-gray-400 hover:bg-red-50 hover:text-red-500", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] })] }), _jsx(Input, { value: item.word, onChange: (e) => updateSharedWord(index, e.target.value), placeholder: "Nh\u1EADp t\u1EEB...", className: item.isExample ? 'bg-amber-50' : 'border-gray-200' })] }, index))) }))] })] })), mode === 'WITH_OPTIONS' && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-teal-400 to-cyan-400" }), _jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-teal-100", children: _jsx(ListChecks, { className: "h-3.5 w-3.5 text-teal-600" }) }), _jsxs(CardTitle, { className: "text-base font-semibold text-gray-800", children: ["L\u1EF1a ch\u1ECDn theo ch\u1ED7 tr\u1ED1ng (", blankKeys.length, ")"] })] }) }), _jsx(CardContent, { className: "space-y-4 px-4 pb-4", children: blankKeys.length === 0 ? (_jsxs("p", { className: "rounded-lg border-2 border-dashed border-gray-200 p-6 text-center text-sm text-gray-500", children: ["Ch\u01B0a c\u00F3 ch\u1ED7 tr\u1ED1ng. Th\u00EAm ", '{0}', ", ", '{1}', "\u2026 trong n\u1ED9i dung tr\u01B0\u1EDBc."] })) : (blankKeys.map((key, blankIndex) => {
                             const entry = optionsBank[blankIndex] ?? null;
                             const isFree = entry == null;
-                            const selected = answers[key] || '';
+                            const selected = (answers[key] || []).filter(Boolean);
                             return (_jsxs("div", { className: `rounded-xl border-2 p-4 ${isFree
                                     ? 'border-dashed border-gray-200 bg-gray-50/40'
-                                    : 'border-gray-200 bg-white'}`, children: [_jsxs("div", { className: "mb-3 flex flex-wrap items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-teal-500 to-cyan-600 text-sm font-bold text-white", children: key }), _jsxs("span", { className: "text-sm font-semibold text-gray-700", children: ["Ch\u1ED7 tr\u1ED1ng ", _jsx("code", { className: "text-teal-700", children: `{${key}}` })] }), selected && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700", children: [_jsx(CheckCircle2, { className: "h-3 w-3" }), selected] }))] }), _jsxs("label", { className: "flex items-center gap-2 text-xs text-gray-600", children: [_jsx(Checkbox, { checked: isFree, onCheckedChange: (c) => setBlankFreeType(blankIndex, c === true) }), "Free-type (kh\u00F4ng options)"] })] }), !isFree && entry && (_jsxs("div", { className: "space-y-2", children: [entry.options.map((option, optionIndex) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", title: "Ch\u1ECDn l\u00E0m \u0111\u00E1p \u00E1n \u0111\u00FAng", onClick: () => option.trim() && onAnswerChange(key, option.trim()), className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-xs font-bold ${selected === option.trim() && option.trim()
+                                    : 'border-gray-200 bg-white'}`, children: [_jsxs("div", { className: "mb-3 flex flex-wrap items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-teal-500 to-cyan-600 text-sm font-bold text-white", children: key }), _jsxs("span", { className: "text-sm font-semibold text-gray-700", children: ["Ch\u1ED7 tr\u1ED1ng ", _jsx("code", { className: "text-teal-700", children: `{${key}}` })] }), selected.length > 0 && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700", children: [_jsx(CheckCircle2, { className: "h-3 w-3" }), selected.join(' / ')] }))] }), _jsxs("label", { className: "flex items-center gap-2 text-xs text-gray-600", children: [_jsx(Checkbox, { checked: isFree, onCheckedChange: (c) => setBlankFreeType(blankIndex, c === true) }), "Free-type (kh\u00F4ng options)"] })] }), !isFree && entry && (_jsxs("div", { className: "space-y-2", children: [entry.options.map((option, optionIndex) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", title: "Ch\u1ECDn / b\u1ECF \u0111\u00E1p \u00E1n \u0111\u00FAng", onClick: () => {
+                                                            const opt = option.trim();
+                                                            if (!opt)
+                                                                return;
+                                                            const current = answers[key] || [];
+                                                            const next = current.includes(opt)
+                                                                ? current.filter((alt) => alt !== opt)
+                                                                : [...current, opt];
+                                                            onAnswerChange(key, next);
+                                                        }, className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-xs font-bold ${selected.includes(option.trim()) && option.trim()
                                                             ? 'bg-green-500 text-white'
                                                             : 'bg-gray-100 text-gray-500 hover:bg-green-100 hover:text-green-600'}`, children: String.fromCharCode(65 + optionIndex) }), _jsx(Input, { value: option, onChange: (e) => updateOption(blankIndex, optionIndex, e.target.value), placeholder: `Lựa chọn ${String.fromCharCode(65 + optionIndex)}`, className: "flex-1 border-gray-200 text-sm" }), entry.options.length > 2 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeOption(blankIndex, optionIndex), className: "h-8 w-8 p-0 text-red-400 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }, optionIndex))), _jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => addOption(blankIndex), className: "mt-1 gap-1 text-xs text-teal-600 hover:bg-teal-50", children: [_jsx(Plus, { className: "h-3 w-3" }), "Th\u00EAm l\u1EF1a ch\u1ECDn"] })] }))] }, key));
                         })) })] }))] }));

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

@@ -5,12 +5,15 @@ import { Check, X, FileText, Library } from 'lucide-react';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
 import { cn } from '../../../../shared/lib/utils';
 import { detectWfsfBankMode, isOptionsWordEntry, normalizeSharedWordBank, } from './wfsf-word-bank.utils';
+import { expandWfsfCorrectAlts, formatWfsfCorrectLabel, isWfsfBlankCorrect, primaryWfsfAnswers, } from '../../../../shared/lib/utils/wfsf-blank-match';
 function normalizeWfsfBlankStyle(raw) {
     const v = String(raw || '').toLowerCase();
     if (v === 'letter' || v === 'box')
         return 'letter';
     if (v === 'phrase' || v === 'sentence')
         return 'phrase';
+    if (v === 'translate')
+        return 'translate';
     return 'word';
 }
 function parseStyleAttribute(styleValue) {
@@ -59,7 +62,10 @@ function ClientAudioItem({ url }) {
 }
 const DEFAULT_WFSF_HEADER = 'Điền từ vào biểu mẫu có cấu trúc';
 export function WordFillStructuredFormClient({ questionData, isReviewMode = false, userAnswer, onAnswerChange, autoFillCorrectAnswers = false, instruction, questionNumber, explanation, }) {
-    const { title = '', content = '', answers = {}, caseSensitive = false, viewMode, wordBank = [], instruction: dataInstruction, } = questionData;
+    const { title = '', content = '', answers = {}, caseSensitive = false, blankStyle: rawBlankStyle, viewMode, wordBank = [], instruction: dataInstruction, } = questionData;
+    const blankStyle = normalizeWfsfBlankStyle(rawBlankStyle);
+    const isLetterBlank = blankStyle === 'letter';
+    const isPhraseBlank = blankStyle === 'phrase' || blankStyle === 'translate';
     const allImages = useMemo(() => {
         if (Array.isArray(questionData.imageUrls) && questionData.imageUrls.length > 0) {
             return questionData.imageUrls.filter(Boolean);
@@ -80,7 +86,7 @@ export function WordFillStructuredFormClient({ questionData, isReviewMode = fals
         if (userAnswer)
             return { ...userAnswer };
         if (autoFillCorrectAnswers)
-            return { ...answers };
+            return primaryWfsfAnswers(answers);
         return {};
     });
     const [expandedBlank, setExpandedBlank] = useState(null);
@@ -127,11 +133,7 @@ export function WordFillStructuredFormClient({ questionData, isReviewMode = fals
         });
     }, [content]);
     const allFilled = expectedBlankKeys.every(k => filledAnswers[k]?.trim());
-    const isAllCorrect = isReviewMode && expectedBlankKeys.every(k => {
-        const userVal = (filledAnswers[k] || '').trim();
-        const correctVal = (answers[k] || '').trim();
-        return caseSensitive ? userVal === correctVal : userVal.toLowerCase() === correctVal.toLowerCase();
-    });
+    const isAllCorrect = isReviewMode && expectedBlankKeys.every((k) => isWfsfBlankCorrect(filledAnswers[k] || '', answers[k], caseSensitive));
     // Header = page rubric. Pearson preview maps draft.instruction → explanation.
     const rawExplanation = String(explanation || questionData.explanation || '').trim();
     const headerInstruction = String(instruction || dataInstruction || rawExplanation || '').trim();
@@ -153,11 +155,8 @@ export function WordFillStructuredFormClient({ questionData, isReviewMode = fals
     }, [isReviewMode, onAnswerChange]);
     const renderBlank = useCallback((key, reactKey) => {
         const filled = filledAnswers[key] || '';
-        const correctAnswer = answers[key] || '';
-        const normalizedFilled = caseSensitive ? filled.trim() : filled.trim().toLowerCase();
-        const normalizedCorrect = caseSensitive ? correctAnswer.trim() : correctAnswer.trim().toLowerCase();
-        const isCorrectFill = isReviewMode && normalizedFilled === normalizedCorrect;
-        const isWrongFill = isReviewMode && !!filled && normalizedFilled !== normalizedCorrect;
+        const isCorrectFill = isReviewMode && isWfsfBlankCorrect(filled, answers[key], caseSensitive);
+        const isWrongFill = isReviewMode && !!filled && !isCorrectFill;
         const blankOptions = optionsByKey.get(key);
         if (bankMode === 'WITH_OPTIONS' && blankOptions && blankOptions.length >= 2) {
             const isExpanded = expandedBlank === key;
@@ -173,13 +172,36 @@ export function WordFillStructuredFormClient({ questionData, isReviewMode = fals
                                 ? 'border-teal-500 bg-teal-100 text-teal-800'
                                 : 'border-gray-200 bg-white text-gray-700 hover:border-teal-300 hover:bg-teal-50'), children: opt }, opt))) }))] }, reactKey));
         }
-        return (_jsxs("span", { className: "relative mx-1 inline-flex items-baseline align-baseline", children: [_jsx("span", { className: "absolute -top-4 left-1 text-[10px] font-semibold text-gray-400", children: key }), _jsx("input", { type: "text", value: filled, onChange: (e) => handleInputChange(key, e.target.value), disabled: isReviewMode, placeholder: "", className: cn('inline-block min-w-[90px] max-w-[200px] rounded-t border-b-2 bg-slate-50/40 px-2 py-0.5 text-center text-sm font-semibold outline-none transition-all align-baseline hover:bg-slate-100/60 focus:bg-teal-50/60 focus:ring-0', isReviewMode
+        return (_jsxs("span", { className: "relative mx-1 inline-flex items-baseline align-baseline", children: [_jsx("span", { className: "absolute -top-4 left-1 text-[10px] font-semibold text-gray-400", children: key }), _jsx("input", { type: "text", value: filled, onChange: (e) => handleInputChange(key, e.target.value), disabled: isReviewMode, placeholder: "", maxLength: isLetterBlank
+                        ? Math.max(1, expandWfsfCorrectAlts(answers[key]).reduce((max, alt) => Math.max(max, alt.trim().length), 0) || 1)
+                        : undefined, size: isLetterBlank ? undefined : isPhraseBlank ? 28 : 10, className: cn('inline-block bg-slate-50/40 text-center text-sm font-semibold outline-none transition-all align-baseline hover:bg-slate-100/60 focus:bg-teal-50/60 focus:ring-0', isLetterBlank
+                        ? 'h-7 w-7 rounded border-2 px-0 uppercase'
+                        : isPhraseBlank
+                            ? 'min-w-[16rem] max-w-[36rem] w-[28ch] rounded-t border-b-2 px-2 py-0.5'
+                            : 'min-w-[4.5rem] max-w-[8rem] w-[10ch] rounded-t border-b-2 px-1 py-0.5', isReviewMode
                         ? isCorrectFill
                             ? 'border-emerald-500 bg-emerald-50 text-emerald-800 font-bold'
                             : isWrongFill
                                 ? 'border-rose-500 bg-rose-50 text-rose-800 font-bold'
                                 : 'border-amber-500 bg-amber-50 text-amber-800'
-                        : 'border-slate-400 text-slate-800 focus:border-teal-600') }), isReviewMode && filled && (isCorrectFill
+                        : 'border-slate-400 text-slate-800 focus:border-teal-600'), style: isLetterBlank
+                        ? {
+                            display: 'inline-block',
+                            width: '1.75rem',
+                            height: '1.75rem',
+                            minWidth: '1.75rem',
+                            maxWidth: '1.75rem',
+                            padding: 0,
+                            margin: '0 2px',
+                            borderWidth: 2,
+                            borderStyle: 'solid',
+                            borderRadius: 4,
+                            textAlign: 'center',
+                            fontWeight: 700,
+                            textTransform: 'uppercase',
+                            boxSizing: 'border-box',
+                        }
+                        : undefined }), isReviewMode && filled && (isCorrectFill
                     ? _jsx(Check, { className: "ml-0.5 h-3.5 w-3.5 text-green-600" })
                     : _jsx(X, { className: "ml-0.5 h-3.5 w-3.5 text-red-600" }))] }, reactKey));
     }, [
@@ -190,6 +212,8 @@ export function WordFillStructuredFormClient({ questionData, isReviewMode = fals
         filledAnswers,
         handleInputChange,
         handleSelectOption,
+        isLetterBlank,
+        isPhraseBlank,
         isReviewMode,
         optionsByKey,
     ]);
@@ -260,5 +284,5 @@ export function WordFillStructuredFormClient({ questionData, isReviewMode = fals
                                                 : used
                                                     ? 'border-purple-200 bg-white/60 text-purple-400 line-through'
                                                     : 'border-purple-300 bg-white text-purple-800'), children: [item.word, item.isExample ? ' (ex)' : ''] }, `${item.word}-${index}`));
-                                    }) })] })), _jsx("div", { className: "structured-form-content space-y-2 rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-5 text-base leading-loose text-gray-800", children: renderedContent }), isReviewMode && !isAllCorrect && (_jsxs("div", { className: "rounded-lg border border-green-200 bg-green-50 p-3", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-green-600", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: expectedBlankKeys.map((key) => (_jsxs("span", { className: "rounded-lg border border-green-300 bg-green-100 px-3 py-1.5 text-sm font-semibold text-green-800", children: [`{${key}}`, ": ", answers[key]] }, key))) })] })), isReviewMode && displayExplanation && (_jsxs("div", { className: "rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-3", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-blue-600", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-blue-800", children: displayExplanation })] }))] })] }) }));
+                                    }) })] })), _jsx("div", { className: "structured-form-content space-y-2 rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-5 text-base leading-loose text-gray-800", children: renderedContent }), isReviewMode && !isAllCorrect && (_jsxs("div", { className: "rounded-lg border border-green-200 bg-green-50 p-3", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-green-600", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: expectedBlankKeys.map((key) => (_jsxs("span", { className: "rounded-lg border border-green-300 bg-green-100 px-3 py-1.5 text-sm font-semibold text-green-800", children: [`{${key}}`, ": ", formatWfsfCorrectLabel(answers[key])] }, key))) })] })), isReviewMode && displayExplanation && (_jsxs("div", { className: "rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-3", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-blue-600", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-blue-800", children: displayExplanation })] }))] })] }) }));
 }

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

@@ -20,6 +20,7 @@ import { ImagePreview } from '../../../../components/ui/image-preview';
 import { WordFillStructuredFormClient } from './WordFillStructuredFormClient';
 import { WfsfWordBankEditor } from './WfsfWordBankEditor';
 import { useDebouncedCallback, usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { expandWfsfCorrectAlts, hasWfsfBlankAnswer, normalizeWfsfAnswersMap, primaryWfsfAnswers, } from '../../../../shared/lib/utils/wfsf-blank-match';
 import { BasicQuestionGroupCard } from '../../groups/BasicQuestionGroupCard';
 import { DocumentGroupCard } from '../../groups/DocumentGroupCard';
 import { useBasicQuestionGroup, getGroupNumberForIndex } from '../../_shared/hooks/useBasicQuestionGroup';
@@ -173,7 +174,7 @@ export function WordFillStructuredFormCreator({ initialData, onSave, onCancel, o
     // ── TipTap ─────────────────────────────────────────────────────────────────
     const initialContent = initialData?.content || '<p></p>';
     const [content, setContent] = useState(initialContent);
-    const [answers, setAnswers] = useState(initialData?.answers || {});
+    const [answers, setAnswers] = useState(() => normalizeWfsfAnswersMap(initialData?.answers || {}));
     const previousPayloadRef = useRef('');
     const previousInitialDataRef = useRef(initialData);
     const isInitializingRef = useRef(false);
@@ -248,7 +249,7 @@ export function WordFillStructuredFormCreator({ initialData, onSave, onCancel, o
                 ? nextExplanation
                 : '');
         }
-        setAnswers(initialData?.answers || {});
+        setAnswers(normalizeWfsfAnswersMap(initialData?.answers || {}));
         setBlankStyle(initialData?.blankStyle);
         const nextMode = detectWfsfBankMode(initialData?.viewMode ?? viewModeProp, initialData?.wordBank);
         setBankMode(nextMode);
@@ -299,12 +300,31 @@ export function WordFillStructuredFormCreator({ initialData, onSave, onCancel, o
                 changed = true;
             } });
             expectedBlankKeys.forEach(k => { if (!(k in next)) {
-                next[k] = '';
+                next[k] = [''];
                 changed = true;
             } });
             return changed ? next : prev;
         });
     }, [expectedBlankKeys]);
+    const updateAnswerAlt = useCallback((key, index, value) => {
+        setAnswers((prev) => {
+            const current = [...(prev[key] || [''])];
+            current[index] = value;
+            return { ...prev, [key]: current };
+        });
+    }, []);
+    const addAnswerAlt = useCallback((key) => {
+        setAnswers((prev) => ({ ...prev, [key]: [...(prev[key] || ['']), ''] }));
+    }, []);
+    const removeAnswerAlt = useCallback((key, index) => {
+        setAnswers((prev) => {
+            const current = [...(prev[key] || [''])];
+            if (current.length <= 1)
+                return { ...prev, [key]: [''] };
+            current.splice(index, 1);
+            return { ...prev, [key]: current };
+        });
+    }, []);
     // Keep WITH_OPTIONS bank length aligned to blank keys
     useEffect(() => {
         if (bankMode !== 'WITH_OPTIONS')
@@ -413,7 +433,7 @@ export function WordFillStructuredFormCreator({ initialData, onSave, onCancel, o
                 if (expectedBlankKeys.length === 0)
                     return false;
                 for (const key of expectedBlankKeys) {
-                    if (!answers[key] || answers[key].trim() === '')
+                    if (!hasWfsfBlankAnswer(answers[key]))
                         return false;
                 }
                 if (bankMode === 'WITH_WORD_BANK') {
@@ -432,8 +452,10 @@ export function WordFillStructuredFormCreator({ initialData, onSave, onCancel, o
                         if (opts.length < 2)
                             return false;
                         const key = expectedBlankKeys[i];
-                        const ans = (answers[key] || '').trim();
-                        if (ans && !opts.includes(ans))
+                        const alts = expandWfsfCorrectAlts(answers[key]);
+                        if (alts.length === 0)
+                            return false;
+                        if (alts.some((alt) => !opts.includes(alt)))
                             return false;
                     }
                 }
@@ -453,10 +475,10 @@ export function WordFillStructuredFormCreator({ initialData, onSave, onCancel, o
     ]);
     // ── Preview mode ───────────────────────────────────────────────────────────
     if (isPreviewMode) {
-        return (_jsxs("div", { className: "space-y-4", children: [_jsx(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-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-teal-500 to-cyan-600 shadow-sm", children: _jsx(Eye, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "\u0110i\u1EC1n t\u1EEB \u2013 Xem tr\u01B0\u1EDBc" }), _jsx("p", { className: "text-xs text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc v\u1EDBi \u0111\u00E1p \u00E1n \u0111\u00FAng \u0111\u00E3 \u0111\u01B0\u1EE3c \u0111i\u1EC1n s\u1EB5n" })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsPreviewMode(false), className: "gap-2 border-teal-200 text-teal-700 hover:bg-teal-50", children: [_jsx(Pencil, { className: "h-4 w-4" }), "Quay l\u1EA1i Edit"] })] }) }) }), _jsx(WordFillStructuredFormClient, { questionData: buildFormData(), isReviewMode: true, userAnswer: answers, instruction: instruction })] }));
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-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-teal-500 to-cyan-600 shadow-sm", children: _jsx(Eye, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "\u0110i\u1EC1n t\u1EEB \u2013 Xem tr\u01B0\u1EDBc" }), _jsx("p", { className: "text-xs text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc v\u1EDBi \u0111\u00E1p \u00E1n \u0111\u00FAng \u0111\u00E3 \u0111\u01B0\u1EE3c \u0111i\u1EC1n s\u1EB5n" })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsPreviewMode(false), className: "gap-2 border-teal-200 text-teal-700 hover:bg-teal-50", children: [_jsx(Pencil, { className: "h-4 w-4" }), "Quay l\u1EA1i Edit"] })] }) }) }), _jsx(WordFillStructuredFormClient, { questionData: buildFormData(), isReviewMode: true, userAnswer: primaryWfsfAnswers(answers), instruction: instruction })] }));
     }
     // ── Edit mode ──────────────────────────────────────────────────────────────
-    return (_jsxs("div", { className: "space-y-4", children: [isGrouped && effectiveGroupType === 'BASIC' && (_jsx(BasicQuestionGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, groupConfig: groupType ? groupConfig : undefined, isReadOnly: !isFirstInGroup, uploadIdPrefix: `word-fill-structured-${partId ?? 'group'}` })), isGrouped && effectiveGroupType === 'DOCUMENT' && (_jsx(DocumentGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, groupConfig: groupType ? groupConfig : undefined, isReadOnly: !isFirstInGroup, uploadIdPrefix: `word-fill-structured-${partId ?? 'document'}` })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-teal-500 via-cyan-500 to-emerald-500" }), _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-gray-100", children: _jsx(PenLine, { className: "h-4 w-4 text-teal-600" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "\u0110i\u1EC1n t\u1EEB v\u00E0o bi\u1EC3u m\u1EABu c\u00F3 c\u1EA5u tr\u00FAc" }), _jsxs("p", { className: "text-xs text-gray-500", children: ["Nh\u1EADp n\u1ED9i dung, \u0111\u1EB7t ch\u1ED7 tr\u1ED1ng b\u1EB1ng ", `{0}`, " ", `{1}`, "\u2026 r\u1ED3i \u0111i\u1EC1n \u0111\u00E1p \u00E1n b\u00EAn d\u01B0\u1EDBi"] })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsPreviewMode(true), disabled: expectedBlankKeys.length === 0 || expectedBlankKeys.some(k => !answers[k]?.trim()), className: "gap-2 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-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: "space-y-2", children: [_jsxs(Label, { htmlFor: "wfsf-instruction", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Info, { className: "h-4 w-4 text-teal-500" }), "Instruction", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(h\u01B0\u1EDBng d\u1EABn b\u00E0i t\u1EADp)" })] }), _jsx(Textarea, { id: "wfsf-instruction", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: "VD: Complete the words in the sentences. Use the words in the box.", rows: 2, className: "min-h-[64px] resize-y border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-100" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(PointsInput, { value: points, onChange: (e) => setPoints(Number(e.target.value) || 1) }), _jsxs("div", { role: "button", tabIndex: 0, onClick: () => setCaseSensitive(!caseSensitive), onKeyDown: (e) => { if (e.key === ' ' || e.key === 'Enter')
+    return (_jsxs("div", { className: "space-y-4", children: [isGrouped && effectiveGroupType === 'BASIC' && (_jsx(BasicQuestionGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, groupConfig: groupType ? groupConfig : undefined, isReadOnly: !isFirstInGroup, uploadIdPrefix: `word-fill-structured-${partId ?? 'group'}` })), isGrouped && effectiveGroupType === 'DOCUMENT' && (_jsx(DocumentGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, groupConfig: groupType ? groupConfig : undefined, isReadOnly: !isFirstInGroup, uploadIdPrefix: `word-fill-structured-${partId ?? 'document'}` })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-teal-500 via-cyan-500 to-emerald-500" }), _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-gray-100", children: _jsx(PenLine, { className: "h-4 w-4 text-teal-600" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "\u0110i\u1EC1n t\u1EEB v\u00E0o bi\u1EC3u m\u1EABu c\u00F3 c\u1EA5u tr\u00FAc" }), _jsxs("p", { className: "text-xs text-gray-500", children: ["Nh\u1EADp n\u1ED9i dung, \u0111\u1EB7t ch\u1ED7 tr\u1ED1ng b\u1EB1ng ", `{0}`, " ", `{1}`, "\u2026 r\u1ED3i \u0111i\u1EC1n \u0111\u00E1p \u00E1n b\u00EAn d\u01B0\u1EDBi"] })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsPreviewMode(true), disabled: expectedBlankKeys.length === 0 || expectedBlankKeys.some(k => !hasWfsfBlankAnswer(answers[k])), className: "gap-2 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-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: "space-y-2", children: [_jsxs(Label, { htmlFor: "wfsf-instruction", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Info, { className: "h-4 w-4 text-teal-500" }), "Instruction", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(h\u01B0\u1EDBng d\u1EABn b\u00E0i t\u1EADp)" })] }), _jsx(Textarea, { id: "wfsf-instruction", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: "VD: Complete the words in the sentences. Use the words in the box.", rows: 2, className: "min-h-[64px] resize-y border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-100" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(PointsInput, { value: points, onChange: (e) => setPoints(Number(e.target.value) || 1) }), _jsxs("div", { role: "button", tabIndex: 0, onClick: () => setCaseSensitive(!caseSensitive), onKeyDown: (e) => { if (e.key === ' ' || e.key === 'Enter')
                                             setCaseSensitive(!caseSensitive); }, style: { paddingBlock: 'calc(var(--spacing) * 1)' }, className: `inline-flex cursor-pointer items-center gap-2 rounded-md border px-3.5 text-sm font-medium transition-colors select-none ${caseSensitive
                                             ? 'border-teal-300 bg-teal-50 text-teal-700'
                                             : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'}`, children: [_jsx(Switch, { checked: caseSensitive, onCheckedChange: setCaseSensitive, className: caseSensitive ? 'data-[state=checked]:bg-teal-500 pointer-events-none' : 'pointer-events-none', tabIndex: -1 }), "Ph\u00E2n bi\u1EC7t Hoa / th\u01B0\u1EDDng"] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "wfsf-title", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-teal-500" }), "Ti\u00EAu \u0111\u1EC1", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsx(Input, { id: "wfsf-title", value: effectiveTitle, onChange: (e) => setEffectiveTitle(e.target.value), placeholder: "Nh\u1EADp ti\u00EAu \u0111\u1EC1 c\u00E2u h\u1ECFi...", className: "border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-100" })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", 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-teal-500" }), "File \u00E2m thanh (Audio)", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setAudioUrls((prev) => [...prev, '']), className: "gap-1.5 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm audio"] })] }), audioUrls.length === 0 ? (_jsx("div", { className: "flex items-center justify-between rounded-lg border border-dashed border-gray-200 bg-gray-50/50 p-3 text-xs text-gray-500", children: _jsx("span", { children: "Ch\u01B0a c\u00F3 file audio. Nh\u1EA5n \"Th\u00EAm audio\" \u0111\u1EC3 upload file nghe cho c\u00E2u h\u1ECFi." }) })) : (_jsx("div", { className: "space-y-2.5", children: audioUrls.map((audioUrl, index) => (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50/30 p-2.5", children: [_jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-teal-100 text-xs font-semibold text-teal-700", children: index + 1 }), _jsx("div", { className: "flex-1", children: _jsx(FileUpload, { id: `wfsf-audio-${index}`, label: "", accept: "audio/*", value: audioUrl, onChange: (url) => {
@@ -475,10 +497,11 @@ export function WordFillStructuredFormCreator({ initialData, onSave, onCancel, o
                                                 });
                                             }, onRemove: () => {
                                                 setImageUrls((prev) => prev.filter((_, idx) => idx !== index));
-                                            } }, index))) }))] }), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-red-100", children: _jsx("span", { className: "text-lg", children: "\u274C" }) }), _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, i) => _jsx("li", { children: error }, i)) })] })] }))] })] }), showContent && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-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-6 w-6 items-center justify-center rounded-md bg-teal-100", children: _jsx(ListOrdered, { className: "h-3.5 w-3.5 text-teal-600" }) }), _jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "N\u1ED9i dung c\u1EA5u tr\u00FAc" })] }), expectedBlankKeys.length > 0 && (_jsxs("span", { className: "inline-flex items-center rounded-full border border-teal-200 bg-teal-50 px-2.5 py-0.5 text-xs font-semibold text-teal-700", children: [expectedBlankKeys.length, " ch\u1ED7 tr\u1ED1ng"] }))] }) }), _jsxs(CardContent, { className: "space-y-3 px-4 pb-4", children: [_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 transition-all focus-within:border-teal-300 focus-within:ring-2 focus-within:ring-teal-100", children: [_jsx(EditorToolbar, { editor: editor }), _jsx(EditorContent, { editor: editor })] }), _jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-teal-100 bg-teal-50/60 px-3 py-2.5", children: [_jsx(Info, { className: "mt-0.5 h-4 w-4 shrink-0 text-teal-500" }), _jsxs("p", { className: "text-xs text-teal-700", children: ["Nh\u1EADp ", _jsx("strong", { children: `{0}` }), ", ", _jsx("strong", { children: `{1}` }), ", ", _jsx("strong", { children: `{2}` }), "\u2026 v\u00E0o v\u0103n b\u1EA3n \u0111\u1EC3 t\u1EA1o \u00F4 tr\u1ED1ng. \u0110\u00E1p \u00E1n s\u1EBD t\u1EF1 \u0111\u1ED9ng xu\u1EA5t hi\u1EC7n b\u00EAn d\u01B0\u1EDBi \u0111\u1EC3 b\u1EA1n nh\u1EADp."] })] })] })] })), _jsx(WfsfWordBankEditor, { mode: bankMode, onModeChange: handleBankModeChange, sharedBank: sharedBank, onSharedBankChange: setSharedBank, optionsBank: optionsBank, onOptionsBankChange: setOptionsBank, blankKeys: expectedBlankKeys, answers: answers, onAnswerChange: (key, value) => setAnswers((prev) => ({ ...prev, [key]: value })) }), expectedBlankKeys.length > 0 && bankMode !== 'WITH_OPTIONS' && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-teal-100", children: _jsx(CheckCircle2, { className: "h-3.5 w-3.5 text-teal-600" }) }), _jsxs(CardTitle, { className: "text-base font-semibold text-gray-800", children: ["\u0110\u00E1p \u00E1n ", _jsxs("span", { className: "text-xs font-normal text-gray-500", children: ["(", expectedBlankKeys.length, " ch\u1ED7 tr\u1ED1ng)"] })] })] }) }), _jsxs(CardContent, { className: "px-4 pb-4", children: [_jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4", children: expectedBlankKeys.map((key) => {
-                                    const isEmpty = !answers[key] || answers[key].trim() === '';
+                                            } }, index))) }))] }), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-red-100", children: _jsx("span", { className: "text-lg", children: "\u274C" }) }), _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, i) => _jsx("li", { children: error }, i)) })] })] }))] })] }), showContent && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-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-6 w-6 items-center justify-center rounded-md bg-teal-100", children: _jsx(ListOrdered, { className: "h-3.5 w-3.5 text-teal-600" }) }), _jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "N\u1ED9i dung c\u1EA5u tr\u00FAc" })] }), expectedBlankKeys.length > 0 && (_jsxs("span", { className: "inline-flex items-center rounded-full border border-teal-200 bg-teal-50 px-2.5 py-0.5 text-xs font-semibold text-teal-700", children: [expectedBlankKeys.length, " ch\u1ED7 tr\u1ED1ng"] }))] }) }), _jsxs(CardContent, { className: "space-y-3 px-4 pb-4", children: [_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 transition-all focus-within:border-teal-300 focus-within:ring-2 focus-within:ring-teal-100", children: [_jsx(EditorToolbar, { editor: editor }), _jsx(EditorContent, { editor: editor })] }), _jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-teal-100 bg-teal-50/60 px-3 py-2.5", children: [_jsx(Info, { className: "mt-0.5 h-4 w-4 shrink-0 text-teal-500" }), _jsxs("p", { className: "text-xs text-teal-700", children: ["Nh\u1EADp ", _jsx("strong", { children: `{0}` }), ", ", _jsx("strong", { children: `{1}` }), ", ", _jsx("strong", { children: `{2}` }), "\u2026 v\u00E0o v\u0103n b\u1EA3n \u0111\u1EC3 t\u1EA1o \u00F4 tr\u1ED1ng. \u0110\u00E1p \u00E1n s\u1EBD t\u1EF1 \u0111\u1ED9ng xu\u1EA5t hi\u1EC7n b\u00EAn d\u01B0\u1EDBi \u0111\u1EC3 b\u1EA1n nh\u1EADp."] })] })] })] })), _jsx(WfsfWordBankEditor, { mode: bankMode, onModeChange: handleBankModeChange, sharedBank: sharedBank, onSharedBankChange: setSharedBank, optionsBank: optionsBank, onOptionsBankChange: setOptionsBank, blankKeys: expectedBlankKeys, answers: answers, onAnswerChange: (key, value) => setAnswers((prev) => ({ ...prev, [key]: value })) }), expectedBlankKeys.length > 0 && bankMode !== 'WITH_OPTIONS' && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-teal-100", children: _jsx(CheckCircle2, { className: "h-3.5 w-3.5 text-teal-600" }) }), _jsxs(CardTitle, { className: "text-base font-semibold text-gray-800", children: ["\u0110\u00E1p \u00E1n ", _jsxs("span", { className: "text-xs font-normal text-gray-500", children: ["(", expectedBlankKeys.length, " ch\u1ED7 tr\u1ED1ng)"] })] })] }) }), _jsxs(CardContent, { className: "px-4 pb-4", children: [_jsx("p", { className: "mb-3 text-xs text-gray-500", children: "M\u1ED7i ch\u1ED7 tr\u1ED1ng c\u00F3 th\u1EC3 c\u00F3 nhi\u1EC1u \u0111\u00E1p \u00E1n \u0111\u00FAng. H\u1ECDc vi\u00EAn \u0111\u00FAng n\u1EBFu kh\u1EDBp m\u1ED9t trong c\u00E1c \u0111\u00E1p \u00E1n." }), _jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4", children: expectedBlankKeys.map((key) => {
+                                    const alts = answers[key]?.length ? answers[key] : [''];
+                                    const isEmpty = !hasWfsfBlankAnswer(alts);
                                     return (_jsxs("div", { className: `rounded-xl border-2 p-3 transition-all duration-200 ${isEmpty
                                             ? 'border-gray-200 bg-white'
-                                            : 'border-teal-200 bg-gradient-to-br from-teal-50 to-cyan-50 shadow-sm shadow-teal-100'}`, children: [_jsxs(Label, { className: "mb-1.5 flex items-center justify-between text-sm font-semibold text-gray-700", children: [_jsxs("span", { children: ["Ch\u1ED7 tr\u1ED1ng ", _jsx("code", { className: "rounded bg-gray-100 px-1 text-teal-700", children: `{${key}}` })] }), isEmpty && (_jsx("span", { className: "text-[10px] font-normal italic text-red-500", children: "*B\u1EAFt bu\u1ED9c" }))] }), _jsx(Input, { value: answers[key] || '', onChange: e => setAnswers(prev => ({ ...prev, [key]: e.target.value })), placeholder: "\u0110\u00E1p \u00E1n \u0111\u00FAng...", className: `border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-100 ${!isEmpty ? 'border-teal-200' : ''}` }), !isEmpty && (_jsxs("span", { className: "mt-1.5 inline-flex items-center gap-1 rounded-full bg-teal-100 px-2 py-0.5 text-[10px] font-semibold text-teal-700", children: [_jsx(CheckCircle2, { className: "h-3 w-3" }), "\u0110\u00E3 nh\u1EADp"] }))] }, key));
-                                }) }), expectedBlankKeys.some(k => !answers[k]?.trim()) && (_jsxs("div", { className: "mt-4 flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-amber-100", children: _jsx("span", { className: "text-lg", children: "\u26A0\uFE0F" }) }), _jsxs("div", { className: "text-sm text-amber-800", children: [_jsx("p", { className: "font-semibold", children: "C\u00F2n ch\u1ED7 tr\u1ED1ng ch\u01B0a c\u00F3 \u0111\u00E1p \u00E1n" }), _jsxs("p", { className: "mt-0.5 text-amber-700", children: ["Vui l\u00F2ng \u0111i\u1EC1n \u0111\u00E1p \u00E1n \u0111\u00FAng cho t\u1EA5t c\u1EA3 c\u00E1c \u00F4 \u0111\u01B0\u1EE3c \u0111\u00E1nh d\u1EA5u ", _jsx("span", { className: "text-red-500 font-medium", children: "*B\u1EAFt bu\u1ED9c" }), "."] })] })] }))] })] })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", 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-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-3.5 w-3.5 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "mt-0.5 text-xs text-gray-500", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { className: "px-4 pb-4", children: _jsx(Textarea, { value: explanation, onChange: (e) => setExplanation(e.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] resize-none border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200" }) })] })] }));
+                                            : 'border-teal-200 bg-gradient-to-br from-teal-50 to-cyan-50 shadow-sm shadow-teal-100'}`, children: [_jsxs(Label, { className: "mb-1.5 flex items-center justify-between text-sm font-semibold text-gray-700", children: [_jsxs("span", { children: ["Ch\u1ED7 tr\u1ED1ng ", _jsx("code", { className: "rounded bg-gray-100 px-1 text-teal-700", children: `{${key}}` })] }), isEmpty && (_jsx("span", { className: "text-[10px] font-normal italic text-red-500", children: "*B\u1EAFt bu\u1ED9c" }))] }), _jsx("div", { className: "space-y-1.5", children: alts.map((alt, altIndex) => (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Input, { value: alt, onChange: (e) => updateAnswerAlt(key, altIndex, e.target.value), placeholder: altIndex === 0 ? 'Đáp án đúng...' : `Đáp án thay thế ${altIndex + 1}`, className: `border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-100 ${!isEmpty ? 'border-teal-200' : ''}` }), alts.length > 1 && (_jsx("button", { type: "button", title: "X\u00F3a \u0111\u00E1p \u00E1n n\u00E0y", onClick: () => removeAnswerAlt(key, altIndex), className: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-gray-400 hover:bg-rose-50 hover:text-rose-600", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }, `${key}-${altIndex}`))) }), _jsxs("button", { type: "button", onClick: () => addAnswerAlt(key), className: "mt-2 inline-flex items-center gap-1 text-[11px] font-medium text-teal-700 hover:text-teal-800", children: [_jsx(Plus, { className: "h-3 w-3" }), "Th\u00EAm \u0111\u00E1p \u00E1n \u0111\u00FAng"] })] }, key));
+                                }) }), expectedBlankKeys.some(k => !hasWfsfBlankAnswer(answers[k])) && (_jsxs("div", { className: "mt-4 flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-amber-100", children: _jsx("span", { className: "text-lg", children: "\u26A0\uFE0F" }) }), _jsxs("div", { className: "text-sm text-amber-800", children: [_jsx("p", { className: "font-semibold", children: "C\u00F2n ch\u1ED7 tr\u1ED1ng ch\u01B0a c\u00F3 \u0111\u00E1p \u00E1n" }), _jsxs("p", { className: "mt-0.5 text-amber-700", children: ["Vui l\u00F2ng \u0111i\u1EC1n \u0111\u00E1p \u00E1n \u0111\u00FAng cho t\u1EA5t c\u1EA3 c\u00E1c \u00F4 \u0111\u01B0\u1EE3c \u0111\u00E1nh d\u1EA5u ", _jsx("span", { className: "text-red-500 font-medium", children: "*B\u1EAFt bu\u1ED9c" }), "."] })] })] }))] })] })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", 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-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-3.5 w-3.5 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "mt-0.5 text-xs text-gray-500", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { className: "px-4 pb-4", children: _jsx(Textarea, { value: explanation, onChange: (e) => setExplanation(e.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] resize-none border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200" }) })] })] }));
 }

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

@@ -1,18 +1,10 @@
+import { normalizeWfsfAnswersMap } from '../../../../shared/lib/utils/wfsf-blank-match';
 import { detectWfsfBankMode, normalizeOptionsWordBank, normalizeSharedWordBank, } from './wfsf-word-bank.utils';
 function asRecord(value) {
     return value && typeof value === 'object' && !Array.isArray(value)
         ? value
         : {};
 }
-function asStringAnswers(value) {
-    const record = asRecord(value);
-    const answers = {};
-    for (const [key, entry] of Object.entries(record)) {
-        if (typeof entry === 'string')
-            answers[key] = entry;
-    }
-    return answers;
-}
 function asBlankStyle(value) {
     if (value === 'letter' ||
         value === 'word' ||
@@ -104,7 +96,7 @@ export function mapQuestionToWfsfData(question) {
         audioUrl: audioUrls[0] || String(apiContent.audioUrl || answer.audioUrl || source.audio_url || ''),
         audioUrls,
         content,
-        answers: asStringAnswers(correctAnswer.answers || answer.answers),
+        answers: normalizeWfsfAnswersMap(correctAnswer.answers || answer.answers),
         caseSensitive: Boolean(correctAnswer.caseSensitive ?? answer.caseSensitive ?? false),
         blankStyle: asBlankStyle(apiContent.blankStyle ?? answer.blankStyle),
         viewMode,

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

@@ -1,3 +1,4 @@
+import { compactWfsfAnswersMap } from '../../../../shared/lib/utils/wfsf-blank-match';
 /**
  * Transform WORD_FILL_STRUCTURED_FORM creator data → API format
  *
@@ -61,7 +62,7 @@ export const transformWordFillStructuredForm = (question) => {
         apiContent.wordBank = answerData.wordBank;
     }
     const apiCorrectAnswer = {
-        answers: answerData.answers,
+        answers: compactWfsfAnswersMap((answerData.answers || {})),
         caseSensitive: answerData.caseSensitive ?? false,
     };
     const basicGroupData = hasGroupData

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

@@ -18,7 +18,6 @@ import { WriteAShortLetterClient } from '../types/write-a-short-letter/WriteASho
 import { LookPictureChooseCorrectAnswerClient } from '../types/look-picture-choose-correct-answer/LookPictureChooseCorrectAnswerClient';
 import { LookPictureFillBlankChooseAnswerClient } from '../types/look-picture-fill-blank-choose-answer/LookPictureFillBlankChooseAnswerClient';
 import { FillMissingWordsInGridClient } from '../types/fill-missing-words-in-grid/FillMissingWordsInGridClient';
-import { WordFillStructuredFormClient } from '../types/word-fill-structured-form/WordFillStructuredFormClient';
 import { CrosswordPuzzleClient } from '../types/crossword-puzzle/CrosswordPuzzleClient';
 import { FindWordsInMatrixClient } from '../types/find-words-in-matrix/FindWordsInMatrixClient';
 import { SortWordsIntoCategoriesViewer } from './SortWordsIntoCategoriesViewer';
@@ -517,72 +516,6 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
                 onSubmitAnswer?.(answers);
             } }));
     };
-    const renderWordFillStructuredForm = () => {
-        const content = (question.content && typeof question.content === 'object'
-            ? question.content
-            : {});
-        // Pearson preview maps correctAnswer → answer; bank may use either shape.
-        const answer = (question.answer ??
-            question.correctAnswer ??
-            {});
-        const answers = answer?.answers && typeof answer.answers === 'object' && !Array.isArray(answer.answers)
-            ? answer.answers
-            : {};
-        const html = String(content.content || '');
-        const blankRaw = String(content.blankStyle || '').toLowerCase();
-        const blankStyle = blankRaw === 'letter' || blankRaw === 'box'
-            ? 'letter'
-            : blankRaw === 'phrase' || blankRaw === 'sentence'
-                ? 'phrase'
-                : 'word';
-        const userMap = userAnswer && typeof userAnswer === 'object' && !Array.isArray(userAnswer)
-            ? userAnswer
-            : selectedAnswer && typeof selectedAnswer === 'object' && !Array.isArray(selectedAnswer)
-                ? selectedAnswer
-                : isReviewMode
-                    ? answers
-                    : {};
-        const qNum = typeof question.questionNumber === 'number' && question.questionNumber > 0
-            ? question.questionNumber
-            : undefined;
-        const rawWordBank = Array.isArray(content.wordBank) ? content.wordBank : undefined;
-        const wordBank = rawWordBank?.map((entry) => {
-            if (entry == null || typeof entry !== 'object')
-                return null;
-            const rec = entry;
-            if (Array.isArray(rec.options)) {
-                const options = rec.options.map((o) => String(o ?? '').trim()).filter(Boolean);
-                return options.length >= 2 ? { options } : null;
-            }
-            const word = String(rec.word ?? '').trim();
-            if (word)
-                return rec.isExample ? { word, isExample: true } : { word };
-            return null;
-        });
-        const hasWordOptions = Boolean(wordBank?.some((e) => e != null &&
-            'options' in e &&
-            Array.isArray(e.options) &&
-            (e.options?.length ?? 0) >= 2));
-        const hasSharedWords = Boolean(wordBank?.some((e) => e != null && 'word' in e && e.word));
-        const viewMode = String(content.viewMode || '').trim() ||
-            (hasWordOptions ? 'WITH_OPTIONS' : hasSharedWords ? 'WITH_WORD_BANK' : undefined);
-        return (_jsx(WordFillStructuredFormClient, { questionData: {
-                title: String(content.title || ''),
-                imageUrl: content.imageUrl ? String(content.imageUrl) : undefined,
-                content: html,
-                blankStyle,
-                answers,
-                caseSensitive: Boolean(answer?.caseSensitive),
-                explanation: question.explanation,
-                ...(viewMode ? { viewMode } : {}),
-                ...((hasWordOptions || hasSharedWords) && wordBank ? { wordBank } : {}),
-            }, userAnswer: userMap, isReviewMode: isReviewMode, autoFillCorrectAnswers: isReviewMode && Object.keys(userMap).length === 0, explanation: question.explanation, questionNumber: qNum, onAnswerChange: (key, value) => {
-                const prev = selectedAnswer && typeof selectedAnswer === 'object' && !Array.isArray(selectedAnswer)
-                    ? selectedAnswer
-                    : {};
-                setSelectedAnswer({ ...prev, [key]: value });
-            } }));
-    };
     const renderWordFillParagraph = () => {
         const content = (question.content && typeof question.content === 'object'
             ? question.content

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

@@ -1,5 +1,5 @@
 import type { FillBlankQuestion } from '../../../components/exams/take/types';
-import { type ImageLabelData } from '../../questions/_shared/types/question-group.type';
+import type { ImageLabelData } from '../../questions/_shared/types/question-group.type';
 interface ReviewListenAndWriteRendererProps {
     partNumber: number;
     questionCount: number;

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

@@ -7,7 +7,7 @@ import CambridgeYleInstructionBanner from '../../../components/themes/cambridge-
 import CambridgeYleAudioPlayer from '../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer';
 import { countBlanks, formatAcceptedAnswers, hasAnyBlankValue, isBlankCorrect, toBlankValues, } from '../../../shared/lib/utils/fill-in-blank';
 import { ImageLabelWordBank } from '../../questions/groups/ImageLabelWordBank';
-import { hasImageLabels } from '../../questions/_shared/types/question-group.type';
+import { hasImageLabels } from '../../questions/_shared/types/question-group.utils';
 export function ReviewListenAndWriteRenderer({ partNumber, questionCount, instruction, partName, audioUrl, title, exampleText, questions, answers, isCorrectMap, imageLabels, }) {
     /**
      * Get answer status from API's isCorrect field

package/dist/components/themes/cambridge-yle/CambridgeYleInstructionBanner.js

@@ -1,6 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Info, Megaphone } from 'lucide-react';
+/** CMS instruction may be plain text or HTML (e.g. `<p>…</p>`). */
+function isHtmlContent(value) {
+    return /<[a-z][\s\S]*>/i.test(value);
+}
+function InstructionHtml({ html, className }) {
+    return (_jsx("div", { className: className, 
+        // Exam CMS content — not end-user input.
+        dangerouslySetInnerHTML: { __html: html } }));
+}
 export default function CambridgeYleInstructionBanner({ instruction, instructions, hasExample = false, children, isReviewMode = false, compact = false, }) {
     if (isReviewMode)
         return null;
@@ -11,9 +20,9 @@ export default function CambridgeYleInstructionBanner({ instruction, instruction
                     ? 'flex w-full items-center gap-2 rounded-[14px] border-2 border-dashed border-blue-300 bg-[#F8FBFF] px-3 py-2 transition-all hover:bg-blue-50/50 lg:gap-3 lg:px-4 lg:py-2.5 xl:gap-5 xl:rounded-[24px] xl:px-5 xl:py-4'
                     : 'flex w-full items-center gap-4 rounded-[24px] border-2 border-dashed border-blue-300 bg-[#F8FBFF] px-5 py-4 transition-all hover:bg-blue-50/50 sm:gap-5', children: [_jsx("div", { className: compact
                             ? 'flex h-8 w-8 shrink-0 -rotate-6 items-center justify-center rounded-[10px] bg-[#0070FF] shadow-[3px_3px_0px_rgba(191,219,254,1)] transition-transform hover:rotate-0 lg:h-9 lg:w-9 xl:h-14 xl:w-14 xl:rounded-[16px] xl:shadow-[4px_4px_0px_rgba(191,219,254,1)]'
-                            : 'flex h-12 w-12 shrink-0 -rotate-6 items-center justify-center rounded-[16px] bg-[#0070FF] shadow-[4px_4px_0px_rgba(191,219,254,1)] transition-transform hover:rotate-0 sm:h-14 sm:w-14', children: _jsx(Megaphone, { className: compact ? 'h-4 w-4 text-white lg:h-5 lg:w-5 xl:h-7 xl:w-7' : 'h-6 w-6 text-white sm:h-7 sm:w-7', strokeWidth: 2.5 }) }), _jsx("div", { className: "flex flex-1 flex-col justify-center", children: _jsxs("p", { className: compact
+                            : 'flex h-12 w-12 shrink-0 -rotate-6 items-center justify-center rounded-[16px] bg-[#0070FF] shadow-[4px_4px_0px_rgba(191,219,254,1)] transition-transform hover:rotate-0 sm:h-14 sm:w-14', children: _jsx(Megaphone, { className: compact ? 'h-4 w-4 text-white lg:h-5 lg:w-5 xl:h-7 xl:w-7' : 'h-6 w-6 text-white sm:h-7 sm:w-7', strokeWidth: 2.5 }) }), _jsx("div", { className: "flex flex-1 flex-col justify-center", children: _jsxs("div", { className: compact
                                 ? 'text-[12px] font-black uppercase leading-tight tracking-wide text-[#002868] lg:text-[13px] xl:text-[18px] xl:leading-snug'
-                                : 'text-[15px] font-black uppercase leading-snug tracking-wide text-[#002868] sm:text-[18px]', style: { fontFamily: '"SVN-Volte Rounded", "Quicksand", sans-serif' }, children: [instruction, hasExample && (_jsx("span", { className: compact
+                                : 'text-[15px] font-black uppercase leading-snug tracking-wide text-[#002868] sm:text-[18px]', style: { fontFamily: '"SVN-Volte Rounded", "Quicksand", sans-serif' }, children: [isHtmlContent(instruction) ? (_jsx(InstructionHtml, { html: instruction, className: "contents [&_p]:m-0 [&_p]:inline" })) : (instruction), hasExample && (_jsx("span", { className: compact
                                         ? 'ml-1 inline-block rounded-full bg-blue-100 px-1.5 py-0.5 align-middle text-[10px] font-bold tracking-normal text-[#0070FF] xl:-mt-1 xl:ml-2 xl:px-3 xl:text-[16px]'
-                                        : 'ml-2 -mt-1 inline-block rounded-full bg-blue-100 px-3 py-0.5 align-middle text-[14px] font-bold tracking-normal text-[#0070FF] sm:text-[16px]', children: "THERE IS ONE EXAMPLE" }))] }) })] })), children, hasInstructionsList && (_jsx("div", { className: "rounded-lg border border-blue-200 bg-white p-4 shadow-sm", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("h4", { className: "flex items-center gap-2 font-semibold text-blue-900", children: [_jsx(Info, { className: "h-4 w-4" }), "Instructions"] }), _jsx("ol", { className: "list-inside list-decimal space-y-1.5 text-sm text-gray-700", children: instructions.map((item, index) => (_jsx("li", { className: "leading-relaxed", children: item }, index))) })] }) }))] }));
+                                        : 'ml-2 -mt-1 inline-block rounded-full bg-blue-100 px-3 py-0.5 align-middle text-[14px] font-bold tracking-normal text-[#0070FF] sm:text-[16px]', children: "THERE IS ONE EXAMPLE" }))] }) })] })), children, hasInstructionsList && (_jsx("div", { className: "rounded-lg border border-blue-200 bg-white p-4 shadow-sm", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("h4", { className: "flex items-center gap-2 font-semibold text-blue-900", children: [_jsx(Info, { className: "h-4 w-4" }), "Instructions"] }), _jsx("ol", { className: "list-inside list-decimal space-y-1.5 text-sm text-gray-700", children: instructions.map((item, index) => (_jsx("li", { className: "leading-relaxed", children: isHtmlContent(item) ? (_jsx(InstructionHtml, { html: item, className: "[&_p]:m-0" })) : (item) }, index))) })] }) }))] }));
 }

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

@@ -5,6 +5,7 @@ import { ResolvedImage } from '../../../components/common/ResolvedImage';
 import { cn } from '../../../shared/lib/utils';
 import { transformWordFillStructuredForm } from '../../../components/exams/take/exam-taking.utils';
 import { englishCertQuestionDomId } from './english-cert-scroll';
+import { expandWfsfCorrectAlts, formatWfsfCorrectLabel, isWfsfBlankCorrect, } from '../../../shared/lib/utils/wfsf-blank-match';
 /**
  * Replace `{key}` placeholders in raw HTML with inline `<input>` elements so the
  * full HTML structure (tables, forms, …) is preserved and inputs render inside
@@ -25,14 +26,6 @@ function buildHtmlWithInputPlaceholders(html) {
     `;
     });
 }
-function normalizeStructuredAnswer(value, caseSensitive) {
-    const normalized = value
-        .trim()
-        .replace(/[\p{P}]/gu, '')
-        .replace(/\s+/g, ' ')
-        .trim();
-    return caseSensitive ? normalized : normalized.toLowerCase();
-}
 /**
  * Build the card label from the blank keys (which are the IELTS question numbers).
  * Returns "Questions x–y" for a numeric range, a single "Question n", or falls
@@ -82,28 +75,28 @@ const StructuredFormBody = memo(function StructuredFormBody({ question, initialA
             const key = input.getAttribute('data-blank-key') || '';
             const wrapper = container.querySelector(`[data-blank-wrapper="${key}"]`);
             const userAnswer = initialAnswersRef.current[key] || '';
-            const correctAnswer = question.answers[key] || '';
+            const correctAnswer = question.answers[key];
+            const correctLabel = formatWfsfCorrectLabel(correctAnswer);
             const hasUserAnswer = userAnswer.trim().length > 0;
             const isCorrect = hasUserAnswer &&
-                normalizeStructuredAnswer(userAnswer, question.caseSensitive) ===
-                    normalizeStructuredAnswer(correctAnswer, question.caseSensitive);
-            const shouldShowReviewText = isReviewMode && !isCorrect && correctAnswer.trim().length > 0;
+                isWfsfBlankCorrect(userAnswer, correctAnswer, question.caseSensitive);
+            const shouldShowReviewText = isReviewMode && !isCorrect && correctLabel.length > 0;
             input.value = shouldShowReviewText
-                ? `${hasUserAnswer ? userAnswer : '(empty)'} → ${correctAnswer}`
+                ? `${hasUserAnswer ? userAnswer : '(empty)'} → ${correctLabel}`
                 : userAnswer;
             input.disabled = isReviewMode;
             const blankStyle = question.blankStyle || 'word';
             const isLetter = blankStyle === 'letter';
-            const isPhrase = blankStyle === 'phrase';
+            const isPhrase = blankStyle === 'phrase' || blankStyle === 'translate';
             if (isLetter) {
-                input.maxLength = Math.max(1, (correctAnswer || ' ').trim().length || 1);
+                const maxAltLen = expandWfsfCorrectAlts(correctAnswer).reduce((max, alt) => Math.max(max, alt.trim().length), 0);
+                input.maxLength = Math.max(1, maxAltLen || 1);
             }
             input.className = cn('ec-blank-input inline-block bg-blue-50/30 text-base font-semibold leading-tight text-[#0f1730] align-baseline outline-none transition-all hover:bg-blue-50/60 focus:bg-blue-50/80', isLetter
                 ? 'h-8 w-8 rounded border-2 border-[#1167e8] px-0 text-center uppercase'
                 : isPhrase
-                    ? 'min-w-[9rem] max-w-[18rem] w-[14ch] rounded-t border-0 border-b-2 border-dashed border-[#1167e8] px-2 py-0.5 text-center focus:border-solid focus:border-[#0b57d0]'
-                    : // blankStyle=word — compact for one token
-                        'min-w-[4.5rem] max-w-[7.5rem] w-[8ch] rounded-t border-0 border-b-2 border-dashed border-[#1167e8] px-1 py-0.5 text-center focus:border-solid focus:border-[#0b57d0]', isReviewMode
+                    ? 'min-w-[16rem] max-w-[36rem] w-[28ch] rounded-t border-0 border-b-2 border-dashed border-[#1167e8] px-2 py-0.5 text-center focus:border-solid focus:border-[#0b57d0]'
+                    : 'min-w-[4.5rem] max-w-[8rem] w-[10ch] rounded-t border-0 border-b-2 border-dashed border-[#1167e8] px-1 py-0.5 text-center focus:border-solid focus:border-[#0b57d0]', isReviewMode
                 ? isCorrect
                     ? 'border-solid border-[#22c55e] bg-emerald-50 text-[#15803d]'
                     : hasUserAnswer
@@ -111,7 +104,7 @@ const StructuredFormBody = memo(function StructuredFormBody({ question, initialA
                         : 'border-solid border-[#f97316] bg-amber-50 text-[#c2410c]'
                 : '');
             if (!isLetter) {
-                input.size = isPhrase ? 18 : 10;
+                input.size = isPhrase ? 28 : 10;
             }
             // letter inline box — host FE may not scan Tailwind
             if (isLetter) {
@@ -160,7 +153,7 @@ const StructuredFormBody = memo(function StructuredFormBody({ question, initialA
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [processedHtml, isReviewMode]);
-    return (_jsxs("div", { className: "space-y-3", children: [question.title && (_jsx("h3", { className: "text-base font-semibold text-[#0f1730]", children: question.title })), question.imageUrl && (_jsx("div", { className: "flex justify-center", children: _jsx("div", { className: "overflow-hidden rounded-lg border border-[#d9e4f2]", children: _jsx(ResolvedImage, { src: question.imageUrl, alt: question.title || 'Question image', className: "max-h-56 w-auto object-contain" }) }) })), _jsx("div", { ref: containerRef, className: "ec-structured-content w-full overflow-x-auto rounded-xl border border-[#d9e4f2] bg-[#f4f9ff] p-5 text-base leading-relaxed text-[#0f1730] [&_table]:w-full [&_table]:border-collapse [&_td]:border [&_td]:border-[#d9e4f2] [&_td]:px-4 [&_td]:py-3 [&_td]:align-top [&_th]:border [&_th]:border-[#d9e4f2] [&_th]:bg-[#e9f3ff] [&_th]:px-4 [&_th]:py-3 [&_th]:text-left [&_th]:font-semibold" }), isReviewMode && Object.keys(question.answers).length > 0 && (_jsxs("div", { className: "rounded-xl border border-[#d9e4f2] bg-white/70 p-3", children: [_jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-[#64748b]", children: "Correct answers" }), _jsx("div", { className: "mt-1 flex flex-wrap gap-1.5", children: Object.entries(question.answers).map(([key, val]) => (_jsxs("span", { className: "rounded border border-[#b9edc8] bg-[#ddf8e7] px-2 py-0.5 text-xs font-semibold text-[#15803d]", children: [key, ": ", val] }, key))) })] }))] }));
+    return (_jsxs("div", { className: "space-y-3", children: [question.title && (_jsx("h3", { className: "text-base font-semibold text-[#0f1730]", children: question.title })), question.imageUrl && (_jsx("div", { className: "flex justify-center", children: _jsx("div", { className: "overflow-hidden rounded-lg border border-[#d9e4f2]", children: _jsx(ResolvedImage, { src: question.imageUrl, alt: question.title || 'Question image', className: "max-h-56 w-auto object-contain" }) }) })), _jsx("div", { ref: containerRef, className: "ec-structured-content w-full overflow-x-auto rounded-xl border border-[#d9e4f2] bg-[#f4f9ff] p-5 text-base leading-relaxed text-[#0f1730] [&_table]:w-full [&_table]:border-collapse [&_td]:border [&_td]:border-[#d9e4f2] [&_td]:px-4 [&_td]:py-3 [&_td]:align-top [&_th]:border [&_th]:border-[#d9e4f2] [&_th]:bg-[#e9f3ff] [&_th]:px-4 [&_th]:py-3 [&_th]:text-left [&_th]:font-semibold" }), isReviewMode && Object.keys(question.answers).length > 0 && (_jsxs("div", { className: "rounded-xl border border-[#d9e4f2] bg-white/70 p-3", children: [_jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-[#64748b]", children: "Correct answers" }), _jsx("div", { className: "mt-1 flex flex-wrap gap-1.5", children: Object.entries(question.answers).map(([key, val]) => (_jsxs("span", { className: "rounded border border-[#b9edc8] bg-[#ddf8e7] px-2 py-0.5 text-xs font-semibold text-[#15803d]", children: [key, ": ", formatWfsfCorrectLabel(val)] }, key))) })] }))] }));
 });
 /**
  * Branded English Certification renderer for `WORD_FILL_STRUCTURED_FORM`.

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

@@ -21,8 +21,8 @@ export declare const ROUTES: {
         readonly USERS: "/manage/users";
         readonly USERS_CREATE: "/manage/users/create";
         readonly USERS_EDIT: (id: string) => string;
-        readonly QUESTION_BANK: "/manage/question-bank";
-        readonly QUESTION_CREATE: "/manage/question-bank/create";
+        readonly QUESTION_BANK: "/manage/question-banks";
+        readonly QUESTION_CREATE: "/manage/question-banks/create";
         readonly QUESTION_EDIT: (id: string) => string;
         readonly EXAMS: "/manage/exams";
         readonly EXAMS_CREATE: "/manage/exams/create";

package/dist/shared/constants/routes.js

@@ -26,9 +26,9 @@ export const ROUTES = {
         USERS: '/manage/users',
         USERS_CREATE: '/manage/users/create',
         USERS_EDIT: (id) => `/manage/users/${id}/edit`,
-        QUESTION_BANK: '/manage/question-bank',
-        QUESTION_CREATE: '/manage/question-bank/create',
-        QUESTION_EDIT: (id) => `/manage/question-bank/${id}/edit`,
+        QUESTION_BANK: '/manage/question-banks',
+        QUESTION_CREATE: '/manage/question-banks/create',
+        QUESTION_EDIT: (id) => `/manage/question-banks/${id}/edit`,
         EXAMS: '/manage/exams',
         EXAMS_CREATE: '/manage/exams/create',
         EXAMS_EDIT: (id) => `/manage/exams/${id}/edit`,

package/dist/shared/lib/utils/wfsf-blank-match.d.ts

@@ -0,0 +1,9 @@
+export type WfsfCorrectValue = string | string[];
+export declare function cleanWfsfWord(str: unknown, caseSensitive?: boolean): string;
+export declare function expandWfsfCorrectAlts(correctVal: unknown): string[];
+export declare function formatWfsfCorrectLabel(correctVal: unknown): string;
+export declare function isWfsfBlankCorrect(userWord: string, correctVal: unknown, caseSensitive?: boolean): boolean;
+export declare function normalizeWfsfAnswersMap(raw: unknown): Record<string, string[]>;
+export declare function compactWfsfAnswersMap(answers: Record<string, string | string[]>): Record<string, string[]>;
+export declare function primaryWfsfAnswers(answers: Record<string, string | string[]>): Record<string, string>;
+export declare function hasWfsfBlankAnswer(value: unknown): boolean;

package/dist/shared/lib/utils/wfsf-blank-match.js

@@ -0,0 +1,60 @@
+export function cleanWfsfWord(str, caseSensitive = false) {
+    const text = str == null ? '' : String(str);
+    const cleaned = text
+        .trim()
+        .replace(/[\p{P}]/gu, '')
+        .replace(/\s+/g, ' ')
+        .trim();
+    return caseSensitive ? cleaned : cleaned.toLowerCase();
+}
+export function expandWfsfCorrectAlts(correctVal) {
+    if (Array.isArray(correctVal)) {
+        return correctVal.map((v) => String(v ?? '').trim()).filter(Boolean);
+    }
+    if (correctVal == null)
+        return [];
+    const valStr = String(correctVal);
+    if (valStr.includes('/')) {
+        return valStr.split('/').map((s) => s.trim()).filter(Boolean);
+    }
+    const trimmed = valStr.trim();
+    return trimmed ? [trimmed] : [];
+}
+export function formatWfsfCorrectLabel(correctVal) {
+    return expandWfsfCorrectAlts(correctVal).join(' / ');
+}
+export function isWfsfBlankCorrect(userWord, correctVal, caseSensitive = false) {
+    const userClean = cleanWfsfWord(userWord, caseSensitive);
+    if (!userClean)
+        return false;
+    return expandWfsfCorrectAlts(correctVal).some((alt) => cleanWfsfWord(alt, caseSensitive) === userClean);
+}
+export function normalizeWfsfAnswersMap(raw) {
+    if (!raw || typeof raw !== 'object' || Array.isArray(raw))
+        return {};
+    const result = {};
+    for (const [key, value] of Object.entries(raw)) {
+        const alts = expandWfsfCorrectAlts(value);
+        result[key] = alts.length > 0 ? alts : [''];
+    }
+    return result;
+}
+export function compactWfsfAnswersMap(answers) {
+    const result = {};
+    for (const [key, value] of Object.entries(answers)) {
+        const alts = expandWfsfCorrectAlts(value);
+        if (alts.length > 0)
+            result[key] = alts;
+    }
+    return result;
+}
+export function primaryWfsfAnswers(answers) {
+    const result = {};
+    for (const [key, value] of Object.entries(answers)) {
+        result[key] = expandWfsfCorrectAlts(value)[0] || '';
+    }
+    return result;
+}
+export function hasWfsfBlankAnswer(value) {
+    return expandWfsfCorrectAlts(value).length > 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinyweb_dev/oe-exam-sdk",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Reusable OceanEdu question components.",
   "type": "module",
   "main": "./dist/index.js",