@tinyweb_dev/oe-exam-sdk 1.0.12 → 1.0.14

package/dist/components/questions/types/spontaneous-qa-group/SpontaneousQaGroupClient.js

@@ -1,9 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { Lightbulb, Mic, Square, Volume2 } from 'lucide-react';
+import { Mic, Volume2 } from 'lucide-react';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-import { KidInstruction, KidPrompt, KidQuestionCard } from '../../_shared/components/compact';
+import { KidInstruction, KidPrompt, KidQuestionCard, SpeakingReplyMic, } from '../../_shared/components/compact';
 function QuestionAudio({ url }) {
     const { previewUrl, isLoading } = usePresignedFileUrl(url);
     const src = previewUrl ||
@@ -34,78 +33,6 @@ function findGradeDetail(details, flattenIndex) {
         item.itemId === `item-${flattenIndex}` ||
         item.itemId === `item-${flattenIndex + 1}`));
 }
-function SpeakingReplyMic({ flattenIndex, audioKey, disabled, uploading, onRecorded, }) {
-    const [status, setStatus] = useState('idle');
-    const [error, setError] = useState('');
-    const [blobUrl, setBlobUrl] = useState('');
-    const recorderRef = useRef(null);
-    const chunksRef = useRef([]);
-    const streamRef = useRef(null);
-    useEffect(() => {
-        return () => {
-            recorderRef.current?.stop();
-            streamRef.current?.getTracks().forEach((track) => track.stop());
-            if (blobUrl) {
-                URL.revokeObjectURL(blobUrl);
-            }
-        };
-    }, [blobUrl]);
-    const stopStream = () => {
-        streamRef.current?.getTracks().forEach((track) => track.stop());
-        streamRef.current = null;
-    };
-    const startRecording = async () => {
-        if (disabled || uploading || !onRecorded) {
-            return;
-        }
-        setError('');
-        try {
-            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-            streamRef.current = stream;
-            chunksRef.current = [];
-            const recorder = new MediaRecorder(stream);
-            recorderRef.current = recorder;
-            recorder.ondataavailable = (event) => {
-                if (event.data.size > 0) {
-                    chunksRef.current.push(event.data);
-                }
-            };
-            recorder.onstop = () => {
-                const blob = new Blob(chunksRef.current, { type: recorder.mimeType || 'audio/webm' });
-                setBlobUrl((current) => {
-                    if (current) {
-                        URL.revokeObjectURL(current);
-                    }
-                    return URL.createObjectURL(blob);
-                });
-                setStatus('recorded');
-                stopStream();
-                onRecorded(flattenIndex, blob);
-            };
-            recorder.start();
-            setStatus('recording');
-        }
-        catch {
-            setError('Không thể mở microphone. Hãy cho phép quyền ghi âm.');
-            stopStream();
-        }
-    };
-    const stopRecording = () => {
-        if (recorderRef.current && recorderRef.current.state !== 'inactive') {
-            recorderRef.current.stop();
-        }
-    };
-    const canRecord = Boolean(onRecorded) && !disabled && !uploading;
-    return (_jsxs("div", { className: "flex flex-col items-center gap-2 rounded-lg border border-dashed border-indigo-200 bg-indigo-50/60 px-4 py-3", children: [canRecord ? (_jsx("button", { type: "button", onClick: status === 'recording' ? stopRecording : startRecording, title: status === 'recording' ? 'Dừng ghi âm' : 'Nhấn micro để trả lời', className: `inline-flex h-12 w-12 items-center justify-center rounded-full text-white shadow-sm transition-colors ${status === 'recording'
-                    ? 'animate-pulse bg-red-500 hover:bg-red-600'
-                    : 'bg-indigo-600 hover:bg-indigo-700'}`, children: status === 'recording' ? _jsx(Square, { className: "h-4 w-4 fill-current" }) : _jsx(Mic, { className: "h-5 w-5" }) })) : (_jsx("div", { className: "inline-flex h-12 w-12 items-center justify-center rounded-full bg-slate-300 text-white", children: _jsx(Mic, { className: "h-5 w-5" }) })), _jsx("p", { className: "text-center text-xs text-indigo-700", children: uploading
-                    ? 'Đang tải lên bản ghi...'
-                    : status === 'recording'
-                        ? 'Đang ghi âm... Nhấn để dừng'
-                        : audioKey || status === 'recorded'
-                            ? 'Đã ghi. Nhấn micro để ghi lại'
-                            : 'Nhấn micro để trả lời bằng giọng nói' }), error && _jsx("p", { className: "text-center text-xs text-red-600", children: error }), audioKey ? (_jsx("div", { className: "w-full max-w-sm", children: _jsx(QuestionAudio, { url: audioKey }) })) : status === 'recorded' && blobUrl ? (_jsx("audio", { controls: true, src: blobUrl, className: "h-8 w-full max-w-sm", preload: "metadata", children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." })) : null] }));
-}
 export function SpontaneousQaGroupClient({ questionData, isReviewMode = false, userAnswer, onItemRecorded, uploadingIndex = null, gradeDetails, disabled = false, }) {
     const parts = questionData.parts || [];
     const audioKeys = Array.isArray(userAnswer?.audioKeys) ? userAnswer.audioKeys : [];
@@ -117,12 +44,20 @@ export function SpontaneousQaGroupClient({ questionData, isReviewMode = false, u
                         const detail = findGradeDetail(gradeDetails, currentIndex);
                         const grade = readGradeUser(detail);
                         const showMic = !isReviewMode && !question.isExample;
-                        return (_jsxs(KidQuestionCard, { title: `Câu ${question.questionNumber || questionIndex + 1}`, points: detail?.partialScore != null ? undefined : (question.points || 0), isExample: question.isExample, headerExtra: detail?.partialScore != null ? (_jsxs("span", { className: "text-xs text-gray-500", children: [detail.partialScore, " / ", question.points || 0, " \u0111i\u1EC3m"] })) : undefined, children: [_jsx(KidPrompt, { children: question.questionText || 'Câu hỏi chưa được nhập' }), question.audioUrl ? _jsx(QuestionAudio, { url: question.audioUrl }) : null, showMic && (_jsx(SpeakingReplyMic, { flattenIndex: currentIndex, audioKey: typeof audioKey === 'string' ? audioKey : null, disabled: disabled, uploading: uploadingIndex === currentIndex, onRecorded: onItemRecorded })), detail && !question.isExample && (_jsxs("div", { className: "space-y-1 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-xs text-slate-700", children: [grade.transcript && (_jsxs("p", { children: [_jsx("span", { className: "font-semibold", children: "Transcript:" }), " ", grade.transcript] })), (grade.contentScore != null || grade.pronunciationScore != null || grade.fluencyScore != null) && (_jsx("p", { children: [
-                                                grade.contentScore != null ? `Content ${Math.round(grade.contentScore)}` : null,
-                                                grade.pronunciationScore != null ? `Pronunciation ${Math.round(grade.pronunciationScore)}` : null,
-                                                grade.fluencyScore != null ? `Fluency ${Math.round(grade.fluencyScore)}` : null,
-                                            ].filter(Boolean).join(' · ') })), grade.feedback && _jsx("p", { children: grade.feedback })] })), isReviewMode && question.expectedAnswers.filter((item) => item.trim() !== '').length > 0 && (_jsxs("div", { className: "rounded-lg border border-amber-100 bg-amber-50 px-3 py-2", children: [_jsxs("div", { className: "mb-1 flex items-center gap-1 text-xs font-semibold text-amber-700", children: [_jsx(Lightbulb, { className: "h-3 w-3" }), "\u0110\u00E1p \u00E1n m\u1EABu"] }), _jsx("ul", { className: "list-disc space-y-1 pl-4 text-xs text-amber-800", children: question.expectedAnswers
-                                                .filter((item) => item.trim() !== '')
-                                                .map((item) => (_jsx("li", { children: item }, item))) })] }))] }, `${part.partNumber}-${question.questionNumber}-${questionIndex}`));
+                        const itemNumber = question.questionNumber || questionIndex + 1;
+                        const scoreLabel = detail?.partialScore != null
+                            ? `${detail.partialScore} / ${question.points || 0}`
+                            : null;
+                        if (isReviewMode) {
+                            return (_jsxs("div", { className: "flex items-start gap-3 rounded-lg border border-slate-200 bg-white px-3 py-2.5", children: [_jsx("span", { className: "mt-0.5 w-6 shrink-0 text-sm font-extrabold text-sky-800", children: itemNumber }), _jsxs("div", { className: "min-w-0 flex-1 space-y-1.5", children: [_jsx("p", { className: "text-sm font-medium leading-snug text-slate-800", children: question.questionText || 'Câu hỏi chưa được nhập' }), question.audioUrl ? _jsx(QuestionAudio, { url: question.audioUrl }) : null, detail && !question.isExample ? (_jsx("p", { className: "line-clamp-2 text-xs text-slate-600", children: [
+                                                    grade.feedback,
+                                                    grade.contentScore != null
+                                                        ? `Content ${Math.round(grade.contentScore)}`
+                                                        : null,
+                                                ]
+                                                    .filter(Boolean)
+                                                    .join(' · ') })) : null] }), scoreLabel ? (_jsx("span", { className: "shrink-0 text-xs font-semibold text-slate-500", children: scoreLabel })) : null] }, `${part.partNumber}-${question.questionNumber}-${questionIndex}`));
+                        }
+                        return (_jsxs(KidQuestionCard, { title: `Câu ${itemNumber}`, points: detail?.partialScore != null ? undefined : (question.points || 0), isExample: question.isExample, headerExtra: detail?.partialScore != null ? (_jsxs("span", { className: "text-xs text-gray-500", children: [detail.partialScore, " / ", question.points || 0, " \u0111i\u1EC3m"] })) : undefined, children: [_jsx(KidPrompt, { children: question.questionText || 'Câu hỏi chưa được nhập' }), question.audioUrl ? _jsx(QuestionAudio, { url: question.audioUrl }) : null, showMic && (_jsx(SpeakingReplyMic, { flattenIndex: currentIndex, audioKey: typeof audioKey === 'string' ? audioKey : null, disabled: disabled, uploading: uploadingIndex === currentIndex, onRecorded: onItemRecorded }))] }, `${part.partNumber}-${question.questionNumber}-${questionIndex}`));
                     })] }, `part-${part.partNumber}-${partIndex}`)))] }));
 }

package/dist/components/questions/types/true-false-correct-group/TrueFalseCorrectGroupClient.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Lightbulb } from 'lucide-react';
-import { KidChoiceRow, KidInstruction, KidPrompt, KidQuestionCard } from '../../_shared/components/compact';
+import { KidChoiceRow, KidInstruction, KidPrompt, KidQuestionCard, reviewItemPoints, reviewItemTitle } from '../../_shared/components/compact';
 function emptyAnswer() {
     return { isTrue: null, correction: '' };
 }
@@ -25,7 +25,7 @@ export function TrueFalseCorrectGroupClient({ questionData, isReviewMode = false
                 const showStudentCorrection = userValue?.isTrue === false || (isReviewMode && !correctIsTrue);
                 const hasAnswered = userValue?.isTrue === true || userValue?.isTrue === false;
                 const isAnswerCorrect = userValue?.isTrue === correctIsTrue;
-                return (_jsxs(KidQuestionCard, { title: `Câu ${item.questionNumber || itemIndex + 1}`, points: item.points || 0, isExample: item.isExample, review: isReviewMode && !item.isExample && hasAnswered
+                return (_jsxs(KidQuestionCard, { title: reviewItemTitle(item.questionNumber || itemIndex + 1, isReviewMode, `Câu ${item.questionNumber || itemIndex + 1}`), points: reviewItemPoints(isReviewMode, item.points || 0), isExample: item.isExample, review: isReviewMode && !item.isExample && hasAnswered
                         ? (isAnswerCorrect ? 'correct' : 'wrong')
                         : null, children: [_jsx(KidPrompt, { children: item.question || 'Câu hỏi chưa được nhập' }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(KidChoiceRow, { letter: "T", selected: userValue?.isTrue === true, isReviewMode: isReviewMode, isCorrect: isReviewMode && correctIsTrue, disabled: !canSelect, onClick: canSelect
                                         ? () => emit(itemIndex, {

package/dist/components/questions/types/true-false-group/TrueFalseGroupClient.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Lightbulb } from 'lucide-react';
-import { KidChoiceRow, KidInstruction, KidPrompt, KidQuestionCard } from '../../_shared/components/compact';
+import { KidChoiceRow, KidInstruction, KidPrompt, KidQuestionCard, reviewItemPoints, reviewItemTitle } from '../../_shared/components/compact';
 export function TrueFalseGroupClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, }) {
     const items = questionData.items || [];
     const handleSelect = (itemIndex, value) => {
@@ -19,7 +19,7 @@ export function TrueFalseGroupClient({ questionData, isReviewMode = false, userA
                 const canSelect = !isReviewMode && !item.isExample && Boolean(onAnswerChange);
                 const hasAnswered = userValue !== undefined;
                 const isAnswerCorrect = userValue === correctAnswer;
-                return (_jsxs(KidQuestionCard, { title: `Câu ${item.questionNumber || itemIndex + 1}`, points: item.points || 0, isExample: item.isExample, review: isReviewMode && !item.isExample && hasAnswered
+                return (_jsxs(KidQuestionCard, { title: reviewItemTitle(item.questionNumber || itemIndex + 1, isReviewMode, `Câu ${item.questionNumber || itemIndex + 1}`), points: reviewItemPoints(isReviewMode, item.points || 0), isExample: item.isExample, review: isReviewMode && !item.isExample && hasAnswered
                         ? (isAnswerCorrect ? 'correct' : 'wrong')
                         : null, children: [_jsx(KidPrompt, { children: item.question || 'Câu hỏi chưa được nhập' }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(KidChoiceRow, { letter: "T", selected: userValue === true, isReviewMode: isReviewMode, isCorrect: isReviewMode && correctAnswer === true, disabled: !canSelect, onClick: canSelect ? () => handleSelect(itemIndex, true) : undefined, children: "\u0110\u00FAng" }), _jsx(KidChoiceRow, { letter: "F", selected: userValue === false, isReviewMode: isReviewMode, isCorrect: isReviewMode && correctAnswer === false, disabled: !canSelect, onClick: canSelect ? () => handleSelect(itemIndex, false) : undefined, children: "Sai" })] })] }, `${item.questionNumber}-${itemIndex}`));
             }), isReviewMode && questionData.explanation && (_jsxs("div", { className: "flex items-start gap-2 rounded-xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-800", children: [_jsx(Lightbulb, { className: "mt-0.5 h-4 w-4 flex-shrink-0" }), questionData.explanation] }))] }));

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

@@ -2,11 +2,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { Check, X, Library } from 'lucide-react';
+import { useT } from '../../../../shared/lib/i18n';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { toMediaUrlList } from '../../../../shared/lib/utils/media-urls';
 import { cn } from '../../../../shared/lib/utils';
 import { KidPrompt, KidQuestionCard } from '../../_shared/components/compact';
 import { detectWfsfBankMode, isOptionsWordEntry, normalizeSharedWordBank, } from './wfsf-word-bank.utils';
 import { expandWfsfCorrectAlts, formatWfsfCorrectLabel, isWfsfBlankCorrect, primaryWfsfAnswers, } from '../../../../shared/lib/utils/wfsf-blank-match';
+function wfsfFilledText(value) {
+    if (Array.isArray(value))
+        return String(value[0] ?? '');
+    return value == null ? '' : String(value);
+}
 function normalizeWfsfBlankStyle(raw) {
     const v = String(raw || '').toLowerCase();
     if (v === 'letter' || v === 'box')
@@ -61,28 +68,14 @@ function ClientAudioItem({ url }) {
         return null;
     return (_jsx("div", { className: "w-full max-w-md", children: _jsx("audio", { controls: true, src: src, className: "w-full h-10 rounded-md" }) }));
 }
-const DEFAULT_WFSF_HEADER = 'Điền từ vào biểu mẫu có cấu trúc';
 export function WordFillStructuredFormClient({ questionData, isReviewMode = false, userAnswer, onAnswerChange, autoFillCorrectAnswers = false, instruction, questionNumber, explanation, }) {
     const { title = '', content = '', answers = {}, caseSensitive = false, blankStyle: rawBlankStyle, viewMode, wordBank = [], instruction: dataInstruction, } = questionData;
+    const t = useT();
     const blankStyle = normalizeWfsfBlankStyle(rawBlankStyle);
     const isLetterBlank = blankStyle === 'letter';
     const isPhraseBlank = blankStyle === 'phrase' || blankStyle === 'translate';
-    const allImages = useMemo(() => {
-        if (Array.isArray(questionData.imageUrls) && questionData.imageUrls.length > 0) {
-            return questionData.imageUrls.filter(Boolean);
-        }
-        if (questionData.imageUrl)
-            return [questionData.imageUrl];
-        return [];
-    }, [questionData.imageUrls, questionData.imageUrl]);
-    const allAudios = useMemo(() => {
-        if (Array.isArray(questionData.audioUrls) && questionData.audioUrls.length > 0) {
-            return questionData.audioUrls.filter(Boolean);
-        }
-        if (questionData.audioUrl)
-            return [questionData.audioUrl];
-        return [];
-    }, [questionData.audioUrls, questionData.audioUrl]);
+    const allImages = useMemo(() => toMediaUrlList(questionData.imageUrls?.length ? questionData.imageUrls : questionData.imageUrl), [questionData.imageUrls, questionData.imageUrl]);
+    const allAudios = useMemo(() => toMediaUrlList(questionData.audioUrls?.length ? questionData.audioUrls : questionData.audioUrl), [questionData.audioUrls, questionData.audioUrl]);
     const [filledAnswers, setFilledAnswers] = useState(() => {
         if (userAnswer)
             return { ...userAnswer };
@@ -133,16 +126,18 @@ export function WordFillStructuredFormClient({ questionData, isReviewMode = fals
             return a.localeCompare(b);
         });
     }, [content]);
-    const allFilled = expectedBlankKeys.every(k => filledAnswers[k]?.trim());
-    const isAllCorrect = isReviewMode && expectedBlankKeys.every((k) => isWfsfBlankCorrect(filledAnswers[k] || '', answers[k], caseSensitive));
+    const allFilled = expectedBlankKeys.every((k) => wfsfFilledText(filledAnswers[k]).trim());
+    const isAllCorrect = isReviewMode && expectedBlankKeys.every((k) => isWfsfBlankCorrect(wfsfFilledText(filledAnswers[k]), answers[k], caseSensitive));
     // Header = page rubric. Pearson preview maps draft.instruction → explanation.
     const rawExplanation = String(explanation || questionData.explanation || '').trim();
     const headerInstruction = String(instruction || dataInstruction || rawExplanation || '').trim();
     // Header reads "Bài x: rubric" — the question type name is never shown.
-    const numberLabel = typeof questionNumber === 'number' && questionNumber > 0
-        ? `Bài ${questionNumber}`
+    const numberLabel = !isReviewMode &&
+        typeof questionNumber === 'number' &&
+        questionNumber > 0
+        ? t('question.viewer.partN', { n: questionNumber })
         : '';
-    const headerTitle = numberLabel ? (_jsxs(_Fragment, { children: [_jsxs("strong", { className: "font-bold", children: [numberLabel, headerInstruction ? ':' : ''] }), headerInstruction ? ` ${headerInstruction}` : ''] })) : (headerInstruction || DEFAULT_WFSF_HEADER);
+    const headerTitle = numberLabel ? (_jsxs(_Fragment, { children: [_jsxs("strong", { className: "font-bold", children: [numberLabel, headerInstruction ? ':' : ''] }), headerInstruction ? ` ${headerInstruction}` : ''] })) : (headerInstruction || t('question.viewer.wfsfDefaultTitle'));
     // Do not re-show the same rubric under "Giải thích".
     const displayExplanation = rawExplanation && rawExplanation !== headerInstruction ? rawExplanation : '';
     const handleInputChange = useCallback((key, value) => {
@@ -159,7 +154,7 @@ export function WordFillStructuredFormClient({ questionData, isReviewMode = fals
         setExpandedBlank(null);
     }, [isReviewMode, onAnswerChange]);
     const renderBlank = useCallback((key, reactKey) => {
-        const filled = filledAnswers[key] || '';
+        const filled = wfsfFilledText(filledAnswers[key]);
         const isCorrectFill = isReviewMode && isWfsfBlankCorrect(filled, answers[key], caseSensitive);
         const isWrongFill = isReviewMode && !!filled && !isCorrectFill;
         const blankOptions = optionsByKey.get(key);

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

@@ -15,6 +15,7 @@ import { Textarea } from '../../../../components/ui/textarea';
 import { Switch } from '../../../../components/ui/switch';
 import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
 import { CompactCreatorHeader, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
+import { toMediaUrlList } from '../../../../shared/lib/utils/media-urls';
 import { FileUpload } from '../../../../components/ui/file-upload';
 import { ImagePreview } from '../../../../components/ui/image-preview';
 import { WordFillStructuredFormClient } from './WordFillStructuredFormClient';
@@ -141,14 +142,7 @@ export function WordFillStructuredFormCreator({ initialData, onSave, onCancel, o
     const [explanation, setExplanation] = useState(initialData?.explanation || '');
     const [blankStyle, setBlankStyle] = useState(initialData?.blankStyle ?? 'word');
     // ── Multiple Images & Audios ────────────────────────────────────────────────
-    const [imageUrls, setImageUrls] = useState(() => {
-        if (Array.isArray(initialData?.imageUrls) && initialData.imageUrls.length > 0) {
-            return initialData.imageUrls.filter(Boolean);
-        }
-        if (initialData?.imageUrl)
-            return [initialData.imageUrl];
-        return [];
-    });
+    const [imageUrls, setImageUrls] = useState(() => toMediaUrlList(initialData?.imageUrls?.length ? initialData.imageUrls : initialData?.imageUrl));
     const [audioUrls, setAudioUrls] = useState(() => {
         if (Array.isArray(initialData?.audioUrls) && initialData.audioUrls.length > 0) {
             return initialData.audioUrls.filter(Boolean);

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

@@ -1,3 +1,4 @@
+import { toMediaUrlList } from '../../../../shared/lib/utils/media-urls';
 import { normalizeWfsfAnswersMap } from '../../../../shared/lib/utils/wfsf-blank-match';
 import { detectWfsfBankMode, normalizeOptionsWordBank, normalizeSharedWordBank, } from './wfsf-word-bank.utils';
 function asRecord(value) {
@@ -79,19 +80,11 @@ export function mapQuestionToWfsfData(question) {
             ? normalizeOptionsWordBank(rawWordBank, blankKeys)
             : undefined;
     const groupPayload = asRecord(asRecord(source.questionGroup).payload);
-    const rawImageUrls = apiContent.imageUrls || answer.imageUrls;
-    const imageUrls = Array.isArray(rawImageUrls)
-        ? rawImageUrls.filter(Boolean)
-        : (apiContent.imageUrl || answer.imageUrl ? [String(apiContent.imageUrl || answer.imageUrl)] : []);
-    const rawAudioUrls = apiContent.audioUrls || answer.audioUrls;
-    const audioUrls = Array.isArray(rawAudioUrls)
-        ? rawAudioUrls.filter(Boolean)
-        : (apiContent.audioUrl || answer.audioUrl || source.audio_url
-            ? [String(apiContent.audioUrl || answer.audioUrl || source.audio_url)]
-            : []);
+    const imageUrls = toMediaUrlList(apiContent.imageUrls || answer.imageUrls || apiContent.imageUrl || answer.imageUrl);
+    const audioUrls = toMediaUrlList(apiContent.audioUrls || answer.audioUrls || apiContent.audioUrl || answer.audioUrl || source.audio_url);
     return {
         title: String(apiContent.title || answer.title || ''),
-        imageUrl: imageUrls[0] || String(apiContent.imageUrl || answer.imageUrl || ''),
+        imageUrl: imageUrls[0] || '',
         imageUrls,
         audioUrl: audioUrls[0] || String(apiContent.audioUrl || answer.audioUrl || source.audio_url || ''),
         audioUrls,

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

@@ -1,3 +1,4 @@
+import { toMediaUrlList } from '../../../../shared/lib/utils/media-urls';
 import { compactWfsfAnswersMap } from '../../../../shared/lib/utils/wfsf-blank-match';
 /**
  * Transform WORD_FILL_STRUCTURED_FORM creator data → API format
@@ -19,17 +20,11 @@ export const transformWordFillStructuredForm = (question) => {
         answerData.groupSubtitle ||
         answerData.groupContent ||
         answerData.groupImageUrl);
-    const rawImageUrls = answerData.imageUrls;
-    const imageUrls = Array.isArray(rawImageUrls)
-        ? rawImageUrls.filter(Boolean)
-        : (answerData.imageUrl ? [answerData.imageUrl] : []);
-    const rawAudioUrls = answerData.audioUrls;
-    const audioUrls = Array.isArray(rawAudioUrls)
-        ? rawAudioUrls.filter(Boolean)
-        : (answerData.audioUrl ? [answerData.audioUrl] : []);
+    const imageUrls = toMediaUrlList(answerData.imageUrls ?? answerData.imageUrl);
+    const audioUrls = toMediaUrlList(answerData.audioUrls ?? answerData.audioUrl);
     const apiContent = {
         title: answerData.title || '',
-        imageUrl: imageUrls[0] || answerData.imageUrl || '',
+        imageUrl: imageUrls[0] || '',
         imageUrls,
         audioUrl: audioUrls[0] || answerData.audioUrl || '',
         audioUrls,

package/dist/components/questions/types/word-order-and-match-group/WordOrderAndMatchGroupClient.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useCallback } from 'react';
 import { X, RotateCcw } from 'lucide-react';
 import { cn } from '../../../../shared/lib/utils';
-import { KidInstruction, KidQuestionCard } from '../../_shared/components/compact';
+import { KidInstruction, KidQuestionCard, reviewItemPoints, reviewItemTitle } from '../../_shared/components/compact';
 export function WordOrderAndMatchGroupClient({ questionData, isReviewMode = false, userAnswers, onAnswerChange, }) {
     const { instruction, matchOptions = ['A', 'B', 'C', 'D', 'E', 'F'], items = [] } = questionData;
     // Initialize interactive state for each item
@@ -152,7 +152,9 @@ export function WordOrderAndMatchGroupClient({ questionData, isReviewMode = fals
                     const isPhraseCorrect = normalizeStr(userPhrase) === normalizeStr(item.orderedPhrase || '');
                     const isLabelCorrect = (userLabel || '').trim().toUpperCase() === (item.matchLabel || '').trim().toUpperCase();
                     const isItemAllCorrect = isPhraseCorrect && isLabelCorrect;
-                    return (_jsx(KidQuestionCard, { title: isExample ? 'Ví dụ (Example)' : `Câu ${item.questionNumber || itemIdx + 1}`, points: !isExample && typeof item.points === 'number' ? item.points : undefined, isExample: isExample, review: isReviewMode && !isExample ? (isItemAllCorrect ? 'correct' : 'wrong') : null, children: _jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-12", children: [_jsxs("div", { className: "space-y-3 lg:col-span-8 xl:col-span-9", children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider", children: "1. S\u1EAFp x\u1EBFp c\u00E1c t\u1EEB th\u00E0nh c\u00E2u ho\u00E0n ch\u1EC9nh:" }), _jsxs("div", { className: cn('min-h-[52px] rounded-xl border-2 border-dashed p-2.5 transition-colors flex flex-wrap items-center gap-1.5', state.placedIndices.length > 0
+                    return (_jsx(KidQuestionCard, { title: isExample
+                            ? 'Ví dụ (Example)'
+                            : reviewItemTitle(item.questionNumber || itemIdx + 1, isReviewMode, `Câu ${item.questionNumber || itemIdx + 1}`), points: reviewItemPoints(isReviewMode, !isExample && typeof item.points === 'number' ? item.points : undefined), isExample: isExample, review: isReviewMode && !isExample ? (isItemAllCorrect ? 'correct' : 'wrong') : null, children: _jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-12", children: [_jsxs("div", { className: "space-y-3 lg:col-span-8 xl:col-span-9", children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider", children: "1. S\u1EAFp x\u1EBFp c\u00E1c t\u1EEB th\u00E0nh c\u00E2u ho\u00E0n ch\u1EC9nh:" }), _jsxs("div", { className: cn('min-h-[52px] rounded-xl border-2 border-dashed p-2.5 transition-colors flex flex-wrap items-center gap-1.5', state.placedIndices.length > 0
                                                 ? 'border-blue-300 bg-blue-50/40'
                                                 : 'border-gray-300 bg-gray-50/60'), children: [state.placedIndices.length === 0 ? (_jsx("span", { className: "text-xs italic text-gray-400 select-none", children: "Nh\u1EA5n v\u00E0o c\u00E1c t\u1EEB b\u00EAn d\u01B0\u1EDBi \u0111\u1EC3 gh\u00E9p c\u00E2u..." })) : (state.placedIndices.map((wordIdx, orderIdx) => {
                                                     const word = item.scrambledWords[wordIdx];

package/dist/components/questions/types/word-ordering-group/WordOrderingGroupClient.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Lightbulb } from 'lucide-react';
 import { WordOrderingClient } from '../word-ordering/WordOrderingClient';
-import { KidInstruction, KidQuestionCard } from '../../_shared/components/compact';
+import { KidInstruction, KidQuestionCard, reviewItemPoints, reviewItemTitle } from '../../_shared/components/compact';
 export function WordOrderingGroupClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, }) {
     const items = questionData.items || [];
     const handleItemSubmit = (itemIndex, ordered) => {
@@ -17,7 +17,7 @@ export function WordOrderingGroupClient({ questionData, isReviewMode = false, us
         });
         onAnswerChange(next);
     };
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx(KidInstruction, { children: questionData.instruction }), items.map((item, itemIndex) => (_jsx(KidQuestionCard, { title: `Câu ${item.questionNumber || itemIndex + 1}`, points: item.points || 0, isExample: item.isExample, children: _jsx(WordOrderingClient, { questionData: {
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(KidInstruction, { children: questionData.instruction }), items.map((item, itemIndex) => (_jsx(KidQuestionCard, { title: reviewItemTitle(item.questionNumber || itemIndex + 1, isReviewMode, `Câu ${item.questionNumber || itemIndex + 1}`), points: reviewItemPoints(isReviewMode, item.points || 0), isExample: item.isExample, children: _jsx(WordOrderingClient, { questionData: {
                         words: item.words,
                         answer: item.answer,
                         isExample: item.isExample,

package/dist/components/questions/viewer/QuestionViewer.d.ts

@@ -12,6 +12,8 @@ interface QuestionViewerProps {
         partialScore?: number;
         feedback?: string;
     }>;
+    onItemRecorded?: (flattenIndex: number, blob: Blob) => void;
+    uploadingIndex?: number | null;
 }
-export declare function QuestionViewer({ question, onSubmitAnswer, isReviewMode, userAnswer, gradeDetails, }: QuestionViewerProps): import("react").JSX.Element;
+export declare function QuestionViewer({ question, onSubmitAnswer, isReviewMode, userAnswer, gradeDetails, onItemRecorded, uploadingIndex, }: QuestionViewerProps): import("react").JSX.Element;
 export {};

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

@@ -6,7 +6,7 @@ import { Input } from '../../../components/ui/input';
 import { Check, Volume2, X } from 'lucide-react';
 import { useRef, useState } from 'react';
 import { toast } from 'sonner';
-import { t } from '../../../shared/lib/i18n';
+import { t, useT } from '../../../shared/lib/i18n';
 import { ReadAndColorObjectsClient } from '../types/read-and-color-objects/ReadAndColorObjectsClient';
 import { ArrangeLettersIntoWordsClient } from '../types/arrange-letters-into-words/ArrangeLettersIntoWordsClient';
 import { WriteShortParagraphClient } from '../types/write-short-paragraph/WriteShortParagraphClient';
@@ -38,7 +38,14 @@ import { MatchWordToPictureViewer } from './MatchWordToPictureViewer';
 import { MatchWordToPictureGroupViewer } from './MatchWordToPictureGroupViewer';
 import { MatchColumnsToMakeSentencesViewer } from './MatchColumnsToMakeSentencesViewer';
 import { WordOrderingGroupViewer } from './WordOrderingGroupViewer';
-export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false, userAnswer, gradeDetails, }) {
+function readCueAudioKey(value) {
+    if (!value || typeof value !== 'object' || Array.isArray(value))
+        return null;
+    const key = value.audioKey;
+    return typeof key === 'string' && key.trim() !== '' ? key : null;
+}
+export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false, userAnswer, gradeDetails, onItemRecorded, uploadingIndex = null, }) {
+    const translate = useT();
     const [selectedAnswer, setSelectedAnswer] = useState(userAnswer || null);
     const [playCount, setPlayCount] = useState(0);
     const audioRef = useRef(null);
@@ -214,6 +221,7 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
             next[index] = value;
             setFillBlankAnswers(next);
             setSelectedAnswer(next);
+            onSubmitAnswer?.(next);
         };
         const isCorrect = (index, value) => {
             const correctAnswer = blanks[index] ?? '';
@@ -517,11 +525,13 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
             case 'ANSWER_THE_QUESTION_GROUP':
                 return (_jsx(AnswerTheQuestionGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer, onSubmitAnswer: onSubmitAnswer }));
             case 'SPEAKING_CUE_CARD':
-                return (_jsx(SpeakingCueCardClient, { questionData: mapQuestionToSpeakingCueCardData(question), isReviewMode: isReviewMode }));
+                return (_jsx(SpeakingCueCardClient, { questionData: mapQuestionToSpeakingCueCardData(question), isReviewMode: isReviewMode, audioKey: readCueAudioKey(userAnswer), uploading: uploadingIndex === 0, onRecorded: isReviewMode || !onItemRecorded
+                        ? undefined
+                        : (blob) => onItemRecorded(0, blob) }));
             case 'SPONTANEOUS_QA':
                 return (_jsx(SpontaneousQAClient, { questionData: mapQuestionToSpontaneousQAData(question), isReviewMode: isReviewMode }));
             case 'SPONTANEOUS_QA_GROUP':
-                return (_jsx(SpontaneousQaGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer, gradeDetails: gradeDetails, disabled: !onSubmitAnswer }));
+                return (_jsx(SpontaneousQaGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer, gradeDetails: gradeDetails, onItemRecorded: isReviewMode ? undefined : onItemRecorded, uploadingIndex: uploadingIndex, disabled: !onSubmitAnswer && !onItemRecorded }));
             case 'WORD_ORDER_AND_MATCH_GROUP':
             case 'WORD_ORDER_AND_MATCH':
                 return (_jsx(WordOrderAndMatchGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer, onSubmitAnswer: onSubmitAnswer }));
@@ -572,7 +582,7 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
             case 'CHOOSE_THEN_ANSWER_GROUP':
                 return (_jsx(ChooseThenAnswerGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer, gradeDetails: gradeDetails, onSubmitAnswer: onSubmitAnswer }));
             default:
-                return _jsxs("div", { children: ["Lo\u1EA1i c\u00E2u h\u1ECFi kh\u00F4ng \u0111\u01B0\u1EE3c h\u1ED7 tr\u1EE3: ", question.type] });
+                return _jsx("div", { children: t('question.viewer.unsupported', { type: question.type }) });
         }
     };
     /**
@@ -588,25 +598,32 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
             question.type === 'ANSWER_THE_QUESTION') {
             return null;
         }
-        // Modern fill stems live entirely in the body; title is a short label.
-        if (question.type === 'FILL_IN_BLANK' ||
-            question.type === 'WORD_FILL_PARAGRAPH') {
-            return 'Câu hỏi';
-        }
+        const typeKey = `question.type.${question.type}`;
+        const typeLabel = translate(typeKey);
+        const typedTitle = typeLabel === typeKey ? translate('question.viewer.fallbackTitle') : typeLabel;
         if (typeof question.content === 'string') {
-            return stripLightweightMarkdown(question.content) || 'Câu hỏi';
+            return stripLightweightMarkdown(question.content) || typedTitle;
         }
         const c = question.content;
-        const raw = c?.title || c?.question || c?.paragraph || '';
-        // Prefer explicit title; if question/paragraph is stem-like, avoid raw dump.
-        if (c?.title)
-            return stripLightweightMarkdown(c.title) || 'Câu hỏi';
+        const metaTitle = typeof c?.meta?.title === 'string' ? c.meta.title : '';
+        const explicitTitle = (typeof c?.title === 'string' && c.title) || metaTitle;
+        if (explicitTitle && explicitTitle.length <= 80 && !/\{\d+\}/.test(explicitTitle) && !/\*\*/.test(explicitTitle)) {
+            return stripLightweightMarkdown(explicitTitle) || typedTitle;
+        }
+        // Modern fill stems live entirely in the body; title is a short type label.
+        if (question.type === 'FILL_IN_BLANK' ||
+            question.type === 'WORD_FILL_PARAGRAPH') {
+            return typedTitle;
+        }
+        const raw = c?.question || c?.paragraph || '';
         if (typeof raw === 'string' && (/\{\d+\}/.test(raw) || /\*\*/.test(raw))) {
-            return 'Câu hỏi';
+            return typedTitle;
         }
-        return stripLightweightMarkdown(raw) || 'Câu hỏi';
+        const stripped = stripLightweightMarkdown(typeof raw === 'string' ? raw : '');
+        return stripped && stripped.length <= 80 ? stripped : typedTitle;
     };
-    const cardTitle = resolveCardTitle();
+    const isGroupQuestion = question.type.endsWith('_GROUP') || Boolean(question.isGroup);
+    const cardTitle = isGroupQuestion ? null : resolveCardTitle();
     // WFSF and Crossword already have their own bordered shell — avoid double Card border.
     if (question.type === 'WORD_FILL_STRUCTURED_FORM' ||
         question.type === 'CROSSWORD_PUZZLE' ||
@@ -614,7 +631,8 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
         question.type === 'ANSWER_THE_QUESTION') {
         return (_jsx("div", { className: "space-y-4", children: renderQuestion() }));
     }
-    return (_jsxs(Card, { children: [cardTitle ? (_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "flex items-center justify-between", children: [_jsx("span", { className: "min-w-0 pr-2 text-base font-semibold leading-snug", children: cardTitle }), _jsxs("span", { className: "shrink-0 text-sm font-normal text-gray-500", children: [question.points, " \u0111i\u1EC3m"] })] }) })) : null, _jsx(CardContent, { className: cardTitle ? 'space-y-4' : 'space-y-4 pt-4', children: renderQuestion() })] }));
+    const showViewerHeader = Boolean(cardTitle) && !isReviewMode;
+    return (_jsxs(Card, { children: [showViewerHeader ? (_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "flex items-center justify-between", children: [_jsx("span", { className: "min-w-0 pr-2 text-base font-semibold leading-snug", children: cardTitle }), _jsx("span", { className: "shrink-0 text-sm font-normal text-gray-500", children: translate('question.viewer.points', { count: question.points }) })] }) })) : null, _jsx(CardContent, { className: showViewerHeader ? 'space-y-4' : 'space-y-4 pt-4', children: renderQuestion() })] }));
 }
 /** Drop lightweight markdown markers for plain header labels (not full token parse). */
 function stripLightweightMarkdown(text) {

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

@@ -15,5 +15,5 @@ function readStudentAnswer(value) {
     };
 }
 export function SpontaneousQaGroupViewer({ question, isReviewMode = false, userAnswer, onItemRecorded, uploadingIndex, gradeDetails, disabled, }) {
-    return (_jsx(SpontaneousQaGroupClient, { questionData: mapQuestionToSpontaneousQaGroupData(question), isReviewMode: isReviewMode, userAnswer: readStudentAnswer(userAnswer), onItemRecorded: isReviewMode ? undefined : onItemRecorded, uploadingIndex: uploadingIndex, gradeDetails: isReviewMode ? undefined : gradeDetails, disabled: disabled }));
+    return (_jsx(SpontaneousQaGroupClient, { questionData: mapQuestionToSpontaneousQaGroupData(question), isReviewMode: isReviewMode, userAnswer: readStudentAnswer(userAnswer), onItemRecorded: isReviewMode ? undefined : onItemRecorded, uploadingIndex: uploadingIndex, gradeDetails: gradeDetails, disabled: disabled }));
 }

package/dist/shared/index.d.ts

@@ -3,6 +3,8 @@ export * from './constants/QueryKeyConstant';
 export * from './constants/exam-level.enum';
 export * from './constants/routes';
 export * from './lib/utils';
+export { useLocaleStore } from './lib/stores/localeStore';
+export type { Locale as ExamSdkLocale } from './lib/stores/localeStore';
 export * from '../components/questions/_shared';
 export * from './types';
 export * from './lib/utils/question-transform';

package/dist/shared/index.js

@@ -3,6 +3,7 @@ export * from './constants/QueryKeyConstant';
 export * from './constants/exam-level.enum';
 export * from './constants/routes';
 export * from './lib/utils';
+export { useLocaleStore } from './lib/stores/localeStore';
 export * from '../components/questions/_shared';
 export * from './types';
 export * from './lib/utils/question-transform';

package/dist/shared/lib/i18n/messages/en/common.d.ts

@@ -120,5 +120,43 @@ declare const common: {
     readonly 'common.badge.source.createdByAdmin': "Created by admin";
     readonly 'common.badge.source.createdByTeacher': "Created by teacher";
     readonly 'common.badge.source.createdFromEBM': "Synced from EBM";
+    readonly 'question.viewer.fallbackTitle': "Question";
+    readonly 'question.viewer.points': "{count} pts";
+    readonly 'question.viewer.questionN': "Question {n}";
+    readonly 'question.viewer.partN': "Part {n}";
+    readonly 'question.viewer.example': "Example";
+    readonly 'question.viewer.correct': "Correct";
+    readonly 'question.viewer.wrong': "Incorrect";
+    readonly 'question.viewer.readingPassage': "Reading passage";
+    readonly 'question.viewer.placeholder': "Enter your answer…";
+    readonly 'question.viewer.yourAnswer': "Your answer";
+    readonly 'question.viewer.writePlaceholder': "Write your answer here…";
+    readonly 'question.viewer.answerKey': "Answer key";
+    readonly 'question.viewer.noAnswer': "No answer yet";
+    readonly 'question.viewer.notWritten': "Not written";
+    readonly 'question.viewer.sample': "Sample";
+    readonly 'question.viewer.chooseScore': "Choose {score}";
+    readonly 'question.viewer.writeScore': "Write {score}";
+    readonly 'question.viewer.expandPassage': "Show more";
+    readonly 'question.viewer.collapsePassage': "Show less";
+    readonly 'question.viewer.unsupported': "Unsupported question type: {type}";
+    readonly 'question.viewer.missingPrompt': "Question text is missing";
+    readonly 'question.viewer.imageAlt': "Image {n}";
+    readonly 'question.viewer.itemImageAlt': "Question {n} image {m}";
+    readonly 'question.viewer.atqgDefaultInstruction': "Read the text and answer the questions.";
+    readonly 'question.viewer.wfsfDefaultTitle': "Fill in the structured form";
+    readonly 'question.type.ANSWER_THE_QUESTION_GROUP': "Answer the questions";
+    readonly 'question.type.CHOOSE_THEN_ANSWER_GROUP': "Choose then answer";
+    readonly 'question.type.FILL_IN_BLANK': "Fill in the blank";
+    readonly 'question.type.FILL_IN_BLANK_GROUP': "Fill in the blanks";
+    readonly 'question.type.WORD_FILL_STRUCTURED_FORM': "Structured form";
+    readonly 'question.type.WORD_FILL_PARAGRAPH': "Fill the paragraph";
+    readonly 'question.type.MATCHING_WITH_LINES_GROUP': "Match the columns";
+    readonly 'question.type.MATCH_WORD_TO_PICTURE': "Match words to pictures";
+    readonly 'question.type.MATCH_WORD_TO_PICTURE_GROUP': "Match words to pictures";
+    readonly 'question.type.CROSSWORD_PUZZLE': "Crossword";
+    readonly 'question.type.FIND_WORDS_IN_MATRIX': "Find the words";
+    readonly 'question.type.CHOOSE_THE_CORRECT_ANSWER': "Choose the correct answer";
+    readonly 'question.type.CHOOSE_THE_CORRECT_ANSWER_GROUP': "Choose the correct answers";
 };
 export default common;