@tinyweb_dev/oe-exam-sdk 0.2.4 → 0.2.6

package/dist/components/questions/_shared/types/fill-in-blank-group.type.d.ts

@@ -0,0 +1,50 @@
+import type { MutableRefObject } from 'react';
+export declare const FILL_IN_BLANK_ITEM_TYPE: "FILL_IN_BLANK";
+export declare const FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION = "Complete the sentences.";
+export interface FillInBlankGroupItemAnswer {
+    answers: string[][];
+    caseSensitive?: boolean;
+}
+export interface FillInBlankGroupStudentItemAnswer {
+    answers: string[];
+}
+export interface FillInBlankGroupItemData {
+    question: string;
+    answers: string[][];
+    caseSensitive?: boolean;
+    imageUrl?: string;
+    audioUrl?: string;
+    showHints?: boolean;
+    hints?: string[];
+    isExample?: boolean;
+    points: number;
+    questionNumber: number;
+}
+export interface FillInBlankGroupData {
+    instruction: string;
+    audioUrl?: string;
+    imageUrl?: string;
+    showHints?: boolean;
+    hints?: string[];
+    items: FillInBlankGroupItemData[];
+    explanation?: string;
+    points?: number;
+}
+export interface FillInBlankGroupCreatorProps {
+    initialData?: FillInBlankGroupData;
+    onSave?: (data: FillInBlankGroupData) => void;
+    onCancel?: () => void;
+    onChange?: (data: FillInBlankGroupData) => void;
+    externalErrors?: string[];
+    onUnsavedChangesChange?: (hasUnsavedChanges: boolean) => void;
+    validationRef?: MutableRefObject<{
+        triggerValidation: () => Promise<boolean>;
+        getFormData?: () => FillInBlankGroupData;
+    } | null>;
+}
+export interface FillInBlankGroupClientProps {
+    questionData: FillInBlankGroupData;
+    isReviewMode?: boolean;
+    userAnswers?: FillInBlankGroupStudentItemAnswer[];
+    onAnswerChange?: (answers: FillInBlankGroupStudentItemAnswer[]) => void;
+}

package/dist/components/questions/_shared/types/fill-in-blank-group.type.js

@@ -0,0 +1,2 @@
+export const FILL_IN_BLANK_ITEM_TYPE = 'FILL_IN_BLANK';
+export const FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION = 'Complete the sentences.';

package/dist/components/questions/_shared/types/index.d.ts

@@ -11,4 +11,8 @@ export * from './read-and-color-objects.type';
 export * from './fill-in-blank.type';
 export * from './read-passage-and-answer-questions.type';
 export * from './word-fill-structured-form.type';
+export * from './true-false-correct-group.type';
+export * from './fill-in-blank-group.type';
+export * from './match-word-to-picture.type';
+export * from './matching-with-lines-group.type';
 export * from './spontaneous-qa-group.type';

package/dist/components/questions/_shared/types/index.js

@@ -11,4 +11,8 @@ export * from './read-and-color-objects.type';
 export * from './fill-in-blank.type';
 export * from './read-passage-and-answer-questions.type';
 export * from './word-fill-structured-form.type';
+export * from './true-false-correct-group.type';
+export * from './fill-in-blank-group.type';
+export * from './match-word-to-picture.type';
+export * from './matching-with-lines-group.type';
 export * from './spontaneous-qa-group.type';

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import type { ValidationRef } from './look-and-choose-answer.type';
+export type { ValidationRef };
+export declare const MATCH_WORD_TO_PICTURE_DEFAULT_INSTRUCTION = "Look and complete.";
+export interface MatchWordToPictureGroup {
+    number: number;
+    questionCount: number;
+}
+export interface MatchWordToPictureData {
+    imageUrl: string;
+    correctAnswer: string;
+    points?: number;
+    groupNumber?: number;
+    isExample?: boolean;
+    wordBank: string[];
+    instruction?: string;
+    groups?: MatchWordToPictureGroup[];
+    explanation?: string;
+}
+export interface MatchWordToPictureCreatorProps {
+    initialData?: MatchWordToPictureData;
+    onSave?: (data: MatchWordToPictureData) => void;
+    onSaveToQuestionBank?: (data: MatchWordToPictureData) => void;
+    onCancel?: () => void;
+    onChange?: (data: MatchWordToPictureData) => void;
+    onUnsavedChangesChange?: (hasUnsavedChanges: boolean) => void;
+    externalErrors?: string[];
+    groups?: MatchWordToPictureGroup[];
+    groupConfig?: string[];
+    questionConfig?: string[];
+    questionIndexInPart?: number;
+    partId?: string;
+    validationRef?: React.MutableRefObject<ValidationRef | null>;
+}
+export interface MatchWordToPictureClientProps {
+    questionData: MatchWordToPictureData;
+    onSubmit?: (answer: string) => void;
+    isReviewMode?: boolean;
+    userAnswer?: string;
+    autoFillCorrectAnswers?: boolean;
+    explanation?: string;
+}
+export interface MatchWordToPictureGroupItemData {
+    imageUrl: string;
+    correctAnswer: string;
+    isExample?: boolean;
+    points: number;
+    questionNumber: number;
+}
+export interface MatchWordToPictureGroupData {
+    instruction: string;
+    wordBank: string[];
+    items: MatchWordToPictureGroupItemData[];
+    explanation?: string;
+    points?: number;
+}
+export interface MatchWordToPictureGroupClientProps {
+    questionData: MatchWordToPictureGroupData;
+    isReviewMode?: boolean;
+    userAnswers?: string[];
+    onAnswerChange?: (answers: string[]) => void;
+}

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

@@ -0,0 +1 @@
+export const MATCH_WORD_TO_PICTURE_DEFAULT_INSTRUCTION = 'Look and complete.';

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

@@ -0,0 +1,40 @@
+import type { MutableRefObject } from 'react';
+export declare const MATCHING_WITH_LINES_GROUP_DEFAULT_INSTRUCTION = "Look and match.";
+export interface MatchingWithLinesRightItem {
+    id: string;
+    text: string;
+}
+export interface MatchingWithLinesGroupItemData {
+    imageUrl: string;
+    correctAnswer: string;
+    isExample?: boolean;
+    points: number;
+    questionNumber: number;
+}
+export interface MatchingWithLinesGroupData {
+    title?: string;
+    instruction: string;
+    rightItems: MatchingWithLinesRightItem[];
+    items: MatchingWithLinesGroupItemData[];
+    explanation?: string;
+    points?: number;
+}
+export interface MatchingWithLinesGroupCreatorProps {
+    initialData?: MatchingWithLinesGroupData;
+    onSave?: (data: MatchingWithLinesGroupData) => void;
+    onCancel?: () => void;
+    onChange?: (data: MatchingWithLinesGroupData) => void;
+    externalErrors?: string[];
+    onUnsavedChangesChange?: (hasUnsavedChanges: boolean) => void;
+    validationRef?: MutableRefObject<{
+        triggerValidation: () => Promise<boolean>;
+        getFormData?: () => MatchingWithLinesGroupData;
+    } | null>;
+}
+export interface MatchingWithLinesGroupClientProps {
+    questionData: MatchingWithLinesGroupData;
+    isReviewMode?: boolean;
+    userAnswers?: string[];
+    onAnswerChange?: (index: number, rightId: string) => void;
+    onAnswersChange?: (next: string[]) => void;
+}

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

@@ -0,0 +1 @@
+export const MATCHING_WITH_LINES_GROUP_DEFAULT_INSTRUCTION = 'Look and match.';

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

@@ -0,0 +1,42 @@
+import type { MutableRefObject } from 'react';
+export declare const TRUE_FALSE_CORRECT_ITEM_TYPE: "TRUE_FALSE_CORRECT";
+export declare const TRUE_FALSE_CORRECT_GROUP_DEFAULT_INSTRUCTION = "Tick (\u2713) the true and cross (\u2717) the false sentences. Correct the false sentences.";
+export interface TrueFalseCorrectItemAnswer {
+    isTrue: boolean;
+    correction: string;
+}
+export interface TrueFalseCorrectStudentItemAnswer {
+    isTrue: boolean | null;
+    correction: string;
+}
+export interface TrueFalseCorrectGroupItemData {
+    question: string;
+    isTrue: boolean;
+    correction: string;
+    isExample?: boolean;
+    points: number;
+    questionNumber: number;
+}
+export interface TrueFalseCorrectGroupData {
+    instruction: string;
+    items: TrueFalseCorrectGroupItemData[];
+    explanation?: string;
+    points?: number;
+}
+export interface TrueFalseCorrectGroupCreatorProps {
+    initialData?: TrueFalseCorrectGroupData;
+    onSave?: (data: TrueFalseCorrectGroupData) => void;
+    onCancel?: () => void;
+    onChange?: (data: TrueFalseCorrectGroupData) => void;
+    externalErrors?: string[];
+    onUnsavedChangesChange?: (hasUnsavedChanges: boolean) => void;
+    validationRef?: MutableRefObject<{
+        triggerValidation: () => Promise<boolean>;
+        getFormData?: () => TrueFalseCorrectGroupData;
+    } | null>;
+}
+export interface TrueFalseCorrectGroupClientProps {
+    questionData: TrueFalseCorrectGroupData;
+    isReviewMode?: boolean;
+    userAnswers?: TrueFalseCorrectStudentItemAnswer[];
+}

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

@@ -0,0 +1,2 @@
+export const TRUE_FALSE_CORRECT_ITEM_TYPE = 'TRUE_FALSE_CORRECT';
+export const TRUE_FALSE_CORRECT_GROUP_DEFAULT_INSTRUCTION = 'Tick (✓) the true and cross (✗) the false sentences. Correct the false sentences.';

package/dist/components/questions/_shared/types/write-a-short-letter.type.d.ts

@@ -7,6 +7,8 @@ export interface WriteAShortLetterData {
     maxWords?: number;
     instructions?: WriteAShortLetterInstructions;
     guideImages?: string[];
+    /** Optional HTML/text article the student must read before writing. */
+    passage?: string;
     points?: number;
 }
 export interface WriteAShortLetterCreatorProps {
@@ -26,6 +28,8 @@ export interface WriteAShortLetterQuestionData {
     maxWords?: number;
     instructions?: WriteAShortLetterInstructions;
     guideImages?: string[];
+    /** Optional HTML/text article the student must read before writing. */
+    passage?: string;
 }
 export interface WriteAShortLetterClientProps {
     questionData: WriteAShortLetterQuestionData;

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

@@ -23,10 +23,13 @@ const IMAGE_BASED_TYPES = [
     'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER',
     'LOOK_PICTURE_FILL_WORD_HINT',
     'FILL_IN_BLANK',
+    'FILL_IN_BLANK_GROUP',
     'LABEL_THE_PICTURE',
     'READ_AND_COLOR_OBJECTS',
     'IMAGE_OBJECT_MATCHING',
     'FILL_IN_BLANK',
+    'MATCH_WORD_TO_PICTURE',
+    'MATCHING_WITH_LINES_GROUP',
 ];
 // Passage-based question types
 const PASSAGE_BASED_TYPES = [
@@ -61,7 +64,10 @@ const getQuestionTypeName = (type) => {
         'IMAGE_OBJECT_MATCHING': 'Ghép hình ảnh - Đối tượng',
         'WRITE_CORRECT_VERB_FORM': 'Viết dạng động từ',
         'FILL_IN_BLANK': 'Điền vào chỗ trống',
+        'FILL_IN_BLANK_GROUP': 'Điền chỗ trống (nhóm)',
         'READ_PASSAGE_AND_ANSWER_QUESTIONS': 'Đọc hiểu',
+        'MATCH_WORD_TO_PICTURE': 'Nối từ với tranh',
+        'MATCHING_WITH_LINES_GROUP': 'Nối bằng đường kẻ (nhóm)',
     };
     return type ? typeMap[type] || type.replace(/_/g, ' ').toLowerCase() : 'Chưa xác định';
 };

package/dist/components/questions/components/QuestionTypeSelector.js

@@ -26,7 +26,10 @@ export function QuestionTypeSelector({ value, onValueChange, disabled, }) {
         'ANSWER_THE_QUESTION',
         'WORD_ORDERING',
         'MATCH_BY_WRITING_ANSWER',
+        'MATCH_WORD_TO_PICTURE',
+        'MATCHING_WITH_LINES_GROUP',
         'WRITE_SENTENCES',
+        'FILL_IN_BLANK_GROUP',
     ];
     return (_jsxs(Select, { value: value, onValueChange: onValueChange, disabled: disabled, children: [_jsx(SelectTrigger, { id: "questionType", className: "mt-1", children: _jsx(SelectValue, { placeholder: "Ch\u1ECDn lo\u1EA1i c\u00E2u h\u1ECFi" }) }), _jsx(SelectContent, { children: questionTypes.map((type) => (_jsx(SelectItem, { value: type, children: getQuestionTypeLabel(type) }, type))) })] }));
 }

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

@@ -13,6 +13,8 @@ import { readPassageAndAnswerQuestionsRegistration } from '../types/read-passage
 import { chooseTheCorrectAnswerRegistration } from '../types/choose-the-correct-answer/register';
 import { chooseTheCorrectAnswerGroupRegistration } from '../types/choose-the-correct-answer-group/register';
 import { trueFalseGroupRegistration } from '../types/true-false-group/register';
+import { trueFalseCorrectGroupRegistration } from '../types/true-false-correct-group/register';
+import { fillInBlankGroupRegistration } from '../types/fill-in-blank-group/register';
 import { crossOutWordGroupRegistration } from '../types/cross-out-word-group/register';
 import { writeAShortLetterRegistration } from '../types/write-a-short-letter/register';
 import { writeCorrectVerbFormRegistration } from '../types/write-correct-verb-form/register';
@@ -23,6 +25,8 @@ import { trueFalseRegistration } from '../types/true-false/register';
 import { wordOrderingRegistration } from '../types/word-ordering/register';
 import { wordFillParagraphRegistration } from '../types/word-fill-paragraph/register';
 import { matchByWritingAnswerRegistration } from '../types/match-by-writing-answer/register';
+import { matchWordToPictureRegistration } from '../types/match-word-to-picture/register';
+import { matchingWithLinesGroupRegistration } from '../types/matching-with-lines-group/register';
 import { writeSentencesRegistration } from '../types/write-sentences/register';
 import { listenAndChooseFromAnswerGroupRegistration } from '../types/listen-and-choose-from-answer-group/register';
 import { listenAndChooseObjectsInSceneRegistration } from '../types/listen-and-choose-objects-in-scene/register';
@@ -50,6 +54,8 @@ export const questionTypeRegistry = {
     CHOOSE_THE_CORRECT_ANSWER: chooseTheCorrectAnswerRegistration,
     CHOOSE_THE_CORRECT_ANSWER_GROUP: chooseTheCorrectAnswerGroupRegistration,
     TRUE_FALSE_GROUP: trueFalseGroupRegistration,
+    TRUE_FALSE_CORRECT_GROUP: trueFalseCorrectGroupRegistration,
+    FILL_IN_BLANK_GROUP: fillInBlankGroupRegistration,
     CROSS_OUT_WORD_GROUP: crossOutWordGroupRegistration,
     WORD_ORDER_AND_MATCH_GROUP: wordOrderAndMatchGroupRegistration,
     FILL_IN_BLANK: fillInBlankRegistration,
@@ -72,6 +78,8 @@ export const questionTypeRegistry = {
     WORD_ORDERING: wordOrderingRegistration,
     WORD_FILL_PARAGRAPH: wordFillParagraphRegistration, // Will need to handle viewMode mapping either here or in wrapper
     MATCH_BY_WRITING_ANSWER: matchByWritingAnswerRegistration,
+    MATCH_WORD_TO_PICTURE: matchWordToPictureRegistration,
+    MATCHING_WITH_LINES_GROUP: matchingWithLinesGroupRegistration,
     WRITE_SENTENCES: writeSentencesRegistration,
     LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP: listenAndChooseFromAnswerGroupRegistration,
     LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE: listenAndChooseObjectsInSceneRegistration,

package/dist/components/questions/types/choose-the-correct-answer-group/ChooseAnswerGroupImageUpload.d.ts

@@ -0,0 +1,13 @@
+export declare function ChooseAnswerGroupImageUploadItem({ index, itemIndex, imageUrl, onChange, onRemove, }: {
+    index: number;
+    itemIndex: number;
+    imageUrl: string;
+    onChange: (url: string) => void;
+    onRemove: () => void;
+}): import("react").JSX.Element;
+export declare function ChooseAnswerGroupOptionImageField({ itemIndex, optionIndex, imageUrl, onChange, }: {
+    itemIndex: number;
+    optionIndex: number;
+    imageUrl: string;
+    onChange: (url: string) => void;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '../../../../components/ui/button';
+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 resolveDisplayUrl(imageUrl, previewOverride, fetchedPreviewUrl) {
+    if (previewOverride) {
+        return previewOverride;
+    }
+    if (fetchedPreviewUrl) {
+        return fetchedPreviewUrl;
+    }
+    if (imageUrl.startsWith('http') || imageUrl.startsWith('blob:')) {
+        return imageUrl;
+    }
+    return '';
+}
+export function ChooseAnswerGroupImageUploadItem({ index, itemIndex, imageUrl, onChange, onRemove, }) {
+    const [previewOverride, setPreviewOverride] = useState('');
+    const { previewUrl: fetchedPreviewUrl } = usePresignedFileUrl(imageUrl);
+    const displayUrl = resolveDisplayUrl(imageUrl, previewOverride, fetchedPreviewUrl);
+    return (_jsxs("div", { className: "space-y-2 rounded-lg border border-gray-200 bg-gray-50/40 p-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-teal-100 text-xs font-semibold text-teal-700", children: index + 1 }), _jsx("div", { className: "flex-1", children: _jsx(FileUpload, { id: `choose-answer-group-image-${itemIndex}-${index}`, label: "", accept: "image/*", value: imageUrl, onChange: onChange, onPresignedUrlChange: setPreviewOverride, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: onRemove, title: "Xo\u00E1 \u1EA3nh n\u00E0y", className: "h-8 w-8 text-gray-400 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-4 w-4" }) })] }), displayUrl && (_jsx("div", { className: "pl-8", children: _jsx(ImagePreview, { src: displayUrl, alt: `Hình ảnh ${index + 1}`, className: "h-40 w-full max-w-sm rounded-lg border border-gray-200 bg-white object-contain" }) }))] }));
+}
+export function ChooseAnswerGroupOptionImageField({ itemIndex, optionIndex, imageUrl, onChange, }) {
+    const [previewOverride, setPreviewOverride] = useState('');
+    const { previewUrl: fetchedPreviewUrl } = usePresignedFileUrl(imageUrl);
+    const displayUrl = resolveDisplayUrl(imageUrl, previewOverride, fetchedPreviewUrl);
+    return (_jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(FileUpload, { id: `choose-answer-group-option-${itemIndex}-${optionIndex}`, label: "", accept: "image/*", value: imageUrl, onChange: onChange, onPresignedUrlChange: setPreviewOverride, maxSize: 5, placeholder: `Upload ảnh đáp án ${optionIndex + 1}`, autoUpload: true, prefix: "questions/options" }), displayUrl && (_jsx(ImagePreview, { src: displayUrl, alt: `Đáp án ${optionIndex + 1}`, className: "h-28 w-28 rounded-lg border border-gray-200 bg-white object-contain" }))] }));
+}

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

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

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

@@ -2,21 +2,57 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BookOpen, Check, CircleHelp, Lightbulb, Star } from 'lucide-react';
 import { cn } from '../../../../shared/lib/utils';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { getChooseAnswerGroupOptionImageSrc, 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" })) }));
+}
 const OPTION_LABELS = ['A', 'B', 'C', 'D', 'E', 'F'];
-export function ChooseTheCorrectAnswerGroupClient({ questionData, isReviewMode = false, userAnswers = [], }) {
+export function ChooseTheCorrectAnswerGroupClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, }) {
     const items = questionData.items || [];
+    const handleSelect = (itemIndex, optionId) => {
+        const item = items[itemIndex];
+        if (isReviewMode || item?.isExample || !onAnswerChange) {
+            return;
+        }
+        const next = items.map((_, index) => userAnswers[index] ?? '');
+        next[itemIndex] = optionId;
+        onAnswerChange(next);
+    };
     return (_jsxs("div", { className: "space-y-4", children: [questionData.instruction && (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800", children: questionData.instruction })), questionData.passage && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-white p-5 shadow-xs", children: [_jsxs("div", { className: "mb-2.5 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-indigo-700", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: "B\u00E0i \u0111\u1ECDc (Reading Passage)" })] }), _jsx("div", { className: "prose prose-sm max-w-none text-gray-800 leading-relaxed", dangerouslySetInnerHTML: { __html: questionData.passage } })] })), items.map((item, itemIndex) => {
                 const selectedId = userAnswers[itemIndex];
-                return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-4 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] }))] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-4", children: [_jsx("p", { className: "text-sm font-semibold leading-relaxed text-gray-800", children: item.question || 'Câu hỏi chưa được nhập' }), _jsx("div", { className: "space-y-2", children: item.options.map((option, optionIndex) => {
+                const canSelect = !isReviewMode && !item.isExample && Boolean(onAnswerChange);
+                return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-4 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] }))] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-4", children: [_jsx("p", { className: "text-sm font-semibold leading-relaxed text-gray-800", children: item.question || 'Câu hỏi chưa được nhập' }), toChooseAnswerGroupImageUrls(item.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toChooseAnswerGroupImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1} (${imageIndex + 1})` }, `${item.questionNumber}-${imageIndex}`))) })), item.optionType === 'image' ? (_jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: item.options.map((option, optionIndex) => {
+                                        const isCorrect = option.id === item.correctAnswer;
+                                        const isSelected = option.id === selectedId;
+                                        const optionImageSrc = getChooseAnswerGroupOptionImageSrc(option);
+                                        return (_jsxs("button", { type: "button", disabled: !canSelect, onClick: () => handleSelect(itemIndex, option.id), className: cn('flex flex-col items-center gap-2 rounded-lg border-2 px-3 py-2.5 text-sm text-left', isReviewMode && isCorrect
+                                                ? 'border-green-400 bg-green-50'
+                                                : isSelected
+                                                    ? 'border-blue-400 bg-blue-50'
+                                                    : 'border-gray-200 bg-white', canSelect && 'cursor-pointer hover:border-blue-300', !canSelect && 'cursor-default'), children: [_jsx("span", { className: cn('flex h-7 w-7 items-center justify-center rounded-md text-xs font-bold', isReviewMode && isCorrect
+                                                        ? 'bg-green-500 text-white'
+                                                        : isSelected
+                                                            ? 'bg-blue-500 text-white'
+                                                            : 'bg-gray-100 text-gray-600'), children: OPTION_LABELS[optionIndex] || optionIndex + 1 }), optionImageSrc ? (_jsx(ClientImageItem, { url: optionImageSrc, alt: `Đáp án ${OPTION_LABELS[optionIndex] || optionIndex + 1}` })) : (_jsx("span", { className: "text-xs text-gray-500", children: `Đáp án ${OPTION_LABELS[optionIndex] || optionIndex + 1}` })), isReviewMode && isCorrect && _jsx(Check, { className: "h-4 w-4 text-green-600" })] }, option.id || optionIndex));
+                                    }) })) : (_jsx("div", { className: "space-y-2", children: item.options.map((option, optionIndex) => {
                                         const isCorrect = option.id === item.correctAnswer;
                                         const isSelected = option.id === selectedId;
-                                        return (_jsxs("div", { className: cn('flex items-center gap-3 rounded-lg border-2 px-3 py-2.5 text-sm', isReviewMode && isCorrect
+                                        return (_jsxs("button", { type: "button", disabled: !canSelect, onClick: () => handleSelect(itemIndex, option.id), className: cn('flex w-full items-center gap-3 rounded-lg border-2 px-3 py-2.5 text-sm text-left', isReviewMode && isCorrect
                                                 ? 'border-green-400 bg-green-50'
                                                 : isSelected
                                                     ? 'border-blue-400 bg-blue-50'
-                                                    : 'border-gray-200 bg-white'), children: [_jsx("span", { className: cn('flex h-7 w-7 items-center justify-center rounded-md text-xs font-bold', isReviewMode && isCorrect
+                                                    : 'border-gray-200 bg-white', canSelect && 'cursor-pointer hover:border-blue-300', !canSelect && 'cursor-default'), children: [_jsx("span", { className: cn('flex h-7 w-7 items-center justify-center rounded-md text-xs font-bold', isReviewMode && isCorrect
                                                         ? 'bg-green-500 text-white'
-                                                        : 'bg-gray-100 text-gray-600'), children: OPTION_LABELS[optionIndex] || optionIndex + 1 }), _jsx("span", { className: "flex-1 text-gray-800", children: option.text || `Đáp án ${OPTION_LABELS[optionIndex]}` }), isReviewMode && isCorrect && _jsx(Check, { className: "h-4 w-4 text-green-600" })] }, option.id || optionIndex));
-                                    }) })] })] }, `${item.questionNumber}-${itemIndex}`));
+                                                        : isSelected
+                                                            ? 'bg-blue-500 text-white'
+                                                            : 'bg-gray-100 text-gray-600'), children: OPTION_LABELS[optionIndex] || optionIndex + 1 }), _jsx("span", { className: "flex-1 text-gray-800", children: option.text || `Đáp án ${OPTION_LABELS[optionIndex]}` }), isReviewMode && isCorrect && _jsx(Check, { className: "h-4 w-4 text-green-600" })] }, option.id || optionIndex));
+                                    }) }))] })] }, `${item.questionNumber}-${itemIndex}`));
             }), isReviewMode && questionData.explanation && (_jsxs("div", { className: "flex items-start gap-2 rounded-xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-800", children: [_jsx(Lightbulb, { className: "mt-0.5 h-4 w-4 flex-shrink-0" }), questionData.explanation] }))] }));
 }

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

@@ -10,8 +10,10 @@ import { Card, CardContent, CardHeader, CardTitle } from '../../../../components
 import { Switch } from '../../../../components/ui/switch';
 import { RichTextEditor } from '../../../../components/shared/RichTextEditor';
 import { useDebouncedCallback } from '../../../../shared/lib/hooks';
-import { Eye, Pencil, Plus, Star, Trash2 } from 'lucide-react';
+import { Eye, ImageIcon, Pencil, Plus, Star, Trash2, Type } from 'lucide-react';
 import { ChooseTheCorrectAnswerGroupClient } from './ChooseTheCorrectAnswerGroupClient';
+import { ChooseAnswerGroupImageUploadItem, ChooseAnswerGroupOptionImageField, } from './ChooseAnswerGroupImageUpload';
+import { fromChooseAnswerGroupImageUrls, getChooseAnswerGroupOptionImageSrc, isChooseAnswerGroupOptionFilled, toChooseAnswerGroupImageUrls, toEditableChooseAnswerGroupImageUrls, } from '../../_shared/types/choose-the-correct-answer-group.type';
 const OPTION_LABELS = ['A', 'B', 'C', 'D', 'E', 'F'];
 function createEmptyItem(questionNumber) {
     return {
@@ -32,20 +34,25 @@ function normalizeItems(rawItems) {
     if (!Array.isArray(rawItems) || rawItems.length === 0) {
         return [createEmptyItem(1)];
     }
-    return rawItems.map((item, index) => ({
-        question: item.question || '',
-        optionType: item.optionType === 'image' ? 'image' : 'text',
-        options: Array.isArray(item.options) && item.options.length >= 2
-            ? item.options.map((option, optionIndex) => ({
-                id: option.id || `opt-${optionIndex + 1}`,
-                text: option.text || '',
-            }))
-            : createEmptyItem(index + 1).options,
-        correctAnswer: item.correctAnswer || 'opt-1',
-        isExample: item.isExample === true,
-        points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
-        questionNumber: item.questionNumber || index + 1,
-    }));
+    return rawItems.map((item, index) => {
+        const imageUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(item.imageUrl));
+        return {
+            question: item.question || '',
+            optionType: item.optionType === 'image' ? 'image' : 'text',
+            options: Array.isArray(item.options) && item.options.length >= 2
+                ? item.options.map((option, optionIndex) => ({
+                    id: option.id || `opt-${optionIndex + 1}`,
+                    text: option.text || '',
+                    ...(option.imageUrl ? { imageUrl: option.imageUrl } : {}),
+                }))
+                : createEmptyItem(index + 1).options,
+            correctAnswer: item.correctAnswer || 'opt-1',
+            isExample: item.isExample === true,
+            points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+            questionNumber: item.questionNumber || index + 1,
+            ...(imageUrl !== undefined ? { imageUrl } : {}),
+        };
+    });
 }
 function sumPoints(items) {
     return items.reduce((total, item) => (item.isExample ? total : total + (typeof item.points === 'number' ? item.points : 1)), 0);
@@ -102,11 +109,11 @@ export function ChooseTheCorrectAnswerGroupCreator({ initialData, onChange, exte
             if (!item.question.trim()) {
                 nextErrors.push(`Câu ${index + 1}: nội dung câu hỏi là bắt buộc.`);
             }
-            const filledOptions = item.options.filter((option) => option.text.trim() !== '');
+            const filledOptions = item.options.filter((option) => (isChooseAnswerGroupOptionFilled(option, item.optionType)));
             if (filledOptions.length < 2) {
                 nextErrors.push(`Câu ${index + 1}: cần ít nhất 2 đáp án.`);
             }
-            if (!item.options.some((option) => option.id === item.correctAnswer && option.text.trim() !== '')) {
+            if (!item.options.some((option) => (option.id === item.correctAnswer && isChooseAnswerGroupOptionFilled(option, item.optionType)))) {
                 nextErrors.push(`Câu ${index + 1}: hãy chọn đáp án đúng.`);
             }
         });
@@ -128,12 +135,12 @@ export function ChooseTheCorrectAnswerGroupCreator({ initialData, onChange, exte
     const updateItem = (index, patch) => {
         setItems((current) => current.map((item, itemIndex) => (itemIndex === index ? { ...item, ...patch } : item)));
     };
-    const updateOptionText = (itemIndex, optionIndex, text) => {
+    const updateOption = (itemIndex, optionIndex, patch) => {
         setItems((current) => current.map((item, index) => {
             if (index !== itemIndex) {
                 return item;
             }
-            const options = item.options.map((option, currentOptionIndex) => (currentOptionIndex === optionIndex ? { ...option, text } : option));
+            const options = item.options.map((option, currentOptionIndex) => (currentOptionIndex === optionIndex ? { ...option, ...patch } : option));
             return { ...item, options };
         }));
     };
@@ -157,7 +164,20 @@ export function ChooseTheCorrectAnswerGroupCreator({ initialData, onChange, exte
     return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", variant: "outline", onClick: () => setIsClientMode(true), children: [_jsx(Eye, { className: "mr-2 h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] }) }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Nh\u00F3m ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "group-instruction", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "group-instruction", value: instruction, onChange: (event) => setInstruction(event.target.value), placeholder: "Choose the correct answer." })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "N\u1ED9i dung b\u00E0i \u0111\u1ECDc (Passage - Tu\u1EF3 ch\u1ECDn)" }), _jsx(RichTextEditor, { value: passage, onChange: setPassage, minHeightClassName: "min-h-[160px]" })] }), _jsxs("div", { className: "rounded-xl border border-gray-200 bg-gray-50 p-4", children: [_jsx(PointsInput, { value: sumPoints(items), allowZero: true, readOnly: true }), _jsx("p", { className: "mt-2 text-xs text-gray-500", children: "T\u1ED5ng \u0111i\u1EC3m \u0111\u01B0\u1EE3c c\u1ED9ng t\u1EEB c\u00E1c c\u00E2u kh\u00F4ng ph\u1EA3i example." })] })] })] }), items.map((item, itemIndex) => (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0", children: [_jsxs(CardTitle, { className: "text-base", children: ["C\u00E2u ", itemIndex + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeItem(itemIndex), disabled: items.length <= 1, children: _jsx(Trash2, { className: "h-4 w-4" }) })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between rounded-lg border border-amber-100 bg-amber-50 px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-amber-800", children: [_jsx(Star, { className: "h-4 w-4" }), "C\u00E2u v\u00ED d\u1EE5"] }), _jsx(Switch, { checked: item.isExample === true, onCheckedChange: (checked) => updateItem(itemIndex, {
                                             isExample: checked,
                                             points: checked ? 0 : (item.points || 1),
-                                        }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "C\u00E2u h\u1ECFi" }), _jsx(Textarea, { value: item.question, onChange: (event) => updateItem(itemIndex, { question: event.target.value }), rows: 2, placeholder: "A place for someone to stay or live is called" })] }), _jsx("div", { className: "space-y-2", children: item.options.map((option, optionIndex) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: `correct-${itemIndex}`, checked: item.correctAnswer === option.id, onChange: () => updateItem(itemIndex, { correctAnswer: option.id }) }), _jsx("span", { className: "w-6 text-sm font-semibold text-gray-600", children: OPTION_LABELS[optionIndex] || optionIndex + 1 }), _jsx(Input, { value: option.text, onChange: (event) => updateOptionText(itemIndex, optionIndex, event.target.value), placeholder: `Đáp án ${OPTION_LABELS[optionIndex]}` })] }, option.id))) }), !item.isExample && (_jsx(PointsInput, { value: item.points, allowZero: true, onChange: (event) => updateItem(itemIndex, {
+                                        }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "C\u00E2u h\u1ECFi" }), _jsx(Textarea, { value: item.question, onChange: (event) => updateItem(itemIndex, { question: event.target.value }), rows: 2, placeholder: "A place for someone to stay or live is called" })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "flex items-center gap-2", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-teal-500" }), "H\u00ECnh \u1EA3nh (tu\u1EF3 ch\u1ECDn)"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => {
+                                                    const nextUrls = [...toEditableChooseAnswerGroupImageUrls(item.imageUrl), ''];
+                                                    updateItem(itemIndex, { imageUrl: nextUrls });
+                                                }, className: "gap-1.5 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm h\u00ECnh \u1EA3nh"] })] }), toEditableChooseAnswerGroupImageUrls(item.imageUrl).length === 0 ? (_jsx("div", { className: "rounded-lg border border-dashed border-gray-200 bg-gray-50/50 p-3 text-xs text-gray-500", children: "Ch\u01B0a c\u00F3 h\u00ECnh \u1EA3nh. Nh\u1EA5n \"Th\u00EAm h\u00ECnh \u1EA3nh\" \u0111\u1EC3 upload \u1EA3nh minh ho\u1EA1 cho c\u00E2u h\u1ECFi." })) : (_jsx("div", { className: "space-y-3", children: toEditableChooseAnswerGroupImageUrls(item.imageUrl).map((imageUrl, imageIndex) => (_jsx(ChooseAnswerGroupImageUploadItem, { index: imageIndex, itemIndex: itemIndex, imageUrl: imageUrl, onChange: (url) => {
+                                                const nextUrls = toEditableChooseAnswerGroupImageUrls(item.imageUrl);
+                                                nextUrls[imageIndex] = url;
+                                                updateItem(itemIndex, { imageUrl: nextUrls });
+                                            }, onRemove: () => {
+                                                const nextUrls = toEditableChooseAnswerGroupImageUrls(item.imageUrl)
+                                                    .filter((_, idx) => idx !== imageIndex);
+                                                updateItem(itemIndex, { imageUrl: fromChooseAnswerGroupImageUrls(nextUrls) });
+                                            } }, `${itemIndex}-${imageIndex}`))) }))] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { children: "\u0110\u00E1p \u00E1n" }), _jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-1.5", children: [_jsx(Type, { className: `h-3.5 w-3.5 ${item.optionType === 'text' ? 'text-indigo-600' : 'text-gray-400'}` }), _jsx("span", { className: `text-xs font-medium ${item.optionType === 'text' ? 'text-indigo-600' : 'text-gray-400'}`, children: "Text" }), _jsx(Switch, { checked: item.optionType === 'image', onCheckedChange: (checked) => updateItem(itemIndex, {
+                                                            optionType: checked ? 'image' : 'text',
+                                                        }) }), _jsx(ImageIcon, { className: `h-3.5 w-3.5 ${item.optionType === 'image' ? 'text-indigo-600' : 'text-gray-400'}` }), _jsx("span", { className: `text-xs font-medium ${item.optionType === 'image' ? 'text-indigo-600' : 'text-gray-400'}`, children: "\u1EA2nh" })] })] }), item.options.map((option, optionIndex) => (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("input", { type: "radio", name: `correct-${itemIndex}`, checked: item.correctAnswer === option.id, onChange: () => updateItem(itemIndex, { correctAnswer: option.id }), className: "mt-2" }), _jsx("span", { className: "mt-2 w-6 text-sm font-semibold text-gray-600", children: OPTION_LABELS[optionIndex] || optionIndex + 1 }), item.optionType === 'image' ? (_jsx(ChooseAnswerGroupOptionImageField, { itemIndex: itemIndex, optionIndex: optionIndex, imageUrl: getChooseAnswerGroupOptionImageSrc(option), onChange: (url) => updateOption(itemIndex, optionIndex, { imageUrl: url, text: '' }) })) : (_jsx(Input, { value: option.text, onChange: (event) => updateOption(itemIndex, optionIndex, { text: event.target.value }), placeholder: `Đáp án ${OPTION_LABELS[optionIndex]}` }))] }, option.id)))] }), !item.isExample && (_jsx(PointsInput, { value: item.points, allowZero: true, onChange: (event) => updateItem(itemIndex, {
                                     points: parsePointsValue(event.target.value, true),
                                 }) }))] })] }, `item-${itemIndex}`))), _jsxs(Button, { type: "button", variant: "outline", onClick: addItem, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Th\u00EAm c\u00E2u h\u1ECFi"] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Gi\u1EA3i th\u00EDch" }) }), _jsx(CardContent, { children: _jsx(Textarea, { id: "explanation", value: explanation, onChange: (event) => setExplanation(event.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3 }) })] }), allErrors.length > 0 && (_jsx("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700", children: allErrors.map((error) => (_jsx("p", { children: error }, error))) }))] }));
 }

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

@@ -1,4 +1,4 @@
-import type { ChooseTheCorrectAnswerGroupData, ChooseTheCorrectAnswerGroupItemData } from '../../_shared/types/choose-the-correct-answer-group.type';
+import { type ChooseTheCorrectAnswerGroupData, type ChooseTheCorrectAnswerGroupItemData } from '../../_shared/types/choose-the-correct-answer-group.type';
 export declare function createEmptyChooseAnswerGroupItem(questionNumber: number): ChooseTheCorrectAnswerGroupItemData;
 export declare function mapChooseAnswerGroupItem(item: unknown, index: number, fallbackAnswer?: string): ChooseTheCorrectAnswerGroupItemData;
 export declare function mapQuestionToChooseAnswerGroupData(question: Record<string, unknown> | null | undefined): ChooseTheCorrectAnswerGroupData;

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

@@ -1,3 +1,4 @@
+import { fromChooseAnswerGroupImageUrls, toChooseAnswerGroupImageUrls, } from '../../_shared/types/choose-the-correct-answer-group.type';
 function isRecord(value) {
     return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
@@ -36,9 +37,11 @@ export function mapChooseAnswerGroupItem(item, index, fallbackAnswer) {
                 };
             }
             const optionRecord = asRecord(option);
+            const imageUrl = asString(optionRecord.imageUrl);
             return {
                 id: asString(optionRecord.id, `opt-${optionIndex + 1}`),
                 text: asString(optionRecord.text),
+                ...(imageUrl ? { imageUrl } : {}),
             };
         })
         : [
@@ -47,6 +50,7 @@ export function mapChooseAnswerGroupItem(item, index, fallbackAnswer) {
             { id: 'opt-3', text: '' },
         ];
     const isExample = record.isExample === true;
+    const imageUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(content.imageUrl));
     return {
         question: asString(content.question) || asString(record.question),
         optionType: asString(content.optionType) === 'image' ? 'image' : 'text',
@@ -55,6 +59,7 @@ export function mapChooseAnswerGroupItem(item, index, fallbackAnswer) {
         isExample,
         points: isExample ? 0 : typeof record.points === 'number' ? record.points : 1,
         questionNumber: typeof record.questionNumber === 'number' ? record.questionNumber : index + 1,
+        ...(imageUrl !== undefined ? { imageUrl } : {}),
     };
 }
 export function mapQuestionToChooseAnswerGroupData(question) {