@tinyweb_dev/oe-exam-sdk 1.0.1 → 1.0.2

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, QuestionBankFiltersInput, QuestionBankFiltersResult, QuestionSearchItem, SaveExamInput, SaveQuestionInput, SaveQuestionResult, SearchQuestionBankInput, SearchQuestionBankResult, UpdatePartAudioInput, } from './exam-questions.types';
+export type { ExamQuestionsSdkApi, ExamWithTemplate, ExistingQuestionBank, FetchApiOptions, QuestionSearchItem, SaveExamInput, SaveQuestionInput, SaveQuestionResult, SearchQuestionBankInput, SearchQuestionBankResult, UpdatePartAudioInput, } from './exam-questions.types';

package/dist/api/exam-questions.js

@@ -41,40 +41,17 @@ export function createExamQuestionsApi(options = {}) {
         },
         saveExam: async () => undefined,
         updatePartAudio: (input) => updatePartAudio(request, input),
-        searchQuestions: async ({ questionType, keyword, bookId, unitId, lessonId, lessonIds, page, size, }) => {
+        searchQuestions: async ({ questionType, keyword, 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;
@@ -116,15 +93,6 @@ 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) {
@@ -159,12 +127,6 @@ 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,8 +7,6 @@ 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;
@@ -71,34 +69,9 @@ 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;
@@ -113,7 +86,6 @@ 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,7 +1,6 @@
 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 { QuestionBankFiltersInput, QuestionBankFiltersResult, SaveQuestionInput, SearchQuestionBankInput, SearchQuestionBankResult } from '../../api/exam-questions.types';
+import type { SaveQuestionInput, SearchQuestionBankInput, SearchQuestionBankResult } from '../../api/exam-questions.types';
 export interface ExamCreatorProps {
     template: ExamTemplate;
     examId?: string;
@@ -18,11 +17,6 @@ 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,11 +1,10 @@
 '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, Library, Loader2, Save } from 'lucide-react';
+import { CheckCircle, ChevronLeft, ChevronRight, 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';
@@ -51,7 +50,6 @@ 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;
@@ -200,64 +198,30 @@ export function ExamCreator(props) {
             setIsSavingQuestion(false);
         }
     };
-    const applyBankItemToIndex = useCallback((item, targetIndex) => {
-        const questionType = 'questionType' in item ? item.questionType : item.type;
-        const correctAnswer = 'correctAnswer' in item ? item.correctAnswer : item.answer;
+    const handleExistingQuestionSelect = (question) => {
         const transformed = transformApiQuestionToFrontend({
-            question_type: questionType,
-            content: item.content,
-            correct_answer: correctAnswer,
-            points: item.points,
-            difficult_level: item.difficulty,
-            question_skill_type: item.skill,
-            explanation: item.explanation,
+            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,
         });
-        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;
+        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;
         if (code || title)
-            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);
+            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);
         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);
@@ -270,7 +234,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: [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] }));
+    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 })] }));
 }
 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,6 +1,5 @@
 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;
@@ -10,9 +9,5 @@ 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, questionBankDefaultFilters, questionBankLessonSuggestions, }) {
+function ExamQuestionsContent({ api, examId, listPath = '/manage/exams', onNavigate, texts }) {
     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, getQuestionFilters: api.getQuestionFilters, questionBankDefaultFilters: questionBankDefaultFilters, questionBankLessonSuggestions: questionBankLessonSuggestions, 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, 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, QuestionBankFiltersInput, QuestionBankFiltersResult, QuestionSearchItem, SaveExamInput, SaveQuestionInput, SaveQuestionResult, SearchQuestionBankInput, SearchQuestionBankResult, UpdatePartAudioInput, } from '../../api/exam-questions';
+export type { ExamQuestionsSdkApi, ExamWithTemplate, ExistingQuestionBank, FetchApiOptions, 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, QuestionBankFiltersInput, QuestionBankFiltersResult, QuestionSearchItem, SaveExamInput, SaveQuestionInput, SaveQuestionResult, SearchQuestionBankInput, SearchQuestionBankResult, UpdatePartAudioInput, } from './api';
+export type { ExamQuestionsSdkApi, ExamWithTemplate, ExistingQuestionBank, FetchApiOptions, 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,11 +20,6 @@ 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, compactLayout, }: QuestionRendererProps): import("react").JSX.Element;
+export declare function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode, onExit, onPartComplete, onPartBack, speakingTheme, initialQuestionIndex, skipTeacherVideo, onTeacherIntroPlayed, currentQuestionIndex, }: 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, compactLayout = false, }) {
+export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode = false, onExit, onPartComplete, onPartBack, speakingTheme, initialQuestionIndex, skipTeacherVideo, onTeacherIntroPlayed, currentQuestionIndex, }) {
     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, compactLayout: compactLayout }));
+            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 }));
         }
         case 'WRITE_SENTENCES': {
             const data = transformWriteSentences(questions);

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

@@ -13,12 +13,6 @@ 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, compactLayout, }: MoversWordFillStructuredFormRendererProps): React.JSX.Element;
+export declare function MoversWordFillStructuredFormRenderer({ partNumber, partName, questionCount, instruction, audioUrl, groupTitle, groupContent, groupImageUrl, questions, answers, onAnswerChange, isReviewMode, }: MoversWordFillStructuredFormRendererProps): React.JSX.Element;
 export {};

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

@@ -6,6 +6,7 @@ import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-y
 import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
 import CambridgeYleAudioPlayer from '../../../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer';
 import { cn } from '../../../../../shared/lib/utils';
+import { expandWfsfCorrectAlts, formatWfsfCorrectLabel, isWfsfBlankCorrect, } from '../../../../../shared/lib/utils/wfsf-blank-match';
 /**
  * Replace `{key}` placeholders with inline blank controls.
  * WITH_OPTIONS blanks become <select>; free-type stay <input>.
@@ -51,14 +52,6 @@ function buildHtmlWithInputPlaceholders(html, wordBank) {
     `;
     });
 }
-function normalizeStructuredAnswer(value, caseSensitive) {
-    const normalized = value
-        .trim()
-        .replace(/[\p{P}]/gu, '')
-        .replace(/\s+/g, ' ')
-        .trim();
-    return caseSensitive ? normalized : normalized.toLowerCase();
-}
 // Stable empty object to avoid new {} on every render (breaks React.memo)
 const emptyObj = {};
 /**
@@ -73,23 +66,21 @@ const StructuredFormQuestion = memo(function StructuredFormQuestion({ question,
     const containerRef = useRef(null);
     const onBlankChangeRef = useRef(onBlankChange);
     onBlankChangeRef.current = onBlankChange;
-    // 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);
+    const mountedRef = useRef(false);
     // 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 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).
+    // Set innerHTML ONCE via ref and attach event listeners.
+    // This completely bypasses React's reconciliation so inputs are never
+    // destroyed by re-renders.
     useEffect(() => {
         const container = containerRef.current;
         if (!container)
             return;
-        const needsApply = appliedHtmlRef.current !== processedHtml || container.childNodes.length === 0;
-        if (needsApply) {
+        // Only set innerHTML on first mount or if HTML content actually changed
+        if (!mountedRef.current) {
             container.innerHTML = processedHtml;
-            appliedHtmlRef.current = processedHtml;
+            mountedRef.current = true;
         }
         const inputs = container.querySelectorAll('input.structured-blank-input, select.structured-blank-input');
         const handlers = [];
@@ -98,33 +89,33 @@ const StructuredFormQuestion = memo(function StructuredFormQuestion({ question,
             const wrapper = container.querySelector(`[data-blank-wrapper="${key}"]`);
             const hint = container.querySelector(`[data-blank-hint="${key}"]`);
             const userAnswer = initialAnswersRef.current[key] || '';
-            const correctAnswer = question.answers[key] || '';
+            const correctAnswer = question.answers[key];
+            const correctLabel = formatWfsfCorrectLabel(correctAnswer);
             const hasUserAnswer = userAnswer.trim().length > 0;
             const isCorrect = hasUserAnswer
-                && normalizeStructuredAnswer(userAnswer, question.caseSensitive)
-                    === normalizeStructuredAnswer(correctAnswer, question.caseSensitive);
+                && isWfsfBlankCorrect(userAnswer, correctAnswer, question.caseSensitive);
             // Restore saved answer value on mount
-            const shouldReplaceInputWithReviewText = isReviewMode && !isCorrect && correctAnswer.trim().length > 0;
+            const shouldReplaceInputWithReviewText = isReviewMode && !isCorrect && correctLabel.length > 0;
             input.value = shouldReplaceInputWithReviewText
-                ? `${hasUserAnswer ? userAnswer : '(trống)'} → ${correctAnswer}`
+                ? `${hasUserAnswer ? userAnswer : '(trống)'} → ${correctLabel}`
                 : userAnswer;
             input.disabled = isReviewMode;
             const isSelect = input.tagName === 'SELECT';
             // Set classes from blankStyle (letter = square box)
             const blankStyle = question.blankStyle || 'word';
             const isLetter = blankStyle === 'letter';
-            const isPhrase = blankStyle === 'phrase';
+            const isPhrase = blankStyle === 'phrase' || blankStyle === 'translate';
             if (isLetter && !isSelect && 'maxLength' in input) {
-                input.maxLength = Math.max(1, (correctAnswer || ' ').trim().length || 1);
+                const maxAltLen = expandWfsfCorrectAlts(correctAnswer).reduce((max, alt) => Math.max(max, alt.trim().length), 0);
+                input.maxLength = Math.max(1, maxAltLen || 1);
             }
             input.className = cn('structured-blank-input inline-block bg-slate-50/40 text-sm font-semibold outline-none transition-all align-baseline hover:bg-slate-100/60 focus:bg-teal-50/60 focus:ring-0', isSelect
                 ? 'min-w-[5.5rem] max-w-[10rem] rounded border px-2 py-1 text-center'
                 : isLetter
                     ? 'h-7 w-7 rounded border-2 px-0 text-center uppercase'
                     : isPhrase
-                        ? 'min-w-[9rem] max-w-[18rem] w-[14ch] rounded-t border-b-2 px-2 py-0.5 text-center'
-                        : // blankStyle=word — short single-token field
-                            'min-w-[4.5rem] max-w-[7.5rem] w-[8ch] rounded-t border-b-2 px-1 py-0.5 text-center', isReviewMode
+                        ? 'min-w-[16rem] max-w-[36rem] w-[28ch] rounded-t border-b-2 px-2 py-0.5 text-center'
+                        : 'min-w-[4.5rem] max-w-[8rem] w-[10ch] rounded-t border-b-2 px-1 py-0.5 text-center', isReviewMode
                 ? isCorrect
                     ? 'border-emerald-500 bg-emerald-50 text-emerald-800 font-bold'
                     : hasUserAnswer
@@ -132,7 +123,7 @@ const StructuredFormQuestion = memo(function StructuredFormQuestion({ question,
                         : 'border-amber-500 bg-amber-50 text-amber-800 font-bold'
                 : 'border-slate-400 text-slate-800 focus:border-teal-600');
             if (!isSelect && !isLetter && 'size' in input) {
-                input.size = isPhrase ? 18 : 10;
+                input.size = isPhrase ? 28 : 10;
             }
             // letter inline box — host FE may not scan Tailwind h-7/w-7
             if (isLetter) {
@@ -176,9 +167,9 @@ const StructuredFormQuestion = memo(function StructuredFormQuestion({ question,
     }, [processedHtml, isReviewMode]);
     return (_jsxs("div", { className: "space-y-3", children: [question.title && (_jsx("h3", { className: "text-base font-semibold text-gray-800", children: question.title })), question.imageUrl && (_jsx("div", { className: "flex justify-center", children: _jsx("div", { className: "overflow-hidden rounded-lg border border-gray-200", children: _jsx(ResolvedImage, { src: question.imageUrl, alt: question.title || 'Question image', className: "max-h-48 w-auto object-contain" }) }) })), _jsx("div", { ref: containerRef, className: cn('structured-form-content rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4 text-sm leading-relaxed text-gray-800', '[&_.structured-blank-wrapper]:inline-flex [&_.structured-blank-wrapper]:align-baseline [&_.structured-blank-wrapper]:items-baseline [&_.structured-blank-hint]:max-w-[180px]', 
                 // 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, ": ", val] }, key))) })] })] }))] }));
+                '[&_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, compactLayout = false, }) {
+export function MoversWordFillStructuredFormRenderer({ partNumber, partName, questionCount, instruction, audioUrl, groupTitle, groupContent, groupImageUrl, questions, answers, onAnswerChange, isReviewMode = false, }) {
     const answersRef = useRef(answers);
     answersRef.current = answers;
     const onAnswerChangeRef = useRef(onAnswerChange);
@@ -196,12 +187,5 @@ export function MoversWordFillStructuredFormRenderer({ partNumber, partName, que
         });
         return map;
     }, [questions, handleBlankChange]);
-    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))) })] }));
+    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))) })] }));
 }

package/dist/components/exams/take/exam-taking.utils.d.ts

@@ -11,7 +11,7 @@ export interface TemplateSection {
     viewMode?: string;
     wordBankConfig?: string[];
 }
-export type WfsfBlankStyle = 'letter' | 'word' | 'phrase';
+export type WfsfBlankStyle = 'letter' | 'word' | 'phrase' | 'translate';
 export type WfsfWordBankEntry = {
     options: string[];
 } | {
@@ -21,7 +21,7 @@ export type WfsfWordBankEntry = {
 export interface WordFillStructuredFormQuestion {
     id: string;
     content: string;
-    answers: Record<string, string>;
+    answers: Record<string, string | string[]>;
     title?: string;
     instruction?: string;
     caseSensitive?: boolean;

package/dist/components/exams/take/exam-taking.utils.js

@@ -118,6 +118,8 @@ export function transformWordFillStructuredForm(questions) {
             return 'letter';
         if (v === 'phrase' || v === 'sentence')
             return 'phrase';
+        if (v === 'translate')
+            return 'translate';
         return 'word';
     };
     const normalizeWordBank = (raw) => {

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

@@ -2,13 +2,7 @@ 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';