@tinyweb_dev/oe-exam-sdk 1.0.8 → 1.0.10

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

@@ -1,11 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BookOpen, Check, CircleHelp, Lightbulb, Star, Volume2 } from 'lucide-react';
-import { cn } from '../../../../shared/lib/utils';
+import { BookOpen, Lightbulb, Volume2 } from 'lucide-react';
 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';
 function ClientImageItem({ url, alt }) {
     const { previewUrl, isLoading } = usePresignedFileUrl(url);
     const src = previewUrl ||
@@ -24,9 +24,6 @@ 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." }))] }));
 }
-function optionLetter(index) {
-    return String.fromCharCode(65 + index);
-}
 export function ChooseTheCorrectAnswerGroupClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, }) {
     const items = questionData.items || [];
     const handleSelect = (itemIndex, optionId) => {
@@ -38,34 +35,14 @@ 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 })), 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: "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: [_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("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 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: 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" })] }, 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: 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" })] }, option.id || optionIndex));
-                                    }) }))] })] }, `${item.questionNumber}-${itemIndex}`));
+                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) => {
+                                const isCorrect = option.id === item.correctAnswer;
+                                const isSelected = option.id === selectedId;
+                                const optionImageSrc = getChooseAnswerGroupOptionImageSrc(option);
+                                return (_jsx(KidChoiceRow, { letter: optionLetter(optionIndex), selected: isSelected, isReviewMode: isReviewMode, isCorrect: isReviewMode && isCorrect, disabled: !canSelect, onClick: canSelect ? () => handleSelect(itemIndex, option.id) : undefined, children: item.optionType === 'image' ? (optionImageSrc ? (_jsx(ClientImageItem, { url: optionImageSrc, alt: `Đáp án ${optionLetter(optionIndex)}` })) : (`Đáp án ${optionLetter(optionIndex)}`)) : isRichTextEmpty(option.text) ? (`Đáp án ${optionLetter(optionIndex)}`) : (_jsx(RichTextHtml, { html: option.text })) }, 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] }))] }));
 }

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

@@ -1,2 +1,2 @@
 import type { ChooseThenAnswerGroupClientProps } from '../../_shared/types/choose-then-answer-group.type';
-export declare function ChooseThenAnswerGroupClient({ questionData, isReviewMode, userAnswers, onAnswerChange, }: ChooseThenAnswerGroupClientProps): import("react").JSX.Element;
+export declare function ChooseThenAnswerGroupClient({ questionData, isReviewMode, userAnswers, itemResults, onAnswerChange, }: ChooseThenAnswerGroupClientProps): import("react").JSX.Element;

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

@@ -1,20 +1,59 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Lightbulb, Star } from 'lucide-react';
+import { Check, Lightbulb, X } from 'lucide-react';
 import { cn } from '../../../../shared/lib/utils';
+import { KidInstruction, KidQuestionCard } from '../../_shared/components/compact';
 function emptyAnswer() {
     return { optionId: '', text: '' };
 }
-export function ChooseThenAnswerGroupClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, }) {
+function formatHalf(points) {
+    const half = points * 0.5;
+    return Number.isInteger(half) ? String(half) : half.toFixed(1);
+}
+function badgeClass(params) {
+    if (params.isExample) {
+        return 'bg-amber-500';
+    }
+    if (!params.isReviewMode || !params.hasAttempt) {
+        return 'bg-indigo-600';
+    }
+    if (params.partialScore != null) {
+        if (params.partialScore >= params.points - 1e-9) {
+            return 'bg-emerald-500';
+        }
+        if (params.partialScore > 0) {
+            return 'bg-amber-500';
+        }
+        return 'bg-red-500';
+    }
+    if (params.mappingCorrect || params.hasText) {
+        return 'bg-amber-500';
+    }
+    return 'bg-red-500';
+}
+export function ChooseThenAnswerGroupClient({ questionData, isReviewMode = false, userAnswers = [], itemResults, onAnswerChange, }) {
     const canEdit = Boolean(onAnswerChange) && !isReviewMode;
     const items = questionData.items || [];
-    return (_jsxs("div", { className: "space-y-4", children: [(questionData.title || questionData.instruction) && (_jsxs("div", { className: "rounded-xl border border-slate-200 bg-slate-50 px-4 py-3", children: [questionData.title && (_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-slate-500", children: questionData.title })), questionData.instruction && (_jsx("p", { className: "text-sm font-medium text-slate-800", children: questionData.instruction }))] })), items.map((item, itemIndex) => {
+    const hasAttempt = Boolean(itemResults?.length) ||
+        userAnswers.some((answer) => Boolean(answer?.optionId || answer?.text?.trim()));
+    return (_jsxs("div", { className: "space-y-2", children: [(questionData.title || questionData.instruction) && (_jsxs(KidInstruction, { children: [questionData.title ? (_jsx("p", { className: "mb-1 text-[11px] font-semibold text-indigo-500", children: questionData.title })) : null, questionData.instruction] })), items.map((item, itemIndex) => {
                 const stored = userAnswers[itemIndex] || emptyAnswer();
                 const current = item.isExample
                     ? { optionId: item.optionId, text: stored.text }
                     : stored;
                 const expectedId = item.optionId;
+                const hasStudentText = current.text.trim() !== '';
+                const result = itemResults?.[itemIndex];
+                const mappingCorrect = Boolean(expectedId) && current.optionId === expectedId;
+                const points = typeof item.points === 'number' ? item.points : 1;
+                const halfLabel = formatHalf(points);
+                const sampleAnswers = (item.expectedAnswers || [])
+                    .map((answer) => answer.trim())
+                    .filter((answer) => answer !== '');
                 const parts = (item.question || '').split('{0}');
+                const showReview = isReviewMode && !item.isExample && Boolean(expectedId);
+                const showAnswerKey = showReview && !hasAttempt;
+                const showGradedReview = showReview && hasAttempt;
                 const setAnswer = (next) => {
                     if (!canEdit || item.isExample)
                         return;
@@ -23,12 +62,38 @@ export function ChooseThenAnswerGroupClient({ questionData, isReviewMode = false
                         text: next.text ?? current.text,
                     });
                 };
-                return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-gray-100 px-3 py-2", children: [_jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-slate-800 text-xs font-bold text-white", children: 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-[10px] font-semibold uppercase text-amber-800", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] }))] }), _jsxs("div", { className: "space-y-3 p-3", children: [_jsxs("p", { className: "flex flex-wrap items-center gap-1.5 text-[15px] leading-relaxed text-slate-800", children: [_jsx("span", { children: parts[0] || '' }), _jsx("span", { className: "inline-flex items-center gap-1", children: item.options.map((option, optionIndex) => {
-                                                const selected = current.optionId === option.id;
-                                                const showReview = isReviewMode && !item.isExample && Boolean(expectedId);
-                                                const isCorrect = showReview && option.id === expectedId;
-                                                const isWrong = showReview && selected && option.id !== expectedId;
-                                                return (_jsxs("span", { className: "inline-flex items-center gap-1", children: [optionIndex > 0 && _jsx("span", { className: "text-slate-400", children: "|" }), _jsx("button", { type: "button", disabled: !canEdit || item.isExample, onClick: () => setAnswer({ optionId: option.id }), className: cn('rounded-md border px-2.5 py-1 text-sm transition-colors', selected && !isCorrect && !isWrong && 'border-black bg-black text-white', !selected && !isCorrect && !isWrong && 'border-gray-300 bg-white text-gray-900', isCorrect && 'border-emerald-500 bg-emerald-50 text-emerald-900', isWrong && 'border-red-500 bg-red-50 text-red-900', (!canEdit || item.isExample) && 'cursor-default'), children: option.text || option.id })] }, option.id));
-                                            }) }), _jsx("span", { children: parts.slice(1).join('{0}') })] }), _jsx("textarea", { value: current.text, disabled: !canEdit || item.isExample, onChange: (event) => setAnswer({ text: event.target.value }), placeholder: "Answer for you", rows: 3, className: "w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800 outline-none focus:border-slate-400 disabled:bg-slate-50" })] })] }, `${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] }))] }));
+                return (_jsx(KidQuestionCard, { title: `Câu ${item.questionNumber || itemIndex + 1}`, points: points, isExample: item.isExample, children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: cn('mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white', badgeClass({
+                                    isExample: item.isExample,
+                                    isReviewMode,
+                                    hasAttempt,
+                                    points,
+                                    partialScore: result?.partialScore,
+                                    mappingCorrect,
+                                    hasText: hasStudentText,
+                                })), children: item.questionNumber || itemIndex + 1 }), _jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [_jsxs("p", { className: "flex flex-wrap items-center gap-x-1.5 gap-y-1.5 text-sm font-semibold leading-7 text-slate-800", children: [_jsx("span", { children: parts[0] || '' }), _jsx("span", { className: "inline-flex items-center gap-1", children: item.options.map((option, optionIndex) => {
+                                                    const selected = current.optionId === option.id;
+                                                    const isKey = option.id === expectedId;
+                                                    const pickedCorrect = showGradedReview && selected && isKey;
+                                                    const pickedWrong = showGradedReview && selected && !isKey;
+                                                    const keyOnly = showGradedReview && !selected && isKey;
+                                                    const officialCorrect = showAnswerKey && isKey;
+                                                    return (_jsxs("span", { className: "inline-flex items-center gap-1", children: [optionIndex > 0 && (_jsx("span", { className: "text-sm font-medium text-slate-300", children: "|" })), _jsxs("button", { type: "button", disabled: !canEdit || item.isExample, onClick: () => setAnswer({ optionId: option.id }), className: cn('inline-flex min-w-[3.5rem] items-center justify-center gap-1 rounded-full border px-2.5 py-1 text-sm font-semibold transition-colors', !showReview &&
+                                                                    selected &&
+                                                                    'border-blue-500 bg-blue-500 text-white shadow-sm ring-2 ring-blue-100', !showReview &&
+                                                                    !selected &&
+                                                                    'border-gray-200 bg-white text-slate-800 hover:border-blue-300 hover:bg-blue-50', showAnswerKey &&
+                                                                    !isKey &&
+                                                                    'border-slate-200 bg-white text-slate-800', officialCorrect &&
+                                                                    'border-2 border-emerald-500 bg-white text-slate-800', pickedCorrect && 'border-emerald-600 bg-emerald-600 text-white', pickedWrong && 'border-red-500 bg-red-500 text-white', keyOnly && 'border-emerald-500 bg-white text-emerald-800', showGradedReview &&
+                                                                    !selected &&
+                                                                    !isKey &&
+                                                                    'border-slate-200 bg-slate-50 text-slate-400', canEdit &&
+                                                                    !item.isExample &&
+                                                                    'cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-200', (!canEdit || item.isExample) && 'cursor-default'), children: [option.text || option.id, pickedCorrect ? _jsx(Check, { className: "h-3 w-3" }) : null, pickedWrong ? _jsx(X, { className: "h-3 w-3" }) : null] })] }, option.id));
+                                                }) }), _jsx("span", { children: parts.slice(1).join('{0}') })] }), showReview && hasAttempt ? (_jsxs("div", { className: "flex flex-wrap gap-1.5", children: [_jsxs("span", { className: cn('rounded-full px-2 py-0.5 text-[11px] font-semibold', mappingCorrect
+                                                    ? 'bg-emerald-50 text-emerald-700'
+                                                    : 'bg-red-50 text-red-700'), children: ["Ch\u1ECDn ", mappingCorrect ? halfLabel : '0'] }), result?.aiCorrect !== undefined ? (_jsxs("span", { className: cn('rounded-full px-2 py-0.5 text-[11px] font-semibold', result.aiCorrect
+                                                    ? 'bg-emerald-50 text-emerald-700'
+                                                    : 'bg-red-50 text-red-700'), children: ["Vi\u1EBFt ", result.aiCorrect ? halfLabel : '0'] })) : null] })) : null, canEdit || hasStudentText || (isReviewMode && hasAttempt) ? (_jsxs("label", { className: "block space-y-1", children: [_jsx("span", { className: "text-xs font-medium text-slate-500", children: "C\u00E2u tr\u1EA3 l\u1EDDi c\u1EE7a b\u1EA1n" }), isReviewMode && !hasStudentText ? (_jsx("p", { className: "rounded-lg border border-dashed border-slate-200 bg-slate-50 px-3 py-2 text-sm italic text-slate-400", children: "Ch\u01B0a vi\u1EBFt" })) : (_jsx("textarea", { value: current.text, disabled: !canEdit || item.isExample, onChange: (event) => setAnswer({ text: event.target.value }), placeholder: "Vi\u1EBFt c\u00E2u tr\u1EA3 l\u1EDDi t\u1EA1i \u0111\u00E2y...", rows: 2, className: "min-h-0 w-full resize-none rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm leading-relaxed text-slate-800 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 disabled:bg-slate-50" }))] })) : null, isReviewMode && sampleAnswers.length > 0 ? (_jsxs("p", { className: "text-xs text-slate-500", children: [_jsx("span", { className: "font-semibold", children: "M\u1EABu:" }), " ", sampleAnswers.join(' · ')] })) : null] })] }) }, `${item.questionNumber}-${itemIndex}`));
+            }), isReviewMode && questionData.explanation && (_jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-amber-100 bg-amber-50 px-3 py-2 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/choose-then-answer-group/ChooseThenAnswerGroupCreator.js

@@ -8,10 +8,10 @@ import { PointsInput } from '../../../../components/ui/points-input';
 import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
 import { Switch } from '../../../../components/ui/switch';
 import { useDebouncedCallback } from '../../../../shared/lib/hooks';
-import { ListChecks, Plus, Star, Trash2 } from 'lucide-react';
+import { ListChecks, PenLine, Plus, Sparkles, Star, Trash2 } from 'lucide-react';
 import { CompactCreatorHeader, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
 import { ChooseThenAnswerGroupClient } from './ChooseThenAnswerGroupClient';
-import { createEmptyItem, createEmptyOption, sumGradablePoints, } from './map-choose-then-answer-group-data';
+import { createEmptyItem, createEmptyOption, normalizeExpectedAnswers, sumGradablePoints, } from './map-choose-then-answer-group-data';
 import { CHOOSE_THEN_ANSWER_GROUP_DEFAULT_INSTRUCTION } from '../../_shared/types/choose-then-answer-group.type';
 function normalizeItems(raw) {
     if (!Array.isArray(raw) || raw.length === 0) {
@@ -29,6 +29,7 @@ function normalizeItems(raw) {
             question: item.question || '',
             options,
             optionId: item.optionId || options[0]?.id || '',
+            expectedAnswers: normalizeExpectedAnswers(item.expectedAnswers),
             isExample: item.isExample === true,
             points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
             questionNumber: item.questionNumber || index + 1,
@@ -41,6 +42,7 @@ export function ChooseThenAnswerGroupCreator({ initialData, onChange, externalEr
     const [items, setItems] = useState(() => normalizeItems(initialData?.items));
     const [explanation, setExplanation] = useState(initialData?.explanation || '');
     const [isClientMode, setIsClientMode] = useState(false);
+    const [previewAnswers, setPreviewAnswers] = useState([]);
     const [errors, setErrors] = useState([]);
     const onChangeRef = useRef(onChange);
     const previousPayloadRef = useRef('');
@@ -156,6 +158,33 @@ export function ChooseThenAnswerGroupCreator({ initialData, onChange, externalEr
             };
         }));
     };
+    const updateExpectedAnswer = (itemIndex, answerIndex, value) => {
+        setItems((prev) => prev.map((item, i) => {
+            if (i !== itemIndex)
+                return item;
+            const expectedAnswers = [...(item.expectedAnswers || [''])];
+            expectedAnswers[answerIndex] = value;
+            return { ...item, expectedAnswers };
+        }));
+    };
+    const addExpectedAnswer = (itemIndex) => {
+        setItems((prev) => prev.map((item, i) => {
+            if (i !== itemIndex)
+                return item;
+            return { ...item, expectedAnswers: [...(item.expectedAnswers || ['']), ''] };
+        }));
+    };
+    const removeExpectedAnswer = (itemIndex, answerIndex) => {
+        setItems((prev) => prev.map((item, i) => {
+            const current = item.expectedAnswers || [''];
+            if (i !== itemIndex || current.length <= 1)
+                return item;
+            return {
+                ...item,
+                expectedAnswers: current.filter((_, j) => j !== answerIndex),
+            };
+        }));
+    };
     const addItem = () => {
         setItems((prev) => [...prev, createEmptyItem(prev.length + 1)]);
     };
@@ -168,10 +197,29 @@ export function ChooseThenAnswerGroupCreator({ initialData, onChange, externalEr
         })));
     };
     const displayErrors = [...errors, ...(externalErrors || [])];
+    const openPreview = () => {
+        setPreviewAnswers(items.map((item) => ({
+            optionId: item.isExample ? item.optionId : '',
+            text: '',
+        })));
+        setIsClientMode(true);
+    };
     if (isClientMode) {
-        return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _jsx(ChooseThenAnswerGroupClient, { questionData: buildPayload(), isReviewMode: true })] }));
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _jsx(ChooseThenAnswerGroupClient, { questionData: buildPayload(), userAnswers: previewAnswers, onAnswerChange: (itemIndex, next) => {
+                        setPreviewAnswers((prev) => {
+                            const answers = items.map((item, index) => prev[index] || {
+                                optionId: item.isExample ? item.optionId : '',
+                                text: '',
+                            });
+                            answers[itemIndex] = next;
+                            return answers;
+                        });
+                    } })] }));
     }
-    return (_jsxs("div", { className: "space-y-3", children: [displayErrors.length > 0 && (_jsx("ul", { className: "list-disc space-y-1 rounded-md border border-red-200 bg-red-50 p-2 pl-6 text-xs text-red-700", children: displayErrors.map((error) => (_jsx("li", { children: error }, error))) })), _jsx(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(ListChecks, { className: "h-3.5 w-3.5" }), title: "Ch\u1ECDn r\u1ED3i tr\u1EA3 l\u1EDDi (Nh\u00F3m)", preview: { onClick: () => setIsClientMode(true) } }), children: _jsxs("div", { className: "grid gap-2.5 md:grid-cols-2", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "cta-title", className: "text-sm font-semibold text-gray-800", children: "Ti\u00EAu \u0111\u1EC1 (optional)" }), _jsx(Input, { id: "cta-title", value: title, onChange: (event) => setTitle(event.target.value), placeholder: "GRAMMAR", className: "h-10 border-gray-200 bg-white" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "cta-instruction", className: "text-sm font-semibold text-gray-800", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "cta-instruction", value: instruction, onChange: (event) => setInstruction(event.target.value), placeholder: CHOOSE_THEN_ANSWER_GROUP_DEFAULT_INSTRUCTION, className: "h-10 border-gray-200 bg-white" })] })] }) }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-sm", children: [_jsx(CardHeader, { className: "px-3 py-2", children: _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs(CardTitle, { className: "text-sm font-semibold text-gray-800", children: ["Danh s\u00E1ch c\u00E2u (", items.length, ")"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addItem, className: "h-8 gap-1.5 px-2.5 text-xs", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), " Th\u00EAm c\u00E2u"] })] }) }), _jsxs(CardContent, { className: "space-y-2.5 px-3 pb-3", children: [items.map((item, index) => (_jsxs("div", { className: "space-y-2.5 rounded-md border border-gray-200 bg-white px-3 py-2.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", index + 1] }), items.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => removeItem(index), className: "h-7 w-7 text-red-500 hover:bg-red-50", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }), _jsx(Input, { value: item.question, onChange: (event) => updateItem(index, { question: event.target.value }), placeholder: "Did you eat {0} for lunch today?", className: "h-10 border-gray-200 bg-white" }), _jsxs("p", { className: "text-xs text-slate-500", children: ["D\u00F9ng ", '{0}', " cho ch\u1ED7 hi\u1EC7n chip ch\u1ECDn."] }), item.options.map((option, optionIndex) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { value: option.text, onChange: (event) => updateOption(index, optionIndex, event.target.value), placeholder: `Lựa chọn ${optionIndex + 1}`, className: "h-10 border-gray-200 bg-white" }), item.options.length > 2 && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => removeOption(index, optionIndex), className: "h-7 w-7 text-red-500 hover:bg-red-50", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }, option.id))), _jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: () => addOption(index), className: "h-8 gap-1.5 px-2.5 text-xs", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), " Th\u00EAm l\u1EF1a ch\u1ECDn"] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("select", { className: "h-10 rounded-md border border-input bg-background px-3 text-sm", value: item.optionId, onChange: (event) => updateItem(index, { optionId: event.target.value }), children: item.options.map((option) => (_jsx("option", { value: option.id, children: option.text || option.id }, option.id))) }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Switch, { id: `cta-example-${index}`, checked: item.isExample === true, onCheckedChange: (checked) => updateItem(index, { isExample: checked }) }), _jsxs(Label, { htmlFor: `cta-example-${index}`, className: "flex cursor-pointer items-center gap-1 text-xs", children: [_jsx(Star, { className: "h-3 w-3 text-amber-500" }), "Example"] })] }), !item.isExample && (_jsx(PointsInput, { value: item.points, allowZero: true, onChange: (event) => updateItem(index, {
-                                                    points: Number.parseInt(event.target.value, 10) || 1,
-                                                }) }))] })] }, `${item.questionNumber}-${index}`))), _jsx(CompactExplanationToggle, { value: explanation, onValueChange: setExplanation, defaultVisible: Boolean(initialData?.explanation) })] })] })] }));
+    return (_jsxs("div", { className: "space-y-3", children: [displayErrors.length > 0 && (_jsx("ul", { className: "list-disc space-y-1 rounded-md border border-red-200 bg-red-50 p-2 pl-6 text-xs text-red-700", children: displayErrors.map((error) => (_jsx("li", { children: error }, error))) })), _jsxs(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(ListChecks, { className: "h-3.5 w-3.5" }), title: "Ch\u1ECDn r\u1ED3i tr\u1EA3 l\u1EDDi (Nh\u00F3m)", preview: { onClick: openPreview } }), children: [_jsxs("div", { className: "grid gap-2.5 md:grid-cols-2", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "cta-title", className: "text-sm font-semibold text-gray-800", children: "Ti\u00EAu \u0111\u1EC1 (optional)" }), _jsx(Input, { id: "cta-title", value: title, onChange: (event) => setTitle(event.target.value), placeholder: "GRAMMAR", className: "h-10 border-gray-200 bg-white" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "cta-instruction", className: "text-sm font-semibold text-gray-800", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "cta-instruction", value: instruction, onChange: (event) => setInstruction(event.target.value), placeholder: CHOOSE_THEN_ANSWER_GROUP_DEFAULT_INSTRUCTION, className: "h-10 border-gray-200 bg-white" })] })] }), _jsxs("p", { className: "mt-2.5 rounded-lg border border-indigo-100 bg-indigo-50/70 px-3 py-2 text-xs leading-relaxed text-indigo-800", children: ["M\u1ED7i c\u00E2u c\u00F3 2 ph\u1EA7n: ", _jsx("strong", { children: "ch\u1ECDn t\u1EEB \u0111\u00FAng" }), " trong c\u00E2u (mapping), r\u1ED3i", ' ', _jsx("strong", { children: "vi\u1EBFt c\u00E2u tr\u1EA3 l\u1EDDi" }), " (AI). V\u00ED d\u1EE5: Did you eat many | much for lunch today? \u2192 No, I didn\u2019t eat much for lunch today."] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-sm", children: [_jsx(CardHeader, { className: "px-3 py-2", children: _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs(CardTitle, { className: "text-sm font-semibold text-gray-800", children: ["Danh s\u00E1ch c\u00E2u (", items.length, ")"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addItem, className: "h-8 gap-1.5 px-2.5 text-xs", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), " Th\u00EAm c\u00E2u"] })] }) }), _jsxs(CardContent, { className: "space-y-2.5 px-3 pb-3", children: [items.map((item, index) => (_jsxs("div", { className: "space-y-2.5 rounded-md border border-gray-200 bg-white px-3 py-2.5", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", index + 1] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Switch, { id: `cta-example-${index}`, checked: item.isExample === true, onCheckedChange: (checked) => updateItem(index, { isExample: checked }) }), _jsxs(Label, { htmlFor: `cta-example-${index}`, className: "flex cursor-pointer items-center gap-1 text-xs", children: [_jsx(Star, { className: "h-3 w-3 text-amber-500" }), "Example"] })] }), !item.isExample && (_jsxs("div", { className: "space-y-0.5", children: [_jsx(PointsInput, { value: item.points, allowZero: true, onChange: (event) => updateItem(index, {
+                                                                    points: Number.parseInt(event.target.value, 10) || 1,
+                                                                }) }), _jsx("p", { className: "text-[10px] leading-tight text-slate-500", children: "C\u1EA3 c\u00E2u: 50% ch\u1ECDn + 50% vi\u1EBFt" })] })), items.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => removeItem(index), className: "h-7 w-7 text-red-500 hover:bg-red-50", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] })] }), _jsxs("div", { className: "space-y-2 rounded-lg border border-slate-200 bg-slate-50/60 px-3 py-2.5", children: [_jsxs("p", { className: "flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-slate-600", children: [_jsx(ListChecks, { className: "h-3.5 w-3.5" }), "1. Ch\u1ECDn t\u1EEB \u0111\u00FAng"] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-sm font-semibold text-gray-800", children: "C\u00E2u h\u1ECFi" }), _jsx(Input, { value: item.question, onChange: (event) => updateItem(index, { question: event.target.value }), placeholder: "Did you eat {0} for lunch today?", className: "h-10 border-gray-200 bg-white" }), _jsxs("p", { className: "text-xs text-slate-500", children: ["D\u00F9ng ", '{0}', " cho ch\u1ED7 hi\u1EC7n chip ch\u1ECDn."] })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-sm font-semibold text-gray-800", children: "L\u1EF1a ch\u1ECDn" }), _jsx("p", { className: "text-xs text-slate-500", children: "Ch\u1ECDn radio \u0111\u1EC3 \u0111\u00E1nh d\u1EA5u \u0111\u00E1p \u00E1n \u0111\u00FAng (chip)." }), item.options.map((option, optionIndex) => {
+                                                        const isCorrect = item.optionId === option.id;
+                                                        return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: `cta-correct-${index}`, checked: isCorrect, onChange: () => updateItem(index, { optionId: option.id }), "aria-label": `Đáp án đúng: ${option.text || option.id}`, className: "h-4 w-4 shrink-0 accent-indigo-600" }), _jsx(Input, { value: option.text, onChange: (event) => updateOption(index, optionIndex, event.target.value), placeholder: `Lựa chọn ${optionIndex + 1}`, className: "h-10 border-gray-200 bg-white" }), isCorrect && (_jsx("span", { className: "shrink-0 text-[10px] font-semibold uppercase text-indigo-600", children: "\u0110\u00FAng" })), item.options.length > 2 && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => removeOption(index, optionIndex), className: "h-7 w-7 text-red-500 hover:bg-red-50", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }, option.id));
+                                                    })] }), _jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: () => addOption(index), className: "h-8 gap-1.5 px-2.5 text-xs", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), " Th\u00EAm l\u1EF1a ch\u1ECDn"] })] }), _jsxs("div", { className: "space-y-2 rounded-lg border border-violet-100 bg-violet-50/50 px-3 py-2.5", children: [_jsxs("p", { className: "flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-violet-700", children: [_jsx(Sparkles, { className: "h-3.5 w-3.5" }), "2. Tr\u1EA3 l\u1EDDi c\u00E2u h\u1ECFi (AI)"] }), _jsxs("p", { className: "flex items-start gap-1.5 text-xs text-violet-800/80", children: [_jsx(PenLine, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }), "H\u1ECDc sinh vi\u1EBFt c\u00E2u tr\u1EA3 l\u1EDDi c\u1EE7a m\u00ECnh. \u0110\u00E1p \u00E1n m\u1EABu gi\u00FAp AI ch\u1EA5m theo ngh\u0129a (\u0111\u1EC3 tr\u1ED1ng = ch\u1EA5m \u0111\u00FAng ch\u1EE7 \u0111\u1EC1)."] }), (item.expectedAnswers || ['']).map((answer, answerIndex) => (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("textarea", { value: answer, onChange: (event) => updateExpectedAnswer(index, answerIndex, event.target.value), placeholder: "No, I didn\u2019t eat much for lunch today.", rows: 2, className: "min-h-[3.25rem] w-full resize-none rounded-md border border-gray-200 bg-white px-3 py-2 text-sm outline-none focus:border-violet-400 focus:ring-2 focus:ring-violet-100" }), (item.expectedAnswers || ['']).length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => removeExpectedAnswer(index, answerIndex), className: "h-7 w-7 text-red-500 hover:bg-red-50", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }, `cta-expected-${index}-${answerIndex}`))), _jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: () => addExpectedAnswer(index), className: "h-8 gap-1.5 px-2.5 text-xs", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), " Th\u00EAm \u0111\u00E1p \u00E1n m\u1EABu"] })] })] }, `${item.questionNumber}-${index}`))), _jsx(CompactExplanationToggle, { value: explanation, onValueChange: setExplanation, defaultVisible: Boolean(initialData?.explanation) })] })] })] }));
 }

package/dist/components/questions/types/choose-then-answer-group/map-choose-then-answer-group-data.d.ts

@@ -1,11 +1,14 @@
-import type { ChooseThenAnswerGroupData, ChooseThenAnswerGroupItemData, ChooseThenAnswerOption, ChooseThenAnswerStudentItemAnswer } from '../../_shared/types/choose-then-answer-group.type';
+import type { ChooseThenAnswerGradeDetail, ChooseThenAnswerGroupData, ChooseThenAnswerGroupItemData, ChooseThenAnswerItemResult, ChooseThenAnswerOption, ChooseThenAnswerStudentItemAnswer } from '../../_shared/types/choose-then-answer-group.type';
 export declare function nextPrefixedId(prefix: string, existing: string[]): string;
 export declare function sumGradablePoints(items: ChooseThenAnswerGroupItemData[]): number;
 export declare function createEmptyOption(existingIds: string[]): ChooseThenAnswerOption;
+export declare function normalizeExpectedAnswers(value: unknown): string[];
 export declare function createEmptyItem(questionNumber: number): ChooseThenAnswerGroupItemData;
 export declare function parseItemAnswer(raw: unknown): {
     optionId: string;
+    expectedAnswers: string[];
 };
 export declare function parseStudentAnswer(raw: unknown): ChooseThenAnswerStudentItemAnswer;
 export declare function mapApiItem(item: unknown, index: number, fallbackAnswer?: unknown): ChooseThenAnswerGroupItemData;
 export declare function mapQuestionToChooseThenAnswerGroupData(question: Record<string, unknown> | null | undefined): ChooseThenAnswerGroupData;
+export declare function toCtaItemResults(details: ChooseThenAnswerGradeDetail[] | undefined, items: ChooseThenAnswerGroupItemData[], userAnswers: ChooseThenAnswerStudentItemAnswer[]): ChooseThenAnswerItemResult[] | undefined;

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

@@ -28,6 +28,16 @@ export function createEmptyOption(existingIds) {
         text: '',
     };
 }
+export function normalizeExpectedAnswers(value) {
+    if (!Array.isArray(value)) {
+        return [''];
+    }
+    const filled = value
+        .filter((item) => typeof item === 'string')
+        .map((item) => item.trim())
+        .filter((item) => item !== '');
+    return filled.length > 0 ? filled : [''];
+}
 export function createEmptyItem(questionNumber) {
     const first = createEmptyOption([]);
     const second = createEmptyOption([first.id]);
@@ -35,6 +45,7 @@ export function createEmptyItem(questionNumber) {
         question: '',
         options: [first, second],
         optionId: first.id,
+        expectedAnswers: [''],
         isExample: false,
         points: 1,
         questionNumber,
@@ -42,8 +53,11 @@ export function createEmptyItem(questionNumber) {
 }
 export function parseItemAnswer(raw) {
     if (!isRecord(raw))
-        return { optionId: '' };
-    return { optionId: asString(raw.optionId) };
+        return { optionId: '', expectedAnswers: [''] };
+    return {
+        optionId: asString(raw.optionId),
+        expectedAnswers: normalizeExpectedAnswers(raw.expectedAnswers),
+    };
 }
 export function parseStudentAnswer(raw) {
     if (!isRecord(raw))
@@ -78,6 +92,7 @@ export function mapApiItem(item, index, fallbackAnswer) {
         question: asString(content.question) || asString(record.question),
         options,
         optionId: parsed.optionId || options[0]?.id || '',
+        expectedAnswers: parsed.expectedAnswers,
         isExample,
         points: isExample ? 0 : (typeof record.points === 'number' ? record.points : 1),
         questionNumber: typeof record.questionNumber === 'number' ? record.questionNumber : index + 1,
@@ -125,3 +140,25 @@ export function mapQuestionToChooseThenAnswerGroupData(question) {
         points: 1,
     };
 }
+export function toCtaItemResults(details, items, userAnswers) {
+    if (!details?.length) {
+        return undefined;
+    }
+    const byId = new Map(details.map((detail) => [detail.itemId, detail]));
+    return items.map((item, index) => {
+        const detail = byId.get(`item-${index}`);
+        const mappingCorrect = Boolean(item.optionId) && userAnswers[index]?.optionId === item.optionId;
+        const half = (typeof item.points === 'number' ? item.points : 1) * 0.5;
+        let aiCorrect;
+        if (detail?.partialScore != null) {
+            const mappingHalf = mappingCorrect ? half : 0;
+            aiCorrect = detail.partialScore - mappingHalf > 1e-9;
+        }
+        return {
+            mappingCorrect,
+            aiCorrect,
+            partialScore: detail?.partialScore,
+            feedback: detail?.feedback,
+        };
+    });
+}

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

@@ -1,5 +1,8 @@
 import { CHOOSE_THEN_ANSWER_GROUP_DEFAULT_INSTRUCTION, CHOOSE_THEN_ANSWER_ITEM_TYPE, } from '../../_shared/types/choose-then-answer-group.type';
 import { sumGradablePoints } from './map-choose-then-answer-group-data';
+function filledExpectedAnswers(values) {
+    return (values || []).map((value) => value.trim()).filter((value) => value !== '');
+}
 export const transformChooseThenAnswerGroup = (question) => {
     const answerData = question.answer;
     const items = Array.isArray(answerData?.items) ? answerData.items : [];
@@ -7,25 +10,35 @@ export const transformChooseThenAnswerGroup = (question) => {
         return { apiContent: { items: [] }, apiCorrectAnswer: { answer: [] } };
     }
     const title = typeof answerData?.title === 'string' ? answerData.title.trim() : '';
-    const apiItems = items.map((item, index) => ({
-        questionType: CHOOSE_THEN_ANSWER_ITEM_TYPE,
-        ...(item.isExample ? { isExample: true } : {}),
-        content: {
-            question: item.question || '',
-            options: (item.options || []).map((option) => ({
-                id: option.id || '',
-                text: option.text || '',
-            })),
-        },
-        correctAnswer: { answer: { optionId: item.optionId || '' } },
-        points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
-        questionNumber: item.questionNumber || index + 1,
-    }));
+    const apiItems = items.map((item, index) => {
+        const expectedAnswers = filledExpectedAnswers(item.expectedAnswers);
+        return {
+            questionType: CHOOSE_THEN_ANSWER_ITEM_TYPE,
+            ...(item.isExample ? { isExample: true } : {}),
+            content: {
+                question: item.question || '',
+                options: (item.options || []).map((option) => ({
+                    id: option.id || '',
+                    text: option.text || '',
+                })),
+            },
+            correctAnswer: {
+                answer: {
+                    optionId: item.optionId || '',
+                    ...(expectedAnswers.length > 0 ? { expectedAnswers } : {}),
+                },
+            },
+            points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+            questionNumber: item.questionNumber || index + 1,
+        };
+    });
     return {
         apiContent: {
             meta: {
                 instruction: answerData?.instruction || CHOOSE_THEN_ANSWER_GROUP_DEFAULT_INSTRUCTION,
                 ...(title ? { title } : {}),
+                gradingType: 'AI',
+                isAiGraded: true,
             },
             items: apiItems,
         },

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

@@ -1,2 +1,2 @@
 import type { CrossOutWordGroupClientProps } from '../../_shared/types/cross-out-word-group.type';
-export declare function CrossOutWordGroupClient({ questionData, isReviewMode, userAnswers, }: CrossOutWordGroupClientProps): import("react").JSX.Element;
+export declare function CrossOutWordGroupClient({ questionData, isReviewMode, userAnswers, onAnswerChange, }: CrossOutWordGroupClientProps): import("react").JSX.Element;

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

@@ -1,7 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CircleHelp, Lightbulb, Star } from 'lucide-react';
+import { Lightbulb } from 'lucide-react';
 import { cn } from '../../../../shared/lib/utils';
+import { tokenizeCrossOutQuestion } from './tokenize';
+import { KidInstruction, KidQuestionCard } from '../../_shared/components/compact';
+function normalizeWord(word) {
+    return word.replace(/[^\p{L}\p{N}'-]/gu, '').toLowerCase();
+}
 function formatAnswer(answer) {
     if (!answer)
         return '—';
@@ -15,13 +20,77 @@ function formatAnswer(answer) {
         return 'câu đúng (không gạch)';
     return `gạch "${answer.crossOut}"${posInfo}`;
 }
-export function CrossOutWordGroupClient({ questionData, isReviewMode = false, userAnswers = [], }) {
+function isCorrectToken(correct, tokenIndex, plain) {
+    if (!correct)
+        return false;
+    if (typeof correct.wordIndex === 'number' && correct.wordIndex >= 0) {
+        return correct.wordIndex === tokenIndex;
+    }
+    return Boolean(correct.crossOut) && normalizeWord(correct.crossOut) === plain && plain !== '';
+}
+export function CrossOutWordGroupClient({ 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 })), items.map((item, itemIndex) => {
-                const userValue = userAnswers[itemIndex];
+    const emit = (itemIndex, nextItem) => {
+        const item = items[itemIndex];
+        if (isReviewMode || item?.isExample || !onAnswerChange) {
+            return;
+        }
+        const next = items.map((_, index) => userAnswers[index] ?? null);
+        next[itemIndex] = nextItem;
+        onAnswerChange(next);
+    };
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(KidInstruction, { children: questionData.instruction }), items.map((item, itemIndex) => {
                 const isReplace = item.type === 'CROSS_OUT_AND_REPLACE';
-                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"] })), _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' })] }), _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' }), _jsxs("div", { className: "rounded-lg border border-gray-100 bg-gray-50 px-3 py-2 text-sm text-gray-700", children: [_jsx("span", { className: "font-medium text-gray-500", children: "\u0110\u00E1p \u00E1n: " }), formatAnswer(item.correctAnswer)] }), isReviewMode && (_jsxs("div", { className: "rounded-lg border border-blue-100 bg-blue-50 px-3 py-2 text-sm text-blue-800", children: [_jsx("span", { className: "font-medium", children: "H\u1ECDc sinh: " }), formatAnswer(userValue)] }))] })] }, `${item.questionNumber}-${itemIndex}`));
+                const userValue = item.isExample ? item.correctAnswer : userAnswers[itemIndex];
+                const canSelect = !isReviewMode && !item.isExample && Boolean(onAnswerChange);
+                const tokens = tokenizeCrossOutQuestion(item.question || '');
+                const selectedIndex = userValue?.wordIndex;
+                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
+                            ? '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,
+                                        wordIndex: selectedIndex ?? null,
+                                        crossOut: selectedWord,
+                                        replaceWith: event.target.value,
+                                    }), placeholder: "Nh\u1EADp t\u1EEB thay th\u1EBF...", className: "h-8 min-w-[10rem] rounded-lg border border-slate-200 px-2.5 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 disabled:bg-slate-50" })] })) : null, _jsx("div", { className: "flex flex-wrap items-center gap-1.5 text-sm font-medium leading-relaxed text-slate-800", children: tokens.map((token, tokenIndex) => {
+                                const plain = normalizeWord(token);
+                                const isSelected = typeof selectedIndex === 'number'
+                                    ? selectedIndex === tokenIndex
+                                    : Boolean(selectedWord) && normalizeWord(selectedWord) === plain && plain !== '';
+                                const isCorrectTarget = isReviewMode && !item.isExample && correct?.wordIndex === tokenIndex;
+                                const isSelectedCorrect = isReviewMode &&
+                                    !item.isExample &&
+                                    isSelected &&
+                                    isCorrectToken(correct, tokenIndex, plain);
+                                const isSelectedWrong = isReviewMode &&
+                                    !item.isExample &&
+                                    isSelected &&
+                                    Boolean(correct) &&
+                                    !isSelectedCorrect;
+                                return (_jsx("button", { type: "button", disabled: !canSelect || plain === '', onClick: () => {
+                                        const already = typeof selectedIndex === 'number'
+                                            ? selectedIndex === tokenIndex
+                                            : selectedWord === token;
+                                        emit(itemIndex, {
+                                            type: item.type,
+                                            wordIndex: already ? null : tokenIndex,
+                                            crossOut: already ? '' : token,
+                                            ...(isReplace ? { replaceWith } : {}),
+                                        });
+                                    }, className: cn('rounded-lg px-2 py-1 transition-colors', isSelectedWrong
+                                        ? 'border border-rose-200 bg-rose-100 font-bold text-rose-700 line-through decoration-rose-600'
+                                        : isSelectedCorrect
+                                            ? 'border border-emerald-300 bg-emerald-100 font-bold text-emerald-800 line-through decoration-emerald-600'
+                                            : isSelected
+                                                ? 'border border-blue-200 bg-blue-100 font-bold text-blue-700 line-through decoration-blue-600'
+                                                : isCorrectTarget
+                                                    ? 'border-2 border-dashed border-emerald-500 bg-emerald-50 font-bold text-emerald-800'
+                                                    : canSelect
+                                                        ? 'cursor-pointer hover:bg-blue-50 hover:text-blue-700'
+                                                        : 'cursor-default'), children: token }, `${item.questionNumber}-token-${tokenIndex}`));
+                            }) }), isReviewMode ? (_jsxs("div", { className: "rounded-lg border border-emerald-100 bg-emerald-50 px-3 py-2 text-sm text-emerald-800", children: [_jsx("span", { className: "font-medium", children: "\u0110\u00E1p \u00E1n: " }), formatAnswer(item.correctAnswer)] })) : 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] }))] }));
 }