@tinyweb_dev/oe-exam-sdk 1.0.2 → 1.0.4

package/dist/components/questions/question-bank/question-bank-picker.utils.js

@@ -0,0 +1,408 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { BookOpen, FileText, Grid3X3, Image as ImageIcon, Volume2, } from 'lucide-react';
+import { Label } from '../../../components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../../components/ui/select';
+export const QUESTION_BANK_FILTER_ALL_VALUE = '__all__';
+/** Keep selected id visible even before cascade options finish loading. */
+export function mergeFilterOptions(options, selectedId, selectedLabel) {
+    const id = selectedId.trim();
+    if (!id)
+        return options;
+    if (options.some((opt) => opt.id === id))
+        return options;
+    return [{ id, name: selectedLabel?.trim() || id }, ...options];
+}
+export function FilterSelect({ label, value, options, onChange, disabled, selectedLabel, }) {
+    const mergedOptions = useMemo(() => mergeFilterOptions(options, value, selectedLabel), [options, value, selectedLabel]);
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-[11px] font-semibold text-gray-500", children: label }), _jsxs(Select, { value: value || QUESTION_BANK_FILTER_ALL_VALUE, onValueChange: (v) => onChange(v === QUESTION_BANK_FILTER_ALL_VALUE ? '' : v), disabled: disabled, children: [_jsx(SelectTrigger, { className: "h-9 w-full bg-white", children: _jsx(SelectValue, { placeholder: `Tất cả ${label.toLowerCase()}` }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: QUESTION_BANK_FILTER_ALL_VALUE, children: "T\u1EA5t c\u1EA3" }), mergedOptions.map((opt) => (_jsx(SelectItem, { value: opt.id, children: opt.name }, opt.id)))] })] })] }));
+}
+/** Map plain string list (e.g. questionTypes) → FilterSelect options. */
+export function toStringOptions(values) {
+    return values.map((value) => ({ id: value, name: questionTypeLabel(value) }));
+}
+/** Vietnamese labels for the most common question types in the bank. */
+const QUESTION_TYPE_LABELS = {
+    CHOOSE_THE_CORRECT_ANSWER: 'Chọn đáp án đúng',
+    CHOOSE_THE_CORRECT_ANSWER_GROUP: 'Chọn đáp án đúng (nhóm)',
+    FILL_IN_BLANK: 'Điền vào chỗ trống',
+    FILL_IN_BLANK_GROUP: 'Điền chỗ trống (nhóm)',
+    WORD_FILL_STRUCTURED_FORM: 'Điền từ / cấu trúc',
+    READ_PASSAGE_AND_ANSWER_QUESTIONS: 'Đọc hiểu',
+    READ_DISPLAYED_CONTENT: 'Đọc nội dung hiển thị',
+    ANSWER_THE_QUESTION: 'Trả lời câu hỏi',
+    MATCH_BY_WRITING_ANSWER: 'Nối bằng cách viết đáp án',
+    SPEAKING_DESCRIBE_IMAGE: 'Nói: mô tả tranh',
+    SPEAKING_CONVERSATION: 'Nói: hội thoại',
+    GN_SPEAKING_INTERVIEW: 'Nói: phỏng vấn',
+    LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER: 'Nhìn tranh điền chỗ trống',
+    LOOK_PICTURE_CHOOSE_CORRECT_ANSWER: 'Nhìn tranh chọn đáp án',
+    LOOK_PICTURE_FILL_WORD_HINT: 'Nhìn tranh điền từ gợi ý',
+    LABEL_THE_PICTURE: 'Gắn nhãn hình ảnh',
+    MATCH_WORD_TO_PICTURE: 'Nối từ với tranh',
+    MATCH_WORD_TO_PICTURE_GROUP: 'Nối từ với tranh (nhóm)',
+    MATCHING_WITH_LINES_GROUP: 'Nối bằng đường kẻ (nhóm)',
+    MATCH_COLUMNS_TO_MAKE_SENTENCES: 'Ghép cột thành câu',
+    WORD_ORDERING_GROUP: 'Sắp xếp từ (nhóm)',
+    WORD_ORDER_AND_MATCH_GROUP: 'Sắp xếp từ & nối (nhóm)',
+    SORT_WORDS_INTO_CATEGORIES: 'Sắp xếp từ vào nhóm',
+    CHOOSE_THEN_ANSWER_GROUP: 'Chọn rồi trả lời (nhóm)',
+    ANSWER_THE_QUESTION_GROUP: 'Trả lời câu hỏi (nhóm)',
+    TRUE_FALSE_GROUP: 'Đúng / Sai (nhóm)',
+    TRUE_FALSE_CORRECT_GROUP: 'Đúng / Sai & sửa (nhóm)',
+    CROSS_OUT_WORD_GROUP: 'Gạch từ thừa (nhóm)',
+    FILL_MISSING_WORDS_IN_GRID: 'Điền chữ trong bảng',
+    CROSSWORD_PUZZLE: 'Ô chữ',
+    FIND_WORDS_IN_MATRIX: 'Tìm từ trong bảng',
+    WRITE_A_SHORT_LETTER: 'Viết thư ngắn',
+    WRITE_SHORT_PARAGRAPH: 'Viết đoạn văn ngắn',
+    WRITE_CORRECT_VERB_FORM: 'Viết dạng động từ',
+    SIMPLE_ANSWER: 'Trả lời ngắn',
+    SPONTANEOUS_QA_GROUP: 'Hỏi đáp tự do (nhóm)',
+};
+export function questionTypeLabel(type) {
+    return QUESTION_TYPE_LABELS[type] ?? type.replace(/_/g, ' ').toLowerCase();
+}
+var QuestionTypeVisualKind;
+(function (QuestionTypeVisualKind) {
+    QuestionTypeVisualKind["IMAGE"] = "image";
+    QuestionTypeVisualKind["PASSAGE"] = "passage";
+    QuestionTypeVisualKind["GRID"] = "grid";
+    QuestionTypeVisualKind["TEXT"] = "text";
+})(QuestionTypeVisualKind || (QuestionTypeVisualKind = {}));
+const TYPE_VISUAL_KIND = {
+    LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER: QuestionTypeVisualKind.IMAGE,
+    LOOK_PICTURE_CHOOSE_CORRECT_ANSWER: QuestionTypeVisualKind.IMAGE,
+    LOOK_PICTURE_FILL_WORD_HINT: QuestionTypeVisualKind.IMAGE,
+    LABEL_THE_PICTURE: QuestionTypeVisualKind.IMAGE,
+    MATCH_WORD_TO_PICTURE: QuestionTypeVisualKind.IMAGE,
+    MATCH_WORD_TO_PICTURE_GROUP: QuestionTypeVisualKind.IMAGE,
+    MATCHING_WITH_LINES_GROUP: QuestionTypeVisualKind.IMAGE,
+    READ_PASSAGE_AND_ANSWER_QUESTIONS: QuestionTypeVisualKind.PASSAGE,
+    READ_PASSAGE_AND_COMPLETE_STORY: QuestionTypeVisualKind.PASSAGE,
+    FILL_MISSING_WORDS_IN_GRID: QuestionTypeVisualKind.GRID,
+    CROSSWORD_PUZZLE: QuestionTypeVisualKind.GRID,
+    FIND_WORDS_IN_MATRIX: QuestionTypeVisualKind.GRID,
+};
+/** Icon + tint per question type family — quick visual scanning in lists. */
+export function QuestionTypeIcon({ type }) {
+    const kind = TYPE_VISUAL_KIND[type] ?? QuestionTypeVisualKind.TEXT;
+    switch (kind) {
+        case QuestionTypeVisualKind.IMAGE:
+            return _jsx(ImageIcon, { className: "h-4 w-4 text-blue-500" });
+        case QuestionTypeVisualKind.PASSAGE:
+            return _jsx(BookOpen, { className: "h-4 w-4 text-green-600" });
+        case QuestionTypeVisualKind.GRID:
+            return _jsx(Grid3X3, { className: "h-4 w-4 text-purple-500" });
+        default:
+            return _jsx(FileText, { className: "h-4 w-4 text-gray-400" });
+    }
+}
+export var QuestionDifficulty;
+(function (QuestionDifficulty) {
+    QuestionDifficulty["EASY"] = "EASY";
+    QuestionDifficulty["MEDIUM"] = "MEDIUM";
+    QuestionDifficulty["HARD"] = "HARD";
+})(QuestionDifficulty || (QuestionDifficulty = {}));
+const DIFFICULTY_BADGE_CLASS = {
+    [QuestionDifficulty.EASY]: 'border-green-200 bg-green-50 text-green-700',
+    [QuestionDifficulty.MEDIUM]: 'border-amber-200 bg-amber-50 text-amber-700',
+    [QuestionDifficulty.HARD]: 'border-red-200 bg-red-50 text-red-700',
+};
+const DIFFICULTY_LABEL = {
+    [QuestionDifficulty.EASY]: 'Dễ',
+    [QuestionDifficulty.MEDIUM]: 'TB',
+    [QuestionDifficulty.HARD]: 'Khó',
+};
+function parseDifficulty(raw) {
+    const upper = raw?.trim().toUpperCase();
+    if (upper === QuestionDifficulty.EASY)
+        return QuestionDifficulty.EASY;
+    if (upper === QuestionDifficulty.MEDIUM)
+        return QuestionDifficulty.MEDIUM;
+    if (upper === QuestionDifficulty.HARD)
+        return QuestionDifficulty.HARD;
+    return null;
+}
+export function difficultyBadge(raw) {
+    const difficulty = parseDifficulty(raw);
+    if (!difficulty)
+        return null;
+    return {
+        label: DIFFICULTY_LABEL[difficulty],
+        className: DIFFICULTY_BADGE_CLASS[difficulty],
+    };
+}
+function firstStringOf(record, keys) {
+    for (const key of keys) {
+        const value = record[key];
+        if (typeof value === 'string' && value.trim())
+            return value.trim();
+    }
+    return null;
+}
+function asRecord(value) {
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+        return value;
+    }
+    return null;
+}
+/** Strip HTML tags / entities so list rows show readable text, not markup. */
+export function stripHtmlToText(raw) {
+    let text = raw
+        .replace(/<\s*br\s*\/?>/gi, ' ')
+        .replace(/<\/\s*(p|div|tr|li|h[1-6]|table)\s*>/gi, ' ')
+        .replace(/<[^>]+>/g, ' ')
+        .replace(/\{(\d+)\}/g, '___')
+        .replace(/&nbsp;/gi, ' ')
+        .replace(/&/gi, '&')
+        .replace(/</gi, '<')
+        .replace(/>/gi, '>')
+        .replace(/"/gi, '"')
+        .replace(/'/g, "'")
+        .replace(/'/gi, "'");
+    text = text.replace(/\s+/g, ' ').trim();
+    return text;
+}
+const PREVIEW_TEXT_KEYS = [
+    'question',
+    'questionText',
+    'sentence',
+    'text',
+    'passage',
+    'prompt',
+    'instruction',
+    'mainTitle',
+    'title',
+    // Pearson WORD_FILL_STRUCTURED_FORM nests HTML under `content`.
+    'content',
+];
+const PREVIEW_MAX_LEN = 220;
+function clampPreview(text, max = PREVIEW_MAX_LEN) {
+    if (text.length <= max)
+        return text;
+    return `${text.slice(0, max - 1).trimEnd()}…`;
+}
+function optionPreviewLabel(option) {
+    if (typeof option === 'string' && option.trim())
+        return option.trim();
+    const record = asRecord(option);
+    if (!record)
+        return null;
+    return firstStringOf(record, ['text', 'label', 'value']);
+}
+/** Build "A / B / C" snippet from options array when question stem is empty. */
+function optionsPreview(options) {
+    if (!Array.isArray(options) || options.length === 0)
+        return null;
+    const labels = options
+        .map(optionPreviewLabel)
+        .filter((v) => Boolean(v))
+        .slice(0, 4);
+    if (labels.length === 0)
+        return null;
+    return labels.join(' · ');
+}
+function extractFromRecord(record) {
+    // Prefer human-readable fields; strip HTML when present.
+    for (const key of PREVIEW_TEXT_KEYS) {
+        const value = record[key];
+        if (typeof value !== 'string' || !value.trim())
+            continue;
+        const cleaned = stripHtmlToText(value);
+        if (cleaned)
+            return cleaned;
+    }
+    // Options-only MCQ (empty question stem).
+    const fromOptions = optionsPreview(record.options);
+    if (fromOptions)
+        return fromOptions;
+    // Word bank / labels.
+    if (Array.isArray(record.wordBank)) {
+        const words = record.wordBank
+            .map((w) => {
+            if (typeof w === 'string')
+                return w;
+            const r = asRecord(w);
+            return r ? firstStringOf(r, ['text', 'label', 'word']) : null;
+        })
+            .filter((v) => Boolean(v))
+            .slice(0, 5);
+        if (words.length > 0)
+            return `Từ: ${words.join(', ')}`;
+    }
+    // Crossword clues.
+    const clues = asRecord(record.clues);
+    if (clues) {
+        const across = Array.isArray(clues.across) ? clues.across : [];
+        const firstClue = asRecord(across[0]);
+        const clueText = firstClue ? firstStringOf(firstClue, ['clue']) : null;
+        if (clueText)
+            return clueText;
+    }
+    // Nested group items / subQuestions.
+    const nested = record.items ?? record.subQuestions;
+    if (Array.isArray(nested) && nested.length > 0) {
+        for (const raw of nested) {
+            const item = asRecord(raw);
+            if (!item)
+                continue;
+            const nestedContent = asRecord(item.content) ?? item;
+            const sub = extractFromRecord(nestedContent);
+            if (sub)
+                return sub;
+        }
+    }
+    // meta.instruction (group wrappers).
+    const meta = asRecord(record.meta);
+    if (meta) {
+        const instruction = firstStringOf(meta, ['instruction', 'title']);
+        if (instruction)
+            return stripHtmlToText(instruction);
+    }
+    return null;
+}
+/**
+ * Human-readable preview for bank list rows.
+ * Handles Pearson HTML (`content.content`), group items, options-only MCQ.
+ */
+export function previewText(item) {
+    const content = item.content;
+    if (typeof content === 'string' && content.trim()) {
+        const cleaned = stripHtmlToText(content);
+        if (cleaned)
+            return clampPreview(cleaned);
+    }
+    const record = asRecord(content);
+    if (record) {
+        const extracted = extractFromRecord(record);
+        if (extracted)
+            return clampPreview(extracted);
+    }
+    // Title often embeds exercise name; better than a bare dash.
+    const title = item.title?.trim();
+    if (title)
+        return clampPreview(stripHtmlToText(title), 120);
+    return item.explanation?.trim() || '—';
+}
+/** Prefer content preview over XML-ish titles for the primary row heading. */
+export function primaryDisplayText(item) {
+    const preview = previewText(item);
+    const title = item.title?.trim() ?? '';
+    // Title looks like a source file path → show content instead.
+    if (/\.xml\b/i.test(title) || /exercise-\d+/i.test(title)) {
+        return preview !== '—' ? preview : title;
+    }
+    if (title)
+        return title;
+    return preview;
+}
+function readMetaString(meta, keys) {
+    if (!meta)
+        return null;
+    for (const key of keys) {
+        const value = meta[key];
+        if (typeof value === 'string' && value.trim())
+            return value.trim();
+        if (typeof value === 'number' && Number.isFinite(value))
+            return String(value);
+    }
+    return null;
+}
+/** Pretty exercise label: "01-exercise-1.xml" → "Ex 1". */
+function formatExerciseLabel(assetName) {
+    if (!assetName)
+        return null;
+    const match = assetName.match(/exercise[-_]?(\d+)/i) ??
+        assetName.match(/^0*(\d+)[-_]/);
+    if (match?.[1])
+        return `Ex ${Number(match[1])}`;
+    // Strip .xml extension as fallback.
+    return assetName.replace(/\.xml$/i, '');
+}
+/**
+ * Compact provenance for row footer (right side):
+ * "Unit 0 · 0.3 Favourites · Ex 1"
+ */
+export function provenanceFooterText(item) {
+    const meta = asRecord(item.meta);
+    const unit = readMetaString(meta, ['unitName', 'unitTitle']) ??
+        readMetaString(asRecord(meta?.unit), ['name', 'title']);
+    const lesson = readMetaString(meta, ['lessonName', 'lessonTitle']) ??
+        readMetaString(asRecord(meta?.lesson), ['name', 'title']);
+    const asset = readMetaString(meta, ['assetName', 'assetTitle']) ??
+        readMetaString(asRecord(meta?.asset), ['name', 'title']);
+    const exercise = formatExerciseLabel(asset);
+    const parts = [];
+    if (unit) {
+        // "0" / bare number → "Unit 0"; already labeled names stay as-is.
+        parts.push(/^\d+([.]\d+)?$/.test(unit) ? `Unit ${unit}` : unit);
+    }
+    if (lesson)
+        parts.push(lesson);
+    if (exercise)
+        parts.push(exercise);
+    if (parts.length === 0)
+        return null;
+    return parts.join(' · ');
+}
+/** Sub-item count for group types — shown as “n câu con”. */
+export function subItemCount(item) {
+    const record = asRecord(item.content);
+    if (!record)
+        return null;
+    const items = record.items ?? record.subQuestions;
+    if (Array.isArray(items) && items.length > 1)
+        return items.length;
+    // WORD_FILL blanks counted via {n} placeholders in HTML content.
+    const html = typeof record.content === 'string' ? record.content : '';
+    if (html) {
+        const matches = html.match(/\{\d+\}/g);
+        if (matches && matches.length > 1)
+            return matches.length;
+    }
+    return null;
+}
+/** Detect media attachments to surface image/audio hints on list rows. */
+export function contentMediaFlags(item) {
+    const record = asRecord(item.content);
+    if (!record)
+        return { hasImage: false, hasAudio: false };
+    const topImage = Boolean(firstStringOf(record, ['imageUrl', 'backgroundImageUrl']));
+    const topAudio = Boolean(firstStringOf(record, ['audioUrl']));
+    const meta = asRecord(record.meta);
+    const metaImage = Boolean(meta && firstStringOf(meta, ['imageUrl', 'backgroundImageUrl']));
+    const metaAudio = Boolean(meta && firstStringOf(meta, ['audioUrl']));
+    // Options may be image-based.
+    let optionImage = false;
+    if (Array.isArray(record.options)) {
+        optionImage = record.options.some((opt) => {
+            const r = asRecord(opt);
+            return Boolean(r && firstStringOf(r, ['imageUrl']));
+        });
+    }
+    // Group first item media.
+    let nestedImage = false;
+    let nestedAudio = false;
+    const nested = record.items ?? record.subQuestions;
+    if (Array.isArray(nested) && nested.length > 0) {
+        const first = asRecord(nested[0]);
+        const nestedContent = first ? (asRecord(first.content) ?? first) : null;
+        if (nestedContent) {
+            nestedImage = Boolean(firstStringOf(nestedContent, ['imageUrl', 'backgroundImageUrl']));
+            nestedAudio = Boolean(firstStringOf(nestedContent, ['audioUrl']));
+        }
+    }
+    return {
+        hasImage: topImage || metaImage || optionImage || nestedImage,
+        hasAudio: topAudio || metaAudio || nestedAudio,
+    };
+}
+/** Small inline icons for image/audio presence. */
+export function MediaHints({ item }) {
+    const { hasImage, hasAudio } = contentMediaFlags(item);
+    if (!hasImage && !hasAudio)
+        return null;
+    return (_jsxs("span", { className: "inline-flex items-center gap-1 text-gray-400", children: [hasImage ? _jsx(ImageIcon, { className: "h-3.5 w-3.5" }) : null, hasAudio ? _jsx(Volume2, { className: "h-3.5 w-3.5" }) : null] }));
+}

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

@@ -449,7 +449,7 @@ function ChooseTheCorrectAnswerCreatorContent({ initialData, onSave, onCancel, o
                                                     ? 'border-violet-300 bg-violet-50 text-violet-700'
                                                     : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'} ${Boolean(multipleAnswers) ? 'cursor-not-allowed opacity-50' : ''}`, children: [_jsx(ListChecks, { className: "h-4 w-4" }), "Nhi\u1EC1u \u0111\u00E1p \u00E1n"] }), _jsxs("button", { type: "button", style: { paddingBlock: 'calc(var(--spacing) * 1)' }, onClick: () => setIsTipTapMode((enabled) => !enabled), title: isTipTapMode ? 'Chuyển về ô nhập thường' : 'Bật định dạng chữ (in đậm, danh sách, bảng)', className: `inline-flex items-center gap-2 rounded-md border px-3.5 text-sm font-medium transition-colors select-none ${isTipTapMode
                                                     ? 'border-indigo-300 bg-indigo-50 text-indigo-700'
-                                                    : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'}`, children: [_jsx(Pilcrow, { className: "h-4 w-4" }), "\u0110\u1ECBnh d\u1EA1ng"] })] })] }), viewMode === 'CONVERSATION' && (_jsxs("div", { className: "space-y-3", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Users, { className: "h-4 w-4 text-indigo-500" }), "H\u1ED9i tho\u1EA1i ", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn - d\u00F9ng cho c\u00E2u h\u1ECFi d\u1EA1ng h\u1ED9i tho\u1EA1i)" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4 rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: "askerName", className: "flex items-center gap-1 text-sm font-medium text-gray-600", children: ["T\u00EAn ng\u01B0\u1EDDi h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "askerName", ...form.register('askerName'), placeholder: "VD: John, Mary, Teacher...", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${form.hasError('askerName') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('askerName') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('askerName') }))] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: "answererName", className: "flex items-center gap-1 text-sm font-medium text-gray-600", children: ["T\u00EAn ng\u01B0\u1EDDi tr\u1EA3 l\u1EDDi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "answererName", ...form.register('answererName'), placeholder: "VD: Tom, Anna, Student...", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${form.hasError('answererName') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('answererName') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('answererName') }))] })] })] })), (!questionConfig || questionConfig.length === 0 || questionConfig.includes('question')) && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "question", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-indigo-500" }), _jsx("span", { className: "flex items-center gap-1", children: "C\u00E2u h\u1ECFi" }), _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsx(ChooseAnswerTextInput, { value: watchedQuestion, onChange: (html) => form.setValue('question', html, { shouldValidate: true }), isTipTapMode: isTipTapMode, placeholder: "Nh\u1EADp c\u00E2u h\u1ECFi..." }), form.hasError('question') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('question') }))] })), ((!questionConfig || questionConfig.length === 0 || questionConfig.includes('imageUrl') || questionConfig.includes('imageUrl ')) && !isImageInputVisible
+                                                    : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'}`, children: [_jsx(Pilcrow, { className: "h-4 w-4" }), "\u0110\u1ECBnh d\u1EA1ng"] })] })] }), viewMode === 'CONVERSATION' && (_jsxs("div", { className: "space-y-3", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Users, { className: "h-4 w-4 text-indigo-500" }), "H\u1ED9i tho\u1EA1i ", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn - d\u00F9ng cho c\u00E2u h\u1ECFi d\u1EA1ng h\u1ED9i tho\u1EA1i)" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4 rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: "askerName", className: "flex items-center gap-1 text-sm font-medium text-gray-600", children: ["T\u00EAn ng\u01B0\u1EDDi h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "askerName", ...form.register('askerName'), placeholder: "VD: John, Mary, Teacher...", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${form.hasError('askerName') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('askerName') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('askerName') }))] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: "answererName", className: "flex items-center gap-1 text-sm font-medium text-gray-600", children: ["T\u00EAn ng\u01B0\u1EDDi tr\u1EA3 l\u1EDDi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "answererName", ...form.register('answererName'), placeholder: "VD: Tom, Anna, Student...", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${form.hasError('answererName') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('answererName') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('answererName') }))] })] })] })), (!questionConfig || questionConfig.length === 0 || questionConfig.includes('question')) && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "question", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-indigo-500" }), _jsx("span", { className: "flex items-center gap-1", children: "C\u00E2u h\u1ECFi" }), _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsx(ChooseAnswerTextInput, { value: watchedQuestion ?? '', onChange: (html) => form.setValue('question', html, { shouldValidate: true }), isTipTapMode: isTipTapMode, placeholder: "Nh\u1EADp c\u00E2u h\u1ECFi..." }), form.hasError('question') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('question') }))] })), ((!questionConfig || questionConfig.length === 0 || questionConfig.includes('imageUrl') || questionConfig.includes('imageUrl ')) && !isImageInputVisible
                                 || !isExplanationVisible) && (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [(!questionConfig || questionConfig.length === 0 || questionConfig.includes('imageUrl') || questionConfig.includes('imageUrl ')) && !isImageInputVisible && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsImageInputVisible(true), className: "gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700", children: [_jsx(ImageIcon, { className: "h-4 w-4" }), watchedImageUrl ? 'Hiện hình ảnh' : 'Thêm hình ảnh'] })), !isExplanationVisible && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsExplanationVisible(true), className: "gap-2 border-amber-200 text-amber-700 hover:bg-amber-50 hover:text-amber-800", children: [_jsx(BookOpen, { className: "h-4 w-4" }), watchedExplanation ? 'Hiện giải thích' : 'Thêm giải thích'] }))] })), (!questionConfig || questionConfig.length === 0 || questionConfig.includes('imageUrl') || questionConfig.includes('imageUrl ')) && isImageInputVisible && (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-indigo-500" }), "H\u00ECnh \u1EA3nh"] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setIsImageInputVisible(false), className: "h-8 text-gray-500 hover:text-gray-700", children: "\u1EA8n" })] }), _jsx(FileUpload, { id: "question-image", label: "", accept: "image/*", value: watchedImageUrl || '', onChange: (url) => {
                                             form.setValue('imageUrl', url, { shouldValidate: true });
                                         }, onPresignedUrlChange: setImagePreviewUrl, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }), form.hasError('imageUrl') && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: form.getFieldError('imageUrl') })), displayPreviewUrl && (_jsx(ImagePreview, { src: displayPreviewUrl, alt: "Preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] })), isExplanationVisible && (_jsxs("div", { className: "relative", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setIsExplanationVisible(false), className: "absolute right-3 top-3 z-10 h-8 text-gray-500 hover:text-gray-700", children: "\u1EA8n" }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", 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-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-3.5 w-3.5 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "mt-0.5 text-xs text-gray-500", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { className: "px-4 pb-4", children: _jsx(Textarea, { ...form.register('explanation'), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] resize-none border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200" }) })] })] })), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100", children: _jsx("span", { className: "text-lg", children: "\u274C" }) }), _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] })] })), form.formState.errors.options?.message && (_jsx("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4", children: _jsx("p", { className: "text-sm text-red-600", children: form.formState.errors.options.message }) }))] })] }), (!questionConfig || questionConfig.length === 0 || questionConfig.includes('options')) && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-indigo-100", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsxs(CardTitle, { className: "text-base font-semibold text-gray-800", children: ["C\u00E1c l\u1EF1a ch\u1ECDn ", _jsxs("span", { className: "text-xs font-normal text-gray-500", children: ["(", watchedOptions.length, " \u0111\u00E1p \u00E1n)"] })] })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-1.5", children: [_jsx(Type, { className: `h-3.5 w-3.5 ${watchedOptionType === 'text' ? 'text-indigo-600' : 'text-gray-400'}` }), _jsx("span", { className: `text-xs font-medium ${watchedOptionType === 'text' ? 'text-indigo-600' : 'text-gray-400'}`, children: "Text" }), _jsx(Switch, { checked: watchedOptionType === 'image', disabled: true, className: watchedOptionType === 'image' ? '!bg-indigo-600 !opacity-100' : '!bg-indigo-600 !opacity-100', onCheckedChange: (checked) => {

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

@@ -4,7 +4,7 @@ import { useState, useEffect, useMemo } from 'react';
 import { Input } from '../../../../components/ui/input';
 import { Check, X, PenLine, AlertTriangle, ClipboardList, Lightbulb, BookOpen, Hash, Volume2, } from 'lucide-react';
 import { ImageLabelWordBank } from '../../groups/ImageLabelWordBank';
-import { hasImageLabels } from '../../_shared/types/question-group.type';
+import { hasImageLabels } from '../../_shared/types/question-group.utils';
 import { extractPlaceholderIndices, formatBlankAnswersDisplay, getPrimaryBlankAnswer, isBlankInputCorrect, normalizeBlankAnswers, normalizeFillInBlankAnswers, } from './answer-utils';
 import { parseFillBlankSegments } from '../../../../shared/lib/utils/fill-in-blank';
 import { cn } from '../../../../shared/lib/utils';

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

@@ -99,6 +99,19 @@ const ColorToolbarBtn = ({ editor }) => {
                     : 'text-gray-600 hover:bg-gray-200 hover:text-gray-900'}`, children: [_jsx(Palette, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "h-3.5 w-3.5 rounded-full border border-gray-300 shadow-sm", style: { backgroundColor: currentColor || '#0f172a' } })] }), showMenu && (_jsxs("div", { className: "absolute left-0 top-full z-50 mt-1 flex flex-col gap-2 rounded-lg border border-gray-200 bg-white p-2.5 shadow-xl min-w-[170px]", children: [_jsx("div", { className: "text-[11px] font-medium text-gray-500 px-0.5", children: "M\u00E0u ch\u1EEF nhanh" }), _jsx("div", { className: "grid grid-cols-4 gap-1.5", children: COLOR_PRESETS.map((p) => (_jsx("button", { type: "button", title: p.label, onClick: () => handleSetColor(p.color), className: "h-6 w-6 rounded-full border border-gray-200 shadow-xs transition-transform hover:scale-110 focus:outline-none", style: { backgroundColor: p.color } }, p.color))) }), _jsxs("div", { className: "flex items-center justify-between gap-2 pt-1.5 border-t border-gray-100", children: [_jsxs("label", { className: "flex items-center gap-1.5 text-[11px] text-gray-600 cursor-pointer", children: [_jsx("span", { children: "T\u00F9y ch\u1ECDn:" }), _jsx("input", { type: "color", value: currentColor || '#000000', onChange: (e) => handleSetColor(e.target.value), className: "h-5 w-5 cursor-pointer rounded border-0 p-0" })] }), _jsx("button", { type: "button", onClick: () => handleSetColor(''), className: "text-[11px] font-medium text-red-500 hover:underline", children: "M\u1EB7c \u0111\u1ECBnh" })] })] }))] }));
 };
 const ToolbarSep = () => _jsx("div", { className: "mx-1 h-4 w-px bg-gray-200" });
+const BLANK_STYLE_OPTIONS = [
+    { value: 'letter', label: 'Letter', hint: 'Ô 1 ký tự' },
+    { value: 'word', label: 'Word', hint: 'Từ ngắn' },
+    { value: 'phrase', label: 'Phrase', hint: 'Cụm / câu' },
+];
+function BlankStyleSwitch({ value, onChange, }) {
+    return (_jsxs("div", { role: "radiogroup", "aria-label": "Ki\u1EC3u \u00F4 tr\u1ED1ng", className: "inline-flex flex-wrap items-center gap-1 rounded-md border border-gray-200 bg-white p-1", children: [BLANK_STYLE_OPTIONS.map((option) => {
+                const selected = value === option.value;
+                return (_jsxs("button", { type: "button", role: "radio", "aria-checked": selected, title: option.hint, onClick: () => onChange(option.value), className: `inline-flex items-center gap-1.5 rounded px-2.5 py-1 text-sm font-medium transition-colors ${selected
+                        ? 'border border-teal-300 bg-teal-50 text-teal-700'
+                        : 'border border-transparent text-gray-400 hover:bg-gray-50 hover:text-gray-600'}`, children: [option.label, _jsx("span", { className: `text-[10px] font-normal ${selected ? 'text-teal-600' : 'text-gray-400'}`, children: option.hint })] }, option.value));
+            }), value === 'translate' && (_jsxs("span", { role: "radio", "aria-checked": true, title: "Ch\u1EA5m LLM \u2014 gi\u1EEF nguy\u00EAn \u0111\u1EBFn khi ch\u1ECDn style kh\u00E1c", className: "inline-flex items-center gap-1.5 rounded border border-teal-300 bg-teal-50 px-2.5 py-1 text-sm font-medium text-teal-700", children: ["Translate", _jsx("span", { className: "text-[10px] font-normal text-teal-600", children: "D\u1ECBch (LLM)" })] }))] }));
+}
 const EditorToolbar = ({ editor }) => {
     if (!editor)
         return null;
@@ -126,7 +139,7 @@ export function WordFillStructuredFormCreator({ initialData, onSave, onCancel, o
     // Page rubric (Pearson draft.instruction). Prefer instruction; legacy load may use explanation.
     const [instruction, setInstruction] = useState(initialData?.instruction || initialData?.explanation || '');
     const [explanation, setExplanation] = useState(initialData?.explanation || '');
-    const [blankStyle, setBlankStyle] = useState(initialData?.blankStyle);
+    const [blankStyle, setBlankStyle] = useState(initialData?.blankStyle ?? 'word');
     // ── Multiple Images & Audios ────────────────────────────────────────────────
     const [imageUrls, setImageUrls] = useState(() => {
         if (Array.isArray(initialData?.imageUrls) && initialData.imageUrls.length > 0) {
@@ -250,7 +263,7 @@ export function WordFillStructuredFormCreator({ initialData, onSave, onCancel, o
                 : '');
         }
         setAnswers(normalizeWfsfAnswersMap(initialData?.answers || {}));
-        setBlankStyle(initialData?.blankStyle);
+        setBlankStyle(initialData?.blankStyle ?? 'word');
         const nextMode = detectWfsfBankMode(initialData?.viewMode ?? viewModeProp, initialData?.wordBank);
         setBankMode(nextMode);
         if (nextMode === 'WITH_WORD_BANK') {
@@ -481,7 +494,7 @@ export function WordFillStructuredFormCreator({ initialData, onSave, onCancel, o
     return (_jsxs("div", { className: "space-y-4", children: [isGrouped && effectiveGroupType === 'BASIC' && (_jsx(BasicQuestionGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, groupConfig: groupType ? groupConfig : undefined, isReadOnly: !isFirstInGroup, uploadIdPrefix: `word-fill-structured-${partId ?? 'group'}` })), isGrouped && effectiveGroupType === 'DOCUMENT' && (_jsx(DocumentGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, groupConfig: groupType ? groupConfig : undefined, isReadOnly: !isFirstInGroup, uploadIdPrefix: `word-fill-structured-${partId ?? 'document'}` })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-teal-500 via-cyan-500 to-emerald-500" }), _jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gray-100", children: _jsx(PenLine, { className: "h-4 w-4 text-teal-600" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "\u0110i\u1EC1n t\u1EEB v\u00E0o bi\u1EC3u m\u1EABu c\u00F3 c\u1EA5u tr\u00FAc" }), _jsxs("p", { className: "text-xs text-gray-500", children: ["Nh\u1EADp n\u1ED9i dung, \u0111\u1EB7t ch\u1ED7 tr\u1ED1ng b\u1EB1ng ", `{0}`, " ", `{1}`, "\u2026 r\u1ED3i \u0111i\u1EC1n \u0111\u00E1p \u00E1n b\u00EAn d\u01B0\u1EDBi"] })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsPreviewMode(true), disabled: expectedBlankKeys.length === 0 || expectedBlankKeys.some(k => !hasWfsfBlankAnswer(answers[k])), className: "gap-2 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] }) }), _jsxs(CardContent, { className: "space-y-4 px-4 pb-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "wfsf-instruction", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Info, { className: "h-4 w-4 text-teal-500" }), "Instruction", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(h\u01B0\u1EDBng d\u1EABn b\u00E0i t\u1EADp)" })] }), _jsx(Textarea, { id: "wfsf-instruction", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: "VD: Complete the words in the sentences. Use the words in the box.", rows: 2, className: "min-h-[64px] resize-y border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-100" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(PointsInput, { value: points, onChange: (e) => setPoints(Number(e.target.value) || 1) }), _jsxs("div", { role: "button", tabIndex: 0, onClick: () => setCaseSensitive(!caseSensitive), onKeyDown: (e) => { if (e.key === ' ' || e.key === 'Enter')
                                             setCaseSensitive(!caseSensitive); }, style: { paddingBlock: 'calc(var(--spacing) * 1)' }, className: `inline-flex cursor-pointer items-center gap-2 rounded-md border px-3.5 text-sm font-medium transition-colors select-none ${caseSensitive
                                             ? 'border-teal-300 bg-teal-50 text-teal-700'
-                                            : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'}`, children: [_jsx(Switch, { checked: caseSensitive, onCheckedChange: setCaseSensitive, className: caseSensitive ? 'data-[state=checked]:bg-teal-500 pointer-events-none' : 'pointer-events-none', tabIndex: -1 }), "Ph\u00E2n bi\u1EC7t Hoa / th\u01B0\u1EDDng"] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "wfsf-title", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-teal-500" }), "Ti\u00EAu \u0111\u1EC1", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsx(Input, { id: "wfsf-title", value: effectiveTitle, onChange: (e) => setEffectiveTitle(e.target.value), placeholder: "Nh\u1EADp ti\u00EAu \u0111\u1EC1 c\u00E2u h\u1ECFi...", className: "border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-100" })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Volume2, { className: "h-4 w-4 text-teal-500" }), "File \u00E2m thanh (Audio)", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setAudioUrls((prev) => [...prev, '']), className: "gap-1.5 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm audio"] })] }), audioUrls.length === 0 ? (_jsx("div", { className: "flex items-center justify-between rounded-lg border border-dashed border-gray-200 bg-gray-50/50 p-3 text-xs text-gray-500", children: _jsx("span", { children: "Ch\u01B0a c\u00F3 file audio. Nh\u1EA5n \"Th\u00EAm audio\" \u0111\u1EC3 upload file nghe cho c\u00E2u h\u1ECFi." }) })) : (_jsx("div", { className: "space-y-2.5", children: audioUrls.map((audioUrl, index) => (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50/30 p-2.5", children: [_jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-teal-100 text-xs font-semibold text-teal-700", children: index + 1 }), _jsx("div", { className: "flex-1", children: _jsx(FileUpload, { id: `wfsf-audio-${index}`, label: "", accept: "audio/*", value: audioUrl, onChange: (url) => {
+                                            : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'}`, children: [_jsx(Switch, { checked: caseSensitive, onCheckedChange: setCaseSensitive, className: caseSensitive ? 'data-[state=checked]:bg-teal-500 pointer-events-none' : 'pointer-events-none', tabIndex: -1 }), "Ph\u00E2n bi\u1EC7t Hoa / th\u01B0\u1EDDng"] }), _jsx(BlankStyleSwitch, { value: blankStyle, onChange: setBlankStyle })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "wfsf-title", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-teal-500" }), "Ti\u00EAu \u0111\u1EC1", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsx(Input, { id: "wfsf-title", value: effectiveTitle, onChange: (e) => setEffectiveTitle(e.target.value), placeholder: "Nh\u1EADp ti\u00EAu \u0111\u1EC1 c\u00E2u h\u1ECFi...", className: "border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-100" })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Volume2, { className: "h-4 w-4 text-teal-500" }), "File \u00E2m thanh (Audio)", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setAudioUrls((prev) => [...prev, '']), className: "gap-1.5 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm audio"] })] }), audioUrls.length === 0 ? (_jsx("div", { className: "flex items-center justify-between rounded-lg border border-dashed border-gray-200 bg-gray-50/50 p-3 text-xs text-gray-500", children: _jsx("span", { children: "Ch\u01B0a c\u00F3 file audio. Nh\u1EA5n \"Th\u00EAm audio\" \u0111\u1EC3 upload file nghe cho c\u00E2u h\u1ECFi." }) })) : (_jsx("div", { className: "space-y-2.5", children: audioUrls.map((audioUrl, index) => (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50/30 p-2.5", children: [_jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-teal-100 text-xs font-semibold text-teal-700", children: index + 1 }), _jsx("div", { className: "flex-1", children: _jsx(FileUpload, { id: `wfsf-audio-${index}`, label: "", accept: "audio/*", value: audioUrl, onChange: (url) => {
                                                             setAudioUrls((prev) => {
                                                                 const next = [...prev];
                                                                 next[index] = url;

package/dist/components/questions/types/word-fill-structured-form/map-wfsf-question-data.js

@@ -50,6 +50,7 @@ export function mapQuestionToWfsfData(question) {
     const source = asRecord(question);
     const apiContent = asRecord(source.content);
     const answer = asRecord(source.answer);
+    const meta = asRecord(source.meta);
     const correctAnswer = asRecord(source.correctAnswer ??
         source.correct_answer ??
         answer.correctAnswer ??
@@ -58,7 +59,13 @@ export function mapQuestionToWfsfData(question) {
         ? parseFloat(String(source.total_points))
         : answer.points ?? source.points ?? 1;
     const points = Number.isFinite(Number(pointsRaw)) ? Number(pointsRaw) : 1;
-    const instruction = String(apiContent.instruction || answer.instruction || source.instruction || source.explanation || '');
+    // Pearson bank stores rubric on meta.instruction; school/API use content.instruction.
+    const instruction = String(apiContent.instruction ||
+        answer.instruction ||
+        source.instruction ||
+        meta.instruction ||
+        source.explanation ||
+        '');
     const explanation = String(answer.explanation || '');
     const content = resolveHtmlContent(apiContent, answer);
     const rawWordBank = apiContent.wordBank ?? answer.wordBank;

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

@@ -35,6 +35,10 @@ export const transformWordFillStructuredForm = (question) => {
         audioUrls,
         content: answerData.content,
     };
+    const instructionText = String(answerData.instruction ?? '').trim();
+    if (instructionText) {
+        apiContent.instruction = instructionText;
+    }
     if (answerData.blankStyle) {
         apiContent.blankStyle = answerData.blankStyle;
     }

package/dist/components/results/renderers/ReviewListenAndWriteRenderer.d.ts

@@ -1,5 +1,5 @@
 import type { FillBlankQuestion } from '../../../components/exams/take/types';
-import { type ImageLabelData } from '../../questions/_shared/types/question-group.type';
+import type { ImageLabelData } from '../../questions/_shared/types/question-group.type';
 interface ReviewListenAndWriteRendererProps {
     partNumber: number;
     questionCount: number;

package/dist/components/results/renderers/ReviewListenAndWriteRenderer.js

@@ -7,7 +7,7 @@ import CambridgeYleInstructionBanner from '../../../components/themes/cambridge-
 import CambridgeYleAudioPlayer from '../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer';
 import { countBlanks, formatAcceptedAnswers, hasAnyBlankValue, isBlankCorrect, toBlankValues, } from '../../../shared/lib/utils/fill-in-blank';
 import { ImageLabelWordBank } from '../../questions/groups/ImageLabelWordBank';
-import { hasImageLabels } from '../../questions/_shared/types/question-group.type';
+import { hasImageLabels } from '../../questions/_shared/types/question-group.utils';
 export function ReviewListenAndWriteRenderer({ partNumber, questionCount, instruction, partName, audioUrl, title, exampleText, questions, answers, isCorrectMap, imageLabels, }) {
     /**
      * Get answer status from API's isCorrect field

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export * as Results from './components/results';
 export * as Themes from './components/themes';
 export * as Shared from './shared';
 export { buildExamTemplatePayload, createContestRoomsApi, createExamCreateApi, createExamEntryApi, createExamQuestionsApi, createExamQuestionsFetchApi, createExamTakingApi, createMockContestRoomsApi, createMockCreateExamApi, createMockExamEntryApi, createMockExamQuestionsApi, createMockExamTakingApi, createMockResultReviewApi, createResultReviewApi } from './api';
-export type { AnswerGradingStatusItem, AnswersGradingStatusResult, ContestRoomListItem, ContestRoomRegistrationStatus, ContestRoomVisibility, ContestRoomsContestDetail, ContestRoomsFetchApiOptions, ContestRoomsSdkApi, CreateExamFetchApiOptions, CreateExamPayload, CreateExamSdkApi, ExamFormData, ExamLevelOption, ExamQuestionsSdkApi, ExamResponse, ExamTakingAnswerValue, ExamTakingAttempt, ExamTakingFetchApiOptions, ExamTakingQuestion, ExamTakingQuestionsResult, ExamTakingRoom, ExamTakingSdkApi, ExamTakingTemplatePart, ExamTemplatePayload, ExamWithTemplate, ExistingQuestionBank, FetchApiOptions, GradingSummary, QuestionSearchItem, SaveExamInput, SaveExamTakingAnswersInput, SaveQuestionInput, SaveQuestionResult, SearchQuestionBankInput, SearchQuestionBankResult, SubmitExamTakingAttemptResult, UpdateExamTemplateInput, UpdatePartAudioInput, UploadAudioAnswerResult } from './api';
+export type { AnswerGradingStatusItem, AnswersGradingStatusResult, ContestRoomListItem, ContestRoomRegistrationStatus, ContestRoomVisibility, ContestRoomsContestDetail, ContestRoomsFetchApiOptions, ContestRoomsSdkApi, CreateExamFetchApiOptions, CreateExamPayload, CreateExamSdkApi, ExamFormData, ExamLevelOption, ExamQuestionsSdkApi, ExamResponse, ExamTakingAnswerValue, ExamTakingAttempt, ExamTakingFetchApiOptions, ExamTakingQuestion, ExamTakingQuestionsResult, ExamTakingRoom, ExamTakingSdkApi, ExamTakingTemplatePart, ExamTemplatePayload, ExamWithTemplate, ExistingQuestionBank, FetchApiOptions, GradingSummary, QuestionBankFiltersInput, QuestionBankFiltersResult, QuestionSearchItem, SaveExamInput, SaveExamTakingAnswersInput, SaveQuestionInput, SaveQuestionResult, SearchQuestionBankInput, SearchQuestionBankResult, SubmitExamTakingAttemptResult, UpdateExamTemplateInput, UpdatePartAudioInput, UploadAudioAnswerResult } from './api';
 export { CreateExamPageContainer, ExamPreviewDialog, ExamPreviewMode, ExamQuestionsPageContainer, ExamTakingPageContainer, ExamViewDialog, StudentContestRoomsPageContainer, StudentExamEntryPageContainer } from './components/exams';
 export type { CreateExamPageContainerProps, CreateExamTexts, ExamPreviewDialogProps, ExamQuestionsPageContainerProps, ExamTakingPageContainerProps, ExamViewDialogExam, ExamViewDialogProps, StudentContestRoomsPageContainerProps, StudentExamEntryPageContainerProps } from './components/exams';
 export { ResultReviewPageContainer } from './components/results';
@@ -15,8 +15,8 @@ export { QuestionCreator } from './components/questions/creator/QuestionCreator'
 export type { QuestionCreatorProps } from './components/questions/creator/QuestionCreator';
 export { QuestionGroupCreator } from './components/questions/creator/QuestionGroupCreator';
 export type { QuestionGroupCreatorProps } from './components/questions/creator/QuestionGroupCreator';
-export { DifficultyLevel, EditQuestionBankDialog, QuestionBankEditorType, QuestionEditorRenderer, } from './components/questions/question-bank';
-export type { EditQuestionBankDialogProps, QuestionBankEditItem, QuestionEditorChangeData, QuestionEditorRendererProps, SkillType as QuestionBankSkillType, UpdateQuestionBankDto, } from './components/questions/question-bank';
+export { DifficultyLevel, EditQuestionBankDialog, QuestionBankEditorType, QuestionBankPickerDialog, QuestionEditorRenderer, } from './components/questions/question-bank';
+export type { EditQuestionBankDialogProps, QuestionBankEditItem, QuestionBankLessonSuggestion, QuestionBankPickerDefaultFilters, QuestionBankPickerDialogProps, QuestionEditorChangeData, QuestionEditorRendererProps, SkillType as QuestionBankSkillType, UpdateQuestionBankDto, } from './components/questions/question-bank';
 export { renderDedicatedComponent } from './components/questions/creator/dedicated-component-router';
 export type { DedicatedComponentRouterProps, ValidationRef, } from './components/questions/creator/dedicated-component-router';
 export { questionTypeRegistry } from './components/questions/creator/question-type-registry';
@@ -24,6 +24,7 @@ export type { QuestionTypeRegistration, RouterContext, } from './components/ques
 export { QUESTION_TYPE_CONFIG, QUESTION_TYPES_WITH_DEDICATED_COMPONENTS } from './components/questions/_shared/config/question-types.config';
 export { validateQuestion } from './components/questions/_shared/utils/question-validation';
 export { buildAnswerPayload } from './components/questions/_shared/utils/answer-builder';
+export { transformApiQuestionToFrontend, transformApiQuestionsToFrontend, } from './shared/lib/utils/question-reverse-transform';
 export type { QuestionFormState } from './components/questions/_shared/hooks/useQuestionFormState';
 export * from './components/questions/_shared/types';
 export { QuestionViewer, QuestionGroupViewer, WordFillStructuredFormViewer, ChooseTheCorrectAnswerGroupViewer, TrueFalseGroupViewer, TrueFalseCorrectGroupViewer, FillInBlankGroupViewer, MatchingWithLinesGroupViewer, CrossOutWordGroupViewer, SpontaneousQaGroupViewer, WordOrderAndMatchGroupViewer, AnswerTheQuestionGroupViewer, MatchWordToPictureViewer, MatchWordToPictureGroupViewer, MatchColumnsToMakeSentencesViewer, WordOrderingGroupViewer, SortWordsIntoCategoriesViewer, ChooseThenAnswerGroupViewer, } from './components/questions/viewer';

package/dist/index.js

@@ -14,11 +14,12 @@ export { CreateExamPageContainer, ExamPreviewDialog, ExamPreviewMode, ExamQuesti
 export { ResultReviewPageContainer } from './components/results';
 export { QuestionCreator } from './components/questions/creator/QuestionCreator';
 export { QuestionGroupCreator } from './components/questions/creator/QuestionGroupCreator';
-export { DifficultyLevel, EditQuestionBankDialog, QuestionBankEditorType, QuestionEditorRenderer, } from './components/questions/question-bank';
+export { DifficultyLevel, EditQuestionBankDialog, QuestionBankEditorType, QuestionBankPickerDialog, QuestionEditorRenderer, } from './components/questions/question-bank';
 export { renderDedicatedComponent } from './components/questions/creator/dedicated-component-router';
 export { questionTypeRegistry } from './components/questions/creator/question-type-registry';
 export { QUESTION_TYPE_CONFIG, QUESTION_TYPES_WITH_DEDICATED_COMPONENTS } from './components/questions/_shared/config/question-types.config';
 export { validateQuestion } from './components/questions/_shared/utils/question-validation';
 export { buildAnswerPayload } from './components/questions/_shared/utils/answer-builder';
+export { transformApiQuestionToFrontend, transformApiQuestionsToFrontend, } from './shared/lib/utils/question-reverse-transform';
 export * from './components/questions/_shared/types';
 export { QuestionViewer, QuestionGroupViewer, WordFillStructuredFormViewer, ChooseTheCorrectAnswerGroupViewer, TrueFalseGroupViewer, TrueFalseCorrectGroupViewer, FillInBlankGroupViewer, MatchingWithLinesGroupViewer, CrossOutWordGroupViewer, SpontaneousQaGroupViewer, WordOrderAndMatchGroupViewer, AnswerTheQuestionGroupViewer, MatchWordToPictureViewer, MatchWordToPictureGroupViewer, MatchColumnsToMakeSentencesViewer, WordOrderingGroupViewer, SortWordsIntoCategoriesViewer, ChooseThenAnswerGroupViewer, } from './components/questions/viewer';