@tinyweb_dev/oe-exam-sdk 1.0.2 → 1.0.3

package/dist/api/exam-questions.d.ts

@@ -6,4 +6,4 @@ export declare function createMockExamQuestionsApi(seed: {
     exam: ExamWithTemplate;
     questions?: Partial<ExamQuestion>[];
 }): ExamQuestionsSdkApi;
-export type { ExamQuestionsSdkApi, ExamWithTemplate, ExistingQuestionBank, FetchApiOptions, QuestionSearchItem, SaveExamInput, SaveQuestionInput, SaveQuestionResult, SearchQuestionBankInput, SearchQuestionBankResult, UpdatePartAudioInput, } from './exam-questions.types';
+export type { ExamQuestionsSdkApi, ExamWithTemplate, ExistingQuestionBank, FetchApiOptions, QuestionBankFiltersInput, QuestionBankFiltersResult, QuestionSearchItem, SaveExamInput, SaveQuestionInput, SaveQuestionResult, SearchQuestionBankInput, SearchQuestionBankResult, UpdatePartAudioInput, } from './exam-questions.types';

package/dist/api/exam-questions.js

@@ -41,17 +41,40 @@ export function createExamQuestionsApi(options = {}) {
         },
         saveExam: async () => undefined,
         updatePartAudio: (input) => updatePartAudio(request, input),
-        searchQuestions: async ({ questionType, keyword, page, size }) => {
+        searchQuestions: async ({ questionType, keyword, bookId, unitId, lessonId, lessonIds, page, size, }) => {
             const query = new URLSearchParams();
             if (questionType)
                 query.set('questionType', questionType);
             if (keyword)
                 query.set('keyword', keyword);
+            if (bookId)
+                query.set('bookId', bookId);
+            if (unitId)
+                query.set('unitId', unitId);
+            if (lessonId)
+                query.set('lessonId', lessonId);
+            appendLessonIds(query, lessonIds);
             query.set('page', String(page));
             query.set('size', String(size));
             const suffix = query.toString() ? `?${query.toString()}` : '';
             return request(`${API_ENDPOINTS.MANAGE.QUESTION_BANKS}${suffix}`);
         },
+        getQuestionFilters: async (input = {}) => {
+            const query = new URLSearchParams();
+            if (input.bookId)
+                query.set('bookId', input.bookId);
+            if (input.unitId)
+                query.set('unitId', input.unitId);
+            if (input.lessonId)
+                query.set('lessonId', input.lessonId);
+            appendLessonIds(query, input.lessonIds);
+            const suffix = query.toString() ? `?${query.toString()}` : '';
+            const result = await request(`${API_ENDPOINTS.MANAGE.QUESTION_BANKS}/filters${suffix}`);
+            if (result && typeof result === 'object' && 'data' in result && result.data) {
+                return result.data;
+            }
+            return result;
+        },
     };
 }
 export const createExamQuestionsFetchApi = createExamQuestionsApi;
@@ -93,6 +116,15 @@ export function createMockExamQuestionsApi(seed) {
             })),
             meta: { totalItems: questions.size },
         }),
+        getQuestionFilters: async () => ({
+            questionTypes: Array.from(new Set(Array.from(questions.values())
+                .map((q) => q.type)
+                .filter((t) => Boolean(t))
+                .map(String))),
+            books: [],
+            units: [],
+            lessons: [],
+        }),
     };
 }
 function resolveTransformOptions(input) {
@@ -127,6 +159,12 @@ function createRequest({ baseUrl = API_BASE_URL ?? '', fetcher = fetch, headers,
         return response.json();
     };
 }
+function appendLessonIds(query, lessonIds) {
+    const ids = (lessonIds ?? []).map((id) => id.trim()).filter(Boolean);
+    if (ids.length === 0)
+        return;
+    query.set('lessonIds', ids.join(','));
+}
 function toRecord(value) {
     return typeof value === 'object' && value !== null && !Array.isArray(value) ? value : undefined;
 }

package/dist/api/exam-questions.types.d.ts

@@ -7,6 +7,8 @@ export interface ExamQuestionsSdkApi {
     saveExam?: (input: SaveExamInput) => Promise<void>;
     updatePartAudio?: (input: UpdatePartAudioInput) => Promise<void>;
     searchQuestions?: (input: SearchQuestionBankInput) => Promise<SearchQuestionBankResult>;
+    /** Distinct question types + cascade book/unit/lesson names from meta. */
+    getQuestionFilters?: (input?: QuestionBankFiltersInput) => Promise<QuestionBankFiltersResult>;
 }
 export interface ExamQuestionsApiResponse<T> {
     data: T;
@@ -69,9 +71,34 @@ export interface UpdatePartAudioInput {
 export interface SearchQuestionBankInput {
     questionType?: QuestionType;
     keyword?: string;
+    /** meta.bookId */
+    bookId?: string;
+    /** meta.unitId */
+    unitId?: string;
+    /** meta.lessonId */
+    lessonId?: string;
+    /** Session scope: multiple meta.lessonId (IN). */
+    lessonIds?: string[];
     page: number;
     size: number;
 }
+export interface QuestionBankFiltersInput {
+    bookId?: string;
+    unitId?: string;
+    lessonId?: string;
+    lessonIds?: string[];
+}
+/** Cascade option: stable meta id + display label. */
+export interface QuestionBankFilterOption {
+    id: string;
+    name: string;
+}
+export interface QuestionBankFiltersResult {
+    questionTypes: string[];
+    books: QuestionBankFilterOption[];
+    units: QuestionBankFilterOption[];
+    lessons: QuestionBankFilterOption[];
+}
 export interface QuestionSearchItem {
     id: string;
     questionType: QuestionType | string;
@@ -86,6 +113,7 @@ export interface QuestionSearchItem {
     code?: string;
     title?: string | null;
     usageCount?: number;
+    meta?: Record<string, unknown> | null;
 }
 export interface SearchQuestionBankResult {
     data: QuestionSearchItem[];

package/dist/components/exams/ExamCreator.d.ts

@@ -1,6 +1,7 @@
 import { type ExistingQuestionBank } from '../questions/components/QuestionBankOption';
+import { type QuestionBankLessonSuggestion, type QuestionBankPickerDefaultFilters } from '../questions/question-bank/QuestionBankPickerDialog';
 import type { ExamData, ExamQuestion, ExamTemplate } from '../../shared/types/entities/exam.types';
-import type { SaveQuestionInput, SearchQuestionBankInput, SearchQuestionBankResult } from '../../api/exam-questions.types';
+import type { QuestionBankFiltersInput, QuestionBankFiltersResult, SaveQuestionInput, SearchQuestionBankInput, SearchQuestionBankResult } from '../../api/exam-questions.types';
 export interface ExamCreatorProps {
     template: ExamTemplate;
     examId?: string;
@@ -17,6 +18,11 @@ export interface ExamCreatorProps {
     onPartAudioChange?: (partId: string, audioUrl: string) => void | Promise<void>;
     partAudioOverrides?: Record<string, string>;
     searchQuestions?: (input: SearchQuestionBankInput) => Promise<SearchQuestionBankResult>;
+    getQuestionFilters?: (input?: QuestionBankFiltersInput) => Promise<QuestionBankFiltersResult>;
+    /** Prefill book/unit/lesson filters in the bank picker. */
+    questionBankDefaultFilters?: QuestionBankPickerDefaultFilters;
+    /** Quick-pick chips for lesson provenance. */
+    questionBankLessonSuggestions?: QuestionBankLessonSuggestion[];
     saveExamRef?: React.MutableRefObject<(() => void) | null>;
 }
 export declare function ExamCreator(props: ExamCreatorProps): import("react").JSX.Element;

package/dist/components/exams/ExamCreator.js

@@ -1,10 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { CheckCircle, ChevronLeft, ChevronRight, Loader2, Save } from 'lucide-react';
+import { CheckCircle, ChevronLeft, ChevronRight, Library, Loader2, Save } from 'lucide-react';
 import { Button } from '../../components/ui/button';
 import { QuestionBankOption } from '../questions/components/QuestionBankOption';
 import { QuestionSearchDropdown } from '../questions/components/QuestionSearchDropdown';
+import { QuestionBankPickerDialog, } from '../questions/question-bank/QuestionBankPickerDialog';
 import { QuestionCreator } from '../questions/creator/QuestionCreator';
 import { useToast } from '../../shared/lib/hooks/useToast';
 import { useT } from '../../shared/lib/i18n';
@@ -50,6 +51,7 @@ export function ExamCreator(props) {
     const [selectedQuestionInfo, setSelectedQuestionInfo] = useState({});
     const [questionBankCodeError, setQuestionBankCodeError] = useState();
     const [questionBankTitleError, setQuestionBankTitleError] = useState();
+    const [pickerOpen, setPickerOpen] = useState(false);
     const currentPart = getPartByQuestionIndex(template, currentQuestionIndex);
     const currentPartId = currentPart?.id ?? '';
     const currentConfig = currentPart ? getEffectiveQuestionConfig(currentPart, currentQuestionIndex) : undefined;
@@ -198,30 +200,64 @@ export function ExamCreator(props) {
             setIsSavingQuestion(false);
         }
     };
-    const handleExistingQuestionSelect = (question) => {
+    const applyBankItemToIndex = useCallback((item, targetIndex) => {
+        const questionType = 'questionType' in item ? item.questionType : item.type;
+        const correctAnswer = 'correctAnswer' in item ? item.correctAnswer : item.answer;
         const transformed = transformApiQuestionToFrontend({
-            question_type: question.type,
-            content: question.content,
-            correct_answer: question.answer,
-            points: question.points,
-            difficult_level: question.difficulty,
-            question_skill_type: question.skill,
-            explanation: question.explanation,
+            question_type: questionType,
+            content: item.content,
+            correct_answer: correctAnswer,
+            points: item.points,
+            difficult_level: item.difficulty,
+            question_skill_type: item.skill,
+            explanation: item.explanation,
         });
-        const selectedQuestion = { ...transformed, id: undefined, partId: currentPartId, questionNumber: currentQuestionIndex + 1, isCompleted: false };
-        upsertQuestionData(currentQuestionIndex, selectedQuestion);
-        const bankId = question.id;
-        const code = question.code;
-        const title = question.title;
+        const part = getPartByQuestionIndex(template, targetIndex);
+        const selectedQuestion = {
+            ...transformed,
+            id: undefined,
+            partId: part?.id ?? currentPartId,
+            questionNumber: targetIndex + 1,
+            isCompleted: false,
+        };
+        upsertQuestionData(targetIndex, selectedQuestion);
+        const bankId = item.id;
+        const code = 'code' in item ? item.code : undefined;
+        const title = 'title' in item ? (item.title ?? undefined) : undefined;
         if (code || title)
-            setSelectedQuestionInfo((prev) => ({ ...prev, [currentQuestionIndex]: { code, title } }));
-        if (bankId && (code || title))
-            setExistingQuestionBanks((prev) => ({ ...prev, [currentQuestionIndex]: { id: bankId, code: code ?? '', title: title ?? '' } }));
-        setQuestionStatus(examId, currentQuestionIndex + 1, QuestionStatus.UNSAVED);
-        setCurrentQuestionHasUnsavedChanges(true);
-        markQuestionCompleted(currentQuestionIndex, false);
+            setSelectedQuestionInfo((prev) => ({ ...prev, [targetIndex]: { code, title: title ?? undefined } }));
+        if (bankId && (code || title)) {
+            setExistingQuestionBanks((prev) => ({
+                ...prev,
+                [targetIndex]: { id: bankId, code: code ?? '', title: title ?? '' },
+            }));
+        }
+        setQuestionStatus(examId, targetIndex + 1, QuestionStatus.UNSAVED);
+        if (targetIndex === currentQuestionIndex) {
+            setCurrentQuestionHasUnsavedChanges(true);
+            markQuestionCompleted(targetIndex, false);
+        }
+        else {
+            markQuestionCompleted(targetIndex, false);
+        }
+    }, [currentPartId, currentQuestionIndex, examId, markQuestionCompleted, setCurrentQuestionHasUnsavedChanges, template, upsertQuestionData]);
+    const handleExistingQuestionSelect = (question) => {
+        applyBankItemToIndex(question, currentQuestionIndex);
         success({ message: t('common.examCreator.bankSelected') });
     };
+    const handlePickerConfirm = (items) => {
+        if (items.length === 0)
+            return;
+        items.forEach((item, offset) => {
+            const targetIndex = Math.min(currentQuestionIndex + offset, template.totalQuestions - 1);
+            applyBankItemToIndex(item, targetIndex);
+        });
+        success({
+            message: items.length === 1
+                ? t('common.examCreator.bankSelected')
+                : `Đã chèn ${items.length} câu từ ngân hàng`,
+        });
+    };
     const handleConfirmSaveExam = () => {
         setShowCompletionDialog(false);
         clearQuestionStatuses(examId);
@@ -234,7 +270,7 @@ export function ExamCreator(props) {
         else
             setShowCompletionDialog(true);
     });
-    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden bg-gradient-to-br from-slate-50 to-blue-50/30", children: [_jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [_jsx("div", { className: "w-80 overflow-y-auto border-r border-gray-200/60 bg-white/80 p-4 backdrop-blur-sm", children: _jsx(ExamPartTabs, { template: template, currentPartId: currentPartId, completedQuestions: completedQuestions, onPartChange: (partId) => tryNavigate(template.parts.find((part) => part.id === partId)?.startIndex ?? 0) }) }), _jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-4 pb-4", children: _jsxs("div", { className: "mx-auto max-w-4xl", children: [currentPart?.skill === 'LISTENING' && _jsx(PartAudioUploader, { partId: currentPart.id, partName: currentPart.name, audioUrl: props.partAudioOverrides?.[currentPart.id] ?? currentPart.audioUrl ?? '', examId: examId, onAudioChange: (url) => void props.onPartAudioChange?.(currentPart.id, url), isReadOnly: !props.onPartAudioChange }), _jsx(QuestionCreator, { initialData: currentQuestionDraft, prefilledType: currentConfig?.questionType, prefilledSkill: currentPart?.skill, optionCount: currentConfig?.optionCount, optionMode: currentConfig?.optionMode, defaultValue: currentConfig?.defaultValue, defaultQuestion: currentConfig?.defaultQuestion, viewMode: currentConfig?.viewMode, groups: currentConfig?.groups || normalizedPart?.groups, groupConfig: currentConfig?.groupConfig || normalizedPart?.groupConfig, groupType: currentConfig?.groupType || normalizedPart?.groupType, articleCount: currentConfig?.articleCount ?? currentPart?.articleCount, questionConfig: currentConfig?.questionConfig || currentPart?.questionConfig, questionIndexInPart: isPartLevelGroup ? currentQuestionIndex - (currentPart?.startIndex ?? 0) : currentQuestionIndex - (currentConfig?.startIndex ?? currentPart?.startIndex ?? 0), partId: sharedDataPartId, onChange: handleQuestionDraftChange, onUnsavedChangesChange: setCurrentQuestionHasUnsavedChanges, onSave: handleQuestionSave, onCancel: props.onCancel, isEmbedded: true, externalErrors: validationErrors[currentQuestionIndex], validationRef: validationRef, suggestedAnswers: currentConfig?.suggestedAnswers || currentPart?.suggestedAnswers, hasSuggestedAnswers: currentConfig?.hasSuggestedAnswers ?? currentPart?.hasSuggestedAnswers, headerExtra: _jsx(QuestionSearchDropdown, { questionType: currentConfig?.questionType || currentPart?.questionType, onSelect: handleExistingQuestionSelect, selectedQuestionLabel: selectedQuestionInfo[currentQuestionIndex] ? `${selectedQuestionInfo[currentQuestionIndex].code ? `#${selectedQuestionInfo[currentQuestionIndex].code} - ` : ''}${selectedQuestionInfo[currentQuestionIndex].title || ''}` : undefined, disabled: !(currentConfig?.questionType || currentPart?.questionType), compact: true, searchQuestions: props.searchQuestions }) }, currentQuestionIndex), _jsx("div", { className: "mt-8", children: _jsx(QuestionBankOption, { checked: bankSetting.checked, onCheckedChange: (checked) => updateBankSetting(currentQuestionIndex, { checked }, setQuestionBankSettings, setCurrentQuestionHasUnsavedChanges, examId), code: bankSetting.code, onCodeChange: (code) => updateBankSetting(currentQuestionIndex, { code }, setQuestionBankSettings, setCurrentQuestionHasUnsavedChanges, examId), title: bankSetting.title, onTitleChange: (title) => updateBankSetting(currentQuestionIndex, { title }, setQuestionBankSettings, setCurrentQuestionHasUnsavedChanges, examId), codeError: questionBankCodeError, error: questionBankTitleError, existingBank: existingQuestionBanks[currentQuestionIndex] || null }) })] }) }), _jsx("div", { className: "flex-shrink-0 border-t border-gray-200/80 bg-white/95 shadow-[0_-4px_20px_rgba(0,0,0,0.08)] backdrop-blur-sm", children: _jsxs("div", { className: "mx-auto flex max-w-4xl items-center justify-between px-6 py-4", children: [_jsxs(Button, { variant: "outline", onClick: () => tryNavigate(currentQuestionIndex - 1), disabled: currentQuestionIndex === 0, className: "gap-2 border-gray-300 hover:bg-gray-50", children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), "C\u00E2u tr\u01B0\u1EDBc"] }), _jsxs("div", { className: "flex items-center gap-4", children: [currentQuestionHasUnsavedChanges ? _jsxs("div", { className: "flex items-center gap-2 rounded-full bg-amber-50 px-3 py-1.5 ring-1 ring-amber-200", children: [_jsx("span", { className: "h-2 w-2 animate-pulse rounded-full bg-amber-500" }), _jsx("span", { className: "text-xs font-medium text-amber-700", children: "Ch\u01B0a l\u01B0u" })] }) : questionsState[currentQuestionIndex]?.isCompleted ? _jsxs("div", { className: "flex items-center gap-2 rounded-full bg-green-50 px-3 py-1.5 ring-1 ring-green-200", children: [_jsx(CheckCircle, { className: "h-3.5 w-3.5 text-green-500" }), _jsx("span", { className: "text-xs font-medium text-green-700", children: "\u0110\u00E3 l\u01B0u" })] }) : null, _jsxs("div", { className: "flex items-center gap-2 rounded-full bg-gray-100 px-4 py-2", children: [_jsxs("span", { className: "text-sm font-bold text-gray-900", children: ["C\u00E2u ", currentQuestionIndex + 1] }), _jsx("span", { className: "text-sm text-gray-400", children: "/" }), _jsx("span", { className: "text-sm text-gray-500", children: template.totalQuestions })] }), _jsx(Button, { onClick: () => void handleQuestionSave(getQuestionData(currentQuestionIndex)), disabled: isSavingQuestion || !currentQuestionHasUnsavedChanges, className: "gap-2 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 shadow-md hover:shadow-lg transition-all", children: isSavingQuestion ? _jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), "\u0110ang l\u01B0u..."] }) : _jsxs(_Fragment, { children: [_jsx(Save, { className: "h-4 w-4" }), "L\u01B0u c\u00E2u h\u1ECFi"] }) })] }), _jsxs(Button, { variant: "outline", onClick: () => tryNavigate(currentQuestionIndex + 1), disabled: currentQuestionIndex >= template.totalQuestions - 1 || !questionsState[currentQuestionIndex]?.isCompleted, className: "gap-2 border-gray-300 hover:bg-gray-50", children: ["C\u00E2u ti\u1EBFp theo", _jsx(ChevronRight, { className: "h-4 w-4" })] })] }) })] }), _jsx("div", { className: "w-80 overflow-y-auto border-l border-gray-200/60 bg-white/80 p-4 backdrop-blur-sm", children: _jsx(ExamQuestionGrid, { template: template, currentQuestionIndex: currentQuestionIndex, completedQuestions: completedQuestions, onQuestionChange: tryNavigate }) })] }), _jsx(CompletionDialog, { open: showCompletionDialog, onOpenChange: setShowCompletionDialog, completedCount: completedQuestions.size, totalQuestions: template.totalQuestions, onConfirm: handleConfirmSaveExam }), _jsx(UnsavedChangesDialog, { open: showUnsavedDialog, onOpenChange: setShowUnsavedDialog, onConfirm: confirmNavigation, onCancel: () => setShowUnsavedDialog(false), questionNumber: currentQuestionIndex + 1 })] }));
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden bg-gradient-to-br from-slate-50 to-blue-50/30", children: [_jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [_jsx("div", { className: "w-80 overflow-y-auto border-r border-gray-200/60 bg-white/80 p-4 backdrop-blur-sm", children: _jsx(ExamPartTabs, { template: template, currentPartId: currentPartId, completedQuestions: completedQuestions, onPartChange: (partId) => tryNavigate(template.parts.find((part) => part.id === partId)?.startIndex ?? 0) }) }), _jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-4 pb-4", children: _jsxs("div", { className: "mx-auto max-w-4xl", children: [props.searchQuestions ? (_jsx("div", { className: "mb-3 flex justify-end", children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "gap-1.5", onClick: () => setPickerOpen(true), children: [_jsx(Library, { className: "h-4 w-4" }), "Ng\u00E2n h\u00E0ng c\u00E2u h\u1ECFi"] }) })) : null, currentPart?.skill === 'LISTENING' && _jsx(PartAudioUploader, { partId: currentPart.id, partName: currentPart.name, audioUrl: props.partAudioOverrides?.[currentPart.id] ?? currentPart.audioUrl ?? '', examId: examId, onAudioChange: (url) => void props.onPartAudioChange?.(currentPart.id, url), isReadOnly: !props.onPartAudioChange }), _jsx(QuestionCreator, { initialData: currentQuestionDraft, prefilledType: currentConfig?.questionType, prefilledSkill: currentPart?.skill, optionCount: currentConfig?.optionCount, optionMode: currentConfig?.optionMode, defaultValue: currentConfig?.defaultValue, defaultQuestion: currentConfig?.defaultQuestion, viewMode: currentConfig?.viewMode, groups: currentConfig?.groups || normalizedPart?.groups, groupConfig: currentConfig?.groupConfig || normalizedPart?.groupConfig, groupType: currentConfig?.groupType || normalizedPart?.groupType, articleCount: currentConfig?.articleCount ?? currentPart?.articleCount, questionConfig: currentConfig?.questionConfig || currentPart?.questionConfig, questionIndexInPart: isPartLevelGroup ? currentQuestionIndex - (currentPart?.startIndex ?? 0) : currentQuestionIndex - (currentConfig?.startIndex ?? currentPart?.startIndex ?? 0), partId: sharedDataPartId, onChange: handleQuestionDraftChange, onUnsavedChangesChange: setCurrentQuestionHasUnsavedChanges, onSave: handleQuestionSave, onCancel: props.onCancel, isEmbedded: true, externalErrors: validationErrors[currentQuestionIndex], validationRef: validationRef, suggestedAnswers: currentConfig?.suggestedAnswers || currentPart?.suggestedAnswers, hasSuggestedAnswers: currentConfig?.hasSuggestedAnswers ?? currentPart?.hasSuggestedAnswers, headerExtra: _jsx(QuestionSearchDropdown, { questionType: currentConfig?.questionType || currentPart?.questionType, onSelect: handleExistingQuestionSelect, selectedQuestionLabel: selectedQuestionInfo[currentQuestionIndex] ? `${selectedQuestionInfo[currentQuestionIndex].code ? `#${selectedQuestionInfo[currentQuestionIndex].code} - ` : ''}${selectedQuestionInfo[currentQuestionIndex].title || ''}` : undefined, disabled: !(currentConfig?.questionType || currentPart?.questionType), compact: true, searchQuestions: props.searchQuestions }) }, currentQuestionIndex), _jsx("div", { className: "mt-8", children: _jsx(QuestionBankOption, { checked: bankSetting.checked, onCheckedChange: (checked) => updateBankSetting(currentQuestionIndex, { checked }, setQuestionBankSettings, setCurrentQuestionHasUnsavedChanges, examId), code: bankSetting.code, onCodeChange: (code) => updateBankSetting(currentQuestionIndex, { code }, setQuestionBankSettings, setCurrentQuestionHasUnsavedChanges, examId), title: bankSetting.title, onTitleChange: (title) => updateBankSetting(currentQuestionIndex, { title }, setQuestionBankSettings, setCurrentQuestionHasUnsavedChanges, examId), codeError: questionBankCodeError, error: questionBankTitleError, existingBank: existingQuestionBanks[currentQuestionIndex] || null }) })] }) }), _jsx("div", { className: "flex-shrink-0 border-t border-gray-200/80 bg-white/95 shadow-[0_-4px_20px_rgba(0,0,0,0.08)] backdrop-blur-sm", children: _jsxs("div", { className: "mx-auto flex max-w-4xl items-center justify-between px-6 py-4", children: [_jsxs(Button, { variant: "outline", onClick: () => tryNavigate(currentQuestionIndex - 1), disabled: currentQuestionIndex === 0, className: "gap-2 border-gray-300 hover:bg-gray-50", children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), "C\u00E2u tr\u01B0\u1EDBc"] }), _jsxs("div", { className: "flex items-center gap-4", children: [currentQuestionHasUnsavedChanges ? _jsxs("div", { className: "flex items-center gap-2 rounded-full bg-amber-50 px-3 py-1.5 ring-1 ring-amber-200", children: [_jsx("span", { className: "h-2 w-2 animate-pulse rounded-full bg-amber-500" }), _jsx("span", { className: "text-xs font-medium text-amber-700", children: "Ch\u01B0a l\u01B0u" })] }) : questionsState[currentQuestionIndex]?.isCompleted ? _jsxs("div", { className: "flex items-center gap-2 rounded-full bg-green-50 px-3 py-1.5 ring-1 ring-green-200", children: [_jsx(CheckCircle, { className: "h-3.5 w-3.5 text-green-500" }), _jsx("span", { className: "text-xs font-medium text-green-700", children: "\u0110\u00E3 l\u01B0u" })] }) : null, _jsxs("div", { className: "flex items-center gap-2 rounded-full bg-gray-100 px-4 py-2", children: [_jsxs("span", { className: "text-sm font-bold text-gray-900", children: ["C\u00E2u ", currentQuestionIndex + 1] }), _jsx("span", { className: "text-sm text-gray-400", children: "/" }), _jsx("span", { className: "text-sm text-gray-500", children: template.totalQuestions })] }), _jsx(Button, { onClick: () => void handleQuestionSave(getQuestionData(currentQuestionIndex)), disabled: isSavingQuestion || !currentQuestionHasUnsavedChanges, className: "gap-2 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 shadow-md hover:shadow-lg transition-all", children: isSavingQuestion ? _jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), "\u0110ang l\u01B0u..."] }) : _jsxs(_Fragment, { children: [_jsx(Save, { className: "h-4 w-4" }), "L\u01B0u c\u00E2u h\u1ECFi"] }) })] }), _jsxs(Button, { variant: "outline", onClick: () => tryNavigate(currentQuestionIndex + 1), disabled: currentQuestionIndex >= template.totalQuestions - 1 || !questionsState[currentQuestionIndex]?.isCompleted, className: "gap-2 border-gray-300 hover:bg-gray-50", children: ["C\u00E2u ti\u1EBFp theo", _jsx(ChevronRight, { className: "h-4 w-4" })] })] }) })] }), _jsx("div", { className: "w-80 overflow-y-auto border-l border-gray-200/60 bg-white/80 p-4 backdrop-blur-sm", children: _jsx(ExamQuestionGrid, { template: template, currentQuestionIndex: currentQuestionIndex, completedQuestions: completedQuestions, onQuestionChange: tryNavigate }) })] }), _jsx(CompletionDialog, { open: showCompletionDialog, onOpenChange: setShowCompletionDialog, completedCount: completedQuestions.size, totalQuestions: template.totalQuestions, onConfirm: handleConfirmSaveExam }), _jsx(UnsavedChangesDialog, { open: showUnsavedDialog, onOpenChange: setShowUnsavedDialog, onConfirm: confirmNavigation, onCancel: () => setShowUnsavedDialog(false), questionNumber: currentQuestionIndex + 1 }), props.searchQuestions ? (_jsx(QuestionBankPickerDialog, { open: pickerOpen, onOpenChange: setPickerOpen, searchQuestions: props.searchQuestions, getQuestionFilters: props.getQuestionFilters, defaultFilters: props.questionBankDefaultFilters, lessonSuggestions: props.questionBankLessonSuggestions, onConfirm: handlePickerConfirm })) : null] }));
 }
 function buildQuestionForSave(questionData, freshData, existing, questionType, currentPart, currentQuestionIndex, examDifficulty) {
     return { ...existing, ...questionData, ...(freshData ? { answer: freshData } : {}), type: questionData?.type ?? existing?.type ?? questionType, id: existing?.id ?? questionData?.id, partId: currentPart.id, questionNumber: currentQuestionIndex + 1, difficulty: (questionData?.difficulty ?? examDifficulty ?? existing?.difficulty), skill: currentPart.skill, isCompleted: true };

package/dist/components/exams/ExamQuestionsPageContainer.d.ts

@@ -1,5 +1,6 @@
 import type { UserRole } from '../../shared/types/common.types';
 import type { ExamQuestionsSdkApi } from '../../api/exam-questions.types';
+import type { QuestionBankLessonSuggestion, QuestionBankPickerDefaultFilters } from '../questions/question-bank/QuestionBankPickerDialog';
 import type { CreateExamTexts } from './create-exam.texts';
 export interface ExamQuestionsPageContainerProps {
     examId: string;
@@ -9,5 +10,9 @@ export interface ExamQuestionsPageContainerProps {
     onNavigate?: (href: string) => void;
     /** Optional label overrides for embedded contexts. */
     texts?: CreateExamTexts;
+    /** Prefill book/unit/lesson in bank picker (e.g. homework-context). */
+    questionBankDefaultFilters?: QuestionBankPickerDefaultFilters;
+    /** Lesson chips for bank picker cascade. */
+    questionBankLessonSuggestions?: QuestionBankLessonSuggestion[];
 }
 export declare function ExamQuestionsPageContainer(props: ExamQuestionsPageContainerProps): import("react").JSX.Element;

package/dist/components/exams/ExamQuestionsPageContainer.js

@@ -9,7 +9,7 @@ import { useT } from '../../shared/lib/i18n';
 import { transformApiQuestionsToFrontend } from '../../shared/lib/utils/question-reverse-transform';
 import { ExamCreator } from './ExamCreator';
 import { initializeQuestionStatusesFromAPI } from './exam-question-status';
-function ExamQuestionsContent({ api, examId, listPath = '/manage/exams', onNavigate, texts }) {
+function ExamQuestionsContent({ api, examId, listPath = '/manage/exams', onNavigate, texts, questionBankDefaultFilters, questionBankLessonSuggestions, }) {
     const t = useT();
     const { error: errorToast, success } = useToast();
     const saveExamRef = useRef(null);
@@ -78,7 +78,7 @@ function ExamQuestionsContent({ api, examId, listPath = '/manage/exams', onNavig
         return _jsx(Loading, { label: texts?.questionsLoadingLabel ?? t('admin.exams.questions.loading') });
     if (!exam || !template)
         return _jsx(Empty, { onBack: () => navigate(listPath), label: texts?.questionsNoTemplateLabel ?? t('admin.exams.questions.noTemplate') });
-    return (_jsxs("div", { className: "-m-4 flex h-[calc(100vh-4rem)] flex-col overflow-hidden md:-m-6 md:-mb-10", children: [_jsxs("div", { className: "flex flex-shrink-0 items-center gap-4 border-b border-gray-200/60 bg-white px-4 py-3", children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: () => navigate(listPath), className: "h-8 w-8", children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsx("div", { className: "min-w-0 flex-1", children: _jsxs("h1", { className: "truncate text-lg font-semibold tracking-tight text-gray-900", children: [exam.name, exam.code && _jsxs(Badge, { variant: "outline", className: "ml-2 align-middle border-blue-200 bg-blue-50 text-blue-700 text-xs font-normal", children: [_jsx(Hash, { className: "mr-0.5 h-3 w-3" }), exam.code] })] }) }), _jsxs(Button, { onClick: () => saveExamRef.current?.(), className: "gap-2 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 shadow-sm", size: "sm", children: [_jsx(Save, { className: "h-4 w-4" }), texts?.saveQuestionsLabel ?? 'Lưu đề thi'] })] }), _jsx(ExamCreator, { template: template, examId: examId, examDifficulty: exam.difficulty, examLevel: exam.examLevel ?? undefined, subjectId: exam.subject?.id, initialQuestions: questions, onSaveQuestion: api.saveQuestion, onSave: handleSaveExam, onCancel: () => navigate(listPath), onPartAudioChange: api.updatePartAudio ? handlePartAudioChange : undefined, partAudioOverrides: partAudioOverrides, searchQuestions: api.searchQuestions, saveExamRef: saveExamRef })] }));
+    return (_jsxs("div", { className: "-m-4 flex h-[calc(100vh-4rem)] flex-col overflow-hidden md:-m-6 md:-mb-10", children: [_jsxs("div", { className: "flex flex-shrink-0 items-center gap-4 border-b border-gray-200/60 bg-white px-4 py-3", children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: () => navigate(listPath), className: "h-8 w-8", children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsx("div", { className: "min-w-0 flex-1", children: _jsxs("h1", { className: "truncate text-lg font-semibold tracking-tight text-gray-900", children: [exam.name, exam.code && _jsxs(Badge, { variant: "outline", className: "ml-2 align-middle border-blue-200 bg-blue-50 text-blue-700 text-xs font-normal", children: [_jsx(Hash, { className: "mr-0.5 h-3 w-3" }), exam.code] })] }) }), _jsxs(Button, { onClick: () => saveExamRef.current?.(), className: "gap-2 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 shadow-sm", size: "sm", children: [_jsx(Save, { className: "h-4 w-4" }), texts?.saveQuestionsLabel ?? 'Lưu đề thi'] })] }), _jsx(ExamCreator, { template: template, examId: examId, examDifficulty: exam.difficulty, examLevel: exam.examLevel ?? undefined, subjectId: exam.subject?.id, initialQuestions: questions, onSaveQuestion: api.saveQuestion, onSave: handleSaveExam, onCancel: () => navigate(listPath), onPartAudioChange: api.updatePartAudio ? handlePartAudioChange : undefined, partAudioOverrides: partAudioOverrides, searchQuestions: api.searchQuestions, getQuestionFilters: api.getQuestionFilters, questionBankDefaultFilters: questionBankDefaultFilters, questionBankLessonSuggestions: questionBankLessonSuggestions, saveExamRef: saveExamRef })] }));
 }
 export function ExamQuestionsPageContainer(props) {
     return _jsx(Suspense, { fallback: _jsx(Loading, { label: "Loading..." }), children: _jsx(ExamQuestionsContent, { ...props }) });

package/dist/components/exams/api.d.ts

@@ -2,4 +2,4 @@ export { buildExamTemplatePayload, createExamCreateApi, createMockCreateExamApi
 export type { CreateExamFetchApiOptions, CreateExamPayload, CreateExamSdkApi, ExamFormData, ExamLevelOption, ExamResponse, ExamTemplatePayload, UpdateExamTemplateInput } from '../../api/exam-create';
 export { createExamQuestionsApi, createExamQuestionsFetchApi, createMockExamQuestionsApi } from '../../api/exam-questions';
 export { createExamTakingApi, createMockExamTakingApi } from '../../api/exam-taking';
-export type { ExamQuestionsSdkApi, ExamWithTemplate, ExistingQuestionBank, FetchApiOptions, QuestionSearchItem, SaveExamInput, SaveQuestionInput, SaveQuestionResult, SearchQuestionBankInput, SearchQuestionBankResult, UpdatePartAudioInput } from '../../api/exam-questions';
+export type { ExamQuestionsSdkApi, ExamWithTemplate, ExistingQuestionBank, FetchApiOptions, QuestionBankFiltersInput, QuestionBankFiltersResult, QuestionSearchItem, SaveExamInput, SaveQuestionInput, SaveQuestionResult, SearchQuestionBankInput, SearchQuestionBankResult, UpdatePartAudioInput, } from '../../api/exam-questions';

package/dist/components/exams/index.d.ts

@@ -21,7 +21,7 @@ export { ExamQuestionGrid } from './ExamQuestionGrid';
 export { PartAudioUploader } from './PartAudioUploader';
 export type { PartAudioUploaderProps } from './PartAudioUploader';
 export { createExamQuestionsApi, createExamQuestionsFetchApi, createMockExamQuestionsApi } from './api';
-export type { ExamQuestionsSdkApi, ExamWithTemplate, ExistingQuestionBank, FetchApiOptions, QuestionSearchItem, SaveExamInput, SaveQuestionInput, SaveQuestionResult, SearchQuestionBankInput, SearchQuestionBankResult, UpdatePartAudioInput } from './api';
+export type { ExamQuestionsSdkApi, ExamWithTemplate, ExistingQuestionBank, FetchApiOptions, QuestionBankFiltersInput, QuestionBankFiltersResult, QuestionSearchItem, SaveExamInput, SaveQuestionInput, SaveQuestionResult, SearchQuestionBankInput, SearchQuestionBankResult, UpdatePartAudioInput, } from './api';
 export { ExamQuestionsPageContainer } from './ExamQuestionsPageContainer';
 export type { ExamQuestionsPageContainerProps } from './ExamQuestionsPageContainer';
 export { UnsavedChangesDialog } from './UnsavedChangesDialog';

package/dist/components/exams/take/components/QuestionRenderer.d.ts

@@ -20,6 +20,11 @@ interface QuestionRendererProps {
     onTeacherIntroPlayed?: () => void;
     /** Index of the question to render within the part (for Cambridge YLE 1-by-1 navigation) */
     currentQuestionIndex?: number;
+    /**
+     * Compact chrome for host embeds (school homework). Currently applied to
+     * WORD_FILL_STRUCTURED_FORM only — exam take UI stays full banners by default.
+     */
+    compactLayout?: boolean;
 }
-export declare function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode, onExit, onPartComplete, onPartBack, speakingTheme, initialQuestionIndex, skipTeacherVideo, onTeacherIntroPlayed, currentQuestionIndex, }: QuestionRendererProps): import("react").JSX.Element;
+export declare function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode, onExit, onPartComplete, onPartBack, speakingTheme, initialQuestionIndex, skipTeacherVideo, onTeacherIntroPlayed, currentQuestionIndex, compactLayout, }: QuestionRendererProps): import("react").JSX.Element;
 export {};

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

@@ -13,7 +13,7 @@ import { SpeakingQuestionRenderer } from './speaking/renderers';
 import { transformFillInBlank, transformWriteCorrectVerbForm, transformChooseCorrectAnswer, transformChooseTheCorrectAnswerGroup, transformChooseCorrectAdjective, transformWriteShortLetter, transformColorObjects, transformPictureChoose, transformPictureFillBlankChoose, transformReadingPassage, transformLabelPicture, transformFillWordHint, transformGridFill, transformAnswerTheQuestion, transformAnswerTheQuestionGroup, transformTrueFalse, transformTrueFalseGroup, transformTrueFalseCorrectGroup, transformFillInBlankGroup, transformWordOrdering, transformWordOrderingGroupTake, transformWordFillParagraph, transformMatchByWritingAnswer, transformMatchWordToPicture, transformWriteSentences, transformWordFillStructuredForm, transformWordOrderAndMatchGroup, transformMatchingWithLinesGroup, transformCrosswordPuzzle, transformFindWordsInMatrix, transformSortWordsIntoCategories, transformChooseThenAnswerGroup, } from '../utils/question-transformers';
 import { transformCrossOutWordGroup } from '../utils/cross-out-word-group.transformer';
 import { normalizeColoringAssignments } from '../utils/coloring-assignments';
-export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode = false, onExit, onPartComplete, onPartBack, speakingTheme, initialQuestionIndex, skipTeacherVideo, onTeacherIntroPlayed, currentQuestionIndex, }) {
+export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode = false, onExit, onPartComplete, onPartBack, speakingTheme, initialQuestionIndex, skipTeacherVideo, onTeacherIntroPlayed, currentQuestionIndex, compactLayout = false, }) {
     const { partNo, questionType, questions } = part;
     const questionCount = questions.filter(q => !q.is_example).length;
     const getRenderQuestions = (arr) => {
@@ -222,7 +222,7 @@ export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode =
         }
         case 'WORD_FILL_STRUCTURED_FORM': {
             const data = transformWordFillStructuredForm(questions);
-            return (_jsx(MoversWordFillStructuredFormRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, audioUrl: data.audioUrl || part.audioUrl, groupTitle: data.groupTitle, groupContent: data.groupContent, groupImageUrl: data.groupImageUrl, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+            return (_jsx(MoversWordFillStructuredFormRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, audioUrl: data.audioUrl || part.audioUrl, groupTitle: data.groupTitle, groupContent: data.groupContent, groupImageUrl: data.groupImageUrl, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, compactLayout: compactLayout }));
         }
         case 'WRITE_SENTENCES': {
             const data = transformWriteSentences(questions);

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

@@ -1,5 +1,5 @@
 import type { FillBlankQuestion } from '../../types';
-import { type ImageLabelData } from '../../../../questions/_shared/types/question-group.type';
+import type { ImageLabelData } from '../../../../questions/_shared/types/question-group.type';
 interface MoversListenAndWriteRendererProps {
     partNumber: number;
     partName?: string;

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

@@ -7,7 +7,7 @@ import CambridgeYleAudioPlayer from '../../../../../components/themes/cambridge-
 import CambridgeYleExampleText from '../../../../../components/themes/cambridge-yle/CambridgeYleExampleText';
 import { countBlanks, formatAcceptedAnswers, getPrimaryAnswer, 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';
 /** Preserve author newlines in fill-blank stems by mapping `\n` → `<br />`. */
 function renderTextWithLineBreaks(text) {
     const lines = text.split('\n');

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

@@ -13,6 +13,12 @@ interface MoversWordFillStructuredFormRendererProps {
     answers: Record<string, any>;
     onAnswerChange: (questionId: string, value: any) => void;
     isReviewMode?: boolean;
+    /**
+     * Host embeds (e.g. school homework): hide Cambridge part/instruction banners
+     * and put the rubric inline next to the question number. Default false keeps
+     * full exam chrome unchanged.
+     */
+    compactLayout?: boolean;
 }
-export declare function MoversWordFillStructuredFormRenderer({ partNumber, partName, questionCount, instruction, audioUrl, groupTitle, groupContent, groupImageUrl, questions, answers, onAnswerChange, isReviewMode, }: MoversWordFillStructuredFormRendererProps): React.JSX.Element;
+export declare function MoversWordFillStructuredFormRenderer({ partNumber, partName, questionCount, instruction, audioUrl, groupTitle, groupContent, groupImageUrl, questions, answers, onAnswerChange, isReviewMode, compactLayout, }: MoversWordFillStructuredFormRendererProps): React.JSX.Element;
 export {};

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

@@ -66,21 +66,23 @@ const StructuredFormQuestion = memo(function StructuredFormQuestion({ question,
     const containerRef = useRef(null);
     const onBlankChangeRef = useRef(onBlankChange);
     onBlankChangeRef.current = onBlankChange;
-    const mountedRef = useRef(false);
+    // Track the HTML last applied so we re-apply when content changes and
+    // survive React Strict Mode double-invoke (cleanup may leave empty DOM).
+    const appliedHtmlRef = useRef(null);
     // Store initial answers in a ref so they're available on mount but don't trigger re-renders
     const initialAnswersRef = useRef(initialAnswers);
     const processedHtml = useMemo(() => buildHtmlWithInputPlaceholders(question.content, question.wordBank), [question.content, question.wordBank]);
-    // Set innerHTML ONCE via ref and attach event listeners.
-    // This completely bypasses React's reconciliation so inputs are never
-    // destroyed by re-renders.
+    // Set innerHTML via ref and attach event listeners.
+    // Bypasses React reconciliation so inputs keep focus on answer re-renders.
+    // Re-apply when processedHtml changes OR container is empty (Strict Mode remount).
     useEffect(() => {
         const container = containerRef.current;
         if (!container)
             return;
-        // Only set innerHTML on first mount or if HTML content actually changed
-        if (!mountedRef.current) {
+        const needsApply = appliedHtmlRef.current !== processedHtml || container.childNodes.length === 0;
+        if (needsApply) {
             container.innerHTML = processedHtml;
-            mountedRef.current = true;
+            appliedHtmlRef.current = processedHtml;
         }
         const inputs = container.querySelectorAll('input.structured-blank-input, select.structured-blank-input');
         const handlers = [];
@@ -169,7 +171,7 @@ const StructuredFormQuestion = memo(function StructuredFormQuestion({ question,
                 // Conversation: speaker column hug name (not equal 50/50 split)
                 '[&_table.dialogue]:w-full [&_table.dialogue]:border-collapse [&_table.dialogue]:table-fixed', '[&_table.dialogue_td.speaker]:w-[1%] [&_table.dialogue_td.speaker]:whitespace-nowrap', '[&_table.dialogue_td.speaker]:align-top [&_table.dialogue_td.speaker]:pr-3', '[&_table.dialogue_td.speaker]:font-semibold [&_table.dialogue_td.speaker]:text-slate-900', '[&_table.dialogue_td]:align-top [&_table.dialogue_td]:py-1.5') }), isReviewMode && (_jsxs("div", { className: "space-y-2 rounded-lg border border-slate-200 bg-slate-50 p-3", children: [_jsxs("div", { className: "flex flex-wrap gap-2 text-[11px] font-medium", children: [_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-1 text-green-700", children: [_jsx("span", { className: "h-2 w-2 rounded-full bg-green-500" }), "\u0110\u00FAng"] }), _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-red-100 px-2 py-1 text-red-700", children: [_jsx("span", { className: "h-2 w-2 rounded-full bg-red-500" }), "Sai"] }), _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-1 text-amber-700", children: [_jsx("span", { className: "h-2 w-2 rounded-full bg-amber-500" }), "Ch\u01B0a tr\u1EA3 l\u1EDDi"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider text-slate-500", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("div", { className: "mt-1 flex flex-wrap gap-1.5", children: Object.entries(question.answers).map(([key, val]) => (_jsxs("span", { className: "rounded border border-green-300 bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800", children: [key, ": ", formatWfsfCorrectLabel(val)] }, key))) })] })] }))] }));
 });
-export function MoversWordFillStructuredFormRenderer({ partNumber, partName, questionCount, instruction, audioUrl, groupTitle, groupContent, groupImageUrl, questions, answers, onAnswerChange, isReviewMode = false, }) {
+export function MoversWordFillStructuredFormRenderer({ partNumber, partName, questionCount, instruction, audioUrl, groupTitle, groupContent, groupImageUrl, questions, answers, onAnswerChange, isReviewMode = false, compactLayout = false, }) {
     const answersRef = useRef(answers);
     answersRef.current = answers;
     const onAnswerChangeRef = useRef(onAnswerChange);
@@ -187,5 +189,12 @@ export function MoversWordFillStructuredFormRenderer({ partNumber, partName, que
         });
         return map;
     }, [questions, handleBlankChange]);
-    return (_jsxs("div", { className: "flex flex-col h-full gap-4 sm:gap-6 overflow-y-auto custom-scrollbar", children: [_jsxs("div", { className: "flex flex-col gap-4 p-3 sm:px-6 sm:pt-2", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode }), groupTitle && (_jsx("h2", { className: "text-center text-xl font-bold uppercase text-coral-500", children: groupTitle })), audioUrl && _jsx(CambridgeYleAudioPlayer, { audioSrc: audioUrl, compact: true }), groupImageUrl && (_jsx("div", { className: "flex items-center justify-center", children: _jsx(ResolvedImage, { src: groupImageUrl, alt: groupTitle || 'Group image', className: "max-h-[300px] rounded-lg object-contain shadow-md" }) })), groupContent && (_jsx("div", { className: "article-content rounded-lg bg-amber-50 p-4 text-sm leading-relaxed text-gray-700 max-h-[500px] overflow-y-auto pr-2 custom-scrollbar", dangerouslySetInnerHTML: { __html: groupContent } }))] }), questions.length > 0 && (_jsx("div", { className: "px-3 sm:px-6", children: _jsx("hr", { className: "border-t border-slate-200/60 my-1" }) })), _jsx("div", { className: "grid grid-cols-1 gap-4 sm:gap-5 p-3 sm:px-6 sm:pb-6", children: questions.map((q) => (_jsxs("div", { id: `question-${q.id}`, className: "rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition-all hover:border-indigo-200 hover:shadow-md", children: [_jsx("div", { className: "mb-2 flex items-center gap-2", children: _jsx("span", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 text-xs font-bold text-white shadow-sm", children: q.questionNumber }) }), _jsx(StructuredFormQuestion, { question: q, initialAnswers: answers[q.id] || emptyObj, onBlankChange: blankChangeCallbacks[q.id], isReviewMode: isReviewMode })] }, q.id))) })] }));
+    const rubric = String(instruction || '').trim();
+    const hasGroupChrome = Boolean(groupTitle || audioUrl || groupImageUrl || groupContent);
+    return (
+    // No h-full/overflow-y-auto: homework host embeds this in a card without a
+    // fixed-height parent; clipping made stems look blank. Exam shell scrolls page.
+    _jsxs("div", { className: cn('flex flex-col', compactLayout ? 'gap-3' : 'gap-4 sm:gap-6'), children: [!compactLayout && (_jsxs("div", { className: "flex flex-col gap-4 p-3 sm:px-6 sm:pt-2", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode }), groupTitle && (_jsx("h2", { className: "text-center text-xl font-bold uppercase text-coral-500", children: groupTitle })), audioUrl && _jsx(CambridgeYleAudioPlayer, { audioSrc: audioUrl, compact: true }), groupImageUrl && (_jsx("div", { className: "flex items-center justify-center", children: _jsx(ResolvedImage, { src: groupImageUrl, alt: groupTitle || 'Group image', className: "max-h-[300px] rounded-lg object-contain shadow-md" }) })), groupContent && (_jsx("div", { className: "article-content rounded-lg bg-amber-50 p-4 text-sm leading-relaxed text-gray-700 max-h-[500px] overflow-y-auto pr-2 custom-scrollbar", dangerouslySetInnerHTML: { __html: groupContent } }))] })), compactLayout && hasGroupChrome && (_jsxs("div", { className: "flex flex-col gap-3 px-1 sm:px-2", children: [groupTitle && (_jsx("h2", { className: "text-center text-lg font-bold uppercase text-coral-500", children: groupTitle })), audioUrl && _jsx(CambridgeYleAudioPlayer, { audioSrc: audioUrl, compact: true }), groupImageUrl && (_jsx("div", { className: "flex items-center justify-center", children: _jsx(ResolvedImage, { src: groupImageUrl, alt: groupTitle || 'Group image', className: "max-h-[300px] rounded-lg object-contain shadow-md" }) })), groupContent && (_jsx("div", { className: "article-content rounded-lg bg-amber-50 p-3 text-sm leading-relaxed text-gray-700 max-h-[500px] overflow-y-auto pr-2 custom-scrollbar", dangerouslySetInnerHTML: { __html: groupContent } }))] })), !compactLayout && questions.length > 0 && (_jsx("div", { className: "px-3 sm:px-6", children: _jsx("hr", { className: "border-t border-slate-200/60 my-1" }) })), _jsx("div", { className: cn('grid grid-cols-1 gap-4 sm:gap-5', compactLayout ? 'p-0' : 'p-3 sm:px-6 sm:pb-6'), children: questions.map((q) => (_jsxs("div", { id: `question-${q.id}`, className: cn('rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition-all hover:border-indigo-200 hover:shadow-md', compactLayout && 'border-0 p-0 shadow-none hover:border-0 hover:shadow-none'), children: [_jsxs("div", { className: cn('mb-2 flex gap-2.5', 
+                            // Single-line rubric: center with badge. Multi-line: align to top of badge.
+                            compactLayout && rubric ? 'items-center' : 'items-start'), children: [_jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 text-xs font-bold leading-none text-white shadow-sm", children: q.questionNumber }), compactLayout && rubric ? (_jsx("p", { className: "min-w-0 flex-1 text-sm font-semibold leading-7 text-slate-800", children: rubric })) : null] }), _jsx(StructuredFormQuestion, { question: q, initialAnswers: answers[q.id] || emptyObj, onBlankChange: blankChangeCallbacks[q.id], isReviewMode: isReviewMode })] }, q.id))) })] }));
 }

package/dist/components/exams/take/index.d.ts

@@ -2,7 +2,13 @@ export { ExamTakingPageContainer } from './ExamTakingPageContainer';
 export type { ExamTakingPageContainerProps } from './ExamTakingPageContainer';
 export { GenericQuestionRenderer } from './GenericQuestionRenderer';
 export type { GenericQuestionRendererProps } from './GenericQuestionRenderer';
+/** Per-type dispatcher used by ExamTakingPageContainer and host lite flows (BTVN). */
+export { QuestionRenderer } from './components/QuestionRenderer';
 export type { ExamTakingPart } from './exam-taking.utils';
+export type { QuestionPart, TemplatePart, TemplateSection, } from './utils/question-transformers';
+export { groupQuestionsByPart } from './utils/question-transformers';
+/** Normalize UI answer map → API answer payloads (option index wrap, group composites). */
+export { transformAnswersForSubmission } from './utils/answer-transformers';
 export type { ExamTakingAnswerValue, ExamTakingAttempt, ExamTakingQuestion, ExamTakingQuestionsResult, ExamTakingSdkApi, ExamTakingTemplatePart, SaveExamTakingAnswersInput } from '../../../api/exam-taking';
 export { useExamCountdown } from './hooks/useExamCountdown';
 export type { UseExamCountdownOptions, UseExamCountdownResult } from './hooks/useExamCountdown';

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

@@ -1,5 +1,10 @@
 export { ExamTakingPageContainer } from './ExamTakingPageContainer';
 export { GenericQuestionRenderer } from './GenericQuestionRenderer';
+/** Per-type dispatcher used by ExamTakingPageContainer and host lite flows (BTVN). */
+export { QuestionRenderer } from './components/QuestionRenderer';
+export { groupQuestionsByPart } from './utils/question-transformers';
+/** Normalize UI answer map → API answer payloads (option index wrap, group composites). */
+export { transformAnswersForSubmission } from './utils/answer-transformers';
 export { useExamCountdown } from './hooks/useExamCountdown';
 export { useAnswerAutosave } from './hooks/useAnswerAutosave';
 export { useProctoringSnapshot } from './hooks/useProctoringSnapshot';

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

@@ -1242,6 +1242,20 @@ function normalizeWfsfWordBank(raw) {
 export function transformWordFillStructuredForm(questions) {
     const firstQuestion = questions[0];
     const groupPayload = firstQuestion?.questionGroup?.payload;
+    const firstContent = firstQuestion?.content;
+    const firstMetaRaw = firstQuestion?.meta;
+    const firstMeta = firstMetaRaw &&
+        typeof firstMetaRaw === 'object' &&
+        !Array.isArray(firstMetaRaw)
+        ? firstMetaRaw
+        : undefined;
+    // Bank: meta.instruction; school: content.instruction; exam group: payload.instructions.
+    const topLevelInstruction = typeof firstQuestion?.instruction === 'string'
+        ? String(firstQuestion.instruction).trim()
+        : '';
+    const metaInstruction = String(firstMeta?.instruction || '').trim();
+    const contentInstruction = String(firstContent?.instruction || firstContent?.instructions || '').trim();
+    const groupInstruction = String(groupPayload?.instructions || groupPayload?.instruction || '').trim();
     const transformed = questions.map((q) => {
         const content = q.content;
         const correctAnswer = q.correct_answer || {};
@@ -1261,11 +1275,16 @@ export function transformWordFillStructuredForm(questions) {
         const hasWords = Boolean(wordBank?.some((e) => e != null && 'word' in e && e.word));
         const viewMode = content?.viewMode ||
             (hasOptions ? 'WITH_OPTIONS' : hasWords ? 'WITH_WORD_BANK' : undefined);
+        // Empty string imageUrl breaks ResolvedImage in some hosts — treat as absent.
+        const imageUrlRaw = content?.imageUrl;
+        const imageUrl = typeof imageUrlRaw === 'string' && imageUrlRaw.trim().length > 0
+            ? imageUrlRaw.trim()
+            : undefined;
         return {
             id: q.id,
             questionNumber: q.question_number,
             title: content?.title || '',
-            imageUrl: content?.imageUrl,
+            imageUrl,
             content: resolvedContent,
             answers: correctAnswer?.answers || {},
             caseSensitive: correctAnswer?.caseSensitive ?? content?.caseSensitive ?? false,
@@ -1276,7 +1295,11 @@ export function transformWordFillStructuredForm(questions) {
     });
     return {
         questions: transformed,
-        instruction: groupPayload?.instructions || 'COMPLETE THE FORM BELOW',
+        instruction: groupInstruction ||
+            contentInstruction ||
+            topLevelInstruction ||
+            metaInstruction ||
+            'COMPLETE THE FORM BELOW',
         groupTitle: groupPayload?.title,
         groupContent: groupPayload?.content,
         groupImageUrl: groupPayload?.imageUrl,

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

@@ -32,7 +32,6 @@ export interface ImageLabelData {
     /** Nhãn / từ hiển thị dưới ảnh */
     label: string;
 }
-export declare function hasImageLabels(items?: ImageLabelData[] | null): boolean;
 /**
  * Shared context fields for a group of ANSWER_THE_QUESTION,
  * CHOOSE_THE_CORRECT_ANSWER, or FILL_IN_BLANK questions.

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

@@ -9,6 +9,4 @@
  *   - IMAGE_LABEL     → FILL_IN_BLANK word bank (image + label items)
  *   - (future)        → MATCH_BY_WRITING_ANSWER, LISTENING_*, etc.
  */
-export function hasImageLabels(items) {
-    return Array.isArray(items) && items.some((item) => Boolean(item?.imageUrl?.trim() || item?.label?.trim()));
-}
+export {};

package/dist/components/questions/_shared/types/question-group.utils.d.ts

@@ -0,0 +1,2 @@
+import type { ImageLabelData } from './question-group.type';
+export declare function hasImageLabels(items?: ImageLabelData[] | null): boolean;

package/dist/components/questions/_shared/types/question-group.utils.js

@@ -0,0 +1,3 @@
+export function hasImageLabels(items) {
+    return Array.isArray(items) && items.some((item) => Boolean(item?.imageUrl?.trim() || item?.label?.trim()));
+}

package/dist/components/questions/groups/ImageLabelWordBank.d.ts

@@ -1,4 +1,4 @@
-import { type ImageLabelData } from '../_shared/types/question-group.type';
+import type { ImageLabelData } from '../_shared/types/question-group.type';
 export interface ImageLabelWordBankProps {
     items?: ImageLabelData[];
     title?: string;