@tinyweb_dev/oe-exam-sdk 0.2.4 → 0.2.6

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/FillInBlankGroupViewer.d.ts

@@ -0,0 +1,10 @@
+import type { Question } from '../../../shared/types/entities/question.types';
+import type { FillInBlankGroupStudentItemAnswer } from '../_shared/types/fill-in-blank-group.type';
+type FillInBlankGroupViewerProps = {
+    question: Question;
+    isReviewMode?: boolean;
+    userAnswer?: FillInBlankGroupStudentItemAnswer[];
+    onSubmitAnswer?: (answer: FillInBlankGroupStudentItemAnswer[]) => void;
+};
+export declare function FillInBlankGroupViewer({ question, isReviewMode, userAnswer, onSubmitAnswer, }: FillInBlankGroupViewerProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FillInBlankGroupClient } from '../types/fill-in-blank-group/FillInBlankGroupClient';
+import { mapQuestionToFillInBlankGroupData } from '../types/fill-in-blank-group/map-fill-in-blank-group-data';
+export function FillInBlankGroupViewer({ question, isReviewMode = false, userAnswer, onSubmitAnswer, }) {
+    const questionData = mapQuestionToFillInBlankGroupData(question);
+    const studentAnswers = Array.isArray(userAnswer) ? userAnswer : undefined;
+    const reviewAnswers = isReviewMode && !studentAnswers
+        ? questionData.items.map((item) => ({
+            answers: item.answers.map((alts) => alts[0] || ''),
+        }))
+        : studentAnswers;
+    return (_jsx(FillInBlankGroupClient, { 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/MatchingWithLinesGroupViewer.d.ts

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

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

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { MatchingWithLinesGroupClient } from '../types/matching-with-lines-group/MatchingWithLinesGroupClient';
+import { mapQuestionToMatchingWithLinesGroupData } from '../types/matching-with-lines-group/map-matching-with-lines-group-data';
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function emptyAnswers(length) {
+    return Array.from({ length }, () => '');
+}
+function parseMatchingAnswers(value, length) {
+    const source = Array.isArray(value)
+        ? value
+        : isRecord(value) && Array.isArray(value.answer)
+            ? value.answer
+            : null;
+    if (!source)
+        return undefined;
+    return Array.from({ length }, (_, index) => typeof source[index] === 'string' ? source[index] : '');
+}
+export function MatchingWithLinesGroupViewer({ question, isReviewMode = false, userAnswer, onSubmitAnswer, }) {
+    const questionData = mapQuestionToMatchingWithLinesGroupData(question);
+    const itemCount = questionData.items.length;
+    const parsedUser = parseMatchingAnswers(userAnswer, itemCount);
+    const questionKey = `${question.id}:${question.type}:${itemCount}:${questionData.rightItems
+        .map((item) => `${item.id}:${item.text}`)
+        .join(',')}`;
+    const [cachedKey, setCachedKey] = useState(questionKey);
+    const [localAnswers, setLocalAnswers] = useState(() => parsedUser ?? emptyAnswers(itemCount));
+    if (cachedKey !== questionKey) {
+        setCachedKey(questionKey);
+        setLocalAnswers(parsedUser ?? emptyAnswers(itemCount));
+    }
+    const userAnswers = isReviewMode && !parsedUser
+        ? questionData.items.map((item) => item.correctAnswer)
+        : parsedUser ?? localAnswers;
+    const handleAnswersChange = (next) => {
+        const padded = questionData.items.map((item, index) => {
+            if (item.isExample)
+                return item.correctAnswer || '';
+            return typeof next[index] === 'string' ? next[index] : '';
+        });
+        setLocalAnswers(padded);
+        onSubmitAnswer?.(padded);
+    };
+    return (_jsx(MatchingWithLinesGroupClient, { questionData: questionData, isReviewMode: isReviewMode, userAnswers: userAnswers, onAnswersChange: isReviewMode ? undefined : handleAnswersChange }));
+}

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

@@ -25,10 +25,15 @@ import { parseFillBlankStemLine } from '../_shared/utils/parseFillBlankStem';
 import { WordFillStructuredFormViewer } from './WordFillStructuredFormViewer';
 import { ChooseTheCorrectAnswerGroupViewer } from './ChooseTheCorrectAnswerGroupViewer';
 import { TrueFalseGroupViewer } from './TrueFalseGroupViewer';
+import { TrueFalseCorrectGroupViewer } from './TrueFalseCorrectGroupViewer';
+import { FillInBlankGroupViewer } from './FillInBlankGroupViewer';
+import { MatchingWithLinesGroupViewer } from './MatchingWithLinesGroupViewer';
 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 +343,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 +351,7 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
             contexts,
             informations,
             guideImages,
+            passage,
             minWords,
             maxWords,
             instructions: {
@@ -625,9 +632,15 @@ 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 'FILL_IN_BLANK_GROUP':
+                return (_jsx(FillInBlankGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer, onSubmitAnswer: onSubmitAnswer }));
+            case 'MATCHING_WITH_LINES_GROUP':
+                return (_jsx(MatchingWithLinesGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer, onSubmitAnswer: onSubmitAnswer }));
             case 'CROSS_OUT_WORD_GROUP':
                 return (_jsx(CrossOutWordGroupViewer, { question: question, isReviewMode: isReviewMode }));
             case 'ANSWER_THE_QUESTION_GROUP':
@@ -637,6 +650,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 +708,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 +733,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,12 @@ export { QuestionGroupViewer } from './QuestionGroupViewer';
 export { WordFillStructuredFormViewer } from './WordFillStructuredFormViewer';
 export { ChooseTheCorrectAnswerGroupViewer } from './ChooseTheCorrectAnswerGroupViewer';
 export { TrueFalseGroupViewer } from './TrueFalseGroupViewer';
+export { TrueFalseCorrectGroupViewer } from './TrueFalseCorrectGroupViewer';
+export { FillInBlankGroupViewer } from './FillInBlankGroupViewer';
+export { MatchingWithLinesGroupViewer } from './MatchingWithLinesGroupViewer';
 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,12 @@ export { QuestionGroupViewer } from './QuestionGroupViewer';
 export { WordFillStructuredFormViewer } from './WordFillStructuredFormViewer';
 export { ChooseTheCorrectAnswerGroupViewer } from './ChooseTheCorrectAnswerGroupViewer';
 export { TrueFalseGroupViewer } from './TrueFalseGroupViewer';
+export { TrueFalseCorrectGroupViewer } from './TrueFalseCorrectGroupViewer';
+export { FillInBlankGroupViewer } from './FillInBlankGroupViewer';
+export { MatchingWithLinesGroupViewer } from './MatchingWithLinesGroupViewer';
 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))) }))] }));
 }

package/dist/components/results/renderers/review-question-body-movers.js

@@ -4,8 +4,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Movers fallback review cases (isReviewMode=true).
  * Source: oe-exam-fe ReviewQuestionRenderer.tsx
  */
-import { MoversAnswerTheQuestionRenderer, MoversFillWordHintRenderer, MoversGridFillRenderer, MoversLabelThePictureRenderer, MoversMatchByWritingAnswerRenderer, MoversPictureChooseRenderer, MoversPictureFillBlankChooseRenderer, MoversReadingPassageRenderer, MoversTrueFalseRenderer, MoversCrossOutWordGroupRenderer, MoversWordFillParagraphRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderingRenderer, MoversWriteSentencesRenderer, MoversWritingRenderer, MoversCrosswordPuzzleRenderer, } from '../../../components/exams/take/components/question-renderers';
-import { transformAnswerTheQuestion, transformFillWordHint, transformGridFill, transformLabelPicture, transformMatchByWritingAnswer, transformPictureChoose, transformPictureFillBlankChoose, transformReadingPassage, transformTrueFalse, transformWordFillParagraph, transformWordFillStructuredForm, transformWordOrdering, transformWriteSentences, transformWriteShortLetter, transformCrosswordPuzzle, } from '../../../components/exams/take/utils/question-transformers';
+import { MoversAnswerTheQuestionRenderer, MoversFillWordHintRenderer, MoversGridFillRenderer, MoversLabelThePictureRenderer, MoversMatchByWritingAnswerRenderer, MoversMatchWordToPictureRenderer, MoversPictureChooseRenderer, MoversPictureFillBlankChooseRenderer, MoversReadingPassageRenderer, MoversTrueFalseRenderer, MoversTrueFalseCorrectGroupRenderer, MoversFillInBlankGroupRenderer, MoversMatchingWithLinesGroupRenderer, MoversCrossOutWordGroupRenderer, MoversWordFillParagraphRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderingRenderer, MoversWriteSentencesRenderer, MoversWritingRenderer, MoversCrosswordPuzzleRenderer, } from '../../../components/exams/take/components/question-renderers';
+import { transformAnswerTheQuestion, transformFillWordHint, transformGridFill, transformLabelPicture, transformMatchByWritingAnswer, transformMatchWordToPicture, transformPictureChoose, transformPictureFillBlankChoose, transformReadingPassage, transformTrueFalse, transformTrueFalseCorrectGroup, transformFillInBlankGroup, transformMatchingWithLinesGroup, transformWordFillParagraph, transformWordFillStructuredForm, transformWordOrdering, transformWriteSentences, transformWriteShortLetter, transformCrosswordPuzzle, } from '../../../components/exams/take/utils/question-transformers';
 import { normalizeCrossOutWordGroupAnswer, transformCrossOutWordGroup, } from '../../../components/exams/take/utils/cross-out-word-group.transformer';
 function asApiQuestions(questions) {
     return questions;
@@ -26,7 +26,7 @@ export function renderMoversReviewBody(ctx) {
             const data = transformWriteShortLetter(firstQuestion);
             const writingAnswer = answers[firstQuestion.id] || '';
             const gradingInfo = essayGradingMap[firstQuestion.id];
-            return (_jsx(MoversWritingRenderer, { partNumber: partNo, partName: part.name, prompt: data.prompt, requirements: data.requirements, minWords: data.minWords, maxWords: data.maxWords, answer: writingAnswer, onAnswerChange: handleAnswerChange, isReviewMode: true, teacherScore: gradingInfo?.score, maxScore: gradingInfo?.maxScore, teacherFeedback: gradingInfo?.teacherFeedback, writingAssessment: gradingInfo?.writingAssessment }));
+            return (_jsx(MoversWritingRenderer, { partNumber: partNo, partName: part.name, prompt: data.prompt, requirements: data.requirements, minWords: data.minWords, maxWords: data.maxWords, answer: writingAnswer, onAnswerChange: handleAnswerChange, isReviewMode: true, guideImages: data.guideImages, passage: data.passage, teacherScore: gradingInfo?.score, maxScore: gradingInfo?.maxScore, teacherFeedback: gradingInfo?.teacherFeedback, writingAssessment: gradingInfo?.writingAssessment }));
         }
         case 'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER': {
             const data = transformPictureChoose(apiQuestions);
@@ -110,6 +110,73 @@ export function renderMoversReviewBody(ctx) {
             });
             return (_jsx(MoversCrossOutWordGroupRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: questionCount, questions: data.questions, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true, correctAnswerMap: correctAnswerMap }));
         }
+        case 'TRUE_FALSE_CORRECT_GROUP': {
+            const data = transformTrueFalseCorrectGroup(apiQuestions);
+            const correctAnswerMap = {};
+            data.questions.forEach((question) => {
+                if (question.exampleCorrectAnswer) {
+                    correctAnswerMap[question.id] = question.exampleCorrectAnswer;
+                }
+            });
+            const parent = apiQuestions[0];
+            const rawCorrect = parent?.id ? rawCorrectAnswerMap[parent.id] : undefined;
+            const rawCorrectRecord = rawCorrect && typeof rawCorrect === 'object' && !Array.isArray(rawCorrect)
+                ? rawCorrect
+                : undefined;
+            const correctArr = Array.isArray(rawCorrectRecord?.answer)
+                ? rawCorrectRecord.answer
+                : Array.isArray(parent?.correct_answer?.answer)
+                    ? parent.correct_answer.answer
+                    : [];
+            data.questions.forEach((question, index) => {
+                if (!question.isExample && correctArr[index] && typeof correctArr[index] === 'object') {
+                    const obj = correctArr[index];
+                    const isTrue = obj.isTrue === true ? true : obj.isTrue === false ? false : null;
+                    if (isTrue !== null) {
+                        correctAnswerMap[question.id] = {
+                            isTrue,
+                            correction: typeof obj.correction === 'string' ? obj.correction : '',
+                        };
+                    }
+                }
+            });
+            return (_jsx(MoversTrueFalseCorrectGroupRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: questionCount, questions: data.questions, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true, correctAnswerMap: correctAnswerMap }));
+        }
+        case 'FILL_IN_BLANK_GROUP': {
+            const data = transformFillInBlankGroup(apiQuestions);
+            const correctAnswerMap = {};
+            const parent = apiQuestions[0];
+            const rawCorrect = parent?.id ? rawCorrectAnswerMap[parent.id] : undefined;
+            const rawCorrectRecord = rawCorrect && typeof rawCorrect === 'object' && !Array.isArray(rawCorrect)
+                ? rawCorrect
+                : undefined;
+            const correctArr = Array.isArray(rawCorrectRecord?.answer)
+                ? rawCorrectRecord.answer
+                : Array.isArray(parent?.correct_answer?.answer)
+                    ? parent.correct_answer.answer
+                    : [];
+            data.questions.forEach((question, index) => {
+                const rawItem = correctArr[index];
+                if (!rawItem || typeof rawItem !== 'object' || Array.isArray(rawItem)) {
+                    return;
+                }
+                const obj = rawItem;
+                if (!Array.isArray(obj.answers)) {
+                    return;
+                }
+                correctAnswerMap[question.id] = {
+                    answers: obj.answers.map((blank) => (Array.isArray(blank)
+                        ? blank.map((alt) => String(alt ?? '').trim()).filter(Boolean)
+                        : [String(blank ?? '').trim()].filter(Boolean))),
+                    caseSensitive: obj.caseSensitive === true,
+                };
+            });
+            return (_jsx(MoversFillInBlankGroupRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: data.questions.filter((question) => !question.isExample).length, audioUrl: data.audioUrl, imageUrl: data.imageUrl, showHints: data.showHints, hints: data.hints, questions: data.questions, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true, correctAnswerMap: correctAnswerMap }));
+        }
+        case 'MATCHING_WITH_LINES_GROUP': {
+            const data = transformMatchingWithLinesGroup(apiQuestions);
+            return (_jsx(MoversMatchingWithLinesGroupRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: questionCount, data: data, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true }));
+        }
         case 'TRUE_FALSE': {
             const data = transformTrueFalse(apiQuestions);
             return (_jsx(MoversTrueFalseRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: questionCount, imageUrl: data.imageUrl, questions: data.questions, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true, correctAnswerTextMap: correctAnswerTextMap }));
@@ -118,6 +185,10 @@ export function renderMoversReviewBody(ctx) {
             const data = transformMatchByWritingAnswer(apiQuestions);
             return (_jsx(MoversMatchByWritingAnswerRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: questionCount, audioUrl: part.audioUrl, options: data.options, questions: data.questions, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true, viewMode: data.viewMode, groupImageUrl: data.groupImageUrl, correctAnswerTextMap: correctAnswerTextMap, isCorrectMap: isCorrectMap }));
         }
+        case 'MATCH_WORD_TO_PICTURE': {
+            const data = transformMatchWordToPicture(apiQuestions);
+            return (_jsx(MoversMatchWordToPictureRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: questionCount, wordBank: data.wordBank, questions: data.questions, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true, correctAnswerTextMap: correctAnswerTextMap, isCorrectMap: isCorrectMap }));
+        }
         case 'WORD_ORDERING': {
             const data = transformWordOrdering(apiQuestions);
             return (_jsx(MoversWordOrderingRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: questionCount, questions: data.questions, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true, rawCorrectAnswerMap: rawCorrectAnswerMap, isCorrectMap: isCorrectMap }));

package/dist/components/results/review-data.js

@@ -8,6 +8,9 @@ const FLATTENED_ANSWER_TYPES = new Set([
     'CHOOSE_THE_CORRECT_ANSWER_GROUP',
     'ANSWER_THE_QUESTION_GROUP',
     'CROSS_OUT_WORD_GROUP',
+    'TRUE_FALSE_CORRECT_GROUP',
+    'FILL_IN_BLANK_GROUP',
+    'MATCHING_WITH_LINES_GROUP',
 ]);
 export function transformResultAnswersForReview(answers, templateParts = []) {
     const groups = groupAnswers(answers);
@@ -183,6 +186,62 @@ function transformStudentAnswer(questionId, questionType, value) {
             normalizeCrossOutWordGroupAnswer(item),
         ]));
     }
+    if (questionType === 'TRUE_FALSE_CORRECT_GROUP') {
+        const answer = Array.isArray(record.answer)
+            ? record.answer
+            : Array.isArray(value)
+                ? value
+                : [];
+        return Object.fromEntries(answer.map((item, index) => {
+            if (item && typeof item === 'object' && !Array.isArray(item)) {
+                const obj = item;
+                const isTrue = obj.isTrue === true ? true : obj.isTrue === false ? false : null;
+                return [
+                    `${questionId}-item-${index}`,
+                    {
+                        isTrue,
+                        correction: typeof obj.correction === 'string' ? obj.correction : '',
+                    },
+                ];
+            }
+            return [`${questionId}-item-${index}`, { isTrue: null, correction: '' }];
+        }));
+    }
+    if (questionType === 'FILL_IN_BLANK_GROUP') {
+        const answer = Array.isArray(record.answer)
+            ? record.answer
+            : Array.isArray(value)
+                ? value
+                : [];
+        return Object.fromEntries(answer.map((item, index) => {
+            if (item && typeof item === 'object' && !Array.isArray(item) && Array.isArray(item.answers)) {
+                return [
+                    `${questionId}-item-${index}`,
+                    {
+                        answers: item.answers.map((value) => String(value ?? '')),
+                    },
+                ];
+            }
+            if (Array.isArray(item)) {
+                return [`${questionId}-item-${index}`, { answers: item.map((value) => String(value ?? '')) }];
+            }
+            if (typeof item === 'string') {
+                return [`${questionId}-item-${index}`, { answers: [item] }];
+            }
+            return [`${questionId}-item-${index}`, { answers: [] }];
+        }));
+    }
+    if (questionType === 'MATCHING_WITH_LINES_GROUP') {
+        const answer = Array.isArray(record.answer)
+            ? record.answer
+            : Array.isArray(value)
+                ? value
+                : [];
+        return Object.fromEntries(answer.map((item, index) => [
+            `${questionId}-item-${index}`,
+            typeof item === 'string' ? item : '',
+        ]));
+    }
     if (questionType === 'CHOOSE_THE_CORRECT_ANSWER' || questionType === 'CHOOSE_CORRECT_ADJECTIVE') {
         const rawAns = record.answer ?? record.optionId ?? record.optionIds;
         const ids = getOptionIds(questionId, rawAns);