@tinyweb_dev/oe-exam-sdk 0.2.11 → 0.2.13

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

@@ -9,7 +9,7 @@ interface MoversFillInBlankGroupRendererProps {
     questionCount: number;
     instruction: string;
     audioUrl?: string;
-    imageUrl?: string;
+    imageUrl?: string | string[];
     showHints?: boolean;
     hints?: string[];
     questions: FillInBlankGroupQuestion[];

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

@@ -8,7 +8,7 @@ import { ResolvedImage } from '../../../../../components/common/ResolvedImage';
 import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
 import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
 import CambridgeYleAudioPlayer from '../../../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer';
-import { extractPlaceholderIndices, isBlankMatch, padStudentAnswers, splitStem, } from '../../../../questions/types/fill-in-blank-group/blank-utils';
+import { extractPlaceholderIndices, isBlankMatch, padStudentAnswers, splitStem, toFillInBlankImageUrls, } from '../../../../questions/types/fill-in-blank-group/blank-utils';
 function emptyAnswer(blankCount) {
     return { answers: Array.from({ length: blankCount }, () => '') };
 }
@@ -56,5 +56,5 @@ function ItemCard({ question, answer, onAnswerChange, isReviewMode, correctAnswe
                         }) })] }), isReviewMode && !question.isExample && expected.length > 0 && (_jsxs("div", { className: "mt-2 rounded-lg border border-emerald-200 bg-emerald-50 px-2.5 py-2 text-sm text-emerald-800", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", expected.map((alts) => alts.join(' / ') || '(trống)').join(' | ')] }))] }));
 }
 export function MoversFillInBlankGroupRenderer({ partNumber, partName, questionCount, instruction, audioUrl, imageUrl, showHints = false, hints = [], questions, answers, onAnswerChange, isReviewMode = false, correctAnswerMap, }) {
-    return (_jsxs("div", { className: "relative flex h-full flex-col gap-4 overflow-y-auto custom-scrollbar sm:gap-6", children: [_jsxs("div", { className: "flex flex-col gap-2 p-3 sm:gap-3 sm:px-6 sm:pt-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode })] }), (audioUrl || imageUrl) && (_jsxs("div", { className: "sticky top-0 z-20 flex flex-col gap-3 border-b border-gray-100 bg-white/95 p-3 pb-2 shadow-sm backdrop-blur sm:px-6", children: [audioUrl && _jsx(CambridgeYleAudioPlayer, { audioSrc: audioUrl, compact: true }), imageUrl && (_jsx("div", { className: "flex justify-center", children: _jsx(ResolvedImage, { src: imageUrl, alt: "Shared illustration", className: "max-h-[180px] rounded-lg object-contain" }) }))] })), showHints && hints.length > 0 && !isReviewMode && (_jsx("div", { className: "flex flex-wrap gap-2 px-3 sm:px-6", children: hints.map((hint) => (_jsx("span", { className: "rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700", children: hint }, hint))) })), _jsx("div", { className: "grid grid-cols-1 gap-3 p-3 sm:grid-cols-2 sm:px-6 lg:grid-cols-3", children: questions.map((question) => (_jsx(ItemCard, { question: question, answer: answers[question.id], onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, correctAnswer: correctAnswerMap?.[question.id] }, question.id))) })] }));
+    return (_jsxs("div", { className: "relative flex h-full flex-col gap-4 overflow-y-auto custom-scrollbar sm:gap-6", children: [_jsxs("div", { className: "flex flex-col gap-2 p-3 sm:gap-3 sm:px-6 sm:pt-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode })] }), (audioUrl || toFillInBlankImageUrls(imageUrl).length > 0) && (_jsxs("div", { className: "sticky top-0 z-20 flex flex-col gap-3 border-b border-gray-100 bg-white/95 p-3 pb-2 shadow-sm backdrop-blur sm:px-6", children: [audioUrl && _jsx(CambridgeYleAudioPlayer, { audioSrc: audioUrl, compact: true }), toFillInBlankImageUrls(imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: toFillInBlankImageUrls(imageUrl).map((url, imageIndex) => (_jsx(ResolvedImage, { src: url, alt: `Shared illustration ${imageIndex + 1}`, className: "max-h-[180px] rounded-lg object-contain" }, `group-image-${imageIndex}`))) }))] })), showHints && hints.length > 0 && !isReviewMode && (_jsx("div", { className: "flex flex-wrap gap-2 px-3 sm:px-6", children: hints.map((hint) => (_jsx("span", { className: "rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700", children: hint }, hint))) })), _jsx("div", { className: "grid grid-cols-1 gap-3 p-3 sm:grid-cols-2 sm:px-6 lg:grid-cols-3", children: questions.map((question) => (_jsx(ItemCard, { question: question, answer: answers[question.id], onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, correctAnswer: correctAnswerMap?.[question.id] }, question.id))) })] }));
 }

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

@@ -14,6 +14,7 @@ export function MoversWordOrderingGroupRenderer({ partNumber, partName, question
                         items: data.questions.map((question) => ({
                             words: question.words,
                             answer: question.answer,
+                            imageUrl: question.imageUrl,
                             isExample: question.isExample,
                             points: question.points,
                             questionNumber: question.questionNumber,

package/dist/components/exams/take/utils/question-transformers.d.ts

@@ -308,7 +308,7 @@ export declare function transformFillInBlankGroup(questions: ApiQuestion[]): {
     questions: FillInBlankGroupQuestion[];
     instruction: string;
     audioUrl?: string;
-    imageUrl?: string;
+    imageUrl?: string | string[];
     showHints?: boolean;
     hints?: string[];
 };
@@ -556,6 +556,7 @@ export interface WordOrderingGroupQuestionItem {
     questionNumber: number;
     words: string[];
     answer: string[];
+    imageUrl?: string;
     isExample: boolean;
     points: number;
 }

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

@@ -1424,11 +1424,13 @@ export function transformWordOrderingGroupTake(questions) {
             const isExample = item.isExample === true;
             const fromItem = Array.isArray(item.correctAnswer?.answer) ? item.correctAnswer.answer : [];
             const fromParent = Array.isArray(parentCorrect[index]) ? parentCorrect[index] : [];
+            const imageUrl = typeof item.content?.imageUrl === 'string' ? item.content.imageUrl.trim() : '';
             return {
                 id: `${parent?.id || 'q'}-item-${index}`,
                 questionNumber: item.questionNumber || index + 1,
                 words: Array.isArray(item.content?.words) ? item.content.words : [],
                 answer: fromItem.length ? fromItem : fromParent,
+                ...(imageUrl ? { imageUrl } : {}),
                 isExample,
                 points: isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
             };

package/dist/components/questions/_shared/types/answer-the-question-group.type.d.ts

@@ -6,9 +6,12 @@ export interface AnswerTheQuestionGroupItemData {
     points: number;
     questionNumber: number;
 }
+export declare function toAnswerTheQuestionGroupImageUrls(value?: unknown): string[];
 export interface AnswerTheQuestionGroupData {
     instruction: string;
     passage?: string;
+    /** Shared images above the question list (1 or many). */
+    imageUrl?: string[];
     items: AnswerTheQuestionGroupItemData[];
     explanation?: string;
     points?: number;

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

@@ -1 +1,12 @@
-export {};
+export function toAnswerTheQuestionGroupImageUrls(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 [];
+}

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/match-word-to-picture-group.type.d.ts

@@ -2,14 +2,17 @@ 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 interface MatchWordToPictureGroupItemData {
-    imageUrl: string;
+    imageUrl?: string;
     correctAnswer: string;
     isExample?: boolean;
     points: number;
     questionNumber: number;
 }
 export interface MatchWordToPictureGroupData {
+    title?: string;
     instruction: string;
+    /** Shared photo when items are numbered labels on one picture. */
+    imageUrl?: string;
     wordBank: string[];
     items: MatchWordToPictureGroupItemData[];
     explanation?: string;

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/word-ordering-group.type.d.ts

@@ -4,6 +4,7 @@ export declare const WORD_ORDERING_ITEM_TYPE: "WORD_ORDERING";
 export interface WordOrderingGroupItemData {
     words: string[];
     answer: string[];
+    imageUrl?: string;
     isExample?: boolean;
     points: number;
     questionNumber: number;

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

@@ -1,9 +1,20 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BookOpen, CircleHelp, Lightbulb, Sparkles, Star } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { toAnswerTheQuestionGroupImageUrls } from '../../_shared/types/answer-the-question-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-indigo-500" }) })) : (_jsx("img", { src: src, alt: alt || 'Image', className: "max-h-56 w-auto object-contain p-2" })) }));
+}
 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 })), toAnswerTheQuestionGroupImageUrls(questionData.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toAnswerTheQuestionGroupImageUrls(questionData.imageUrl).map((url, imageIndex) => (_jsx(ClientImageItem, { url: 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() !== '')

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

@@ -49,6 +49,9 @@ 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 [imageUrl] = useState(Array.isArray(initialData?.imageUrl)
+        ? initialData.imageUrl.filter((url) => typeof url === 'string' && url.trim() !== '')
+        : []);
     const [items, setItems] = useState(() => normalizeItems(initialData?.items));
     const [explanation, setExplanation] = useState(initialData?.explanation || '');
     const [isClientMode, setIsClientMode] = useState(false);
@@ -61,6 +64,7 @@ export function AnswerTheQuestionGroupCreator({ initialData, onChange, externalE
     const buildPayload = (nextInstruction = instruction, nextPassage = passage, nextItems = items, nextExplanation = explanation) => ({
         instruction: nextInstruction,
         ...(!isContentEmpty(nextPassage) ? { passage: nextPassage.trim() } : {}),
+        ...(imageUrl.length ? { imageUrl } : {}),
         items: nextItems,
         explanation: nextExplanation,
         points: sumPoints(nextItems),
@@ -77,7 +81,7 @@ export function AnswerTheQuestionGroupCreator({ initialData, onChange, externalE
         previousPayloadRef.current = serialized;
         onUnsavedChangesChange?.(true);
         debouncedOnChange(payload);
-    }, [instruction, passage, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
+    }, [instruction, passage, imageUrl, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
     const validate = () => {
         const nextErrors = [];
         if (!instruction.trim()) {
@@ -111,7 +115,7 @@ export function AnswerTheQuestionGroupCreator({ initialData, onChange, externalE
             },
             getFormData: () => buildPayload(),
         };
-    }, [validationRef, instruction, passage, items, explanation]);
+    }, [validationRef, instruction, passage, 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 { 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);
@@ -56,18 +57,22 @@ export function mapQuestionToAnswerTheQuestionGroupData(question) {
         : [];
     if (Array.isArray(content.items)) {
         const items = content.items.map((item, index) => mapAnswerTheQuestionGroupItem(item, index, fallbackAnswers[index]?.expectedAnswers));
+        const imageUrl = toAnswerTheQuestionGroupImageUrls(asRecord(content.meta).imageUrl);
         return {
             instruction: asString(asRecord(content.meta).instruction) || DEFAULT_INSTRUCTION,
             passage: asString(asRecord(content.meta).passage),
+            ...(imageUrl.length ? { imageUrl } : {}),
             items,
             explanation,
             points: items.reduce((total, item) => (item.isExample ? total : total + (item.points || 0)), 0),
         };
     }
     if (Array.isArray(answer.items)) {
+        const imageUrl = toAnswerTheQuestionGroupImageUrls(answer.imageUrl);
         return {
             instruction: asString(answer.instruction, DEFAULT_INSTRUCTION),
             passage: asString(answer.passage),
+            ...(imageUrl.length ? { imageUrl } : {}),
             items: answer.items,
             explanation,
             points: typeof answer.points === 'number' ? answer.points : 1,

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

@@ -1,3 +1,4 @@
+import { toAnswerTheQuestionGroupImageUrls } from '../../_shared/types/answer-the-question-group.type';
 const CHILD_QUESTION_TYPE = 'ANSWER_THE_QUESTION';
 const GRADING_TYPE = 'AI';
 const DEFAULT_INSTRUCTION = 'Read the text again and answer the questions.';
@@ -52,11 +53,13 @@ export const transformAnswerTheQuestionGroup = (question) => {
         };
     });
     const passage = answerData?.passage?.trim();
+    const imageUrl = toAnswerTheQuestionGroupImageUrls(answerData?.imageUrl);
     return {
         apiContent: {
             meta: {
                 instruction: answerData?.instruction || DEFAULT_INSTRUCTION,
                 ...(!isContentEmpty(passage) ? { passage } : {}),
+                ...(imageUrl.length ? { imageUrl } : {}),
                 gradingType: GRADING_TYPE,
                 isAiGraded: true,
             },

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

@@ -1,15 +1,44 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Lightbulb, Star, Volume2 } from 'lucide-react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { BookOpen, Lightbulb, Star, Volume2 } from 'lucide-react';
 import { cn } from '../../../../shared/lib/utils';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-import { blankSlotCount, extractPlaceholderIndices, isBlankMatch, joinSlashAnswers, padStudentAnswers, splitStem, } from './blank-utils';
+import { blankSlotCount, extractPlaceholderIndices, isBlankMatch, joinSlashAnswers, padStudentAnswers, resolveBlankOptions, splitStem, splitStemTextDecorations, toFillInBlankImageUrls, } from './blank-utils';
+const STEM_MARK_STYLE = {
+    fontWeight: 700,
+    fontSize: 20,
+    lineHeight: 1,
+};
+function StemText({ value }) {
+    return (_jsx(_Fragment, { children: splitStemTextDecorations(value).map((fragment, fragmentIndex) => {
+            if (fragment.type === 'br') {
+                return _jsx("br", {}, `br-${fragmentIndex}`);
+            }
+            if (fragment.type === 'tick') {
+                return (_jsx("span", { style: { ...STEM_MARK_STYLE, color: '#16a34a' }, children: fragment.value }, `tick-${fragmentIndex}`));
+            }
+            if (fragment.type === 'cross') {
+                return (_jsx("span", { style: { ...STEM_MARK_STYLE, color: '#dc2626' }, children: fragment.value }, `cross-${fragmentIndex}`));
+            }
+            return _jsx("span", { children: fragment.value }, `text-${fragmentIndex}`);
+        }) }));
+}
+function isDisplayableMediaUrl(value) {
+    return (value.startsWith('http://')
+        || value.startsWith('https://')
+        || value.startsWith('blob:')
+        || value.startsWith('data:')
+        || value.startsWith('/'));
+}
 function MediaPreview({ src, kind, 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 || src;
+    const url = previewUrl || (isDisplayableMediaUrl(src) ? src : '');
+    if (!url) {
+        return null;
+    }
     if (kind === 'audio') {
         return _jsx("audio", { controls: true, src: url, className: "h-8 max-w-full" });
     }
@@ -35,30 +64,36 @@ export function FillInBlankGroupClient({ questionData, isReviewMode = false, use
         next[itemIndex] = { answers: current };
         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.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" })] })), questionData.imageUrl && (_jsx("div", { className: "flex justify-center rounded-lg border border-slate-100 bg-slate-50 p-3", children: _jsx(MediaPreview, { src: questionData.imageUrl, kind: "image", alt: "Group image" }) })), groupHints.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: groupHints.map((hint) => (_jsx("span", { className: "rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700", children: hint }, hint))) })), _jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: 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.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 } })] })), 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" })] })), toFillInBlankImageUrls(questionData.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: toFillInBlankImageUrls(questionData.imageUrl).map((url, imageIndex) => (_jsx(MediaPreview, { src: url, kind: "image", alt: `Group image ${imageIndex + 1}` }, `group-image-${imageIndex}`))) })), groupHints.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: groupHints.map((hint) => (_jsx("span", { className: "rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700", children: hint }, hint))) })), _jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: items.map((item, itemIndex) => {
                     const blankCount = blankSlotCount(item.question || '{0}');
                     const placeholderIndices = extractPlaceholderIndices(item.question || '{0}');
                     const userValue = padStudentAnswers(userAnswers[itemIndex], blankCount);
                     const stem = splitStem(item.question || '{0}');
                     const showItemAudio = Boolean(item.audioUrl) && !questionData.audioUrl;
-                    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-gray-50 px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-blue-600 text-xs font-bold text-white", children: 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: "flex items-center gap-3 p-3", children: [item.imageUrl && (_jsx(MediaPreview, { src: item.imageUrl, kind: "image", alt: `Item ${item.questionNumber}` })), _jsxs("div", { className: "min-w-0 flex-1 space-y-2 text-sm leading-relaxed text-slate-800", children: [showItemAudio && item.audioUrl && (_jsx(MediaPreview, { src: item.audioUrl, kind: "audio", alt: `Item ${item.questionNumber} audio` })), stem.map((part, partIndex) => {
+                    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-gray-50 px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-blue-600 text-xs font-bold text-white", children: 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-3", children: [toFillInBlankImageUrls(item.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap items-center gap-2", children: toFillInBlankImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(MediaPreview, { src: url, kind: "image", alt: `Item ${item.questionNumber} image ${imageIndex + 1}` }, `${item.questionNumber}-${imageIndex}`))) })), _jsxs("div", { className: "min-w-0 space-y-2 text-sm leading-relaxed text-slate-800", children: [showItemAudio && item.audioUrl && (_jsx(MediaPreview, { src: item.audioUrl, kind: "audio", alt: `Item ${item.questionNumber} audio` })), stem.map((part, partIndex) => {
                                                 if (part.type === 'text') {
-                                                    return _jsx("span", { children: part.value }, partIndex);
+                                                    return (_jsx("span", { children: _jsx(StemText, { value: part.value }) }, partIndex));
                                                 }
                                                 const alts = item.answers[part.index] || [];
                                                 const student = userValue[part.index] || '';
                                                 const canEdit = !isReviewMode && !item.isExample && Boolean(onAnswerChange);
                                                 const correct = isReviewMode && isBlankMatch(student, alts);
                                                 const wrong = isReviewMode && student.trim().length > 0 && !correct;
-                                                return (_jsx("input", { type: "text", disabled: !canEdit, value: item.isExample ? (alts[0] || '') : student, onChange: (event) => handleBlankChange(itemIndex, part.index, event.target.value), placeholder: item.isExample ? '' : '...', className: cn('mx-1 inline-block w-16 rounded-md border-2 px-1 py-0.5 text-center text-sm font-semibold outline-none', item.isExample
-                                                        ? 'border-amber-300 bg-amber-50 text-amber-800'
-                                                        : correct
-                                                            ? 'border-emerald-400 bg-emerald-50 text-emerald-800'
-                                                            : wrong
-                                                                ? 'border-rose-400 bg-rose-50 text-rose-800'
-                                                                : canEdit
-                                                                    ? 'border-blue-300 bg-white text-slate-800 focus:border-blue-500'
-                                                                    : 'border-blue-200 bg-blue-50 text-blue-900') }, partIndex));
+                                                const blankOptions = resolveBlankOptions(part.index, item.wordBank, questionData.wordBank);
+                                                const useOptions = Boolean(blankOptions);
+                                                const fieldClass = cn('mx-1 inline-block rounded-md border-2 px-1 py-0.5 text-center text-sm font-semibold outline-none', useOptions ? 'min-w-[5.5rem]' : 'w-16', item.isExample
+                                                    ? 'border-amber-300 bg-amber-50 text-amber-800'
+                                                    : correct
+                                                        ? 'border-emerald-400 bg-emerald-50 text-emerald-800'
+                                                        : wrong
+                                                            ? 'border-rose-400 bg-rose-50 text-rose-800'
+                                                            : canEdit
+                                                                ? 'border-blue-300 bg-white text-slate-800 focus:border-blue-500'
+                                                                : 'border-blue-200 bg-blue-50 text-blue-900');
+                                                if (useOptions && blankOptions) {
+                                                    return (_jsxs("select", { disabled: !canEdit, value: item.isExample ? (alts[0] || '') : student, onChange: (event) => handleBlankChange(itemIndex, part.index, event.target.value), className: fieldClass, children: [!item.isExample && _jsx("option", { value: "", children: "..." }), blankOptions.map((option) => (_jsx("option", { value: option, children: option }, option)))] }, partIndex));
+                                                }
+                                                return (_jsx("input", { type: "text", disabled: !canEdit, value: item.isExample ? (alts[0] || '') : student, onChange: (event) => handleBlankChange(itemIndex, part.index, event.target.value), placeholder: item.isExample ? '' : '...', className: fieldClass }, partIndex));
                                             })] })] }), isReviewMode && !item.isExample && (_jsxs("div", { className: "border-t border-emerald-100 bg-emerald-50 px-3 py-2 text-xs text-emerald-800", children: ["\u0110\u00E1p \u00E1n: ", placeholderIndices.map((index) => joinSlashAnswers(item.answers[index]) || '(trống)').join(' | ')] }))] }, `${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/fill-in-blank-group/FillInBlankGroupCreator.js

@@ -8,12 +8,13 @@ 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 { RichTextEditor } from '../../../../components/shared/RichTextEditor';
 import { useDebouncedCallback } from '../../../../shared/lib/hooks';
 import { Eye, Pencil, Plus, Star, Trash2 } from 'lucide-react';
 import { FillInBlankGroupClient } from './FillInBlankGroupClient';
 import { FillInBlankGroupMediaField } from './FillInBlankGroupMediaField';
 import { createEmptyFillInBlankGroupItem } from './map-fill-in-blank-group-data';
-import { blankSlotCount, extractPlaceholderIndices, joinSlashAnswers, normalizeAnswersMatrix, parseSlashAnswers, } from './blank-utils';
+import { blankSlotCount, extractPlaceholderIndices, fromFillInBlankImageUrls, hasAnyBlankOptions, joinSlashAnswers, normalizeAnswersMatrix, normalizeWordBank, parseSlashAnswers, toFillInBlankImageUrls, } from './blank-utils';
 import { FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION } from '../../_shared/types/fill-in-blank-group.type';
 function parsePointsValue(raw, allowZero = false) {
     if (raw === '')
@@ -27,6 +28,7 @@ function parsePointsValue(raw, allowZero = false) {
 function syncItemAnswers(item) {
     const indices = extractPlaceholderIndices(item.question || '');
     const requiredLength = blankSlotCount(item.question || '');
+    const wordBank = normalizeWordBank(item.wordBank, requiredLength);
     return {
         ...item,
         answers: normalizeAnswersMatrix(item.answers, requiredLength).map((alts, index) => {
@@ -34,6 +36,7 @@ function syncItemAnswers(item) {
                 return [];
             return alts.length > 0 ? alts : [''];
         }),
+        ...(wordBank ? { wordBank } : { wordBank: undefined }),
     };
 }
 function normalizeItems(rawItems) {
@@ -54,8 +57,9 @@ function sumPoints(items) {
 }
 export function FillInBlankGroupCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }) {
     const [instruction, setInstruction] = useState(initialData?.instruction || FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION);
+    const [passage, setPassage] = useState(initialData?.passage || '');
     const [audioUrl, setAudioUrl] = useState(initialData?.audioUrl || '');
-    const [imageUrl, setImageUrl] = useState(initialData?.imageUrl || '');
+    const [imageUrl, setImageUrl] = useState(fromFillInBlankImageUrls(toFillInBlankImageUrls(initialData?.imageUrl)) ?? '');
     const [showHints, setShowHints] = useState(initialData?.showHints === true);
     const [hintsText, setHintsText] = useState((initialData?.hints || []).join(' / '));
     const [items, setItems] = useState(() => normalizeItems(initialData?.items));
@@ -68,16 +72,22 @@ export function FillInBlankGroupCreator({ initialData, onChange, externalErrors,
         onChangeRef.current = onChange;
     }, [onChange]);
     const parseHints = (value) => parseSlashAnswers(value);
-    const buildPayload = (nextInstruction = instruction, nextItems = items, nextExplanation = explanation, nextAudioUrl = audioUrl, nextImageUrl = imageUrl, nextShowHints = showHints, nextHintsText = hintsText) => ({
-        instruction: nextInstruction,
-        audioUrl: nextAudioUrl,
-        imageUrl: nextImageUrl,
-        showHints: nextShowHints,
-        hints: parseHints(nextHintsText),
-        items: nextItems,
-        explanation: nextExplanation,
-        points: sumPoints(nextItems),
-    });
+    const buildPayload = (nextInstruction = instruction, nextItems = items, nextExplanation = explanation, nextAudioUrl = audioUrl, nextImageUrl = imageUrl, nextShowHints = showHints, nextHintsText = hintsText, nextPassage = passage) => {
+        const viewMode = hasAnyBlankOptions(nextItems) ? 'WITH_OPTIONS' : undefined;
+        const groupImageUrl = fromFillInBlankImageUrls(toFillInBlankImageUrls(nextImageUrl));
+        return {
+            instruction: nextInstruction,
+            ...(nextPassage.trim() ? { passage: nextPassage } : {}),
+            audioUrl: nextAudioUrl,
+            ...(groupImageUrl !== undefined ? { imageUrl: groupImageUrl } : {}),
+            showHints: nextShowHints,
+            hints: parseHints(nextHintsText),
+            ...(viewMode ? { viewMode } : {}),
+            items: nextItems,
+            explanation: nextExplanation,
+            points: sumPoints(nextItems),
+        };
+    };
     const debouncedOnChange = useDebouncedCallback((payload) => {
         onChangeRef.current?.(payload);
     }, 300);
@@ -89,7 +99,7 @@ export function FillInBlankGroupCreator({ initialData, onChange, externalErrors,
             debouncedOnChange(payload);
             onUnsavedChangesChange?.(true);
         }
-    }, [instruction, audioUrl, imageUrl, showHints, hintsText, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
+    }, [instruction, passage, audioUrl, imageUrl, showHints, hintsText, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
     const validate = () => {
         const nextErrors = [];
         if (!instruction.trim()) {
@@ -111,6 +121,16 @@ export function FillInBlankGroupCreator({ initialData, onChange, externalErrors,
                 if (!alts.some((alt) => alt.trim())) {
                     nextErrors.push(`Câu ${index + 1}: Blank {${blankIndex}} cần ít nhất một đáp án.`);
                 }
+                const options = item.wordBank?.[blankIndex]?.options || [];
+                if (options.length >= 2) {
+                    const missing = alts
+                        .map((alt) => alt.trim())
+                        .filter(Boolean)
+                        .filter((alt) => !options.some((option) => option.toLowerCase() === alt.toLowerCase()));
+                    if (missing.length > 0) {
+                        nextErrors.push(`Câu ${index + 1}: Đáp án {${blankIndex}} phải nằm trong options (${options.join(' / ')}).`);
+                    }
+                }
             });
         });
         setErrors(nextErrors);
@@ -123,7 +143,7 @@ export function FillInBlankGroupCreator({ initialData, onChange, externalErrors,
                 getFormData: () => buildPayload(),
             };
         }
-    }, [validationRef, instruction, audioUrl, imageUrl, showHints, hintsText, items, explanation]);
+    }, [validationRef, instruction, passage, audioUrl, imageUrl, showHints, hintsText, items, explanation]);
     const updateItem = (index, patch) => {
         setItems((prev) => {
             const next = [...prev];
@@ -148,11 +168,23 @@ export function FillInBlankGroupCreator({ initialData, onChange, externalErrors,
     };
     const currentPayload = buildPayload();
     const displayErrors = externalErrors && externalErrors.length > 0 ? externalErrors : errors;
-    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-medium text-gray-900", children: "T\u1EA1o c\u00E2u h\u1ECFi \u0110i\u1EC1n ch\u1ED7 tr\u1ED1ng (Nh\u00F3m)" }), _jsxs("p", { className: "text-sm text-gray-500", children: ["M\u1ED7i d\u00F2ng l\u00E0 1 stem c\u00F3 ", '{0}', ". C\u00F3 th\u1EC3 th\u00EAm audio/\u1EA3nh chung ho\u1EB7c t\u1EEBng item."] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsClientMode((prev) => !prev), className: "gap-2", children: [isClientMode ? _jsx(Pencil, { className: "h-4 w-4" }) : _jsx(Eye, { className: "h-4 w-4" }), isClientMode ? 'Chế độ chỉnh sửa' : 'Xem trước học sinh'] })] }), displayErrors.length > 0 && (_jsxs("div", { className: "rounded-lg border border-red-200 bg-red-50 p-4", children: [_jsx("h3", { className: "text-sm font-medium text-red-800", children: "C\u1EA7n s\u1EEDa c\u00E1c l\u1ED7i sau:" }), _jsx("ul", { className: "mt-2 list-disc space-y-1 pl-5 text-sm text-red-700", children: displayErrors.map((err, i) => (_jsx("li", { children: err }, i))) })] })), isClientMode ? (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base font-semibold", children: "Xem tr\u01B0\u1EDBc hi\u1EC3n th\u1ECB h\u1ECDc sinh" }) }), _jsx(CardContent, { children: _jsx(FillInBlankGroupClient, { questionData: currentPayload }) })] })) : (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base font-semibold", children: "H\u01B0\u1EDBng d\u1EABn v\u00E0 media chung" }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "instruction", children: "H\u01B0\u1EDBng d\u1EABn b\u00E0i l\u00E0m" }), _jsx(Input, { id: "instruction", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION, className: "mt-1" })] }), _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsx(FillInBlankGroupMediaField, { id: "fib-group-audio", label: "Audio chung (optional)", accept: "audio/*", value: audioUrl, onChange: setAudioUrl }), _jsx(FillInBlankGroupMediaField, { id: "fib-group-image", label: "\u1EA2nh chung (optional)", accept: "image/*", value: imageUrl, onChange: setImageUrl })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "show-hints", checked: showHints, onCheckedChange: setShowHints }), _jsx(Label, { htmlFor: "show-hints", children: "Hi\u1EC7n h\u1ED9p t\u1EEB g\u1EE3i \u00FD chung" })] }), showHints && (_jsx(Input, { value: hintsText, onChange: (e) => setHintsText(e.target.value), placeholder: "am / is / are" }))] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs(CardTitle, { className: "text-base font-semibold", children: ["Danh s\u00E1ch c\u00E2u (", items.length, ")"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addItem, className: "gap-2", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm c\u00E2u"] })] }), _jsx(CardContent, { className: "space-y-4", children: items.map((item, index) => (_jsxs("div", { className: "space-y-3 rounded-lg border border-gray-200 bg-gray-50/50 p-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("span", { className: "flex items-center gap-2 text-sm font-medium text-gray-700", children: [_jsx("span", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-blue-100 text-xs font-semibold text-blue-700", children: item.questionNumber || index + 1 }), "C\u00E2u ", index + 1] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: `example-${index}`, checked: item.isExample || false, onCheckedChange: (checked) => updateItem(index, { isExample: checked, points: checked ? 0 : 1 }) }), _jsxs(Label, { htmlFor: `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-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-medium text-gray-900", children: "T\u1EA1o c\u00E2u h\u1ECFi \u0110i\u1EC1n ch\u1ED7 tr\u1ED1ng (Nh\u00F3m)" }), _jsxs("p", { className: "text-sm text-gray-500", children: ["M\u1ED7i d\u00F2ng l\u00E0 1 stem c\u00F3 ", '{0}', ". C\u00F3 th\u1EC3 th\u00EAm audio/\u1EA3nh chung ho\u1EB7c t\u1EEBng item."] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsClientMode((prev) => !prev), className: "gap-2", children: [isClientMode ? _jsx(Pencil, { className: "h-4 w-4" }) : _jsx(Eye, { className: "h-4 w-4" }), isClientMode ? 'Chế độ chỉnh sửa' : 'Xem trước học sinh'] })] }), displayErrors.length > 0 && (_jsxs("div", { className: "rounded-lg border border-red-200 bg-red-50 p-4", children: [_jsx("h3", { className: "text-sm font-medium text-red-800", children: "C\u1EA7n s\u1EEDa c\u00E1c l\u1ED7i sau:" }), _jsx("ul", { className: "mt-2 list-disc space-y-1 pl-5 text-sm text-red-700", children: displayErrors.map((err, i) => (_jsx("li", { children: err }, i))) })] })), isClientMode ? (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base font-semibold", children: "Xem tr\u01B0\u1EDBc hi\u1EC3n th\u1ECB h\u1ECDc sinh" }) }), _jsx(CardContent, { children: _jsx(FillInBlankGroupClient, { questionData: currentPayload }) })] })) : (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base font-semibold", children: "H\u01B0\u1EDBng d\u1EABn v\u00E0 media chung" }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "instruction", children: "H\u01B0\u1EDBng d\u1EABn b\u00E0i l\u00E0m" }), _jsx(Input, { id: "instruction", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION, className: "mt-1" })] }), _jsxs("div", { children: [_jsx(Label, { children: "N\u1ED9i dung b\u00E0i \u0111\u1ECDc (Passage)" }), _jsx("div", { className: "mt-1", children: _jsx(RichTextEditor, { value: passage, onChange: setPassage, minHeightClassName: "min-h-[160px]" }) })] }), _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsx(FillInBlankGroupMediaField, { id: "fib-group-audio", label: "Audio chung (optional)", accept: "audio/*", value: audioUrl, onChange: setAudioUrl }), _jsx(FillInBlankGroupMediaField, { id: "fib-group-image", label: "\u1EA2nh chung (optional)", accept: "image/*", value: toFillInBlankImageUrls(imageUrl)[0] || '', onChange: setImageUrl })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "show-hints", checked: showHints, onCheckedChange: setShowHints }), _jsx(Label, { htmlFor: "show-hints", children: "Hi\u1EC7n h\u1ED9p t\u1EEB g\u1EE3i \u00FD chung" })] }), showHints && (_jsx(Input, { value: hintsText, onChange: (e) => setHintsText(e.target.value), placeholder: "am / is / are" }))] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs(CardTitle, { className: "text-base font-semibold", children: ["Danh s\u00E1ch c\u00E2u (", items.length, ")"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addItem, className: "gap-2", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm c\u00E2u"] })] }), _jsx(CardContent, { className: "space-y-4", children: items.map((item, index) => (_jsxs("div", { className: "space-y-3 rounded-lg border border-gray-200 bg-gray-50/50 p-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("span", { className: "flex items-center gap-2 text-sm font-medium text-gray-700", children: [_jsx("span", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-blue-100 text-xs font-semibold text-blue-700", children: item.questionNumber || index + 1 }), "C\u00E2u ", index + 1] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: `example-${index}`, checked: item.isExample || false, onCheckedChange: (checked) => updateItem(index, { isExample: checked, points: checked ? 0 : 1 }) }), _jsxs(Label, { htmlFor: `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 > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeItem(index), className: "text-red-500 hover:bg-red-50", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] })] }), _jsxs("div", { children: [_jsxs(Label, { htmlFor: `question-${index}`, children: ["Stem (d\u00F9ng ", '{0}', ", ", '{1}', "...)"] }), _jsx(Textarea, { id: `question-${index}`, value: item.question, onChange: (e) => updateItem(index, { question: e.target.value }), placeholder: "{0}", className: "mt-1" })] }), extractPlaceholderIndices(item.question).map((blankIndex) => (_jsxs("div", { children: [_jsxs(Label, { htmlFor: `answer-${index}-${blankIndex}`, children: ["\u0110\u00E1p \u00E1n blank ", '{' + blankIndex + '}', " (c\u00E1ch nhau b\u1EDFi /)"] }), _jsx(Input, { id: `answer-${index}-${blankIndex}`, value: joinSlashAnswers(item.answers[blankIndex]), onChange: (e) => {
-                                                        const next = [...item.answers];
-                                                        next[blankIndex] = parseSlashAnswers(e.target.value);
-                                                        updateItem(index, { answers: next });
-                                                    }, placeholder: "is / 's", className: "mt-1" })] }, blankIndex))), _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsx(FillInBlankGroupMediaField, { id: `fib-item-image-${index}`, label: "\u1EA2nh item (optional)", accept: "image/*", value: item.imageUrl || '', onChange: (url) => updateItem(index, { imageUrl: url }) }), !audioUrl && (_jsx(FillInBlankGroupMediaField, { id: `fib-item-audio-${index}`, label: "Audio item (khi kh\u00F4ng c\u00F3 audio nh\u00F3m)", accept: "audio/*", value: item.audioUrl || '', onChange: (url) => updateItem(index, { audioUrl: url }) }))] })] }, index))) })] }), _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 }) })] })] }))] }));
+                                                                }) }) })), items.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeItem(index), className: "text-red-500 hover:bg-red-50", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] })] }), _jsxs("div", { children: [_jsxs(Label, { htmlFor: `question-${index}`, children: ["Stem (d\u00F9ng ", '{0}', ", ", '{1}', "...)"] }), _jsx(Textarea, { id: `question-${index}`, value: item.question, onChange: (e) => updateItem(index, { question: e.target.value }), placeholder: "{0}", className: "mt-1" })] }), extractPlaceholderIndices(item.question).map((blankIndex) => (_jsxs("div", { className: "grid gap-3 md:grid-cols-2", children: [_jsxs("div", { children: [_jsxs(Label, { htmlFor: `answer-${index}-${blankIndex}`, children: ["\u0110\u00E1p \u00E1n blank ", '{' + blankIndex + '}', " (c\u00E1ch nhau b\u1EDFi /)"] }), _jsx(Input, { id: `answer-${index}-${blankIndex}`, value: joinSlashAnswers(item.answers[blankIndex]), onChange: (e) => {
+                                                                const next = [...item.answers];
+                                                                next[blankIndex] = parseSlashAnswers(e.target.value);
+                                                                updateItem(index, { answers: next });
+                                                            }, placeholder: "is / 's", className: "mt-1" })] }), _jsxs("div", { children: [_jsxs(Label, { htmlFor: `options-${index}-${blankIndex}`, children: ["Options blank ", '{' + blankIndex + '}', " (dropdown, c\u00E1ch nhau /)"] }), _jsx(Input, { id: `options-${index}-${blankIndex}`, value: joinSlashAnswers(item.wordBank?.[blankIndex]?.options), onChange: (e) => {
+                                                                const requiredLength = blankSlotCount(item.question);
+                                                                const next = [...(item.wordBank || [])];
+                                                                while (next.length < requiredLength)
+                                                                    next.push(null);
+                                                                const options = parseSlashAnswers(e.target.value);
+                                                                next[blankIndex] = options.length >= 2 ? { options } : null;
+                                                                updateItem(index, {
+                                                                    wordBank: next.some((entry) => entry && entry.options.length >= 2)
+                                                                        ? next
+                                                                        : undefined,
+                                                                });
+                                                            }, placeholder: "can / can't", className: "mt-1" })] })] }, blankIndex))), _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsx(FillInBlankGroupMediaField, { id: `fib-item-image-${index}`, label: "\u1EA2nh item (optional)", accept: "image/*", value: Array.isArray(item.imageUrl) ? (item.imageUrl[0] || '') : (item.imageUrl || ''), onChange: (url) => updateItem(index, { imageUrl: url }) }), !audioUrl && (_jsx(FillInBlankGroupMediaField, { id: `fib-item-audio-${index}`, label: "Audio item (khi kh\u00F4ng c\u00F3 audio nh\u00F3m)", accept: "audio/*", value: item.audioUrl || '', onChange: (url) => updateItem(index, { audioUrl: url }) }))] })] }, index))) })] }), _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 }) })] })] }))] }));
 }