@tinyweb_dev/oe-exam-sdk 0.1.30 → 0.1.31

package/dist/components/exams/ExamPreviewDialog.d.ts

@@ -1,4 +1,5 @@
 import type { ExamQuestionsSdkApi } from '../../api/exam-questions.types';
+import { ExamPreviewMode } from './exam-preview.mode';
 export interface ExamPreviewDialogProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
@@ -8,12 +9,17 @@ export interface ExamPreviewDialogProps {
     api: ExamQuestionsSdkApi;
     /** Fallback heading shown until the exam name loads. */
     title?: string;
+    /** Initial preview mode. Default is student view without answers. */
+    defaultMode?: ExamPreviewMode;
 }
 /**
  * Read-only popup that previews an exam by id.
  *
+ * Supports two modes:
+ * - 'student' (default): interactive student taking view without revealing answers
+ * - 'answers': review view with correct answers highlighted and explanations
+ *
  * UI mirrors the host app: one Part per screen (all questions of that part),
- * Next/Prev navigates between parts. No attempt is created — data comes from
- * {@link ExamQuestionsSdkApi}. Questions render via QuestionViewer in review mode.
+ * Next/Prev navigates between parts. Data comes from {@link ExamQuestionsSdkApi}.
  */
-export declare function ExamPreviewDialog({ open, onOpenChange, examId, api, title, }: ExamPreviewDialogProps): import("react").JSX.Element;
+export declare function ExamPreviewDialog({ open, onOpenChange, examId, api, title, defaultMode, }: ExamPreviewDialogProps): import("react").JSX.Element;

package/dist/components/exams/ExamPreviewDialog.js

@@ -1,30 +1,42 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Eye } from 'lucide-react';
+import { CheckCircle2, Eye, GraduationCap } from 'lucide-react';
 import { Button } from '../../components/ui/button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../components/ui/dialog';
 import { useT } from '../../shared/lib/i18n';
+import { cn } from '../../shared/lib/utils';
+import { ExamPreviewMode } from './exam-preview.mode';
 import { ExamPreviewPartContent } from './ExamPreviewPartContent';
 import { ExamPreviewSidebar } from './ExamPreviewSidebar';
 import { getQuestionNumber, getQuestionPoints, groupQuestionsByPart, sumQuestionPoints, unwrapApiData, } from './exam-preview.types';
 /**
  * Read-only popup that previews an exam by id.
  *
+ * Supports two modes:
+ * - 'student' (default): interactive student taking view without revealing answers
+ * - 'answers': review view with correct answers highlighted and explanations
+ *
  * UI mirrors the host app: one Part per screen (all questions of that part),
- * Next/Prev navigates between parts. No attempt is created — data comes from
- * {@link ExamQuestionsSdkApi}. Questions render via QuestionViewer in review mode.
+ * Next/Prev navigates between parts. Data comes from {@link ExamQuestionsSdkApi}.
  */
-export function ExamPreviewDialog({ open, onOpenChange, examId, api, title, }) {
+export function ExamPreviewDialog({ open, onOpenChange, examId, api, title, defaultMode = ExamPreviewMode.STUDENT, }) {
     const t = useT();
     const [exam, setExam] = useState(null);
     const [questions, setQuestions] = useState([]);
     const [currentPartIndex, setCurrentPartIndex] = useState(0);
     const [showPartsDetail, setShowPartsDetail] = useState(false);
+    const [previewMode, setPreviewMode] = useState(defaultMode);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
     const [reloadKey, setReloadKey] = useState(0);
     const contentRef = useRef(null);
+    // Sync / reset previewMode whenever dialog opens
+    useEffect(() => {
+        if (open) {
+            setPreviewMode(defaultMode);
+        }
+    }, [open, defaultMode]);
     // Fetch exam + questions whenever the dialog opens for an exam.
     useEffect(() => {
         if (!open || !examId) {
@@ -117,5 +129,11 @@ export function ExamPreviewDialog({ open, onOpenChange, examId, api, title, }) {
             scrollToTop();
         }
     };
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-h-[95vh] max-w-7xl overflow-y-auto", children: [_jsx(DialogHeader, { children: _jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(Eye, { className: "h-5 w-5 text-blue-600" }), t('admin.exams.preview.title', { name: heading })] }) }), _jsxs("div", { className: "flex h-[80vh] flex-col gap-4 sm:flex-row", children: [_jsx(ExamPreviewSidebar, { examName: heading, duration: duration, totalPoints: totalPoints, questions: questions, questionsByPart: questionsByPart, currentPart: currentPart, currentPartIndex: currentPartIndex, totalParts: totalParts, progress: progress, loading: loading, showPartsDetail: showPartsDetail, onTogglePartsDetail: () => setShowPartsDetail((value) => !value), onGoToPart: goToPart }), _jsx(ExamPreviewPartContent, { loading: loading, error: error, questions: questions, currentPart: currentPart, currentPartQuestions: currentPartQuestions, currentPartIndex: currentPartIndex, totalParts: totalParts, partDisplayName: partDisplayName, partTotalPoints: partTotalPoints, contentRef: contentRef, onRetry: () => setReloadKey((key) => key + 1), onPreviousPart: goToPreviousPart, onNextPart: goToNextPart })] }), _jsx("div", { className: "border-t pt-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-sm text-gray-600", children: t('admin.exams.preview.footerNote') }), _jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), className: "border-gray-300", children: t('admin.exams.preview.close') })] }) })] }) }));
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-h-[95vh] max-w-7xl overflow-y-auto", children: [_jsxs(DialogHeader, { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between border-b pb-3 pr-8", children: [_jsxs(DialogTitle, { className: "flex items-center gap-2 text-lg font-bold", children: [_jsx(Eye, { className: "h-5 w-5 text-blue-600" }), t('admin.exams.preview.title', { name: heading })] }), _jsxs("div", { className: "inline-flex items-center rounded-lg border border-gray-200 bg-gray-100 p-1 shadow-inner", children: [_jsxs("button", { type: "button", onClick: () => setPreviewMode(ExamPreviewMode.STUDENT), className: cn('inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-semibold transition-all', previewMode === ExamPreviewMode.STUDENT
+                                        ? 'bg-white text-blue-700 shadow-sm ring-1 ring-black/5'
+                                        : 'text-gray-600 hover:bg-gray-200/70 hover:text-gray-900'), children: [_jsx(GraduationCap, { className: "h-4 w-4" }), _jsx("span", { children: t('admin.exams.preview.mode.student') })] }), _jsxs("button", { type: "button", onClick: () => setPreviewMode(ExamPreviewMode.ANSWERS), className: cn('inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-semibold transition-all', previewMode === ExamPreviewMode.ANSWERS
+                                        ? 'bg-emerald-600 text-white shadow-sm'
+                                        : 'text-gray-600 hover:bg-gray-200/70 hover:text-gray-900'), children: [_jsx(CheckCircle2, { className: "h-4 w-4" }), _jsx("span", { children: t('admin.exams.preview.mode.answers') })] })] })] }), _jsxs("div", { className: "flex h-[80vh] flex-col gap-4 sm:flex-row", children: [_jsx(ExamPreviewSidebar, { examName: heading, duration: duration, totalPoints: totalPoints, questions: questions, questionsByPart: questionsByPart, currentPart: currentPart, currentPartIndex: currentPartIndex, totalParts: totalParts, progress: progress, loading: loading, showPartsDetail: showPartsDetail, previewMode: previewMode, onTogglePartsDetail: () => setShowPartsDetail((value) => !value), onGoToPart: goToPart }), _jsx(ExamPreviewPartContent, { loading: loading, error: error, questions: questions, currentPart: currentPart, currentPartQuestions: currentPartQuestions, currentPartIndex: currentPartIndex, totalParts: totalParts, partDisplayName: partDisplayName, partTotalPoints: partTotalPoints, contentRef: contentRef, isReviewMode: previewMode === ExamPreviewMode.ANSWERS, onRetry: () => setReloadKey((key) => key + 1), onPreviousPart: goToPreviousPart, onNextPart: goToNextPart })] }), _jsx("div", { className: "border-t pt-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-sm text-gray-600", children: previewMode === ExamPreviewMode.ANSWERS
+                                    ? t('admin.exams.preview.footerNoteAnswers')
+                                    : t('admin.exams.preview.footerNoteStudent') }), _jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), className: "border-gray-300", children: t('admin.exams.preview.close') })] }) })] }) }));
 }

package/dist/components/exams/ExamPreviewPartContent.d.ts

@@ -11,8 +11,9 @@ export interface ExamPreviewPartContentProps {
     partDisplayName: string;
     partTotalPoints: number;
     contentRef: RefObject<HTMLDivElement | null>;
+    isReviewMode?: boolean;
     onRetry: () => void;
     onPreviousPart: () => void;
     onNextPart: () => void;
 }
-export declare function ExamPreviewPartContent({ loading, error, questions, currentPart, currentPartQuestions, currentPartIndex, totalParts, partDisplayName, partTotalPoints, contentRef, onRetry, onPreviousPart, onNextPart, }: ExamPreviewPartContentProps): import("react").JSX.Element;
+export declare function ExamPreviewPartContent({ loading, error, questions, currentPart, currentPartQuestions, currentPartIndex, totalParts, partDisplayName, partTotalPoints, contentRef, isReviewMode, onRetry, onPreviousPart, onNextPart, }: ExamPreviewPartContentProps): import("react").JSX.Element;

package/dist/components/exams/ExamPreviewPartContent.js

@@ -5,8 +5,9 @@ import { Badge } from '../../components/ui/badge';
 import { Button } from '../../components/ui/button';
 import { QuestionViewer } from '../questions/viewer/QuestionViewer';
 import { useT } from '../../shared/lib/i18n';
+import { ExamPreviewMode } from './exam-preview.mode';
 import { difficultyBadgeClass, getQuestionDifficulty, getQuestionNumber, getQuestionPoints, } from './exam-preview.types';
-export function ExamPreviewPartContent({ loading, error, questions, currentPart, currentPartQuestions, currentPartIndex, totalParts, partDisplayName, partTotalPoints, contentRef, onRetry, onPreviousPart, onNextPart, }) {
+export function ExamPreviewPartContent({ loading, error, questions, currentPart, currentPartQuestions, currentPartIndex, totalParts, partDisplayName, partTotalPoints, contentRef, isReviewMode = false, onRetry, onPreviousPart, onNextPart, }) {
     const t = useT();
     return (_jsx("div", { className: "flex-1 overflow-y-auto", children: _jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex items-center justify-between border-b pb-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold", children: loading ? (_jsx("span", { className: "text-gray-400", children: t('admin.exams.preview.loading') })) : totalParts > 0 ? (t('admin.exams.preview.partIndex', {
                                         index: String(currentPartIndex + 1),
@@ -22,6 +23,6 @@ export function ExamPreviewPartContent({ loading, error, questions, currentPart,
                                                     number: String(qNumber),
                                                 }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "outline", children: t('admin.exams.preview.points', {
                                                             count: String(getQuestionPoints(question)),
-                                                        }) }), _jsx(Badge, { className: difficultyBadgeClass(difficulty), children: difficulty })] })] }), _jsx(QuestionViewer, { question: question, isReviewMode: true })] }, question.id));
+                                                        }) }), _jsx(Badge, { className: difficultyBadgeClass(difficulty), children: difficulty })] })] }), _jsx(QuestionViewer, { question: question, isReviewMode: isReviewMode }, `${question.id}-${isReviewMode ? ExamPreviewMode.ANSWERS : ExamPreviewMode.STUDENT}`)] }, question.id));
                         }) })) : null }), !loading && totalParts > 0 && (_jsxs("div", { className: "mt-auto flex items-center justify-between border-t border-gray-200 bg-gray-50 px-4 py-3", children: [_jsxs(Button, { variant: "outline", onClick: onPreviousPart, disabled: currentPartIndex === 0, className: "flex h-9 items-center gap-2 px-3 text-sm", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: t('admin.exams.preview.prevPart') }), _jsx("span", { className: "sm:hidden", children: t('admin.exams.preview.prev') })] }), _jsxs("div", { className: "text-sm text-gray-600", children: [currentPartIndex + 1, " / ", totalParts] }), _jsxs(Button, { variant: "outline", onClick: onNextPart, disabled: currentPartIndex === totalParts - 1, className: "flex h-9 items-center gap-2 px-3 text-sm", children: [_jsx("span", { className: "hidden sm:inline", children: t('admin.exams.preview.nextPart') }), _jsx("span", { className: "sm:hidden", children: t('admin.exams.preview.next') }), _jsx(ArrowRight, { className: "h-4 w-4" })] })] }))] }) }));
 }

package/dist/components/exams/ExamPreviewSidebar.d.ts

@@ -1,3 +1,4 @@
+import { ExamPreviewMode } from './exam-preview.mode';
 import { type PreviewQuestion, type QuestionsByPart } from './exam-preview.types';
 export interface ExamPreviewSidebarProps {
     examName: string;
@@ -11,7 +12,8 @@ export interface ExamPreviewSidebarProps {
     progress: number;
     loading: boolean;
     showPartsDetail: boolean;
+    previewMode?: ExamPreviewMode;
     onTogglePartsDetail: () => void;
     onGoToPart: (index: number) => void;
 }
-export declare function ExamPreviewSidebar({ examName, duration, totalPoints, questions, questionsByPart, currentPart, currentPartIndex, totalParts, progress, loading, showPartsDetail, onTogglePartsDetail, onGoToPart, }: ExamPreviewSidebarProps): import("react").JSX.Element;
+export declare function ExamPreviewSidebar({ examName, duration, totalPoints, questions, questionsByPart, currentPart, currentPartIndex, totalParts, progress, loading, showPartsDetail, previewMode, onTogglePartsDetail, onGoToPart, }: ExamPreviewSidebarProps): import("react").JSX.Element;

package/dist/components/exams/ExamPreviewSidebar.js

@@ -6,10 +6,15 @@ import { Card, CardContent, CardHeader, CardTitle } from '../../components/ui/ca
 import { Progress } from '../../components/ui/progress';
 import { Loader2 } from 'lucide-react';
 import { useT } from '../../shared/lib/i18n';
+import { ExamPreviewMode } from './exam-preview.mode';
 import { getQuestionNumber, } from './exam-preview.types';
-export function ExamPreviewSidebar({ examName, duration, totalPoints, questions, questionsByPart, currentPart, currentPartIndex, totalParts, progress, loading, showPartsDetail, onTogglePartsDetail, onGoToPart, }) {
+export function ExamPreviewSidebar({ examName, duration, totalPoints, questions, questionsByPart, currentPart, currentPartIndex, totalParts, progress, loading, showPartsDetail, previewMode = ExamPreviewMode.STUDENT, onTogglePartsDetail, onGoToPart, }) {
     const t = useT();
-    return (_jsx("div", { className: "w-full overflow-y-auto border-b border-gray-200 sm:w-80 sm:border-b-0 sm:border-r", children: _jsxs("div", { className: "space-y-4 p-4", children: [_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsx(CardTitle, { className: "text-base", children: t('admin.exams.preview.examInfo') }) }), _jsxs(CardContent, { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm text-gray-600", children: t('admin.exams.preview.duration') }), _jsx("span", { className: "text-sm font-medium", children: t('admin.exams.view.minutes', { count: String(duration) }) })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm text-gray-600", children: t('admin.exams.preview.questionCount') }), _jsx("span", { className: "text-sm font-medium", children: loading
+    return (_jsx("div", { className: "w-full overflow-y-auto border-b border-gray-200 sm:w-80 sm:border-b-0 sm:border-r", children: _jsxs("div", { className: "space-y-4 p-4", children: [_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsx(CardTitle, { className: "text-base", children: t('admin.exams.preview.examInfo') }) }), _jsxs(CardContent, { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm text-gray-600", children: t('admin.exams.preview.mode.label') }), _jsx(Badge, { variant: "outline", className: previewMode === ExamPreviewMode.ANSWERS
+                                                ? 'border-emerald-300 bg-emerald-50 text-emerald-700 font-semibold'
+                                                : 'border-blue-300 bg-blue-50 text-blue-700 font-semibold', children: previewMode === ExamPreviewMode.ANSWERS
+                                                ? t('admin.exams.preview.mode.answers')
+                                                : t('admin.exams.preview.mode.student') })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm text-gray-600", children: t('admin.exams.preview.duration') }), _jsx("span", { className: "text-sm font-medium", children: t('admin.exams.view.minutes', { count: String(duration) }) })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm text-gray-600", children: t('admin.exams.preview.questionCount') }), _jsx("span", { className: "text-sm font-medium", children: loading
                                                 ? '...'
                                                 : t('admin.exams.preview.questions', { count: String(questions.length) }) })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm text-gray-600", children: t('admin.exams.preview.totalPoints') }), _jsx("span", { className: "text-sm font-medium", children: t('admin.exams.preview.points', { count: String(totalPoints) }) })] })] })] }), !loading && totalParts > 0 && (_jsx(Card, { children: _jsx(CardContent, { className: "p-4", children: _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between text-sm", children: [_jsx("span", { children: t('admin.exams.preview.progress') }), _jsxs("span", { className: "font-medium", children: [currentPartIndex + 1, "/", totalParts] })] }), _jsx(Progress, { value: progress, className: "h-2" })] }) }) })), loading ? (_jsx("div", { className: "flex items-center justify-center py-4", children: _jsxs("div", { className: "flex items-center gap-2 text-gray-500", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), _jsx("span", { className: "text-sm", children: t('admin.exams.preview.loading') })] }) })) : (totalParts > 0 && (_jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "text-sm font-medium text-gray-700", children: t('admin.exams.preview.questionNavigation') }), _jsx("div", { className: "flex flex-wrap gap-2", children: questionsByPart.map((part, index) => {
                                 const isCurrent = index === currentPartIndex;

package/dist/components/exams/exam-preview.mode.d.ts

@@ -0,0 +1,4 @@
+export declare enum ExamPreviewMode {
+    STUDENT = "student",
+    ANSWERS = "answers"
+}

package/dist/components/exams/exam-preview.mode.js

@@ -0,0 +1,5 @@
+export var ExamPreviewMode;
+(function (ExamPreviewMode) {
+    ExamPreviewMode["STUDENT"] = "student";
+    ExamPreviewMode["ANSWERS"] = "answers";
+})(ExamPreviewMode || (ExamPreviewMode = {}));

package/dist/components/exams/index.d.ts

@@ -32,5 +32,6 @@ export { EXAM_DIFFICULTY, ExamViewDialog } from './ExamViewDialog';
 export type { ExamDifficulty, ExamViewDialogExam, ExamViewDialogProps } from './ExamViewDialog';
 export { ExamPreviewDialog } from './ExamPreviewDialog';
 export type { ExamPreviewDialogProps } from './ExamPreviewDialog';
+export { ExamPreviewMode } from './exam-preview.mode';
 export type { PreviewQuestion, QuestionsByPart } from './exam-preview.types';
 export { QuestionStatus, clearQuestionStatuses, getQuestionStatus, initializeQuestionStatusesFromAPI, setQuestionStatus } from './exam-question-status';

package/dist/components/exams/index.js

@@ -16,4 +16,5 @@ export { UnsavedChangesDialog } from './UnsavedChangesDialog';
 export { CompletionDialog } from './CompletionDialog';
 export { EXAM_DIFFICULTY, ExamViewDialog } from './ExamViewDialog';
 export { ExamPreviewDialog } from './ExamPreviewDialog';
+export { ExamPreviewMode } from './exam-preview.mode';
 export { QuestionStatus, clearQuestionStatuses, getQuestionStatus, initializeQuestionStatusesFromAPI, setQuestionStatus } from './exam-question-status';

package/dist/components/exams/take/components/QuestionRenderer.js

@@ -10,7 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { MoversListenAndWriteRenderer, MoversChooseBestAnswerRenderer, MoversChooseAdjectiveRenderer, MoversWritingRenderer, MoversColoringRenderer, MoversPictureChooseRenderer, MoversPictureFillBlankChooseRenderer, MoversReadingPassageRenderer, MoversLabelThePictureRenderer, MoversFillWordHintRenderer, MoversGridFillRenderer, MoversTrueFalseRenderer, MoversCrossOutWordGroupRenderer, MoversAnswerTheQuestionRenderer, MoversWriteSentencesRenderer, MoversWordOrderingRenderer, MoversWordFillParagraphRenderer, MoversMatchByWritingAnswerRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderAndMatchGroupRenderer, } from './question-renderers';
 import { SpeakingQuestionRenderer } from './speaking/renderers';
-import { transformFillInBlank, transformWriteCorrectVerbForm, transformChooseCorrectAnswer, transformChooseTheCorrectAnswerGroup, transformChooseCorrectAdjective, transformWriteShortLetter, transformColorObjects, transformPictureChoose, transformPictureFillBlankChoose, transformReadingPassage, transformLabelPicture, transformFillWordHint, transformGridFill, transformAnswerTheQuestion, transformTrueFalse, transformTrueFalseGroup, transformWordOrdering, transformWordFillParagraph, transformMatchByWritingAnswer, transformWriteSentences, transformWordFillStructuredForm, transformWordOrderAndMatchGroup, } from '../utils/question-transformers';
+import { transformFillInBlank, transformWriteCorrectVerbForm, transformChooseCorrectAnswer, transformChooseTheCorrectAnswerGroup, transformChooseCorrectAdjective, transformWriteShortLetter, transformColorObjects, transformPictureChoose, transformPictureFillBlankChoose, transformReadingPassage, transformLabelPicture, transformFillWordHint, transformGridFill, transformAnswerTheQuestion, transformAnswerTheQuestionGroup, transformTrueFalse, transformTrueFalseGroup, transformWordOrdering, transformWordFillParagraph, transformMatchByWritingAnswer, transformWriteSentences, transformWordFillStructuredForm, transformWordOrderAndMatchGroup, } from '../utils/question-transformers';
 import { transformCrossOutWordGroup } from '../utils/cross-out-word-group.transformer';
 import { normalizeColoringAssignments } from '../utils/coloring-assignments';
 export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode = false, onExit, onPartComplete, onPartBack, speakingTheme, initialQuestionIndex, skipTeacherVideo, onTeacherIntroPlayed, currentQuestionIndex, }) {
@@ -137,6 +137,10 @@ export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode =
             const data = transformAnswerTheQuestion(questions);
             return (_jsx(MoversAnswerTheQuestionRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, imageUrl: data.imageUrl, audioUrl: part.audioUrl, title: data.title, groupContent: data.groupContent, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
         }
+        case 'ANSWER_THE_QUESTION_GROUP': {
+            const data = transformAnswerTheQuestionGroup(questions);
+            return (_jsx(MoversAnswerTheQuestionRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, groupContent: data.groupContent, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+        }
         case 'TRUE_FALSE_GROUP': {
             const data = transformTrueFalseGroup(questions);
             return (_jsx(MoversTrueFalseRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, imageUrl: data.imageUrl, groupContent: data.groupContent, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));

package/dist/components/exams/take/utils/answer-transformers.js

@@ -88,7 +88,8 @@ function findParentQuestion(subQuestionId, parts) {
             part.questionType === 'CROSS_OUT_WORD_GROUP' ||
             part.questionType === 'TRUE_FALSE_GROUP' ||
             part.questionType === 'WORD_ORDER_AND_MATCH_GROUP' ||
-            part.questionType === 'SPONTANEOUS_QA_GROUP') {
+            part.questionType === 'SPONTANEOUS_QA_GROUP' ||
+            part.questionType === 'ANSWER_THE_QUESTION_GROUP') {
             const parent = part.questions.find((question) => subQuestionId.startsWith(`${question.id}-item-`));
             if (parent) {
                 return {

package/dist/components/exams/take/utils/question-transformers.d.ts

@@ -5,7 +5,7 @@
  * Each transformer handles specific question type data structure.
  */
 import type { FillBlankQuestion, ChooseBestAnswerQuestion, PictureChooseSubQuestion, PictureFillBlankSubQuestion, ReadingPassageQuestion, LabelThePictureLabel, FillWordHintSubQuestion, ColoringHintItem, ColoringRegion } from '../types';
-export type QuestionType = 'FILL_IN_BLANK' | 'WRITE_CORRECT_VERB_FORM' | 'CHOOSE_THE_CORRECT_ANSWER' | 'CHOOSE_THE_CORRECT_ANSWER_GROUP' | 'CHOOSE_CORRECT_ADJECTIVE' | 'WRITE_A_SHORT_LETTER' | 'READ_AND_COLOR_OBJECTS' | 'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER' | 'LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER' | 'READ_PASSAGE_AND_ANSWER_QUESTIONS' | 'LABEL_THE_PICTURE' | 'LOOK_PICTURE_FILL_WORD_HINT' | 'FILL_MISSING_WORDS_IN_GRID' | 'IMAGE_OBJECT_MATCHING' | 'ANSWER_THE_QUESTION' | 'TRUE_FALSE' | 'TRUE_FALSE_GROUP' | 'CROSS_OUT_WORD_GROUP' | 'WORD_ORDERING' | 'WORD_FILL_PARAGRAPH' | 'MATCH_BY_WRITING_ANSWER' | 'WRITE_SENTENCES' | 'WORD_FILL_STRUCTURED_FORM' | 'WORD_ORDER_AND_MATCH_GROUP' | 'LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE' | 'LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP' | 'LISTEN_AND_DRAG_OBJECTS_INTO_SCENE' | 'LISTEN_AND_SPEAK_ANSWER' | 'LISTEN_AND_SPEAK_COMPARE_IMAGES' | 'LISTEN_AND_SPEAK_WITH_STORY_IMAGES' | 'LISTEN_AND_SPEAK_IMAGE_GROUP' | 'LISTEN_AND_SPEAK_ODD_ONE_OUT' | 'LISTEN_AND_SPEAK_QUESTION_LIST' | 'LISTEN_AND_SPEAK_INFO_EXCHANGE' | 'READ_DISPLAYED_CONTENT' | 'SPEAKING_DESCRIBE_IMAGE' | 'SPONTANEOUS_QA' | 'SPONTANEOUS_QA_GROUP' | 'SPEAKING_CONVERSATION' | 'GN_SPEAKING_INTERVIEW' | 'SPEAKING_CUE_CARD';
+export type QuestionType = 'FILL_IN_BLANK' | 'WRITE_CORRECT_VERB_FORM' | 'CHOOSE_THE_CORRECT_ANSWER' | 'CHOOSE_THE_CORRECT_ANSWER_GROUP' | 'CHOOSE_CORRECT_ADJECTIVE' | 'WRITE_A_SHORT_LETTER' | 'READ_AND_COLOR_OBJECTS' | 'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER' | 'LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER' | 'READ_PASSAGE_AND_ANSWER_QUESTIONS' | 'LABEL_THE_PICTURE' | 'LOOK_PICTURE_FILL_WORD_HINT' | 'FILL_MISSING_WORDS_IN_GRID' | 'IMAGE_OBJECT_MATCHING' | 'ANSWER_THE_QUESTION' | 'ANSWER_THE_QUESTION_GROUP' | 'TRUE_FALSE' | 'TRUE_FALSE_GROUP' | 'CROSS_OUT_WORD_GROUP' | 'WORD_ORDERING' | 'WORD_FILL_PARAGRAPH' | 'MATCH_BY_WRITING_ANSWER' | 'WRITE_SENTENCES' | 'WORD_FILL_STRUCTURED_FORM' | 'WORD_ORDER_AND_MATCH_GROUP' | 'LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE' | 'LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP' | 'LISTEN_AND_DRAG_OBJECTS_INTO_SCENE' | 'LISTEN_AND_SPEAK_ANSWER' | 'LISTEN_AND_SPEAK_COMPARE_IMAGES' | 'LISTEN_AND_SPEAK_WITH_STORY_IMAGES' | 'LISTEN_AND_SPEAK_IMAGE_GROUP' | 'LISTEN_AND_SPEAK_ODD_ONE_OUT' | 'LISTEN_AND_SPEAK_QUESTION_LIST' | 'LISTEN_AND_SPEAK_INFO_EXCHANGE' | 'READ_DISPLAYED_CONTENT' | 'SPEAKING_DESCRIBE_IMAGE' | 'SPONTANEOUS_QA' | 'SPONTANEOUS_QA_GROUP' | 'SPEAKING_CONVERSATION' | 'GN_SPEAKING_INTERVIEW' | 'SPEAKING_CUE_CARD';
 export interface ApiQuestion {
     id: string;
     content: any;
@@ -244,6 +244,11 @@ export declare function transformAnswerTheQuestion(questions: ApiQuestion[]): {
     title?: string;
     groupContent?: string;
 };
+export declare function transformAnswerTheQuestionGroup(questions: ApiQuestion[]): {
+    questions: AnswerTheQuestionQuestion[];
+    instruction: string;
+    groupContent?: string;
+};
 export interface TrueFalseQuestion {
     id: string;
     questionNumber: number;

package/dist/components/exams/take/utils/question-transformers.js

@@ -804,6 +804,39 @@ export function transformAnswerTheQuestion(questions) {
         groupContent: groupPayload?.groupContent || firstContent?.groupContent,
     };
 }
+// ============================================
+// ANSWER_THE_QUESTION_GROUP Transformer
+// ============================================
+export function transformAnswerTheQuestionGroup(questions) {
+    const parent = questions[0];
+    const content = parent?.content;
+    const items = Array.isArray(content?.items) ? content.items : [];
+    const parentCorrect = Array.isArray(parent?.correct_answer?.answer)
+        ? parent.correct_answer.answer
+        : [];
+    const transformed = items.map((item, itemIndex) => {
+        const isExample = item.isExample === true;
+        const fallbackAnswers = Array.isArray(parentCorrect[itemIndex]?.expectedAnswers)
+            ? parentCorrect[itemIndex].expectedAnswers
+            : [];
+        const nestedAnswers = Array.isArray(item.correctAnswer?.expectedAnswers)
+            ? item.correctAnswer.expectedAnswers
+            : [];
+        const exampleAnswer = (nestedAnswers[0] || fallbackAnswers[0] || '');
+        return {
+            id: `${parent.id}-item-${itemIndex}`,
+            questionNumber: item.questionNumber || itemIndex + 1,
+            question: item.content?.question || '',
+            isExample,
+            exampleAnswer: isExample ? exampleAnswer : undefined,
+        };
+    });
+    return {
+        questions: transformed,
+        instruction: content?.meta?.instruction || 'Read the text again and answer the questions.',
+        groupContent: content?.meta?.passage,
+    };
+}
 export function transformTrueFalse(questions) {
     const groupPayload = questions[0]?.questionGroup?.payload;
     const transformed = questions.map((q) => {

package/dist/components/questions/_shared/config/question-types.config.js

@@ -207,6 +207,11 @@ export const QUESTION_TYPE_CONFIG = {
         requiresContent: true,
         hasDedicatedComponent: true,
     },
+    ANSWER_THE_QUESTION_GROUP: {
+        label: 'Đọc và trả lời câu hỏi (AI)',
+        requiresContent: true,
+        hasDedicatedComponent: true,
+    },
     WORD_ORDERING: {
         label: 'Sắp xếp từ',
         requiresContent: true,
@@ -333,6 +338,7 @@ export const QUESTION_TYPES_WITH_DEDICATED_COMPONENTS = [
     'WRITE_CORRECT_VERB_FORM',
     'CHOOSE_CORRECT_ADJECTIVE',
     'ANSWER_THE_QUESTION',
+    'ANSWER_THE_QUESTION_GROUP',
     'TRUE_FALSE',
     'WORD_ORDERING',
     'WORD_FILL_PARAGRAPH',

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

@@ -0,0 +1,32 @@
+import type { MutableRefObject } from 'react';
+export interface AnswerTheQuestionGroupItemData {
+    question: string;
+    expectedAnswers: string[];
+    isExample?: boolean;
+    points: number;
+    questionNumber: number;
+}
+export interface AnswerTheQuestionGroupData {
+    instruction: string;
+    passage?: string;
+    items: AnswerTheQuestionGroupItemData[];
+    explanation?: string;
+    points?: number;
+}
+export interface AnswerTheQuestionGroupCreatorProps {
+    initialData?: AnswerTheQuestionGroupData;
+    onSave?: (data: AnswerTheQuestionGroupData) => void;
+    onCancel?: () => void;
+    onChange?: (data: AnswerTheQuestionGroupData) => void;
+    externalErrors?: string[];
+    onUnsavedChangesChange?: (hasUnsavedChanges: boolean) => void;
+    validationRef?: MutableRefObject<{
+        triggerValidation: () => Promise<boolean>;
+        getFormData?: () => AnswerTheQuestionGroupData;
+    } | null>;
+}
+export interface AnswerTheQuestionGroupClientProps {
+    questionData: AnswerTheQuestionGroupData;
+    isReviewMode?: boolean;
+    userAnswers?: string[];
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/components/questions/creator/question-type-registry.js

@@ -18,6 +18,7 @@ import { writeAShortLetterRegistration } from '../types/write-a-short-letter/reg
 import { writeCorrectVerbFormRegistration } from '../types/write-correct-verb-form/register';
 import { chooseCorrectAdjectiveRegistration } from '../types/choose-correct-adjective/register';
 import { answerTheQuestionRegistration } from '../types/answer-the-question/register';
+import { answerTheQuestionGroupRegistration } from '../types/answer-the-question-group/register';
 import { trueFalseRegistration } from '../types/true-false/register';
 import { wordOrderingRegistration } from '../types/word-ordering/register';
 import { wordFillParagraphRegistration } from '../types/word-fill-paragraph/register';
@@ -64,6 +65,7 @@ export const questionTypeRegistry = {
     WRITE_CORRECT_VERB_FORM: writeCorrectVerbFormRegistration,
     CHOOSE_CORRECT_ADJECTIVE: chooseCorrectAdjectiveRegistration,
     ANSWER_THE_QUESTION: answerTheQuestionRegistration,
+    ANSWER_THE_QUESTION_GROUP: answerTheQuestionGroupRegistration,
     TRUE_FALSE: trueFalseRegistration,
     WORD_ORDERING: wordOrderingRegistration,
     WORD_FILL_PARAGRAPH: wordFillParagraphRegistration, // Will need to handle viewMode mapping either here or in wrapper

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

@@ -0,0 +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;

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

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BookOpen, CircleHelp, Lightbulb, Sparkles, Star } from 'lucide-react';
+export function AnswerTheQuestionGroupClient({ questionData, isReviewMode = false, userAnswers = [], }) {
+    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.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-4 py-2.5", 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-4", 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' }), _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}`));
+            }), 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.d.ts

@@ -0,0 +1,2 @@
+import type { AnswerTheQuestionGroupCreatorProps } from '../../_shared/types/answer-the-question-group.type';
+export declare function AnswerTheQuestionGroupCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }: AnswerTheQuestionGroupCreatorProps): import("react").JSX.Element;

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

@@ -0,0 +1,183 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '../../../../components/ui/button';
+import { Label } from '../../../../components/ui/label';
+import { Input } from '../../../../components/ui/input';
+import { Textarea } from '../../../../components/ui/textarea';
+import { PointsInput } from '../../../../components/ui/points-input';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { Switch } from '../../../../components/ui/switch';
+import { RichTextEditor } from '../../../../components/shared/RichTextEditor';
+import { useDebouncedCallback } from '../../../../shared/lib/hooks';
+import { Eye, Pencil, Plus, Sparkles, Star, Trash2 } from 'lucide-react';
+import { AnswerTheQuestionGroupClient } from './AnswerTheQuestionGroupClient';
+const DEFAULT_INSTRUCTION = 'Read the text again and answer the questions.';
+function createEmptyItem(questionNumber) {
+    return {
+        question: '',
+        expectedAnswers: [''],
+        isExample: false,
+        points: 1,
+        questionNumber,
+    };
+}
+function normalizeExpectedAnswers(value) {
+    if (!Array.isArray(value) || value.length === 0) {
+        return [''];
+    }
+    return value.map((item) => (typeof item === 'string' ? item : ''));
+}
+function normalizeItems(rawItems) {
+    if (!Array.isArray(rawItems) || rawItems.length === 0) {
+        return [createEmptyItem(1)];
+    }
+    return rawItems.map((item, index) => ({
+        question: item.question || '',
+        expectedAnswers: normalizeExpectedAnswers(item.expectedAnswers),
+        isExample: item.isExample === true,
+        points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+        questionNumber: item.questionNumber || index + 1,
+    }));
+}
+function sumPoints(items) {
+    return items.reduce((total, item) => (item.isExample ? total : total + (typeof item.points === 'number' ? item.points : 1)), 0);
+}
+function isContentEmpty(html) {
+    return !html || html === '<p></p>' || html === '<p><br></p>' || html.trim() === '';
+}
+export function AnswerTheQuestionGroupCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }) {
+    const [instruction, setInstruction] = useState(initialData?.instruction || DEFAULT_INSTRUCTION);
+    const [passage, setPassage] = useState(initialData?.passage || '');
+    const [items, setItems] = useState(() => normalizeItems(initialData?.items));
+    const [explanation, setExplanation] = useState(initialData?.explanation || '');
+    const [isClientMode, setIsClientMode] = useState(false);
+    const [errors, setErrors] = useState([]);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    const buildPayload = (nextInstruction = instruction, nextPassage = passage, nextItems = items, nextExplanation = explanation) => ({
+        instruction: nextInstruction,
+        ...(!isContentEmpty(nextPassage) ? { passage: nextPassage.trim() } : {}),
+        items: nextItems,
+        explanation: nextExplanation,
+        points: sumPoints(nextItems),
+    });
+    const debouncedOnChange = useDebouncedCallback((payload) => {
+        onChangeRef.current?.(payload);
+    }, 300);
+    useEffect(() => {
+        const payload = buildPayload();
+        const serialized = JSON.stringify(payload);
+        if (serialized === previousPayloadRef.current) {
+            return;
+        }
+        previousPayloadRef.current = serialized;
+        onUnsavedChangesChange?.(true);
+        debouncedOnChange(payload);
+    }, [instruction, passage, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
+    const validate = () => {
+        const nextErrors = [];
+        if (!instruction.trim()) {
+            nextErrors.push('Vui lòng nhập hướng dẫn.');
+        }
+        if (items.length < 1) {
+            nextErrors.push('Cần ít nhất một câu hỏi.');
+        }
+        items.forEach((item, index) => {
+            if (!item.question.trim()) {
+                nextErrors.push(`Câu ${index + 1}: nội dung câu hỏi là bắt buộc.`);
+            }
+            const filledAnswers = item.expectedAnswers
+                .map((answer) => answer.trim())
+                .filter((answer) => answer !== '');
+            if (!item.isExample && filledAnswers.length === 0) {
+                nextErrors.push(`Câu ${index + 1}: cần ít nhất một đáp án mẫu.`);
+            }
+        });
+        return nextErrors;
+    };
+    useEffect(() => {
+        if (!validationRef) {
+            return;
+        }
+        validationRef.current = {
+            triggerValidation: async () => {
+                const nextErrors = validate();
+                setErrors(nextErrors);
+                return nextErrors.length === 0;
+            },
+            getFormData: () => buildPayload(),
+        };
+    }, [validationRef, instruction, passage, items, explanation]);
+    const updateItem = (index, patch) => {
+        setItems((prev) => {
+            const next = [...prev];
+            const current = next[index];
+            if (!current)
+                return prev;
+            next[index] = { ...current, ...patch };
+            return next;
+        });
+    };
+    const updateExpectedAnswer = (itemIndex, answerIndex, value) => {
+        setItems((prev) => {
+            const next = [...prev];
+            const current = next[itemIndex];
+            if (!current)
+                return prev;
+            const expectedAnswers = [...current.expectedAnswers];
+            expectedAnswers[answerIndex] = value;
+            next[itemIndex] = { ...current, expectedAnswers };
+            return next;
+        });
+    };
+    const addExpectedAnswer = (itemIndex) => {
+        setItems((prev) => {
+            const next = [...prev];
+            const current = next[itemIndex];
+            if (!current)
+                return prev;
+            next[itemIndex] = {
+                ...current,
+                expectedAnswers: [...current.expectedAnswers, ''],
+            };
+            return next;
+        });
+    };
+    const removeExpectedAnswer = (itemIndex, answerIndex) => {
+        setItems((prev) => {
+            const next = [...prev];
+            const current = next[itemIndex];
+            if (!current || current.expectedAnswers.length <= 1)
+                return prev;
+            next[itemIndex] = {
+                ...current,
+                expectedAnswers: current.expectedAnswers.filter((_, index) => index !== answerIndex),
+            };
+            return next;
+        });
+    };
+    const addItem = () => {
+        setItems((prev) => [...prev, createEmptyItem(prev.length + 1)]);
+    };
+    const removeItem = (index) => {
+        setItems((prev) => {
+            if (prev.length <= 1)
+                return prev;
+            return prev
+                .filter((_, itemIndex) => itemIndex !== index)
+                .map((item, itemIndex) => ({ ...item, questionNumber: itemIndex + 1 }));
+        });
+    };
+    const displayErrors = externalErrors && externalErrors.length > 0 ? externalErrors : errors;
+    if (isClientMode) {
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", variant: "outline", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Ch\u1EBF \u0111\u1ED9 ch\u1EC9nh s\u1EEDa"] }) }), _jsx(AnswerTheQuestionGroupClient, { questionData: buildPayload(), isReviewMode: true })] }));
+    }
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-medium text-gray-900", children: "\u0110\u1ECDc v\u00E0 tr\u1EA3 l\u1EDDi c\u00E2u h\u1ECFi (AI)" }), _jsx("p", { className: "text-sm text-gray-500", children: "Nh\u00F3m c\u00E2u \u0111\u1ECDc hi\u1EC3u l\u01B0u 1 row. AI ch\u1EA5m theo question + expectedAnswers." })] }), _jsxs(Button, { type: "button", variant: "outline", onClick: () => setIsClientMode(true), children: [_jsx(Eye, { className: "mr-2 h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Nh\u00F3m \u0111\u1ECDc hi\u1EC3u" }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "group-instruction", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "group-instruction", value: instruction, onChange: (event) => setInstruction(event.target.value), placeholder: DEFAULT_INSTRUCTION })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "N\u1ED9i dung b\u00E0i \u0111\u1ECDc (Passage)" }), _jsx(RichTextEditor, { value: passage, onChange: setPassage, minHeightClassName: "min-h-[160px]" })] }), _jsxs("div", { className: "rounded-xl border border-violet-100 bg-violet-50 p-4 text-sm text-violet-800", children: [_jsxs("div", { className: "flex items-center gap-2 font-medium", children: [_jsx(Sparkles, { className: "h-4 w-4" }), "Ch\u1EA5m \u0111i\u1EC3m b\u1EB1ng AI"] }), _jsx("p", { className: "mt-1 text-xs text-violet-700", children: "H\u1ECDc sinh vi\u1EBFt c\u00E2u tr\u1EA3 l\u1EDDi. AI so v\u1EDBi b\u1EA5t k\u1EF3 \u0111\u00E1p \u00E1n m\u1EABu n\u00E0o c\u1EE7a t\u1EEBng c\u00E2u (binary 0/1)." })] }), _jsxs("div", { className: "rounded-xl border border-gray-200 bg-gray-50 p-4", children: [_jsx(PointsInput, { value: sumPoints(items), allowZero: true, readOnly: true }), _jsx("p", { className: "mt-2 text-xs text-gray-500", children: "T\u1ED5ng \u0111i\u1EC3m \u0111\u01B0\u1EE3c c\u1ED9ng t\u1EEB c\u00E1c c\u00E2u kh\u00F4ng ph\u1EA3i example." })] })] })] }), items.map((item, itemIndex) => (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0", children: [_jsxs(CardTitle, { className: "text-base", children: ["C\u00E2u ", itemIndex + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeItem(itemIndex), disabled: items.length <= 1, children: _jsx(Trash2, { className: "h-4 w-4" }) })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between rounded-lg border border-amber-100 bg-amber-50 px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-amber-800", children: [_jsx(Star, { className: "h-4 w-4" }), "C\u00E2u v\u00ED d\u1EE5"] }), _jsx(Switch, { checked: item.isExample === true, onCheckedChange: (checked) => updateItem(itemIndex, {
+                                            isExample: checked,
+                                            points: checked ? 0 : (item.points || 1),
+                                        }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "C\u00E2u h\u1ECFi" }), _jsx(Textarea, { value: item.question, onChange: (event) => updateItem(itemIndex, { question: event.target.value }), rows: 2, placeholder: "What is autism?" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "\u0110\u00E1p \u00E1n m\u1EABu cho AI" }), item.expectedAnswers.map((answer, answerIndex) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { value: answer, onChange: (event) => updateExpectedAnswer(itemIndex, answerIndex, event.target.value), placeholder: `Đáp án mẫu ${answerIndex + 1}` }), item.expectedAnswers.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeExpectedAnswer(itemIndex, answerIndex), children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }, `expected-${itemIndex}-${answerIndex}`))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => addExpectedAnswer(itemIndex), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n m\u1EABu"] })] }), !item.isExample && (_jsx(PointsInput, { value: item.points, allowZero: true, onChange: (e) => updateItem(itemIndex, { points: Number(e.target.value) || 0 }) }))] })] }, `item-${itemIndex}`))), _jsxs(Button, { type: "button", variant: "outline", onClick: addItem, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Th\u00EAm c\u00E2u h\u1ECFi"] }), displayErrors.length > 0 && (_jsx("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700", children: displayErrors.map((error) => (_jsx("p", { children: error }, error))) }))] }));
+}

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

@@ -0,0 +1,5 @@
+export * from './AnswerTheQuestionGroupCreator';
+export * from './AnswerTheQuestionGroupClient';
+export * from './transform';
+export * from './register';
+export * from './map-answer-the-question-group-data';

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

@@ -0,0 +1,5 @@
+export * from './AnswerTheQuestionGroupCreator';
+export * from './AnswerTheQuestionGroupClient';
+export * from './transform';
+export * from './register';
+export * from './map-answer-the-question-group-data';