@tinyweb_dev/oe-exam-sdk 1.0.10 → 1.0.12

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

@@ -632,6 +632,12 @@ function ExamTakingPageContainerInner({ roomId, api, onNavigate, resultPath = (a
                         map.set(`${question.id}-item-${index}`, question.id);
                     });
                 }
+                if (part.questionType === 'MATCH_WORD_TO_PICTURE_GROUP' &&
+                    Array.isArray(content?.items)) {
+                    content.items.forEach((_, index) => {
+                        map.set(`${question.id}-item-${index}`, question.id);
+                    });
+                }
                 if (part.questionType === 'CHOOSE_THEN_ANSWER_GROUP' &&
                     Array.isArray(content?.items)) {
                     content.items.forEach((_, index) => {

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

@@ -8,9 +8,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * 2. Transforms data to renderer-specific props
  * 3. Renders the correct component for each question type
  */
-import { MoversListenAndWriteRenderer, MoversChooseBestAnswerRenderer, MoversChooseAdjectiveRenderer, MoversWritingRenderer, MoversColoringRenderer, MoversReadingPassageRenderer, MoversLabelThePictureRenderer, MoversGridFillRenderer, MoversTrueFalseRenderer, MoversTrueFalseCorrectGroupRenderer, MoversFillInBlankGroupRenderer, MoversCrossOutWordGroupRenderer, MoversAnswerTheQuestionRenderer, MoversWriteSentencesRenderer, MoversWordOrderingRenderer, MoversWordOrderingGroupRenderer, MoversWordFillParagraphRenderer, MoversMatchByWritingAnswerRenderer, MoversMatchWordToPictureRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderAndMatchGroupRenderer, MoversMatchingWithLinesGroupRenderer, MoversCrosswordPuzzleRenderer, FindWordsInMatrixRenderer, SortWordsIntoCategoriesRenderer, ChooseThenAnswerGroupRenderer, } from './question-renderers';
+import { MoversListenAndWriteRenderer, MoversChooseBestAnswerRenderer, MoversChooseAdjectiveRenderer, MoversWritingRenderer, MoversColoringRenderer, MoversReadingPassageRenderer, MoversLabelThePictureRenderer, MoversGridFillRenderer, MoversTrueFalseRenderer, MoversTrueFalseCorrectGroupRenderer, MoversFillInBlankGroupRenderer, MoversCrossOutWordGroupRenderer, MoversAnswerTheQuestionRenderer, MoversWriteSentencesRenderer, MoversWordOrderingRenderer, MoversWordOrderingGroupRenderer, MoversWordFillParagraphRenderer, MoversMatchByWritingAnswerRenderer, MoversMatchWordToPictureRenderer, MoversMatchWordToPictureGroupRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderAndMatchGroupRenderer, MoversMatchingWithLinesGroupRenderer, MoversCrosswordPuzzleRenderer, FindWordsInMatrixRenderer, SortWordsIntoCategoriesRenderer, ChooseThenAnswerGroupRenderer, } from './question-renderers';
 import { SpeakingQuestionRenderer } from './speaking/renderers';
-import { transformFillInBlank, transformWriteCorrectVerbForm, transformChooseCorrectAnswer, transformChooseTheCorrectAnswerGroup, transformChooseCorrectAdjective, transformWriteShortLetter, transformColorObjects, transformReadingPassage, transformLabelPicture, transformGridFill, transformAnswerTheQuestion, transformAnswerTheQuestionGroup, transformTrueFalse, transformTrueFalseGroup, transformTrueFalseCorrectGroup, transformFillInBlankGroup, transformWordOrdering, transformWordOrderingGroupTake, transformWordFillParagraph, transformMatchByWritingAnswer, transformMatchWordToPicture, transformWriteSentences, transformWordFillStructuredForm, transformWordOrderAndMatchGroup, transformMatchingWithLinesGroup, transformCrosswordPuzzle, transformFindWordsInMatrix, transformSortWordsIntoCategories, transformChooseThenAnswerGroup, } from '../utils/question-transformers';
+import { transformFillInBlank, transformWriteCorrectVerbForm, transformChooseCorrectAnswer, transformChooseTheCorrectAnswerGroup, transformChooseCorrectAdjective, transformWriteShortLetter, transformColorObjects, transformReadingPassage, transformLabelPicture, transformGridFill, transformAnswerTheQuestion, transformAnswerTheQuestionGroup, transformTrueFalse, transformTrueFalseGroup, transformTrueFalseCorrectGroup, transformFillInBlankGroup, transformWordOrdering, transformWordOrderingGroupTake, transformWordFillParagraph, transformMatchByWritingAnswer, transformMatchWordToPicture, transformMatchWordToPictureGroup, transformWriteSentences, transformWordFillStructuredForm, transformWordOrderAndMatchGroup, transformMatchingWithLinesGroup, transformCrosswordPuzzle, transformFindWordsInMatrix, transformSortWordsIntoCategories, transformChooseThenAnswerGroup, } 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, compactLayout = false, }) {
@@ -200,6 +200,10 @@ export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode =
             const data = transformMatchByWritingAnswer(questions);
             return (_jsx(MoversMatchByWritingAnswerRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, audioUrl: part.audioUrl, options: data.options, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, viewMode: data.viewMode, groupImageUrl: data.groupImageUrl }));
         }
+        case 'MATCH_WORD_TO_PICTURE_GROUP': {
+            const data = transformMatchWordToPictureGroup(questions);
+            return (_jsx(MoversMatchWordToPictureGroupRenderer, { partNumber: partNo, partName: part.name, questionCount: data.questions.filter((q) => !q.isExample).length, instruction: part.instructions || data.instruction, audioUrl: part.audioUrl, data: data, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+        }
         case 'MATCH_WORD_TO_PICTURE': {
             const data = transformMatchWordToPicture(questions);
             return (_jsx(MoversMatchWordToPictureRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, wordBank: data.wordBank, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));

package/dist/components/exams/take/components/question-renderers/MoversMatchWordToPictureGroupRenderer.d.ts

@@ -0,0 +1,14 @@
+import type { MatchWordToPictureGroupPartData } from '../../utils/question-transformers';
+interface MoversMatchWordToPictureGroupRendererProps {
+    partNumber: number;
+    partName?: string;
+    questionCount: number;
+    instruction: string;
+    audioUrl?: string;
+    data: MatchWordToPictureGroupPartData;
+    answers: Record<string, string | undefined>;
+    onAnswerChange: (questionId: string, value: string) => void;
+    isReviewMode?: boolean;
+}
+export declare function MoversMatchWordToPictureGroupRenderer({ partNumber, partName, questionCount, instruction, audioUrl, data, answers, onAnswerChange, isReviewMode, }: MoversMatchWordToPictureGroupRendererProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+import { MatchWordToPictureGroupClient } from '../../../../questions/types/match-word-to-picture-group/MatchWordToPictureGroupClient';
+export function MoversMatchWordToPictureGroupRenderer({ partNumber, partName, questionCount, instruction, audioUrl, data, answers, onAnswerChange, isReviewMode = false, }) {
+    const userAnswers = data.questions.map((question) => {
+        if (question.isExample)
+            return question.correctAnswer;
+        return typeof answers[question.id] === 'string' ? answers[question.id] || '' : '';
+    });
+    const resolvedAudio = data.audioUrl || audioUrl || '';
+    return (_jsxs("div", { className: "w-full space-y-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, partName: partName, questionCount: questionCount }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction }), _jsx("div", { className: "mt-4", children: _jsx(MatchWordToPictureGroupClient, { questionData: {
+                        title: data.title,
+                        instruction: data.instruction,
+                        ...(data.passage ? { passage: data.passage } : {}),
+                        ...(resolvedAudio ? { audioUrl: resolvedAudio } : {}),
+                        ...(data.imageUrl ? { imageUrl: data.imageUrl } : {}),
+                        wordBank: data.wordBank,
+                        items: data.questions.map((question) => ({
+                            imageUrl: question.imageUrl,
+                            correctAnswer: question.correctAnswer,
+                            isExample: question.isExample,
+                            points: question.points,
+                            questionNumber: question.questionNumber,
+                        })),
+                        explanation: data.explanation,
+                    }, isReviewMode: isReviewMode, userAnswers: userAnswers, onAnswerChange: (next) => {
+                        next.forEach((value, index) => {
+                            const target = data.questions[index];
+                            if (target && !target.isExample) {
+                                onAnswerChange(target.id, value);
+                            }
+                        });
+                    } }) })] }));
+}

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

@@ -13,9 +13,13 @@ export function MoversMatchingWithLinesGroupRenderer({ partNumber, partName, que
     return (_jsxs("div", { className: "w-full space-y-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, partName: partName, questionCount: questionCount }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction }), _jsx("div", { className: "mt-4", children: _jsx(MatchingWithLinesGroupClient, { questionData: {
                         title: data.title,
                         instruction: data.instruction,
+                        ...(data.passage ? { passage: data.passage } : {}),
+                        ...(data.audioUrl ? { audioUrl: data.audioUrl } : {}),
+                        ...(data.imageUrl ? { imageUrl: data.imageUrl } : {}),
                         rightItems: data.rightItems,
                         items: data.questions.map((question) => ({
                             imageUrl: question.imageUrl,
+                            text: question.text,
                             correctAnswer: question.correctRightId,
                             isExample: question.isExample,
                             points: question.points,

package/dist/components/exams/take/components/question-renderers/index.d.ts

@@ -17,6 +17,7 @@ export { MoversWordOrderingGroupRenderer } from './MoversWordOrderingGroupRender
 export { MoversWordFillParagraphRenderer } from './MoversWordFillParagraphRenderer';
 export { MoversMatchByWritingAnswerRenderer } from './MoversMatchByWritingAnswerRenderer';
 export { MoversMatchWordToPictureRenderer } from './MoversMatchWordToPictureRenderer';
+export { MoversMatchWordToPictureGroupRenderer } from './MoversMatchWordToPictureGroupRenderer';
 export { MoversWordFillStructuredFormRenderer } from './MoversWordFillStructuredFormRenderer';
 export { MoversWordOrderAndMatchGroupRenderer } from './MoversWordOrderAndMatchGroupRenderer';
 export { MoversMatchingWithLinesGroupRenderer } from './MoversMatchingWithLinesGroupRenderer';

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

@@ -21,6 +21,7 @@ export { MoversWordOrderingGroupRenderer } from './MoversWordOrderingGroupRender
 export { MoversWordFillParagraphRenderer } from './MoversWordFillParagraphRenderer';
 export { MoversMatchByWritingAnswerRenderer } from './MoversMatchByWritingAnswerRenderer';
 export { MoversMatchWordToPictureRenderer } from './MoversMatchWordToPictureRenderer';
+export { MoversMatchWordToPictureGroupRenderer } from './MoversMatchWordToPictureGroupRenderer';
 export { MoversWordFillStructuredFormRenderer } from './MoversWordFillStructuredFormRenderer';
 export { MoversWordOrderAndMatchGroupRenderer } from './MoversWordOrderAndMatchGroupRenderer';
 export { MoversMatchingWithLinesGroupRenderer } from './MoversMatchingWithLinesGroupRenderer';

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

@@ -90,6 +90,7 @@ function findParentQuestion(subQuestionId, parts) {
             part.questionType === 'TRUE_FALSE_CORRECT_GROUP' ||
             part.questionType === 'FILL_IN_BLANK_GROUP' ||
             part.questionType === 'MATCHING_WITH_LINES_GROUP' ||
+            part.questionType === 'MATCH_WORD_TO_PICTURE_GROUP' ||
             part.questionType === 'WORD_ORDER_AND_MATCH_GROUP' ||
             part.questionType === 'SPONTANEOUS_QA_GROUP' ||
             part.questionType === 'ANSWER_THE_QUESTION_GROUP' ||

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, ReadingPassageQuestion, LabelThePictureLabel, 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' | 'READ_PASSAGE_AND_ANSWER_QUESTIONS' | 'LABEL_THE_PICTURE' | 'FILL_MISSING_WORDS_IN_GRID' | 'IMAGE_OBJECT_MATCHING' | 'ANSWER_THE_QUESTION' | 'ANSWER_THE_QUESTION_GROUP' | 'TRUE_FALSE' | 'TRUE_FALSE_GROUP' | 'TRUE_FALSE_CORRECT_GROUP' | 'FILL_IN_BLANK_GROUP' | 'MATCHING_WITH_LINES_GROUP' | 'CROSS_OUT_WORD_GROUP' | 'WORD_ORDERING' | 'WORD_ORDERING_GROUP' | 'WORD_FILL_PARAGRAPH' | 'MATCH_BY_WRITING_ANSWER' | 'MATCH_WORD_TO_PICTURE' | 'WRITE_SENTENCES' | 'WORD_FILL_STRUCTURED_FORM' | 'CROSSWORD_PUZZLE' | 'FIND_WORDS_IN_MATRIX' | 'SORT_WORDS_INTO_CATEGORIES' | 'CHOOSE_THEN_ANSWER_GROUP' | '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' | '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' | 'READ_PASSAGE_AND_ANSWER_QUESTIONS' | 'LABEL_THE_PICTURE' | 'FILL_MISSING_WORDS_IN_GRID' | 'IMAGE_OBJECT_MATCHING' | 'ANSWER_THE_QUESTION' | 'ANSWER_THE_QUESTION_GROUP' | 'TRUE_FALSE' | 'TRUE_FALSE_GROUP' | 'TRUE_FALSE_CORRECT_GROUP' | 'FILL_IN_BLANK_GROUP' | 'MATCHING_WITH_LINES_GROUP' | 'CROSS_OUT_WORD_GROUP' | 'WORD_ORDERING' | 'WORD_ORDERING_GROUP' | 'WORD_FILL_PARAGRAPH' | 'MATCH_BY_WRITING_ANSWER' | 'MATCH_WORD_TO_PICTURE' | 'MATCH_WORD_TO_PICTURE_GROUP' | 'WRITE_SENTENCES' | 'WORD_FILL_STRUCTURED_FORM' | 'CROSSWORD_PUZZLE' | 'FIND_WORDS_IN_MATRIX' | 'SORT_WORDS_INTO_CATEGORIES' | 'CHOOSE_THEN_ANSWER_GROUP' | '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' | 'SPEAKING_CUE_CARD';
 export interface ApiQuestion {
     id: string;
     content: any;
@@ -372,6 +372,25 @@ export declare function transformMatchWordToPicture(questions: ApiQuestion[]): {
     wordBank: string[];
     instruction: string;
 };
+export interface MatchWordToPictureGroupQuestionItem {
+    id: string;
+    questionNumber: number;
+    imageUrl?: string | string[];
+    correctAnswer: string;
+    isExample: boolean;
+    points: number;
+}
+export interface MatchWordToPictureGroupPartData {
+    questions: MatchWordToPictureGroupQuestionItem[];
+    wordBank: string[];
+    title?: string;
+    instruction: string;
+    passage?: string;
+    audioUrl?: string;
+    imageUrl?: string | string[];
+    explanation?: string;
+}
+export declare function transformMatchWordToPictureGroup(questions: ApiQuestion[]): MatchWordToPictureGroupPartData;
 export declare function transformWriteSentences(questions: ApiQuestion[]): {
     questions: Array<{
         id: string;
@@ -574,7 +593,8 @@ export declare function transformChooseThenAnswerGroup(questions: ApiQuestion[])
 export interface MatchingWithLinesGroupQuestionItem {
     id: string;
     questionNumber: number;
-    imageUrl: string;
+    imageUrl?: string;
+    text?: string;
     correctRightId: string;
     isExample: boolean;
     points: number;
@@ -583,10 +603,14 @@ export interface MatchingWithLinesGroupPartData {
     questions: MatchingWithLinesGroupQuestionItem[];
     rightItems: Array<{
         id: string;
-        text: string;
+        text?: string;
+        imageUrl?: string;
     }>;
     title?: string;
     instruction: string;
+    passage?: string;
+    audioUrl?: string | string[];
+    imageUrl?: string | string[];
     explanation?: string;
 }
 export declare function transformMatchingWithLinesGroup(questions: ApiQuestion[]): MatchingWithLinesGroupPartData;

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

@@ -1045,6 +1045,39 @@ export function transformMatchWordToPicture(questions) {
         instruction,
     };
 }
+export function transformMatchWordToPictureGroup(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 title = typeof content.meta?.title === 'string' ? content.meta.title.trim() : '';
+    const passage = typeof content.meta?.passage === 'string' ? content.meta.passage.trim() : '';
+    const audioUrl = typeof content.meta?.audioUrl === 'string' ? content.meta.audioUrl.trim() : '';
+    return {
+        questions: items.map((item, index) => {
+            const isExample = item.isExample === true;
+            const fromItem = typeof item.correctAnswer?.answer === 'string' ? item.correctAnswer.answer : '';
+            const fromParent = typeof parentCorrect[index] === 'string' ? parentCorrect[index] : '';
+            return {
+                id: `${parent?.id || 'q'}-item-${index}`,
+                questionNumber: item.questionNumber || index + 1,
+                imageUrl: item.content?.imageUrl,
+                correctAnswer: fromItem || fromParent,
+                isExample,
+                points: isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+            };
+        }),
+        wordBank: Array.isArray(content.meta?.wordBank) ? content.meta.wordBank : [],
+        ...(title ? { title } : {}),
+        instruction: content.meta?.instruction || 'Look and complete.',
+        ...(passage ? { passage } : {}),
+        ...(audioUrl ? { audioUrl } : {}),
+        ...(content.meta?.imageUrl ? { imageUrl: content.meta.imageUrl } : {}),
+        explanation: parent?.explanation,
+    };
+}
 export function transformWriteSentences(questions) {
     const firstQuestion = questions[0];
     const content = firstQuestion?.content;
@@ -1388,18 +1421,25 @@ export function transformMatchingWithLinesGroup(questions) {
     const rightItems = Array.isArray(content.rightItems)
         ? content.rightItems.map((item, index) => ({
             id: typeof item?.id === 'string' ? item.id : `r${index + 1}`,
-            text: typeof item?.text === 'string' ? item.text : '',
+            ...(typeof item?.text === 'string' && item.text.trim() ? { text: item.text } : {}),
+            ...(typeof item?.imageUrl === 'string' && item.imageUrl.trim() ? { imageUrl: item.imageUrl } : {}),
         }))
         : [];
+    const passage = content.meta?.passage?.trim() || '';
+    const audioUrl = content.meta?.audioUrl;
+    const imageUrl = content.meta?.imageUrl;
     return {
         questions: items.map((item, index) => {
             const isExample = item.isExample === true;
             const fromItem = typeof item.correctAnswer?.answer === 'string' ? item.correctAnswer.answer : '';
             const fromParent = typeof parentCorrect[index] === 'string' ? parentCorrect[index] : '';
+            const itemImage = item.content?.imageUrl?.trim() || '';
+            const itemText = item.content?.text?.trim() || '';
             return {
                 id: `${parent?.id || 'q'}-item-${index}`,
                 questionNumber: item.questionNumber || index + 1,
-                imageUrl: item.content?.imageUrl || '',
+                ...(itemImage ? { imageUrl: itemImage } : {}),
+                ...(itemText ? { text: itemText } : {}),
                 correctRightId: fromItem || fromParent,
                 isExample,
                 points: isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
@@ -1408,6 +1448,9 @@ export function transformMatchingWithLinesGroup(questions) {
         rightItems,
         title: content.meta?.title || '',
         instruction: content.meta?.instruction || 'Look and match.',
+        ...(passage ? { passage } : {}),
+        ...(audioUrl ? { audioUrl } : {}),
+        ...(imageUrl ? { imageUrl } : {}),
         explanation: parent?.explanation,
     };
 }

package/dist/components/questions/_shared/components/compact/KidQuestionCard.d.ts

@@ -1,7 +1,10 @@
 import type { ReactNode } from 'react';
-export declare function KidQuestionCard({ icon, title, points, isExample, review, headerExtra, children, className, contentClassName, }: {
+export declare function KidQuestionCard({ icon, hideIcon, title, titleClassName, points, isExample, review, headerExtra, children, className, contentClassName, }: {
     icon?: ReactNode;
-    title: string;
+    hideIcon?: boolean;
+    title: ReactNode;
+    /** Defaults to `truncate`; pass e.g. `whitespace-normal` to let long titles wrap. */
+    titleClassName?: string;
     points?: number;
     isExample?: boolean;
     review?: 'correct' | 'wrong' | null;

package/dist/components/questions/_shared/components/compact/KidQuestionCard.js

@@ -2,6 +2,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, CircleHelp, Star, X } from 'lucide-react';
 import { cn } from '../../../../../shared/lib/utils';
-export function KidQuestionCard({ icon, title, points, isExample = false, review, headerExtra, children, className, contentClassName, }) {
-    return (_jsxs("div", { className: cn('overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm', className), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-3 py-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: icon ?? _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsx("span", { className: "truncate text-sm font-medium text-gray-700", children: title }), isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "C\u00E2u v\u00ED d\u1EE5"] }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [headerExtra, typeof points === 'number' && (_jsxs("span", { className: "text-xs text-gray-500", children: [points, " \u0111i\u1EC3m"] })), review === 'correct' && (_jsxs("div", { className: "flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-700", children: [_jsx(Check, { className: "h-3 w-3" }), "\u0110\u00FAng"] })), review === 'wrong' && (_jsxs("div", { className: "flex items-center gap-1 rounded-full bg-red-100 px-2 py-0.5 text-xs font-semibold text-red-700", children: [_jsx(X, { className: "h-3 w-3" }), "Sai"] }))] })] }), _jsx("div", { className: cn('space-y-3 p-3', contentClassName), children: children })] }));
+export function KidQuestionCard({ icon, hideIcon = false, title, titleClassName, points, isExample = false, review, headerExtra, children, className, contentClassName, }) {
+    return (_jsxs("div", { className: cn('overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm', className), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-3 py-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [!hideIcon && (_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: icon ?? _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) })), _jsx("span", { className: cn('text-sm font-medium text-gray-700', titleClassName ?? 'truncate'), children: title }), isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "C\u00E2u v\u00ED d\u1EE5"] }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [headerExtra, typeof points === 'number' && (_jsxs("span", { className: "text-xs text-gray-500", children: [points, " \u0111i\u1EC3m"] })), review === 'correct' && (_jsxs("div", { className: "flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-700", children: [_jsx(Check, { className: "h-3 w-3" }), "\u0110\u00FAng"] })), review === 'wrong' && (_jsxs("div", { className: "flex items-center gap-1 rounded-full bg-red-100 px-2 py-0.5 text-xs font-semibold text-red-700", children: [_jsx(X, { className: "h-3 w-3" }), "Sai"] }))] })] }), _jsx("div", { className: cn('space-y-3 p-3', contentClassName), children: children })] }));
 }

package/dist/components/questions/_shared/types/match-word-to-picture-group.type.d.ts

@@ -3,6 +3,7 @@ export declare const MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION = "Look and
 export declare const MATCH_WORD_TO_PICTURE_ITEM_TYPE: "MATCH_WORD_TO_PICTURE";
 export declare function toMatchWordToPictureImageUrls(value?: unknown): string[];
 export declare function fromMatchWordToPictureImageUrls(value?: unknown): string | string[] | undefined;
+export declare function toMatchWordToPictureStorageKey(value: string): string;
 export interface MatchWordToPictureGroupItemData {
     imageUrl?: string | string[];
     correctAnswer: string;

package/dist/components/questions/_shared/types/match-word-to-picture-group.type.js

@@ -19,3 +19,17 @@ export function fromMatchWordToPictureImageUrls(value) {
     }
     return urls.length === 1 ? urls[0] : urls;
 }
+export function toMatchWordToPictureStorageKey(value) {
+    const trimmed = value.trim();
+    if (!trimmed)
+        return '';
+    if (trimmed.startsWith('http://')
+        || trimmed.startsWith('https://')
+        || trimmed.startsWith('blob:')
+        || trimmed.startsWith('data:')
+        || trimmed.startsWith('/images/')
+        || trimmed.startsWith('/_next/')) {
+        return trimmed;
+    }
+    return trimmed.replace(/^\/+/, '');
+}

package/dist/components/questions/_shared/types/matching-with-lines-group.type.d.ts

@@ -18,9 +18,9 @@ export interface MatchingWithLinesGroupData {
     instruction: string;
     /** Shared reading passage (HTML) above the matching board. */
     passage?: string;
-    audioUrl?: string;
+    audioUrl?: string | string[];
     /** Shared cover / portrait image (not a left/right match item). */
-    imageUrl?: string;
+    imageUrl?: string | string[];
     rightItems: MatchingWithLinesRightItem[];
     items: MatchingWithLinesGroupItemData[];
     explanation?: string;

package/dist/components/questions/components/QuestionSearchDropdown.js

@@ -26,6 +26,7 @@ const IMAGE_BASED_TYPES = [
     'IMAGE_OBJECT_MATCHING',
     'FILL_IN_BLANK',
     'MATCH_WORD_TO_PICTURE',
+    'MATCH_WORD_TO_PICTURE_GROUP',
     'MATCHING_WITH_LINES_GROUP',
 ];
 // Passage-based question types

package/dist/components/questions/types/match-word-to-picture-group/MatchWordToPictureGroupClient.js

@@ -1,48 +1,34 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BookOpen, Lightbulb, Volume2 } from 'lucide-react';
+import { BookOpen, Check, ChevronDown, Lightbulb, Volume2, X } from 'lucide-react';
 import { cn } from '../../../../shared/lib/utils';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-import { toMatchWordToPictureImageUrls } from '../../_shared/types/match-word-to-picture-group.type';
-import { KidChoiceRow, KidInstruction, KidPrompt, KidQuestionCard, optionLetter, } from '../../_shared/components/compact';
+import { toMatchWordToPictureImageUrls, toMatchWordToPictureStorageKey, } from '../../_shared/types/match-word-to-picture-group.type';
+import { KidInstruction, KidPrompt, KidQuestionCard, } from '../../_shared/components/compact';
 function normalizeWord(value) {
     return value.trim().toLowerCase();
 }
-function isPlayableAudioUrl(value) {
+function isPlayableUrl(value) {
     return (value.startsWith('http://')
         || value.startsWith('https://')
         || value.startsWith('blob:')
         || value.startsWith('data:'));
 }
-function toPresignKey(value) {
-    const trimmed = value.trim();
-    if (isPlayableAudioUrl(trimmed)) {
-        return trimmed;
-    }
-    return trimmed.replace(/^\/+/, '');
-}
 function ClientAudio({ url }) {
-    const fileKey = toPresignKey(url);
+    const fileKey = toMatchWordToPictureStorageKey(url);
     const { previewUrl, isLoading } = usePresignedFileUrl(fileKey);
-    const src = previewUrl || (isPlayableAudioUrl(fileKey) ? fileKey : '');
+    const src = previewUrl || (isPlayableUrl(fileKey) ? fileKey : '');
     if (isLoading) {
         return (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2", children: [_jsx(Volume2, { className: "h-4 w-4 text-slate-500" }), _jsx("div", { className: "h-8 w-full max-w-xs animate-pulse rounded-md bg-slate-100" })] }));
     }
-    if (!src) {
+    if (!src)
         return null;
-    }
-    return (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2", children: [_jsx(Volume2, { className: "h-4 w-4 text-slate-500" }), _jsx("audio", { controls: true, src: src, className: "h-8 max-w-full", preload: "metadata" })] }));
-}
-function isDisplayableImageUrl(value) {
-    return (value.startsWith('http://')
-        || value.startsWith('https://')
-        || value.startsWith('blob:')
-        || value.startsWith('data:'));
+    return (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2", children: [_jsx(Volume2, { className: "h-4 w-4 text-slate-500" }), _jsx("audio", { controls: true, src: src, className: "h-8 max-w-full", preload: "metadata", children: _jsx("track", { kind: "captions" }) })] }));
 }
 function ClientImageItem({ url, alt, large = false, }) {
-    const fileKey = toPresignKey(url);
+    const fileKey = toMatchWordToPictureStorageKey(url);
     const { previewUrl, isLoading } = usePresignedFileUrl(fileKey);
-    const src = previewUrl || (isDisplayableImageUrl(fileKey) ? fileKey : '');
+    const src = previewUrl || (isPlayableUrl(fileKey) ? fileKey : '');
     if (!url) {
         return (_jsx("div", { className: "flex h-28 w-28 items-center justify-center rounded-lg border border-dashed border-gray-300 bg-gray-50 text-xs text-gray-400", children: "Ch\u01B0a c\u00F3 \u1EA3nh" }));
     }
@@ -51,9 +37,16 @@ function ClientImageItem({ url, alt, large = false, }) {
     }
     return (_jsx("div", { className: cn('relative flex-shrink-0 overflow-hidden rounded-lg border border-gray-200 bg-gray-50', large ? 'max-h-80 w-full max-w-xl' : 'h-28 w-28'), children: isLoading ? (_jsx("div", { className: "flex h-28 w-full items-center justify-center", children: _jsx("div", { className: "h-6 w-6 animate-spin rounded-full border-2 border-gray-200 border-t-violet-500" }) })) : (_jsx("img", { src: src, alt: alt || 'Picture', className: cn('object-contain', large ? 'mx-auto max-h-80 w-auto' : 'h-full w-full') })) }));
 }
+function WordDropdown({ value, wordBank, usedWords, disabled, onChange, }) {
+    return (_jsxs("div", { className: "group relative min-w-[160px] sm:min-w-[210px]", children: [_jsxs("select", { value: value, onChange: (event) => onChange(event.target.value), disabled: disabled, className: "h-12 w-full appearance-none rounded-2xl border border-slate-200 bg-white px-4 pr-11 text-sm font-semibold text-slate-700 shadow-sm outline-none transition-all hover:border-violet-300 focus:border-violet-500 focus:ring-4 focus:ring-violet-100/50 disabled:cursor-not-allowed disabled:opacity-60", "aria-label": "Ch\u1ECDn t\u1EEB ph\u00F9 h\u1EE3p", children: [_jsx("option", { value: "", children: "-- Ch\u1ECDn t\u1EEB --" }), wordBank.map((word, index) => {
+                        const isUsedByOther = usedWords.has(normalizeWord(word)) && normalizeWord(word) !== normalizeWord(value);
+                        return (_jsx("option", { value: word, disabled: isUsedByOther, children: word }, `${word}-${index}`));
+                    })] }), _jsx("div", { className: "pointer-events-none absolute right-2.5 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full bg-slate-100 text-slate-500 group-focus-within:bg-violet-100 group-focus-within:text-violet-600", children: _jsx(ChevronDown, { className: "h-3.5 w-3.5", strokeWidth: 2.5 }) })] }));
+}
 export function MatchWordToPictureGroupClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, }) {
     const items = questionData.items || [];
     const wordBank = questionData.wordBank || [];
+    const coverUrls = toMatchWordToPictureImageUrls(questionData.imageUrl);
     const handleSelect = (itemIndex, value) => {
         const item = items[itemIndex];
         if (isReviewMode || item?.isExample || !onAnswerChange) {
@@ -70,7 +63,7 @@ export function MatchWordToPictureGroupClient({ questionData, isReviewMode = fal
             usedWords.add(normalizeWord(value));
         }
     });
-    return (_jsxs("div", { className: "space-y-4", children: [questionData.title ? _jsx(KidPrompt, { children: questionData.title }) : null, _jsx(KidInstruction, { children: questionData.instruction }), questionData.audioUrl ? _jsx(ClientAudio, { url: questionData.audioUrl }) : null, toMatchWordToPictureImageUrls(questionData.imageUrl).length > 0 ? (_jsx("div", { className: "flex flex-wrap justify-center gap-3 rounded-lg border border-slate-100 bg-slate-50 p-3", children: toMatchWordToPictureImageUrls(questionData.imageUrl).map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh bài (${imageIndex + 1})`, large: true }, `mwtp-cover-${imageIndex}`))) })) : null, 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 } })] })) : null, wordBank.length > 0 && (_jsxs("div", { className: "rounded-xl border border-blue-100 bg-blue-50/60 p-3", children: [_jsx("p", { className: "mb-2 text-xs font-semibold uppercase tracking-wider text-blue-700", children: "Word bank" }), _jsx("div", { className: "flex flex-wrap gap-2", children: wordBank.map((word, index) => {
+    return (_jsxs("div", { className: "space-y-4", children: [questionData.title ? _jsx(KidPrompt, { children: questionData.title }) : null, _jsx(KidInstruction, { children: questionData.instruction }), questionData.audioUrl ? _jsx(ClientAudio, { url: questionData.audioUrl }) : null, coverUrls.length > 0 ? (_jsx("div", { className: "flex flex-wrap justify-center gap-3 rounded-lg border border-slate-100 bg-slate-50 p-3", children: coverUrls.map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh bài (${imageIndex + 1})`, large: true }, `mwtp-cover-${imageIndex}`))) })) : null, 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 } })] })) : null, wordBank.length > 0 && (_jsxs("div", { className: "rounded-xl border border-blue-100 bg-blue-50/60 p-3", children: [_jsx("p", { className: "mb-2 text-xs font-semibold uppercase tracking-wider text-blue-700", children: "Word bank" }), _jsx("div", { className: "flex flex-wrap gap-2", children: wordBank.map((word, index) => {
                             const isUsed = usedWords.has(normalizeWord(word));
                             return (_jsx("span", { className: cn('rounded-full border px-3 py-1 text-sm font-semibold', isUsed
                                     ? 'border-blue-500 bg-blue-50 text-blue-800 ring-2 ring-blue-100'
@@ -82,13 +75,9 @@ export function MatchWordToPictureGroupClient({ questionData, isReviewMode = fal
                 const canSelect = !isReviewMode && !item.isExample && Boolean(onAnswerChange);
                 const isCorrect = normalizeWord(selectedWord) === normalizeWord(item.correctAnswer) &&
                     Boolean(item.correctAnswer);
-                return (_jsx(KidQuestionCard, { title: `Câu ${item.questionNumber || itemIndex + 1}`, points: item.points || 0, isExample: item.isExample, review: isReviewMode && !item.isExample ? (isCorrect ? 'correct' : 'wrong') : null, children: _jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start", children: [toMatchWordToPictureImageUrls(item.imageUrl).length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-2", children: toMatchWordToPictureImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1}${imageIndex > 0 ? ` (${imageIndex + 1})` : ''}` }, `${item.questionNumber}-${imageIndex}`))) })) : null, _jsxs("div", { className: "min-w-0 flex-1 space-y-1.5", children: [_jsx("p", { className: "text-sm font-semibold text-gray-800", children: "Ch\u1ECDn t\u1EEB ph\u00F9 h\u1EE3p" }), item.isExample ? (_jsx("span", { className: "text-sm italic text-gray-800 underline decoration-gray-400", children: item.correctAnswer })) : (wordBank.map((word, wordIndex) => {
-                                        const isSelected = normalizeWord(word) === normalizeWord(selectedWord);
-                                        const isUsedByOther = usedWords.has(normalizeWord(word)) && !isSelected;
-                                        const isWordCorrect = normalizeWord(word) === normalizeWord(item.correctAnswer);
-                                        return (_jsx(KidChoiceRow, { letter: optionLetter(wordIndex), selected: isSelected, isReviewMode: isReviewMode, isCorrect: isReviewMode && isWordCorrect, disabled: !canSelect || isUsedByOther, onClick: canSelect && !isUsedByOther
-                                                ? () => handleSelect(itemIndex, isSelected ? '' : word)
-                                                : undefined, children: word }, `${word}-${wordIndex}`));
-                                    })), isReviewMode && !item.isExample && !isCorrect && (_jsxs("p", { className: "text-sm text-green-700", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", _jsx("strong", { children: item.correctAnswer || '—' })] }))] })] }) }, `${item.questionNumber}-${itemIndex}`));
+                const itemImages = toMatchWordToPictureImageUrls(item.imageUrl);
+                return (_jsx(KidQuestionCard, { title: `Câu ${item.questionNumber || itemIndex + 1}`, points: item.points || 0, isExample: item.isExample, review: isReviewMode && !item.isExample ? (isCorrect ? 'correct' : 'wrong') : null, children: _jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start", children: [itemImages.length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-2", children: itemImages.map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1}${imageIndex > 0 ? ` (${imageIndex + 1})` : ''}` }, `${item.questionNumber}-${imageIndex}`))) })) : null, _jsxs("div", { className: "min-w-0 flex-1 space-y-1.5", children: [_jsx("p", { className: "text-sm font-semibold text-gray-800", children: "Ch\u1ECDn t\u1EEB ph\u00F9 h\u1EE3p" }), item.isExample ? (_jsx("span", { className: "text-sm italic text-gray-800 underline decoration-gray-400", children: item.correctAnswer })) : (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(WordDropdown, { value: selectedWord, wordBank: wordBank, usedWords: usedWords, disabled: !canSelect, onChange: (value) => handleSelect(itemIndex, value) }), isReviewMode && (isCorrect
+                                                ? _jsx(Check, { className: "h-5 w-5 text-emerald-600" })
+                                                : _jsx(X, { className: "h-5 w-5 text-red-500" }))] })), isReviewMode && !item.isExample && !isCorrect && (_jsxs("p", { className: "text-sm text-green-700", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", _jsx("strong", { children: item.correctAnswer || '—' })] }))] })] }) }, `${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/match-word-to-picture-group/MatchWordToPictureGroupCreator.js

@@ -32,7 +32,7 @@ export function MatchWordToPictureGroupCreator({ initialData, onChange, external
     const [title, setTitle] = useState(initialData?.title || '');
     const [instruction, setInstruction] = useState(initialData?.instruction || seeded.instruction || MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION);
     const [passage, setPassage] = useState(initialData?.passage || seeded.passage || '');
-    const [audioUrl] = useState(initialData?.audioUrl || seeded.audioUrl || '');
+    const [audioUrl, setAudioUrl] = useState(initialData?.audioUrl || seeded.audioUrl || '');
     const [imageUrl, setImageUrl] = useState(toMatchWordToPictureImageUrls(initialData?.imageUrl)[0] || '');
     const [wordBank, setWordBank] = useState(initialData?.wordBank?.length ? initialData.wordBank : seeded.wordBank);
     const [items, setItems] = useState(() => (initialData?.items?.length ? initialData.items : seeded.items));
@@ -76,12 +76,25 @@ export function MatchWordToPictureGroupCreator({ initialData, onChange, external
             nextErrors.push('Word bank cần ít nhất một từ.');
         if (items.length < 1)
             nextErrors.push('Cần ít nhất một câu hỏi.');
+        const wordSet = new Set(words.map((word) => word.trim().toLowerCase()));
+        const seenAnswers = new Set();
         items.forEach((item, index) => {
             if (!imageUrl.trim() && toMatchWordToPictureImageUrls(item.imageUrl).length === 0) {
                 nextErrors.push(`Câu ${index + 1}: cần ảnh (hoặc ảnh chung).`);
             }
-            if (!item.correctAnswer.trim())
+            const answer = item.correctAnswer.trim();
+            if (!answer) {
                 nextErrors.push(`Câu ${index + 1}: cần chọn từ đúng.`);
+                return;
+            }
+            const normalized = answer.toLowerCase();
+            if (!wordSet.has(normalized)) {
+                nextErrors.push(`Câu ${index + 1}: đáp án không có trong word bank.`);
+            }
+            if (seenAnswers.has(normalized)) {
+                nextErrors.push(`Câu ${index + 1}: từ "${answer}" đã được dùng (mỗi từ chỉ một lần).`);
+            }
+            seenAnswers.add(normalized);
         });
         setErrors(nextErrors);
         return nextErrors.length === 0;
@@ -102,7 +115,7 @@ export function MatchWordToPictureGroupCreator({ initialData, onChange, external
     if (isClientMode) {
         return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _jsx(MatchWordToPictureGroupClient, { questionData: currentPayload })] }));
     }
-    return (_jsxs("div", { className: "space-y-3", children: [displayErrors.length > 0 && (_jsx("div", { className: "rounded-md border border-red-200 bg-red-50 p-2 text-xs text-red-700", children: _jsx("ul", { className: "list-disc space-y-1 pl-4", children: displayErrors.map((err, i) => _jsx("li", { children: err }, i)) }) })), _jsxs(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(ImageIcon, { className: "h-3.5 w-3.5" }), title: "N\u1ED1i t\u1EEB v\u1EDBi tranh (Nh\u00F3m)", preview: { onClick: () => setIsClientMode(true) } }), children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "mwtp-group-title", className: "text-sm font-semibold text-gray-800", children: "Ti\u00EAu \u0111\u1EC1 (optional)" }), _jsx(Input, { id: "mwtp-group-title", className: "h-10 border-gray-200 bg-white", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "VOCABULARY" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "mwtp-group-instruction", className: "text-sm font-semibold text-gray-800", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "mwtp-group-instruction", className: "h-10 border-gray-200 bg-white", value: instruction, onChange: (e) => setInstruction(e.target.value) })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-sm font-semibold text-gray-800", children: "N\u1ED9i dung b\u00E0i \u0111\u1ECDc (Passage)" }), _jsx(RichTextEditor, { value: passage, onChange: setPassage, minHeightClassName: "min-h-[160px]" })] }), _jsx(MatchWordToPictureGroupImageField, { id: "mwtp-group-shared-image", label: "\u1EA2nh chung (optional \u2014 1 b\u1EE9c tranh nhi\u1EC1u \u00F4 s\u1ED1)", value: imageUrl, onChange: setImageUrl }), wordBank.map((word, index) => (_jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { value: word, onChange: (e) => setWordBank((prev) => prev.map((item, i) => (i === index ? e.target.value : item))), placeholder: `Từ ${index + 1}`, className: "h-10 border-gray-200 bg-white" }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => setWordBank((prev) => prev.filter((_, i) => i !== index)), className: "h-7 w-7", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }, index))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setWordBank((prev) => [...prev, '']), className: "h-8 gap-1.5 px-2.5 text-xs", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm t\u1EEB"] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-sm", children: [_jsx(CardHeader, { className: "px-3 py-2", children: _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs(CardTitle, { className: "text-sm font-semibold text-gray-800", children: ["Tranh (", items.length, ")"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setItems((prev) => [...prev, createEmptyMatchWordToPictureGroupItem(prev.length + 1)]), className: "h-8 gap-1.5 px-2.5 text-xs", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm tranh"] })] }) }), _jsxs(CardContent, { className: "space-y-2.5 px-3 pb-3", children: [items.map((item, index) => (_jsxs("div", { className: "space-y-2.5 rounded-md border border-gray-200 bg-white px-3 py-2.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("span", { className: "text-sm font-medium", children: ["C\u00E2u ", item.questionNumber || index + 1] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: item.isExample || false, onCheckedChange: (checked) => updateItem(index, { isExample: checked, points: checked ? 0 : 1 }) }), _jsxs(Label, { className: "flex items-center gap-1 text-xs", children: [_jsx(Star, { className: "h-3 w-3 text-amber-500" }), "Example"] }), !item.isExample && (_jsx("div", { className: "w-24", children: _jsx(PointsInput, { value: item.points, allowZero: true, onChange: (event) => updateItem(index, {
+    return (_jsxs("div", { className: "space-y-3", children: [displayErrors.length > 0 && (_jsx("div", { className: "rounded-md border border-red-200 bg-red-50 p-2 text-xs text-red-700", children: _jsx("ul", { className: "list-disc space-y-1 pl-4", children: displayErrors.map((err, i) => _jsx("li", { children: err }, i)) }) })), _jsxs(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(ImageIcon, { className: "h-3.5 w-3.5" }), title: "N\u1ED1i t\u1EEB v\u1EDBi tranh (Nh\u00F3m)", preview: { onClick: () => setIsClientMode(true) } }), children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "mwtp-group-title", className: "text-sm font-semibold text-gray-800", children: "Ti\u00EAu \u0111\u1EC1 (optional)" }), _jsx(Input, { id: "mwtp-group-title", className: "h-10 border-gray-200 bg-white", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "VOCABULARY" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "mwtp-group-instruction", className: "text-sm font-semibold text-gray-800", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "mwtp-group-instruction", className: "h-10 border-gray-200 bg-white", value: instruction, onChange: (e) => setInstruction(e.target.value) })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-sm font-semibold text-gray-800", children: "N\u1ED9i dung b\u00E0i \u0111\u1ECDc (Passage)" }), _jsx(RichTextEditor, { value: passage, onChange: setPassage, minHeightClassName: "min-h-[160px]" })] }), _jsxs("div", { className: "grid gap-2.5 md:grid-cols-2", children: [_jsx(MatchWordToPictureGroupImageField, { id: "mwtp-group-audio", label: "Audio chung (optional)", accept: "audio/*", value: audioUrl, onChange: setAudioUrl }), _jsx(MatchWordToPictureGroupImageField, { id: "mwtp-group-shared-image", label: "\u1EA2nh chung (optional)", value: imageUrl, onChange: setImageUrl })] }), wordBank.map((word, index) => (_jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { value: word, onChange: (e) => setWordBank((prev) => prev.map((item, i) => (i === index ? e.target.value : item))), placeholder: `Từ ${index + 1}`, className: "h-10 border-gray-200 bg-white" }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => setWordBank((prev) => prev.filter((_, i) => i !== index)), className: "h-7 w-7", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }, index))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setWordBank((prev) => [...prev, '']), className: "h-8 gap-1.5 px-2.5 text-xs", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm t\u1EEB"] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-sm", children: [_jsx(CardHeader, { className: "px-3 py-2", children: _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs(CardTitle, { className: "text-sm font-semibold text-gray-800", children: ["Tranh (", items.length, ")"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setItems((prev) => [...prev, createEmptyMatchWordToPictureGroupItem(prev.length + 1)]), className: "h-8 gap-1.5 px-2.5 text-xs", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm tranh"] })] }) }), _jsxs(CardContent, { className: "space-y-2.5 px-3 pb-3", children: [items.map((item, index) => (_jsxs("div", { className: "space-y-2.5 rounded-md border border-gray-200 bg-white px-3 py-2.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("span", { className: "text-sm font-medium", children: ["C\u00E2u ", item.questionNumber || index + 1] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: item.isExample || false, onCheckedChange: (checked) => updateItem(index, { isExample: checked, points: checked ? 0 : 1 }) }), _jsxs(Label, { className: "flex items-center gap-1 text-xs", children: [_jsx(Star, { className: "h-3 w-3 text-amber-500" }), "Example"] }), !item.isExample && (_jsx("div", { className: "w-24", children: _jsx(PointsInput, { value: item.points, allowZero: true, onChange: (event) => updateItem(index, {
                                                                 points: parsePointsValue(event.target.value, true),
                                                             }) }) })), items.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => setItems((prev) => prev.filter((_, i) => i !== index).map((entry, i) => ({ ...entry, questionNumber: i + 1 }))), className: "h-7 w-7 text-red-500 hover:bg-red-50", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] })] }), _jsx(MatchWordToPictureGroupImageField, { id: `mwtp-group-image-${index}`, label: "\u1EA2nh", value: toMatchWordToPictureImageUrls(item.imageUrl)[0] || '', onChange: (url) => updateItem(index, {
                                             imageUrl: fromMatchWordToPictureImageUrls(url),

package/dist/components/questions/types/match-word-to-picture-group/MatchWordToPictureGroupImageField.d.ts

@@ -1,6 +1,7 @@
-export declare function MatchWordToPictureGroupImageField({ id, label, value, onChange, }: {
+export declare function MatchWordToPictureGroupImageField({ id, label, value, onChange, accept, }: {
     id: string;
     label: string;
     value: string;
     onChange: (url: string) => void;
+    accept?: 'image/*' | 'audio/*';
 }): import("react").JSX.Element;

package/dist/components/questions/types/match-word-to-picture-group/MatchWordToPictureGroupImageField.js

@@ -6,11 +6,30 @@ import { FileUpload } from '../../../../components/ui/file-upload';
 import { ImagePreview } from '../../../../components/ui/image-preview';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
 import { Trash2 } from 'lucide-react';
-export function MatchWordToPictureGroupImageField({ id, label, value, onChange, }) {
+import { toMatchWordToPictureStorageKey } from '../../_shared/types/match-word-to-picture-group.type';
+function isDisplayableUrl(value) {
+    return (value.startsWith('http://') ||
+        value.startsWith('https://') ||
+        value.startsWith('blob:') ||
+        value.startsWith('data:'));
+}
+function resolveDisplayUrl(fileUrl, previewOverride, fetchedPreviewUrl) {
+    if (previewOverride)
+        return previewOverride;
+    if (fetchedPreviewUrl)
+        return fetchedPreviewUrl;
+    if (isDisplayableUrl(fileUrl))
+        return fileUrl;
+    return '';
+}
+export function MatchWordToPictureGroupImageField({ id, label, value, onChange, accept = 'image/*', }) {
     const [previewOverride, setPreviewOverride] = useState('');
-    const { previewUrl: fetchedPreviewUrl } = usePresignedFileUrl(value);
-    const displayUrl = previewOverride ||
-        fetchedPreviewUrl ||
-        (value.startsWith('http') || value.startsWith('blob:') ? value : '');
-    return (_jsxs("div", { className: "space-y-2", children: [_jsx(FileUpload, { id: id, label: label, accept: "image/*", value: value, onChange: onChange, onPresignedUrlChange: setPreviewOverride, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }), value && (_jsxs("div", { className: "flex items-center gap-2", children: [displayUrl && _jsx(ImagePreview, { src: displayUrl, alt: label, className: "h-20 w-20" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onChange(''), children: _jsx(Trash2, { className: "h-4 w-4 text-red-500" }) })] }))] }));
+    const storageKey = toMatchWordToPictureStorageKey(value);
+    const { previewUrl: fetchedPreviewUrl, isLoading } = usePresignedFileUrl(storageKey);
+    const displayUrl = resolveDisplayUrl(value, previewOverride, fetchedPreviewUrl);
+    const isImage = accept === 'image/*';
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(FileUpload, { id: id, label: label, accept: accept, value: value, onChange: onChange, onPresignedUrlChange: setPreviewOverride, maxSize: isImage ? 5 : 20, placeholder: isImage ? 'Upload ảnh hoặc paste URL' : 'Upload audio hoặc paste URL', autoUpload: true, prefix: "questions" }), value && isImage && (_jsxs("div", { className: "flex items-start gap-2", children: [isLoading && !displayUrl ? (_jsx("div", { className: "h-20 w-20 animate-pulse rounded-md bg-slate-100" })) : (_jsx(ImagePreview, { src: displayUrl || value, alt: label, className: "h-20 w-20 rounded-md object-contain" })), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
+                            setPreviewOverride('');
+                            onChange('');
+                        }, className: "text-red-500 hover:bg-red-50", children: _jsx(Trash2, { className: "h-4 w-4" }) })] })), value && !isImage && (isLoading && !displayUrl ? (_jsx("div", { className: "h-8 w-48 animate-pulse rounded-md bg-slate-100" })) : (_jsx("audio", { controls: true, src: displayUrl, className: "h-8 max-w-full", children: _jsx("track", { kind: "captions" }) })))] }));
 }

package/dist/components/questions/types/matching-with-lines-group/MatchingWithLinesBoard.js

@@ -104,6 +104,6 @@ export function MatchingWithLinesBoard({ leftItems, rightItems, values, correctV
                             const used = values.includes(item.id);
                             return (_jsxs("button", { type: "button", onClick: () => handleRightClick(item.id), disabled: locked, "aria-label": `Connect right item ${item.text || index + 1}`, className: cn('box-border flex h-auto min-h-14 w-max items-center gap-2 rounded-lg border border-gray-200 bg-white px-2 py-1 text-left shadow-sm', selectedLeft !== null && !locked && 'cursor-pointer hover:border-teal-400', used && 'border-teal-200'), children: [_jsx("span", { ref: (node) => {
                                             rightDotRefs.current[index] = node;
-                                        }, className: cn('h-4 w-4 shrink-0 rounded-full border-2 bg-white', used || selectedLeft !== null ? 'border-teal-600' : 'border-gray-400', selectedLeft !== null && 'bg-teal-100'), "aria-hidden": true }), item.imageUrl ? (_jsx("div", { className: "relative size-11 shrink-0 overflow-hidden rounded-md bg-gray-50", children: _jsx(ResolvedImage, { src: item.imageUrl, alt: item.text || `Match option ${index + 1}`, className: "h-full w-full object-contain" }) })) : (_jsx("span", { className: "whitespace-nowrap text-sm font-medium text-gray-800", children: item.text || '—' }))] }, item.id || `right-${index}`));
+                                        }, className: cn('h-4 w-4 shrink-0 rounded-full border-2 bg-white', used || selectedLeft !== null ? 'border-teal-600' : 'border-gray-400', selectedLeft !== null && 'bg-teal-100'), "aria-hidden": true }), item.imageUrl ? (_jsx("div", { className: "relative size-11 shrink-0 overflow-hidden rounded-md bg-gray-50", children: _jsx(ResolvedImage, { src: item.imageUrl, alt: item.text || `Match option ${index + 1}`, className: "h-full w-full object-contain" }) })) : null, item.text?.trim() ? (_jsx("span", { className: "whitespace-nowrap text-sm font-medium text-gray-800", children: item.text })) : !item.imageUrl ? (_jsx("span", { className: "whitespace-nowrap text-sm font-medium text-gray-800", children: "\u2014" })) : null] }, item.id || `right-${index}`));
                         }) })] })] }));
 }

package/dist/components/questions/types/matching-with-lines-group/MatchingWithLinesGroupClient.js

@@ -1,17 +1,28 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BookOpen, Lightbulb } from 'lucide-react';
+import { BookOpen, Lightbulb, Volume2 } from 'lucide-react';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-import { ResolvedImage } from '../../../../components/common/ResolvedImage';
+import { RichTextHtml } from '../../../../components/shared/RichTextHtml';
 import { MatchingWithLinesBoard } from './MatchingWithLinesBoard';
 import { KidInstruction, KidPrompt, KidQuestionCard } from '../../_shared/components/compact';
+import { toChooseAnswerGroupImageUrls } from '../../_shared/types/choose-the-correct-answer-group.type';
+function ClientImageItem({ url, alt }) {
+    const { previewUrl, isLoading } = usePresignedFileUrl(url);
+    const src = previewUrl ||
+        (typeof url === 'string' && (url.startsWith('http') || url.startsWith('blob:')) ? url : '');
+    if (!src && !isLoading) {
+        return null;
+    }
+    return (_jsx("div", { className: "max-w-sm overflow-hidden rounded-lg border border-gray-200 bg-gray-50", children: isLoading ? (_jsx("div", { className: "flex h-36 w-48 items-center justify-center", children: _jsx("div", { className: "h-6 w-6 animate-spin rounded-full border-2 border-gray-200 border-t-teal-500" }) })) : (_jsx("img", { src: src, alt: alt || 'Image', className: "max-h-56 w-auto object-contain p-2" })) }));
+}
 function ClientAudio({ url }) {
     const { previewUrl, isLoading } = usePresignedFileUrl(url);
     const src = previewUrl ||
         (typeof url === 'string' && (url.startsWith('http') || url.startsWith('blob:')) ? url : '');
-    if (!src && !isLoading)
+    if (!src && !isLoading) {
         return null;
-    return (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50/70 px-4 py-3", children: isLoading ? (_jsx("div", { className: "h-8 w-full animate-pulse rounded bg-indigo-100" })) : (_jsx("audio", { controls: true, src: src, className: "w-full", children: _jsx("track", { kind: "captions" }) })) }));
+    }
+    return (_jsxs("div", { className: "flex items-center gap-3 rounded-xl border border-indigo-100 bg-indigo-50/70 px-4 py-3", children: [_jsx(Volume2, { className: "h-4 w-4 shrink-0 text-indigo-600" }), isLoading ? (_jsx("div", { className: "h-8 flex-1 animate-pulse rounded-md bg-indigo-100" })) : (_jsx("audio", { controls: true, className: "h-9 w-full", src: src, preload: "metadata", children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." }))] }));
 }
 export function MatchingWithLinesGroupClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, onAnswersChange, }) {
     const items = questionData.items || [];
@@ -33,7 +44,7 @@ export function MatchingWithLinesGroupClient({ questionData, isReviewMode = fals
             }
         });
     };
-    return (_jsxs("div", { className: "space-y-4", children: [questionData.title ? _jsx(KidPrompt, { children: questionData.title }) : null, _jsx(KidInstruction, { 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 } })] })) : null, questionData.audioUrl ? _jsx(ClientAudio, { url: questionData.audioUrl }) : null, questionData.imageUrl ? (_jsx("div", { className: "flex justify-center rounded-lg border border-slate-100 bg-slate-50 p-3", children: _jsx(ResolvedImage, { src: questionData.imageUrl, alt: "Match passage image", className: "max-h-44 w-auto rounded-md object-contain" }) })) : null, _jsx(KidQuestionCard, { title: "N\u1ED1i b\u1EB1ng \u0111\u01B0\u1EDDng k\u1EBB", children: _jsx(MatchingWithLinesBoard, { leftItems: items.map((item) => ({
+    return (_jsxs("div", { className: "space-y-4", children: [questionData.title ? _jsx(KidPrompt, { children: questionData.title }) : null, _jsx(KidInstruction, { children: questionData.instruction }), toChooseAnswerGroupImageUrls(questionData.audioUrl).map((url, audioIndex) => (_jsx(ClientAudio, { url: url }, `group-audio-${audioIndex}`))), toChooseAnswerGroupImageUrls(questionData.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toChooseAnswerGroupImageUrls(questionData.imageUrl).map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh nhóm (${imageIndex + 1})` }, `group-image-${imageIndex}`))) })), questionData.passage ? (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-white p-5 shadow-xs", children: [_jsxs("div", { className: "mb-2.5 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-indigo-700", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: "B\u00E0i \u0111\u1ECDc (Reading Passage)" })] }), _jsx("div", { className: "overflow-x-auto", children: _jsx(RichTextHtml, { html: questionData.passage, className: "text-gray-800 leading-relaxed" }) })] })) : null, _jsx(KidQuestionCard, { title: "N\u1ED1i b\u1EB1ng \u0111\u01B0\u1EDDng k\u1EBB", children: _jsx(MatchingWithLinesBoard, { leftItems: items.map((item) => ({
                         imageUrl: item.imageUrl,
                         text: item.text,
                         isExample: item.isExample,

package/dist/components/questions/types/matching-with-lines-group/MatchingWithLinesGroupCreator.js

@@ -4,17 +4,28 @@ 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 { useDebouncedCallback } from '../../../../shared/lib/hooks';
-import { Link2, Plus, Star, Trash2 } from 'lucide-react';
+import { BookOpen, ImageIcon, Link2, Plus, Star, Trash2, Volume2 } from 'lucide-react';
+import { ChooseAnswerGroupAudioUploadItem, ChooseAnswerGroupImageUploadItem, } from '../choose-the-correct-answer-group/ChooseAnswerGroupImageUpload';
+import { fromChooseAnswerGroupImageUrls, toEditableChooseAnswerGroupImageUrls, } from '../../_shared/types/choose-the-correct-answer-group.type';
 import { CompactCreatorHeader, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
 import { RichTextEditor } from '../../../../components/shared/RichTextEditor';
 import { MatchingWithLinesGroupClient } from './MatchingWithLinesGroupClient';
 import { MatchingWithLinesImageField } from './MatchingWithLinesImageField';
 import { createEmptyMatchingPair, nextRightId } from './map-matching-with-lines-group-data';
 import { MATCHING_WITH_LINES_GROUP_DEFAULT_INSTRUCTION } from '../../_shared/types/matching-with-lines-group.type';
+function rightOptionLabel(item) {
+    const text = item.text?.trim();
+    if (text)
+        return `${text} (${item.id})`;
+    if (item.imageUrl?.trim())
+        return `Ảnh (${item.id})`;
+    return item.id;
+}
 function parsePointsValue(raw, allowZero = false) {
     if (raw === '')
         return allowZero ? 0 : 1;
@@ -66,27 +77,36 @@ export function MatchingWithLinesGroupCreator({ initialData, onChange, externalE
     const [rightItems, setRightItems] = useState(() => normalizeRightItems(initialData?.rightItems));
     const [items, setItems] = useState(() => normalizeItems(initialData?.items, normalizeRightItems(initialData?.rightItems)));
     const [passage, setPassage] = useState(initialData?.passage || '');
-    const [audioUrl] = useState(initialData?.audioUrl || '');
-    const [imageUrl, setImageUrl] = useState(initialData?.imageUrl || '');
+    const [imageUrls, setImageUrls] = useState(() => (toEditableChooseAnswerGroupImageUrls(initialData?.imageUrl)));
+    const [audioUrls, setAudioUrls] = useState(() => (toEditableChooseAnswerGroupImageUrls(initialData?.audioUrl)));
     const [explanation, setExplanation] = useState(initialData?.explanation || '');
     const [isClientMode, setIsClientMode] = useState(false);
+    const [isPassageVisible, setIsPassageVisible] = useState(() => {
+        const html = initialData?.passage;
+        return Boolean(html && html !== '<p></p>' && html !== '<p><br></p>' && html.trim());
+    });
     const [errors, setErrors] = useState([]);
     const onChangeRef = useRef(onChange);
     const previousPayloadRef = useRef('');
     useEffect(() => {
         onChangeRef.current = onChange;
     }, [onChange]);
-    const buildPayload = (nextTitle = title, nextInstruction = instruction, nextPassage = passage, nextRightItems = rightItems, nextItems = items, nextImageUrl = imageUrl, nextExplanation = explanation) => ({
-        title: nextTitle,
-        instruction: nextInstruction,
-        ...(nextPassage.trim() ? { passage: nextPassage } : {}),
-        ...(audioUrl ? { audioUrl } : {}),
-        ...(nextImageUrl.trim() ? { imageUrl: nextImageUrl } : {}),
-        rightItems: nextRightItems,
-        items: nextItems,
-        explanation: nextExplanation,
-        points: sumPoints(nextItems),
-    });
+    const buildPayload = (nextTitle = title, nextInstruction = instruction, nextPassage = passage, nextRightItems = rightItems, nextItems = items, nextAudioUrls = audioUrls, nextImageUrls = imageUrls, nextExplanation = explanation) => {
+        const nextAudioUrl = fromChooseAnswerGroupImageUrls(nextAudioUrls);
+        const nextImageUrl = fromChooseAnswerGroupImageUrls(nextImageUrls);
+        const isContentEmpty = (html) => !html || html === '<p></p>' || html === '<p><br></p>' || html.trim() === '';
+        return {
+            title: nextTitle,
+            instruction: nextInstruction,
+            ...(!isContentEmpty(nextPassage) ? { passage: nextPassage.trim() } : {}),
+            ...(nextAudioUrl !== undefined ? { audioUrl: nextAudioUrl } : {}),
+            ...(nextImageUrl !== undefined ? { imageUrl: nextImageUrl } : {}),
+            rightItems: nextRightItems,
+            items: nextItems,
+            explanation: nextExplanation,
+            points: sumPoints(nextItems),
+        };
+    };
     const debouncedOnChange = useDebouncedCallback((payload) => {
         onChangeRef.current?.(payload);
     }, 300);
@@ -98,7 +118,7 @@ export function MatchingWithLinesGroupCreator({ initialData, onChange, externalE
             debouncedOnChange(payload);
             onUnsavedChangesChange?.(true);
         }
-    }, [title, instruction, passage, audioUrl, imageUrl, rightItems, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
+    }, [title, instruction, passage, audioUrls, imageUrls, rightItems, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
     const validate = () => {
         const nextErrors = [];
         if (!instruction.trim()) {
@@ -144,7 +164,7 @@ export function MatchingWithLinesGroupCreator({ initialData, onChange, externalE
                 getFormData: () => buildPayload(),
             };
         }
-    }, [validationRef, title, instruction, passage, audioUrl, imageUrl, rightItems, items, explanation]);
+    }, [validationRef, title, instruction, passage, audioUrls, imageUrls, rightItems, items, explanation]);
     const updateItem = (index, patch) => {
         setItems((prev) => {
             const next = [...prev];
@@ -189,7 +209,29 @@ export function MatchingWithLinesGroupCreator({ initialData, onChange, externalE
     if (isClientMode) {
         return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _jsx(MatchingWithLinesGroupClient, { questionData: currentPayload, userAnswers: currentPayload.items.map((item) => item.correctAnswer) })] }));
     }
-    return (_jsxs("div", { className: "space-y-3", children: [displayErrors.length > 0 && (_jsx("div", { className: "rounded-md border border-red-200 bg-red-50 p-2 text-xs text-red-700", children: _jsx("ul", { className: "list-disc space-y-1 pl-4", children: displayErrors.map((err, i) => (_jsx("li", { children: err }, i))) }) })), _jsxs(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(Link2, { className: "h-3.5 w-3.5" }), title: "N\u1ED1i b\u1EB1ng \u0111\u01B0\u1EDDng k\u1EBB (Nh\u00F3m)", preview: { onClick: () => setIsClientMode(true) } }), children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "mwl-title", className: "text-sm font-semibold text-gray-800", children: "Ti\u00EAu \u0111\u1EC1 (optional)" }), _jsx(Input, { id: "mwl-title", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "VOCABULARY", className: "h-10 border-gray-200 bg-white" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "mwl-instruction", className: "text-sm font-semibold text-gray-800", children: "H\u01B0\u1EDBng d\u1EABn b\u00E0i l\u00E0m" }), _jsx(Input, { id: "mwl-instruction", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: MATCHING_WITH_LINES_GROUP_DEFAULT_INSTRUCTION, className: "h-10 border-gray-200 bg-white" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-sm font-semibold text-gray-800", children: "N\u1ED9i dung b\u00E0i \u0111\u1ECDc (Passage)" }), _jsx(RichTextEditor, { value: passage, onChange: setPassage, minHeightClassName: "min-h-[160px]" })] }), _jsx(MatchingWithLinesImageField, { id: "mwl-group-image", label: "\u1EA2nh chung (optional)", value: imageUrl, onChange: setImageUrl })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-sm", children: [_jsx(CardHeader, { className: "px-3 py-2", children: _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs(CardTitle, { className: "text-sm font-semibold text-gray-800", children: ["C\u1EB7p n\u1ED1i (", items.length, ")"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addPair, className: "h-8 gap-1.5 px-2.5 text-xs", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm c\u1EB7p"] })] }) }), _jsxs(CardContent, { className: "space-y-2.5 px-3 pb-3", children: [items.map((item, index) => (_jsxs("div", { className: "space-y-2.5 rounded-md border border-gray-200 bg-white px-3 py-2.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u1EB7p ", index + 1] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: `mwl-example-${index}`, checked: item.isExample || false, onCheckedChange: (checked) => updateItem(index, { isExample: checked, points: checked ? 0 : 1 }) }), _jsxs(Label, { htmlFor: `mwl-example-${index}`, className: "flex cursor-pointer items-center gap-1 text-xs", children: [_jsx(Star, { className: "h-3 w-3 text-amber-500" }), "Example"] })] }), !item.isExample && (_jsx("div", { className: "w-24", children: _jsx(PointsInput, { value: item.points, allowZero: true, onChange: (event) => updateItem(index, {
+    return (_jsxs("div", { className: "space-y-3", children: [displayErrors.length > 0 && (_jsx("div", { className: "rounded-md border border-red-200 bg-red-50 p-2 text-xs text-red-700", children: _jsx("ul", { className: "list-disc space-y-1 pl-4", children: displayErrors.map((err, i) => (_jsx("li", { children: err }, i))) }) })), _jsxs(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(Link2, { className: "h-3.5 w-3.5" }), title: "N\u1ED1i b\u1EB1ng \u0111\u01B0\u1EDDng k\u1EBB (Nh\u00F3m)", preview: { onClick: () => setIsClientMode(true) } }), children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "mwl-title", className: "text-sm font-semibold text-gray-800", children: "Ti\u00EAu \u0111\u1EC1 (optional)" }), _jsx(Input, { id: "mwl-title", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "VOCABULARY", className: "h-10 border-gray-200 bg-white" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "mwl-instruction", className: "text-sm font-semibold text-gray-800", children: "H\u01B0\u1EDBng d\u1EABn b\u00E0i l\u00E0m" }), _jsxs("div", { className: "relative", children: [_jsx(Textarea, { id: "mwl-instruction", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: MATCHING_WITH_LINES_GROUP_DEFAULT_INSTRUCTION, rows: 2, className: "min-h-[56px] border-gray-200 pb-11" }), _jsxs("div", { className: "absolute bottom-1.5 right-1.5 z-10 flex items-center gap-1 rounded-md border border-indigo-100 bg-white/95 p-0.5 shadow-sm", children: [_jsx("button", { type: "button", title: "Th\u00EAm h\u00ECnh \u1EA3nh", onClick: () => {
+                                                    const hasEmpty = imageUrls.some((url) => !url.trim());
+                                                    if (imageUrls.length === 0 || !hasEmpty) {
+                                                        setImageUrls([...imageUrls, '']);
+                                                    }
+                                                }, className: `inline-flex h-8 w-8 items-center justify-center rounded-md transition-colors ${imageUrls.length > 0
+                                                    ? 'bg-indigo-600 text-white shadow-sm'
+                                                    : 'bg-indigo-50 text-indigo-600 hover:bg-indigo-100'}`, children: _jsx(ImageIcon, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", title: "Th\u00EAm audio", onClick: () => {
+                                                    const hasEmpty = audioUrls.some((url) => !url.trim());
+                                                    if (audioUrls.length === 0 || !hasEmpty) {
+                                                        setAudioUrls([...audioUrls, '']);
+                                                    }
+                                                }, className: `inline-flex h-8 w-8 items-center justify-center rounded-md transition-colors ${audioUrls.length > 0
+                                                    ? 'bg-violet-600 text-white shadow-sm'
+                                                    : 'bg-violet-50 text-violet-600 hover:bg-violet-100'}`, children: _jsx(Volume2, { className: "h-4 w-4" }) })] })] })] }), imageUrls.length > 0 && (_jsxs("div", { className: "space-y-2 rounded-md border border-gray-200 bg-slate-50/80 p-2", children: [imageUrls.map((url, imageIndex) => (_jsx(ChooseAnswerGroupImageUploadItem, { index: imageIndex, itemIndex: -1, imageUrl: url, onChange: (nextUrl) => {
+                                    setImageUrls((current) => current.map((item, idx) => (idx === imageIndex ? nextUrl : item)));
+                                }, onRemove: () => {
+                                    setImageUrls((current) => current.filter((_, idx) => idx !== imageIndex));
+                                } }, `mwl-group-image-${imageIndex}`))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setImageUrls((current) => (current.length ? [...current, ''] : [''])), className: "h-8 gap-1.5 border-dashed border-indigo-300 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm \u1EA3nh"] })] })), audioUrls.length > 0 && (_jsxs("div", { className: "space-y-2 rounded-md border border-gray-200 bg-slate-50/80 p-2", children: [audioUrls.map((url, audioIndex) => (_jsx(ChooseAnswerGroupAudioUploadItem, { index: audioIndex, itemIndex: -1, audioUrl: url, onChange: (nextUrl) => {
+                                    setAudioUrls((current) => current.map((item, idx) => (idx === audioIndex ? nextUrl : item)));
+                                }, onRemove: () => {
+                                    setAudioUrls((current) => current.filter((_, idx) => idx !== audioIndex));
+                                } }, `mwl-group-audio-${audioIndex}`))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setAudioUrls((current) => (current.length ? [...current, ''] : [''])), className: "h-8 gap-1.5 border-dashed border-violet-300 text-violet-600 hover:bg-violet-50 hover:text-violet-700", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm audio"] })] })), !isPassageVisible ? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsPassageVisible(true), className: "h-8 gap-1.5 border-gray-200 px-2.5 text-xs text-gray-600 hover:bg-gray-50", children: [_jsx(BookOpen, { className: "h-3.5 w-3.5" }), "Th\u00EAm n\u1ED9i dung b\u00E0i \u0111\u1ECDc"] })) : (_jsxs("div", { className: "relative space-y-1.5 pr-10", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setIsPassageVisible(false), className: "absolute right-0 top-0 z-10 h-7 px-2 text-xs text-gray-500 hover:text-gray-700", children: "\u1EA8n" }), _jsxs(Label, { className: "text-sm font-semibold text-gray-800", children: ["N\u1ED9i dung b\u00E0i \u0111\u1ECDc ", _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsx(RichTextEditor, { value: passage, onChange: setPassage, variant: "compact", minHeightClassName: "min-h-[72px]" })] }))] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-sm", children: [_jsx(CardHeader, { className: "px-3 py-2", children: _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs(CardTitle, { className: "text-sm font-semibold text-gray-800", children: ["C\u1EB7p n\u1ED1i (", items.length, ")"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addPair, className: "h-8 gap-1.5 px-2.5 text-xs", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm c\u1EB7p"] })] }) }), _jsxs(CardContent, { className: "space-y-2.5 px-3 pb-3", children: [items.map((item, index) => (_jsxs("div", { className: "space-y-2.5 rounded-md border border-gray-200 bg-white px-3 py-2.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u1EB7p ", index + 1] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: `mwl-example-${index}`, checked: item.isExample || false, onCheckedChange: (checked) => updateItem(index, { isExample: checked, points: checked ? 0 : 1 }) }), _jsxs(Label, { htmlFor: `mwl-example-${index}`, className: "flex cursor-pointer items-center gap-1 text-xs", children: [_jsx(Star, { className: "h-3 w-3 text-amber-500" }), "Example"] })] }), !item.isExample && (_jsx("div", { className: "w-24", children: _jsx(PointsInput, { value: item.points, allowZero: true, onChange: (event) => updateItem(index, {
                                                                 points: parsePointsValue(event.target.value, true),
-                                                            }) }) })), items.length > 2 && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => removePair(index), className: "h-7 w-7 text-red-500 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] })] }), _jsxs("div", { className: "grid gap-2.5 md:grid-cols-2", children: [_jsxs("div", { className: "space-y-2.5", children: [_jsx(MatchingWithLinesImageField, { id: `mwl-image-${index}`, label: "\u1EA2nh c\u1ED9t tr\u00E1i", value: item.imageUrl || '', onChange: (url) => updateItem(index, { imageUrl: url }) }), _jsxs("div", { children: [_jsx(Label, { htmlFor: `mwl-left-text-${index}`, children: "Ch\u1EEF c\u1ED9t tr\u00E1i (text-to-text)" }), _jsx(Input, { id: `mwl-left-text-${index}`, value: item.text || '', onChange: (e) => updateItem(index, { text: e.target.value }), placeholder: "ball", className: "mt-1 bg-white" })] })] }), _jsxs("div", { className: "space-y-2.5", children: [_jsx(MatchingWithLinesImageField, { id: `mwl-right-image-${index}`, label: "\u1EA2nh c\u1ED9t ph\u1EA3i (image-to-image)", value: rightItems[index]?.imageUrl || '', onChange: (url) => updateRightItem(index, { imageUrl: url || undefined }) }), _jsxs("div", { children: [_jsx(Label, { htmlFor: `mwl-right-text-${index}`, children: "T\u1EEB c\u1ED9t ph\u1EA3i" }), _jsx(Input, { id: `mwl-right-text-${index}`, value: rightItems[index]?.text || '', onChange: (e) => updateRightItem(index, { text: e.target.value }), placeholder: "paintbrush", className: "mt-1 bg-white" })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: `mwl-answer-${index}`, children: "\u0110\u00E1p \u00E1n \u0111\u00FAng (id t\u1EEB)" }), _jsxs("select", { id: `mwl-answer-${index}`, value: item.correctAnswer, onChange: (e) => updateItem(index, { correctAnswer: e.target.value }), className: "mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm", children: [_jsx("option", { value: "", children: "Ch\u1ECDn t\u1EEB \u0111\u00FAng" }), rightItems.map((right) => (_jsxs("option", { value: right.id, children: [right.text || right.id, " (", right.id, ")"] }, right.id)))] })] })] })] })] }, `${rightItems[index]?.id || index}`))), _jsx(CompactExplanationToggle, { value: explanation, onValueChange: setExplanation, defaultVisible: Boolean(initialData?.explanation) })] })] })] }));
+                                                            }) }) })), items.length > 2 && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => removePair(index), className: "h-7 w-7 text-red-500 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] })] }), _jsxs("div", { className: "grid gap-2.5 md:grid-cols-2", children: [_jsxs("div", { className: "space-y-2.5", children: [_jsx(MatchingWithLinesImageField, { id: `mwl-image-${index}`, label: "\u1EA2nh c\u1ED9t tr\u00E1i", value: item.imageUrl || '', onChange: (url) => updateItem(index, { imageUrl: url }) }), _jsxs("div", { children: [_jsx(Label, { htmlFor: `mwl-left-text-${index}`, children: "Ch\u1EEF c\u1ED9t tr\u00E1i (text-to-text)" }), _jsx(Input, { id: `mwl-left-text-${index}`, value: item.text || '', onChange: (e) => updateItem(index, { text: e.target.value }), placeholder: "ball", className: "mt-1 bg-white" })] })] }), _jsxs("div", { className: "space-y-2.5", children: [_jsx(MatchingWithLinesImageField, { id: `mwl-right-image-${index}`, label: "\u1EA2nh c\u1ED9t ph\u1EA3i (image-to-image)", value: rightItems[index]?.imageUrl || '', onChange: (url) => updateRightItem(index, { imageUrl: url || undefined }) }), _jsxs("div", { children: [_jsx(Label, { htmlFor: `mwl-right-text-${index}`, children: "T\u1EEB c\u1ED9t ph\u1EA3i" }), _jsx(Input, { id: `mwl-right-text-${index}`, value: rightItems[index]?.text || '', onChange: (e) => updateRightItem(index, { text: e.target.value }), placeholder: "paintbrush", className: "mt-1 bg-white" })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: `mwl-answer-${index}`, children: "\u0110\u00E1p \u00E1n \u0111\u00FAng (id t\u1EEB)" }), _jsxs("select", { id: `mwl-answer-${index}`, value: item.correctAnswer, onChange: (e) => updateItem(index, { correctAnswer: e.target.value }), className: "mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm", children: [_jsx("option", { value: "", children: "Ch\u1ECDn t\u1EEB \u0111\u00FAng" }), rightItems.map((right) => (_jsx("option", { value: right.id, children: rightOptionLabel(right) }, right.id)))] })] })] })] })] }, `${rightItems[index]?.id || index}`))), _jsx(CompactExplanationToggle, { value: explanation, onValueChange: setExplanation, defaultVisible: Boolean(initialData?.explanation) })] })] })] }));
 }

package/dist/components/questions/types/matching-with-lines-group/MatchingWithLinesImageField.d.ts

@@ -1,6 +1,7 @@
-export declare function MatchingWithLinesImageField({ id, label, value, onChange, }: {
+export declare function MatchingWithLinesImageField({ id, label, value, onChange, accept, }: {
     id: string;
     label: string;
     value: string;
     onChange: (url: string) => void;
+    accept?: 'image/*' | 'audio/*';
 }): import("react").JSX.Element;

package/dist/components/questions/types/matching-with-lines-group/MatchingWithLinesImageField.js

@@ -6,21 +6,40 @@ import { FileUpload } from '../../../../components/ui/file-upload';
 import { ImagePreview } from '../../../../components/ui/image-preview';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
 import { Trash2 } from 'lucide-react';
+function isDisplayableUrl(value) {
+    return (value.startsWith('http://') ||
+        value.startsWith('https://') ||
+        value.startsWith('blob:') ||
+        value.startsWith('data:'));
+}
+function toStorageKey(value) {
+    const trimmed = value.trim();
+    if (!trimmed)
+        return '';
+    if (isDisplayableUrl(trimmed))
+        return trimmed;
+    if (trimmed.startsWith('/images/') || trimmed.startsWith('/_next/')) {
+        return trimmed;
+    }
+    return trimmed.replace(/^\/+/, '');
+}
 function resolveDisplayUrl(fileUrl, previewOverride, fetchedPreviewUrl) {
     if (previewOverride)
         return previewOverride;
     if (fetchedPreviewUrl)
         return fetchedPreviewUrl;
-    if (fileUrl.startsWith('http') || fileUrl.startsWith('blob:'))
+    if (isDisplayableUrl(fileUrl))
         return fileUrl;
     return '';
 }
-export function MatchingWithLinesImageField({ id, label, value, onChange, }) {
+export function MatchingWithLinesImageField({ id, label, value, onChange, accept = 'image/*', }) {
     const [previewOverride, setPreviewOverride] = useState('');
-    const { previewUrl: fetchedPreviewUrl } = usePresignedFileUrl(value);
+    const storageKey = toStorageKey(value);
+    const { previewUrl: fetchedPreviewUrl, isLoading } = usePresignedFileUrl(storageKey);
     const displayUrl = resolveDisplayUrl(value, previewOverride, fetchedPreviewUrl);
-    return (_jsxs("div", { className: "space-y-2", children: [_jsx(FileUpload, { id: id, label: label, accept: "image/*", value: value, onChange: onChange, onPresignedUrlChange: setPreviewOverride, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }), value && (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(ImagePreview, { src: displayUrl || value, alt: label, className: "h-20 w-20 rounded-md object-contain" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
+    const isImage = accept === 'image/*';
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(FileUpload, { id: id, label: label, accept: accept, value: value, onChange: onChange, onPresignedUrlChange: setPreviewOverride, maxSize: isImage ? 5 : 20, placeholder: isImage ? 'Upload ảnh hoặc paste URL' : 'Upload audio hoặc paste URL', autoUpload: true, prefix: "questions" }), value && isImage && (_jsxs("div", { className: "flex items-start gap-2", children: [isLoading && !displayUrl ? (_jsx("div", { className: "h-20 w-20 animate-pulse rounded-md bg-slate-100" })) : (_jsx(ImagePreview, { src: displayUrl || value, alt: label, className: "h-20 w-20 rounded-md object-contain" })), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
                             setPreviewOverride('');
                             onChange('');
-                        }, className: "text-red-500 hover:bg-red-50", children: _jsx(Trash2, { className: "h-4 w-4" }) })] }))] }));
+                        }, className: "text-red-500 hover:bg-red-50", children: _jsx(Trash2, { className: "h-4 w-4" }) })] })), value && !isImage && (isLoading && !displayUrl ? (_jsx("div", { className: "h-8 w-48 animate-pulse rounded-md bg-slate-100" })) : (_jsx("audio", { controls: true, src: displayUrl, className: "h-8 max-w-full", children: _jsx("track", { kind: "captions" }) })))] }));
 }

package/dist/components/questions/types/matching-with-lines-group/map-matching-with-lines-group-data.js

@@ -1,4 +1,8 @@
 import { MATCHING_WITH_LINES_GROUP_DEFAULT_INSTRUCTION } from '../../_shared/types/matching-with-lines-group.type';
+import { fromChooseAnswerGroupImageUrls, toChooseAnswerGroupImageUrls, } from '../../_shared/types/choose-the-correct-answer-group.type';
+function readSharedMedia(value) {
+    return fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(value));
+}
 function isRecord(value) {
     return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
@@ -72,9 +76,9 @@ export function mapQuestionToMatchingWithLinesGroupData(question) {
     const meta = asRecord(content.meta ?? answer.meta);
     if (Array.isArray(content.items)) {
         const items = content.items.map((item, index) => mapMatchingWithLinesGroupItem(item, index, fallbackAnswers[index]));
-        const audioUrl = asString(meta.audioUrl).trim() || asString(answer.audioUrl).trim();
+        const audioUrl = readSharedMedia(meta.audioUrl) ?? readSharedMedia(answer.audioUrl);
         const passage = asString(meta.passage).trim() || asString(answer.passage).trim();
-        const imageUrl = asString(meta.imageUrl).trim() || asString(answer.imageUrl).trim();
+        const imageUrl = readSharedMedia(meta.imageUrl) ?? readSharedMedia(answer.imageUrl);
         return {
             title: asString(meta.title) || asString(answer.title),
             instruction: asString(meta.instruction) ||
@@ -91,9 +95,9 @@ export function mapQuestionToMatchingWithLinesGroupData(question) {
     }
     if (Array.isArray(answer.items)) {
         const items = answer.items.map((item, index) => mapMatchingWithLinesGroupItem(item, index, fallbackAnswers[index]));
-        const audioUrl = asString(answer.audioUrl).trim();
+        const audioUrl = readSharedMedia(answer.audioUrl);
         const passage = asString(answer.passage).trim();
-        const imageUrl = asString(answer.imageUrl).trim();
+        const imageUrl = readSharedMedia(answer.imageUrl);
         return {
             title: asString(answer.title),
             instruction: asString(answer.instruction) || MATCHING_WITH_LINES_GROUP_DEFAULT_INSTRUCTION,

package/dist/components/questions/types/matching-with-lines-group/transform.js

@@ -1,4 +1,5 @@
 import { MATCHING_WITH_LINES_GROUP_DEFAULT_INSTRUCTION } from '../../_shared/types/matching-with-lines-group.type';
+import { fromChooseAnswerGroupImageUrls, toChooseAnswerGroupImageUrls, } from '../../_shared/types/choose-the-correct-answer-group.type';
 function sumGradablePoints(items) {
     return items.reduce((total, item) => {
         if (item.isExample)
@@ -30,16 +31,16 @@ export const transformMatchingWithLinesGroup = (question) => {
     });
     const title = typeof answerData?.title === 'string' ? answerData.title.trim() : '';
     const passage = typeof answerData?.passage === 'string' ? answerData.passage.trim() : '';
-    const audioUrl = typeof answerData?.audioUrl === 'string' ? answerData.audioUrl.trim() : '';
-    const imageUrl = typeof answerData?.imageUrl === 'string' ? answerData.imageUrl.trim() : '';
+    const audioUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(answerData?.audioUrl));
+    const imageUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(answerData?.imageUrl));
     return {
         apiContent: {
             meta: {
                 instruction: answerData?.instruction || MATCHING_WITH_LINES_GROUP_DEFAULT_INSTRUCTION,
                 ...(title ? { title } : {}),
                 ...(passage ? { passage } : {}),
-                ...(audioUrl ? { audioUrl } : {}),
-                ...(imageUrl ? { imageUrl } : {}),
+                ...(audioUrl !== undefined ? { audioUrl } : {}),
+                ...(imageUrl !== undefined ? { imageUrl } : {}),
             },
             rightItems: rightItems.map((item) => {
                 const imageUrl = item.imageUrl?.trim() || '';

package/dist/components/questions/types/word-fill-structured-form/WordFillStructuredFormClient.js

@@ -1,10 +1,10 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { Check, X, FileText, Library } from 'lucide-react';
+import { Check, X, Library } from 'lucide-react';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
 import { cn } from '../../../../shared/lib/utils';
-import { KidInstruction, KidPrompt, KidQuestionCard } from '../../_shared/components/compact';
+import { KidPrompt, KidQuestionCard } from '../../_shared/components/compact';
 import { detectWfsfBankMode, isOptionsWordEntry, normalizeSharedWordBank, } from './wfsf-word-bank.utils';
 import { expandWfsfCorrectAlts, formatWfsfCorrectLabel, isWfsfBlankCorrect, primaryWfsfAnswers, } from '../../../../shared/lib/utils/wfsf-blank-match';
 function normalizeWfsfBlankStyle(raw) {
@@ -138,9 +138,13 @@ export function WordFillStructuredFormClient({ questionData, isReviewMode = fals
     // Header = page rubric. Pearson preview maps draft.instruction → explanation.
     const rawExplanation = String(explanation || questionData.explanation || '').trim();
     const headerInstruction = String(instruction || dataInstruction || rawExplanation || '').trim();
-    const headerLabel = headerInstruction || DEFAULT_WFSF_HEADER;
+    // Header reads "Bài x: rubric" — the question type name is never shown.
+    const numberLabel = typeof questionNumber === 'number' && questionNumber > 0
+        ? `Bài ${questionNumber}`
+        : '';
+    const headerTitle = numberLabel ? (_jsxs(_Fragment, { children: [_jsxs("strong", { className: "font-bold", children: [numberLabel, headerInstruction ? ':' : ''] }), headerInstruction ? ` ${headerInstruction}` : ''] })) : (headerInstruction || DEFAULT_WFSF_HEADER);
     // Do not re-show the same rubric under "Giải thích".
-    const displayExplanation = rawExplanation && rawExplanation !== headerLabel ? rawExplanation : '';
+    const displayExplanation = rawExplanation && rawExplanation !== headerInstruction ? rawExplanation : '';
     const handleInputChange = useCallback((key, value) => {
         if (isReviewMode)
             return;
@@ -178,8 +182,8 @@ export function WordFillStructuredFormClient({ questionData, isReviewMode = fals
                         : undefined, size: isLetterBlank ? undefined : isPhraseBlank ? 28 : 10, className: cn('inline-block bg-slate-50/40 text-center text-sm font-semibold outline-none transition-all align-baseline hover:bg-slate-100/60 focus:bg-teal-50/60 focus:ring-0', isLetterBlank
                         ? 'h-7 w-7 rounded-md border px-0 uppercase'
                         : isPhraseBlank
-                            ? 'min-w-[16rem] max-w-[36rem] w-[28ch] rounded-md border px-3 py-1.5'
-                            : 'min-w-[4.5rem] max-w-[8rem] w-[10ch] rounded-md border px-3 py-1.5', isReviewMode
+                            ? 'min-w-[16rem] max-w-[36rem] w-[28ch] rounded-none border-0 border-b-2 bg-transparent px-1 py-0.5'
+                            : 'min-w-[4.5rem] max-w-[8rem] w-[10ch] rounded-none border-0 border-b-2 bg-transparent px-1 py-0.5', isReviewMode
                         ? isCorrectFill
                             ? 'border-green-400 bg-green-50 text-green-800'
                             : isWrongFill
@@ -278,12 +282,12 @@ export function WordFillStructuredFormClient({ questionData, isReviewMode = fals
             .map((node, index) => renderNode(node, `root-${index}`))
             .filter((node) => node !== null);
     }, [content, renderBlank]);
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx(KidInstruction, { children: headerInstruction }), _jsxs(KidQuestionCard, { icon: _jsx(FileText, { className: "h-3.5 w-3.5" }), title: headerInstruction ? DEFAULT_WFSF_HEADER : headerLabel, headerExtra: typeof questionNumber === 'number' && questionNumber > 0 ? (_jsxs("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-teal-700", children: ["B\u00E0i ", questionNumber] })) : undefined, review: isReviewMode && allFilled ? (isAllCorrect ? 'correct' : 'wrong') : null, children: [title && (_jsx(KidPrompt, { children: _jsx("h2", { className: "text-sm font-semibold text-gray-800", children: title }) })), allAudios.length > 0 && (_jsx("div", { className: "flex flex-col items-center gap-2", children: allAudios.map((audio, idx) => (_jsx(ClientAudioItem, { url: audio }, idx))) })), allImages.length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: allImages.map((img, idx) => (_jsx(ClientImageItem, { url: img, alt: title ? `${title} (${idx + 1})` : undefined }, idx))) })), bankMode === 'WITH_WORD_BANK' && sharedWords.length > 0 && (_jsxs("div", { className: "rounded-lg border border-purple-200 bg-gradient-to-r from-purple-50 to-pink-50 p-3", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx(Library, { className: "h-4 w-4 text-purple-600" }), _jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-purple-700", children: "Word Bank" })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: sharedWords.map((item, index) => {
-                                    const used = usedSharedWords.has(item.word.trim().toLowerCase());
-                                    return (_jsxs("span", { className: cn('rounded-full border px-3 py-1 text-sm font-medium', item.isExample
-                                            ? 'border-amber-300 bg-amber-100 text-amber-800'
-                                            : used
-                                                ? 'border-purple-200 bg-white/60 text-purple-400 line-through'
-                                                : 'border-purple-300 bg-white text-purple-800'), children: [item.word, item.isExample ? ' (ex)' : ''] }, `${item.word}-${index}`));
-                                }) })] })), _jsx("div", { className: "structured-form-content space-y-2 rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-5 text-base leading-loose text-gray-800", children: renderedContent }), isReviewMode && !isAllCorrect && (_jsxs("div", { className: "rounded-lg border border-green-200 bg-green-50 p-3", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-green-600", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: expectedBlankKeys.map((key) => (_jsxs("span", { className: "rounded-lg border border-green-300 bg-green-100 px-3 py-1.5 text-sm font-semibold text-green-800", children: [`{${key}}`, ": ", formatWfsfCorrectLabel(answers[key])] }, key))) })] })), isReviewMode && displayExplanation && (_jsxs("div", { className: "rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-3", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-blue-600", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-blue-800", children: displayExplanation })] }))] })] }));
+    return (_jsx("div", { className: "space-y-4", children: _jsxs(KidQuestionCard, { hideIcon: true, title: headerTitle, titleClassName: "whitespace-normal break-words text-base font-normal text-gray-800", review: isReviewMode && allFilled ? (isAllCorrect ? 'correct' : 'wrong') : null, children: [title && (_jsx(KidPrompt, { children: _jsx("h2", { className: "text-sm font-semibold text-gray-800", children: title }) })), allAudios.length > 0 && (_jsx("div", { className: "flex flex-col items-center gap-2", children: allAudios.map((audio, idx) => (_jsx(ClientAudioItem, { url: audio }, idx))) })), allImages.length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: allImages.map((img, idx) => (_jsx(ClientImageItem, { url: img, alt: title ? `${title} (${idx + 1})` : undefined }, idx))) })), bankMode === 'WITH_WORD_BANK' && sharedWords.length > 0 && (_jsxs("div", { className: "rounded-lg border border-purple-200 bg-gradient-to-r from-purple-50 to-pink-50 p-3", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx(Library, { className: "h-4 w-4 text-purple-600" }), _jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-purple-700", children: "Word Bank" })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: sharedWords.map((item, index) => {
+                                const used = usedSharedWords.has(item.word.trim().toLowerCase());
+                                return (_jsxs("span", { className: cn('rounded-full border px-3 py-1 text-sm font-medium', item.isExample
+                                        ? 'border-amber-300 bg-amber-100 text-amber-800'
+                                        : used
+                                            ? 'border-purple-200 bg-white/60 text-purple-400 line-through'
+                                            : 'border-purple-300 bg-white text-purple-800'), children: [item.word, item.isExample ? ' (ex)' : ''] }, `${item.word}-${index}`));
+                            }) })] })), _jsx("div", { className: "structured-form-content space-y-2 rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-5 text-base leading-loose text-gray-800", children: renderedContent }), isReviewMode && !isAllCorrect && (_jsxs("div", { className: "rounded-lg border border-green-200 bg-green-50 p-3", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-green-600", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: expectedBlankKeys.map((key) => (_jsxs("span", { className: "rounded-lg border border-green-300 bg-green-100 px-3 py-1.5 text-sm font-semibold text-green-800", children: [`{${key}}`, ": ", formatWfsfCorrectLabel(answers[key])] }, key))) })] })), isReviewMode && displayExplanation && (_jsxs("div", { className: "rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-3", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-blue-600", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-blue-800", children: displayExplanation })] }))] }) }));
 }

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, MoversGridFillRenderer, MoversLabelThePictureRenderer, MoversMatchByWritingAnswerRenderer, MoversMatchWordToPictureRenderer, MoversReadingPassageRenderer, MoversTrueFalseRenderer, MoversTrueFalseCorrectGroupRenderer, MoversFillInBlankGroupRenderer, MoversMatchingWithLinesGroupRenderer, MoversCrossOutWordGroupRenderer, MoversWordFillParagraphRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderingRenderer, MoversWordOrderingGroupRenderer, MoversWriteSentencesRenderer, MoversWritingRenderer, MoversCrosswordPuzzleRenderer, ChooseThenAnswerGroupRenderer, SortWordsIntoCategoriesRenderer, } from '../../../components/exams/take/components/question-renderers';
-import { transformAnswerTheQuestion, transformGridFill, transformLabelPicture, transformMatchByWritingAnswer, transformMatchWordToPicture, transformReadingPassage, transformTrueFalse, transformTrueFalseCorrectGroup, transformFillInBlankGroup, transformMatchingWithLinesGroup, transformWordFillParagraph, transformWordFillStructuredForm, transformWordOrdering, transformWordOrderingGroupTake, transformWriteSentences, transformWriteShortLetter, transformCrosswordPuzzle, transformChooseThenAnswerGroup, transformSortWordsIntoCategories, } from '../../../components/exams/take/utils/question-transformers';
+import { MoversAnswerTheQuestionRenderer, MoversGridFillRenderer, MoversLabelThePictureRenderer, MoversMatchByWritingAnswerRenderer, MoversMatchWordToPictureRenderer, MoversMatchWordToPictureGroupRenderer, MoversReadingPassageRenderer, MoversTrueFalseRenderer, MoversTrueFalseCorrectGroupRenderer, MoversFillInBlankGroupRenderer, MoversMatchingWithLinesGroupRenderer, MoversCrossOutWordGroupRenderer, MoversWordFillParagraphRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderingRenderer, MoversWordOrderingGroupRenderer, MoversWriteSentencesRenderer, MoversWritingRenderer, MoversCrosswordPuzzleRenderer, ChooseThenAnswerGroupRenderer, SortWordsIntoCategoriesRenderer, } from '../../../components/exams/take/components/question-renderers';
+import { transformAnswerTheQuestion, transformGridFill, transformLabelPicture, transformMatchByWritingAnswer, transformMatchWordToPicture, transformMatchWordToPictureGroup, transformReadingPassage, transformTrueFalse, transformTrueFalseCorrectGroup, transformFillInBlankGroup, transformMatchingWithLinesGroup, transformWordFillParagraph, transformWordFillStructuredForm, transformWordOrdering, transformWordOrderingGroupTake, transformWriteSentences, transformWriteShortLetter, transformCrosswordPuzzle, transformChooseThenAnswerGroup, transformSortWordsIntoCategories, } 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;
@@ -183,6 +183,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_GROUP': {
+            const data = transformMatchWordToPictureGroup(apiQuestions);
+            return (_jsx(MoversMatchWordToPictureGroupRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: data.questions.filter((q) => !q.isExample).length, audioUrl: part.audioUrl, data: data, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true }));
+        }
         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 }));

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

@@ -11,6 +11,7 @@ const FLATTENED_ANSWER_TYPES = new Set([
     'CHOOSE_THEN_ANSWER_GROUP',
     'FILL_IN_BLANK_GROUP',
     'MATCHING_WITH_LINES_GROUP',
+    'MATCH_WORD_TO_PICTURE_GROUP',
 ]);
 export function transformResultAnswersForReview(answers, templateParts = []) {
     const groups = groupAnswers(answers);
@@ -282,6 +283,17 @@ function transformStudentAnswer(questionId, questionType, value) {
             typeof item === 'string' ? item : '',
         ]));
     }
+    if (questionType === 'MATCH_WORD_TO_PICTURE_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);

package/dist/shared/lib/utils/question-reverse-transform.js

@@ -511,14 +511,29 @@ const reverseMatchingWithLinesGroup = (apiQuestion) => {
             questionNumber: asNumber(item.questionNumber, index + 1),
         };
     });
+    const readMatchingMedia = (value) => {
+        if (Array.isArray(value)) {
+            const cleaned = value
+                .filter((item) => typeof item === 'string')
+                .map((item) => item.trim())
+                .filter((item) => item !== '');
+            if (cleaned.length === 0)
+                return undefined;
+            return cleaned.length === 1 ? cleaned[0] : cleaned;
+        }
+        const single = asString(value).trim();
+        return single || undefined;
+    };
+    const audioUrl = readMatchingMedia(meta.audioUrl);
+    const imageUrl = readMatchingMedia(meta.imageUrl);
     return {
         content: '',
         answer: {
             title: asString(meta.title),
             instruction: asString(meta.instruction, 'Look and match.'),
             ...(asString(meta.passage).trim() ? { passage: asString(meta.passage).trim() } : {}),
-            ...(asString(meta.audioUrl).trim() ? { audioUrl: asString(meta.audioUrl).trim() } : {}),
-            ...(asString(meta.imageUrl).trim() ? { imageUrl: asString(meta.imageUrl).trim() } : {}),
+            ...(audioUrl !== undefined ? { audioUrl } : {}),
+            ...(imageUrl !== undefined ? { imageUrl } : {}),
             rightItems,
             items,
             explanation: asString(apiQuestion.explanation),

package/dist/shared/types/questions/matching-with-lines-group.d.ts

@@ -20,9 +20,9 @@ export interface MatchingWithLinesGroupContent {
     meta?: {
         instruction?: string;
         title?: string;
-        audioUrl?: string;
+        audioUrl?: string | string[];
         passage?: string;
-        imageUrl?: string;
+        imageUrl?: string | string[];
     };
     rightItems: MatchingWithLinesRightItem[];
     items: MatchingWithLinesGroupItem[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinyweb_dev/oe-exam-sdk",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "Reusable OceanEdu question components.",
   "type": "module",
   "main": "./dist/index.js",