@tinyweb_dev/oe-exam-sdk 0.2.4 → 0.2.5

package/dist/components/questions/types/true-false-correct-group/map-true-false-correct-group-data.js

@@ -0,0 +1,79 @@
+import { TRUE_FALSE_CORRECT_GROUP_DEFAULT_INSTRUCTION } from '../../_shared/types/true-false-correct-group.type';
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function asRecord(value) {
+    return isRecord(value) ? value : {};
+}
+function asString(value, fallback = '') {
+    return typeof value === 'string' ? value : fallback;
+}
+function parseItemAnswer(raw) {
+    if (!isRecord(raw)) {
+        return { isTrue: true, correction: '' };
+    }
+    const isTrue = raw.isTrue === true;
+    return {
+        isTrue,
+        correction: isTrue ? '' : asString(raw.correction).trim(),
+    };
+}
+export function createEmptyTrueFalseCorrectGroupItem(questionNumber) {
+    return {
+        question: '',
+        isTrue: true,
+        correction: '',
+        isExample: false,
+        points: 1,
+        questionNumber,
+    };
+}
+export function mapTrueFalseCorrectGroupItem(item, index, fallbackAnswer) {
+    const record = asRecord(item);
+    const content = asRecord(record.content);
+    const correctAnswer = asRecord(record.correctAnswer);
+    const isExample = record.isExample === true;
+    const parsed = parseItemAnswer(correctAnswer.answer ?? fallbackAnswer);
+    return {
+        question: asString(content.question) || asString(record.question),
+        isTrue: parsed.isTrue,
+        correction: parsed.correction,
+        isExample,
+        points: isExample ? 0 : typeof record.points === 'number' ? record.points : 1,
+        questionNumber: typeof record.questionNumber === 'number' ? record.questionNumber : index + 1,
+    };
+}
+export function mapQuestionToTrueFalseCorrectGroupData(question) {
+    const source = asRecord(question);
+    const content = asRecord(source.content);
+    const answer = asRecord(source.answer);
+    const correctAnswer = asRecord(source.correctAnswer ?? source.correct_answer ?? answer.correctAnswer);
+    const explanation = String(source.explanation || answer.explanation || '');
+    const fallbackAnswers = Array.isArray(correctAnswer.answer)
+        ? correctAnswer.answer
+        : [];
+    if (Array.isArray(content.items)) {
+        const items = content.items.map((item, index) => mapTrueFalseCorrectGroupItem(item, index, fallbackAnswers[index]));
+        return {
+            instruction: asString(asRecord(content.meta).instruction)
+                || TRUE_FALSE_CORRECT_GROUP_DEFAULT_INSTRUCTION,
+            items,
+            explanation,
+            points: items.reduce((total, item) => (item.isExample ? total : total + (item.points || 0)), 0),
+        };
+    }
+    if (Array.isArray(answer.items)) {
+        return {
+            instruction: asString(answer.instruction, TRUE_FALSE_CORRECT_GROUP_DEFAULT_INSTRUCTION),
+            items: answer.items.map((item, index) => mapTrueFalseCorrectGroupItem(item, index, fallbackAnswers[index])),
+            explanation,
+            points: typeof answer.points === 'number' ? answer.points : undefined,
+        };
+    }
+    return {
+        instruction: TRUE_FALSE_CORRECT_GROUP_DEFAULT_INSTRUCTION,
+        items: [createEmptyTrueFalseCorrectGroupItem(1)],
+        explanation,
+        points: 1,
+    };
+}

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

@@ -0,0 +1,2 @@
+import type { QuestionTypeRegistration } from '../../creator/question-type-registry';
+export declare const trueFalseCorrectGroupRegistration: QuestionTypeRegistration;

package/dist/components/questions/types/true-false-correct-group/register.js

@@ -0,0 +1,36 @@
+import { TrueFalseCorrectGroupCreator } from './TrueFalseCorrectGroupCreator';
+import { mapQuestionToTrueFalseCorrectGroupData } from './map-true-false-correct-group-data';
+export const trueFalseCorrectGroupRegistration = {
+    component: TrueFalseCorrectGroupCreator,
+    transformInitialData: (initialData) => mapQuestionToTrueFalseCorrectGroupData(initialData),
+    getExtraProps: (ctx) => ({
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+    }),
+    wrapOnSave: (data, ctx) => {
+        const payload = data;
+        return {
+            type: ctx.questionType,
+            content: ctx.state.content,
+            points: payload.points ?? ctx.state.points ?? 1,
+            level: ctx.state.level,
+            difficulty: ctx.state.difficulty,
+            skill: ctx.state.skill,
+            answer: payload,
+            explanation: payload.explanation || '',
+        };
+    },
+    wrapOnChange: (data, ctx) => {
+        const payload = data;
+        return {
+            type: ctx.questionType,
+            content: ctx.state.content,
+            points: payload.points ?? ctx.state.points ?? 1,
+            level: ctx.state.level,
+            difficulty: ctx.state.difficulty,
+            skill: ctx.state.skill,
+            answer: payload,
+            explanation: payload.explanation || '',
+        };
+    },
+};

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

@@ -0,0 +1,2 @@
+import type { TransformHandler } from '../../../../shared/lib/utils/question-transform-types';
+export declare const transformTrueFalseCorrectGroup: TransformHandler;

package/dist/components/questions/types/true-false-correct-group/transform.js

@@ -0,0 +1,49 @@
+import { TRUE_FALSE_CORRECT_GROUP_DEFAULT_INSTRUCTION, TRUE_FALSE_CORRECT_ITEM_TYPE, } from '../../_shared/types/true-false-correct-group.type';
+function sumGradablePoints(items) {
+    return items.reduce((total, item) => {
+        if (item.isExample) {
+            return total;
+        }
+        const points = typeof item.points === 'number' ? item.points : 1;
+        return total + points;
+    }, 0);
+}
+function toItemAnswer(item) {
+    const isTrue = item.isTrue === true;
+    return {
+        isTrue,
+        correction: isTrue ? '' : (item.correction || '').trim(),
+    };
+}
+export const transformTrueFalseCorrectGroup = (question) => {
+    const answerData = question.answer;
+    const items = Array.isArray(answerData?.items) ? answerData.items : [];
+    if (items.length === 0) {
+        return { apiContent: { items: [] }, apiCorrectAnswer: { answer: [] } };
+    }
+    const apiItems = items.map((item, index) => {
+        const correctAnswer = toItemAnswer(item);
+        return {
+            questionType: TRUE_FALSE_CORRECT_ITEM_TYPE,
+            ...(item.isExample ? { isExample: true } : {}),
+            content: {
+                question: item.question || '',
+            },
+            correctAnswer: { answer: correctAnswer },
+            points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+            questionNumber: item.questionNumber || index + 1,
+        };
+    });
+    return {
+        apiContent: {
+            meta: {
+                instruction: answerData?.instruction || TRUE_FALSE_CORRECT_GROUP_DEFAULT_INSTRUCTION,
+            },
+            items: apiItems,
+        },
+        apiCorrectAnswer: {
+            answer: apiItems.map((item) => item.correctAnswer.answer),
+        },
+        totalPoints: sumGradablePoints(items),
+    };
+};

package/dist/components/questions/types/write-a-short-letter/WriteAShortLetterClient.js

@@ -6,6 +6,15 @@ import { cn } from '../../../../shared/lib/utils';
 import { HtmlOrText } from '../../../../shared/lib/html-content';
 import { FileText, PenLine, Check, AlertCircle, BookOpen, Lightbulb, ImageIcon } from 'lucide-react';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks/usePresignedFileUrl';
+function normalizePassage(raw) {
+    if (typeof raw === 'string' && raw.trim()) {
+        return [raw];
+    }
+    if (Array.isArray(raw)) {
+        return raw.filter((item) => typeof item === 'string' && item.trim().length > 0);
+    }
+    return [];
+}
 // Component to render a single guide image in client mode
 function GuideImageDisplay({ imageKey }) {
     const { previewUrl } = usePresignedFileUrl(imageKey);
@@ -33,6 +42,7 @@ export function WriteAShortLetterClient({ questionData, onSubmit, isReviewMode =
         : Array.isArray(questionData.images)
             ? questionData.images
             : [];
+    const passageList = normalizePassage(questionData.passage ?? questionData.passages);
     // Initialize answer state - ensure it's always a string
     const [answer, setAnswer] = useState(typeof userAnswer === 'string' ? userAnswer : '');
     // Sync userAnswer when it changes (e.g., when loading from server in review mode)
@@ -75,7 +85,7 @@ export function WriteAShortLetterClient({ questionData, onSubmit, isReviewMode =
         const target = minWords;
         return Math.min((wordCount / target) * 100, 100);
     }, [wordCount, minWords]);
-    return (_jsxs("div", { className: "space-y-5", children: [instruction && (_jsx("div", { className: "overflow-hidden rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 shadow-sm", children: _jsxs("div", { className: "flex items-center gap-3 px-5 py-4", children: [_jsx("div", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-sm", children: _jsx(BookOpen, { className: "h-5 w-5" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-blue-900", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(HtmlOrText, { value: instruction, className: "text-sm text-blue-700" })] })] }) })), guideImages && guideImages.length > 0 && (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-violet-500 to-purple-600 text-white shadow-sm", children: _jsx(ImageIcon, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "\u1EA2nh h\u01B0\u1EDBng d\u1EABn" })] }), _jsx("div", { className: "p-5", children: _jsx("div", { className: "flex flex-col gap-4", children: guideImages.map((imageKey, index) => (_jsx(GuideImageDisplay, { imageKey: imageKey }, `${imageKey}-${index}`))) }) })] })), informations && informations.filter((i) => i?.trim()).length > 0 && (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-emerald-500 to-teal-600 text-white shadow-sm", children: _jsx(FileText, { className: "h-4 w-4" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["Th\u00F4ng tin c\u1EA7n bao g\u1ED3m (", informations.length, ")"] })] }), _jsx("div", { className: "p-5", children: _jsx("div", { className: "space-y-3", children: informations.filter((i) => i?.trim()).map((info, index) => (_jsxs("div", { className: "flex items-start gap-3 rounded-lg border border-gray-100 bg-gradient-to-r from-white to-gray-50 p-3 transition-all hover:border-gray-200 hover:shadow-sm", children: [_jsx("div", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-emerald-400 to-teal-500 text-xs font-bold text-white shadow-sm", children: index + 1 }), _jsx(HtmlOrText, { value: info, className: "text-sm text-gray-700 leading-relaxed pt-0.5" })] }, index))) }) })] })), _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-5 py-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-purple-500 to-violet-600 text-white shadow-sm", children: _jsx(PenLine, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Vi\u1EBFt th\u01B0 c\u1EE7a b\u1EA1n" })] }), _jsxs("div", { className: cn('flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-semibold transition-all', isExceeded
+    return (_jsxs("div", { className: "space-y-5", children: [instruction && (_jsx("div", { className: "overflow-hidden rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 shadow-sm", children: _jsxs("div", { className: "flex items-center gap-3 px-5 py-4", children: [_jsx("div", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-sm", children: _jsx(BookOpen, { className: "h-5 w-5" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-blue-900", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(HtmlOrText, { value: instruction, className: "text-sm text-blue-700" })] })] }) })), passageList.length > 0 && (_jsxs("div", { className: "overflow-hidden rounded-xl border border-indigo-100 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-3 border-b border-indigo-50 bg-gradient-to-r from-indigo-50 to-white px-5 py-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-blue-600 text-white shadow-sm", children: _jsx(BookOpen, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-indigo-800", children: "B\u00E0i \u0111\u1ECDc" })] }), _jsx("div", { className: "space-y-3 p-5", children: passageList.map((item, index) => (_jsx(HtmlOrText, { value: item, className: "text-sm leading-relaxed text-gray-800" }, index))) })] })), guideImages && guideImages.length > 0 && (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-violet-500 to-purple-600 text-white shadow-sm", children: _jsx(ImageIcon, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "\u1EA2nh h\u01B0\u1EDBng d\u1EABn" })] }), _jsx("div", { className: "p-5", children: _jsx("div", { className: "flex flex-col gap-4", children: guideImages.map((imageKey, index) => (_jsx(GuideImageDisplay, { imageKey: imageKey }, `${imageKey}-${index}`))) }) })] })), informations && informations.filter((i) => i?.trim()).length > 0 && (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-emerald-500 to-teal-600 text-white shadow-sm", children: _jsx(FileText, { className: "h-4 w-4" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["Th\u00F4ng tin c\u1EA7n bao g\u1ED3m (", informations.length, ")"] })] }), _jsx("div", { className: "p-5", children: _jsx("div", { className: "space-y-3", children: informations.filter((i) => i?.trim()).map((info, index) => (_jsxs("div", { className: "flex items-start gap-3 rounded-lg border border-gray-100 bg-gradient-to-r from-white to-gray-50 p-3 transition-all hover:border-gray-200 hover:shadow-sm", children: [_jsx("div", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-emerald-400 to-teal-500 text-xs font-bold text-white shadow-sm", children: index + 1 }), _jsx(HtmlOrText, { value: info, className: "text-sm text-gray-700 leading-relaxed pt-0.5" })] }, index))) }) })] })), _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-5 py-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-purple-500 to-violet-600 text-white shadow-sm", children: _jsx(PenLine, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Vi\u1EBFt th\u01B0 c\u1EE7a b\u1EA1n" })] }), _jsxs("div", { className: cn('flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-semibold transition-all', isExceeded
                                     ? 'bg-red-100 text-red-700'
                                     : isValidWordCount
                                         ? 'bg-green-100 text-green-700'

package/dist/components/questions/types/write-a-short-letter/WriteAShortLetterCreator.js

@@ -36,6 +36,7 @@ function WriteAShortLetterCreatorContent({ initialData, onChange, externalErrors
     const [maxWords, setMaxWords] = useState(initialData?.maxWords);
     const [instruction, setInstruction] = useState(initialData?.instructions?.mainInstruction || '');
     const [guideImages, setGuideImages] = useState(initialData?.guideImages || []);
+    const [passage, setPassage] = useState(initialData?.passage || '');
     const [points, setPoints] = useState(initialData?.points || 10);
     // Store presigned URLs keyed by imageKey (NOT index) to avoid index races
     // when the user uploads several images quickly.
@@ -80,7 +81,7 @@ function WriteAShortLetterCreatorContent({ initialData, onChange, externalErrors
                 },
             };
         }
-    }, [validationRef, informations, minWords, maxWords, instruction, guideImages, points]);
+    }, [validationRef, informations, minWords, maxWords, instruction, guideImages, passage, points]);
     // Sync state from initialData when it changes
     useEffect(() => {
         const incomingStr = JSON.stringify(initialData);
@@ -106,6 +107,7 @@ function WriteAShortLetterCreatorContent({ initialData, onChange, externalErrors
             setMaxWords(initialData?.maxWords);
             setInstruction(initialData?.instructions?.mainInstruction ?? '');
             setGuideImages(initialData?.guideImages ?? []);
+            setPassage(initialData?.passage ?? '');
             setPoints(initialData?.points ?? 10);
             // Clear stale preview URLs from the previous question's uploads
             setGuideImagePreviewUrls({});
@@ -133,6 +135,7 @@ function WriteAShortLetterCreatorContent({ initialData, onChange, externalErrors
                 maxWords,
                 instruction,
                 guideImages,
+                passage,
                 points,
             });
             previousPayloadRef.current = currentPayload;
@@ -151,6 +154,7 @@ function WriteAShortLetterCreatorContent({ initialData, onChange, externalErrors
                 mainInstruction: instruction || '',
             },
             guideImages: guideImages.length > 0 ? guideImages : undefined,
+            ...(passage ? { passage } : {}),
             points,
         };
         // Serialize payload for comparison
@@ -169,6 +173,7 @@ function WriteAShortLetterCreatorContent({ initialData, onChange, externalErrors
                 maxWords,
                 instructions: { mainInstruction: instruction || '' },
                 guideImages,
+                ...(passage ? { passage } : {}),
                 points,
             });
             recentEmittedInitialDataRef.current = [
@@ -177,7 +182,7 @@ function WriteAShortLetterCreatorContent({ initialData, onChange, externalErrors
             ].slice(-10);
             onChangeRef.current?.(payload);
         }
-    }, [informations, minWords, maxWords, instruction, guideImages, points]);
+    }, [informations, minWords, maxWords, instruction, guideImages, passage, points]);
     // Get validation errors
     const getErrors = () => {
         const errors = {};
@@ -287,6 +292,7 @@ function WriteAShortLetterCreatorContent({ initialData, onChange, externalErrors
                 mainInstruction: instruction || '',
             },
             guideImages: guideImages.length > 0 ? guideImages : undefined,
+            ...(passage ? { passage } : {}),
         };
         return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "Write a Short Letter (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc - Hi\u1EC3n th\u1ECB \u0111\u00E1p \u00E1n \u0111\u00FAng" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i Edit Mode"] })] }) }) }), _jsx(WriteAShortLetterClient, { questionData: questionData, onSubmit: () => { }, isReviewMode: true })] }));
     }

package/dist/components/questions/types/write-a-short-letter/register.js

@@ -8,6 +8,7 @@ export const writeAShortLetterRegistration = {
             ? parseFloat(initialData.total_points)
             : (initialData?.points || 10); // WRITE_A_SHORT_LETTER defaults to 10 points
         let creatorData = { points: apiPoints };
+        const passage = answer?.passage || content?.passage;
         // Priority 1: Data from store (answer has informations directly)
         if (answer?.informations && Array.isArray(answer.informations)) {
             creatorData = {
@@ -16,6 +17,7 @@ export const writeAShortLetterRegistration = {
                 maxWords: answer.maxWords,
                 instructions: answer.instructions || { mainInstruction: '' },
                 guideImages: answer.guideImages || [],
+                ...(passage ? { passage } : {}),
                 points: apiPoints,
             };
         }
@@ -27,6 +29,7 @@ export const writeAShortLetterRegistration = {
                 maxWords: content.maxWords,
                 instructions: content.instructions || { mainInstruction: '' },
                 guideImages: content.guideImages || [],
+                ...(passage ? { passage } : {}),
                 points: apiPoints,
             };
         }
@@ -42,6 +45,7 @@ export const writeAShortLetterRegistration = {
                 maxWords: content?.maxWords ?? answer?.maxWords,
                 instructions: content?.instructions || answer?.instructions || { mainInstruction: '' },
                 guideImages: content?.guideImages || answer?.guideImages || [],
+                ...(passage ? { passage } : {}),
                 points: apiPoints,
             };
         }

package/dist/components/questions/types/write-a-short-letter/transform.js

@@ -9,6 +9,7 @@ export const transformWriteAShortLetter = (question) => {
     const guideImages = Array.isArray(answerData?.guideImages)
         ? answerData.guideImages.filter((url) => typeof url === 'string' && url.trim() !== '')
         : [];
+    const passage = typeof answerData?.passage === 'string' ? answerData.passage.trim() : '';
     const apiContent = {
         informations,
         minWords: answerData?.minWords || 20,
@@ -18,6 +19,9 @@ export const transformWriteAShortLetter = (question) => {
     if (guideImages.length > 0) {
         apiContent.guideImages = guideImages;
     }
+    if (passage) {
+        apiContent.passage = passage;
+    }
     return {
         apiContent,
         apiCorrectAnswer: {},

package/dist/components/questions/viewer/ChooseTheCorrectAnswerGroupViewer.d.ts

@@ -3,6 +3,7 @@ type ChooseTheCorrectAnswerGroupViewerProps = {
     question: Question;
     isReviewMode?: boolean;
     userAnswer?: string[];
+    onSubmitAnswer?: (answer: string[]) => void;
 };
-export declare function ChooseTheCorrectAnswerGroupViewer({ question, isReviewMode, userAnswer, }: ChooseTheCorrectAnswerGroupViewerProps): import("react").JSX.Element;
+export declare function ChooseTheCorrectAnswerGroupViewer({ question, isReviewMode, userAnswer, onSubmitAnswer, }: ChooseTheCorrectAnswerGroupViewerProps): import("react").JSX.Element;
 export {};

package/dist/components/questions/viewer/ChooseTheCorrectAnswerGroupViewer.js

@@ -2,10 +2,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ChooseTheCorrectAnswerGroupClient } from '../types/choose-the-correct-answer-group/ChooseTheCorrectAnswerGroupClient';
 import { mapQuestionToChooseAnswerGroupData } from '../types/choose-the-correct-answer-group/map-choose-the-correct-answer-group-data';
-export function ChooseTheCorrectAnswerGroupViewer({ question, isReviewMode = false, userAnswer, }) {
+export function ChooseTheCorrectAnswerGroupViewer({ question, isReviewMode = false, userAnswer, onSubmitAnswer, }) {
     const questionData = mapQuestionToChooseAnswerGroupData(question);
     const reviewAnswers = isReviewMode && !userAnswer
         ? questionData.items.map((item) => item.correctAnswer)
         : userAnswer;
-    return (_jsx(ChooseTheCorrectAnswerGroupClient, { questionData: questionData, isReviewMode: isReviewMode, userAnswers: reviewAnswers }));
+    return (_jsx(ChooseTheCorrectAnswerGroupClient, { questionData: questionData, isReviewMode: isReviewMode, userAnswers: reviewAnswers, onAnswerChange: isReviewMode ? undefined : onSubmitAnswer }));
 }

package/dist/components/questions/viewer/MatchWordToPictureGroupViewer.d.ts

@@ -0,0 +1,9 @@
+import type { Question } from '../../../shared/types/entities/question.types';
+type MatchWordToPictureGroupViewerProps = {
+    question: Question;
+    isReviewMode?: boolean;
+    userAnswer?: string[];
+    onSubmitAnswer?: (answer: string[]) => void;
+};
+export declare function MatchWordToPictureGroupViewer({ question, isReviewMode, userAnswer, onSubmitAnswer, }: MatchWordToPictureGroupViewerProps): import("react").JSX.Element;
+export {};

package/dist/components/questions/viewer/MatchWordToPictureGroupViewer.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MatchWordToPictureGroupClient } from '../types/match-word-to-picture/MatchWordToPictureGroupClient';
+import { mapQuestionToMatchWordToPictureGroupData } from '../types/match-word-to-picture/map-match-word-to-picture-group-data';
+export function MatchWordToPictureGroupViewer({ question, isReviewMode = false, userAnswer, onSubmitAnswer, }) {
+    const questionData = mapQuestionToMatchWordToPictureGroupData(question);
+    const reviewAnswers = isReviewMode && !userAnswer
+        ? questionData.items.map((item) => item.correctAnswer)
+        : userAnswer;
+    return (_jsx(MatchWordToPictureGroupClient, { questionData: questionData, isReviewMode: isReviewMode, userAnswers: reviewAnswers, onAnswerChange: isReviewMode ? undefined : onSubmitAnswer }));
+}

package/dist/components/questions/viewer/MatchWordToPictureViewer.d.ts

@@ -0,0 +1,9 @@
+import type { Question } from '../../../shared/types/entities/question.types';
+type MatchWordToPictureViewerProps = {
+    question: Question;
+    isReviewMode?: boolean;
+    userAnswer?: string;
+    onSubmitAnswer?: (answer: string) => void;
+};
+export declare function MatchWordToPictureViewer({ question, isReviewMode, userAnswer, onSubmitAnswer, }: MatchWordToPictureViewerProps): import("react").JSX.Element;
+export {};

package/dist/components/questions/viewer/MatchWordToPictureViewer.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MatchWordToPictureClient } from '../types/match-word-to-picture/MatchWordToPictureClient';
+import { mapQuestionToMatchWordToPictureData } from '../types/match-word-to-picture/map-match-word-to-picture-data';
+export function MatchWordToPictureViewer({ question, isReviewMode = false, userAnswer, onSubmitAnswer, }) {
+    const questionData = mapQuestionToMatchWordToPictureData(question);
+    return (_jsx(MatchWordToPictureClient, { questionData: questionData, isReviewMode: isReviewMode, userAnswer: userAnswer, autoFillCorrectAnswers: isReviewMode && !userAnswer, explanation: question.explanation, onSubmit: isReviewMode ? undefined : onSubmitAnswer }));
+}

package/dist/components/questions/viewer/QuestionViewer.js

@@ -25,10 +25,13 @@ import { parseFillBlankStemLine } from '../_shared/utils/parseFillBlankStem';
 import { WordFillStructuredFormViewer } from './WordFillStructuredFormViewer';
 import { ChooseTheCorrectAnswerGroupViewer } from './ChooseTheCorrectAnswerGroupViewer';
 import { TrueFalseGroupViewer } from './TrueFalseGroupViewer';
+import { TrueFalseCorrectGroupViewer } from './TrueFalseCorrectGroupViewer';
 import { CrossOutWordGroupViewer } from './CrossOutWordGroupViewer';
 import { SpontaneousQaGroupViewer } from './SpontaneousQaGroupViewer';
 import { WordOrderAndMatchGroupViewer } from './WordOrderAndMatchGroupViewer';
 import { AnswerTheQuestionGroupViewer } from './AnswerTheQuestionGroupViewer';
+import { MatchWordToPictureViewer } from './MatchWordToPictureViewer';
+import { MatchWordToPictureGroupViewer } from './MatchWordToPictureGroupViewer';
 export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false, userAnswer, }) {
     const [selectedAnswer, setSelectedAnswer] = useState(userAnswer || null);
     const [playCount, setPlayCount] = useState(0);
@@ -338,6 +341,7 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
             : Array.isArray(answer?.guideImages)
                 ? answer.guideImages
                 : [];
+        const passage = content?.passage ?? answer?.passage;
         const contexts = content?.contexts || answer?.contexts || [];
         const minWords = content?.minWords ?? answer?.minWords ?? 20;
         const maxWords = content?.maxWords ?? answer?.maxWords ?? null;
@@ -345,6 +349,7 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
             contexts,
             informations,
             guideImages,
+            passage,
             minWords,
             maxWords,
             instructions: {
@@ -625,9 +630,11 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
             case 'CHOOSE_THE_CORRECT_ANSWER':
                 return renderChooseTheCorrectAnswer();
             case 'CHOOSE_THE_CORRECT_ANSWER_GROUP':
-                return (_jsx(ChooseTheCorrectAnswerGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer }));
+                return (_jsx(ChooseTheCorrectAnswerGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer, onSubmitAnswer: onSubmitAnswer }));
             case 'TRUE_FALSE_GROUP':
                 return (_jsx(TrueFalseGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer }));
+            case 'TRUE_FALSE_CORRECT_GROUP':
+                return (_jsx(TrueFalseCorrectGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer }));
             case 'CROSS_OUT_WORD_GROUP':
                 return (_jsx(CrossOutWordGroupViewer, { question: question, isReviewMode: isReviewMode }));
             case 'ANSWER_THE_QUESTION_GROUP':
@@ -637,6 +644,10 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
             case 'WORD_ORDER_AND_MATCH_GROUP':
             case 'WORD_ORDER_AND_MATCH':
                 return (_jsx(WordOrderAndMatchGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer }));
+            case 'MATCH_WORD_TO_PICTURE_GROUP':
+                return (_jsx(MatchWordToPictureGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer, onSubmitAnswer: onSubmitAnswer }));
+            case 'MATCH_WORD_TO_PICTURE':
+                return (_jsx(MatchWordToPictureViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer, onSubmitAnswer: onSubmitAnswer }));
             case 'FILL_IN_BLANK':
                 return renderFillInBlank();
             case 'TRUE_FALSE':
@@ -691,7 +702,9 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
      */
     const resolveCardTitle = () => {
         // WFSF and Crossword show title/instruction inside the client — no outer card label.
-        if (question.type === 'WORD_FILL_STRUCTURED_FORM' || question.type === 'CROSSWORD_PUZZLE') {
+        if (question.type === 'WORD_FILL_STRUCTURED_FORM' ||
+            question.type === 'CROSSWORD_PUZZLE' ||
+            question.type === 'MATCH_WORD_TO_PICTURE') {
             return null;
         }
         // Modern fill stems live entirely in the body; title is a short label.
@@ -714,7 +727,9 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
     };
     const cardTitle = resolveCardTitle();
     // WFSF and Crossword already have their own bordered shell — avoid double Card border.
-    if (question.type === 'WORD_FILL_STRUCTURED_FORM' || question.type === 'CROSSWORD_PUZZLE') {
+    if (question.type === 'WORD_FILL_STRUCTURED_FORM' ||
+        question.type === 'CROSSWORD_PUZZLE' ||
+        question.type === 'MATCH_WORD_TO_PICTURE') {
         return (_jsx("div", { className: "space-y-4", children: renderQuestion() }));
     }
     return (_jsxs(Card, { children: [cardTitle ? (_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "flex items-center justify-between", children: [_jsx("span", { className: "min-w-0 pr-2 text-base font-semibold leading-snug", children: cardTitle }), _jsxs("span", { className: "shrink-0 text-sm font-normal text-gray-500", children: [question.points, " \u0111i\u1EC3m"] })] }) })) : null, _jsx(CardContent, { className: cardTitle ? 'space-y-4' : 'space-y-4 pt-4', children: renderQuestion() })] }));

package/dist/components/questions/viewer/TrueFalseCorrectGroupViewer.d.ts

@@ -0,0 +1,9 @@
+import type { Question } from '../../../shared/types/entities/question.types';
+import type { TrueFalseCorrectStudentItemAnswer } from '../_shared/types/true-false-correct-group.type';
+type TrueFalseCorrectGroupViewerProps = {
+    question: Question;
+    isReviewMode?: boolean;
+    userAnswer?: TrueFalseCorrectStudentItemAnswer[];
+};
+export declare function TrueFalseCorrectGroupViewer({ question, isReviewMode, userAnswer, }: TrueFalseCorrectGroupViewerProps): import("react").JSX.Element;
+export {};

package/dist/components/questions/viewer/TrueFalseCorrectGroupViewer.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TrueFalseCorrectGroupClient } from '../types/true-false-correct-group/TrueFalseCorrectGroupClient';
+import { mapQuestionToTrueFalseCorrectGroupData } from '../types/true-false-correct-group/map-true-false-correct-group-data';
+export function TrueFalseCorrectGroupViewer({ question, isReviewMode = false, userAnswer, }) {
+    const questionData = mapQuestionToTrueFalseCorrectGroupData(question);
+    const reviewAnswers = isReviewMode && !userAnswer
+        ? questionData.items.map((item) => ({
+            isTrue: item.isTrue,
+            correction: item.correction,
+        }))
+        : userAnswer;
+    return (_jsx(TrueFalseCorrectGroupClient, { questionData: questionData, isReviewMode: isReviewMode, userAnswers: reviewAnswers }));
+}

package/dist/components/questions/viewer/index.d.ts

@@ -3,7 +3,10 @@ export { QuestionGroupViewer } from './QuestionGroupViewer';
 export { WordFillStructuredFormViewer } from './WordFillStructuredFormViewer';
 export { ChooseTheCorrectAnswerGroupViewer } from './ChooseTheCorrectAnswerGroupViewer';
 export { TrueFalseGroupViewer } from './TrueFalseGroupViewer';
+export { TrueFalseCorrectGroupViewer } from './TrueFalseCorrectGroupViewer';
 export { CrossOutWordGroupViewer } from './CrossOutWordGroupViewer';
 export { SpontaneousQaGroupViewer } from './SpontaneousQaGroupViewer';
 export { WordOrderAndMatchGroupViewer } from './WordOrderAndMatchGroupViewer';
 export { AnswerTheQuestionGroupViewer } from './AnswerTheQuestionGroupViewer';
+export { MatchWordToPictureViewer } from './MatchWordToPictureViewer';
+export { MatchWordToPictureGroupViewer } from './MatchWordToPictureGroupViewer';

package/dist/components/questions/viewer/index.js

@@ -3,7 +3,10 @@ export { QuestionGroupViewer } from './QuestionGroupViewer';
 export { WordFillStructuredFormViewer } from './WordFillStructuredFormViewer';
 export { ChooseTheCorrectAnswerGroupViewer } from './ChooseTheCorrectAnswerGroupViewer';
 export { TrueFalseGroupViewer } from './TrueFalseGroupViewer';
+export { TrueFalseCorrectGroupViewer } from './TrueFalseCorrectGroupViewer';
 export { CrossOutWordGroupViewer } from './CrossOutWordGroupViewer';
 export { SpontaneousQaGroupViewer } from './SpontaneousQaGroupViewer';
 export { WordOrderAndMatchGroupViewer } from './WordOrderAndMatchGroupViewer';
 export { AnswerTheQuestionGroupViewer } from './AnswerTheQuestionGroupViewer';
+export { MatchWordToPictureViewer } from './MatchWordToPictureViewer';
+export { MatchWordToPictureGroupViewer } from './MatchWordToPictureGroupViewer';

package/dist/components/results/renderers/ReviewChooseBestAnswerRenderer.js

@@ -1,16 +1,11 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Check, X, ZoomIn } from 'lucide-react';
-import { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, X } from 'lucide-react';
 import { ResolvedImage } from '../../../components/common/ResolvedImage';
 import CambridgeYlePartBanner from '../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
 import CambridgeYleInstructionBanner from '../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
 import CambridgeYleAudioPlayer from '../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer';
-// Image with zoom functionality
-function QuestionImage({ imageUrl }) {
-    const [isZoomed, setIsZoomed] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative flex items-center justify-center", children: [_jsx(ResolvedImage, { src: imageUrl, alt: "Question illustration", className: "max-h-[250px] cursor-pointer rounded-lg object-contain shadow-md", onClick: () => setIsZoomed(true) }), _jsx("button", { type: "button", onClick: () => setIsZoomed(true), className: "absolute right-2 top-2 rounded-full bg-white/80 p-1.5 shadow-md hover:bg-white", "aria-label": "Zoom image", children: _jsx(ZoomIn, { className: "h-4 w-4 text-gray-600" }) })] }), isZoomed && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/70", onClick: () => setIsZoomed(false), children: _jsx(ResolvedImage, { src: imageUrl, alt: "Question illustration (zoomed)", className: "max-h-[90vh] max-w-[90vw] rounded-lg object-contain", showLoadingState: false }) }))] }));
-}
+import { ChooseBestAnswerImages, getChooseBestAnswerOptionImageSrc } from '../../../components/exams/take/components/question-renderers/ChooseBestAnswerImages';
 // Single Question Component for Review Mode
 function ReviewQuestionItem({ question, selectedOptionIds, isCorrect, correctOptionIds, }) {
     const hasStudentAnswered = selectedOptionIds.length > 0;
@@ -48,7 +43,7 @@ function ReviewQuestionItem({ question, selectedOptionIds, isCorrect, correctOpt
         }
         return _jsx("div", { className: `flex h-5 w-5 items-center justify-center border-2 border-gray-300 bg-white ${shapeClass}` });
     };
-    return (_jsxs("div", { className: "mb-4", children: [_jsxs("p", { className: "mb-2 text-lg font-bold text-gray-900", children: [question.questionNumber, ". ", question.questionText] }), isMultipleAnswers && (_jsx("p", { className: "mb-3 pl-2 text-sm font-medium text-blue-600", children: "Ch\u1ECDn nhi\u1EC1u \u0111\u00E1p \u00E1n" })), question.imageUrl && (_jsx("div", { className: "mb-3", children: _jsx(QuestionImage, { imageUrl: question.imageUrl }) })), isImageOptions ? (_jsx("div", { className: "grid gap-3 px-2", style: { gridTemplateColumns: `repeat(${question.options.length}, minmax(0, 1fr))` }, children: question.options.map((option) => (_jsxs("div", { className: `relative flex flex-col items-center gap-1 rounded-lg border-2 p-2 cursor-default ${getOptionStyle(option.id)}`, children: [_jsx("span", { className: "text-xs font-medium text-gray-600", children: option.label }), _jsx(ResolvedImage, { src: option.text, alt: `Option ${option.label}`, className: "h-28 w-28 rounded object-contain" }), renderIndicator(option.id)] }, option.id))) })) : (
+    return (_jsxs("div", { className: "mb-4", children: [_jsxs("p", { className: "mb-2 text-lg font-bold text-gray-900", children: [question.questionNumber, ". ", question.questionText] }), isMultipleAnswers && (_jsx("p", { className: "mb-3 pl-2 text-sm font-medium text-blue-600", children: "Ch\u1ECDn nhi\u1EC1u \u0111\u00E1p \u00E1n" })), _jsx(ChooseBestAnswerImages, { imageUrl: question.imageUrl, className: "mb-3" }), isImageOptions ? (_jsx("div", { className: "grid gap-3 px-2", style: { gridTemplateColumns: `repeat(${question.options.length}, minmax(0, 1fr))` }, children: question.options.map((option) => (_jsxs("div", { className: `relative flex flex-col items-center gap-1 rounded-lg border-2 p-2 cursor-default ${getOptionStyle(option.id)}`, children: [_jsx("span", { className: "text-xs font-medium text-gray-600", children: option.label }), _jsx(ResolvedImage, { src: getChooseBestAnswerOptionImageSrc(option), alt: `Option ${option.label}`, className: "h-28 w-28 rounded object-contain" }), renderIndicator(option.id)] }, option.id))) })) : (
             /* Options — text variant */
             _jsx("div", { className: "flex flex-col gap-2 pl-2", children: question.options.map((option) => (_jsxs("div", { className: `flex items-center gap-3 rounded-lg border-2 px-3 py-2 cursor-default ${getOptionStyle(option.id)}`, children: [_jsxs("span", { className: "text-sm font-medium text-gray-600", children: [option.label, "."] }), _jsx("span", { className: "flex-1 text-sm text-gray-700", children: option.text }), renderIndicator(option.id)] }, option.id))) }))] }));
 }