@tinyweb_dev/oe-exam-sdk 1.0.7 → 1.0.9

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

@@ -13,7 +13,7 @@ export function ChooseThenAnswerGroupRenderer({ partNumber, partName, questionCo
     });
     return (_jsxs("div", { className: "w-full space-y-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, partName: partName, questionCount: questionCount }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction }), _jsx("div", { className: "mt-4", children: _jsx(ChooseThenAnswerGroupClient, { questionData: {
                         title: data.title,
-                        instruction: data.instruction,
+                        instruction: '',
                         items: data.questions.map((item) => ({
                             question: item.question,
                             options: item.options,

package/dist/components/questions/_shared/types/answer-the-question-group.type.d.ts

@@ -19,6 +19,8 @@ export interface AnswerTheQuestionGroupData {
     items: AnswerTheQuestionGroupItemData[];
     explanation?: string;
     points?: number;
+    /** Preserved from content.meta; AI | MAPPING. */
+    gradingType?: 'AI' | 'MAPPING';
 }
 export interface AnswerTheQuestionGroupCreatorProps {
     initialData?: AnswerTheQuestionGroupData;
@@ -36,4 +38,5 @@ export interface AnswerTheQuestionGroupClientProps {
     questionData: AnswerTheQuestionGroupData;
     isReviewMode?: boolean;
     userAnswers?: string[];
+    onAnswerChange?: (answers: string[]) => void;
 }

package/dist/components/questions/_shared/types/choose-the-correct-answer-group.type.d.ts

@@ -18,12 +18,12 @@ export interface ChooseTheCorrectAnswerGroupItemData {
     points: number;
     questionNumber: number;
     imageUrl?: ChooseTheCorrectAnswerGroupImageUrl;
-    audioUrl?: string;
+    audioUrl?: ChooseTheCorrectAnswerGroupImageUrl;
 }
 export interface ChooseTheCorrectAnswerGroupData {
     instruction: string;
     passage?: string;
-    audioUrl?: string;
+    audioUrl?: ChooseTheCorrectAnswerGroupImageUrl;
     imageUrl?: ChooseTheCorrectAnswerGroupImageUrl;
     items: ChooseTheCorrectAnswerGroupItemData[];
     explanation?: string;

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

@@ -11,7 +11,11 @@ export function isChooseAnswerGroupOptionFilled(option, optionType = 'text') {
     if (optionType === 'image') {
         return getChooseAnswerGroupOptionImageSrc(option) !== '';
     }
-    return typeof option.text === 'string' && option.text.trim() !== '';
+    if (typeof option.text !== 'string') {
+        return false;
+    }
+    const text = option.text.trim();
+    return text !== '' && text !== '<p></p>' && text !== '<p><br></p>';
 }
 export function toChooseAnswerGroupImageUrls(value) {
     if (Array.isArray(value)) {

package/dist/components/questions/_shared/types/choose-then-answer-group.type.d.ts

@@ -7,6 +7,7 @@ export interface ChooseThenAnswerOption {
 }
 export interface ChooseThenAnswerItemAnswer {
     optionId: string;
+    expectedAnswers?: string[];
 }
 export interface ChooseThenAnswerStudentItemAnswer {
     optionId: string;
@@ -16,6 +17,7 @@ export interface ChooseThenAnswerGroupItemData {
     question: string;
     options: ChooseThenAnswerOption[];
     optionId: string;
+    expectedAnswers?: string[];
     isExample?: boolean;
     points: number;
     questionNumber: number;
@@ -39,9 +41,24 @@ export interface ChooseThenAnswerGroupCreatorProps {
         getFormData?: () => ChooseThenAnswerGroupData;
     } | null>;
 }
+export interface ChooseThenAnswerItemResult {
+    mappingCorrect?: boolean;
+    aiCorrect?: boolean;
+    partialScore?: number;
+    feedback?: string;
+}
+export interface ChooseThenAnswerGradeDetail {
+    itemId: string;
+    isCorrect?: boolean;
+    userAnswer?: unknown;
+    correctAnswer?: unknown;
+    partialScore?: number;
+    feedback?: string;
+}
 export interface ChooseThenAnswerGroupClientProps {
     questionData: ChooseThenAnswerGroupData;
     isReviewMode?: boolean;
     userAnswers?: ChooseThenAnswerStudentItemAnswer[];
+    itemResults?: ChooseThenAnswerItemResult[];
     onAnswerChange?: (index: number, next: ChooseThenAnswerStudentItemAnswer) => void;
 }

package/dist/components/questions/_shared/types/cross-out-word-group.type.d.ts

@@ -39,4 +39,5 @@ export interface CrossOutWordGroupClientProps {
     questionData: CrossOutWordGroupData;
     isReviewMode?: boolean;
     userAnswers?: Array<CrossOutWordGroupItemAnswer | null | undefined>;
+    onAnswerChange?: (answers: Array<CrossOutWordGroupItemAnswer | null>) => void;
 }

package/dist/components/questions/_shared/types/true-false-correct-group.type.d.ts

@@ -39,4 +39,5 @@ export interface TrueFalseCorrectGroupClientProps {
     questionData: TrueFalseCorrectGroupData;
     isReviewMode?: boolean;
     userAnswers?: TrueFalseCorrectStudentItemAnswer[];
+    onAnswerChange?: (answers: TrueFalseCorrectStudentItemAnswer[]) => void;
 }

package/dist/components/questions/_shared/types/true-false-group.type.d.ts

@@ -28,4 +28,5 @@ export interface TrueFalseGroupClientProps {
     questionData: TrueFalseGroupData;
     isReviewMode?: boolean;
     userAnswers?: boolean[];
+    onAnswerChange?: (answers: boolean[]) => void;
 }

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

@@ -1,2 +1,2 @@
 import type { AnswerTheQuestionGroupClientProps } from '../../_shared/types/answer-the-question-group.type';
-export declare function AnswerTheQuestionGroupClient({ questionData, isReviewMode, userAnswers, }: AnswerTheQuestionGroupClientProps): import("react").JSX.Element;
+export declare function AnswerTheQuestionGroupClient({ questionData, isReviewMode, userAnswers, onAnswerChange, }: AnswerTheQuestionGroupClientProps): import("react").JSX.Element;

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

@@ -3,36 +3,30 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BookOpen, CircleHelp, Lightbulb, Sparkles, Star, Volume2 } from 'lucide-react';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
 import { toAnswerTheQuestionGroupImageUrls } from '../../_shared/types/answer-the-question-group.type';
-function isDisplayableMediaUrl(value) {
-    return (value.startsWith('http://')
-        || value.startsWith('https://')
-        || value.startsWith('blob:')
-        || value.startsWith('data:')
-        || value.startsWith('/'));
-}
-function isPlayableAudioUrl(value) {
+function isAbsoluteMediaUrl(value) {
     return (value.startsWith('http://')
         || value.startsWith('https://')
         || value.startsWith('blob:')
         || value.startsWith('data:'));
 }
+function isPublicAssetPath(value) {
+    return value.startsWith('/images/') || value.startsWith('/_next/');
+}
 function toPresignKey(value) {
     const trimmed = value.trim();
-    if (isPlayableAudioUrl(trimmed)) {
+    if (isAbsoluteMediaUrl(trimmed) || isPublicAssetPath(trimmed)) {
         return trimmed;
     }
     return trimmed.replace(/^\/+/, '');
 }
 function MediaPreview({ src, kind = 'image', alt }) {
-    const fileKey = kind === 'audio' ? toPresignKey(src) : src;
+    const fileKey = toPresignKey(src);
     const { previewUrl, isLoading } = usePresignedFileUrl(fileKey);
     if (isLoading) {
         return _jsx("div", { className: "h-16 w-16 animate-pulse rounded-md bg-slate-100" });
     }
     const url = previewUrl
-        || (kind === 'audio'
-            ? (isPlayableAudioUrl(fileKey) ? fileKey : '')
-            : (isDisplayableMediaUrl(src) ? src : ''));
+        || (isAbsoluteMediaUrl(fileKey) || isPublicAssetPath(fileKey) ? fileKey : '');
     if (!url) {
         return null;
     }
@@ -45,13 +39,17 @@ function MediaPreview({ src, kind = 'image', alt }) {
                 target.src = '/images/placeholder-image.svg';
             } }) }));
 }
-export function AnswerTheQuestionGroupClient({ questionData, isReviewMode = false, userAnswers = [], }) {
+export function AnswerTheQuestionGroupClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, }) {
     const items = questionData.items || [];
     return (_jsxs("div", { className: "space-y-4", children: [questionData.instruction && (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800", children: questionData.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: `Hình ảnh (${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: "prose prose-sm max-w-none leading-relaxed text-gray-800", dangerouslySetInnerHTML: { __html: questionData.passage } })] })), items.map((item, itemIndex) => {
                 const userValue = userAnswers[itemIndex] || '';
                 const expectedAnswers = Array.isArray(item.expectedAnswers)
                     ? item.expectedAnswers.filter((answer) => answer.trim() !== '')
                     : [];
-                return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] })), _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"] })] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-3", 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: `Hình ảnh câu ${item.questionNumber || itemIndex + 1} (${imageIndex + 1})` }, `${item.questionNumber}-${imageIndex}`))) })), _jsx("p", { className: "text-sm font-semibold leading-relaxed text-gray-800", children: item.question || 'Câu hỏi chưa được nhập' }), _jsx("div", { className: "rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-700", children: userValue || (isReviewMode ? '(Chưa trả lời)' : 'Học sinh sẽ nhập câu trả lời tại đây') }), isReviewMode && expectedAnswers.length > 0 && (_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs font-medium text-gray-500", children: "\u0110\u00E1p \u00E1n m\u1EABu (AI)" }), _jsx("ul", { className: "list-disc space-y-1 pl-5 text-sm text-gray-700", children: expectedAnswers.map((answer) => (_jsx("li", { children: answer }, answer))) })] }))] })] }, `${item.questionNumber}-${itemIndex}`));
+                return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] })), _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"] })] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-3", 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: `Hình ảnh câu ${item.questionNumber || itemIndex + 1} (${imageIndex + 1})` }, `${item.questionNumber}-${imageIndex}`))) })), _jsx("p", { className: "text-sm font-semibold leading-relaxed text-gray-800", children: item.question || 'Câu hỏi chưa được nhập' }), isReviewMode || item.isExample || !onAnswerChange ? (userValue ? (_jsx("div", { className: "rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-700", children: userValue })) : null) : (_jsx("textarea", { value: userValue, onChange: (event) => {
+                                        const next = items.map((_, index) => userAnswers[index] || '');
+                                        next[itemIndex] = event.target.value;
+                                        onAnswerChange(next);
+                                    }, placeholder: "Nh\u1EADp c\u00E2u tr\u1EA3 l\u1EDDi...", rows: 2, className: "w-full rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-800 outline-none ring-blue-200 focus:border-blue-400 focus:ring-2" })), isReviewMode && expectedAnswers.length > 0 ? (_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs font-medium text-gray-500", children: "\u0110\u00E1p \u00E1n" }), _jsx("ul", { className: "list-disc space-y-1 pl-5 text-sm text-gray-700", children: expectedAnswers.map((answer) => (_jsx("li", { children: answer }, answer))) })] })) : isReviewMode && !userValue ? (_jsx("div", { className: "rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-500", children: "Ch\u01B0a c\u00F3 \u0111\u00E1p \u00E1n m\u1EABu" })) : null] })] }, `${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/answer-the-question-group/AnswerTheQuestionGroupCreator.js

@@ -60,6 +60,7 @@ export function AnswerTheQuestionGroupCreator({ initialData, onChange, externalE
     const [errors, setErrors] = useState([]);
     const onChangeRef = useRef(onChange);
     const previousPayloadRef = useRef('');
+    const gradingTypeRef = useRef(initialData?.gradingType);
     useEffect(() => {
         onChangeRef.current = onChange;
     }, [onChange]);
@@ -71,6 +72,7 @@ export function AnswerTheQuestionGroupCreator({ initialData, onChange, externalE
         items: nextItems,
         explanation: nextExplanation,
         points: sumPoints(nextItems),
+        ...(gradingTypeRef.current ? { gradingType: gradingTypeRef.current } : {}),
     });
     const debouncedOnChange = useDebouncedCallback((payload) => {
         onChangeRef.current?.(payload);

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

@@ -77,6 +77,7 @@ export function mapQuestionToAnswerTheQuestionGroupData(question) {
             items,
             explanation,
             points: items.reduce((total, item) => (item.isExample ? total : total + (item.points || 0)), 0),
+            ...(meta.gradingType === 'MAPPING' ? { gradingType: 'MAPPING' } : {}),
         };
     }
     if (Array.isArray(answer.items)) {
@@ -90,6 +91,7 @@ export function mapQuestionToAnswerTheQuestionGroupData(question) {
             items: answer.items,
             explanation,
             points: typeof answer.points === 'number' ? answer.points : 1,
+            ...(answer.gradingType === 'MAPPING' ? { gradingType: 'MAPPING' } : {}),
         };
     }
     return {

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

@@ -1,7 +1,12 @@
 import { fromAnswerTheQuestionGroupImageUrls, toAnswerTheQuestionGroupImageUrls, } from '../../_shared/types/answer-the-question-group.type';
+import { resolveAnswerTheQuestionGroupGradingType } from '../../../../shared/types/questions/answer-the-question-group';
 const CHILD_QUESTION_TYPE = 'ANSWER_THE_QUESTION';
-const GRADING_TYPE = 'AI';
 const DEFAULT_INSTRUCTION = 'Read the text again and answer the questions.';
+function readGradingType(question) {
+    const answer = question.answer;
+    const content = question.content;
+    return resolveAnswerTheQuestionGroupGradingType(answer?.gradingType ?? content?.meta?.gradingType);
+}
 function normalizeExpectedAnswers(value) {
     if (!Array.isArray(value)) {
         return [];
@@ -26,6 +31,8 @@ function isContentEmpty(html) {
 export const transformAnswerTheQuestionGroup = (question) => {
     const answerData = question.answer;
     const items = Array.isArray(answerData?.items) ? answerData.items : [];
+    const gradingType = readGradingType(question);
+    const isAiGraded = gradingType === 'AI';
     if (items.length === 0) {
         const emptyAudioUrl = typeof answerData?.audioUrl === 'string' ? answerData.audioUrl.trim() : '';
         return {
@@ -33,8 +40,8 @@ export const transformAnswerTheQuestionGroup = (question) => {
                 meta: {
                     instruction: answerData?.instruction || DEFAULT_INSTRUCTION,
                     ...(emptyAudioUrl ? { audioUrl: emptyAudioUrl } : {}),
-                    gradingType: GRADING_TYPE,
-                    isAiGraded: true,
+                    gradingType,
+                    isAiGraded,
                 },
                 items: [],
             },
@@ -66,8 +73,8 @@ export const transformAnswerTheQuestionGroup = (question) => {
                 ...(!isContentEmpty(passage) ? { passage } : {}),
                 ...(audioUrl ? { audioUrl } : {}),
                 ...(imageUrl.length ? { imageUrl } : {}),
-                gradingType: GRADING_TYPE,
-                isAiGraded: true,
+                gradingType,
+                isAiGraded,
             },
             items: apiItems,
         },

package/dist/components/questions/types/choose-the-correct-answer-group/ChooseAnswerGroupImageUpload.d.ts

@@ -5,6 +5,13 @@ export declare function ChooseAnswerGroupImageUploadItem({ index, itemIndex, ima
     onChange: (url: string) => void;
     onRemove: () => void;
 }): import("react").JSX.Element;
+export declare function ChooseAnswerGroupAudioUploadItem({ index, itemIndex, audioUrl, onChange, onRemove, }: {
+    index: number;
+    itemIndex: number;
+    audioUrl: string;
+    onChange: (url: string) => void;
+    onRemove: () => void;
+}): import("react").JSX.Element;
 export declare function ChooseAnswerGroupOptionImageField({ itemIndex, optionIndex, imageUrl, onChange, }: {
     itemIndex: number;
     optionIndex: number;

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

@@ -5,7 +5,7 @@ import { Button } from '../../../../components/ui/button';
 import { FileUpload } from '../../../../components/ui/file-upload';
 import { ImagePreview } from '../../../../components/ui/image-preview';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-import { ImageIcon, Trash2 } from 'lucide-react';
+import { ImageIcon, Trash2, Volume2 } from 'lucide-react';
 function resolveDisplayUrl(imageUrl, previewOverride, fetchedPreviewUrl) {
     if (previewOverride) {
         return previewOverride;
@@ -24,6 +24,9 @@ export function ChooseAnswerGroupImageUploadItem({ index, itemIndex, imageUrl, o
     const displayUrl = resolveDisplayUrl(imageUrl, previewOverride, fetchedPreviewUrl);
     return (_jsxs("div", { className: "flex items-center gap-2 rounded-md border border-gray-200 bg-white p-1.5", children: [_jsx("div", { className: "flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-md border border-gray-100 bg-gray-50", children: displayUrl ? (_jsx(ImagePreview, { src: displayUrl, alt: `Hình ảnh ${index + 1}`, className: "h-12 w-12 rounded-md object-contain" })) : (_jsx(ImageIcon, { className: "h-4 w-4 text-gray-300" })) }), _jsx("div", { className: "min-w-0 flex-1", children: _jsx(FileUpload, { id: `choose-answer-group-image-${itemIndex}-${index}`, label: "", accept: "image/*", value: imageUrl, onChange: onChange, onPresignedUrlChange: setPreviewOverride, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: onRemove, title: "Xo\u00E1 \u1EA3nh n\u00E0y", className: "h-7 w-7 shrink-0 text-gray-400 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }));
 }
+export function ChooseAnswerGroupAudioUploadItem({ index, itemIndex, audioUrl, onChange, onRemove, }) {
+    return (_jsxs("div", { className: "flex items-center gap-2 rounded-md border border-gray-200 bg-white p-1.5", children: [_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-indigo-50", children: _jsx(Volume2, { className: "h-3.5 w-3.5 text-indigo-500" }) }), _jsx("div", { className: "min-w-0 flex-1", children: _jsx(FileUpload, { id: `choose-answer-group-audio-${itemIndex}-${index}`, label: "", accept: "audio/*", value: audioUrl, onChange: onChange, maxSize: 20, placeholder: "Upload file audio ho\u1EB7c paste URL", autoUpload: true, prefix: "questions", showPlayButton: true }) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: onRemove, title: "Xo\u00E1 audio n\u00E0y", className: "h-7 w-7 shrink-0 text-gray-400 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }));
+}
 export function ChooseAnswerGroupOptionImageField({ itemIndex, optionIndex, imageUrl, onChange, }) {
     const [previewOverride, setPreviewOverride] = useState('');
     const { previewUrl: fetchedPreviewUrl } = usePresignedFileUrl(imageUrl);

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

@@ -1,8 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BookOpen, Check, CircleHelp, Lightbulb, Star, Volume2 } from 'lucide-react';
+import { BookOpen, Check, CircleHelp, Lightbulb, Star, Volume2, X } from 'lucide-react';
 import { cn } from '../../../../shared/lib/utils';
 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';
 function ClientImageItem({ url, alt }) {
     const { previewUrl, isLoading } = usePresignedFileUrl(url);
@@ -22,7 +24,21 @@ function ClientAudio({ url }) {
     }
     return (_jsxs("div", { className: "flex items-center gap-3 rounded-xl border border-indigo-100 bg-indigo-50/70 px-4 py-3", children: [_jsx(Volume2, { className: "h-4 w-4 shrink-0 text-indigo-600" }), isLoading ? (_jsx("div", { className: "h-8 flex-1 animate-pulse rounded-md bg-indigo-100" })) : (_jsx("audio", { controls: true, className: "h-9 w-full", src: src, preload: "metadata", children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." }))] }));
 }
-const OPTION_LABELS = ['A', 'B', 'C', 'D', 'E', 'F'];
+function optionLetter(index) {
+    return String.fromCharCode(65 + index);
+}
+function reviewOptionTone(isReviewMode, isCorrect, isSelected) {
+    if (isReviewMode && isCorrect) {
+        return { border: 'border-green-400 bg-green-50', badge: 'bg-green-500 text-white' };
+    }
+    if (isReviewMode && isSelected) {
+        return { border: 'border-red-400 bg-red-50', badge: 'bg-red-500 text-white' };
+    }
+    if (isSelected) {
+        return { border: 'border-blue-400 bg-blue-50', badge: 'bg-blue-500 text-white' };
+    }
+    return { border: 'border-gray-200 bg-white', badge: 'bg-gray-100 text-gray-600' };
+}
 export function ChooseTheCorrectAnswerGroupClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, }) {
     const items = questionData.items || [];
     const handleSelect = (itemIndex, optionId) => {
@@ -34,34 +50,20 @@ export function ChooseTheCorrectAnswerGroupClient({ questionData, isReviewMode =
         next[itemIndex] = optionId;
         onAnswerChange(next);
     };
-    return (_jsxs("div", { className: "space-y-4", children: [questionData.instruction && (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800", children: questionData.instruction })), questionData.audioUrl && _jsx(ClientAudio, { url: questionData.audioUrl }), 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: "prose prose-sm max-w-none text-gray-800 leading-relaxed", dangerouslySetInnerHTML: { __html: questionData.passage } })] })), items.map((item, itemIndex) => {
+    return (_jsxs("div", { className: "space-y-4", children: [questionData.instruction && (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800", 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("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] }))] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-3", children: [_jsx("p", { className: "text-sm font-semibold leading-relaxed text-gray-800", children: item.question || 'Câu hỏi chưa được nhập' }), item.audioUrl && _jsx(ClientAudio, { url: item.audioUrl }), 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}`))) })), item.optionType === 'image' ? (_jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: item.options.map((option, optionIndex) => {
+                return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] }))] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-3", children: [!isRichTextEmpty(item.question) && (_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}`))) })), item.optionType === 'image' ? (_jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: item.options.map((option, optionIndex) => {
                                         const isCorrect = option.id === item.correctAnswer;
                                         const isSelected = option.id === selectedId;
+                                        const tone = reviewOptionTone(isReviewMode, isCorrect, isSelected);
                                         const optionImageSrc = getChooseAnswerGroupOptionImageSrc(option);
-                                        return (_jsxs("button", { type: "button", disabled: !canSelect, onClick: () => handleSelect(itemIndex, option.id), className: cn('flex flex-col items-center gap-2 rounded-lg border-2 px-3 py-2.5 text-sm text-left', isReviewMode && isCorrect
-                                                ? 'border-green-400 bg-green-50'
-                                                : isSelected
-                                                    ? 'border-blue-400 bg-blue-50'
-                                                    : 'border-gray-200 bg-white', canSelect && 'cursor-pointer hover:border-blue-300', !canSelect && 'cursor-default'), children: [_jsx("span", { className: cn('flex h-7 w-7 items-center justify-center rounded-md text-xs font-bold', isReviewMode && isCorrect
-                                                        ? 'bg-green-500 text-white'
-                                                        : isSelected
-                                                            ? 'bg-blue-500 text-white'
-                                                            : 'bg-gray-100 text-gray-600'), children: OPTION_LABELS[optionIndex] || optionIndex + 1 }), optionImageSrc ? (_jsx(ClientImageItem, { url: optionImageSrc, alt: `Đáp án ${OPTION_LABELS[optionIndex] || optionIndex + 1}` })) : (_jsx("span", { className: "text-xs text-gray-500", children: `Đáp án ${OPTION_LABELS[optionIndex] || optionIndex + 1}` })), isReviewMode && isCorrect && _jsx(Check, { className: "h-4 w-4 text-green-600" })] }, option.id || optionIndex));
+                                        return (_jsxs("button", { type: "button", disabled: !canSelect, onClick: () => handleSelect(itemIndex, option.id), className: cn('flex flex-col items-center gap-2 rounded-lg border-2 px-3 py-2.5 text-sm text-left', tone.border, canSelect && 'cursor-pointer hover:border-blue-300', !canSelect && 'cursor-default'), children: [_jsx("span", { className: cn('flex h-7 w-7 items-center justify-center rounded-md text-xs font-bold', tone.badge), children: optionLetter(optionIndex) }), optionImageSrc ? (_jsx(ClientImageItem, { url: optionImageSrc, alt: `Đáp án ${optionLetter(optionIndex)}` })) : (_jsx("span", { className: "text-xs text-gray-500", children: `Đáp án ${optionLetter(optionIndex)}` })), isReviewMode && isCorrect ? (_jsx(Check, { className: "h-4 w-4 text-green-600" })) : isReviewMode && isSelected ? (_jsx(X, { className: "h-4 w-4 text-red-600" })) : null] }, option.id || optionIndex));
                                     }) })) : (_jsx("div", { className: "space-y-2", children: item.options.map((option, optionIndex) => {
                                         const isCorrect = option.id === item.correctAnswer;
                                         const isSelected = option.id === selectedId;
-                                        return (_jsxs("button", { type: "button", disabled: !canSelect, onClick: () => handleSelect(itemIndex, option.id), className: cn('flex w-full items-center gap-3 rounded-lg border-2 px-3 py-2.5 text-sm text-left', isReviewMode && isCorrect
-                                                ? 'border-green-400 bg-green-50'
-                                                : isSelected
-                                                    ? 'border-blue-400 bg-blue-50'
-                                                    : 'border-gray-200 bg-white', canSelect && 'cursor-pointer hover:border-blue-300', !canSelect && 'cursor-default'), children: [_jsx("span", { className: cn('flex h-7 w-7 items-center justify-center rounded-md text-xs font-bold', isReviewMode && isCorrect
-                                                        ? 'bg-green-500 text-white'
-                                                        : isSelected
-                                                            ? 'bg-blue-500 text-white'
-                                                            : 'bg-gray-100 text-gray-600'), children: OPTION_LABELS[optionIndex] || optionIndex + 1 }), _jsx("span", { className: "flex-1 text-gray-800", children: option.text || `Đáp án ${OPTION_LABELS[optionIndex]}` }), isReviewMode && isCorrect && _jsx(Check, { className: "h-4 w-4 text-green-600" })] }, option.id || optionIndex));
+                                        const tone = reviewOptionTone(isReviewMode, isCorrect, isSelected);
+                                        return (_jsxs("button", { type: "button", disabled: !canSelect, onClick: () => handleSelect(itemIndex, option.id), className: cn('flex w-full items-center gap-3 rounded-lg border-2 px-3 py-2.5 text-sm text-left', tone.border, canSelect && 'cursor-pointer hover:border-blue-300', !canSelect && 'cursor-default'), children: [_jsx("span", { className: cn('flex h-7 w-7 items-center justify-center rounded-md text-xs font-bold', tone.badge), children: optionLetter(optionIndex) }), isRichTextEmpty(option.text) ? (_jsx("span", { className: "flex-1 text-gray-800", children: `Đáp án ${optionLetter(optionIndex)}` })) : (_jsx(RichTextHtml, { html: option.text, className: "flex-1 text-gray-800" })), isReviewMode && isCorrect ? (_jsx(Check, { className: "h-4 w-4 text-green-600" })) : isReviewMode && isSelected ? (_jsx(X, { className: "h-4 w-4 text-red-600" })) : null] }, option.id || optionIndex));
                                     }) }))] })] }, `${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] }))] }));
 }