@tinyweb_dev/oe-exam-sdk 0.2.6 → 0.2.8

package/dist/components/exams/take/components/QuestionRenderer.js

@@ -55,7 +55,7 @@ export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode =
         }
         case 'CHOOSE_THE_CORRECT_ANSWER_GROUP': {
             const data = transformChooseTheCorrectAnswerGroup(questions);
-            return (_jsx(MoversChooseBestAnswerRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, example: data.example, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+            return (_jsx(MoversChooseBestAnswerRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, audioUrl: data.audioUrl || part.audioUrl, example: data.example, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
         }
         case 'CHOOSE_CORRECT_ADJECTIVE': {
             const data = transformChooseCorrectAdjective(questions);

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

@@ -42,7 +42,7 @@ function normalizeRenderableText(value) {
 }
 // Example Section Component
 function ExampleSection({ example }) {
-    return (_jsxs("div", { className: "rounded-lg border-2 border-orange-300 bg-white p-4", children: [_jsx("p", { className: "mb-3 text-sm font-semibold text-gray-700", children: "Example:" }), _jsxs("p", { className: "mb-3 text-[19px] font-bold text-[#001590]", children: [example.questionNumber, ". ", normalizeRenderableText(example.questionText)] }), _jsx(ChooseBestAnswerImages, { imageUrl: example.imageUrl, className: "mb-3" }), example.optionType === 'image' ? (_jsx("div", { className: "grid gap-3 px-2", style: { gridTemplateColumns: `repeat(${example.options.length}, minmax(0, 1fr))` }, children: example.options.map((option) => {
+    return (_jsxs("div", { className: "rounded-lg border-2 border-orange-300 bg-white p-4", children: [_jsx("p", { className: "mb-3 text-sm font-semibold text-gray-700", children: "Example:" }), _jsxs("p", { className: "mb-3 text-[19px] font-bold text-[#001590]", children: [example.questionNumber, ". ", normalizeRenderableText(example.questionText)] }), example.audioUrl && (_jsx("div", { className: "mb-3", children: _jsx(CambridgeYleAudioPlayer, { audioSrc: example.audioUrl, compact: true, dense: true }) })), _jsx(ChooseBestAnswerImages, { imageUrl: example.imageUrl, className: "mb-3" }), example.optionType === 'image' ? (_jsx("div", { className: "grid gap-3 px-2", style: { gridTemplateColumns: `repeat(${example.options.length}, minmax(0, 1fr))` }, children: example.options.map((option) => {
                     const isCorrect = option.id === example.correctOptionId;
                     return (_jsxs("div", { className: `relative flex flex-col items-center gap-1 rounded-[16px] border-[3px] p-4 pt-6 mt-3 transition-colors ${isCorrect ? 'border-green-500 bg-green-50' : 'border-blue-200 bg-white'}`, children: [_jsx("div", { className: "absolute -top-[14px] left-1/2 -translate-x-1/2 bg-blue-600 text-white w-[28px] h-[28px] rounded-full flex items-center justify-center font-bold text-[15px] shadow-sm", children: option.label }), _jsx(ResolvedImage, { src: getChooseBestAnswerOptionImageSrc(option), alt: `Option ${option.label}`, className: "w-40 rounded object-contain mb-2" }), _jsx("div", { className: cn("w-7 h-7 rounded-full flex items-center justify-center border-[3px] transition-all mt-auto", isCorrect
                                     ? "bg-green-500 border-green-500 text-white"
@@ -99,7 +99,7 @@ function QuestionItem({ question, selectedOptionIds, onSelect, isReviewMode, id,
         }
         return selectedOptionIds.includes(optionId) || correctOptionIds.includes(optionId);
     };
-    return (_jsxs("div", { id: id, className: "mb-6", children: [_jsxs("p", { className: "mb-3 text-[19px] font-bold text-[#001590]", children: [question.questionNumber, ". ", normalizeRenderableText(question.questionText)] }), isMultipleAnswers && (_jsx("p", { className: "mb-3 pl-2 text-sm font-medium text-blue-600", children: "Ch\u1ECDn nhi\u1EC1u \u0111\u00E1p \u00E1n" })), _jsx(ChooseBestAnswerImages, { imageUrl: question.imageUrl, className: "mb-3" }), question.optionType === 'image' ? (_jsx("div", { className: "grid gap-3 px-2", style: { gridTemplateColumns: `repeat(${question.options.length}, minmax(0, 1fr))` }, children: question.options.map((option) => (_jsxs("button", { type: "button", onClick: () => !isReviewMode && onSelect(option.id), disabled: isReviewMode, className: `relative flex flex-col items-center gap-1 rounded-[16px] border-[3px] p-4 pt-6 mt-3 transition-colors ${getOptionStyle(option.id)} ${isReviewMode ? 'cursor-default' : 'cursor-pointer'}`, children: [_jsx("div", { className: "absolute -top-[14px] left-1/2 -translate-x-1/2 bg-blue-600 text-white w-[28px] h-[28px] rounded-full flex items-center justify-center font-bold text-[15px] shadow-sm", children: option.label }), _jsx(ResolvedImage, { src: getChooseBestAnswerOptionImageSrc(option), alt: `Option ${option.label}`, className: "w-35 rounded object-contain mb-2" }), _jsx("div", { className: cn("w-7 h-7 rounded-full flex items-center justify-center border-[3px] transition-all mt-auto", showIndicatorMark(option.id)
+    return (_jsxs("div", { id: id, className: "mb-6", children: [_jsxs("p", { className: "mb-3 text-[19px] font-bold text-[#001590]", children: [question.questionNumber, ". ", normalizeRenderableText(question.questionText)] }), isMultipleAnswers && (_jsx("p", { className: "mb-3 pl-2 text-sm font-medium text-blue-600", children: "Ch\u1ECDn nhi\u1EC1u \u0111\u00E1p \u00E1n" })), question.audioUrl && (_jsx("div", { className: "mb-3", children: _jsx(CambridgeYleAudioPlayer, { audioSrc: question.audioUrl, compact: true, dense: true }) })), _jsx(ChooseBestAnswerImages, { imageUrl: question.imageUrl, className: "mb-3" }), question.optionType === 'image' ? (_jsx("div", { className: "grid gap-3 px-2", style: { gridTemplateColumns: `repeat(${question.options.length}, minmax(0, 1fr))` }, children: question.options.map((option) => (_jsxs("button", { type: "button", onClick: () => !isReviewMode && onSelect(option.id), disabled: isReviewMode, className: `relative flex flex-col items-center gap-1 rounded-[16px] border-[3px] p-4 pt-6 mt-3 transition-colors ${getOptionStyle(option.id)} ${isReviewMode ? 'cursor-default' : 'cursor-pointer'}`, children: [_jsx("div", { className: "absolute -top-[14px] left-1/2 -translate-x-1/2 bg-blue-600 text-white w-[28px] h-[28px] rounded-full flex items-center justify-center font-bold text-[15px] shadow-sm", children: option.label }), _jsx(ResolvedImage, { src: getChooseBestAnswerOptionImageSrc(option), alt: `Option ${option.label}`, className: "w-35 rounded object-contain mb-2" }), _jsx("div", { className: cn("w-7 h-7 rounded-full flex items-center justify-center border-[3px] transition-all mt-auto", showIndicatorMark(option.id)
                                 ? "bg-blue-600 border-blue-600 text-white"
                                 : "border-gray-300 bg-white text-transparent"), children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }) })] }, option.id))) })) : (_jsx("div", { className: "flex flex-col gap-2 pl-2", children: question.options.map((option) => (_jsxs("button", { type: "button", onClick: () => !isReviewMode && onSelect(option.id), disabled: isReviewMode, className: `flex items-center gap-3 rounded-lg border-2 px-3 py-2 text-left transition-colors ${getOptionStyle(option.id)} ${isReviewMode ? 'cursor-default' : 'cursor-pointer'}`, children: [_jsxs("span", { className: "text-sm font-medium text-gray-600", children: [option.label, "."] }), _jsx("span", { className: "flex-1 text-sm text-gray-700", children: normalizeRenderableText(option.text) }), _jsx("div", { className: `flex h-5 w-5 items-center justify-center border-2 ${isMultipleAnswers ? 'rounded-md' : 'rounded-full'} ${getIndicatorStyle(option.id)}`, children: showIndicatorMark(option.id) && (_jsx("div", { className: `${isMultipleAnswers ? 'h-2.5 w-2.5 rounded-sm' : 'h-2 w-2 rounded-full'} bg-white` })) })] }, option.id))) }))] }));
 }

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

@@ -10,8 +10,8 @@ interface MoversListenAndWriteRendererProps {
     exampleText?: string;
     exampleHighlight?: string;
     questions: FillBlankQuestion[];
-    answers: Record<string, string>;
-    onAnswerChange: (questionId: string, value: string) => void;
+    answers: Record<string, unknown>;
+    onAnswerChange: (questionId: string, value: string[]) => void;
     isReviewMode?: boolean;
     showHints?: boolean;
     groupContent?: string;

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

@@ -5,22 +5,68 @@ import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-y
 import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
 import CambridgeYleAudioPlayer from '../../../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer';
 import CambridgeYleExampleText from '../../../../../components/themes/cambridge-yle/CambridgeYleExampleText';
-/** Preserve author newlines in fill-blank stems by mapping `\n` → `<br />`. */
+import { countBlanks, formatAcceptedAnswers, getPrimaryAnswer, isBlankCorrect, toBlankValues, } from '../../../../../shared/lib/utils/fill-in-blank';
+/** Preserve author newlines in fill-blank stems by mapping `\n` → `<br />`. */
 function renderTextWithLineBreaks(text) {
     const lines = text.split('\n');
     return lines.map((line, index) => (_jsxs(Fragment, { children: [index > 0 ? _jsx("br", {}) : null, line] }, index)));
 }
+function blankInputClassName({ isExampleQ, isReviewMode, isCorrect, isWrong, }) {
+    if (isExampleQ)
+        return 'border-amber-300 bg-amber-100/50 text-amber-800 disabled:opacity-100';
+    if (isReviewMode) {
+        if (isCorrect)
+            return 'border-emerald-400 bg-emerald-50 text-emerald-800';
+        if (isWrong)
+            return 'border-rose-400 bg-rose-50 text-rose-800';
+        return 'border-slate-200 bg-slate-50 text-slate-500';
+    }
+    return 'border-blue-200 bg-blue-50/30 text-blue-900 focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-100';
+}
 export function MoversListenAndWriteRenderer({ partNumber, partName, questionCount, instruction, imageUrl, audioUrl, title, exampleText, exampleHighlight, questions, answers, onAnswerChange, isReviewMode = false, showHints = false, groupContent, groupTitle, }) {
     const hasGroupContent = !!(audioUrl || imageUrl || groupContent || exampleText);
     return (_jsxs("div", { className: "flex flex-col h-full gap-4 sm:gap-6 overflow-y-auto custom-scrollbar relative", children: [_jsxs("div", { className: "flex flex-col gap-2 sm:gap-3 p-3 sm:px-6 sm:pt-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, hasExample: !!exampleText, isReviewMode: isReviewMode })] }), hasGroupContent && (_jsxs("div", { className: "flex flex-col gap-2 sm:gap-3 p-3 sm:px-6 sm:pt-0 sticky top-0 z-20 bg-white/95 backdrop-blur pb-2 shadow-sm border-b border-gray-100", children: [audioUrl && _jsx(CambridgeYleAudioPlayer, { audioSrc: audioUrl, compact: true }), _jsxs("div", { className: "max-h-[35vh] overflow-y-auto custom-scrollbar pr-2 flex flex-col gap-3", children: [imageUrl && (_jsx("div", { className: "flex items-center justify-center", children: _jsx(ResolvedImage, { src: imageUrl, alt: "Shared illustration", className: "max-h-[200px] rounded-lg object-contain shadow-md" }) })), groupContent && (_jsxs("div", { className: "rounded-lg bg-amber-50 p-3 text-sm leading-relaxed text-gray-700 shadow-inner", children: [groupTitle && _jsx("h3", { className: "mb-2 font-semibold text-gray-800", children: groupTitle }), groupContent] }))] }), exampleText && (_jsx(CambridgeYleExampleText, { text: exampleText, highlightedWord: exampleHighlight || '' }))] })), _jsxs("div", { className: "flex flex-col gap-4 p-3 sm:gap-6 sm:pb-6 sm:px-6", children: [title && (_jsx("h2", { className: "text-center text-3xl font-bold uppercase text-coral-500", children: title })), _jsx("div", { className: "flex flex-col gap-6 sm:gap-8", children: questions.map((question) => {
                             const isExampleQ = question.isExample || false;
                             const isDisabled = isReviewMode || isExampleQ;
-                            const displayValue = isExampleQ && question.correctAnswer ? question.correctAnswer : (answers[question.id] || '');
-                            const rawUserAnswer = (answers[question.id] || '').trim().toLowerCase();
-                            const rawCorrectAnswer = (question.correctAnswer || '').trim().toLowerCase();
-                            const hasAnswer = !!rawUserAnswer;
-                            const isCorrect = isReviewMode && !isExampleQ && hasAnswer && rawUserAnswer === rawCorrectAnswer;
-                            const isWrong = isReviewMode && !isExampleQ && hasAnswer && rawUserAnswer !== rawCorrectAnswer;
+                            const blankCount = countBlanks(question.segments);
+                            // Examples are pre-filled with the first accepted answer; everyone
+                            // else shows what the student typed.
+                            const displayValues = isExampleQ
+                                ? question.acceptedAnswers.map(getPrimaryAnswer)
+                                : toBlankValues(answers[question.id], blankCount);
+                            const blankStatuses = displayValues.map((value, index) => {
+                                const hasValue = !!value.trim();
+                                const matches = isBlankCorrect(value, question.acceptedAnswers[index]);
+                                return {
+                                    hasValue,
+                                    isCorrect: isReviewMode && !isExampleQ && hasValue && matches,
+                                    isWrong: isReviewMode && !isExampleQ && hasValue && !matches,
+                                };
+                            });
+                            const hasAnswer = blankStatuses.some((status) => status.hasValue);
+                            const isCorrect = isReviewMode &&
+                                !isExampleQ &&
+                                hasAnswer &&
+                                blankStatuses.every((status) => status.isCorrect);
+                            const isWrong = isReviewMode && !isExampleQ && hasAnswer && !isCorrect;
+                            const setBlankValue = (blankIndex, value) => {
+                                const next = toBlankValues(answers[question.id], blankCount);
+                                next[blankIndex] = value;
+                                onAnswerChange(question.id, next);
+                            };
+                            const renderBlankInput = (blankIndex) => {
+                                const status = blankStatuses[blankIndex] || {
+                                    hasValue: false,
+                                    isCorrect: false,
+                                    isWrong: false,
+                                };
+                                return (_jsx("span", { className: "mx-1 inline-block w-[7.5rem] max-w-[40%] min-w-[5.5rem] align-baseline sm:w-[8.5rem]", children: _jsx("input", { type: "text", value: displayValues[blankIndex] || '', onChange: (e) => setBlankValue(blankIndex, e.target.value), disabled: isDisabled, placeholder: isExampleQ ? '' : '...', className: `w-full rounded-md border-2 px-2 py-1 text-center text-sm font-semibold outline-none transition-all sm:text-base ${blankInputClassName({
+                                            isExampleQ,
+                                            isReviewMode,
+                                            isCorrect: status.isCorrect,
+                                            isWrong: status.isWrong,
+                                        })} ${isDisabled ? 'disabled:cursor-not-allowed disabled:opacity-75' : ''}` }) }));
+                            };
                             return (_jsxs("div", { id: `question-${question.id}`, className: `flex flex-col gap-4 rounded-2xl border p-4 sm:p-6 transition-all duration-200 hover:shadow-md ${isExampleQ
                                     ? 'border-amber-300 bg-amber-50/60 shadow-xs'
                                     : 'border-slate-200/80 bg-white shadow-xs hover:border-blue-300'}`, children: [_jsxs("div", { className: "flex items-center justify-between border-b border-slate-100 pb-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: `inline-flex items-center justify-center rounded-full px-3.5 py-1 text-sm font-bold text-white shadow-xs ${isExampleQ
@@ -31,12 +77,10 @@ export function MoversListenAndWriteRenderer({ partNumber, partName, questionCou
                                                                     : isWrong
                                                                         ? 'bg-rose-500'
                                                                         : 'bg-[#001590]'
-                                                                : 'bg-[#001590]'}`, children: isExampleQ ? `Ví dụ` : `${question.questionNumber}.` }), isExampleQ && (_jsx("span", { className: "rounded-md bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: "Example" }))] }), isReviewMode && !isExampleQ && (_jsx("div", { children: isCorrect ? (_jsx("span", { className: "inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-semibold text-emerald-700 border border-emerald-200", children: "\u2713 \u0110\u00FAng" })) : isWrong ? (_jsx("span", { className: "inline-flex items-center gap-1 rounded-full bg-rose-50 px-2.5 py-0.5 text-xs font-semibold text-rose-700 border border-rose-200", children: "\u2715 Ch\u01B0a \u0111\u00FAng" })) : (_jsx("span", { className: "inline-flex items-center gap-1 rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-600", children: "Ch\u01B0a tr\u1EA3 l\u1EDDi" })) }))] }), question.audioUrl && (_jsx("div", { className: "w-full my-1", children: _jsx(CambridgeYleAudioPlayer, { audioSrc: question.audioUrl, compact: true, dense: true }) })), question.imageUrl && (_jsx("div", { className: "flex items-center justify-center rounded-xl bg-slate-50/80 p-3 border border-slate-100 max-w-md mx-auto w-full", children: _jsx(ResolvedImage, { src: question.imageUrl, alt: `Question ${question.questionNumber} illustration`, className: "max-h-[200px] sm:max-h-[220px] w-auto rounded-lg object-contain drop-shadow-xs" }) })), _jsxs("div", { className: "text-base sm:text-lg leading-relaxed text-slate-800 pt-1", children: [question.textBefore && (_jsx("span", { className: "font-medium", children: renderTextWithLineBreaks(question.textBefore) })), _jsx("span", { className: "mx-1 inline-block w-[7.5rem] max-w-[40%] min-w-[5.5rem] align-baseline sm:w-[8.5rem]", children: _jsx("input", { type: "text", value: displayValue, onChange: (e) => onAnswerChange(question.id, e.target.value), disabled: isDisabled, placeholder: isExampleQ ? '' : '...', className: `w-full rounded-md border-2 px-2 py-1 text-center text-sm font-semibold outline-none transition-all sm:text-base ${isExampleQ
-                                                        ? 'border-amber-300 bg-amber-100/50 text-amber-800 disabled:opacity-100'
-                                                        : isReviewMode
-                                                            ? isCorrect
-                                                                ? 'border-emerald-400 bg-emerald-50 text-emerald-800'
-                                                                : 'border-rose-400 bg-rose-50 text-rose-800'
-                                                            : 'border-blue-200 bg-blue-50/30 text-blue-900 focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-100'} ${isDisabled ? 'disabled:cursor-not-allowed disabled:opacity-75' : ''}` }) }), question.textAfter && (_jsx("span", { className: "font-medium", children: renderTextWithLineBreaks(question.textAfter) })), question.verbHint && (_jsxs("span", { className: "ml-1 italic text-slate-500 font-normal", children: ["(", question.verbHint, ")"] }))] }), showHints && question.hints && question.hints.length > 0 && !isReviewMode && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 pt-2 border-t border-slate-100", children: [_jsx("span", { className: "text-xs font-medium text-slate-500", children: "G\u1EE3i \u00FD:" }), question.hints.map((hint, idx) => (_jsx("button", { type: "button", onClick: () => onAnswerChange(question.id, hint), className: "rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700 shadow-2xs transition-all hover:bg-blue-600 hover:text-white hover:border-blue-600 active:scale-95", children: hint }, idx)))] })), isReviewMode && !isExampleQ && question.correctAnswer && (_jsx("div", { className: "mt-1 rounded-lg bg-emerald-50/80 p-2.5 text-sm border border-emerald-200/80", children: _jsxs("span", { className: "font-semibold text-emerald-800", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", _jsx("span", { className: "font-bold underline", children: question.correctAnswer })] }) }))] }, question.id));
+                                                                : 'bg-[#001590]'}`, children: isExampleQ ? `Ví dụ` : `${question.questionNumber}.` }), isExampleQ && (_jsx("span", { className: "rounded-md bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: "Example" }))] }), isReviewMode && !isExampleQ && (_jsx("div", { children: isCorrect ? (_jsx("span", { className: "inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-semibold text-emerald-700 border border-emerald-200", children: "\u00E2\u0153\u201C \u00C4\u0090\u00C3\u00BAng" })) : isWrong ? (_jsx("span", { className: "inline-flex items-center gap-1 rounded-full bg-rose-50 px-2.5 py-0.5 text-xs font-semibold text-rose-700 border border-rose-200", children: "\u00E2\u0153\u2022 Ch\u00C6\u00B0a \u00C4\u2018\u00C3\u00BAng" })) : (_jsx("span", { className: "inline-flex items-center gap-1 rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-600", children: "Ch\u00C6\u00B0a tr\u00E1\u00BA\u00A3 l\u00E1\u00BB\u009Di" })) }))] }), question.audioUrl && (_jsx("div", { className: "w-full my-1", children: _jsx(CambridgeYleAudioPlayer, { audioSrc: question.audioUrl, compact: true, dense: true }) })), question.imageUrl && (_jsx("div", { className: "flex items-center justify-center rounded-xl bg-slate-50/80 p-3 border border-slate-100 max-w-md mx-auto w-full", children: _jsx(ResolvedImage, { src: question.imageUrl, alt: `Question ${question.questionNumber} illustration`, className: "max-h-[200px] sm:max-h-[220px] w-auto rounded-lg object-contain drop-shadow-xs" }) })), _jsxs("div", { className: "text-base sm:text-lg leading-relaxed text-slate-800 pt-1", children: [question.segments.map((segment, segmentIndex) => segment.type === 'text' ? (_jsx("span", { className: "font-medium", children: renderTextWithLineBreaks(segment.value) }, `text-${segmentIndex}`)) : (_jsx(Fragment, { children: renderBlankInput(segment.index) }, `blank-${segment.index}-${segmentIndex}`))), question.verbHint && (_jsxs("span", { className: "ml-1 italic text-slate-500 font-normal", children: ["(", question.verbHint, ")"] }))] }), showHints && question.hints && question.hints.length > 0 && !isReviewMode && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 pt-2 border-t border-slate-100", children: [_jsx("span", { className: "text-xs font-medium text-slate-500", children: "G\u00E1\u00BB\u00A3i \u00C3\u00BD:" }), question.hints.map((hint, idx) => (_jsx("button", { type: "button", onClick: () => {
+                                                    const current = toBlankValues(answers[question.id], blankCount);
+                                                    const emptyIndex = current.findIndex((value) => !value.trim());
+                                                    setBlankValue(emptyIndex >= 0 ? emptyIndex : 0, hint);
+                                                }, className: "rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700 shadow-2xs transition-all hover:bg-blue-600 hover:text-white hover:border-blue-600 active:scale-95", children: hint }, idx)))] })), isReviewMode && !isExampleQ && question.acceptedAnswers.some((alts) => alts.length > 0) && (_jsx("div", { className: "mt-1 rounded-lg bg-emerald-50/80 p-2.5 text-sm border border-emerald-200/80", children: _jsxs("span", { className: "font-semibold text-emerald-800", children: ["\u00C4\u0090\u00C3\u00A1p \u00C3\u00A1n \u00C4\u2018\u00C3\u00BAng:", ' ', _jsx("span", { className: "font-bold underline", children: question.acceptedAnswers.map(formatAcceptedAnswers).filter(Boolean).join(' | ') })] }) }))] }, question.id));
                         }) })] })] }));
 }

package/dist/components/exams/take/types.d.ts

@@ -2,13 +2,20 @@
  * Types for Movers Exam UI
  */
 import type { ReactNode } from 'react';
+import type { FillBlankSegment } from '../../../shared/lib/utils/fill-in-blank';
+export type { FillBlankSegment };
+/**
+ * A fill-in-the-blank stem, already split into segments. Every blank in
+ * `segments` gets its own input, and the student answer is always one string
+ * per blank, index-aligned with `acceptedAnswers`.
+ */
 export interface FillBlankQuestion {
     id: string;
     questionNumber: number;
-    textBefore: string;
-    textAfter: string;
+    segments: FillBlankSegment[];
+    /** acceptedAnswers[i] = equivalent correct answers for blank i. */
+    acceptedAnswers: string[][];
     verbHint?: string;
-    correctAnswer?: string;
     imageUrl?: string;
     audioUrl?: string;
     hints?: string[];
@@ -25,8 +32,8 @@ export interface MoversListenAndWriteRendererProps {
     exampleText?: string;
     exampleHighlight?: string;
     questions: FillBlankQuestion[];
-    answers: Record<string, string>;
-    onAnswerChange: (questionId: string, value: string) => void;
+    answers: Record<string, unknown>;
+    onAnswerChange: (questionId: string, value: string[]) => void;
     isReviewMode?: boolean;
     showHints?: boolean;
 }

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

@@ -216,7 +216,7 @@ function wrapAnswer(answer, questionType) {
     // For array answers (word fill with word bank), wrap in { answers: array }
     // WORD_FILL_PARAGRAPH stores answers as array of strings
     if (Array.isArray(answer)) {
-        if (questionType === 'WORD_FILL_PARAGRAPH') {
+        if (questionType === 'WORD_FILL_PARAGRAPH' || questionType === 'FILL_IN_BLANK') {
             return { answers: answer };
         }
         // Fallback for other question types with array answers

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

@@ -161,6 +161,7 @@ export declare function transformChooseTheCorrectAnswerGroup(questions: ApiQuest
     questions: ChooseBestAnswerQuestion[];
     example?: import('../types').ChooseBestAnswerExample;
     instruction: string;
+    audioUrl?: string;
 };
 export interface ChooseAdjectiveOption {
     id: string;

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

@@ -4,6 +4,7 @@
  * Maps backend question types to frontend renderer props.
  * Each transformer handles specific question type data structure.
  */
+import { countBlanks, normalizeAcceptedAnswers, parseFillBlankStem, } from '../../../../shared/lib/utils/fill-in-blank';
 /**
  * Group questions by part_id AND questionGroup.id
  * This ensures questions with different passages (different questionGroups)
@@ -154,55 +155,20 @@ export function transformFillInBlank(questions) {
     const content = firstQuestion?.content;
     const groupPayload = firstQuestion?.questionGroup?.payload;
     const transformed = [];
-    /** Take UI shows plain textBefore/textAfter — strip `**` so markers never leak. */
-    const stripStemBoldMarkers = (s) => s.replace(/\*\*/g, '');
     for (const q of questions) {
         const qContent = q.content;
-        const isExample = q.is_example || false;
         // Support both: content.question (new) and content.blanks[0].text (legacy)
         const text = qContent.question || qContent.blanks?.[0]?.text || '';
-        // Check for multiple placeholders: {0}, {1}, etc.
-        const placeholderMatches = [...text.matchAll(/\{(\d+)\}/g)];
-        if (placeholderMatches.length > 1) {
-            // Multi-placeholder: split into separate lines by newline or by placeholder
-            const lines = text.split('\n').filter((l) => l.trim());
-            for (const line of lines) {
-                const lineMatch = line.match(/\{(\d+)\}/);
-                if (!lineMatch)
-                    continue;
-                const blankIndex = parseInt(lineMatch[1], 10);
-                const parts = line.split(/\{\d+\}/);
-                const textBefore = stripStemBoldMarkers(parts[0]?.trim() || '');
-                const textAfter = stripStemBoldMarkers(parts[1]?.trim() || '');
-                transformed.push({
-                    id: `${q.id}-blank-${blankIndex}`,
-                    questionNumber: q.question_number,
-                    textBefore,
-                    textAfter,
-                    imageUrl: qContent.imageUrl,
-                    hints: qContent.hints,
-                    isExample,
-                    correctAnswer: isExample ? q.correct_answer?.answers?.[blankIndex] : undefined,
-                });
-            }
-        }
-        else {
-            // Single placeholder or no placeholder.
-            // Use [\s\S] so stems with newlines still match (`.` does not cross `\n`).
-            const match = text.match(/^([\s\S]*?)\{0\}([\s\S]*)$/);
-            const textBefore = stripStemBoldMarkers(match ? match[1].trim() : text);
-            const textAfter = stripStemBoldMarkers(match ? match[2].trim() : '');
-            transformed.push({
-                id: q.id,
-                questionNumber: q.question_number,
-                textBefore,
-                textAfter,
-                imageUrl: qContent.imageUrl,
-                hints: qContent.hints,
-                isExample,
-                correctAnswer: isExample ? q.correct_answer?.answers?.[0] : undefined,
-            });
-        }
+        const segments = parseFillBlankStem(text);
+        transformed.push({
+            id: q.id,
+            questionNumber: q.question_number,
+            segments,
+            acceptedAnswers: normalizeAcceptedAnswers(q.correct_answer?.answers, countBlanks(segments)),
+            imageUrl: qContent.imageUrl,
+            hints: qContent.hints,
+            isExample: q.is_example || false,
+        });
     }
     return {
         questions: transformed,
@@ -228,17 +194,17 @@ export function transformWriteCorrectVerbForm(questions) {
     const content = firstQuestion?.content;
     const transformed = questions.map((q) => {
         const qContent = q.content;
-        const sentence = qContent.sentence || '';
-        // Parse "John {0} his homework." -> textBefore: "John", textAfter: "his homework."
-        // [\s\S] allows instruction text with newlines before the blank.
-        const match = sentence.match(/^([\s\S]*?)\{0\}([\s\S]*)$/);
-        const textBefore = match ? match[1].trim() : sentence;
-        const textAfter = match ? match[2].trim() : '';
+        const segments = parseFillBlankStem(qContent.sentence || '');
+        // Stored as { correctAnswer: "doesn't like" }; older rows used { answers: { 'blank-1': … } }.
+        const correct = q.correct_answer;
+        const rawAccepted = Array.isArray(correct?.answers)
+            ? correct.answers
+            : (correct?.answers?.['blank-1'] ?? correct?.correctAnswer ?? correct?.answer);
         return {
             id: q.id,
             questionNumber: q.question_number,
-            textBefore,
-            textAfter,
+            segments,
+            acceptedAnswers: normalizeAcceptedAnswers(rawAccepted, countBlanks(segments)),
             verbHint: qContent.verbHint, // Pass verbHint per question
         };
     });
@@ -445,12 +411,18 @@ export function transformChooseTheCorrectAnswerGroup(questions) {
         }
         return urls.length === 1 ? urls[0] : urls;
     };
+    const toAudioUrl = (value) => {
+        const trimmed = typeof value === 'string' ? value.trim() : '';
+        return trimmed !== '' ? trimmed : undefined;
+    };
+    const groupAudioUrl = toAudioUrl(content?.meta?.audioUrl);
     let example;
     if (exampleItem) {
         const exampleIndex = items.indexOf(exampleItem);
         const exOptions = mapOptions(exampleItem.content?.options, `${parent.id}-ex`);
         const exCorrect = exampleItem.correctAnswer?.answer || parentCorrect[exampleIndex] || exOptions[0]?.id || '';
         const exampleImageUrl = toQuestionImageUrl(exampleItem.content?.imageUrl);
+        const exampleAudioUrl = !groupAudioUrl ? toAudioUrl(exampleItem.content?.audioUrl) : undefined;
         example = {
             questionNumber: exampleItem.questionNumber || exampleIndex + 1,
             questionText: exampleItem.content?.question || '',
@@ -458,6 +430,7 @@ export function transformChooseTheCorrectAnswerGroup(questions) {
             correctOptionId: exCorrect,
             optionType: (exampleItem.content?.optionType || 'text'),
             ...(exampleImageUrl !== undefined ? { imageUrl: exampleImageUrl } : {}),
+            ...(exampleAudioUrl ? { audioUrl: exampleAudioUrl } : {}),
         };
     }
     const transformed = regularItems.map((item) => {
@@ -465,6 +438,7 @@ export function transformChooseTheCorrectAnswerGroup(questions) {
         const options = mapOptions(item.content?.options, `${parent.id}-item-${itemIndex}`);
         const correctId = item.correctAnswer?.answer || parentCorrect[itemIndex] || '';
         const itemImageUrl = toQuestionImageUrl(item.content?.imageUrl);
+        const itemAudioUrl = !groupAudioUrl ? toAudioUrl(item.content?.audioUrl) : undefined;
         return {
             id: `${parent.id}-item-${itemIndex}`,
             questionNumber: item.questionNumber || itemIndex + 1,
@@ -474,12 +448,14 @@ export function transformChooseTheCorrectAnswerGroup(questions) {
             correctOptionIds: correctId ? [correctId] : [],
             optionType: (item.content?.optionType || 'text'),
             ...(itemImageUrl !== undefined ? { imageUrl: itemImageUrl } : {}),
+            ...(itemAudioUrl ? { audioUrl: itemAudioUrl } : {}),
         };
     });
     return {
         questions: transformed,
         example,
         instruction: content?.meta?.instruction || 'Choose the correct answer.',
+        ...(groupAudioUrl ? { audioUrl: groupAudioUrl } : {}),
     };
 }
 export function transformChooseCorrectAdjective(questions) {

package/dist/components/questions/_shared/types/choose-the-correct-answer-group.type.d.ts

@@ -18,10 +18,12 @@ export interface ChooseTheCorrectAnswerGroupItemData {
     points: number;
     questionNumber: number;
     imageUrl?: ChooseTheCorrectAnswerGroupImageUrl;
+    audioUrl?: string;
 }
 export interface ChooseTheCorrectAnswerGroupData {
     instruction: string;
     passage?: string;
+    audioUrl?: string;
     items: ChooseTheCorrectAnswerGroupItemData[];
     explanation?: string;
     points?: number;

package/dist/components/questions/_shared/types/fill-in-blank.type.d.ts

@@ -3,20 +3,32 @@ export type { ValidationRef };
 export interface BlankItem {
     id: string;
     text: string;
+    /** @deprecated Prefer correctAnswers — kept for legacy load */
     correctAnswer: string;
+    /** Equivalent correct answers for this blank */
+    correctAnswers?: string[];
 }
 export interface FillInBlankGroup {
     number: number;
     questionCount: number;
 }
+/**
+ * Main data interface - supports multiple blanks in a single question
+ * Question format: "He {0} 10 years old and she {1} 12."
+ * Answers format (canonical): [["is", "'s"], ["are"]]
+ *   - answers[i] = list of equivalent correct answers for placeholder {i}
+ * Legacy format still accepted when loading: ["is", "are"] → [["is"], ["are"]]
+ */
 export interface FillInBlankData {
     question: string;
-    answers: string[];
+    /** Per-blank list of equivalent correct answers */
+    answers: string[][];
     caseSensitive?: boolean;
     explanation?: string;
     points?: number;
     isExample?: boolean;
     imageUrl?: string;
+    audioUrl?: string;
     showHints?: boolean;
     hints?: string[];
     isGroup?: boolean;
@@ -41,9 +53,12 @@ export interface FillInBlankCreatorProps {
     groups?: FillInBlankGroup[];
     questionIndexInPart?: number;
     partId?: string;
+    /** Template questionConfig — controls which fields are shown (e.g. "audio") */
+    questionConfig?: string[];
 }
 export interface FillInBlankClientProps {
     questionData: FillInBlankData;
+    questionConfig?: string[];
     onSubmit?: (answers: string[]) => void;
     isReviewMode?: boolean;
     userAnswer?: string[];

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BookOpen, Check, CircleHelp, Lightbulb, Star } from 'lucide-react';
+import { BookOpen, Check, CircleHelp, Lightbulb, Star, Volume2 } from 'lucide-react';
 import { cn } from '../../../../shared/lib/utils';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
 import { getChooseAnswerGroupOptionImageSrc, toChooseAnswerGroupImageUrls, } from '../../_shared/types/choose-the-correct-answer-group.type';
@@ -13,6 +13,15 @@ function ClientImageItem({ url, alt }) {
     }
     return (_jsx("div", { className: "max-w-sm overflow-hidden rounded-lg border border-gray-200 bg-gray-50", children: isLoading ? (_jsx("div", { className: "flex h-36 w-48 items-center justify-center", children: _jsx("div", { className: "h-6 w-6 animate-spin rounded-full border-2 border-gray-200 border-t-teal-500" }) })) : (_jsx("img", { src: src, alt: alt || 'Image', className: "max-h-56 w-auto object-contain p-2" })) }));
 }
+function ClientAudio({ url }) {
+    const { previewUrl, isLoading } = usePresignedFileUrl(url);
+    const src = previewUrl ||
+        (typeof url === 'string' && (url.startsWith('http') || url.startsWith('blob:')) ? url : '');
+    if (!src && !isLoading) {
+        return null;
+    }
+    return (_jsxs("div", { className: "flex items-center gap-3 rounded-xl border border-indigo-100 bg-indigo-50/70 px-4 py-3", children: [_jsx(Volume2, { className: "h-4 w-4 shrink-0 text-indigo-600" }), isLoading ? (_jsx("div", { className: "h-8 flex-1 animate-pulse rounded-md bg-indigo-100" })) : (_jsx("audio", { controls: true, className: "h-9 w-full", src: src, preload: "metadata", children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." }))] }));
+}
 const OPTION_LABELS = ['A', 'B', 'C', 'D', 'E', 'F'];
 export function ChooseTheCorrectAnswerGroupClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, }) {
     const items = questionData.items || [];
@@ -25,10 +34,11 @@ export function ChooseTheCorrectAnswerGroupClient({ questionData, isReviewMode =
         next[itemIndex] = optionId;
         onAnswerChange(next);
     };
-    return (_jsxs("div", { className: "space-y-4", children: [questionData.instruction && (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800", children: questionData.instruction })), questionData.passage && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-white p-5 shadow-xs", children: [_jsxs("div", { className: "mb-2.5 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-indigo-700", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: "B\u00E0i \u0111\u1ECDc (Reading Passage)" })] }), _jsx("div", { className: "prose prose-sm max-w-none text-gray-800 leading-relaxed", dangerouslySetInnerHTML: { __html: questionData.passage } })] })), items.map((item, itemIndex) => {
+    return (_jsxs("div", { className: "space-y-4", children: [questionData.instruction && (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800", children: questionData.instruction })), questionData.audioUrl && _jsx(ClientAudio, { url: questionData.audioUrl }), questionData.passage && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-white p-5 shadow-xs", children: [_jsxs("div", { className: "mb-2.5 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-indigo-700", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: "B\u00E0i \u0111\u1ECDc (Reading Passage)" })] }), _jsx("div", { className: "prose prose-sm max-w-none text-gray-800 leading-relaxed", dangerouslySetInnerHTML: { __html: questionData.passage } })] })), items.map((item, itemIndex) => {
                 const selectedId = userAnswers[itemIndex];
                 const canSelect = !isReviewMode && !item.isExample && Boolean(onAnswerChange);
-                return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-4 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] }))] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-4", children: [_jsx("p", { className: "text-sm font-semibold leading-relaxed text-gray-800", children: item.question || 'Câu hỏi chưa được nhập' }), toChooseAnswerGroupImageUrls(item.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toChooseAnswerGroupImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1} (${imageIndex + 1})` }, `${item.questionNumber}-${imageIndex}`))) })), item.optionType === 'image' ? (_jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: item.options.map((option, optionIndex) => {
+                const showItemAudio = Boolean(item.audioUrl) && !questionData.audioUrl;
+                return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-4 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] }))] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-4", children: [_jsx("p", { className: "text-sm font-semibold leading-relaxed text-gray-800", children: item.question || 'Câu hỏi chưa được nhập' }), showItemAudio && item.audioUrl && _jsx(ClientAudio, { url: item.audioUrl }), toChooseAnswerGroupImageUrls(item.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toChooseAnswerGroupImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1} (${imageIndex + 1})` }, `${item.questionNumber}-${imageIndex}`))) })), item.optionType === 'image' ? (_jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: item.options.map((option, optionIndex) => {
                                         const isCorrect = option.id === item.correctAnswer;
                                         const isSelected = option.id === selectedId;
                                         const optionImageSrc = getChooseAnswerGroupOptionImageSrc(option);

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

@@ -8,6 +8,7 @@ import { Textarea } from '../../../../components/ui/textarea';
 import { PointsInput } from '../../../../components/ui/points-input';
 import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
 import { Switch } from '../../../../components/ui/switch';
+import { FileUpload } from '../../../../components/ui/file-upload';
 import { RichTextEditor } from '../../../../components/shared/RichTextEditor';
 import { useDebouncedCallback } from '../../../../shared/lib/hooks';
 import { Eye, ImageIcon, Pencil, Plus, Star, Trash2, Type } from 'lucide-react';
@@ -51,6 +52,7 @@ function normalizeItems(rawItems) {
             points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
             questionNumber: item.questionNumber || index + 1,
             ...(imageUrl !== undefined ? { imageUrl } : {}),
+            ...(item.audioUrl ? { audioUrl: item.audioUrl } : {}),
         };
     });
 }
@@ -67,6 +69,7 @@ function parsePointsValue(raw, allowZero) {
 export function ChooseTheCorrectAnswerGroupCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }) {
     const [instruction, setInstruction] = useState(initialData?.instruction || 'Choose the correct answer.');
     const [passage, setPassage] = useState(initialData?.passage || '');
+    const [audioUrl, setAudioUrl] = useState(initialData?.audioUrl || '');
     const [items, setItems] = useState(() => normalizeItems(initialData?.items));
     const [explanation, setExplanation] = useState(initialData?.explanation || '');
     const [isClientMode, setIsClientMode] = useState(false);
@@ -77,9 +80,10 @@ export function ChooseTheCorrectAnswerGroupCreator({ initialData, onChange, exte
         onChangeRef.current = onChange;
     }, [onChange]);
     const isContentEmpty = (html) => !html || html === '<p></p>' || html === '<p><br></p>' || html.trim() === '';
-    const buildPayload = (nextInstruction = instruction, nextPassage = passage, nextItems = items, nextExplanation = explanation) => ({
+    const buildPayload = (nextInstruction = instruction, nextPassage = passage, nextItems = items, nextExplanation = explanation, nextAudioUrl = audioUrl) => ({
         instruction: nextInstruction,
         ...(!isContentEmpty(nextPassage) ? { passage: nextPassage.trim() } : {}),
+        ...(nextAudioUrl.trim() ? { audioUrl: nextAudioUrl.trim() } : {}),
         items: nextItems,
         explanation: nextExplanation,
         points: sumPoints(nextItems),
@@ -96,7 +100,7 @@ export function ChooseTheCorrectAnswerGroupCreator({ initialData, onChange, exte
         previousPayloadRef.current = serialized;
         onUnsavedChangesChange?.(true);
         debouncedOnChange(payload);
-    }, [instruction, passage, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
+    }, [instruction, passage, audioUrl, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
     const validate = () => {
         const nextErrors = [];
         if (!instruction.trim()) {
@@ -161,7 +165,7 @@ export function ChooseTheCorrectAnswerGroupCreator({ initialData, onChange, exte
         return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", variant: "outline", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Ch\u1EC9nh s\u1EEDa"] }) }), _jsx(ChooseTheCorrectAnswerGroupClient, { questionData: buildPayload(), isReviewMode: true })] }));
     }
     const allErrors = [...errors, ...(externalErrors || [])];
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", variant: "outline", onClick: () => setIsClientMode(true), children: [_jsx(Eye, { className: "mr-2 h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] }) }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Nh\u00F3m ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "group-instruction", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "group-instruction", value: instruction, onChange: (event) => setInstruction(event.target.value), placeholder: "Choose the correct answer." })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "N\u1ED9i dung b\u00E0i \u0111\u1ECDc (Passage - Tu\u1EF3 ch\u1ECDn)" }), _jsx(RichTextEditor, { value: passage, onChange: setPassage, minHeightClassName: "min-h-[160px]" })] }), _jsxs("div", { className: "rounded-xl border border-gray-200 bg-gray-50 p-4", children: [_jsx(PointsInput, { value: sumPoints(items), allowZero: true, readOnly: true }), _jsx("p", { className: "mt-2 text-xs text-gray-500", children: "T\u1ED5ng \u0111i\u1EC3m \u0111\u01B0\u1EE3c c\u1ED9ng t\u1EEB c\u00E1c c\u00E2u kh\u00F4ng ph\u1EA3i example." })] })] })] }), items.map((item, itemIndex) => (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0", children: [_jsxs(CardTitle, { className: "text-base", children: ["C\u00E2u ", itemIndex + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeItem(itemIndex), disabled: items.length <= 1, children: _jsx(Trash2, { className: "h-4 w-4" }) })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between rounded-lg border border-amber-100 bg-amber-50 px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-amber-800", children: [_jsx(Star, { className: "h-4 w-4" }), "C\u00E2u v\u00ED d\u1EE5"] }), _jsx(Switch, { checked: item.isExample === true, onCheckedChange: (checked) => updateItem(itemIndex, {
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", variant: "outline", onClick: () => setIsClientMode(true), children: [_jsx(Eye, { className: "mr-2 h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] }) }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Nh\u00F3m ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "group-instruction", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "group-instruction", value: instruction, onChange: (event) => setInstruction(event.target.value), placeholder: "Choose the correct answer." })] }), _jsx("div", { className: "space-y-2", children: _jsx(FileUpload, { id: "choose-answer-group-audio", label: "Audio chung (tu\u1EF3 ch\u1ECDn)", accept: "audio/*", value: audioUrl, onChange: setAudioUrl, maxSize: 20, placeholder: "Upload file audio ho\u1EB7c paste URL", autoUpload: true, prefix: "questions", showPlayButton: true }) }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "N\u1ED9i dung b\u00E0i \u0111\u1ECDc (Passage - Tu\u1EF3 ch\u1ECDn)" }), _jsx(RichTextEditor, { value: passage, onChange: setPassage, minHeightClassName: "min-h-[160px]" })] }), _jsxs("div", { className: "rounded-xl border border-gray-200 bg-gray-50 p-4", children: [_jsx(PointsInput, { value: sumPoints(items), allowZero: true, readOnly: true }), _jsx("p", { className: "mt-2 text-xs text-gray-500", children: "T\u1ED5ng \u0111i\u1EC3m \u0111\u01B0\u1EE3c c\u1ED9ng t\u1EEB c\u00E1c c\u00E2u kh\u00F4ng ph\u1EA3i example." })] })] })] }), items.map((item, itemIndex) => (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0", children: [_jsxs(CardTitle, { className: "text-base", children: ["C\u00E2u ", itemIndex + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeItem(itemIndex), disabled: items.length <= 1, children: _jsx(Trash2, { className: "h-4 w-4" }) })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between rounded-lg border border-amber-100 bg-amber-50 px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-amber-800", children: [_jsx(Star, { className: "h-4 w-4" }), "C\u00E2u v\u00ED d\u1EE5"] }), _jsx(Switch, { checked: item.isExample === true, onCheckedChange: (checked) => updateItem(itemIndex, {
                                             isExample: checked,
                                             points: checked ? 0 : (item.points || 1),
                                         }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "C\u00E2u h\u1ECFi" }), _jsx(Textarea, { value: item.question, onChange: (event) => updateItem(itemIndex, { question: event.target.value }), rows: 2, placeholder: "A place for someone to stay or live is called" })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "flex items-center gap-2", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-teal-500" }), "H\u00ECnh \u1EA3nh (tu\u1EF3 ch\u1ECDn)"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => {

package/dist/components/questions/types/choose-the-correct-answer-group/map-choose-the-correct-answer-group-data.js

@@ -8,6 +8,13 @@ function asRecord(value) {
 function asString(value, fallback = '') {
     return typeof value === 'string' ? value : fallback;
 }
+function asOptionalUrl(value) {
+    if (typeof value !== 'string') {
+        return undefined;
+    }
+    const trimmed = value.trim();
+    return trimmed !== '' ? trimmed : undefined;
+}
 export function createEmptyChooseAnswerGroupItem(questionNumber) {
     return {
         question: '',
@@ -51,6 +58,7 @@ export function mapChooseAnswerGroupItem(item, index, fallbackAnswer) {
         ];
     const isExample = record.isExample === true;
     const imageUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(content.imageUrl));
+    const audioUrl = asOptionalUrl(content.audioUrl);
     return {
         question: asString(content.question) || asString(record.question),
         optionType: asString(content.optionType) === 'image' ? 'image' : 'text',
@@ -60,6 +68,7 @@ export function mapChooseAnswerGroupItem(item, index, fallbackAnswer) {
         points: isExample ? 0 : typeof record.points === 'number' ? record.points : 1,
         questionNumber: typeof record.questionNumber === 'number' ? record.questionNumber : index + 1,
         ...(imageUrl !== undefined ? { imageUrl } : {}),
+        ...(audioUrl ? { audioUrl } : {}),
     };
 }
 export function mapQuestionToChooseAnswerGroupData(question) {
@@ -73,18 +82,22 @@ export function mapQuestionToChooseAnswerGroupData(question) {
         : [];
     if (Array.isArray(content.items)) {
         const items = content.items.map((item, index) => mapChooseAnswerGroupItem(item, index, fallbackAnswers[index]));
+        const audioUrl = asOptionalUrl(asRecord(content.meta).audioUrl);
         return {
             instruction: asString(asRecord(content.meta).instruction) || 'Choose the correct answer.',
             passage: asString(asRecord(content.meta).passage),
+            ...(audioUrl ? { audioUrl } : {}),
             items,
             explanation,
             points: items.reduce((total, item) => (item.isExample ? total : total + (item.points || 0)), 0),
         };
     }
     if (Array.isArray(answer.items)) {
+        const audioUrl = asOptionalUrl(answer.audioUrl);
         return {
             instruction: asString(answer.instruction, 'Choose the correct answer.'),
             passage: asString(answer.passage),
+            ...(audioUrl ? { audioUrl } : {}),
             items: answer.items.map((item, index) => mapChooseAnswerGroupItem(item, index, fallbackAnswers[index])),
             explanation,
             points: typeof answer.points === 'number' ? answer.points : undefined,