@tinyweb_dev/oe-exam-sdk 1.0.11 → 1.0.13

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

@@ -1,12 +1,19 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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, FileText, Library } from 'lucide-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 { KidInstruction, KidPrompt, KidQuestionCard } from '../../_shared/components/compact';
+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,14 +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();
-    const headerLabel = headerInstruction || DEFAULT_WFSF_HEADER;
+    // Header reads "Bài x: rubric" — the question type name is never shown.
+    const numberLabel = 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 || t('question.viewer.wfsfDefaultTitle'));
     // Do not re-show the same rubric under "Giải thích".
-    const displayExplanation = rawExplanation && rawExplanation !== headerLabel ? rawExplanation : '';
+    const displayExplanation = rawExplanation && rawExplanation !== headerInstruction ? rawExplanation : '';
     const handleInputChange = useCallback((key, value) => {
         if (isReviewMode)
             return;
@@ -155,7 +152,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);
@@ -178,8 +175,8 @@ export function WordFillStructuredFormClient({ questionData, isReviewMode = fals
                         : undefined, size: isLetterBlank ? undefined : isPhraseBlank ? 28 : 10, className: cn('inline-block bg-slate-50/40 text-center text-sm font-semibold outline-none transition-all align-baseline hover:bg-slate-100/60 focus:bg-teal-50/60 focus:ring-0', isLetterBlank
                         ? 'h-7 w-7 rounded-md border px-0 uppercase'
                         : isPhraseBlank
-                            ? 'min-w-[16rem] max-w-[36rem] w-[28ch] rounded-md border px-3 py-1.5'
-                            : 'min-w-[4.5rem] max-w-[8rem] w-[10ch] rounded-md border px-3 py-1.5', isReviewMode
+                            ? 'min-w-[16rem] max-w-[36rem] w-[28ch] rounded-none border-0 border-b-2 bg-transparent px-1 py-0.5'
+                            : 'min-w-[4.5rem] max-w-[8rem] w-[10ch] rounded-none border-0 border-b-2 bg-transparent px-1 py-0.5', isReviewMode
                         ? isCorrectFill
                             ? 'border-green-400 bg-green-50 text-green-800'
                             : isWrongFill
@@ -278,12 +275,12 @@ export function WordFillStructuredFormClient({ questionData, isReviewMode = fals
             .map((node, index) => renderNode(node, `root-${index}`))
             .filter((node) => node !== null);
     }, [content, renderBlank]);
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx(KidInstruction, { children: headerInstruction }), _jsxs(KidQuestionCard, { icon: _jsx(FileText, { className: "h-3.5 w-3.5" }), title: headerInstruction ? DEFAULT_WFSF_HEADER : headerLabel, headerExtra: typeof questionNumber === 'number' && questionNumber > 0 ? (_jsxs("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-teal-700", children: ["B\u00E0i ", questionNumber] })) : undefined, review: isReviewMode && allFilled ? (isAllCorrect ? 'correct' : 'wrong') : null, children: [title && (_jsx(KidPrompt, { children: _jsx("h2", { className: "text-sm font-semibold text-gray-800", children: title }) })), allAudios.length > 0 && (_jsx("div", { className: "flex flex-col items-center gap-2", children: allAudios.map((audio, idx) => (_jsx(ClientAudioItem, { url: audio }, idx))) })), allImages.length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: allImages.map((img, idx) => (_jsx(ClientImageItem, { url: img, alt: title ? `${title} (${idx + 1})` : undefined }, idx))) })), bankMode === 'WITH_WORD_BANK' && sharedWords.length > 0 && (_jsxs("div", { className: "rounded-lg border border-purple-200 bg-gradient-to-r from-purple-50 to-pink-50 p-3", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx(Library, { className: "h-4 w-4 text-purple-600" }), _jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-purple-700", children: "Word Bank" })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: sharedWords.map((item, index) => {
-                                    const used = usedSharedWords.has(item.word.trim().toLowerCase());
-                                    return (_jsxs("span", { className: cn('rounded-full border px-3 py-1 text-sm font-medium', item.isExample
-                                            ? 'border-amber-300 bg-amber-100 text-amber-800'
-                                            : used
-                                                ? 'border-purple-200 bg-white/60 text-purple-400 line-through'
-                                                : 'border-purple-300 bg-white text-purple-800'), children: [item.word, item.isExample ? ' (ex)' : ''] }, `${item.word}-${index}`));
-                                }) })] })), _jsx("div", { className: "structured-form-content space-y-2 rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-5 text-base leading-loose text-gray-800", children: renderedContent }), isReviewMode && !isAllCorrect && (_jsxs("div", { className: "rounded-lg border border-green-200 bg-green-50 p-3", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-green-600", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: expectedBlankKeys.map((key) => (_jsxs("span", { className: "rounded-lg border border-green-300 bg-green-100 px-3 py-1.5 text-sm font-semibold text-green-800", children: [`{${key}}`, ": ", formatWfsfCorrectLabel(answers[key])] }, key))) })] })), isReviewMode && displayExplanation && (_jsxs("div", { className: "rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-3", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-blue-600", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-blue-800", children: displayExplanation })] }))] })] }));
+    return (_jsx("div", { className: "space-y-4", children: _jsxs(KidQuestionCard, { hideIcon: true, title: headerTitle, titleClassName: "whitespace-normal break-words text-base font-normal text-gray-800", review: isReviewMode && allFilled ? (isAllCorrect ? 'correct' : 'wrong') : null, children: [title && (_jsx(KidPrompt, { children: _jsx("h2", { className: "text-sm font-semibold text-gray-800", children: title }) })), allAudios.length > 0 && (_jsx("div", { className: "flex flex-col items-center gap-2", children: allAudios.map((audio, idx) => (_jsx(ClientAudioItem, { url: audio }, idx))) })), allImages.length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: allImages.map((img, idx) => (_jsx(ClientImageItem, { url: img, alt: title ? `${title} (${idx + 1})` : undefined }, idx))) })), bankMode === 'WITH_WORD_BANK' && sharedWords.length > 0 && (_jsxs("div", { className: "rounded-lg border border-purple-200 bg-gradient-to-r from-purple-50 to-pink-50 p-3", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx(Library, { className: "h-4 w-4 text-purple-600" }), _jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-purple-700", children: "Word Bank" })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: sharedWords.map((item, index) => {
+                                const used = usedSharedWords.has(item.word.trim().toLowerCase());
+                                return (_jsxs("span", { className: cn('rounded-full border px-3 py-1 text-sm font-medium', item.isExample
+                                        ? 'border-amber-300 bg-amber-100 text-amber-800'
+                                        : used
+                                            ? 'border-purple-200 bg-white/60 text-purple-400 line-through'
+                                            : 'border-purple-300 bg-white text-purple-800'), children: [item.word, item.isExample ? ' (ex)' : ''] }, `${item.word}-${index}`));
+                            }) })] })), _jsx("div", { className: "structured-form-content space-y-2 rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-5 text-base leading-loose text-gray-800", children: renderedContent }), isReviewMode && !isAllCorrect && (_jsxs("div", { className: "rounded-lg border border-green-200 bg-green-50 p-3", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-green-600", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: expectedBlankKeys.map((key) => (_jsxs("span", { className: "rounded-lg border border-green-300 bg-green-100 px-3 py-1.5 text-sm font-semibold text-green-800", children: [`{${key}}`, ": ", formatWfsfCorrectLabel(answers[key])] }, key))) })] })), isReviewMode && displayExplanation && (_jsxs("div", { className: "rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-3", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-blue-600", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-blue-800", children: displayExplanation })] }))] }) }));
 }

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

@@ -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/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,7 @@ 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() })] }));
+    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 }), _jsx("span", { className: "shrink-0 text-sm font-normal text-gray-500", children: translate('question.viewer.points', { count: question.points }) })] }) })) : null, _jsx(CardContent, { className: cardTitle ? '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;

package/dist/shared/lib/i18n/messages/en/common.js

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

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

@@ -2297,5 +2297,43 @@ declare const en: {
     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 en;

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

@@ -120,5 +120,43 @@ declare const common: {
     readonly 'common.badge.source.createdByAdmin': "Admin tạo";
     readonly 'common.badge.source.createdByTeacher': "Giáo viên tạo";
     readonly 'common.badge.source.createdFromEBM': "Đồng bộ EBM";
+    readonly 'question.viewer.fallbackTitle': "Câu hỏi";
+    readonly 'question.viewer.points': "{count} điểm";
+    readonly 'question.viewer.questionN': "Câu {n}";
+    readonly 'question.viewer.partN': "Bài {n}";
+    readonly 'question.viewer.example': "Câu ví dụ";
+    readonly 'question.viewer.correct': "Đúng";
+    readonly 'question.viewer.wrong': "Sai";
+    readonly 'question.viewer.readingPassage': "Bài đọc";
+    readonly 'question.viewer.placeholder': "Nhập câu trả lời...";
+    readonly 'question.viewer.yourAnswer': "Câu trả lời của bạn";
+    readonly 'question.viewer.writePlaceholder': "Viết câu trả lời tại đây...";
+    readonly 'question.viewer.answerKey': "Đáp án";
+    readonly 'question.viewer.noAnswer': "Chưa có đáp án";
+    readonly 'question.viewer.notWritten': "Chưa viết";
+    readonly 'question.viewer.sample': "Mẫu";
+    readonly 'question.viewer.chooseScore': "Chọn {score}";
+    readonly 'question.viewer.writeScore': "Viết {score}";
+    readonly 'question.viewer.expandPassage': "Xem thêm";
+    readonly 'question.viewer.collapsePassage': "Thu gọn";
+    readonly 'question.viewer.unsupported': "Loại câu hỏi không được hỗ trợ: {type}";
+    readonly 'question.viewer.missingPrompt': "Câu hỏi chưa được nhập";
+    readonly 'question.viewer.imageAlt': "Hình ảnh ({n})";
+    readonly 'question.viewer.itemImageAlt': "Hình ảnh câu {n} ({m})";
+    readonly 'question.viewer.atqgDefaultInstruction': "Đọc đoạn văn và trả lời câu hỏi.";
+    readonly 'question.viewer.wfsfDefaultTitle': "Điền từ vào biểu mẫu có cấu trúc";
+    readonly 'question.type.ANSWER_THE_QUESTION_GROUP': "Trả lời câu hỏi";
+    readonly 'question.type.CHOOSE_THEN_ANSWER_GROUP': "Chọn rồi trả lời";
+    readonly 'question.type.FILL_IN_BLANK': "Điền từ";
+    readonly 'question.type.FILL_IN_BLANK_GROUP': "Điền từ";
+    readonly 'question.type.WORD_FILL_STRUCTURED_FORM': "Điền từ vào biểu mẫu";
+    readonly 'question.type.WORD_FILL_PARAGRAPH': "Điền từ vào đoạn";
+    readonly 'question.type.MATCHING_WITH_LINES_GROUP': "Nối cột";
+    readonly 'question.type.MATCH_WORD_TO_PICTURE': "Nối từ với tranh";
+    readonly 'question.type.MATCH_WORD_TO_PICTURE_GROUP': "Nối từ với tranh";
+    readonly 'question.type.CROSSWORD_PUZZLE': "Ô chữ";
+    readonly 'question.type.FIND_WORDS_IN_MATRIX': "Tìm từ";
+    readonly 'question.type.CHOOSE_THE_CORRECT_ANSWER': "Chọn đáp án đúng";
+    readonly 'question.type.CHOOSE_THE_CORRECT_ANSWER_GROUP': "Chọn đáp án đúng";
 };
 export default common;

package/dist/shared/lib/i18n/messages/vi/common.js

@@ -136,5 +136,44 @@ const common = {
     'common.badge.source.createdByAdmin': 'Admin tạo',
     'common.badge.source.createdByTeacher': 'Giáo viên tạo',
     'common.badge.source.createdFromEBM': 'Đồng bộ EBM',
+    // Question viewer chrome (homework / examine)
+    'question.viewer.fallbackTitle': 'Câu hỏi',
+    'question.viewer.points': '{count} điểm',
+    'question.viewer.questionN': 'Câu {n}',
+    'question.viewer.partN': 'Bài {n}',
+    'question.viewer.example': 'Câu ví dụ',
+    'question.viewer.correct': 'Đúng',
+    'question.viewer.wrong': 'Sai',
+    'question.viewer.readingPassage': 'Bài đọc',
+    'question.viewer.placeholder': 'Nhập câu trả lời...',
+    'question.viewer.yourAnswer': 'Câu trả lời của bạn',
+    'question.viewer.writePlaceholder': 'Viết câu trả lời tại đây...',
+    'question.viewer.answerKey': 'Đáp án',
+    'question.viewer.noAnswer': 'Chưa có đáp án',
+    'question.viewer.notWritten': 'Chưa viết',
+    'question.viewer.sample': 'Mẫu',
+    'question.viewer.chooseScore': 'Chọn {score}',
+    'question.viewer.writeScore': 'Viết {score}',
+    'question.viewer.expandPassage': 'Xem thêm',
+    'question.viewer.collapsePassage': 'Thu gọn',
+    'question.viewer.unsupported': 'Loại câu hỏi không được hỗ trợ: {type}',
+    'question.viewer.missingPrompt': 'Câu hỏi chưa được nhập',
+    'question.viewer.imageAlt': 'Hình ảnh ({n})',
+    'question.viewer.itemImageAlt': 'Hình ảnh câu {n} ({m})',
+    'question.viewer.atqgDefaultInstruction': 'Đọc đoạn văn và trả lời câu hỏi.',
+    'question.viewer.wfsfDefaultTitle': 'Điền từ vào biểu mẫu có cấu trúc',
+    'question.type.ANSWER_THE_QUESTION_GROUP': 'Trả lời câu hỏi',
+    'question.type.CHOOSE_THEN_ANSWER_GROUP': 'Chọn rồi trả lời',
+    'question.type.FILL_IN_BLANK': 'Điền từ',
+    'question.type.FILL_IN_BLANK_GROUP': 'Điền từ',
+    'question.type.WORD_FILL_STRUCTURED_FORM': 'Điền từ vào biểu mẫu',
+    'question.type.WORD_FILL_PARAGRAPH': 'Điền từ vào đoạn',
+    'question.type.MATCHING_WITH_LINES_GROUP': 'Nối cột',
+    'question.type.MATCH_WORD_TO_PICTURE': 'Nối từ với tranh',
+    'question.type.MATCH_WORD_TO_PICTURE_GROUP': 'Nối từ với tranh',
+    'question.type.CROSSWORD_PUZZLE': 'Ô chữ',
+    'question.type.FIND_WORDS_IN_MATRIX': 'Tìm từ',
+    'question.type.CHOOSE_THE_CORRECT_ANSWER': 'Chọn đáp án đúng',
+    'question.type.CHOOSE_THE_CORRECT_ANSWER_GROUP': 'Chọn đáp án đúng',
 };
 export default common;