@tinyweb_dev/oe-exam-sdk 1.0.13 → 1.0.14

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

@@ -6,6 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ResolvedImage } from '../../../../../components/common/ResolvedImage';
 import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
 import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+import { COLLAPSE_CHAR_THRESHOLD, KidCollapsibleBlock, } from '../../../../questions/_shared/components/compact';
 // Single Question Component (1 Line / Full Width Row)
 function QuestionItem({ question, answer, onAnswerChange, isReviewMode, correctAnswerTextMap, id, }) {
     const isDisabled = isReviewMode || question.isExample;
@@ -47,5 +48,6 @@ export function MoversTrueFalseRenderer({ partNumber, partName, questionCount, i
     // Separate example questions from regular questions
     const exampleQuestions = questions.filter((q) => q.isExample);
     const regularQuestions = questions.filter((q) => !q.isExample);
-    return (_jsxs("div", { className: "custom-scrollbar flex h-full flex-col gap-4 overflow-y-auto sm:gap-5 pb-6", children: [_jsxs("div", { className: "flex flex-col gap-3.5 p-3 sm:px-6 sm:pt-2", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode }), imageUrl && (_jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(ResolvedImage, { src: imageUrl, alt: "Question illustration", className: "max-h-[300px] rounded-xl object-contain shadow-md" }) })), groupContent && (_jsx("div", { className: "rounded-xl border border-amber-200 bg-amber-50/60 p-4 text-[15.5px] leading-relaxed text-slate-800 shadow-sm", dangerouslySetInnerHTML: { __html: groupContent } })), exampleQuestions.length > 0 && (_jsx("div", { className: "mt-1 flex flex-col gap-3", children: exampleQuestions.map((question) => (_jsx(QuestionItem, { id: `question-${question.id}`, question: question, answer: answers[question.id], onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, correctAnswerTextMap: correctAnswerTextMap }, question.id))) }))] }), exampleQuestions.length > 0 && regularQuestions.length > 0 && (_jsx("div", { className: "px-3 sm:px-6", children: _jsx("hr", { className: "border-t border-dashed border-slate-200" }) })), _jsx("div", { className: "flex flex-col gap-3 px-3 sm:px-6", children: regularQuestions.map((question) => (_jsx(QuestionItem, { id: `question-${question.id}`, question: question, answer: answers[question.id], onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, correctAnswerTextMap: correctAnswerTextMap }, question.id))) })] }));
+    return (_jsxs("div", { className: "custom-scrollbar flex h-full flex-col gap-4 overflow-y-auto sm:gap-5 pb-6", children: [_jsxs("div", { className: "flex flex-col gap-3.5 p-3 sm:px-6 sm:pt-2", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode }), imageUrl && (_jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(ResolvedImage, { src: imageUrl, alt: "Question illustration", className: "max-h-[300px] rounded-xl object-contain shadow-md" }) })), groupContent && (_jsx(KidCollapsibleBlock, { collapse: isReviewMode &&
+                            groupContent.replace(/<[^>]+>/g, ' ').length > COLLAPSE_CHAR_THRESHOLD, children: _jsx("div", { className: "rounded-xl border border-amber-200 bg-amber-50/60 p-4 text-[15.5px] leading-relaxed text-slate-800 shadow-sm", dangerouslySetInnerHTML: { __html: groupContent } }) })), exampleQuestions.length > 0 && (_jsx("div", { className: "mt-1 flex flex-col gap-3", children: exampleQuestions.map((question) => (_jsx(QuestionItem, { id: `question-${question.id}`, question: question, answer: answers[question.id], onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, correctAnswerTextMap: correctAnswerTextMap }, question.id))) }))] }), exampleQuestions.length > 0 && regularQuestions.length > 0 && (_jsx("div", { className: "px-3 sm:px-6", children: _jsx("hr", { className: "border-t border-dashed border-slate-200" }) })), _jsx("div", { className: "flex flex-col gap-3 px-3 sm:px-6", children: regularQuestions.map((question) => (_jsx(QuestionItem, { id: `question-${question.id}`, question: question, answer: answers[question.id], onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, correctAnswerTextMap: correctAnswerTextMap }, question.id))) })] }));
 }

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

@@ -6,6 +6,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ResolvedImage } from '../../../../../components/common/ResolvedImage';
 import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
 import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+import { COLLAPSE_CHAR_THRESHOLD, KidCollapsibleBlock, } from '../../../../questions/_shared/components/compact';
 export function MoversWriteSentencesRenderer({ partNumber, partName, questionCount, instruction, imageUrl, title, groupContent, questions, answers, onAnswerChange, isReviewMode = false, }) {
-    return (_jsxs("div", { className: `grid h-full grid-cols-1 gap-4 sm:gap-6 ${!isReviewMode ? 'lg:grid-cols-2' : ''}`, children: [_jsxs("div", { className: "flex flex-col gap-4 overflow-y-auto p-3 sm:pb-6 sm:pr-6 sm:pt-6", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode }), imageUrl && (_jsx("div", { className: "flex items-center justify-center", children: _jsx(ResolvedImage, { src: imageUrl, alt: "Illustration", className: "max-h-[300px] rounded-lg object-contain shadow-md" }) })), groupContent && (_jsx("div", { className: "rounded-lg bg-amber-50 p-4 text-sm leading-relaxed text-gray-700", children: groupContent }))] }), _jsxs("div", { className: "flex flex-col gap-4 overflow-y-auto p-3 sm:gap-5 sm:pb-6 sm:pl-6 sm:pt-6", children: [title && (_jsx("h2", { className: "text-center text-2xl font-bold uppercase text-coral-500", children: title })), questions.map((question) => (_jsxs("div", { id: `question-${question.id}`, className: "flex items-start gap-3", children: [_jsx("span", { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-sm font-bold text-white", children: question.questionNumber }), _jsx("textarea", { value: answers[question.id] || '', onChange: (e) => onAnswerChange(question.id, e.target.value), disabled: isReviewMode, placeholder: "Write your sentence...", rows: 2, className: "flex-1 resize-none rounded-lg border-2 border-gray-300 bg-white px-3 py-2 text-base outline-none transition-colors focus:border-blue-500 disabled:opacity-60" })] }, question.id)))] })] }));
+    return (_jsxs("div", { className: `grid h-full grid-cols-1 gap-4 sm:gap-6 ${!isReviewMode ? 'lg:grid-cols-2' : ''}`, children: [_jsxs("div", { className: "flex flex-col gap-4 overflow-y-auto p-3 sm:pb-6 sm:pr-6 sm:pt-6", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode }), imageUrl && (_jsx("div", { className: "flex items-center justify-center", children: _jsx(ResolvedImage, { src: imageUrl, alt: "Illustration", className: "max-h-[300px] rounded-lg object-contain shadow-md" }) })), groupContent && (_jsx(KidCollapsibleBlock, { collapse: isReviewMode &&
+                            groupContent.replace(/<[^>]+>/g, ' ').length > COLLAPSE_CHAR_THRESHOLD, children: _jsx("div", { className: "rounded-lg bg-amber-50 p-4 text-sm leading-relaxed text-gray-700", children: groupContent }) }))] }), _jsxs("div", { className: "flex flex-col gap-4 overflow-y-auto p-3 sm:gap-5 sm:pb-6 sm:pl-6 sm:pt-6", children: [title && (_jsx("h2", { className: "text-center text-2xl font-bold uppercase text-coral-500", children: title })), questions.map((question) => (_jsxs("div", { id: `question-${question.id}`, className: "flex items-start gap-3", children: [_jsx("span", { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-sm font-bold text-white", children: question.questionNumber }), _jsx("textarea", { value: answers[question.id] || '', onChange: (e) => onAnswerChange(question.id, e.target.value), disabled: isReviewMode, placeholder: "Write your sentence...", rows: 2, className: "flex-1 resize-none rounded-lg border-2 border-gray-300 bg-white px-3 py-2 text-base outline-none transition-colors focus:border-blue-500 disabled:opacity-60" })] }, question.id)))] })] }));
 }

package/dist/components/questions/_shared/components/compact/KidCollapsibleBlock.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+export declare const COLLAPSE_CHAR_THRESHOLD = 480;
+export declare function KidCollapsibleBlock({ collapse, children, className, previewClassName, }: {
+    collapse: boolean;
+    children: ReactNode;
+    className?: string;
+    previewClassName?: string;
+}): import("react").JSX.Element;

package/dist/components/questions/_shared/components/compact/KidCollapsibleBlock.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useT } from '../../../../../shared/lib/i18n';
+import { cn } from '../../../../../shared/lib/utils';
+export const COLLAPSE_CHAR_THRESHOLD = 480;
+export function KidCollapsibleBlock({ collapse, children, className, previewClassName = 'max-h-40 overflow-hidden', }) {
+    const t = useT();
+    const [expanded, setExpanded] = useState(!collapse);
+    if (!collapse) {
+        return _jsx("div", { className: className, children: children });
+    }
+    return (_jsxs("div", { className: className, children: [_jsx("div", { className: cn(!expanded && previewClassName), children: children }), _jsx("button", { type: "button", onClick: () => setExpanded((value) => !value), className: "mt-3 text-sm font-semibold text-indigo-600 hover:text-indigo-800", children: expanded
+                    ? t('question.viewer.collapsePassage')
+                    : t('question.viewer.expandPassage') })] }));
+}

package/dist/components/questions/_shared/components/compact/KidPassage.d.ts

@@ -1,4 +1,5 @@
-export declare function KidPassage({ html, className, }: {
+export declare function KidPassage({ html, className, isReviewMode, }: {
     html: string;
     className?: string;
+    isReviewMode?: boolean;
 }): import("react").JSX.Element;

package/dist/components/questions/_shared/components/compact/KidPassage.js

@@ -8,14 +8,14 @@ const COLLAPSE_CHAR_THRESHOLD = 480;
 function plainTextLength(html) {
     return html.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim().length;
 }
-export function KidPassage({ html, className, }) {
+export function KidPassage({ html, className, isReviewMode = false, }) {
     const t = useT();
     const isLong = plainTextLength(html) > COLLAPSE_CHAR_THRESHOLD;
     const [expanded, setExpanded] = useState(!isLong);
     if (!html) {
         return null;
     }
-    return (_jsxs("div", { className: cn('rounded-xl border border-gray-200 bg-white p-5 shadow-xs', expanded && isLong && 'md:sticky md:top-24 md:z-10', className), children: [_jsxs("div", { className: "mb-2.5 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-indigo-700", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: t('question.viewer.readingPassage') })] }), _jsx("div", { className: cn('prose prose-sm max-w-none leading-relaxed text-gray-800', !expanded && 'max-h-40 overflow-hidden'), dangerouslySetInnerHTML: { __html: html } }), isLong ? (_jsx("button", { type: "button", onClick: () => setExpanded((value) => !value), className: "mt-3 text-sm font-semibold text-indigo-600 hover:text-indigo-800", children: expanded
+    return (_jsxs("div", { className: cn('rounded-xl border border-gray-200 bg-white p-5 shadow-xs', expanded && isLong && !isReviewMode && 'md:sticky md:top-24 md:z-10', className), children: [_jsxs("div", { className: "mb-2.5 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-indigo-700", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: t('question.viewer.readingPassage') })] }), _jsx("div", { className: cn('prose prose-sm max-w-none leading-relaxed text-gray-800', !expanded && 'max-h-40 overflow-hidden'), dangerouslySetInnerHTML: { __html: html } }), isLong ? (_jsx("button", { type: "button", onClick: () => setExpanded((value) => !value), className: "mt-3 text-sm font-semibold text-indigo-600 hover:text-indigo-800", children: expanded
                     ? t('question.viewer.collapsePassage')
                     : t('question.viewer.expandPassage') })) : null] }));
 }

package/dist/components/questions/_shared/components/compact/KidQuestionCard.js

@@ -5,5 +5,5 @@ import { useT } from '../../../../../shared/lib/i18n';
 import { cn } from '../../../../../shared/lib/utils';
 export function KidQuestionCard({ icon, hideIcon = false, title, titleClassName, points, isExample = false, review, headerExtra, children, className, contentClassName, }) {
     const t = useT();
-    return (_jsxs("div", { className: cn('overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm', className), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-3 py-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [!hideIcon && (_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: icon ?? _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) })), _jsx("span", { className: cn('text-sm font-medium text-gray-700', titleClassName ?? 'truncate'), children: title }), isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), t('question.viewer.example')] }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [headerExtra, typeof points === 'number' && (_jsx("span", { className: "text-xs text-gray-500", children: t('question.viewer.points', { count: points }) })), review === 'correct' && (_jsxs("div", { className: "flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-700", children: [_jsx(Check, { className: "h-3 w-3" }), t('question.viewer.correct')] })), review === 'wrong' && (_jsxs("div", { className: "flex items-center gap-1 rounded-full bg-red-100 px-2 py-0.5 text-xs font-semibold text-red-700", children: [_jsx(X, { className: "h-3 w-3" }), t('question.viewer.wrong')] }))] })] }), _jsx("div", { className: cn('space-y-3 p-3', contentClassName), children: children })] }));
+    return (_jsxs("div", { className: cn('min-w-0 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm', className), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-3 py-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [!hideIcon && (_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: icon ?? _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) })), _jsx("span", { className: cn('text-sm font-medium text-gray-700', titleClassName ?? 'truncate'), children: title }), isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), t('question.viewer.example')] }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [headerExtra, typeof points === 'number' && (_jsx("span", { className: "text-xs text-gray-500", children: t('question.viewer.points', { count: points }) })), review === 'correct' && (_jsxs("div", { className: "flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-700", children: [_jsx(Check, { className: "h-3 w-3" }), t('question.viewer.correct')] })), review === 'wrong' && (_jsxs("div", { className: "flex items-center gap-1 rounded-full bg-red-100 px-2 py-0.5 text-xs font-semibold text-red-700", children: [_jsx(X, { className: "h-3 w-3" }), t('question.viewer.wrong')] }))] })] }), _jsx("div", { className: cn('space-y-3 p-3', contentClassName), children: children })] }));
 }

package/dist/components/questions/_shared/components/compact/index.d.ts

@@ -6,7 +6,9 @@ export { CompactFieldCard } from './CompactFieldCard';
 export { CompactExplanationToggle } from './CompactExplanationToggle';
 export { KidInstruction } from './KidInstruction';
 export { KidPassage } from './KidPassage';
+export { KidCollapsibleBlock, COLLAPSE_CHAR_THRESHOLD } from './KidCollapsibleBlock';
 export { KidPrompt } from './KidPrompt';
 export { KidQuestionCard } from './KidQuestionCard';
+export { reviewItemTitle, reviewItemPoints } from './reviewItemCard';
 export { KidChoiceRow, optionLetter } from './KidChoiceRow';
 export { SpeakingReplyMic } from './SpeakingReplyMic';

package/dist/components/questions/_shared/components/compact/index.js

@@ -6,7 +6,9 @@ export { CompactFieldCard } from './CompactFieldCard';
 export { CompactExplanationToggle } from './CompactExplanationToggle';
 export { KidInstruction } from './KidInstruction';
 export { KidPassage } from './KidPassage';
+export { KidCollapsibleBlock, COLLAPSE_CHAR_THRESHOLD } from './KidCollapsibleBlock';
 export { KidPrompt } from './KidPrompt';
 export { KidQuestionCard } from './KidQuestionCard';
+export { reviewItemTitle, reviewItemPoints } from './reviewItemCard';
 export { KidChoiceRow, optionLetter } from './KidChoiceRow';
 export { SpeakingReplyMic } from './SpeakingReplyMic';

package/dist/components/questions/_shared/components/compact/reviewItemCard.d.ts

@@ -0,0 +1,3 @@
+/** Review chrome: item index only — homework already shows Exercise N. */
+export declare function reviewItemTitle(n: number, isReviewMode: boolean, takingLabel: string): string;
+export declare function reviewItemPoints(isReviewMode: boolean, points?: number): number | undefined;

package/dist/components/questions/_shared/components/compact/reviewItemCard.js

@@ -0,0 +1,11 @@
+/** Review chrome: item index only — homework already shows Exercise N. */
+export function reviewItemTitle(n, isReviewMode, takingLabel) {
+    if (isReviewMode)
+        return String(n);
+    return takingLabel;
+}
+export function reviewItemPoints(isReviewMode, points) {
+    if (isReviewMode)
+        return undefined;
+    return points;
+}

package/dist/components/questions/types/answer-the-question-group/AnswerTheQuestionGroupClient.js

@@ -4,7 +4,7 @@ import { CircleHelp, Lightbulb, Sparkles, Volume2 } from 'lucide-react';
 import { useT } from '../../../../shared/lib/i18n';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
 import { toAnswerTheQuestionGroupImageUrls } from '../../_shared/types/answer-the-question-group.type';
-import { KidInstruction, KidPassage, KidPrompt, KidQuestionCard } from '../../_shared/components/compact';
+import { KidInstruction, KidPassage, KidPrompt, KidQuestionCard, reviewItemPoints, reviewItemTitle } from '../../_shared/components/compact';
 function isAbsoluteMediaUrl(value) {
     return (value.startsWith('http://')
         || value.startsWith('https://')
@@ -46,14 +46,14 @@ export function AnswerTheQuestionGroupClient({ questionData, isReviewMode = fals
     const items = questionData.items || [];
     const instruction = questionData.instruction?.trim()
         || t('question.viewer.atqgDefaultInstruction');
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx(KidInstruction, { children: instruction }), questionData.audioUrl && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2", children: [_jsx(Volume2, { className: "h-4 w-4 text-slate-500" }), _jsx(MediaPreview, { src: questionData.audioUrl, kind: "audio", alt: "Group audio" })] })), toAnswerTheQuestionGroupImageUrls(questionData.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toAnswerTheQuestionGroupImageUrls(questionData.imageUrl).map((url, imageIndex) => (_jsx(MediaPreview, { src: url, alt: t('question.viewer.imageAlt', { n: imageIndex + 1 }) }, `group-image-${imageIndex}`))) })), questionData.passage ? _jsx(KidPassage, { html: questionData.passage }) : null, items.map((item, itemIndex) => {
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(KidInstruction, { children: instruction }), questionData.audioUrl && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2", children: [_jsx(Volume2, { className: "h-4 w-4 text-slate-500" }), _jsx(MediaPreview, { src: questionData.audioUrl, kind: "audio", alt: "Group audio" })] })), toAnswerTheQuestionGroupImageUrls(questionData.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toAnswerTheQuestionGroupImageUrls(questionData.imageUrl).map((url, imageIndex) => (_jsx(MediaPreview, { src: url, alt: t('question.viewer.imageAlt', { n: imageIndex + 1 }) }, `group-image-${imageIndex}`))) })), questionData.passage ? (_jsx(KidPassage, { html: questionData.passage, isReviewMode: isReviewMode })) : null, items.map((item, itemIndex) => {
                 const userValue = userAnswers[itemIndex] || '';
                 const expectedAnswers = Array.isArray(item.expectedAnswers)
                     ? item.expectedAnswers.filter((answer) => answer.trim() !== '')
                     : [];
                 const questionNumber = item.questionNumber || itemIndex + 1;
                 const answerId = `atqg-answer-${questionNumber}`;
-                return (_jsxs(KidQuestionCard, { icon: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }), title: t('question.viewer.questionN', { n: questionNumber }), points: item.points || 0, isExample: item.isExample, headerExtra: _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-violet-100 px-2 py-0.5 text-xs font-semibold text-violet-700", children: [_jsx(Sparkles, { className: "h-3 w-3" }), "AI"] }), children: [toAnswerTheQuestionGroupImageUrls(item.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toAnswerTheQuestionGroupImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(MediaPreview, { src: url, alt: t('question.viewer.itemImageAlt', {
+                return (_jsxs(KidQuestionCard, { icon: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }), title: reviewItemTitle(questionNumber, isReviewMode, t('question.viewer.questionN', { n: questionNumber })), points: reviewItemPoints(isReviewMode, item.points || 0), isExample: item.isExample, headerExtra: _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-violet-100 px-2 py-0.5 text-xs font-semibold text-violet-700", children: [_jsx(Sparkles, { className: "h-3 w-3" }), "AI"] }), children: [toAnswerTheQuestionGroupImageUrls(item.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toAnswerTheQuestionGroupImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(MediaPreview, { src: url, alt: t('question.viewer.itemImageAlt', {
                                     n: questionNumber,
                                     m: imageIndex + 1,
                                 }) }, `${item.questionNumber}-${imageIndex}`))) })), _jsx(KidPrompt, { children: _jsx("label", { htmlFor: answerId, children: item.question || t('question.viewer.missingPrompt') }) }), isReviewMode || item.isExample || !onAnswerChange ? (userValue ? (_jsx("div", { className: "rounded-md border border-gray-200 bg-gray-50 px-3 py-1.5 text-sm text-gray-700", children: userValue })) : null) : (_jsx("textarea", { id: answerId, name: answerId, value: userValue, onChange: (event) => {

package/dist/components/questions/types/arrange-letters-into-words/ArrangeLettersIntoWordsClient.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
 import { Check, X } from 'lucide-react';
-import { KidQuestionCard } from '../../_shared/components/compact';
+import { KidQuestionCard, reviewItemTitle } from '../../_shared/components/compact';
 // Fisher-Yates shuffle algorithm
 function shuffleArray(array) {
     const shuffled = [...array];
@@ -128,7 +128,7 @@ export function ArrangeLettersIntoWordsClient({ questionData, onSubmit, isReview
             const available = availableLetters[subQuestion.id] || [];
             const arranged = arrangedLetters[subQuestion.id] || [];
             const imagePreviewUrl = getImagePreviewUrl(subQuestion);
-            return (_jsxs(KidQuestionCard, { title: `Câu ${sqIndex + 1}`, review: isReviewMode
+            return (_jsxs(KidQuestionCard, { title: reviewItemTitle(sqIndex + 1, isReviewMode, `Câu ${sqIndex + 1}`), review: isReviewMode
                     ? isCorrect
                         ? 'correct'
                         : userAnswerValue.trim() !== ''

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

@@ -7,7 +7,7 @@ import { cn } from '../../../../shared/lib/utils';
 import { RichTextHtml } from '../../../../components/shared/RichTextHtml';
 import { isRichTextEmpty, richTextToPlainText } from '../../../../shared/lib/rich-text';
 import { normalizeChooseAnswerCorrectAnswer, normalizeChooseAnswerOptions, optionToString } from './normalize';
-import { KidChoiceRow, KidPrompt, KidQuestionCard, optionLetter } from '../../_shared/components/compact';
+import { COLLAPSE_CHAR_THRESHOLD, KidChoiceRow, KidCollapsibleBlock, KidPrompt, KidQuestionCard, optionLetter, reviewItemPoints } from '../../_shared/components/compact';
 // Helper component to resolve presigned URL for each image option
 function OptionImage({ src, alt, className }) {
     const { previewUrl, isLoading } = usePresignedFileUrl(src);
@@ -105,13 +105,24 @@ export function ChooseTheCorrectAnswerClient({ questionData, onSubmit, isReviewM
         : typeof questionData.glossary === 'string' && questionData.glossary.trim()
             ? [questionData.glossary]
             : [];
-    return (_jsxs("div", { className: "space-y-4", children: [passageList.length > 0 && (_jsxs("div", { className: "rounded-xl border border-indigo-100 bg-white p-5 shadow-xs", children: [_jsxs("div", { className: "mb-3 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-indigo-700", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: "B\u00E0i \u0111\u1ECDc (Reading Passage)" })] }), _jsx("div", { className: "space-y-3", children: passageList.map((p, i) => (_jsx("div", { className: "prose prose-sm max-w-none text-gray-800 leading-relaxed", dangerouslySetInnerHTML: { __html: p } }, i))) })] })), glossaryList.length > 0 && (_jsxs("div", { className: "rounded-xl border border-amber-200 bg-amber-50/60 p-4 shadow-xs", children: [_jsx("div", { className: "mb-2 text-xs font-bold uppercase tracking-wider text-amber-800", children: "T\u1EEB v\u1EF1ng (Glossary)" }), _jsx("div", { className: "space-y-1.5 text-xs text-amber-900 leading-relaxed", children: glossaryList.map((g, i) => (_jsx("div", { dangerouslySetInnerHTML: { __html: g } }, i))) })] })), questionData.isGroup && (questionData.groupTitle || questionData.groupSubtitle || questionData.groupContent || questionData.groupImageUrl || hasArticles) && (_jsxs("div", { className: "relative overflow-hidden rounded-2xl border border-indigo-100 bg-white shadow-sm ring-1 ring-black/5 transition-all", children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-indigo-50/80 via-white to-blue-50/30 opacity-70 pointer-events-none" }), _jsx("div", { className: "absolute left-0 top-0 bottom-0 w-1.5 bg-gradient-to-b from-indigo-500 to-blue-600 rounded-l-2xl" }), _jsxs("div", { className: "relative p-6 sm:p-7", children: [_jsxs("div", { className: "flex items-start gap-4 mb-5 border-b border-indigo-50/60 pb-4", children: [_jsx("div", { className: "flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-100 to-blue-100 shadow-inner ring-1 ring-indigo-200/50", children: _jsx(BookOpen, { className: "h-5 w-5 text-indigo-600" }) }), _jsxs("div", { className: "flex-1 pt-1", children: [_jsx("div", { className: "flex items-center gap-2 mb-1", children: questionData.groupNumber && (_jsxs("span", { className: "inline-flex items-center rounded-md bg-indigo-50 px-2 py-1 text-xs font-semibold text-indigo-700 ring-1 ring-inset ring-indigo-700/10", children: ["B\u00E0i \u0111\u1ECDc ", questionData.groupNumber] })) }), questionData.groupTitle && (_jsx("h4", { className: "text-xl font-bold text-slate-800 leading-tight tracking-tight", children: questionData.groupTitle })), questionData.groupSubtitle && (_jsx("p", { className: "mt-1 text-sm text-slate-500 leading-snug", children: questionData.groupSubtitle }))] })] }), hasArticles && (_jsx("div", { className: "flex flex-col gap-4", children: questionData.articles.map((article, i) => (_jsxs("div", { className: "group relative overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm transition-all hover:shadow-md hover:border-indigo-200", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-slate-100 bg-gradient-to-r from-indigo-50/60 to-blue-50/40 px-4 py-2.5", children: [_jsx("div", { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-blue-600 text-xs font-bold text-white shadow-sm", children: String.fromCharCode(65 + i) }), _jsx("h5", { className: "flex-1 truncate text-sm font-bold text-slate-800", children: article.name || `Bài viết ${i + 1}` })] }), _jsxs("div", { className: "flex flex-col gap-3 p-4 sm:flex-row sm:items-start", children: [article.imageUrl && (_jsx("div", { className: "flex flex-shrink-0 items-center justify-center rounded-md bg-slate-50 p-2 sm:w-40", children: _jsx(OptionImage, { src: article.imageUrl, alt: article.name || `Article ${i + 1}`, className: "max-h-40 w-auto rounded-md object-contain" }) })), article.content && (_jsx("div", { className: "prose prose-sm prose-slate max-w-none flex-1 text-[14px] leading-relaxed text-slate-700", children: article.content.split('\n').map((line, j) => (_jsx("p", { className: "mb-2 last:mb-0", children: line }, j))) }))] })] }, i))) })), !hasArticles && (_jsxs("div", { className: "space-y-6 text-slate-700", children: [questionData.groupContent && (_jsx("div", { className: "prose prose-slate prose-p:leading-relaxed prose-p:mb-3 max-w-none text-[15px]", dangerouslySetInnerHTML: {
-                                            __html: questionData.groupContent
-                                                .replace(/\{(\d+)\}/g, (_m, num) => `<span style="display:inline-block;min-width:100px;padding:1px 5px;margin:0 5px;background:#eef2ff;border-bottom:2px solid #6366f1;color:#4f46e5;font-weight:700;font-size:0.85em;text-align:center;vertical-align:baseline;letter-spacing:2px">———(${Number(num) + 1})———</span>`)
-                                                .split('\n')
-                                                .map((line) => `<p class="last:mb-0">${line}</p>`)
-                                                .join(''),
-                                        } })), questionData.groupImageUrl && (_jsxs("div", { className: "mt-5 relative overflow-hidden rounded-xl border border-slate-200/60 bg-slate-50 shadow-sm transition-all hover:shadow-md", children: [_jsx("div", { className: "flex items-center justify-between border-b border-slate-200/60 bg-slate-100/50 px-4 py-2", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-slate-300" }), _jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-slate-300" }), _jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-slate-300" }), _jsx("span", { className: "ml-2 text-[11px] font-semibold uppercase tracking-wider text-slate-500", children: "T\u00E0i li\u1EC7u \u0111\u00EDnh k\u00E8m" })] }) }), _jsx("div", { className: "flex items-center justify-center p-4 min-h-[160px]", children: _jsx(OptionImage, { src: questionData.groupImageUrl, alt: "Group illustration", className: "max-h-64 w-auto rounded-lg object-contain" }) })] }))] }))] })] })), _jsxs(KidQuestionCard, { title: isMultipleAnswers ? 'Chọn các đáp án đúng' : 'Chọn đáp án đúng', points: questionData.points, review: isReviewMode && hasAnswered ? (isAnswerCorrect ? 'correct' : 'wrong') : null, children: [(questionData.askerName || questionData.answererName) && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg bg-gray-50 p-2.5 text-xs text-gray-600", children: [_jsx(Users, { className: "h-4 w-4 text-gray-400" }), questionData.askerName && (_jsxs("span", { children: [_jsx("strong", { children: "Ng\u01B0\u1EDDi h\u1ECFi:" }), " ", questionData.askerName] })), questionData.askerName && questionData.answererName && _jsx("span", { children: "\u2022" }), questionData.answererName && (_jsxs("span", { children: [_jsx("strong", { children: "Ng\u01B0\u1EDDi tr\u1EA3 l\u1EDDi:" }), " ", questionData.answererName] }))] })), showQuestion && (_jsx(KidPrompt, { children: isRichTextEmpty(questionData.question) ? (_jsx("h3", { className: "text-sm font-semibold text-gray-800", children: "C\u00E2u h\u1ECFi ch\u01B0a \u0111\u01B0\u1EE3c nh\u1EADp" })) : (_jsx(RichTextHtml, { html: questionData.question, className: "text-sm font-semibold text-gray-800" })) })), showImage && (imagePreviewUrl || cleanImageUrl) && (_jsxs("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100", children: [_jsx("div", { className: "border-b border-gray-100 px-3 py-1.5", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-red-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-yellow-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-green-400" }), _jsx("span", { className: "ml-2 text-xs font-medium text-gray-500", children: "H\u00ECnh \u1EA3nh" })] }) }), _jsx("div", { className: "flex items-center justify-center p-4", children: isLoading ? (_jsx("div", { className: "flex h-48 items-center justify-center", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-blue-500" }) })) : (
+    const groupStemPlain = [
+        String(questionData.groupContent || ''),
+        ...(hasArticles
+            ? questionData.articles.map((article) => article.content || '')
+            : []),
+    ]
+        .join(' ')
+        .replace(/<[^>]+>/g, ' ');
+    const collapseGroupStem = isReviewMode && groupStemPlain.length > COLLAPSE_CHAR_THRESHOLD;
+    return (_jsxs("div", { className: "space-y-4", children: [passageList.length > 0 && (_jsxs("div", { className: "rounded-xl border border-indigo-100 bg-white p-5 shadow-xs", children: [_jsxs("div", { className: "mb-3 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-indigo-700", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: "B\u00E0i \u0111\u1ECDc (Reading Passage)" })] }), _jsx(KidCollapsibleBlock, { collapse: isReviewMode &&
+                            passageList.join(' ').replace(/<[^>]+>/g, ' ').length >
+                                COLLAPSE_CHAR_THRESHOLD, children: _jsx("div", { className: "space-y-3", children: passageList.map((p, i) => (_jsx("div", { className: "prose prose-sm max-w-none text-gray-800 leading-relaxed", dangerouslySetInnerHTML: { __html: p } }, i))) }) })] })), glossaryList.length > 0 && (_jsxs("div", { className: "rounded-xl border border-amber-200 bg-amber-50/60 p-4 shadow-xs", children: [_jsx("div", { className: "mb-2 text-xs font-bold uppercase tracking-wider text-amber-800", children: "T\u1EEB v\u1EF1ng (Glossary)" }), _jsx("div", { className: "space-y-1.5 text-xs text-amber-900 leading-relaxed", children: glossaryList.map((g, i) => (_jsx("div", { dangerouslySetInnerHTML: { __html: g } }, i))) })] })), questionData.isGroup && (questionData.groupTitle || questionData.groupSubtitle || questionData.groupContent || questionData.groupImageUrl || hasArticles) && (_jsxs("div", { className: "relative overflow-hidden rounded-2xl border border-indigo-100 bg-white shadow-sm ring-1 ring-black/5 transition-all", children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-indigo-50/80 via-white to-blue-50/30 opacity-70 pointer-events-none" }), _jsx("div", { className: "absolute left-0 top-0 bottom-0 w-1.5 bg-gradient-to-b from-indigo-500 to-blue-600 rounded-l-2xl" }), _jsxs("div", { className: "relative p-6 sm:p-7", children: [_jsxs("div", { className: "flex items-start gap-4 mb-5 border-b border-indigo-50/60 pb-4", children: [_jsx("div", { className: "flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-100 to-blue-100 shadow-inner ring-1 ring-indigo-200/50", children: _jsx(BookOpen, { className: "h-5 w-5 text-indigo-600" }) }), _jsxs("div", { className: "flex-1 pt-1", children: [_jsx("div", { className: "flex items-center gap-2 mb-1", children: questionData.groupNumber && (_jsxs("span", { className: "inline-flex items-center rounded-md bg-indigo-50 px-2 py-1 text-xs font-semibold text-indigo-700 ring-1 ring-inset ring-indigo-700/10", children: ["B\u00E0i \u0111\u1ECDc ", questionData.groupNumber] })) }), questionData.groupTitle && (_jsx("h4", { className: "text-xl font-bold text-slate-800 leading-tight tracking-tight", children: questionData.groupTitle })), questionData.groupSubtitle && (_jsx("p", { className: "mt-1 text-sm text-slate-500 leading-snug", children: questionData.groupSubtitle }))] })] }), _jsxs(KidCollapsibleBlock, { collapse: collapseGroupStem, children: [hasArticles && (_jsx("div", { className: "flex flex-col gap-4", children: questionData.articles.map((article, i) => (_jsxs("div", { className: "group relative overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm transition-all hover:shadow-md hover:border-indigo-200", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-slate-100 bg-gradient-to-r from-indigo-50/60 to-blue-50/40 px-4 py-2.5", children: [_jsx("div", { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-blue-600 text-xs font-bold text-white shadow-sm", children: String.fromCharCode(65 + i) }), _jsx("h5", { className: "flex-1 truncate text-sm font-bold text-slate-800", children: article.name || `Bài viết ${i + 1}` })] }), _jsxs("div", { className: "flex flex-col gap-3 p-4 sm:flex-row sm:items-start", children: [article.imageUrl && (_jsx("div", { className: "flex flex-shrink-0 items-center justify-center rounded-md bg-slate-50 p-2 sm:w-40", children: _jsx(OptionImage, { src: article.imageUrl, alt: article.name || `Article ${i + 1}`, className: "max-h-40 w-auto rounded-md object-contain" }) })), article.content && (_jsx("div", { className: "prose prose-sm prose-slate max-w-none flex-1 text-[14px] leading-relaxed text-slate-700", children: article.content.split('\n').map((line, j) => (_jsx("p", { className: "mb-2 last:mb-0", children: line }, j))) }))] })] }, i))) })), !hasArticles && (_jsxs("div", { className: "space-y-6 text-slate-700", children: [questionData.groupContent && (_jsx("div", { className: "prose prose-slate prose-p:leading-relaxed prose-p:mb-3 max-w-none text-[15px]", dangerouslySetInnerHTML: {
+                                                    __html: questionData.groupContent
+                                                        .replace(/\{(\d+)\}/g, (_m, num) => `<span style="display:inline-block;min-width:100px;padding:1px 5px;margin:0 5px;background:#eef2ff;border-bottom:2px solid #6366f1;color:#4f46e5;font-weight:700;font-size:0.85em;text-align:center;vertical-align:baseline;letter-spacing:2px">———(${Number(num) + 1})———</span>`)
+                                                        .split('\n')
+                                                        .map((line) => `<p class="last:mb-0">${line}</p>`)
+                                                        .join(''),
+                                                } })), questionData.groupImageUrl && (_jsxs("div", { className: "mt-5 relative overflow-hidden rounded-xl border border-slate-200/60 bg-slate-50 shadow-sm transition-all hover:shadow-md", children: [_jsx("div", { className: "flex items-center justify-between border-b border-slate-200/60 bg-slate-100/50 px-4 py-2", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-slate-300" }), _jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-slate-300" }), _jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-slate-300" }), _jsx("span", { className: "ml-2 text-[11px] font-semibold uppercase tracking-wider text-slate-500", children: "T\u00E0i li\u1EC7u \u0111\u00EDnh k\u00E8m" })] }) }), _jsx("div", { className: "flex items-center justify-center p-4 min-h-[160px]", children: _jsx(OptionImage, { src: questionData.groupImageUrl, alt: "Group illustration", className: "max-h-64 w-auto rounded-lg object-contain" }) })] }))] }))] })] })] })), _jsxs(KidQuestionCard, { title: isMultipleAnswers ? 'Chọn các đáp án đúng' : 'Chọn đáp án đúng', points: reviewItemPoints(isReviewMode, questionData.points), review: isReviewMode && hasAnswered ? (isAnswerCorrect ? 'correct' : 'wrong') : null, children: [(questionData.askerName || questionData.answererName) && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg bg-gray-50 p-2.5 text-xs text-gray-600", children: [_jsx(Users, { className: "h-4 w-4 text-gray-400" }), questionData.askerName && (_jsxs("span", { children: [_jsx("strong", { children: "Ng\u01B0\u1EDDi h\u1ECFi:" }), " ", questionData.askerName] })), questionData.askerName && questionData.answererName && _jsx("span", { children: "\u2022" }), questionData.answererName && (_jsxs("span", { children: [_jsx("strong", { children: "Ng\u01B0\u1EDDi tr\u1EA3 l\u1EDDi:" }), " ", questionData.answererName] }))] })), showQuestion && (_jsx(KidPrompt, { children: isRichTextEmpty(questionData.question) ? (_jsx("h3", { className: "text-sm font-semibold text-gray-800", children: "C\u00E2u h\u1ECFi ch\u01B0a \u0111\u01B0\u1EE3c nh\u1EADp" })) : (_jsx(RichTextHtml, { html: questionData.question, className: "text-sm font-semibold text-gray-800" })) })), showImage && (imagePreviewUrl || cleanImageUrl) && (_jsxs("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100", children: [_jsx("div", { className: "border-b border-gray-100 px-3 py-1.5", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-red-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-yellow-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-green-400" }), _jsx("span", { className: "ml-2 text-xs font-medium text-gray-500", children: "H\u00ECnh \u1EA3nh" })] }) }), _jsx("div", { className: "flex items-center justify-center p-4", children: isLoading ? (_jsx("div", { className: "flex h-48 items-center justify-center", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-blue-500" }) })) : (
                                 /* eslint-disable-next-line @next/next/no-img-element */
                                 _jsx("img", { src: imagePreviewUrl || cleanImageUrl, alt: "Question illustration", className: "max-h-56 w-auto object-contain rounded-md", onError: (e) => {
                                         const target = e.target;

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

@@ -5,7 +5,7 @@ import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
 import { RichTextHtml } from '../../../../components/shared/RichTextHtml';
 import { isRichTextEmpty } from '../../../../shared/lib/rich-text';
 import { getChooseAnswerGroupOptionImageSrc, toChooseAnswerGroupImageUrls, } from '../../_shared/types/choose-the-correct-answer-group.type';
-import { KidChoiceRow, KidInstruction, KidPrompt, KidQuestionCard, optionLetter } from '../../_shared/components/compact';
+import { KidChoiceRow, KidInstruction, KidPrompt, KidQuestionCard, optionLetter, reviewItemPoints, reviewItemTitle } from '../../_shared/components/compact';
 function ClientImageItem({ url, alt }) {
     const { previewUrl, isLoading } = usePresignedFileUrl(url);
     const src = previewUrl ||
@@ -38,7 +38,7 @@ export function ChooseTheCorrectAnswerGroupClient({ questionData, isReviewMode =
     return (_jsxs("div", { className: "space-y-4", children: [_jsx(KidInstruction, { children: questionData.instruction }), toChooseAnswerGroupImageUrls(questionData.audioUrl).map((url, audioIndex) => (_jsx(ClientAudio, { url: url }, `group-audio-${audioIndex}`))), toChooseAnswerGroupImageUrls(questionData.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toChooseAnswerGroupImageUrls(questionData.imageUrl).map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh nhóm (${imageIndex + 1})` }, `group-image-${imageIndex}`))) })), questionData.passage && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-white p-5 shadow-xs", children: [_jsxs("div", { className: "mb-2.5 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-indigo-700", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: "B\u00E0i \u0111\u1ECDc (Reading Passage)" })] }), _jsx("div", { className: "overflow-x-auto", children: _jsx(RichTextHtml, { html: questionData.passage, className: "text-gray-800 leading-relaxed" }) })] })), items.map((item, itemIndex) => {
                 const selectedId = userAnswers[itemIndex];
                 const canSelect = !isReviewMode && !item.isExample && Boolean(onAnswerChange);
-                return (_jsxs(KidQuestionCard, { title: `Câu ${item.questionNumber || itemIndex + 1}`, points: item.points || 0, isExample: item.isExample, children: [!isRichTextEmpty(item.question) && (_jsx(KidPrompt, { children: _jsx(RichTextHtml, { html: item.question, className: "text-sm font-semibold leading-relaxed text-gray-800" }) })), toChooseAnswerGroupImageUrls(item.audioUrl).map((url, audioIndex) => (_jsx(ClientAudio, { url: url }, `${item.questionNumber}-audio-${audioIndex}`))), toChooseAnswerGroupImageUrls(item.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toChooseAnswerGroupImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1} (${imageIndex + 1})` }, `${item.questionNumber}-${imageIndex}`))) })), _jsx("div", { className: "space-y-1.5", children: item.options.map((option, optionIndex) => {
+                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, children: [!isRichTextEmpty(item.question) && (_jsx(KidPrompt, { children: _jsx(RichTextHtml, { html: item.question, className: "text-sm font-semibold leading-relaxed text-gray-800" }) })), toChooseAnswerGroupImageUrls(item.audioUrl).map((url, audioIndex) => (_jsx(ClientAudio, { url: url }, `${item.questionNumber}-audio-${audioIndex}`))), toChooseAnswerGroupImageUrls(item.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toChooseAnswerGroupImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1} (${imageIndex + 1})` }, `${item.questionNumber}-${imageIndex}`))) })), _jsx("div", { className: "space-y-1.5", children: item.options.map((option, optionIndex) => {
                                 const isCorrect = option.id === item.correctAnswer;
                                 const isSelected = option.id === selectedId;
                                 const optionImageSrc = getChooseAnswerGroupOptionImageSrc(option);

package/dist/components/questions/types/choose-then-answer-group/ChooseThenAnswerGroupClient.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, Lightbulb, X } from 'lucide-react';
 import { useT } from '../../../../shared/lib/i18n';
 import { cn } from '../../../../shared/lib/utils';
-import { KidInstruction, KidQuestionCard } from '../../_shared/components/compact';
+import { KidInstruction, KidQuestionCard, reviewItemPoints, reviewItemTitle } from '../../_shared/components/compact';
 function emptyAnswer() {
     return { optionId: '', text: '' };
 }
@@ -43,7 +43,7 @@ export function ChooseThenAnswerGroupClient({ questionData, isReviewMode = false
                         text: next.text ?? current.text,
                     });
                 };
-                return (_jsx(KidQuestionCard, { title: t('question.viewer.questionN', { n: item.questionNumber || itemIndex + 1 }), points: points, isExample: item.isExample, children: _jsx("div", { className: "space-y-3", children: _jsxs("div", { className: "min-w-0 space-y-2.5", children: [(parts[0] || parts.slice(1).join('{0}')) ? (_jsxs("p", { className: "text-sm font-semibold leading-7 text-slate-800", children: [_jsx("span", { children: parts[0] || '' }), _jsx("span", { className: "mx-1 inline-block min-w-[3rem] border-b-2 border-dashed border-slate-300 align-baseline" }), _jsx("span", { children: parts.slice(1).join('{0}') })] })) : null, _jsx("div", { className: "flex flex-wrap items-center gap-2.5", role: "group", "aria-label": t('question.viewer.questionN', {
+                return (_jsx(KidQuestionCard, { title: reviewItemTitle(item.questionNumber || itemIndex + 1, isReviewMode, t('question.viewer.questionN', { n: item.questionNumber || itemIndex + 1 })), points: reviewItemPoints(isReviewMode, points), isExample: item.isExample, children: _jsx("div", { className: "space-y-3", children: _jsxs("div", { className: "min-w-0 space-y-2.5", children: [(parts[0] || parts.slice(1).join('{0}')) ? (_jsxs("p", { className: "text-sm font-semibold leading-7 text-slate-800", children: [_jsx("span", { children: parts[0] || '' }), _jsx("span", { className: "mx-1 inline-block min-w-[3rem] border-b-2 border-dashed border-slate-300 align-baseline" }), _jsx("span", { children: parts.slice(1).join('{0}') })] })) : null, _jsx("div", { className: "flex flex-wrap items-center gap-2.5", role: "group", "aria-label": t('question.viewer.questionN', {
                                         n: item.questionNumber || itemIndex + 1,
                                     }), children: item.options.map((option) => {
                                         const selected = current.optionId === option.id;

package/dist/components/questions/types/cross-out-word-group/CrossOutWordGroupClient.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Lightbulb } from 'lucide-react';
 import { cn } from '../../../../shared/lib/utils';
 import { tokenizeCrossOutQuestion } from './tokenize';
-import { KidInstruction, KidQuestionCard } from '../../_shared/components/compact';
+import { KidInstruction, KidQuestionCard, reviewItemPoints, reviewItemTitle } from '../../_shared/components/compact';
 function normalizeWord(word) {
     return word.replace(/[^\p{L}\p{N}'-]/gu, '').toLowerCase();
 }
@@ -48,7 +48,7 @@ export function CrossOutWordGroupClient({ questionData, isReviewMode = false, us
                 const selectedWord = userValue?.crossOut || '';
                 const replaceWith = userValue?.replaceWith || '';
                 const correct = item.correctAnswer;
-                return (_jsxs(KidQuestionCard, { title: `Câu ${item.questionNumber || itemIndex + 1}`, points: item.points || 0, isExample: item.isExample, headerExtra: isReviewMode ? (_jsx("span", { className: cn('rounded-full px-2 py-0.5 text-xs font-semibold', isReplace
+                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, headerExtra: isReviewMode ? (_jsx("span", { className: cn('rounded-full px-2 py-0.5 text-xs font-semibold', isReplace
                             ? 'bg-violet-100 text-violet-700'
                             : 'bg-sky-100 text-sky-700'), children: isReplace ? 'Gạch + thay' : 'Chỉ gạch' })) : null, children: [isReplace ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { className: "text-xs font-semibold text-slate-600", children: "T\u1EEB \u0111\u00FAng:" }), _jsx("input", { type: "text", value: replaceWith, disabled: !canSelect, onChange: (event) => emit(itemIndex, {
                                         type: item.type,

package/dist/components/questions/types/crossword-puzzle/CrosswordPuzzleClient.js

@@ -32,7 +32,9 @@ export function CrosswordPuzzleClient({ content, correctAnswer, isReviewMode = f
         }
         return { cellMap: cMap, clueNumberMap: numMap };
     }, [acrossClues, downClues]);
-    return (_jsxs("div", { className: "flex flex-col items-stretch gap-3 text-left", children: [_jsxs("p", { className: "w-full text-left text-sm font-semibold text-gray-800", children: [_jsxs("span", { className: "font-bold", children: [displayNumber, "."] }), instructionText ? ` ${instructionText}` : ''] }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-6 items-start", children: [_jsxs("div", { className: "lg:col-span-5 flex flex-col gap-4", children: [_jsxs("div", { className: "rounded-lg border border-blue-200 bg-blue-50/50 p-4", children: [_jsxs("h4", { className: "font-bold text-blue-900 mb-2.5 flex items-center gap-2", children: [_jsx("span", { className: "px-2 py-0.5 rounded bg-blue-600 text-white text-xs font-semibold", children: "Across" }), _jsx("span", { children: "H\u00E0ng ngang" })] }), _jsx("div", { className: "flex flex-col gap-2 max-h-60 overflow-y-auto pr-1", children: acrossClues.map((c) => {
+    return (_jsxs("div", { className: "flex w-full min-w-0 flex-col items-stretch gap-3 text-left", children: [_jsxs("p", { className: "w-full text-left text-sm font-semibold text-gray-800", children: [!isReviewMode ? (_jsxs("span", { className: "font-bold", children: [displayNumber, "."] })) : null, instructionText
+                        ? `${!isReviewMode ? ' ' : ''}${instructionText}`
+                        : ''] }), _jsxs("div", { className: "flex w-full min-w-0 flex-col gap-4", children: [_jsxs("div", { className: "grid min-w-0 grid-cols-1 gap-4 md:grid-cols-2", children: [_jsxs("div", { className: "rounded-lg border border-blue-200 bg-blue-50/50 p-4", children: [_jsxs("h4", { className: "font-bold text-blue-900 mb-2.5 flex items-center gap-2", children: [_jsx("span", { className: "px-2 py-0.5 rounded bg-blue-600 text-white text-xs font-semibold", children: "Across" }), _jsx("span", { children: "H\u00E0ng ngang" })] }), _jsx("div", { className: "flex flex-col gap-2 max-h-60 overflow-y-auto pr-1", children: acrossClues.map((c) => {
                                             const answer = correctAnswer?.answers?.[`across-${c.number}`];
                                             const userAns = userAnswers[`across-${c.number}`];
                                             return (_jsxs("div", { className: "flex items-start gap-2 text-sm bg-white p-2 rounded border border-blue-100", children: [_jsxs("span", { className: "font-bold text-blue-700 min-w-[20px]", children: [c.number, "."] }), _jsxs("div", { className: "flex-1", children: [_jsxs("span", { className: "text-gray-800", children: [c.clue, c.isExample && (_jsx("span", { className: "ml-1 rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-bold text-amber-700", children: "Example" }))] }), !isReviewMode && onAnswerChange && !c.isExample ? (_jsx("input", { type: "text", value: userAns || '', maxLength: c.length, onChange: (event) => onAnswerChange(`across-${c.number}`, event.target.value.toUpperCase()), placeholder: `${c.length} chữ`, className: "mt-1.5 w-full rounded border border-blue-200 px-2 py-1 text-sm font-semibold uppercase tracking-wider outline-none focus:border-blue-500" })) : null, isReviewMode && answer && (_jsxs("div", { className: "text-xs mt-1", children: [_jsx("span", { className: "text-gray-500", children: "\u0110\u00E1p \u00E1n: " }), _jsx("span", { className: "font-bold text-green-700", children: answer }), userAns && userAns !== answer && (_jsx("span", { className: "ml-2 line-through text-red-500 font-semibold", children: userAns }))] }))] }), _jsxs("span", { className: "text-xs text-gray-400", children: ["(", c.length, " ch\u1EEF)"] })] }, `across-${c.number}`));
@@ -40,57 +42,58 @@ export function CrosswordPuzzleClient({ content, correctAnswer, isReviewMode = f
                                             const answer = correctAnswer?.answers?.[`down-${c.number}`];
                                             const userAns = userAnswers[`down-${c.number}`];
                                             return (_jsxs("div", { className: "flex items-start gap-2 text-sm bg-white p-2 rounded border border-purple-100", children: [_jsxs("span", { className: "font-bold text-purple-700 min-w-[20px]", children: [c.number, "."] }), _jsxs("div", { className: "flex-1", children: [_jsxs("span", { className: "text-gray-800", children: [c.clue, c.isExample && (_jsx("span", { className: "ml-1 rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-bold text-amber-700", children: "Example" }))] }), !isReviewMode && onAnswerChange && !c.isExample ? (_jsx("input", { type: "text", value: userAns || '', maxLength: c.length, onChange: (event) => onAnswerChange(`down-${c.number}`, event.target.value.toUpperCase()), placeholder: `${c.length} chữ`, className: "mt-1.5 w-full rounded border border-purple-200 px-2 py-1 text-sm font-semibold uppercase tracking-wider outline-none focus:border-purple-500" })) : null, isReviewMode && answer && (_jsxs("div", { className: "text-xs mt-1", children: [_jsx("span", { className: "text-gray-500", children: "\u0110\u00E1p \u00E1n: " }), _jsx("span", { className: "font-bold text-green-700", children: answer }), userAns && userAns !== answer && (_jsx("span", { className: "ml-2 line-through text-red-500 font-semibold", children: userAns }))] }))] }), _jsxs("span", { className: "text-xs text-gray-400", children: ["(", c.length, " ch\u1EEF)"] })] }, `down-${c.number}`));
-                                        }) })] })] }), _jsx("div", { className: "lg:col-span-7 flex justify-center overflow-x-auto p-4 bg-gray-50 rounded-xl border border-gray-200", children: _jsx("div", { className: "inline-grid gap-1", style: {
-                                gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
-                            }, children: Array.from({ length: rows }).map((_, rIdx) => {
-                                const r = rIdx + 1;
-                                return Array.from({ length: cols }).map((_, cIdx) => {
-                                    const c = cIdx + 1;
-                                    const key = `${r}-${c}`;
-                                    const cellInfo = cellMap.get(key);
-                                    const clueNum = clueNumberMap.get(key);
-                                    if (!cellInfo) {
-                                        return (_jsx("div", { className: "h-8 w-8 sm:h-9 sm:w-9 md:h-10 md:w-10 bg-transparent" }, key));
-                                    }
-                                    const isMarked = content?.markedColumn && c === content.markedColumn;
-                                    const isExample = Boolean(cellInfo.across?.isExample || cellInfo.down?.isExample);
-                                    // If in review mode or cell is an example, display correct answer letter
-                                    let previewLetter = '';
-                                    if (isReviewMode || isExample) {
-                                        if (cellInfo.across && correctAnswer?.answers) {
-                                            const word = correctAnswer.answers[`across-${cellInfo.across.number}`] || '';
-                                            const offset = c - cellInfo.across.startCol;
-                                            previewLetter = word[offset] || '';
+                                        }) })] })] }), _jsx("div", { className: "w-full min-w-0 overflow-x-auto rounded-xl border border-gray-200 bg-gray-50", children: _jsx("div", { className: "flex w-max min-w-full justify-center p-4", children: _jsx("div", { className: "inline-grid shrink-0 gap-1 [--cw-cell:2rem] sm:[--cw-cell:2.25rem] md:[--cw-cell:2.5rem]", style: {
+                                    gridTemplateColumns: `repeat(${cols}, var(--cw-cell))`,
+                                    gridAutoRows: 'var(--cw-cell)',
+                                }, children: Array.from({ length: rows }).map((_, rIdx) => {
+                                    const r = rIdx + 1;
+                                    return Array.from({ length: cols }).map((_, cIdx) => {
+                                        const c = cIdx + 1;
+                                        const key = `${r}-${c}`;
+                                        const cellInfo = cellMap.get(key);
+                                        const clueNum = clueNumberMap.get(key);
+                                        if (!cellInfo) {
+                                            return (_jsx("div", { className: "size-[var(--cw-cell)] bg-transparent" }, key));
                                         }
-                                        else if (cellInfo.down && correctAnswer?.answers) {
-                                            const word = correctAnswer.answers[`down-${cellInfo.down.number}`] || '';
-                                            const offset = r - cellInfo.down.startRow;
-                                            previewLetter = word[offset] || '';
+                                        const isMarked = content?.markedColumn && c === content.markedColumn;
+                                        const isExample = Boolean(cellInfo.across?.isExample || cellInfo.down?.isExample);
+                                        // If in review mode or cell is an example, display correct answer letter
+                                        let previewLetter = '';
+                                        if (isReviewMode || isExample) {
+                                            if (cellInfo.across && correctAnswer?.answers) {
+                                                const word = correctAnswer.answers[`across-${cellInfo.across.number}`] || '';
+                                                const offset = c - cellInfo.across.startCol;
+                                                previewLetter = word[offset] || '';
+                                            }
+                                            else if (cellInfo.down && correctAnswer?.answers) {
+                                                const word = correctAnswer.answers[`down-${cellInfo.down.number}`] || '';
+                                                const offset = r - cellInfo.down.startRow;
+                                                previewLetter = word[offset] || '';
+                                            }
                                         }
-                                    }
-                                    else {
-                                        if (cellInfo.across) {
-                                            const word = userAnswers[`across-${cellInfo.across.number}`] || '';
-                                            previewLetter = word[c - cellInfo.across.startCol] || '';
+                                        else {
+                                            if (cellInfo.across) {
+                                                const word = userAnswers[`across-${cellInfo.across.number}`] || '';
+                                                previewLetter = word[c - cellInfo.across.startCol] || '';
+                                            }
+                                            if (!previewLetter && cellInfo.down) {
+                                                const word = userAnswers[`down-${cellInfo.down.number}`] || '';
+                                                previewLetter = word[r - cellInfo.down.startRow] || '';
+                                            }
+                                            if (!previewLetter) {
+                                                previewLetter = userAnswers[key] || '';
+                                            }
                                         }
-                                        if (!previewLetter && cellInfo.down) {
-                                            const word = userAnswers[`down-${cellInfo.down.number}`] || '';
-                                            previewLetter = word[r - cellInfo.down.startRow] || '';
+                                        const cellBg = isMarked ? 'bg-gray-400 border-gray-400 shadow-sm ring-1 ring-gray-400/50' : 'bg-gray-100 border-gray-300';
+                                        let textColor = isExample
+                                            ? 'text-orange-600 font-bold italic'
+                                            : isMarked
+                                                ? 'text-gray-950 font-bold'
+                                                : 'text-gray-800 font-bold';
+                                        if (isReviewMode && previewLetter && !isExample) {
+                                            textColor = 'text-green-700 font-extrabold';
                                         }
-                                        if (!previewLetter) {
-                                            previewLetter = userAnswers[key] || '';
-                                        }
-                                    }
-                                    const cellBg = isMarked ? 'bg-gray-400 border-gray-400 shadow-sm ring-1 ring-gray-400/50' : 'bg-gray-100 border-gray-300';
-                                    let textColor = isExample
-                                        ? 'text-orange-600 font-bold italic'
-                                        : isMarked
-                                            ? 'text-gray-950 font-bold'
-                                            : 'text-gray-800 font-bold';
-                                    if (isReviewMode && previewLetter && !isExample) {
-                                        textColor = 'text-green-700 font-extrabold';
-                                    }
-                                    return (_jsxs("div", { className: `relative flex items-center justify-center rounded border-2 font-bold shadow-sm h-8 w-8 sm:h-9 sm:w-9 md:h-10 md:w-10 text-sm sm:text-base md:text-lg ${cellBg} ${textColor}`, children: [clueNum && (_jsx("span", { className: "absolute top-0.5 left-1 text-[9px] font-bold text-gray-500 leading-none", children: clueNum })), _jsx("span", { children: previewLetter })] }, key));
-                                });
-                            }) }) })] }), (content?.type === 'HIDDEN_WORD' || content?.markedColumn) && (_jsxs("div", { className: "rounded-lg border border-amber-200 bg-amber-50 p-3", children: [_jsx("label", { className: "block text-sm font-semibold text-amber-900 mb-1", children: "What's the hidden word?" }), !isReviewMode && onAnswerChange ? (_jsx("input", { type: "text", value: userAnswers['hidden-word'] || '', onChange: (event) => onAnswerChange('hidden-word', event.target.value.toUpperCase()), placeholder: "Hidden word", className: "w-full rounded border border-amber-300 px-3 py-1.5 text-sm font-semibold uppercase tracking-wider outline-none focus:border-amber-500" })) : (_jsxs("div", { className: "text-sm", children: [userAnswers['hidden-word'] && (_jsx("span", { className: "font-semibold text-gray-800", children: userAnswers['hidden-word'] })), isReviewMode && correctAnswer?.answers?.['hidden-word'] && (_jsxs("div", { className: "text-xs mt-1", children: [_jsx("span", { className: "text-gray-500", children: "\u0110\u00E1p \u00E1n: " }), _jsx("span", { className: "font-bold text-green-700", children: correctAnswer.answers['hidden-word'] })] }))] }))] }))] }));
+                                        return (_jsxs("div", { className: `relative flex size-[var(--cw-cell)] items-center justify-center rounded border-2 font-bold shadow-sm text-sm sm:text-base md:text-lg ${cellBg} ${textColor}`, children: [clueNum && (_jsx("span", { className: "absolute top-0.5 left-1 text-[9px] font-bold text-gray-500 leading-none", children: clueNum })), _jsx("span", { children: previewLetter })] }, key));
+                                    });
+                                }) }) }) })] }), (content?.type === 'HIDDEN_WORD' || content?.markedColumn) && (_jsxs("div", { className: "rounded-lg border border-amber-200 bg-amber-50 p-3", children: [_jsx("label", { className: "block text-sm font-semibold text-amber-900 mb-1", children: "What's the hidden word?" }), !isReviewMode && onAnswerChange ? (_jsx("input", { type: "text", value: userAnswers['hidden-word'] || '', onChange: (event) => onAnswerChange('hidden-word', event.target.value.toUpperCase()), placeholder: "Hidden word", className: "w-full rounded border border-amber-300 px-3 py-1.5 text-sm font-semibold uppercase tracking-wider outline-none focus:border-amber-500" })) : (_jsxs("div", { className: "text-sm", children: [userAnswers['hidden-word'] && (_jsx("span", { className: "font-semibold text-gray-800", children: userAnswers['hidden-word'] })), isReviewMode && correctAnswer?.answers?.['hidden-word'] && (_jsxs("div", { className: "text-xs mt-1", children: [_jsx("span", { className: "text-gray-500", children: "\u0110\u00E1p \u00E1n: " }), _jsx("span", { className: "font-bold text-green-700", children: correctAnswer.answers['hidden-word'] })] }))] }))] }))] }));
 }

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

@@ -9,7 +9,7 @@ import { extractPlaceholderIndices, formatBlankAnswersDisplay, getPrimaryBlankAn
 import { parseFillBlankSegments } from '../../../../shared/lib/utils/fill-in-blank';
 import { cn } from '../../../../shared/lib/utils';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-import { KidPrompt, KidQuestionCard } from '../../_shared/components/compact';
+import { KidPrompt, KidQuestionCard, reviewItemTitle } from '../../_shared/components/compact';
 // Sub-component: Resolve presigned URL for group image
 function GroupImage({ src, alt, className }) {
     const { previewUrl, isLoading } = usePresignedFileUrl(src);
@@ -228,7 +228,7 @@ export function FillInBlankClient({ questionData, questionConfig, onSubmit, isRe
                 const userInput = answers[index] || '';
                 const isCorrect = isReviewMode && isAnswerCorrect(index, userInput);
                 const hasAnswered = userInput.trim() !== '';
-                return (_jsxs(KidQuestionCard, { icon: _jsx(PenLine, { className: "h-3.5 w-3.5" }), title: `Câu ${index + 1}: Điền vào chỗ trống`, review: isReviewMode && hasAnswered ? (isCorrect ? 'correct' : 'wrong') : null, 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(KidPrompt, { 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
+                return (_jsxs(KidQuestionCard, { icon: _jsx(PenLine, { className: "h-3.5 w-3.5" }), title: reviewItemTitle(index + 1, isReviewMode, `Câu ${index + 1}: Điền vào chỗ trống`), review: isReviewMode && hasAnswered ? (isCorrect ? 'correct' : 'wrong') : null, 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(KidPrompt, { 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'

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

@@ -1,11 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
+import { useT } from '../../../../shared/lib/i18n';
 import { acceptedAnswerList } from './blank-utils';
 function AnswerOrList({ answers }) {
+    const t = useT();
+    const [expanded, setExpanded] = useState(false);
     if (answers.length === 0) {
         return _jsx("span", { className: "font-semibold text-green-900", children: "(tr\u1ED1ng)" });
     }
-    return (_jsx(_Fragment, { children: answers.map((answer, index) => (_jsxs(Fragment, { children: [index > 0 && (_jsx("span", { className: "mx-1 text-xs font-normal italic text-green-600", children: "ho\u1EB7c" })), _jsx("span", { className: "font-semibold text-green-900", children: answer })] }, `${answer}-${index}`))) }));
+    const visible = expanded ? answers : answers.slice(0, 1);
+    return (_jsxs(_Fragment, { children: [visible.map((answer, index) => (_jsxs(Fragment, { children: [index > 0 && (_jsx("span", { className: "mx-1 text-xs font-normal italic text-green-600", children: "ho\u1EB7c" })), _jsx("span", { className: "font-semibold text-green-900", children: answer })] }, `${answer}-${index}`))), answers.length > 1 ? (_jsx("button", { type: "button", onClick: () => setExpanded((value) => !value), className: "ml-1 text-xs font-semibold text-indigo-600 hover:text-indigo-800", children: expanded
+                    ? t('question.viewer.collapsePassage')
+                    : t('question.viewer.expandPassage') })) : null] }));
 }
 export function FillInBlankAnswerKey({ answersByBlank, blankIndices, }) {
     const rows = blankIndices.map((blankIndex, order) => ({

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { BookOpen, Lightbulb, PenLine, Volume2 } from 'lucide-react';
 import { cn } from '../../../../shared/lib/utils';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-import { KidInstruction, KidPrompt, KidQuestionCard } from '../../_shared/components/compact';
+import { COLLAPSE_CHAR_THRESHOLD, KidCollapsibleBlock, KidInstruction, KidPrompt, KidQuestionCard, reviewItemPoints, reviewItemTitle, } from '../../_shared/components/compact';
 import { FillInBlankAnswerKey } from './FillInBlankAnswerKey';
 import { blankSlotCount, extractPlaceholderIndices, isBlankMatch, padStudentAnswers, resolveBlankOptions, splitStem, splitStemTextDecorations, toFillInBlankImageUrls, } from './blank-utils';
 const STEM_MARK_STYLE = {
@@ -66,7 +66,9 @@ export function FillInBlankGroupClient({ questionData, isReviewMode = false, use
         next[itemIndex] = { answers: current };
         onAnswerChange(next);
     };
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx(KidInstruction, { children: questionData.instruction }), questionData.passage && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-white p-5 shadow-xs", children: [_jsxs("div", { className: "mb-2.5 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-indigo-700", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: "B\u00E0i \u0111\u1ECDc" })] }), _jsx("div", { className: "prose prose-sm max-w-none leading-relaxed text-gray-800", dangerouslySetInnerHTML: { __html: questionData.passage } })] })), questionData.audioUrl && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2", children: [_jsx(Volume2, { className: "h-4 w-4 text-slate-500" }), _jsx(MediaPreview, { src: questionData.audioUrl, kind: "audio", alt: "Group audio" })] })), toFillInBlankImageUrls(questionData.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: toFillInBlankImageUrls(questionData.imageUrl).map((url, imageIndex) => (_jsx(MediaPreview, { src: url, kind: "image", alt: `Group image ${imageIndex + 1}` }, `group-image-${imageIndex}`))) })), groupHints.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: groupHints.map((hint) => (_jsx("span", { className: "rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700", children: hint }, hint))) })), _jsx("div", { className: "grid grid-cols-1 gap-3", children: items.map((item, itemIndex) => {
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(KidInstruction, { children: questionData.instruction }), questionData.passage && (_jsx(KidCollapsibleBlock, { collapse: isReviewMode &&
+                    questionData.passage.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim().length >
+                        COLLAPSE_CHAR_THRESHOLD, children: _jsxs("div", { className: "rounded-xl border border-gray-200 bg-white p-5 shadow-xs", children: [_jsxs("div", { className: "mb-2.5 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-indigo-700", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: "B\u00E0i \u0111\u1ECDc" })] }), _jsx("div", { className: "prose prose-sm max-w-none leading-relaxed text-gray-800", dangerouslySetInnerHTML: { __html: questionData.passage } })] }) })), questionData.audioUrl && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2", children: [_jsx(Volume2, { className: "h-4 w-4 text-slate-500" }), _jsx(MediaPreview, { src: questionData.audioUrl, kind: "audio", alt: "Group audio" })] })), toFillInBlankImageUrls(questionData.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: toFillInBlankImageUrls(questionData.imageUrl).map((url, imageIndex) => (_jsx(MediaPreview, { src: url, kind: "image", alt: `Group image ${imageIndex + 1}` }, `group-image-${imageIndex}`))) })), groupHints.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: groupHints.map((hint) => (_jsx("span", { className: "rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700", children: hint }, hint))) })), _jsx("div", { className: "grid grid-cols-1 gap-3", children: items.map((item, itemIndex) => {
                     const blankCount = blankSlotCount(item.question || '{0}');
                     const placeholderIndices = extractPlaceholderIndices(item.question || '{0}');
                     const userValue = padStudentAnswers(userAnswers[itemIndex], blankCount);
@@ -74,7 +76,7 @@ export function FillInBlankGroupClient({ questionData, isReviewMode = false, use
                     const showItemAudio = Boolean(item.audioUrl) && !questionData.audioUrl;
                     const hasAnyAnswer = userValue.some((value) => value.trim().length > 0);
                     const allBlanksCorrect = placeholderIndices.every((index) => isBlankMatch(userValue[index] || '', item.answers[index] || []));
-                    return (_jsxs(KidQuestionCard, { icon: _jsx(PenLine, { className: "h-3.5 w-3.5" }), title: `Câu ${item.questionNumber || itemIndex + 1}`, points: item.points || 0, isExample: item.isExample, review: isReviewMode && !item.isExample && hasAnyAnswer ? (allBlanksCorrect ? 'correct' : 'wrong') : null, children: [toFillInBlankImageUrls(item.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap items-center gap-2", children: toFillInBlankImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(MediaPreview, { src: url, kind: "image", alt: `Item ${item.questionNumber} image ${imageIndex + 1}` }, `${item.questionNumber}-${imageIndex}`))) })), showItemAudio && item.audioUrl && (_jsx(MediaPreview, { src: item.audioUrl, kind: "audio", alt: `Item ${item.questionNumber} audio` })), _jsx(KidPrompt, { children: _jsx("div", { className: "min-w-0 text-sm leading-relaxed text-slate-800", children: stem.map((part, partIndex) => {
+                    return (_jsxs(KidQuestionCard, { icon: _jsx(PenLine, { className: "h-3.5 w-3.5" }), 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 && hasAnyAnswer ? (allBlanksCorrect ? 'correct' : 'wrong') : null, children: [toFillInBlankImageUrls(item.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap items-center gap-2", children: toFillInBlankImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(MediaPreview, { src: url, kind: "image", alt: `Item ${item.questionNumber} image ${imageIndex + 1}` }, `${item.questionNumber}-${imageIndex}`))) })), showItemAudio && item.audioUrl && (_jsx(MediaPreview, { src: item.audioUrl, kind: "audio", alt: `Item ${item.questionNumber} audio` })), _jsx(KidPrompt, { children: _jsx("div", { className: "min-w-0 text-sm leading-relaxed text-slate-800", children: stem.map((part, partIndex) => {
                                         if (part.type === 'text') {
                                             return (_jsx("span", { children: _jsx(StemText, { value: part.value }) }, partIndex));
                                         }

package/dist/components/questions/types/find-words-in-matrix/FindWordsInMatrixClient.js

@@ -193,19 +193,22 @@ export function FindWordsInMatrixClient({ content, correctAnswer, showSolution =
                                 : 'bấm ô cuối để hoàn thành từ.'] })) : (_jsx(_Fragment, { children: "Ch\u1ECDn m\u1ED9t t\u1EEB trong danh s\u00E1ch, r\u1ED3i b\u1EA5m t\u1EEBng ch\u1EEF tr\u00EAn l\u01B0\u1EDBi (ho\u1EB7c \u00F4 \u0111\u1EA7u r\u1ED3i \u00F4 cu\u1ED1i)." })) })) : null, isCategorize ? (_jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3", children: categories.map((cat) => {
                     const wordsInCat = wordBank.filter((word) => word.categoryId === cat.id);
                     return (_jsxs(Card, { className: "border bg-gray-50/70 p-3.5", children: [_jsxs("div", { className: "mb-2.5 flex items-center justify-between border-b pb-1.5 text-sm font-bold", children: [_jsx("span", { children: cat.name }), _jsx(Badge, { variant: "outline", className: "text-xs", children: wordsInCat.length })] }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: wordsInCat.map((word, index) => renderWordBadge(word, index)) })] }, cat.id));
-                }) })) : (_jsxs(Card, { className: "border-2 border-dashed bg-gray-50 p-4", children: [_jsxs("div", { className: "mb-3 text-xs font-semibold uppercase tracking-wider text-gray-500", children: ["Word Bank (", wordBank.length, " words)"] }), _jsx("div", { className: "flex flex-wrap gap-2", children: wordBank.map((word, index) => renderWordBadge(word, index)) })] })), _jsx("div", { className: "flex justify-center overflow-x-auto pb-2", children: _jsx("div", { className: "inline-grid gap-1 rounded-xl border border-gray-200 bg-white p-3 shadow-sm", style: { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }, children: Array.from({ length: rows }).map((_, rIdx) => {
-                        const r = rIdx + 1;
-                        return Array.from({ length: cols }).map((_, cIdx) => {
-                            const c = cIdx + 1;
-                            const char = grid[rIdx]?.[cIdx] || '';
-                            const highlight = cellColorMap[`${r}-${c}`];
-                            const colorConfig = highlight ? WORD_COLORS[highlight.colorIdx] : null;
-                            const isTapped = tappedPath.some((cell) => cell.row === r && cell.col === c);
-                            return (_jsx("button", { type: "button", disabled: !canSelect, onClick: () => handleCellClick(r, c), className: `flex h-9 w-9 items-center justify-center rounded-md border text-sm font-bold sm:h-11 sm:w-11 sm:text-base ${colorConfig
-                                    ? `${colorConfig.bg} shadow-sm`
-                                    : isTapped
-                                        ? 'border-blue-500 bg-blue-50 text-blue-800'
-                                        : 'border-gray-100 bg-gray-50/50 text-gray-700'}`, title: highlight ? `${highlight.word} (${r},${c})` : `(${r},${c})`, children: char || '·' }, `${r}-${c}`));
-                        });
-                    }) }) })] }));
+                }) })) : (_jsxs(Card, { className: "border-2 border-dashed bg-gray-50 p-4", children: [_jsxs("div", { className: "mb-3 text-xs font-semibold uppercase tracking-wider text-gray-500", children: ["Word Bank (", wordBank.length, " words)"] }), _jsx("div", { className: "flex flex-wrap gap-2", children: wordBank.map((word, index) => renderWordBadge(word, index)) })] })), _jsx("div", { className: "w-full min-w-0 overflow-x-auto pb-2", children: _jsx("div", { className: "flex w-max min-w-full justify-center", children: _jsx("div", { className: "inline-grid shrink-0 gap-1 rounded-xl border border-gray-200 bg-white p-3 shadow-sm [--fw-cell:2.25rem] sm:[--fw-cell:2.75rem]", style: {
+                            gridTemplateColumns: `repeat(${cols}, var(--fw-cell))`,
+                            gridAutoRows: 'var(--fw-cell)',
+                        }, children: Array.from({ length: rows }).map((_, rIdx) => {
+                            const r = rIdx + 1;
+                            return Array.from({ length: cols }).map((_, cIdx) => {
+                                const c = cIdx + 1;
+                                const char = grid[rIdx]?.[cIdx] || '';
+                                const highlight = cellColorMap[`${r}-${c}`];
+                                const colorConfig = highlight ? WORD_COLORS[highlight.colorIdx] : null;
+                                const isTapped = tappedPath.some((cell) => cell.row === r && cell.col === c);
+                                return (_jsx("button", { type: "button", disabled: !canSelect, onClick: () => handleCellClick(r, c), className: `flex size-[var(--fw-cell)] items-center justify-center rounded-md border text-sm font-bold sm:text-base ${colorConfig
+                                        ? `${colorConfig.bg} shadow-sm`
+                                        : isTapped
+                                            ? 'border-blue-500 bg-blue-50 text-blue-800'
+                                            : 'border-gray-100 bg-gray-50/50 text-gray-700'}`, title: highlight ? `${highlight.word} (${r},${c})` : `(${r},${c})`, children: char || '·' }, `${r}-${c}`));
+                            });
+                        }) }) }) })] }));
 }

package/dist/components/questions/types/match-columns-to-make-sentences/MatchColumnsToMakeSentencesClient.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Lightbulb } from 'lucide-react';
 import { cn } from '../../../../shared/lib/utils';
 import { assembleMatchColumnsSentence, getMatchColumnsChoiceColumns, getMatchColumnsStemColumn, } from './map-match-columns-to-make-sentences-data';
-import { KidChoiceRow, KidInstruction, KidPrompt, KidQuestionCard, optionLetter, } from '../../_shared/components/compact';
+import { KidChoiceRow, KidInstruction, KidPrompt, KidQuestionCard, optionLetter, reviewItemPoints, reviewItemTitle, } from '../../_shared/components/compact';
 function emptyAnswer(stemFragmentId) {
     return { fragmentIds: stemFragmentId ? [stemFragmentId] : [], sentence: '' };
 }
@@ -59,7 +59,7 @@ export function MatchColumnsToMakeSentencesClient({ questionData, isReviewMode =
                         || '—';
                     const isCorrect = isReviewMode &&
                         current.sentence.trim().toLowerCase() === item.sentence.trim().toLowerCase();
-                    return (_jsxs(KidQuestionCard, { title: `Câu ${item.questionNumber || itemIndex + 1}`, points: item.points || 0, isExample: item.isExample, review: isReviewMode && !item.isExample ? (isCorrect ? 'correct' : 'wrong') : null, children: [_jsx(KidPrompt, { children: stemText }), choiceColumns.map((column, choiceIndex) => {
+                    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 ? (isCorrect ? 'correct' : 'wrong') : null, children: [_jsx(KidPrompt, { children: stemText }), choiceColumns.map((column, choiceIndex) => {
                                 const selectedId = current.fragmentIds[choiceIndex + 1] || '';
                                 const correctId = item.fragmentIds[choiceIndex + 1] || '';
                                 return (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "text-xs font-medium uppercase tracking-wider text-gray-500", children: column.label || column.id }), column.fragments.map((fragment, fragmentIndex) => {

package/dist/components/questions/types/match-word-to-picture/MatchWordToPictureGroupClient.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Lightbulb } from 'lucide-react';
 import { cn } from '../../../../shared/lib/utils';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-import { KidChoiceRow, KidInstruction, KidQuestionCard, optionLetter, } from '../../_shared/components/compact';
+import { KidChoiceRow, KidInstruction, KidQuestionCard, optionLetter, reviewItemPoints, reviewItemTitle, } from '../../_shared/components/compact';
 function normalizeWord(value) {
     return value.trim().toLowerCase();
 }
@@ -53,7 +53,7 @@ export function MatchWordToPictureGroupClient({ questionData, isReviewMode = fal
                 const canSelect = !isReviewMode && !item.isExample && Boolean(onAnswerChange);
                 const isCorrect = normalizeWord(selectedWord) === normalizeWord(item.correctAnswer) &&
                     Boolean(item.correctAnswer);
-                return (_jsx(KidQuestionCard, { title: `Câu ${item.questionNumber || itemIndex + 1}`, points: item.points || 0, isExample: item.isExample, review: isReviewMode && !item.isExample ? (isCorrect ? 'correct' : 'wrong') : null, children: _jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start", children: [_jsx(ClientImageItem, { url: item.imageUrl, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1}` }), _jsxs("div", { className: "min-w-0 flex-1 space-y-1.5", children: [_jsx("p", { className: "text-sm font-semibold text-gray-800", children: "Ch\u1ECDn t\u1EEB ph\u00F9 h\u1EE3p" }), wordBank.map((word, wordIndex) => {
+                return (_jsx(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 ? (isCorrect ? 'correct' : 'wrong') : null, children: _jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start", children: [_jsx(ClientImageItem, { url: item.imageUrl, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1}` }), _jsxs("div", { className: "min-w-0 flex-1 space-y-1.5", children: [_jsx("p", { className: "text-sm font-semibold text-gray-800", children: "Ch\u1ECDn t\u1EEB ph\u00F9 h\u1EE3p" }), wordBank.map((word, wordIndex) => {
                                         const isSelected = normalizeWord(word) === normalizeWord(selectedWord);
                                         const isUsedByOther = usedWords.has(normalizeWord(word)) && !isSelected;
                                         const isWordCorrect = normalizeWord(word) === normalizeWord(item.correctAnswer);

package/dist/components/questions/types/match-word-to-picture-group/MatchWordToPictureGroupClient.js

@@ -4,7 +4,7 @@ import { BookOpen, Check, ChevronDown, Lightbulb, Volume2, X } from 'lucide-reac
 import { cn } from '../../../../shared/lib/utils';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
 import { toMatchWordToPictureImageUrls, toMatchWordToPictureStorageKey, } from '../../_shared/types/match-word-to-picture-group.type';
-import { KidInstruction, KidPrompt, KidQuestionCard, } from '../../_shared/components/compact';
+import { KidInstruction, KidPrompt, KidQuestionCard, reviewItemPoints, reviewItemTitle, } from '../../_shared/components/compact';
 function normalizeWord(value) {
     return value.trim().toLowerCase();
 }
@@ -76,7 +76,7 @@ export function MatchWordToPictureGroupClient({ questionData, isReviewMode = fal
                 const isCorrect = normalizeWord(selectedWord) === normalizeWord(item.correctAnswer) &&
                     Boolean(item.correctAnswer);
                 const itemImages = toMatchWordToPictureImageUrls(item.imageUrl);
-                return (_jsx(KidQuestionCard, { title: `Câu ${item.questionNumber || itemIndex + 1}`, points: item.points || 0, isExample: item.isExample, review: isReviewMode && !item.isExample ? (isCorrect ? 'correct' : 'wrong') : null, children: _jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start", children: [itemImages.length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-2", children: itemImages.map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1}${imageIndex > 0 ? ` (${imageIndex + 1})` : ''}` }, `${item.questionNumber}-${imageIndex}`))) })) : null, _jsxs("div", { className: "min-w-0 flex-1 space-y-1.5", children: [_jsx("p", { className: "text-sm font-semibold text-gray-800", children: "Ch\u1ECDn t\u1EEB ph\u00F9 h\u1EE3p" }), item.isExample ? (_jsx("span", { className: "text-sm italic text-gray-800 underline decoration-gray-400", children: item.correctAnswer })) : (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(WordDropdown, { value: selectedWord, wordBank: wordBank, usedWords: usedWords, disabled: !canSelect, onChange: (value) => handleSelect(itemIndex, value) }), isReviewMode && (isCorrect
+                return (_jsx(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 ? (isCorrect ? 'correct' : 'wrong') : null, children: _jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start", children: [itemImages.length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-2", children: itemImages.map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1}${imageIndex > 0 ? ` (${imageIndex + 1})` : ''}` }, `${item.questionNumber}-${imageIndex}`))) })) : null, _jsxs("div", { className: "min-w-0 flex-1 space-y-1.5", children: [_jsx("p", { className: "text-sm font-semibold text-gray-800", children: "Ch\u1ECDn t\u1EEB ph\u00F9 h\u1EE3p" }), item.isExample ? (_jsx("span", { className: "text-sm italic text-gray-800 underline decoration-gray-400", children: item.correctAnswer })) : (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(WordDropdown, { value: selectedWord, wordBank: wordBank, usedWords: usedWords, disabled: !canSelect, onChange: (value) => handleSelect(itemIndex, value) }), isReviewMode && (isCorrect
                                                 ? _jsx(Check, { className: "h-5 w-5 text-emerald-600" })
                                                 : _jsx(X, { className: "h-5 w-5 text-red-500" }))] })), isReviewMode && !item.isExample && !isCorrect && (_jsxs("p", { className: "text-sm text-green-700", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", _jsx("strong", { children: item.correctAnswer || '—' })] }))] })] }) }, `${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/spontaneous-qa-group/SpontaneousQaGroupClient.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Lightbulb, Mic, Volume2 } from 'lucide-react';
+import { Mic, Volume2 } from 'lucide-react';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
 import { KidInstruction, KidPrompt, KidQuestionCard, SpeakingReplyMic, } from '../../_shared/components/compact';
 function QuestionAudio({ url }) {
@@ -44,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

@@ -132,7 +132,9 @@ export function WordFillStructuredFormClient({ questionData, isReviewMode = fals
     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
+    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 || t('question.viewer.wfsfDefaultTitle'));

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.js

@@ -631,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 }), _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() })] }));
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinyweb_dev/oe-exam-sdk",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "Reusable OceanEdu question components.",
   "type": "module",
   "main": "./dist/index.js",