@tinyweb_dev/oe-exam-sdk 0.2.6 → 0.2.8

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

@@ -26,6 +26,7 @@ export const transformChooseTheCorrectAnswerGroup = (question) => {
         }));
         const correctAnswer = item.correctAnswer || options[0]?.id || 'opt-1';
         const imageUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(item.imageUrl));
+        const audioUrl = typeof item.audioUrl === 'string' ? item.audioUrl.trim() : '';
         return {
             questionType: CHILD_QUESTION_TYPE,
             ...(item.isExample ? { isExample: true } : {}),
@@ -34,6 +35,7 @@ export const transformChooseTheCorrectAnswerGroup = (question) => {
                 options,
                 optionType: item.optionType || 'text',
                 ...(imageUrl !== undefined ? { imageUrl } : {}),
+                ...(audioUrl ? { audioUrl } : {}),
             },
             correctAnswer: { answer: correctAnswer },
             points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
@@ -46,6 +48,9 @@ export const transformChooseTheCorrectAnswerGroup = (question) => {
     if (answerData?.passage && answerData.passage.trim()) {
         meta.passage = answerData.passage.trim();
     }
+    if (answerData?.audioUrl && answerData.audioUrl.trim()) {
+        meta.audioUrl = answerData.audioUrl.trim();
+    }
     return {
         apiContent: {
             meta,

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'