@tinyweb_dev/oe-exam-sdk 0.2.12 → 0.2.14

package/dist/components/questions/_shared/types/choose-then-answer-group.type.d.ts

@@ -0,0 +1,47 @@
+import type { MutableRefObject } from 'react';
+export declare const CHOOSE_THEN_ANSWER_ITEM_TYPE: "CHOOSE_THEN_ANSWER";
+export declare const CHOOSE_THEN_ANSWER_GROUP_DEFAULT_INSTRUCTION = "Read and choose. Then answer for you.";
+export interface ChooseThenAnswerOption {
+    id: string;
+    text: string;
+}
+export interface ChooseThenAnswerItemAnswer {
+    optionId: string;
+}
+export interface ChooseThenAnswerStudentItemAnswer {
+    optionId: string;
+    text: string;
+}
+export interface ChooseThenAnswerGroupItemData {
+    question: string;
+    options: ChooseThenAnswerOption[];
+    optionId: string;
+    isExample?: boolean;
+    points: number;
+    questionNumber: number;
+}
+export interface ChooseThenAnswerGroupData {
+    title?: string;
+    instruction: string;
+    items: ChooseThenAnswerGroupItemData[];
+    explanation?: string;
+    points?: number;
+}
+export interface ChooseThenAnswerGroupCreatorProps {
+    initialData?: ChooseThenAnswerGroupData;
+    onSave?: (data: ChooseThenAnswerGroupData) => void;
+    onCancel?: () => void;
+    onChange?: (data: ChooseThenAnswerGroupData) => void;
+    externalErrors?: string[];
+    onUnsavedChangesChange?: (hasUnsavedChanges: boolean) => void;
+    validationRef?: MutableRefObject<{
+        triggerValidation: () => Promise<boolean>;
+        getFormData?: () => ChooseThenAnswerGroupData;
+    } | null>;
+}
+export interface ChooseThenAnswerGroupClientProps {
+    questionData: ChooseThenAnswerGroupData;
+    isReviewMode?: boolean;
+    userAnswers?: ChooseThenAnswerStudentItemAnswer[];
+    onAnswerChange?: (index: number, next: ChooseThenAnswerStudentItemAnswer) => void;
+}

package/dist/components/questions/_shared/types/choose-then-answer-group.type.js

@@ -0,0 +1,2 @@
+export const CHOOSE_THEN_ANSWER_ITEM_TYPE = 'CHOOSE_THEN_ANSWER';
+export const CHOOSE_THEN_ANSWER_GROUP_DEFAULT_INSTRUCTION = 'Read and choose. Then answer for you.';

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

@@ -8,24 +8,36 @@ export interface FillInBlankGroupItemAnswer {
 export interface FillInBlankGroupStudentItemAnswer {
     answers: string[];
 }
+/** Per-blank choice list. Index i ↔ `{i}`. `null` = free-type (WFSF WITH_OPTIONS). */
+export type FillInBlankWordBankEntry = {
+    options: string[];
+} | null;
 export interface FillInBlankGroupItemData {
     question: string;
     answers: string[][];
     caseSensitive?: boolean;
-    imageUrl?: string;
+    imageUrl?: string | string[];
     audioUrl?: string;
     showHints?: boolean;
     hints?: string[];
+    /** Per-blank dropdown options for this item. Overrides group `wordBank`. */
+    wordBank?: FillInBlankWordBankEntry[];
     isExample?: boolean;
     points: number;
     questionNumber: number;
 }
 export interface FillInBlankGroupData {
     instruction: string;
+    /** Shared reading passage (HTML) above the item list. */
+    passage?: string;
     audioUrl?: string;
-    imageUrl?: string;
+    imageUrl?: string | string[];
     showHints?: boolean;
     hints?: string[];
+    /** When `WITH_OPTIONS`, blanks with `wordBank[i].options` render as dropdowns. */
+    viewMode?: 'WITH_OPTIONS';
+    /** Fallback per-blank options applied to every item that has no own `wordBank`. */
+    wordBank?: FillInBlankWordBankEntry[];
     items: FillInBlankGroupItemData[];
     explanation?: string;
     points?: number;

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

@@ -15,5 +15,7 @@ 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 './sort-words-into-categories.type';
+export * from './choose-then-answer-group.type';
 export * from './match-columns-to-make-sentences.type';
 export * from './spontaneous-qa-group.type';

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

@@ -15,5 +15,7 @@ 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 './sort-words-into-categories.type';
+export * from './choose-then-answer-group.type';
 export * from './match-columns-to-make-sentences.type';
 export * from './spontaneous-qa-group.type';

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

@@ -1,15 +1,24 @@
 import type { MutableRefObject } from 'react';
 export declare const MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION = "Look and complete.";
 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 interface MatchWordToPictureGroupItemData {
-    imageUrl: string;
+    imageUrl?: string | string[];
     correctAnswer: string;
     isExample?: boolean;
     points: number;
     questionNumber: number;
 }
 export interface MatchWordToPictureGroupData {
+    title?: string;
     instruction: string;
+    /** Shared reading passage (HTML) above the match-word-to-picture UI. */
+    passage?: string;
+    /** Shared listening audio played once under the instruction. */
+    audioUrl?: string;
+    /** Shared cover/scene photo under the instruction (can coexist with item images). */
+    imageUrl?: string | string[];
     wordBank: string[];
     items: MatchWordToPictureGroupItemData[];
     explanation?: string;

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

@@ -1,2 +1,21 @@
 export const MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION = 'Look and complete.';
 export const MATCH_WORD_TO_PICTURE_ITEM_TYPE = 'MATCH_WORD_TO_PICTURE';
+export function toMatchWordToPictureImageUrls(value) {
+    if (Array.isArray(value)) {
+        return value
+            .filter((url) => typeof url === 'string')
+            .map((url) => url.trim())
+            .filter((url) => url !== '');
+    }
+    if (typeof value === 'string' && value.trim() !== '') {
+        return [value.trim()];
+    }
+    return [];
+}
+export function fromMatchWordToPictureImageUrls(value) {
+    const urls = toMatchWordToPictureImageUrls(value);
+    if (urls.length === 0) {
+        return undefined;
+    }
+    return urls.length === 1 ? urls[0] : urls;
+}

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

@@ -2,10 +2,12 @@ import type { MutableRefObject } from 'react';
 export declare const MATCHING_WITH_LINES_GROUP_DEFAULT_INSTRUCTION = "Look and match.";
 export interface MatchingWithLinesRightItem {
     id: string;
-    text: string;
+    text?: string;
+    imageUrl?: string;
 }
 export interface MatchingWithLinesGroupItemData {
-    imageUrl: string;
+    imageUrl?: string;
+    text?: string;
     correctAnswer: string;
     isExample?: boolean;
     points: number;
@@ -14,6 +16,11 @@ export interface MatchingWithLinesGroupItemData {
 export interface MatchingWithLinesGroupData {
     title?: string;
     instruction: string;
+    /** Shared reading passage (HTML) above the matching board. */
+    passage?: string;
+    audioUrl?: string;
+    /** Shared cover / portrait image (not a left/right match item). */
+    imageUrl?: string;
     rightItems: MatchingWithLinesRightItem[];
     items: MatchingWithLinesGroupItemData[];
     explanation?: string;

package/dist/components/questions/_shared/types/sort-words-into-categories.type.d.ts

@@ -0,0 +1,43 @@
+import type { MutableRefObject } from 'react';
+export declare const SORT_WORDS_INTO_CATEGORIES_DEFAULT_INSTRUCTION = "Read and sort the words.";
+export interface SortWordsCategory {
+    id: string;
+    name: string;
+}
+export interface SortWordsWordItem {
+    id: string;
+    text: string;
+    categoryId: string;
+    isExample?: boolean;
+    points: number;
+}
+export interface SortWordsPlacement {
+    wordId: string;
+    categoryId: string;
+}
+export interface SortWordsIntoCategoriesData {
+    title?: string;
+    instruction: string;
+    categories: SortWordsCategory[];
+    words: SortWordsWordItem[];
+    explanation?: string;
+    points?: number;
+}
+export interface SortWordsIntoCategoriesCreatorProps {
+    initialData?: SortWordsIntoCategoriesData;
+    onSave?: (data: SortWordsIntoCategoriesData) => void;
+    onCancel?: () => void;
+    onChange?: (data: SortWordsIntoCategoriesData) => void;
+    externalErrors?: string[];
+    onUnsavedChangesChange?: (hasUnsavedChanges: boolean) => void;
+    validationRef?: MutableRefObject<{
+        triggerValidation: () => Promise<boolean>;
+        getFormData?: () => SortWordsIntoCategoriesData;
+    } | null>;
+}
+export interface SortWordsIntoCategoriesClientProps {
+    questionData: SortWordsIntoCategoriesData;
+    isReviewMode?: boolean;
+    userPlacements?: SortWordsPlacement[];
+    onPlacementsChange?: (next: SortWordsPlacement[]) => void;
+}

package/dist/components/questions/_shared/types/sort-words-into-categories.type.js

@@ -0,0 +1 @@
+export const SORT_WORDS_INTO_CATEGORIES_DEFAULT_INSTRUCTION = 'Read and sort the words.';

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

@@ -71,6 +71,8 @@ const getQuestionTypeName = (type) => {
         'MATCH_COLUMNS_TO_MAKE_SENTENCES': 'Ghép cột thành câu',
         'MATCH_WORD_TO_PICTURE_GROUP': 'Nối từ với tranh (nhóm)',
         'WORD_ORDERING_GROUP': 'Sắp xếp từ (nhóm)',
+        'SORT_WORDS_INTO_CATEGORIES': 'Sắp xếp từ vào nhóm',
+        'CHOOSE_THEN_ANSWER_GROUP': 'Chọn đáp án rồi trả lời',
     };
     return type ? typeMap[type] || type.replace(/_/g, ' ').toLowerCase() : 'Chưa xác định';
 };

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

@@ -31,6 +31,8 @@ export function QuestionTypeSelector({ value, onValueChange, disabled, }) {
         'MATCH_COLUMNS_TO_MAKE_SENTENCES',
         'MATCH_WORD_TO_PICTURE_GROUP',
         'WORD_ORDERING_GROUP',
+        'SORT_WORDS_INTO_CATEGORIES',
+        'CHOOSE_THEN_ANSWER_GROUP',
         'WRITE_SENTENCES',
         'FILL_IN_BLANK_GROUP',
     ];

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

@@ -14,6 +14,7 @@ import { chooseTheCorrectAnswerRegistration } from '../types/choose-the-correct-
 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 { chooseThenAnswerGroupRegistration } from '../types/choose-then-answer-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';
@@ -49,6 +50,7 @@ import { wordFillStructuredFormRegistration } from '../types/word-fill-structure
 import { wordOrderAndMatchGroupRegistration } from '../types/word-order-and-match-group/register';
 import { crosswordPuzzleRegistration } from '../types/crossword-puzzle/register';
 import { findWordsInMatrixRegistration } from '../types/find-words-in-matrix/register';
+import { sortWordsIntoCategoriesRegistration } from '../types/sort-words-into-categories/register';
 import { matchColumnsToMakeSentencesRegistration } from '../types/match-columns-to-make-sentences/register';
 import { matchWordToPictureGroupRegistration } from '../types/match-word-to-picture-group/register';
 import { wordOrderingGroupRegistration } from '../types/word-ordering-group/register';
@@ -58,6 +60,7 @@ export const questionTypeRegistry = {
     CHOOSE_THE_CORRECT_ANSWER_GROUP: chooseTheCorrectAnswerGroupRegistration,
     TRUE_FALSE_GROUP: trueFalseGroupRegistration,
     TRUE_FALSE_CORRECT_GROUP: trueFalseCorrectGroupRegistration,
+    CHOOSE_THEN_ANSWER_GROUP: chooseThenAnswerGroupRegistration,
     FILL_IN_BLANK_GROUP: fillInBlankGroupRegistration,
     CROSS_OUT_WORD_GROUP: crossOutWordGroupRegistration,
     WORD_ORDER_AND_MATCH_GROUP: wordOrderAndMatchGroupRegistration,
@@ -104,6 +107,7 @@ export const questionTypeRegistry = {
     WORD_FILL_STRUCTURED_FORM: wordFillStructuredFormRegistration,
     CROSSWORD_PUZZLE: crosswordPuzzleRegistration,
     FIND_WORDS_IN_MATRIX: findWordsInMatrixRegistration,
+    SORT_WORDS_INTO_CATEGORIES: sortWordsIntoCategoriesRegistration,
     MATCH_COLUMNS_TO_MAKE_SENTENCES: matchColumnsToMakeSentencesRegistration,
     MATCH_WORD_TO_PICTURE_GROUP: matchWordToPictureGroupRegistration,
     WORD_ORDERING_GROUP: wordOrderingGroupRegistration,

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

@@ -5,21 +5,45 @@ import { Input } from '../../../../components/ui/input';
 import { Label } from '../../../../components/ui/label';
 import { CheckCircle2, XCircle, BookOpen } from 'lucide-react';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { toAnswerTheQuestionImageUrls, } from '../../_shared/types/answer-the-question.type';
 import { useState } from 'react';
+function isDisplayableMediaUrl(value) {
+    return (value.startsWith('http://')
+        || value.startsWith('https://')
+        || value.startsWith('blob:')
+        || value.startsWith('data:')
+        || value.startsWith('/'));
+}
+function MediaPreview({ src, alt }) {
+    const { previewUrl, isLoading } = usePresignedFileUrl(src);
+    if (isLoading) {
+        return _jsx("div", { className: "h-16 w-16 animate-pulse rounded-md bg-slate-100" });
+    }
+    const url = previewUrl || (isDisplayableMediaUrl(src) ? src : '');
+    if (!url) {
+        return null;
+    }
+    return (_jsx("img", { src: url, alt: alt, className: "h-auto max-h-80 w-full object-contain", onError: (event) => {
+            const target = event.target;
+            target.onerror = null;
+            target.src = '/images/placeholder-image.svg';
+        } }));
+}
 export function AnswerTheQuestionClient({ questionData, onSubmit, isReviewMode = false, userAnswer, autoFillCorrectAnswers = false, explanation, }) {
     const [answer, setAnswer] = useState(userAnswer || '');
-    const { previewUrl: imagePreviewUrl } = usePresignedFileUrl(questionData.imageUrl || '');
-    if (!questionData.question) {
+    const imageUrls = toAnswerTheQuestionImageUrls(questionData.imageUrl);
+    if (!questionData.question && imageUrls.length === 0) {
         return (_jsx(Card, { children: _jsx(CardContent, { className: "p-6", children: _jsx("p", { className: "text-gray-500", children: "Kh\u00F4ng c\u00F3 d\u1EEF li\u1EC7u c\u00E2u h\u1ECFi" }) }) }));
     }
     const isExample = questionData.isExample || false;
+    const correctAnswer = questionData.correctAnswer || '';
     const displayedAnswer = autoFillCorrectAnswers || isExample
-        ? questionData.correctAnswer
+        ? correctAnswer
         : answer;
     const isCorrect = isReviewMode && userAnswer !== undefined
-        ? userAnswer.trim().toLowerCase() === questionData.correctAnswer.trim().toLowerCase()
+        ? userAnswer.trim().toLowerCase() === correctAnswer.trim().toLowerCase()
         : undefined;
-    return (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-teal-400 to-cyan-500" }), _jsxs(CardContent, { className: "p-6 space-y-6", children: [(questionData.title || questionData.groupContent) && (_jsxs("div", { className: "rounded-xl border border-indigo-200 bg-gradient-to-r from-indigo-50 to-blue-50 p-4 space-y-2", children: [questionData.title && (_jsx("h3", { className: "text-base font-bold text-indigo-900", children: questionData.title })), questionData.groupContent && (_jsx("p", { className: "text-sm text-indigo-700 leading-relaxed whitespace-pre-wrap", children: questionData.groupContent }))] })), (imagePreviewUrl || questionData.imageUrl) && (_jsx("div", { className: "flex justify-center", children: _jsx("div", { className: "relative max-w-lg overflow-hidden rounded-xl border border-gray-200 bg-gray-50 shadow-sm", children: _jsx("img", { src: imagePreviewUrl || questionData.imageUrl, alt: "Question", className: "h-auto max-h-80 w-full object-contain" }) }) })), _jsxs("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-5", children: [isExample && (_jsxs("div", { className: "mb-2 inline-flex items-center gap-1.5 rounded-full bg-amber-100 border border-amber-300 px-3 py-1", children: [_jsx(BookOpen, { className: "h-3.5 w-3.5 text-amber-600" }), _jsx("span", { className: "text-xs font-semibold text-amber-700 uppercase tracking-wide", children: "Example" })] })), _jsx(Label, { className: "text-base font-semibold text-gray-800 mb-3 block", children: questionData.question }), questionData.suggestedAnswers && questionData.suggestedAnswers.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mt-2 mb-1", children: questionData.suggestedAnswers.map((suggestion, index) => (_jsx("button", { type: "button", disabled: isReviewMode || isExample, onClick: () => {
+    return (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-teal-400 to-cyan-500" }), _jsxs(CardContent, { className: "p-6 space-y-6", children: [(questionData.title || questionData.groupContent) && (_jsxs("div", { className: "rounded-xl border border-indigo-200 bg-gradient-to-r from-indigo-50 to-blue-50 p-4 space-y-2", children: [questionData.title && (_jsx("h3", { className: "text-base font-bold text-indigo-900", children: questionData.title })), questionData.groupContent && (_jsx("p", { className: "text-sm text-indigo-700 leading-relaxed whitespace-pre-wrap", children: questionData.groupContent }))] })), imageUrls.length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: imageUrls.map((url, imageIndex) => (_jsx("div", { className: "relative max-w-lg overflow-hidden rounded-xl border border-gray-200 bg-gray-50 shadow-sm", children: _jsx(MediaPreview, { src: url, alt: `Question image ${imageIndex + 1}` }) }, `atq-image-${imageIndex}`))) })), _jsxs("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-5", children: [isExample && (_jsxs("div", { className: "mb-2 inline-flex items-center gap-1.5 rounded-full bg-amber-100 border border-amber-300 px-3 py-1", children: [_jsx(BookOpen, { className: "h-3.5 w-3.5 text-amber-600" }), _jsx("span", { className: "text-xs font-semibold text-amber-700 uppercase tracking-wide", children: "Example" })] })), questionData.question ? (_jsx(Label, { className: "text-base font-semibold text-gray-800 mb-3 block", children: questionData.question })) : null, questionData.suggestedAnswers && questionData.suggestedAnswers.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mt-2 mb-1", children: questionData.suggestedAnswers.map((suggestion, index) => (_jsx("button", { type: "button", disabled: isReviewMode || isExample, onClick: () => {
                                         if (!isReviewMode && !isExample) {
                                             setAnswer(suggestion);
                                             onSubmit?.(suggestion);
@@ -33,5 +57,5 @@ export function AnswerTheQuestionClient({ questionData, onSubmit, isReviewMode =
                                             ? isCorrect
                                                 ? 'border-green-400 bg-green-50 text-green-700'
                                                 : 'border-red-400 bg-red-50 text-red-700'
-                                            : 'border-teal-300 focus:border-teal-500 focus:ring-teal-200'}` }), questionData.suffixText && (_jsx("span", { className: "text-base font-medium text-gray-700", children: questionData.suffixText })), isReviewMode && isCorrect !== undefined && (_jsx("span", { className: "flex items-center gap-1", children: isCorrect ? (_jsx(CheckCircle2, { className: "h-5 w-5 text-green-500" })) : (_jsx(XCircle, { className: "h-5 w-5 text-red-500" })) }))] }), isReviewMode && isCorrect === false && (_jsxs("div", { className: "mt-3 flex items-center gap-2 rounded-lg bg-green-50 border border-green-200 px-4 py-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }), _jsxs("span", { className: "text-sm text-green-700", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", _jsx("strong", { children: questionData.correctAnswer })] })] })), autoFillCorrectAnswers && (_jsxs("div", { className: "mt-3 flex items-center gap-2 rounded-lg bg-teal-50 border border-teal-200 px-4 py-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-teal-600" }), _jsxs("span", { className: "text-sm text-teal-700", children: ["\u0110\u00E1p \u00E1n: ", _jsx("strong", { children: questionData.correctAnswer })] })] }))] }), explanation && isReviewMode && (_jsxs("div", { className: "rounded-xl border border-blue-200 bg-blue-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold text-blue-800 mb-1", children: "Gi\u1EA3i th\u00EDch:" }), _jsx("p", { className: "text-sm text-blue-700", children: explanation })] }))] })] }));
+                                            : 'border-teal-300 focus:border-teal-500 focus:ring-teal-200'}` }), questionData.suffixText && (_jsx("span", { className: "text-base font-medium text-gray-700", children: questionData.suffixText })), isReviewMode && isCorrect !== undefined && (_jsx("span", { className: "flex items-center gap-1", children: isCorrect ? (_jsx(CheckCircle2, { className: "h-5 w-5 text-green-500" })) : (_jsx(XCircle, { className: "h-5 w-5 text-red-500" })) }))] }), isReviewMode && isCorrect === false && (_jsxs("div", { className: "mt-3 flex items-center gap-2 rounded-lg bg-green-50 border border-green-200 px-4 py-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }), _jsxs("span", { className: "text-sm text-green-700", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", _jsx("strong", { children: correctAnswer })] })] })), autoFillCorrectAnswers && (_jsxs("div", { className: "mt-3 flex items-center gap-2 rounded-lg bg-teal-50 border border-teal-200 px-4 py-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-teal-600" }), _jsxs("span", { className: "text-sm text-teal-700", children: ["\u0110\u00E1p \u00E1n: ", _jsx("strong", { children: correctAnswer })] })] }))] }), explanation && isReviewMode && (_jsxs("div", { className: "rounded-xl border border-blue-200 bg-blue-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold text-blue-800 mb-1", children: "Gi\u1EA3i th\u00EDch:" }), _jsx("p", { className: "text-sm text-blue-700", children: explanation })] }))] })] }));
 }

package/dist/components/questions/types/answer-the-question/map-answer-the-question-data.d.ts

@@ -0,0 +1,2 @@
+import type { AnswerTheQuestionData } from '../../_shared/types/answer-the-question.type';
+export declare function mapQuestionToAnswerTheQuestionData(question: Record<string, unknown> | null | undefined): AnswerTheQuestionData;

package/dist/components/questions/types/answer-the-question/map-answer-the-question-data.js

@@ -0,0 +1,56 @@
+import { fromAnswerTheQuestionImageUrls } from '../../_shared/types/answer-the-question.type';
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function asRecord(value) {
+    return isRecord(value) ? value : {};
+}
+function asString(value, fallback = '') {
+    return typeof value === 'string' ? value : fallback;
+}
+function asStringArray(value) {
+    if (!Array.isArray(value)) {
+        return undefined;
+    }
+    const items = value
+        .filter((item) => typeof item === 'string')
+        .map((item) => item.trim())
+        .filter((item) => item !== '');
+    return items.length > 0 ? items : undefined;
+}
+function resolveCorrectAnswer(correct, answer) {
+    if (typeof correct.answer === 'string') {
+        return correct.answer;
+    }
+    if (typeof answer.correctAnswer === 'string') {
+        return answer.correctAnswer;
+    }
+    if (typeof answer.answer === 'string') {
+        return answer.answer;
+    }
+    const expected = correct.expectedAnswers ?? answer.expectedAnswers;
+    if (Array.isArray(expected) && typeof expected[0] === 'string') {
+        return expected[0];
+    }
+    return '';
+}
+export function mapQuestionToAnswerTheQuestionData(question) {
+    const source = asRecord(question);
+    const content = asRecord(source.content);
+    const answer = asRecord(source.answer);
+    const correctAnswer = asRecord(source.correctAnswer ?? source.correct_answer ?? answer);
+    const imageUrl = fromAnswerTheQuestionImageUrls(content.imageUrl ?? answer.imageUrl ?? source.imageUrl);
+    return {
+        question: asString(content.question) || asString(answer.question),
+        correctAnswer: resolveCorrectAnswer(correctAnswer, answer),
+        suffixText: asString(content.suffixText) || asString(answer.suffixText) || undefined,
+        prefixText: asString(content.prefixText) || asString(answer.prefixText) || undefined,
+        points: typeof source.points === 'number' ? source.points : undefined,
+        isExample: source.isExample === true || answer.isExample === true,
+        suggestedAnswers: asStringArray(content.suggestedAnswers) || asStringArray(answer.suggestedAnswers),
+        ...(imageUrl !== undefined ? { imageUrl } : {}),
+        title: asString(content.title) || asString(answer.title) || undefined,
+        groupContent: asString(content.groupContent) || asString(answer.groupContent) || undefined,
+        explanation: asString(source.explanation) || asString(answer.explanation) || undefined,
+    };
+}

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

@@ -1,3 +1,4 @@
+import { fromAnswerTheQuestionImageUrls } from '../../_shared/types/answer-the-question.type';
 export const transformAnswerTheQuestion = (question) => {
     const answerData = question.answer;
     if (!answerData?.question) {
@@ -12,14 +13,19 @@ export const transformAnswerTheQuestion = (question) => {
     if (answerData.prefixText) {
         apiContent.prefixText = answerData.prefixText;
     }
-    // Build basicGroupData when any group field is present (title, imageUrl, groupContent)
-    const hasGroupData = !!(answerData.imageUrl || answerData.title || answerData.subtitle || answerData.groupContent);
+    const imageUrl = fromAnswerTheQuestionImageUrls(answerData.imageUrl);
+    if (imageUrl !== undefined) {
+        apiContent.imageUrl = imageUrl;
+    }
+    // Group chrome (title/passage) stays on questionGroup.payload.
+    // Per-question image lives on content.imageUrl — same split as FILL_IN_BLANK.
+    const hasGroupData = !!(answerData.title || answerData.subtitle || answerData.groupContent);
     const basicGroupData = hasGroupData
         ? {
             title: answerData.title || '',
             subtitle: answerData.subtitle || '',
             content: answerData.groupContent || '',
-            imageUrl: answerData.imageUrl || '',
+            imageUrl: '',
         }
         : undefined;
     return {

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

@@ -1,13 +1,57 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BookOpen, CircleHelp, Lightbulb, Sparkles, Star } from 'lucide-react';
+import { BookOpen, CircleHelp, Lightbulb, Sparkles, Star, Volume2 } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { toAnswerTheQuestionGroupImageUrls } from '../../_shared/types/answer-the-question-group.type';
+function isDisplayableMediaUrl(value) {
+    return (value.startsWith('http://')
+        || value.startsWith('https://')
+        || value.startsWith('blob:')
+        || value.startsWith('data:')
+        || value.startsWith('/'));
+}
+function isPlayableAudioUrl(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 MediaPreview({ src, kind = 'image', alt }) {
+    const fileKey = kind === 'audio' ? toPresignKey(src) : src;
+    const { previewUrl, isLoading } = usePresignedFileUrl(fileKey);
+    if (isLoading) {
+        return _jsx("div", { className: "h-16 w-16 animate-pulse rounded-md bg-slate-100" });
+    }
+    const url = previewUrl
+        || (kind === 'audio'
+            ? (isPlayableAudioUrl(fileKey) ? fileKey : '')
+            : (isDisplayableMediaUrl(src) ? src : ''));
+    if (!url) {
+        return null;
+    }
+    if (kind === 'audio') {
+        return _jsx("audio", { controls: true, src: url, className: "h-8 max-w-full", preload: "metadata" });
+    }
+    return (_jsx("div", { className: "max-w-sm overflow-hidden rounded-lg border border-gray-200 bg-gray-50", children: _jsx("img", { src: url, alt: alt, className: "max-h-56 w-auto object-contain p-2", onError: (event) => {
+                const target = event.target;
+                target.onerror = null;
+                target.src = '/images/placeholder-image.svg';
+            } }) }));
+}
 export function AnswerTheQuestionGroupClient({ questionData, isReviewMode = false, userAnswers = [], }) {
     const items = questionData.items || [];
-    return (_jsxs("div", { className: "space-y-4", children: [questionData.instruction && (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800", children: questionData.instruction })), questionData.passage && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-white p-5 shadow-xs", children: [_jsxs("div", { className: "mb-2.5 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-indigo-700", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: "B\u00E0i \u0111\u1ECDc (Reading Passage)" })] }), _jsx("div", { className: "prose prose-sm max-w-none leading-relaxed text-gray-800", dangerouslySetInnerHTML: { __html: questionData.passage } })] })), items.map((item, itemIndex) => {
+    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.audioUrl && (_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(MediaPreview, { src: questionData.audioUrl, kind: "audio", alt: "Group audio" })] })), toAnswerTheQuestionGroupImageUrls(questionData.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toAnswerTheQuestionGroupImageUrls(questionData.imageUrl).map((url, imageIndex) => (_jsx(MediaPreview, { src: url, alt: `Hình ảnh (${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: "prose prose-sm max-w-none leading-relaxed text-gray-800", dangerouslySetInnerHTML: { __html: questionData.passage } })] })), items.map((item, itemIndex) => {
                 const userValue = userAnswers[itemIndex] || '';
                 const expectedAnswers = Array.isArray(item.expectedAnswers)
                     ? item.expectedAnswers.filter((answer) => answer.trim() !== '')
                     : [];
-                return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-4 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] })), _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-violet-100 px-2 py-0.5 text-xs font-semibold text-violet-700", children: [_jsx(Sparkles, { className: "h-3 w-3" }), "AI"] })] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-4", children: [_jsx("p", { className: "text-sm font-semibold leading-relaxed text-gray-800", children: item.question || 'Câu hỏi chưa được nhập' }), _jsx("div", { className: "rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-700", children: userValue || (isReviewMode ? '(Chưa trả lời)' : 'Học sinh sẽ nhập câu trả lời tại đây') }), isReviewMode && expectedAnswers.length > 0 && (_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs font-medium text-gray-500", children: "\u0110\u00E1p \u00E1n m\u1EABu (AI)" }), _jsx("ul", { className: "list-disc space-y-1 pl-5 text-sm text-gray-700", children: expectedAnswers.map((answer) => (_jsx("li", { children: answer }, answer))) })] }))] })] }, `${item.questionNumber}-${itemIndex}`));
+                return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-4 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] })), _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-violet-100 px-2 py-0.5 text-xs font-semibold text-violet-700", children: [_jsx(Sparkles, { className: "h-3 w-3" }), "AI"] })] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-4", children: [toAnswerTheQuestionGroupImageUrls(item.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toAnswerTheQuestionGroupImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(MediaPreview, { src: url, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1} (${imageIndex + 1})` }, `${item.questionNumber}-${imageIndex}`))) })), _jsx("p", { className: "text-sm font-semibold leading-relaxed text-gray-800", children: item.question || 'Câu hỏi chưa được nhập' }), _jsx("div", { className: "rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-700", children: userValue || (isReviewMode ? '(Chưa trả lời)' : 'Học sinh sẽ nhập câu trả lời tại đây') }), isReviewMode && expectedAnswers.length > 0 && (_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs font-medium text-gray-500", children: "\u0110\u00E1p \u00E1n m\u1EABu (AI)" }), _jsx("ul", { className: "list-disc space-y-1 pl-5 text-sm text-gray-700", children: expectedAnswers.map((answer) => (_jsx("li", { children: answer }, answer))) })] }))] })] }, `${item.questionNumber}-${itemIndex}`));
             }), isReviewMode && questionData.explanation && (_jsxs("div", { className: "flex items-start gap-2 rounded-xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-800", children: [_jsx(Lightbulb, { className: "mt-0.5 h-4 w-4 flex-shrink-0" }), questionData.explanation] }))] }));
 }

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

@@ -12,6 +12,7 @@ import { RichTextEditor } from '../../../../components/shared/RichTextEditor';
 import { useDebouncedCallback } from '../../../../shared/lib/hooks';
 import { Eye, Pencil, Plus, Sparkles, Star, Trash2 } from 'lucide-react';
 import { AnswerTheQuestionGroupClient } from './AnswerTheQuestionGroupClient';
+import { toAnswerTheQuestionGroupImageUrls } from '../../_shared/types/answer-the-question-group.type';
 const DEFAULT_INSTRUCTION = 'Read the text again and answer the questions.';
 function createEmptyItem(questionNumber) {
     return {
@@ -38,6 +39,7 @@ function normalizeItems(rawItems) {
         isExample: item.isExample === true,
         points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
         questionNumber: item.questionNumber || index + 1,
+        ...(item.imageUrl !== undefined ? { imageUrl: item.imageUrl } : {}),
     }));
 }
 function sumPoints(items) {
@@ -49,6 +51,8 @@ function isContentEmpty(html) {
 export function AnswerTheQuestionGroupCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }) {
     const [instruction, setInstruction] = useState(initialData?.instruction || DEFAULT_INSTRUCTION);
     const [passage, setPassage] = useState(initialData?.passage || '');
+    const [audioUrl] = useState(initialData?.audioUrl || '');
+    const [imageUrl] = useState(toAnswerTheQuestionGroupImageUrls(initialData?.imageUrl));
     const [items, setItems] = useState(() => normalizeItems(initialData?.items));
     const [explanation, setExplanation] = useState(initialData?.explanation || '');
     const [isClientMode, setIsClientMode] = useState(false);
@@ -61,6 +65,8 @@ export function AnswerTheQuestionGroupCreator({ initialData, onChange, externalE
     const buildPayload = (nextInstruction = instruction, nextPassage = passage, nextItems = items, nextExplanation = explanation) => ({
         instruction: nextInstruction,
         ...(!isContentEmpty(nextPassage) ? { passage: nextPassage.trim() } : {}),
+        ...(audioUrl.trim() ? { audioUrl: audioUrl.trim() } : {}),
+        ...(imageUrl.length ? { imageUrl } : {}),
         items: nextItems,
         explanation: nextExplanation,
         points: sumPoints(nextItems),
@@ -77,7 +83,7 @@ export function AnswerTheQuestionGroupCreator({ initialData, onChange, externalE
         previousPayloadRef.current = serialized;
         onUnsavedChangesChange?.(true);
         debouncedOnChange(payload);
-    }, [instruction, passage, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
+    }, [instruction, passage, audioUrl, imageUrl, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
     const validate = () => {
         const nextErrors = [];
         if (!instruction.trim()) {
@@ -111,7 +117,7 @@ export function AnswerTheQuestionGroupCreator({ initialData, onChange, externalE
             },
             getFormData: () => buildPayload(),
         };
-    }, [validationRef, instruction, passage, items, explanation]);
+    }, [validationRef, instruction, passage, audioUrl, imageUrl, items, explanation]);
     const updateItem = (index, patch) => {
         setItems((prev) => {
             const next = [...prev];

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

@@ -1,3 +1,4 @@
+import { fromAnswerTheQuestionGroupImageUrls, toAnswerTheQuestionGroupImageUrls, } from '../../_shared/types/answer-the-question-group.type';
 const DEFAULT_INSTRUCTION = 'Read the text again and answer the questions.';
 function isRecord(value) {
     return typeof value === 'object' && value !== null && !Array.isArray(value);
@@ -8,6 +9,13 @@ function asRecord(value) {
 function asString(value, fallback = '') {
     return typeof value === 'string' ? value : fallback;
 }
+function asOptionalUrl(value) {
+    if (typeof value !== 'string') {
+        return undefined;
+    }
+    const trimmed = value.trim();
+    return trimmed !== '' ? trimmed : undefined;
+}
 function normalizeExpectedAnswers(value) {
     if (!Array.isArray(value)) {
         return [];
@@ -37,12 +45,14 @@ export function mapAnswerTheQuestionGroupItem(item, index, fallbackAnswers) {
         : (normalizeExpectedAnswers(fallbackAnswers).length > 0
             ? normalizeExpectedAnswers(fallbackAnswers)
             : ['']);
+    const imageUrl = fromAnswerTheQuestionGroupImageUrls(content.imageUrl ?? record.imageUrl);
     return {
         question: asString(content.question) || asString(record.question),
         expectedAnswers,
         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 mapQuestionToAnswerTheQuestionGroupData(question) {
@@ -56,18 +66,27 @@ export function mapQuestionToAnswerTheQuestionGroupData(question) {
         : [];
     if (Array.isArray(content.items)) {
         const items = content.items.map((item, index) => mapAnswerTheQuestionGroupItem(item, index, fallbackAnswers[index]?.expectedAnswers));
+        const meta = asRecord(content.meta);
+        const audioUrl = asOptionalUrl(meta.audioUrl);
+        const imageUrl = toAnswerTheQuestionGroupImageUrls(meta.imageUrl);
         return {
-            instruction: asString(asRecord(content.meta).instruction) || DEFAULT_INSTRUCTION,
-            passage: asString(asRecord(content.meta).passage),
+            instruction: asString(meta.instruction) || DEFAULT_INSTRUCTION,
+            passage: asString(meta.passage),
+            ...(audioUrl ? { audioUrl } : {}),
+            ...(imageUrl.length ? { imageUrl } : {}),
             items,
             explanation,
             points: items.reduce((total, item) => (item.isExample ? total : total + (item.points || 0)), 0),
         };
     }
     if (Array.isArray(answer.items)) {
+        const audioUrl = asOptionalUrl(answer.audioUrl);
+        const imageUrl = toAnswerTheQuestionGroupImageUrls(answer.imageUrl);
         return {
             instruction: asString(answer.instruction, DEFAULT_INSTRUCTION),
             passage: asString(answer.passage),
+            ...(audioUrl ? { audioUrl } : {}),
+            ...(imageUrl.length ? { imageUrl } : {}),
             items: answer.items,
             explanation,
             points: typeof answer.points === 'number' ? answer.points : 1,