@tinyweb_dev/oe-exam-sdk 0.2.5 → 0.2.7

package/dist/components/questions/types/matching-with-lines-group/map-matching-with-lines-group-data.js

@@ -0,0 +1,104 @@
+import { MATCHING_WITH_LINES_GROUP_DEFAULT_INSTRUCTION } from '../../_shared/types/matching-with-lines-group.type';
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function asRecord(value) {
+    return isRecord(value) ? value : {};
+}
+function asString(value, fallback = '') {
+    return typeof value === 'string' ? value : fallback;
+}
+export function nextRightId(existing) {
+    let n = existing.length + 1;
+    const used = new Set(existing);
+    while (used.has(`r${n}`))
+        n += 1;
+    return `r${n}`;
+}
+export function createEmptyMatchingPair(questionNumber, rightId) {
+    return {
+        rightItem: { id: rightId, text: '' },
+        item: {
+            imageUrl: '',
+            correctAnswer: rightId,
+            isExample: false,
+            points: 1,
+            questionNumber,
+        },
+    };
+}
+export function mapMatchingWithLinesGroupItem(item, index, fallbackAnswer) {
+    const record = asRecord(item);
+    const content = asRecord(record.content);
+    const correctAnswer = asRecord(record.correctAnswer);
+    const isExample = record.isExample === true;
+    const answer = asString(correctAnswer.answer) ||
+        (typeof fallbackAnswer === 'string' ? fallbackAnswer : '');
+    return {
+        imageUrl: asString(content.imageUrl) || asString(record.imageUrl),
+        correctAnswer: answer,
+        isExample,
+        points: isExample ? 0 : (typeof record.points === 'number' ? record.points : 1),
+        questionNumber: typeof record.questionNumber === 'number' ? record.questionNumber : index + 1,
+    };
+}
+function mapRightItems(raw) {
+    if (!Array.isArray(raw))
+        return [];
+    return raw.map((item, index) => {
+        const record = asRecord(item);
+        return {
+            id: asString(record.id, `r${index + 1}`),
+            text: asString(record.text),
+        };
+    });
+}
+export function mapQuestionToMatchingWithLinesGroupData(question) {
+    const source = asRecord(question);
+    const content = asRecord(source.content);
+    const answer = asRecord(source.answer);
+    const correctAnswer = asRecord(source.correctAnswer ?? source.correct_answer ?? answer.correctAnswer);
+    const fallbackAnswers = Array.isArray(correctAnswer.answer)
+        ? correctAnswer.answer
+        : Array.isArray(answer.answer)
+            ? answer.answer
+            : [];
+    const explanation = asString(source.explanation) || asString(answer.explanation);
+    const meta = asRecord(content.meta ?? answer.meta);
+    if (Array.isArray(content.items)) {
+        const items = content.items.map((item, index) => mapMatchingWithLinesGroupItem(item, index, fallbackAnswers[index]));
+        return {
+            title: asString(meta.title) || asString(answer.title),
+            instruction: asString(meta.instruction) ||
+                asString(answer.instruction) ||
+                MATCHING_WITH_LINES_GROUP_DEFAULT_INSTRUCTION,
+            rightItems: mapRightItems(content.rightItems),
+            items,
+            explanation,
+            points: items.reduce((total, item) => (item.isExample ? total : total + (item.points || 0)), 0),
+        };
+    }
+    if (Array.isArray(answer.items)) {
+        const items = answer.items.map((item, index) => mapMatchingWithLinesGroupItem(item, index, fallbackAnswers[index]));
+        return {
+            title: asString(answer.title),
+            instruction: asString(answer.instruction) || MATCHING_WITH_LINES_GROUP_DEFAULT_INSTRUCTION,
+            rightItems: mapRightItems(answer.rightItems),
+            items,
+            explanation,
+            points: typeof answer.points === 'number'
+                ? answer.points
+                : items.reduce((total, item) => (item.isExample ? total : total + (item.points || 0)), 0),
+        };
+    }
+    const first = createEmptyMatchingPair(1, 'r1');
+    const second = createEmptyMatchingPair(2, 'r2');
+    return {
+        title: '',
+        instruction: MATCHING_WITH_LINES_GROUP_DEFAULT_INSTRUCTION,
+        rightItems: [first.rightItem, second.rightItem],
+        items: [first.item, second.item],
+        explanation,
+        points: 2,
+    };
+}

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

@@ -0,0 +1,3 @@
+import type { QuestionTypeRegistration } from '../../creator/question-type-registry';
+export { createEmptyMatchingPair, mapMatchingWithLinesGroupItem, mapQuestionToMatchingWithLinesGroupData, nextRightId, } from './map-matching-with-lines-group-data';
+export declare const matchingWithLinesGroupRegistration: QuestionTypeRegistration;

package/dist/components/questions/types/matching-with-lines-group/register.js

@@ -0,0 +1,37 @@
+import { MatchingWithLinesGroupCreator } from './MatchingWithLinesGroupCreator';
+import { mapQuestionToMatchingWithLinesGroupData } from './map-matching-with-lines-group-data';
+export { createEmptyMatchingPair, mapMatchingWithLinesGroupItem, mapQuestionToMatchingWithLinesGroupData, nextRightId, } from './map-matching-with-lines-group-data';
+export const matchingWithLinesGroupRegistration = {
+    component: MatchingWithLinesGroupCreator,
+    transformInitialData: (initialData) => mapQuestionToMatchingWithLinesGroupData(initialData),
+    getExtraProps: (ctx) => ({
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+    }),
+    wrapOnSave: (data, ctx) => {
+        const payload = data;
+        return {
+            type: ctx.questionType,
+            content: ctx.state.content,
+            points: payload.points ?? ctx.state.points ?? 1,
+            level: ctx.state.level,
+            difficulty: ctx.state.difficulty,
+            skill: ctx.state.skill,
+            answer: payload,
+            explanation: payload.explanation || '',
+        };
+    },
+    wrapOnChange: (data, ctx) => {
+        const payload = data;
+        return {
+            type: ctx.questionType,
+            content: ctx.state.content,
+            points: payload.points ?? ctx.state.points ?? 1,
+            level: ctx.state.level,
+            difficulty: ctx.state.difficulty,
+            skill: ctx.state.skill,
+            answer: payload,
+            explanation: payload.explanation || '',
+        };
+    },
+};

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

@@ -0,0 +1,2 @@
+import type { TransformHandler } from '../../../../shared/lib/utils/question-transform-types';
+export declare const transformMatchingWithLinesGroup: TransformHandler;

package/dist/components/questions/types/matching-with-lines-group/transform.js

@@ -0,0 +1,44 @@
+import { MATCHING_WITH_LINES_GROUP_DEFAULT_INSTRUCTION } from '../../_shared/types/matching-with-lines-group.type';
+function sumGradablePoints(items) {
+    return items.reduce((total, item) => {
+        if (item.isExample)
+            return total;
+        const points = typeof item.points === 'number' ? item.points : 1;
+        return total + points;
+    }, 0);
+}
+export const transformMatchingWithLinesGroup = (question) => {
+    const answerData = question.answer;
+    const items = Array.isArray(answerData?.items) ? answerData.items : [];
+    const rightItems = Array.isArray(answerData?.rightItems) ? answerData.rightItems : [];
+    if (items.length === 0) {
+        return { apiContent: { rightItems: [], items: [] }, apiCorrectAnswer: { answer: [] } };
+    }
+    const apiItems = items.map((item, index) => ({
+        ...(item.isExample ? { isExample: true } : {}),
+        content: {
+            imageUrl: item.imageUrl || '',
+        },
+        correctAnswer: { answer: item.correctAnswer || '' },
+        points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+        questionNumber: item.questionNumber || index + 1,
+    }));
+    const title = typeof answerData?.title === 'string' ? answerData.title.trim() : '';
+    return {
+        apiContent: {
+            meta: {
+                instruction: answerData?.instruction || MATCHING_WITH_LINES_GROUP_DEFAULT_INSTRUCTION,
+                ...(title ? { title } : {}),
+            },
+            rightItems: rightItems.map((item) => ({
+                id: item.id || '',
+                text: item.text || '',
+            })),
+            items: apiItems,
+        },
+        apiCorrectAnswer: {
+            answer: apiItems.map((item) => item.correctAnswer.answer),
+        },
+        totalPoints: sumGradablePoints(items),
+    };
+};

package/dist/components/questions/viewer/FillInBlankGroupViewer.d.ts

@@ -0,0 +1,10 @@
+import type { Question } from '../../../shared/types/entities/question.types';
+import type { FillInBlankGroupStudentItemAnswer } from '../_shared/types/fill-in-blank-group.type';
+type FillInBlankGroupViewerProps = {
+    question: Question;
+    isReviewMode?: boolean;
+    userAnswer?: FillInBlankGroupStudentItemAnswer[];
+    onSubmitAnswer?: (answer: FillInBlankGroupStudentItemAnswer[]) => void;
+};
+export declare function FillInBlankGroupViewer({ question, isReviewMode, userAnswer, onSubmitAnswer, }: FillInBlankGroupViewerProps): import("react").JSX.Element;
+export {};

package/dist/components/questions/viewer/FillInBlankGroupViewer.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FillInBlankGroupClient } from '../types/fill-in-blank-group/FillInBlankGroupClient';
+import { mapQuestionToFillInBlankGroupData } from '../types/fill-in-blank-group/map-fill-in-blank-group-data';
+export function FillInBlankGroupViewer({ question, isReviewMode = false, userAnswer, onSubmitAnswer, }) {
+    const questionData = mapQuestionToFillInBlankGroupData(question);
+    const studentAnswers = Array.isArray(userAnswer) ? userAnswer : undefined;
+    const reviewAnswers = isReviewMode && !studentAnswers
+        ? questionData.items.map((item) => ({
+            answers: item.answers.map((alts) => alts[0] || ''),
+        }))
+        : studentAnswers;
+    return (_jsx(FillInBlankGroupClient, { questionData: questionData, isReviewMode: isReviewMode, userAnswers: reviewAnswers, onAnswerChange: isReviewMode ? undefined : onSubmitAnswer }));
+}

package/dist/components/questions/viewer/MatchingWithLinesGroupViewer.d.ts

@@ -0,0 +1,7 @@
+import type { Question } from '../../../shared/types/entities/question.types';
+export declare function MatchingWithLinesGroupViewer({ question, isReviewMode, userAnswer, onSubmitAnswer, }: {
+    question: Question;
+    isReviewMode?: boolean;
+    userAnswer?: unknown;
+    onSubmitAnswer?: (answer: string[]) => void;
+}): import("react").JSX.Element;

package/dist/components/questions/viewer/MatchingWithLinesGroupViewer.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { MatchingWithLinesGroupClient } from '../types/matching-with-lines-group/MatchingWithLinesGroupClient';
+import { mapQuestionToMatchingWithLinesGroupData } from '../types/matching-with-lines-group/map-matching-with-lines-group-data';
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function emptyAnswers(length) {
+    return Array.from({ length }, () => '');
+}
+function parseMatchingAnswers(value, length) {
+    const source = Array.isArray(value)
+        ? value
+        : isRecord(value) && Array.isArray(value.answer)
+            ? value.answer
+            : null;
+    if (!source)
+        return undefined;
+    return Array.from({ length }, (_, index) => typeof source[index] === 'string' ? source[index] : '');
+}
+export function MatchingWithLinesGroupViewer({ question, isReviewMode = false, userAnswer, onSubmitAnswer, }) {
+    const questionData = mapQuestionToMatchingWithLinesGroupData(question);
+    const itemCount = questionData.items.length;
+    const parsedUser = parseMatchingAnswers(userAnswer, itemCount);
+    const questionKey = `${question.id}:${question.type}:${itemCount}:${questionData.rightItems
+        .map((item) => `${item.id}:${item.text}`)
+        .join(',')}`;
+    const [cachedKey, setCachedKey] = useState(questionKey);
+    const [localAnswers, setLocalAnswers] = useState(() => parsedUser ?? emptyAnswers(itemCount));
+    if (cachedKey !== questionKey) {
+        setCachedKey(questionKey);
+        setLocalAnswers(parsedUser ?? emptyAnswers(itemCount));
+    }
+    const userAnswers = isReviewMode && !parsedUser
+        ? questionData.items.map((item) => item.correctAnswer)
+        : parsedUser ?? localAnswers;
+    const handleAnswersChange = (next) => {
+        const padded = questionData.items.map((item, index) => {
+            if (item.isExample)
+                return item.correctAnswer || '';
+            return typeof next[index] === 'string' ? next[index] : '';
+        });
+        setLocalAnswers(padded);
+        onSubmitAnswer?.(padded);
+    };
+    return (_jsx(MatchingWithLinesGroupClient, { questionData: questionData, isReviewMode: isReviewMode, userAnswers: userAnswers, onAnswersChange: isReviewMode ? undefined : handleAnswersChange }));
+}

package/dist/components/questions/viewer/QuestionViewer.js

@@ -26,6 +26,8 @@ import { WordFillStructuredFormViewer } from './WordFillStructuredFormViewer';
 import { ChooseTheCorrectAnswerGroupViewer } from './ChooseTheCorrectAnswerGroupViewer';
 import { TrueFalseGroupViewer } from './TrueFalseGroupViewer';
 import { TrueFalseCorrectGroupViewer } from './TrueFalseCorrectGroupViewer';
+import { FillInBlankGroupViewer } from './FillInBlankGroupViewer';
+import { MatchingWithLinesGroupViewer } from './MatchingWithLinesGroupViewer';
 import { CrossOutWordGroupViewer } from './CrossOutWordGroupViewer';
 import { SpontaneousQaGroupViewer } from './SpontaneousQaGroupViewer';
 import { WordOrderAndMatchGroupViewer } from './WordOrderAndMatchGroupViewer';
@@ -635,6 +637,10 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
                 return (_jsx(TrueFalseGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer }));
             case 'TRUE_FALSE_CORRECT_GROUP':
                 return (_jsx(TrueFalseCorrectGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer }));
+            case 'FILL_IN_BLANK_GROUP':
+                return (_jsx(FillInBlankGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer, onSubmitAnswer: onSubmitAnswer }));
+            case 'MATCHING_WITH_LINES_GROUP':
+                return (_jsx(MatchingWithLinesGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer, onSubmitAnswer: onSubmitAnswer }));
             case 'CROSS_OUT_WORD_GROUP':
                 return (_jsx(CrossOutWordGroupViewer, { question: question, isReviewMode: isReviewMode }));
             case 'ANSWER_THE_QUESTION_GROUP':

package/dist/components/questions/viewer/index.d.ts

@@ -4,6 +4,8 @@ export { WordFillStructuredFormViewer } from './WordFillStructuredFormViewer';
 export { ChooseTheCorrectAnswerGroupViewer } from './ChooseTheCorrectAnswerGroupViewer';
 export { TrueFalseGroupViewer } from './TrueFalseGroupViewer';
 export { TrueFalseCorrectGroupViewer } from './TrueFalseCorrectGroupViewer';
+export { FillInBlankGroupViewer } from './FillInBlankGroupViewer';
+export { MatchingWithLinesGroupViewer } from './MatchingWithLinesGroupViewer';
 export { CrossOutWordGroupViewer } from './CrossOutWordGroupViewer';
 export { SpontaneousQaGroupViewer } from './SpontaneousQaGroupViewer';
 export { WordOrderAndMatchGroupViewer } from './WordOrderAndMatchGroupViewer';

package/dist/components/questions/viewer/index.js

@@ -4,6 +4,8 @@ export { WordFillStructuredFormViewer } from './WordFillStructuredFormViewer';
 export { ChooseTheCorrectAnswerGroupViewer } from './ChooseTheCorrectAnswerGroupViewer';
 export { TrueFalseGroupViewer } from './TrueFalseGroupViewer';
 export { TrueFalseCorrectGroupViewer } from './TrueFalseCorrectGroupViewer';
+export { FillInBlankGroupViewer } from './FillInBlankGroupViewer';
+export { MatchingWithLinesGroupViewer } from './MatchingWithLinesGroupViewer';
 export { CrossOutWordGroupViewer } from './CrossOutWordGroupViewer';
 export { SpontaneousQaGroupViewer } from './SpontaneousQaGroupViewer';
 export { WordOrderAndMatchGroupViewer } from './WordOrderAndMatchGroupViewer';

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

@@ -10,9 +10,8 @@ interface ReviewListenAndWriteRendererProps {
     exampleText?: string;
     exampleHighlight?: string;
     questions: FillBlankQuestion[];
-    answers: Record<string, string>;
+    answers: Record<string, unknown>;
     isCorrectMap: Record<string, boolean | null>;
-    correctAnswerTextMap: Record<string, string>;
 }
-export declare function ReviewListenAndWriteRenderer({ partNumber, questionCount, instruction, partName, audioUrl, title, exampleText, questions, answers, isCorrectMap, correctAnswerTextMap, }: ReviewListenAndWriteRendererProps): import("react").JSX.Element;
+export declare function ReviewListenAndWriteRenderer({ partNumber, questionCount, instruction, partName, audioUrl, title, exampleText, questions, answers, isCorrectMap, }: ReviewListenAndWriteRendererProps): import("react").JSX.Element;
 export {};

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

@@ -5,7 +5,8 @@ import { ResolvedImage } from '../../../components/common/ResolvedImage';
 import CambridgeYlePartBanner from '../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
 import CambridgeYleInstructionBanner from '../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
 import CambridgeYleAudioPlayer from '../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer';
-export function ReviewListenAndWriteRenderer({ partNumber, questionCount, instruction, partName, audioUrl, title, exampleText, questions, answers, isCorrectMap, correctAnswerTextMap, }) {
+import { countBlanks, formatAcceptedAnswers, hasAnyBlankValue, isBlankCorrect, toBlankValues, } from '../../../shared/lib/utils/fill-in-blank';
+export function ReviewListenAndWriteRenderer({ partNumber, questionCount, instruction, partName, audioUrl, title, exampleText, questions, answers, isCorrectMap, }) {
     /**
      * Get answer status from API's isCorrect field
      * Returns: 'correct' | 'incorrect' | 'unanswered'
@@ -14,7 +15,7 @@ export function ReviewListenAndWriteRenderer({ partNumber, questionCount, instru
         const isCorrect = isCorrectMap[questionId];
         const userAnswer = answers[questionId];
         // No answer from student (null or undefined or empty string)
-        if (userAnswer === null || userAnswer === undefined || userAnswer === '') {
+        if (!hasAnyBlankValue(userAnswer)) {
             return 'unanswered';
         }
         // Use API's isCorrect value
@@ -25,8 +26,7 @@ export function ReviewListenAndWriteRenderer({ partNumber, questionCount, instru
         // isCorrect is null but student answered - treat as unanswered/pending
         return 'unanswered';
     };
-    const getUnderlineColor = (questionId) => {
-        const status = getAnswerStatus(questionId);
+    const getUnderlineColor = (status) => {
         switch (status) {
             case 'correct':
                 return '#22c55e'; // green-500
@@ -38,11 +38,20 @@ export function ReviewListenAndWriteRenderer({ partNumber, questionCount, instru
                 return '#9ca3af'; // gray-400
         }
     };
+    const renderBlankAnswer = (status, userValue, correctValue) => (_jsxs("span", { className: "mx-1 inline-block min-w-[120px] align-baseline", style: { borderBottom: `2px solid ${getUnderlineColor(status)}` }, children: [status === 'correct' && (_jsx("span", { className: "block w-full text-center", children: userValue })), status === 'unanswered' && (_jsx("span", { className: "block w-full text-center text-blue-600", children: correctValue })), status === 'incorrect' && (_jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx("span", { className: "text-red-500 line-through", children: userValue }), _jsx("span", { className: "text-gray-400", children: "\u00E2\u2020\u2019" }), _jsx("span", { className: "text-blue-600", children: correctValue })] }))] }));
+    const getPerBlankStatus = (overall, userValue, accepted) => {
+        if (overall === 'unanswered' || !userValue.trim())
+            return 'unanswered';
+        return isBlankCorrect(userValue, accepted) ? 'correct' : 'incorrect';
+    };
     return (_jsxs("div", { className: "flex flex-col gap-6 h-full", children: [_jsxs("div", { className: "flex flex-col gap-4 pb-0 pt-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: true }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, hasExample: !!exampleText, isReviewMode: true }), audioUrl && _jsx(CambridgeYleAudioPlayer, { audioSrc: audioUrl, compact: true })] }), _jsxs("div", { className: "flex flex-col gap-6 pb-6 pl-2 pt-2", children: [_jsx("h2", { className: "text-center text-3xl font-bold uppercase text-coral-500", children: title }), _jsx("div", { className: "flex flex-col gap-4", children: questions.map((question) => {
                             const status = getAnswerStatus(question.id);
-                            const userAnswer = answers[question.id] || '';
-                            return (_jsxs("div", { className: "flex flex-col gap-2", children: [question.imageUrl && (_jsx("div", { className: "flex items-center justify-center", children: _jsx(ResolvedImage, { src: question.imageUrl, alt: `Question ${question.questionNumber} illustration`, className: "max-h-[150px] rounded-lg object-contain shadow-md" }) })), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-sm font-bold text-white", children: question.questionNumber }), _jsx("div", { className: "flex-1 text-base leading-relaxed text-gray-800", children: _jsxs("div", { className: "flex items-center gap-2", children: [question.textBefore && (_jsx("span", { children: question.textBefore })), _jsxs("span", { className: "inline-block min-w-[120px]", style: {
-                                                                borderBottom: `2px solid ${getUnderlineColor(question.id)}`,
-                                                            }, children: [status === 'correct' && (_jsx("span", { className: "block w-full text-center", children: userAnswer })), status === 'unanswered' && (_jsx("span", { className: "block w-full text-center text-blue-600", children: correctAnswerTextMap[question.id] })), status === 'incorrect' && (_jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx("span", { className: "text-red-500 line-through", children: userAnswer }), _jsx("span", { className: "text-gray-400", children: "\u2192" }), _jsx("span", { className: "text-blue-600", children: correctAnswerTextMap[question.id] })] }))] }), question.textAfter && (_jsx("span", { children: question.textAfter })), status === 'correct' && (_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-green-500", children: _jsx(Check, { className: "h-4 w-4 text-white", strokeWidth: 3 }) })), status === 'incorrect' && (_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-red-500", children: _jsx(X, { className: "h-4 w-4 text-white", strokeWidth: 3 }) })), status === 'unanswered' && (_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-blue-500", children: _jsx(Check, { className: "h-4 w-4 text-white", strokeWidth: 3 }) }))] }) })] })] }, question.id));
+                            const userValues = toBlankValues(answers[question.id], countBlanks(question.segments));
+                            const renderBlank = (blankIndex) => {
+                                const userValue = userValues[blankIndex] || '';
+                                const accepted = question.acceptedAnswers[blankIndex];
+                                return renderBlankAnswer(getPerBlankStatus(status, userValue, accepted), userValue, formatAcceptedAnswers(accepted));
+                            };
+                            return (_jsxs("div", { className: "flex flex-col gap-2", children: [question.audioUrl && (_jsx("div", { className: "w-full max-w-md", children: _jsx(CambridgeYleAudioPlayer, { audioSrc: question.audioUrl, compact: true }) })), question.imageUrl && (_jsx("div", { className: "flex items-center justify-center", children: _jsx(ResolvedImage, { src: question.imageUrl, alt: `Question ${question.questionNumber} illustration`, className: "max-h-[150px] rounded-lg object-contain shadow-md" }) })), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-sm font-bold text-white", children: question.questionNumber }), _jsx("div", { className: "flex-1 text-base leading-relaxed text-gray-800", children: _jsxs("div", { className: "leading-loose", children: [question.segments.map((segment, segmentIndex) => segment.type === 'text' ? (_jsx("span", { children: segment.value }, `text-${segmentIndex}`)) : (_jsx("span", { children: renderBlank(segment.index) }, `blank-${segment.index}-${segmentIndex}`))), status === 'correct' && (_jsx("div", { className: "ml-2 inline-flex h-6 w-6 items-center justify-center rounded-full bg-green-500 align-middle", children: _jsx(Check, { className: "h-4 w-4 text-white", strokeWidth: 3 }) })), status === 'incorrect' && (_jsx("div", { className: "ml-2 inline-flex h-6 w-6 items-center justify-center rounded-full bg-red-500 align-middle", children: _jsx(X, { className: "h-4 w-4 text-white", strokeWidth: 3 }) })), status === 'unanswered' && (_jsx("div", { className: "ml-2 inline-flex h-6 w-6 items-center justify-center rounded-full bg-blue-500 align-middle", children: _jsx(Check, { className: "h-4 w-4 text-white", strokeWidth: 3 }) }))] }) })] })] }, question.id));
                         }) })] })] }));
 }

package/dist/components/results/renderers/review-question-body-dedicated.js

@@ -28,11 +28,11 @@ export function renderDedicatedReviewBody(ctx) {
     switch (questionType) {
         case 'FILL_IN_BLANK': {
             const data = transformFillInBlank(apiQuestions);
-            return (_jsx(ReviewListenAndWriteRenderer, { partNumber: partNo, questionCount: questionCount, partName: part.name, instruction: part.instructions || data.instruction, title: data.title, imageUrl: data.imageUrl, audioUrl: data.audioUrl, exampleText: data.exampleText, exampleHighlight: data.exampleHighlight, questions: data.questions, answers: answers, isCorrectMap: isCorrectMap, correctAnswerTextMap: correctAnswerTextMap }));
+            return (_jsx(ReviewListenAndWriteRenderer, { partNumber: partNo, questionCount: questionCount, partName: part.name, instruction: part.instructions || data.instruction, title: data.title, imageUrl: data.imageUrl, audioUrl: data.audioUrl, exampleText: data.exampleText, exampleHighlight: data.exampleHighlight, questions: data.questions, answers: answers, isCorrectMap: isCorrectMap }));
         }
         case 'WRITE_CORRECT_VERB_FORM': {
             const data = transformWriteCorrectVerbForm(apiQuestions);
-            return (_jsx(ReviewListenAndWriteRenderer, { partNumber: partNo, questionCount: questionCount, partName: part.name, instruction: part.instructions || data.instruction, title: data.title, questions: data.questions, answers: answers, isCorrectMap: isCorrectMap, correctAnswerTextMap: correctAnswerTextMap }));
+            return (_jsx(ReviewListenAndWriteRenderer, { partNumber: partNo, questionCount: questionCount, partName: part.name, instruction: part.instructions || data.instruction, title: data.title, questions: data.questions, answers: answers, isCorrectMap: isCorrectMap }));
         }
         case 'CHOOSE_THE_CORRECT_ANSWER': {
             const data = transformChooseCorrectAnswer(apiQuestions);

package/dist/components/results/renderers/review-question-body-movers.js

@@ -4,8 +4,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Movers fallback review cases (isReviewMode=true).
  * Source: oe-exam-fe ReviewQuestionRenderer.tsx
  */
-import { MoversAnswerTheQuestionRenderer, MoversFillWordHintRenderer, MoversGridFillRenderer, MoversLabelThePictureRenderer, MoversMatchByWritingAnswerRenderer, MoversMatchWordToPictureRenderer, MoversPictureChooseRenderer, MoversPictureFillBlankChooseRenderer, MoversReadingPassageRenderer, MoversTrueFalseRenderer, MoversTrueFalseCorrectGroupRenderer, MoversCrossOutWordGroupRenderer, MoversWordFillParagraphRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderingRenderer, MoversWriteSentencesRenderer, MoversWritingRenderer, MoversCrosswordPuzzleRenderer, } from '../../../components/exams/take/components/question-renderers';
-import { transformAnswerTheQuestion, transformFillWordHint, transformGridFill, transformLabelPicture, transformMatchByWritingAnswer, transformMatchWordToPicture, transformPictureChoose, transformPictureFillBlankChoose, transformReadingPassage, transformTrueFalse, transformTrueFalseCorrectGroup, transformWordFillParagraph, transformWordFillStructuredForm, transformWordOrdering, transformWriteSentences, transformWriteShortLetter, transformCrosswordPuzzle, } from '../../../components/exams/take/utils/question-transformers';
+import { MoversAnswerTheQuestionRenderer, MoversFillWordHintRenderer, MoversGridFillRenderer, MoversLabelThePictureRenderer, MoversMatchByWritingAnswerRenderer, MoversMatchWordToPictureRenderer, MoversPictureChooseRenderer, MoversPictureFillBlankChooseRenderer, MoversReadingPassageRenderer, MoversTrueFalseRenderer, MoversTrueFalseCorrectGroupRenderer, MoversFillInBlankGroupRenderer, MoversMatchingWithLinesGroupRenderer, MoversCrossOutWordGroupRenderer, MoversWordFillParagraphRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderingRenderer, MoversWriteSentencesRenderer, MoversWritingRenderer, MoversCrosswordPuzzleRenderer, } from '../../../components/exams/take/components/question-renderers';
+import { transformAnswerTheQuestion, transformFillWordHint, transformGridFill, transformLabelPicture, transformMatchByWritingAnswer, transformMatchWordToPicture, transformPictureChoose, transformPictureFillBlankChoose, transformReadingPassage, transformTrueFalse, transformTrueFalseCorrectGroup, transformFillInBlankGroup, transformMatchingWithLinesGroup, transformWordFillParagraph, transformWordFillStructuredForm, transformWordOrdering, transformWriteSentences, transformWriteShortLetter, transformCrosswordPuzzle, } from '../../../components/exams/take/utils/question-transformers';
 import { normalizeCrossOutWordGroupAnswer, transformCrossOutWordGroup, } from '../../../components/exams/take/utils/cross-out-word-group.transformer';
 function asApiQuestions(questions) {
     return questions;
@@ -142,6 +142,41 @@ export function renderMoversReviewBody(ctx) {
             });
             return (_jsx(MoversTrueFalseCorrectGroupRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: questionCount, questions: data.questions, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true, correctAnswerMap: correctAnswerMap }));
         }
+        case 'FILL_IN_BLANK_GROUP': {
+            const data = transformFillInBlankGroup(apiQuestions);
+            const correctAnswerMap = {};
+            const parent = apiQuestions[0];
+            const rawCorrect = parent?.id ? rawCorrectAnswerMap[parent.id] : undefined;
+            const rawCorrectRecord = rawCorrect && typeof rawCorrect === 'object' && !Array.isArray(rawCorrect)
+                ? rawCorrect
+                : undefined;
+            const correctArr = Array.isArray(rawCorrectRecord?.answer)
+                ? rawCorrectRecord.answer
+                : Array.isArray(parent?.correct_answer?.answer)
+                    ? parent.correct_answer.answer
+                    : [];
+            data.questions.forEach((question, index) => {
+                const rawItem = correctArr[index];
+                if (!rawItem || typeof rawItem !== 'object' || Array.isArray(rawItem)) {
+                    return;
+                }
+                const obj = rawItem;
+                if (!Array.isArray(obj.answers)) {
+                    return;
+                }
+                correctAnswerMap[question.id] = {
+                    answers: obj.answers.map((blank) => (Array.isArray(blank)
+                        ? blank.map((alt) => String(alt ?? '').trim()).filter(Boolean)
+                        : [String(blank ?? '').trim()].filter(Boolean))),
+                    caseSensitive: obj.caseSensitive === true,
+                };
+            });
+            return (_jsx(MoversFillInBlankGroupRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: data.questions.filter((question) => !question.isExample).length, audioUrl: data.audioUrl, imageUrl: data.imageUrl, showHints: data.showHints, hints: data.hints, questions: data.questions, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true, correctAnswerMap: correctAnswerMap }));
+        }
+        case 'MATCHING_WITH_LINES_GROUP': {
+            const data = transformMatchingWithLinesGroup(apiQuestions);
+            return (_jsx(MoversMatchingWithLinesGroupRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: questionCount, data: data, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true }));
+        }
         case 'TRUE_FALSE': {
             const data = transformTrueFalse(apiQuestions);
             return (_jsx(MoversTrueFalseRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: questionCount, imageUrl: data.imageUrl, questions: data.questions, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true, correctAnswerTextMap: correctAnswerTextMap }));

package/dist/components/results/review-data.js

@@ -9,6 +9,8 @@ const FLATTENED_ANSWER_TYPES = new Set([
     'ANSWER_THE_QUESTION_GROUP',
     'CROSS_OUT_WORD_GROUP',
     'TRUE_FALSE_CORRECT_GROUP',
+    'FILL_IN_BLANK_GROUP',
+    'MATCHING_WITH_LINES_GROUP',
 ]);
 export function transformResultAnswersForReview(answers, templateParts = []) {
     const groups = groupAnswers(answers);
@@ -205,6 +207,41 @@ function transformStudentAnswer(questionId, questionType, value) {
             return [`${questionId}-item-${index}`, { isTrue: null, correction: '' }];
         }));
     }
+    if (questionType === 'FILL_IN_BLANK_GROUP') {
+        const answer = Array.isArray(record.answer)
+            ? record.answer
+            : Array.isArray(value)
+                ? value
+                : [];
+        return Object.fromEntries(answer.map((item, index) => {
+            if (item && typeof item === 'object' && !Array.isArray(item) && Array.isArray(item.answers)) {
+                return [
+                    `${questionId}-item-${index}`,
+                    {
+                        answers: item.answers.map((value) => String(value ?? '')),
+                    },
+                ];
+            }
+            if (Array.isArray(item)) {
+                return [`${questionId}-item-${index}`, { answers: item.map((value) => String(value ?? '')) }];
+            }
+            if (typeof item === 'string') {
+                return [`${questionId}-item-${index}`, { answers: [item] }];
+            }
+            return [`${questionId}-item-${index}`, { answers: [] }];
+        }));
+    }
+    if (questionType === 'MATCHING_WITH_LINES_GROUP') {
+        const answer = Array.isArray(record.answer)
+            ? record.answer
+            : Array.isArray(value)
+                ? value
+                : [];
+        return Object.fromEntries(answer.map((item, index) => [
+            `${questionId}-item-${index}`,
+            typeof item === 'string' ? item : '',
+        ]));
+    }
     if (questionType === 'CHOOSE_THE_CORRECT_ANSWER' || questionType === 'CHOOSE_CORRECT_ADJECTIVE') {
         const rawAns = record.answer ?? record.optionId ?? record.optionIds;
         const ids = getOptionIds(questionId, rawAns);

package/dist/index.d.ts

@@ -26,4 +26,4 @@ export { validateQuestion } from './components/questions/_shared/utils/question-
 export { buildAnswerPayload } from './components/questions/_shared/utils/answer-builder';
 export type { QuestionFormState } from './components/questions/_shared/hooks/useQuestionFormState';
 export * from './components/questions/_shared/types';
-export { QuestionViewer, QuestionGroupViewer, WordFillStructuredFormViewer, ChooseTheCorrectAnswerGroupViewer, TrueFalseGroupViewer, TrueFalseCorrectGroupViewer, CrossOutWordGroupViewer, SpontaneousQaGroupViewer, WordOrderAndMatchGroupViewer, AnswerTheQuestionGroupViewer, MatchWordToPictureViewer, MatchWordToPictureGroupViewer, } from './components/questions/viewer';
+export { QuestionViewer, QuestionGroupViewer, WordFillStructuredFormViewer, ChooseTheCorrectAnswerGroupViewer, TrueFalseGroupViewer, TrueFalseCorrectGroupViewer, FillInBlankGroupViewer, MatchingWithLinesGroupViewer, CrossOutWordGroupViewer, SpontaneousQaGroupViewer, WordOrderAndMatchGroupViewer, AnswerTheQuestionGroupViewer, MatchWordToPictureViewer, MatchWordToPictureGroupViewer, } from './components/questions/viewer';

package/dist/index.js

@@ -21,4 +21,4 @@ export { QUESTION_TYPE_CONFIG, QUESTION_TYPES_WITH_DEDICATED_COMPONENTS } from '
 export { validateQuestion } from './components/questions/_shared/utils/question-validation';
 export { buildAnswerPayload } from './components/questions/_shared/utils/answer-builder';
 export * from './components/questions/_shared/types';
-export { QuestionViewer, QuestionGroupViewer, WordFillStructuredFormViewer, ChooseTheCorrectAnswerGroupViewer, TrueFalseGroupViewer, TrueFalseCorrectGroupViewer, CrossOutWordGroupViewer, SpontaneousQaGroupViewer, WordOrderAndMatchGroupViewer, AnswerTheQuestionGroupViewer, MatchWordToPictureViewer, MatchWordToPictureGroupViewer, } from './components/questions/viewer';
+export { QuestionViewer, QuestionGroupViewer, WordFillStructuredFormViewer, ChooseTheCorrectAnswerGroupViewer, TrueFalseGroupViewer, TrueFalseCorrectGroupViewer, FillInBlankGroupViewer, MatchingWithLinesGroupViewer, CrossOutWordGroupViewer, SpontaneousQaGroupViewer, WordOrderAndMatchGroupViewer, AnswerTheQuestionGroupViewer, MatchWordToPictureViewer, MatchWordToPictureGroupViewer, } from './components/questions/viewer';

package/dist/shared/constants/question-skills.js

@@ -45,6 +45,7 @@ export const QUESTION_TYPE_SKILLS = {
     'CHOOSE_THE_CORRECT_ANSWER_GROUP': SkillEnum.READING,
     'CHOOSE_CORRECT_ADJECTIVE': SkillEnum.READING,
     'FILL_IN_BLANK': SkillEnum.READING,
+    'FILL_IN_BLANK_GROUP': SkillEnum.READING,
     'FILL_MISSING_WORDS_IN_GRID': SkillEnum.READING,
     'READ_PASSAGE_AND_ANSWER_QUESTIONS': SkillEnum.READING,
     'ANSWER_THE_QUESTION': SkillEnum.READING,
@@ -53,6 +54,7 @@ export const QUESTION_TYPE_SKILLS = {
     'WORD_FILL_PARAGRAPH': SkillEnum.READING,
     'MATCH_BY_WRITING_ANSWER': SkillEnum.READING,
     'MATCH_WORD_TO_PICTURE': SkillEnum.READING,
+    'MATCHING_WITH_LINES_GROUP': SkillEnum.READING,
     // Visual-based reading questions
     'LABEL_THE_PICTURE': SkillEnum.READING,
     'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER': SkillEnum.READING,
@@ -177,6 +179,7 @@ export const QUESTION_TYPE_LABELS = {
     'CHOOSE_THE_CORRECT_ANSWER_GROUP': 'Chọn đáp án đúng (nhóm)',
     'CHOOSE_CORRECT_ADJECTIVE': 'Chọn tính từ',
     'FILL_IN_BLANK': 'Điền vào chỗ trống',
+    'FILL_IN_BLANK_GROUP': 'Điền chỗ trống (nhóm)',
     'FILL_MISSING_WORDS_IN_GRID': 'Điền từ vào lưới',
     'READ_PASSAGE_AND_ANSWER_QUESTIONS': 'Đọc hiểu - Trả lời',
     'LABEL_THE_PICTURE': 'Gắn nhãn hình ảnh',
@@ -209,6 +212,7 @@ export const QUESTION_TYPE_LABELS = {
     'WORD_FILL_PARAGRAPH': 'Điền từ vào đoạn văn',
     'MATCH_BY_WRITING_ANSWER': 'Ghép đáp án bằng cách viết',
     'MATCH_WORD_TO_PICTURE': 'Nối từ với tranh',
+    'MATCHING_WITH_LINES_GROUP': 'Nối bằng đường kẻ (nhóm)',
     'WORD_FILL_STRUCTURED_FORM': 'Điền từ vào biểu mẫu có cấu trúc',
     'CROSSWORD_PUZZLE': 'Giải ô chữ (Crossword)',
     'FIND_WORDS_IN_MATRIX': 'Tìm từ trong ma trận (Word Search)',

package/dist/shared/lib/utils/fill-in-blank.d.ts

@@ -0,0 +1,46 @@
+/**
+ * FILL_IN_BLANK — single source of truth for the whole flow.
+ *
+ * Wire format (never change one side without the other):
+ *   content.question       "A dog {0} swim, but it {1} fly."
+ *   correct_answer.answers string[][] — answers[i] = accepted equivalents for blank {i}
+ *   student answer         { answers: string[] } — one entry per blank, index-aligned
+ *
+ * Matching rule (mirrors the API `normalizeText`): trim, lowercase, collapse inner
+ * whitespace, keep diacritics. A blank is correct when the input equals ANY equivalent.
+ */
+export type FillBlankSegment = {
+    type: 'text';
+    value: string;
+} | {
+    type: 'blank';
+    index: number;
+};
+/** Split a stem into the text / blank segments used by every renderer. */
+export declare function parseFillBlankSegments(text: string): FillBlankSegment[];
+/**
+ * Renderer-facing parse: like `parseFillBlankSegments`, but guarantees at least
+ * one blank so a stem authored without `{0}` still gets an input box.
+ */
+export declare function parseFillBlankStem(text: string): FillBlankSegment[];
+/** Number of input boxes a stem needs (highest placeholder index + 1). */
+export declare function countBlanks(segments: FillBlankSegment[]): number;
+/** Placeholder indices present in a stem, ascending and de-duplicated. */
+export declare function extractPlaceholderIndices(text: string): number[];
+/** Normalize one blank's stored value into a list of accepted equivalents. */
+export declare function toAcceptedAnswers(value: unknown): string[];
+/**
+ * Normalize `correct_answer.answers` into `string[][]` padded to `blankCount`.
+ * Accepts the canonical `string[][]` and the legacy flat `string[]`.
+ */
+export declare function normalizeAcceptedAnswers(raw: unknown, blankCount: number): string[][];
+/** Normalize a stored student answer into one string per blank. */
+export declare function toBlankValues(raw: unknown, blankCount: number): string[];
+/** True when the student typed something into at least one blank. */
+export declare function hasAnyBlankValue(raw: unknown): boolean;
+/** Compare a student input against the accepted equivalents of one blank. */
+export declare function isBlankCorrect(value: string, accepted: string[] | undefined): boolean;
+/** Join equivalents for display, e.g. "is / 's". */
+export declare function formatAcceptedAnswers(accepted: string[] | undefined): string;
+/** First equivalent — used to prefill example questions and review hints. */
+export declare function getPrimaryAnswer(accepted: string[] | undefined): string;