@tinyweb_dev/oe-exam-sdk 0.2.6 → 0.2.7

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.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
         };
     });

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/fill-in-blank/FillInBlankClient.d.ts

@@ -1,2 +1,2 @@
 import { FillInBlankClientProps } from '../../_shared/types/fill-in-blank.type';
-export declare function FillInBlankClient({ questionData, onSubmit, isReviewMode, userAnswer, autoFillCorrectAnswers, explanation: explanationProp, }: FillInBlankClientProps): import("react").JSX.Element;
+export declare function FillInBlankClient({ questionData, questionConfig, onSubmit, isReviewMode, userAnswer, autoFillCorrectAnswers, explanation: explanationProp, }: FillInBlankClientProps): import("react").JSX.Element;

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

@@ -2,22 +2,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useMemo } from 'react';
 import { Input } from '../../../../components/ui/input';
-import { Check, X, PenLine, AlertTriangle, ClipboardList, Lightbulb, BookOpen, Type, Hash, } from 'lucide-react';
+import { Check, X, PenLine, AlertTriangle, ClipboardList, Lightbulb, BookOpen, Hash, Volume2, } from 'lucide-react';
+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';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-// Helper: Extract placeholder indices from question text
-function extractPlaceholderIndices(question) {
-    const regex = /\{(\d+)\}/g;
-    const indices = [];
-    let match;
-    while ((match = regex.exec(question)) !== null) {
-        const index = parseInt(match[1], 10);
-        if (!indices.includes(index)) {
-            indices.push(index);
-        }
-    }
-    return indices.sort((a, b) => a - b);
-}
 // Sub-component: Resolve presigned URL for group image
 function GroupImage({ src, alt, className }) {
     const { previewUrl, isLoading } = usePresignedFileUrl(src);
@@ -32,7 +21,7 @@ function GroupImage({ src, alt, className }) {
             target.src = '/images/placeholder-image.svg';
         } }));
 }
-export function FillInBlankClient({ questionData, onSubmit, isReviewMode = false, userAnswer = [], autoFillCorrectAnswers = false, explanation: explanationProp, }) {
+export function FillInBlankClient({ questionData, questionConfig, onSubmit, isReviewMode = false, userAnswer = [], autoFillCorrectAnswers = false, explanation: explanationProp, }) {
     // Detect if this is new format (question + answers) or legacy format (blanks array)
     const isLegacyFormat = !questionData.question && questionData.blanks && questionData.blanks.length > 0;
     const explanation = explanationProp || questionData.explanation;
@@ -47,37 +36,48 @@ export function FillInBlankClient({ questionData, onSubmit, isReviewMode = false
     const { previewUrl: imagePreviewUrl, isLoading: isImageLoading } = usePresignedFileUrl(
     // Only use question-level imageUrl when NOT grouped (group image is handled separately)
     (!isGroup && questionData.imageUrl) ? questionData.imageUrl : '');
+    // Per-question audio — show when configured or when audioUrl already saved
+    const cleanAudioUrl = questionData.audioUrl?.trim() ? questionData.audioUrl : '';
+    const showAudio = Boolean(questionConfig?.includes('audio') || questionConfig?.includes('audioUrl') || cleanAudioUrl);
+    const { previewUrl: audioPreviewUrl } = usePresignedFileUrl(cleanAudioUrl || undefined);
     // For new format: extract placeholders from question
     const placeholderIndices = useMemo(() => {
         if (isLegacyFormat)
             return [];
         return extractPlaceholderIndices(questionData.question || '');
     }, [questionData.question, isLegacyFormat]);
-    // Initialize answers based on format
+    // Canonical correct answers matrix (string[][]), supports legacy string[]
+    const correctAnswersMatrix = useMemo(() => {
+        if (isLegacyFormat && questionData.blanks) {
+            return normalizeFillInBlankAnswers(questionData.blanks.map((b) => b.correctAnswers ?? b.correctAnswer ?? ''));
+        }
+        return normalizeFillInBlankAnswers(questionData.answers || []);
+    }, [isLegacyFormat, questionData.answers, questionData.blanks]);
+    // Student answers are always flat string[] (one input per blank)
     const getInitialAnswers = () => {
         if (autoFillCorrectAnswers) {
             if (isLegacyFormat && questionData.blanks) {
-                return questionData.blanks.map(b => b.correctAnswer);
+                return questionData.blanks.map((b) => getPrimaryBlankAnswer(b.correctAnswers ?? normalizeBlankAnswers(b.correctAnswer)));
             }
-            return questionData.answers || [];
+            return correctAnswersMatrix.map((alts) => getPrimaryBlankAnswer(alts));
         }
         return userAnswer || [];
     };
-    const [answers, setAnswers] = useState(getInitialAnswers());
+    const [answers, setAnswers] = useState(getInitialAnswers);
     // Sync userAnswer when it changes
     useEffect(() => {
         if (autoFillCorrectAnswers) {
             if (isLegacyFormat && questionData.blanks) {
-                setAnswers(questionData.blanks.map(b => b.correctAnswer));
+                setAnswers(questionData.blanks.map((b) => getPrimaryBlankAnswer(b.correctAnswers ?? normalizeBlankAnswers(b.correctAnswer))));
             }
             else {
-                setAnswers(questionData.answers || []);
+                setAnswers(correctAnswersMatrix.map((alts) => getPrimaryBlankAnswer(alts)));
             }
         }
         else if (userAnswer) {
             setAnswers(userAnswer);
         }
-    }, [userAnswer, autoFillCorrectAnswers, questionData, isLegacyFormat]);
+    }, [userAnswer, autoFillCorrectAnswers, questionData, isLegacyFormat, correctAnswersMatrix]);
     // Handle answer change for specific placeholder index
     const handleAnswerChange = (index, value) => {
         if (isReviewMode)
@@ -90,26 +90,13 @@ export function FillInBlankClient({ questionData, onSubmit, isReviewMode = false
         setAnswers(newAnswers);
         onSubmit?.(newAnswers);
     };
-    // Check if answer at index is correct
+    // Check if answer at index is correct against any equivalent
     const isAnswerCorrect = (index, userInput) => {
-        let correctAnswer;
         if (isLegacyFormat && questionData.blanks?.[index]) {
-            correctAnswer = questionData.blanks[index].correctAnswer;
-        }
-        else if (questionData.answers?.[index]) {
-            correctAnswer = questionData.answers[index];
-        }
-        else {
-            return false;
-        }
-        const answer = userInput.trim();
-        const correct = correctAnswer.trim();
-        if (questionData.caseSensitive) {
-            return answer === correct;
-        }
-        else {
-            return answer.toLowerCase() === correct.toLowerCase();
+            const blank = questionData.blanks[index];
+            return isBlankInputCorrect(userInput, blank.correctAnswers ?? normalizeBlankAnswers(blank.correctAnswer));
         }
+        return isBlankInputCorrect(userInput, correctAnswersMatrix[index]);
     };
     // Calculate score
     const calculateScore = () => {
@@ -145,12 +132,10 @@ export function FillInBlankClient({ questionData, onSubmit, isReviewMode = false
     };
     /** Render inline blanks within question text (new format) */
     const renderQuestionWithBlanks = () => {
-        const question = questionData.question || '';
-        const parts = question.split(/(\{\d+\})/g);
-        return (_jsx("div", { className: "flex flex-wrap items-baseline gap-x-1.5 gap-y-2 leading-loose text-[15px]", children: parts.map((part, partIndex) => {
-                const match = part.match(/\{(\d+)\}/);
-                if (match) {
-                    const placeholderIndex = parseInt(match[1], 10);
+        const segments = parseFillBlankSegments(questionData.question || '');
+        return (_jsx("div", { className: "flex flex-wrap items-baseline gap-x-1.5 gap-y-2 leading-loose text-[15px]", children: segments.map((segment, partIndex) => {
+                if (segment.type === 'blank') {
+                    const placeholderIndex = segment.index;
                     const userInput = answers[placeholderIndex] || '';
                     const isCorrect = isReviewMode && isAnswerCorrect(placeholderIndex, userInput);
                     const isWrong = isReviewMode && userInput && !isCorrect;
@@ -162,9 +147,7 @@ export function FillInBlankClient({ questionData, onSubmit, isReviewMode = false
                                             : 'border-gray-200 bg-gray-50 text-gray-500'
                                     : 'border-orange-200 bg-white hover:border-orange-300 focus:border-orange-400 focus:ring-orange-200/50'), placeholder: "..." }), isReviewMode && (isCorrect || isWrong) && (_jsx("span", { className: cn('absolute -right-1.5 -top-1.5 flex h-4 w-4 items-center justify-center rounded-full shadow-sm ring-2 ring-white', isCorrect ? 'bg-emerald-500' : 'bg-red-500'), children: isCorrect ? (_jsx(Check, { className: "h-2.5 w-2.5 text-white" })) : (_jsx(X, { className: "h-2.5 w-2.5 text-white" })) }))] }, partIndex));
                 }
-                else {
-                    return (_jsx("span", { className: "text-slate-800 font-medium", children: part }, partIndex));
-                }
+                return (_jsx("span", { className: "text-slate-800 font-medium", children: segment.value }, partIndex));
             }) }));
     };
     /** Legacy format: render blanks array */
@@ -195,12 +178,6 @@ export function FillInBlankClient({ questionData, onSubmit, isReviewMode = false
         }
         return (_jsxs("div", { className: "rounded-xl border border-violet-200 bg-gradient-to-r from-violet-50/80 to-purple-50/50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-lg bg-violet-100 ring-1 ring-violet-200/60", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5 text-violet-600" }) }), _jsx("span", { className: "text-sm font-semibold text-violet-800", children: "G\u1EE3i \u00FD \u0111\u00E1p \u00E1n" })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: questionData.hints.map((hint, index) => (_jsx("span", { className: "inline-flex items-center rounded-full border border-violet-200 bg-white px-3 py-1 text-sm font-medium text-violet-700 shadow-sm transition-all hover:border-violet-300 hover:bg-violet-50 hover:shadow", children: hint }, index))) })] }));
     };
-    /** Case-sensitivity warning */
-    const renderCaseSensitiveNote = () => {
-        if (isReviewMode || !questionData.caseSensitive)
-            return null;
-        return (_jsxs("div", { className: "flex items-center gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50/50 px-4 py-3", children: [_jsx("div", { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 text-white shadow-sm", children: _jsx(Type, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { children: [_jsx("span", { className: "text-sm font-semibold text-amber-800", children: "Ph\u00E2n bi\u1EC7t hoa/th\u01B0\u1EDDng" }), _jsx("span", { className: "text-sm text-amber-700 ml-1", children: "\u2013 Vui l\u00F2ng nh\u1EADp \u0111\u00FAng ch\u1EEF hoa/th\u01B0\u1EDDng" })] })] }));
-    };
     /** Explanation card (review mode only) */
     const renderExplanation = () => {
         const explText = explanation || questionData.explanation;
@@ -231,9 +208,9 @@ export function FillInBlankClient({ questionData, onSubmit, isReviewMode = false
                                         ? 'bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200/60'
                                         : score.correct >= score.total / 2
                                             ? 'bg-yellow-100 text-yellow-700 ring-1 ring-yellow-200/60'
-                                            : 'bg-red-100 text-red-700 ring-1 ring-red-200/60'), children: [score.correct === score.total && _jsx(Check, { className: "h-3 w-3" }), score.correct, "/", score.total, " \u0111\u00FAng"] }))] }), _jsxs("div", { className: "p-5 space-y-4", children: [_jsx("div", { className: "rounded-xl bg-gradient-to-r from-orange-50/80 to-amber-50/50 p-5 border border-orange-100/80", children: renderQuestionWithBlanks() }), renderQuestionImage(), renderHints(), isReviewMode && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-white overflow-hidden shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-gray-100 bg-gradient-to-r from-slate-50 to-gray-50 px-4 py-2.5", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-slate-500 text-white", children: _jsx(ClipboardList, { className: "h-3 w-3" }) }), _jsx("h4", { className: "text-xs font-semibold text-gray-600 uppercase tracking-wider", children: "Chi ti\u1EBFt \u0111\u00E1p \u00E1n" })] }), _jsx("div", { className: "p-4 space-y-2.5", children: placeholderIndices.map((idx) => {
+                                            : 'bg-red-100 text-red-700 ring-1 ring-red-200/60'), children: [score.correct === score.total && _jsx(Check, { className: "h-3 w-3" }), score.correct, "/", score.total, " \u0111\u00FAng"] }))] }), _jsxs("div", { className: "p-5 space-y-4", children: [showAudio && cleanAudioUrl && (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-indigo-100 bg-gradient-to-r from-indigo-50 to-blue-50 p-3", children: [_jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-indigo-100", children: _jsx(Volume2, { className: "h-4 w-4 text-indigo-600" }) }), _jsx("audio", { controls: true, className: "h-9 w-full", src: audioPreviewUrl || cleanAudioUrl, preload: "metadata", children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." })] })), _jsx("div", { className: "rounded-xl bg-gradient-to-r from-orange-50/80 to-amber-50/50 p-5 border border-orange-100/80", children: renderQuestionWithBlanks() }), renderQuestionImage(), renderHints(), isReviewMode && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-white overflow-hidden shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-gray-100 bg-gradient-to-r from-slate-50 to-gray-50 px-4 py-2.5", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-slate-500 text-white", children: _jsx(ClipboardList, { className: "h-3 w-3" }) }), _jsx("h4", { className: "text-xs font-semibold text-gray-600 uppercase tracking-wider", children: "Chi ti\u1EBFt \u0111\u00E1p \u00E1n" })] }), _jsx("div", { className: "p-4 space-y-2.5", children: placeholderIndices.map((idx) => {
                                                 const userInput = answers[idx] || '';
-                                                const correctAnswer = questionData.answers?.[idx] || '';
+                                                const correctAnswer = formatBlankAnswersDisplay(correctAnswersMatrix[idx]) || '—';
                                                 const isCorrect = isAnswerCorrect(idx, userInput);
                                                 const hasInput = userInput.trim().length > 0;
                                                 return (_jsxs("div", { className: cn('rounded-lg border p-3 transition-colors', isCorrect
@@ -241,7 +218,7 @@ export function FillInBlankClient({ questionData, onSubmit, isReviewMode = false
                                                         : hasInput
                                                             ? 'border-red-200 bg-red-50/50'
                                                             : 'border-gray-100 bg-gray-50/50'), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-orange-100 text-xs font-bold text-orange-600 ring-1 ring-orange-200/60", children: idx + 1 }), _jsxs("span", { className: "text-sm text-gray-500", children: ["Ch\u1ED7 tr\u1ED1ng ", idx + 1] })] }), _jsx("div", { className: cn('flex items-center gap-1 text-xs font-semibold', isCorrect ? 'text-emerald-600' : hasInput ? 'text-red-600' : 'text-gray-400'), children: isCorrect ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "h-3.5 w-3.5" }), " \u0110\u00FAng"] })) : hasInput ? (_jsxs(_Fragment, { children: [_jsx(X, { className: "h-3.5 w-3.5" }), " Sai"] })) : ('Bỏ trống') })] }), _jsxs("div", { className: "mt-2 grid grid-cols-2 gap-2 text-sm", children: [_jsxs("div", { className: "flex items-center justify-between rounded-md bg-white px-3 py-2 border border-gray-100", children: [_jsx("span", { className: "text-gray-500 text-xs", children: "\u0110\u00E3 nh\u1EADp" }), _jsx("span", { className: cn('font-semibold', isCorrect ? 'text-emerald-600' : hasInput ? 'text-red-600' : 'text-gray-400 italic'), children: userInput || '—' })] }), _jsxs("div", { className: "flex items-center justify-between rounded-md bg-emerald-50 px-3 py-2 border border-emerald-100", children: [_jsx("span", { className: "text-gray-500 text-xs", children: "\u0110\u00E1p \u00E1n" }), _jsx("span", { className: "font-semibold text-emerald-600", children: correctAnswer })] })] })] }, idx));
-                                            }) })] })), !isReviewMode && !hasAnyAnswer && (_jsxs("div", { className: "rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3 flex items-center gap-2.5", children: [_jsx("div", { className: "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white", children: _jsx(AlertTriangle, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-sm text-amber-800", children: "Vui l\u00F2ng \u0111i\u1EC1n c\u00E2u tr\u1EA3 l\u1EDDi v\u00E0o c\u00E1c ch\u1ED7 tr\u1ED1ng" })] }))] })] }), renderCaseSensitiveNote(), renderExplanation()] }));
+                                            }) })] })), !isReviewMode && !hasAnyAnswer && (_jsxs("div", { className: "rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3 flex items-center gap-2.5", children: [_jsx("div", { className: "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white", children: _jsx(AlertTriangle, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-sm text-amber-800", children: "Vui l\u00F2ng \u0111i\u1EC1n c\u00E2u tr\u1EA3 l\u1EDDi v\u00E0o c\u00E1c ch\u1ED7 tr\u1ED1ng" })] }))] })] }), renderExplanation()] }));
     }
     // =====================================================
     //  LEGACY FORMAT RENDER
@@ -252,14 +229,14 @@ export function FillInBlankClient({ questionData, onSubmit, isReviewMode = false
                 const hasAnswered = userInput.trim() !== '';
                 return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all hover:shadow-md", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-amber-600 text-white shadow-sm", children: _jsx(PenLine, { className: "h-4 w-4" }) }), _jsxs("span", { className: "text-sm font-semibold text-gray-700", children: ["C\u00E2u ", index + 1, ": \u0110i\u1EC1n v\u00E0o ch\u1ED7 tr\u1ED1ng"] })] }), isReviewMode && hasAnswered && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-bold', isCorrect
                                         ? 'bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200/60'
-                                        : 'bg-red-100 text-red-700 ring-1 ring-red-200/60'), children: [isCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), isCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "p-5 space-y-4", children: [_jsx("div", { className: "rounded-xl bg-gradient-to-r from-orange-50/80 to-amber-50/50 p-5 border border-orange-100/80", children: renderLegacyBlank(blank.text, blank.id, index) }), index === 0 && renderQuestionImage(), index === 0 && renderHints(), isReviewMode && (_jsx("div", { className: cn('rounded-xl border p-3 transition-colors', isCorrect
+                                        : 'bg-red-100 text-red-700 ring-1 ring-red-200/60'), children: [isCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), isCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "p-5 space-y-4", children: [index === 0 && showAudio && cleanAudioUrl && (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-indigo-100 bg-gradient-to-r from-indigo-50 to-blue-50 p-3", children: [_jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-indigo-100", children: _jsx(Volume2, { className: "h-4 w-4 text-indigo-600" }) }), _jsx("audio", { controls: true, className: "h-9 w-full", src: audioPreviewUrl || cleanAudioUrl, preload: "metadata", children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." })] })), _jsx("div", { className: "rounded-xl bg-gradient-to-r from-orange-50/80 to-amber-50/50 p-5 border border-orange-100/80", children: renderLegacyBlank(blank.text, blank.id, index) }), index === 0 && renderQuestionImage(), index === 0 && renderHints(), isReviewMode && (_jsx("div", { className: cn('rounded-xl border p-3 transition-colors', isCorrect
                                         ? 'border-emerald-200 bg-emerald-50/50'
                                         : hasAnswered
                                             ? 'border-red-200 bg-red-50/50'
-                                            : 'border-gray-100 bg-gray-50/50'), children: _jsxs("div", { className: "space-y-2.5", children: [_jsxs("div", { className: "flex items-center justify-between rounded-md bg-white p-3 border border-gray-100", children: [_jsx("span", { className: "text-sm text-gray-500", children: "\u0110\u00E3 nh\u1EADp:" }), _jsx("span", { className: cn('text-sm font-semibold', isCorrect ? 'text-emerald-600' : hasAnswered ? 'text-red-600' : 'text-gray-400 italic'), children: userInput || '—' })] }), _jsxs("div", { className: "flex items-center justify-between rounded-md bg-emerald-50 p-3 border border-emerald-100", children: [_jsx("span", { className: "text-sm text-gray-500", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng:" }), _jsx("span", { className: "text-sm font-semibold text-emerald-600", children: blank.correctAnswer })] }), _jsxs("div", { className: cn('flex items-center justify-between rounded-md p-3 border', isCorrect
+                                            : 'border-gray-100 bg-gray-50/50'), children: _jsxs("div", { className: "space-y-2.5", children: [_jsxs("div", { className: "flex items-center justify-between rounded-md bg-white p-3 border border-gray-100", children: [_jsx("span", { className: "text-sm text-gray-500", children: "\u0110\u00E3 nh\u1EADp:" }), _jsx("span", { className: cn('text-sm font-semibold', isCorrect ? 'text-emerald-600' : hasAnswered ? 'text-red-600' : 'text-gray-400 italic'), children: userInput || '—' })] }), _jsxs("div", { className: "flex items-center justify-between rounded-md bg-emerald-50 p-3 border border-emerald-100", children: [_jsx("span", { className: "text-sm text-gray-500", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng:" }), _jsx("span", { className: "text-sm font-semibold text-emerald-600", children: formatBlankAnswersDisplay(blank.correctAnswers ?? normalizeBlankAnswers(blank.correctAnswer)) || '—' })] }), _jsxs("div", { className: cn('flex items-center justify-between rounded-md p-3 border', isCorrect
                                                     ? 'bg-emerald-50 border-emerald-200'
                                                     : 'bg-red-50 border-red-200'), children: [_jsx("span", { className: "text-sm text-gray-500", children: "K\u1EBFt qu\u1EA3:" }), _jsx("div", { className: cn('flex items-center gap-1.5 text-sm font-bold', isCorrect ? 'text-emerald-600' : 'text-red-600'), children: isCorrect ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "h-4 w-4" }), " Ch\u00EDnh x\u00E1c"] })) : (_jsxs(_Fragment, { children: [_jsx(X, { className: "h-4 w-4" }), " Sai"] })) })] })] }) })), !isReviewMode && !hasAnswered && (_jsxs("div", { className: "rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3 flex items-center gap-2.5", children: [_jsx("div", { className: "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white", children: _jsx(AlertTriangle, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-sm text-amber-800", children: "Vui l\u00F2ng \u0111i\u1EC1n c\u00E2u tr\u1EA3 l\u1EDDi" })] }))] })] }, blank.id));
-            }), renderCaseSensitiveNote(), isReviewMode && score && (questionData.blanks?.length || 0) > 1 && (_jsx("div", { className: cn('overflow-hidden rounded-xl border shadow-sm', score.correct === score.total
+            }), isReviewMode && score && (questionData.blanks?.length || 0) > 1 && (_jsx("div", { className: cn('overflow-hidden rounded-xl border shadow-sm', score.correct === score.total
                     ? 'border-emerald-200 bg-gradient-to-r from-emerald-50 to-green-50'
                     : score.correct >= score.total / 2
                         ? 'border-yellow-200 bg-gradient-to-r from-yellow-50 to-amber-50'