@tinyweb_dev/oe-exam-sdk 0.2.8 → 0.2.10

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

@@ -0,0 +1,8 @@
+import type { Question } from '../../../shared/types/entities/question.types';
+import type { MatchColumnsStudentItemAnswer } from '../_shared/types/match-columns-to-make-sentences.type';
+export declare function MatchColumnsToMakeSentencesViewer({ question, isReviewMode, userAnswer, onSubmitAnswer, }: {
+    question: Question;
+    isReviewMode?: boolean;
+    userAnswer?: unknown;
+    onSubmitAnswer?: (answer: MatchColumnsStudentItemAnswer[]) => void;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { MatchColumnsToMakeSentencesClient } from '../types/match-columns-to-make-sentences/MatchColumnsToMakeSentencesClient';
+import { mapQuestionToMatchColumnsGroupData } from '../types/match-columns-to-make-sentences/map-match-columns-to-make-sentences-data';
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function parseAnswers(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) => {
+        const raw = source[index];
+        if (!isRecord(raw))
+            return { fragmentIds: [], sentence: '' };
+        return {
+            fragmentIds: Array.isArray(raw.fragmentIds)
+                ? raw.fragmentIds.filter((id) => typeof id === 'string')
+                : [],
+            sentence: typeof raw.sentence === 'string' ? raw.sentence : '',
+        };
+    });
+}
+export function MatchColumnsToMakeSentencesViewer({ question, isReviewMode = false, userAnswer, onSubmitAnswer, }) {
+    const questionData = mapQuestionToMatchColumnsGroupData(question);
+    const itemCount = questionData.items.length;
+    const parsedUser = parseAnswers(userAnswer, itemCount);
+    const questionKey = `${question.id}:${itemCount}`;
+    const [cachedKey, setCachedKey] = useState(questionKey);
+    const [localAnswers, setLocalAnswers] = useState(() => parsedUser ?? questionData.items.map((item) => (item.isExample
+        ? { fragmentIds: item.fragmentIds, sentence: item.sentence }
+        : { fragmentIds: [item.stemFragmentId], sentence: '' })));
+    if (cachedKey !== questionKey) {
+        setCachedKey(questionKey);
+        setLocalAnswers(parsedUser ?? questionData.items.map((item) => (item.isExample
+            ? { fragmentIds: item.fragmentIds, sentence: item.sentence }
+            : { fragmentIds: [item.stemFragmentId], sentence: '' })));
+    }
+    const userAnswers = parsedUser ?? localAnswers;
+    return (_jsx(MatchColumnsToMakeSentencesClient, { questionData: questionData, isReviewMode: isReviewMode, userAnswers: userAnswers, onAnswerChange: isReviewMode ? undefined : (next) => {
+            setLocalAnswers(next);
+            onSubmitAnswer?.(next);
+        } }));
+}

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { MatchWordToPictureGroupClient } from '../types/match-word-to-picture/MatchWordToPictureGroupClient';
-import { mapQuestionToMatchWordToPictureGroupData } from '../types/match-word-to-picture/map-match-word-to-picture-group-data';
+import { MatchWordToPictureGroupClient } from '../types/match-word-to-picture-group/MatchWordToPictureGroupClient';
+import { mapQuestionToMatchWordToPictureGroupData } from '../types/match-word-to-picture-group/map-match-word-to-picture-group-data';
 export function MatchWordToPictureGroupViewer({ question, isReviewMode = false, userAnswer, onSubmitAnswer, }) {
     const questionData = mapQuestionToMatchWordToPictureGroupData(question);
     const reviewAnswers = isReviewMode && !userAnswer

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

@@ -34,6 +34,8 @@ import { WordOrderAndMatchGroupViewer } from './WordOrderAndMatchGroupViewer';
 import { AnswerTheQuestionGroupViewer } from './AnswerTheQuestionGroupViewer';
 import { MatchWordToPictureViewer } from './MatchWordToPictureViewer';
 import { MatchWordToPictureGroupViewer } from './MatchWordToPictureGroupViewer';
+import { MatchColumnsToMakeSentencesViewer } from './MatchColumnsToMakeSentencesViewer';
+import { WordOrderingGroupViewer } from './WordOrderingGroupViewer';
 export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false, userAnswer, }) {
     const [selectedAnswer, setSelectedAnswer] = useState(userAnswer || null);
     const [playCount, setPlayCount] = useState(0);
@@ -641,6 +643,8 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
                 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 'MATCH_COLUMNS_TO_MAKE_SENTENCES':
+                return (_jsx(MatchColumnsToMakeSentencesViewer, { 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':
@@ -650,6 +654,8 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
             case 'WORD_ORDER_AND_MATCH_GROUP':
             case 'WORD_ORDER_AND_MATCH':
                 return (_jsx(WordOrderAndMatchGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer }));
+            case 'WORD_ORDERING_GROUP':
+                return (_jsx(WordOrderingGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer, onSubmitAnswer: onSubmitAnswer }));
             case 'MATCH_WORD_TO_PICTURE_GROUP':
                 return (_jsx(MatchWordToPictureGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer, onSubmitAnswer: onSubmitAnswer }));
             case 'MATCH_WORD_TO_PICTURE':

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

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

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

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { WordOrderingGroupClient } from '../types/word-ordering-group/WordOrderingGroupClient';
+import { mapQuestionToWordOrderingGroupData } from '../types/word-ordering-group/map-word-ordering-group-data';
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function parseAnswers(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) => Array.isArray(source[index])
+        ? source[index].filter((token) => typeof token === 'string')
+        : []);
+}
+export function WordOrderingGroupViewer({ question, isReviewMode = false, userAnswer, onSubmitAnswer, }) {
+    const questionData = mapQuestionToWordOrderingGroupData(question);
+    const parsedUser = parseAnswers(userAnswer, questionData.items.length);
+    const [localAnswers, setLocalAnswers] = useState(() => parsedUser ?? questionData.items.map((item) => (item.isExample ? item.answer : [])));
+    return (_jsx(WordOrderingGroupClient, { questionData: questionData, isReviewMode: isReviewMode, userAnswers: parsedUser ?? localAnswers, onAnswerChange: isReviewMode ? undefined : (next) => {
+            setLocalAnswers(next);
+            onSubmitAnswer?.(next);
+        } }));
+}

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

@@ -12,3 +12,5 @@ export { WordOrderAndMatchGroupViewer } from './WordOrderAndMatchGroupViewer';
 export { AnswerTheQuestionGroupViewer } from './AnswerTheQuestionGroupViewer';
 export { MatchWordToPictureViewer } from './MatchWordToPictureViewer';
 export { MatchWordToPictureGroupViewer } from './MatchWordToPictureGroupViewer';
+export { MatchColumnsToMakeSentencesViewer } from './MatchColumnsToMakeSentencesViewer';
+export { WordOrderingGroupViewer } from './WordOrderingGroupViewer';

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

@@ -12,3 +12,5 @@ export { WordOrderAndMatchGroupViewer } from './WordOrderAndMatchGroupViewer';
 export { AnswerTheQuestionGroupViewer } from './AnswerTheQuestionGroupViewer';
 export { MatchWordToPictureViewer } from './MatchWordToPictureViewer';
 export { MatchWordToPictureGroupViewer } from './MatchWordToPictureGroupViewer';
+export { MatchColumnsToMakeSentencesViewer } from './MatchColumnsToMakeSentencesViewer';
+export { WordOrderingGroupViewer } from './WordOrderingGroupViewer';

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

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, X } from 'lucide-react';
 import { ResolvedImage } from '../../../components/common/ResolvedImage';
+import { RichTextHtml } from '../../../components/shared/RichTextHtml';
 import CambridgeYlePartBanner from '../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
 import CambridgeYleInstructionBanner from '../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
 import CambridgeYleAudioPlayer from '../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer';
@@ -43,9 +44,9 @@ function ReviewQuestionItem({ question, selectedOptionIds, isCorrect, correctOpt
         }
         return _jsx("div", { className: `flex h-5 w-5 items-center justify-center border-2 border-gray-300 bg-white ${shapeClass}` });
     };
-    return (_jsxs("div", { className: "mb-4", children: [_jsxs("p", { className: "mb-2 text-lg font-bold text-gray-900", children: [question.questionNumber, ". ", question.questionText] }), isMultipleAnswers && (_jsx("p", { className: "mb-3 pl-2 text-sm font-medium text-blue-600", children: "Ch\u1ECDn nhi\u1EC1u \u0111\u00E1p \u00E1n" })), question.audioUrl && (_jsx("div", { className: "mb-3", children: _jsx(CambridgeYleAudioPlayer, { audioSrc: question.audioUrl, compact: true }) })), _jsx(ChooseBestAnswerImages, { imageUrl: question.imageUrl, className: "mb-3" }), isImageOptions ? (_jsx("div", { className: "grid gap-3 px-2", style: { gridTemplateColumns: `repeat(${question.options.length}, minmax(0, 1fr))` }, children: question.options.map((option) => (_jsxs("div", { className: `relative flex flex-col items-center gap-1 rounded-lg border-2 p-2 cursor-default ${getOptionStyle(option.id)}`, children: [_jsx("span", { className: "text-xs font-medium text-gray-600", children: option.label }), _jsx(ResolvedImage, { src: getChooseBestAnswerOptionImageSrc(option), alt: `Option ${option.label}`, className: "h-28 w-28 rounded object-contain" }), renderIndicator(option.id)] }, option.id))) })) : (
+    return (_jsxs("div", { className: "mb-4", children: [_jsxs("div", { className: "mb-2 flex items-start gap-1.5 text-lg font-bold text-gray-900", children: [_jsxs("span", { children: [question.questionNumber, "."] }), _jsx(RichTextHtml, { html: question.questionText, className: "flex-1 font-bold text-gray-900" })] }), isMultipleAnswers && (_jsx("p", { className: "mb-3 pl-2 text-sm font-medium text-blue-600", children: "Ch\u1ECDn nhi\u1EC1u \u0111\u00E1p \u00E1n" })), question.audioUrl && (_jsx("div", { className: "mb-3", children: _jsx(CambridgeYleAudioPlayer, { audioSrc: question.audioUrl, compact: true }) })), _jsx(ChooseBestAnswerImages, { imageUrl: question.imageUrl, className: "mb-3" }), isImageOptions ? (_jsx("div", { className: "grid gap-3 px-2", style: { gridTemplateColumns: `repeat(${question.options.length}, minmax(0, 1fr))` }, children: question.options.map((option) => (_jsxs("div", { className: `relative flex flex-col items-center gap-1 rounded-lg border-2 p-2 cursor-default ${getOptionStyle(option.id)}`, children: [_jsx("span", { className: "text-xs font-medium text-gray-600", children: option.label }), _jsx(ResolvedImage, { src: getChooseBestAnswerOptionImageSrc(option), alt: `Option ${option.label}`, className: "h-28 w-28 rounded object-contain" }), renderIndicator(option.id)] }, option.id))) })) : (
             /* Options — text variant */
-            _jsx("div", { className: "flex flex-col gap-2 pl-2", children: question.options.map((option) => (_jsxs("div", { className: `flex items-center gap-3 rounded-lg border-2 px-3 py-2 cursor-default ${getOptionStyle(option.id)}`, children: [_jsxs("span", { className: "text-sm font-medium text-gray-600", children: [option.label, "."] }), _jsx("span", { className: "flex-1 text-sm text-gray-700", children: option.text }), renderIndicator(option.id)] }, option.id))) }))] }));
+            _jsx("div", { className: "flex flex-col gap-2 pl-2", children: question.options.map((option) => (_jsxs("div", { className: `flex items-center gap-3 rounded-lg border-2 px-3 py-2 cursor-default ${getOptionStyle(option.id)}`, children: [_jsxs("span", { className: "text-sm font-medium text-gray-600", children: [option.label, "."] }), _jsx(RichTextHtml, { html: option.text, className: "flex-1 text-sm text-gray-700" }), renderIndicator(option.id)] }, option.id))) }))] }));
 }
 // Article Card for ARTICLES groupType (e.g., GN QE RWL Part 2)
 function ArticleCard({ article, label, }) {

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

@@ -40,7 +40,7 @@ export function renderDedicatedReviewBody(ctx) {
         }
         case 'CHOOSE_THE_CORRECT_ANSWER_GROUP': {
             const data = transformChooseTheCorrectAnswerGroup(apiQuestions);
-            return (_jsx(ReviewChooseBestAnswerRenderer, { partNumber: partNo, questionCount: questionCount, partName: part.name, instruction: part.instructions || data.instruction, audioUrl: data.audioUrl, questions: data.questions, answers: answers, isCorrectMap: isCorrectMap, correctOptionIdMap: correctOptionIdMap, example: data.example }));
+            return (_jsx(ReviewChooseBestAnswerRenderer, { partNumber: partNo, questionCount: questionCount, partName: part.name, instruction: part.instructions || data.instruction, audioUrl: data.audioUrl, imageUrl: data.imageUrl, questions: data.questions, answers: answers, isCorrectMap: isCorrectMap, correctOptionIdMap: correctOptionIdMap, example: data.example }));
         }
         case 'CHOOSE_CORRECT_ADJECTIVE': {
             const data = transformChooseCorrectAdjective(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, 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 { MoversAnswerTheQuestionRenderer, MoversFillWordHintRenderer, MoversGridFillRenderer, MoversLabelThePictureRenderer, MoversMatchByWritingAnswerRenderer, MoversMatchWordToPictureRenderer, MoversPictureChooseRenderer, MoversPictureFillBlankChooseRenderer, MoversReadingPassageRenderer, MoversTrueFalseRenderer, MoversTrueFalseCorrectGroupRenderer, MoversFillInBlankGroupRenderer, MoversMatchingWithLinesGroupRenderer, MoversCrossOutWordGroupRenderer, MoversWordFillParagraphRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderingRenderer, MoversWordOrderingGroupRenderer, 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, transformWordOrderingGroupTake, 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;
@@ -189,6 +189,10 @@ export function renderMoversReviewBody(ctx) {
             const data = transformMatchWordToPicture(apiQuestions);
             return (_jsx(MoversMatchWordToPictureRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: questionCount, wordBank: data.wordBank, questions: data.questions, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true, correctAnswerTextMap: correctAnswerTextMap, isCorrectMap: isCorrectMap }));
         }
+        case 'WORD_ORDERING_GROUP': {
+            const data = transformWordOrderingGroupTake(apiQuestions);
+            return (_jsx(MoversWordOrderingGroupRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: data.questions.filter((q) => !q.isExample).length, data: data, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true }));
+        }
         case 'WORD_ORDERING': {
             const data = transformWordOrdering(apiQuestions);
             return (_jsx(MoversWordOrderingRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: questionCount, questions: data.questions, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true, rawCorrectAnswerMap: rawCorrectAnswerMap, isCorrectMap: isCorrectMap }));

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

@@ -231,6 +231,19 @@ function transformStudentAnswer(questionId, questionType, value) {
             return [`${questionId}-item-${index}`, { answers: [] }];
         }));
     }
+    if (questionType === 'WORD_ORDERING_GROUP') {
+        const answer = Array.isArray(record.answer)
+            ? record.answer
+            : Array.isArray(value)
+                ? value
+                : [];
+        return Object.fromEntries(answer.map((item, index) => [
+            `${questionId}-item-${index}`,
+            Array.isArray(item)
+                ? item.filter((token) => typeof token === 'string')
+                : [],
+        ]));
+    }
     if (questionType === 'MATCHING_WITH_LINES_GROUP') {
         const answer = Array.isArray(record.answer)
             ? record.answer

package/dist/components/shared/RichTextEditor.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
-export interface RichTextEditorProps {
+interface RichTextEditorProps {
     value?: string;
     onChange: (html: string) => void;
     label?: React.ReactNode;
     disabled?: boolean;
     minHeightClassName?: string;
+    variant?: 'default' | 'compact';
 }
-export declare function RichTextEditor({ value, onChange, label, disabled, minHeightClassName, }: RichTextEditorProps): React.JSX.Element;
+export declare function RichTextEditor({ value, onChange, label, disabled, minHeightClassName, variant, }: RichTextEditorProps): React.JSX.Element;
+export {};

package/dist/components/shared/RichTextEditor.js

@@ -3,16 +3,43 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { useEditor, EditorContent } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import TextAlign from '@tiptap/extension-text-align';
+import { Table, TableRow, TableCell, TableHeader } from '@tiptap/extension-table';
+import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, Code, Columns3, Italic, List, ListOrdered, Minus, Quote, Redo2, RemoveFormatting, Rows3, SquareCode, Strikethrough, TableIcon, Trash2, Underline as UnderlineIcon, Undo2, } from 'lucide-react';
 const EMPTY_CONTENT = '<p></p>';
-const HEADING_LEVELS = [1, 2, 3];
-function getToolbarButtonClass(isActive) {
-    return `rounded px-3 py-1 text-sm ${isActive ? 'bg-blue-500 text-white' : 'border bg-white text-gray-700 hover:bg-gray-100'}`;
+const HEADING_LEVELS = [1, 2, 3, 4];
+const EDITOR_EXTENSIONS = [
+    StarterKit.configure({
+        heading: { levels: [...HEADING_LEVELS] },
+    }),
+    Underline,
+    TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    Table.configure({ resizable: false }),
+    TableRow,
+    TableHeader,
+    TableCell,
+];
+const EDITOR_TABLE_CLASS = '[&_table]:my-2 [&_table]:w-full [&_table]:border-collapse [&_th]:border [&_td]:border [&_th]:border-slate-300 [&_td]:border-slate-300 [&_th]:bg-slate-50 [&_th]:px-2 [&_th]:py-1 [&_td]:px-2 [&_td]:py-1';
+function toolbarButtonClass(isActive) {
+    return `inline-flex h-7 min-w-7 items-center justify-center rounded-md px-1.5 transition-colors disabled:opacity-30 ${isActive ? 'bg-indigo-600 text-white' : 'text-slate-600 hover:bg-slate-100'}`;
 }
-export function RichTextEditor({ value, onChange, label, disabled = false, minHeightClassName = 'min-h-[250px]', }) {
+function ToolbarGroup({ children }) {
+    return (_jsx("div", { className: "flex items-center gap-0.5 rounded-md bg-white px-0.5 py-0.5 shadow-sm ring-1 ring-slate-200/80", children: children }));
+}
+function ToolbarButton({ editor, disabled, active, title, onClick, children, }) {
+    return (_jsx("button", { type: "button", title: title, disabled: disabled || !editor, onClick: onClick, className: toolbarButtonClass(!!active), children: children }));
+}
+function EditorToolbar({ editor, disabled, }) {
+    const iconClass = 'h-4 w-4';
+    return (_jsxs("div", { className: "relative flex flex-wrap items-center gap-1 rounded-t-md border-b border-slate-200 bg-slate-100 px-1.5 py-1", children: [_jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { editor: editor, disabled: disabled, title: "Ho\u00E0n t\u00E1c", onClick: () => editor?.chain().focus().undo().run(), children: _jsx(Undo2, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, title: "L\u00E0m l\u1EA1i", onClick: () => editor?.chain().focus().redo().run(), children: _jsx(Redo2, { className: iconClass, strokeWidth: 2 }) })] }), _jsx(ToolbarGroup, { children: HEADING_LEVELS.map((level) => (_jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive('heading', { level }), title: `Heading ${level}`, onClick: () => editor?.chain().focus().toggleHeading({ level }).run(), children: _jsxs("span", { className: "text-[11px] font-bold", children: ["H", level] }) }, level))) }), _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive('bold'), title: "\u0110\u1EADm", onClick: () => editor?.chain().focus().toggleBold().run(), children: _jsx(Bold, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive('italic'), title: "Nghi\u00EAng", onClick: () => editor?.chain().focus().toggleItalic().run(), children: _jsx(Italic, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive('underline'), title: "G\u1EA1ch ch\u00E2n", onClick: () => editor?.chain().focus().toggleUnderline().run(), children: _jsx(UnderlineIcon, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive('strike'), title: "G\u1EA1ch ngang", onClick: () => editor?.chain().focus().toggleStrike().run(), children: _jsx(Strikethrough, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive('code'), title: "Code", onClick: () => editor?.chain().focus().toggleCode().run(), children: _jsx(Code, { className: iconClass, strokeWidth: 2 }) })] }), _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive('bulletList'), title: "Danh s\u00E1ch", onClick: () => editor?.chain().focus().toggleBulletList().run(), children: _jsx(List, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive('orderedList'), title: "Danh s\u00E1ch s\u1ED1", onClick: () => editor?.chain().focus().toggleOrderedList().run(), children: _jsx(ListOrdered, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive('blockquote'), title: "Tr\u00EDch d\u1EABn", onClick: () => editor?.chain().focus().toggleBlockquote().run(), children: _jsx(Quote, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive('codeBlock'), title: "Kh\u1ED1i code", onClick: () => editor?.chain().focus().toggleCodeBlock().run(), children: _jsx(SquareCode, { className: iconClass, strokeWidth: 2 }) })] }), _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive({ textAlign: 'left' }), title: "C\u0103n tr\u00E1i", onClick: () => editor?.chain().focus().setTextAlign('left').run(), children: _jsx(AlignLeft, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive({ textAlign: 'center' }), title: "C\u0103n gi\u1EEFa", onClick: () => editor?.chain().focus().setTextAlign('center').run(), children: _jsx(AlignCenter, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive({ textAlign: 'right' }), title: "C\u0103n ph\u1EA3i", onClick: () => editor?.chain().focus().setTextAlign('right').run(), children: _jsx(AlignRight, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive({ textAlign: 'justify' }), title: "C\u0103n \u0111\u1EC1u", onClick: () => editor?.chain().focus().setTextAlign('justify').run(), children: _jsx(AlignJustify, { className: iconClass, strokeWidth: 2 }) })] }), _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { editor: editor, disabled: disabled, title: "\u0110\u01B0\u1EDDng k\u1EBB ngang", onClick: () => editor?.chain().focus().setHorizontalRule().run(), children: _jsx(Minus, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, title: "Ch\u00E8n b\u1EA3ng", onClick: () => editor?.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(), children: _jsx(TableIcon, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled || !editor?.can().addRowAfter(), title: "Th\u00EAm h\u00E0ng", onClick: () => editor?.chain().focus().addRowAfter().run(), children: _jsx(Rows3, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled || !editor?.can().addColumnAfter(), title: "Th\u00EAm c\u1ED9t", onClick: () => editor?.chain().focus().addColumnAfter().run(), children: _jsx(Columns3, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled || !editor?.can().deleteTable(), title: "X\u00F3a b\u1EA3ng", onClick: () => editor?.chain().focus().deleteTable().run(), children: _jsx(Trash2, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, title: "X\u00F3a \u0111\u1ECBnh d\u1EA1ng", onClick: () => editor?.chain().focus().unsetAllMarks().clearNodes().run(), children: _jsx(RemoveFormatting, { className: iconClass, strokeWidth: 2 }) })] })] }));
+}
+export function RichTextEditor({ value, onChange, label, disabled = false, minHeightClassName = 'min-h-[250px]', variant = 'default', }) {
     const [mounted, setMounted] = useState(false);
+    const isCompact = variant === 'compact';
     const editor = useEditor({
         immediatelyRender: false,
-        extensions: [StarterKit],
+        extensions: EDITOR_EXTENSIONS,
         editable: !disabled,
         content: value || EMPTY_CONTENT,
         onUpdate: ({ editor: currentEditor }) => {
@@ -20,7 +47,7 @@ export function RichTextEditor({ value, onChange, label, disabled = false, minHe
         },
         editorProps: {
             attributes: {
-                class: `tiptap-editor focus:outline-none ${minHeightClassName} p-4 bg-white border border-gray-200 rounded-b-md prose prose-sm max-w-none`,
+                class: `tiptap-editor focus:outline-none ${minHeightClassName} ${isCompact ? 'p-2' : 'p-4'} bg-white rounded-b-md prose prose-sm max-w-none ${EDITOR_TABLE_CLASS}`,
             },
         },
     });
@@ -39,9 +66,5 @@ export function RichTextEditor({ value, onChange, label, disabled = false, minHe
     if (!mounted) {
         return null;
     }
-    return (_jsxs("div", { className: "flex w-full flex-col gap-4", children: [label ? _jsx("div", { children: label }) : null, _jsxs("div", { className: "flex flex-col rounded-md border border-gray-300 shadow-sm", children: [_jsxs("div", { className: "relative flex flex-wrap gap-2 rounded-t-md border-b border-gray-300 bg-gray-50 p-2", children: [_jsx("button", { type: "button", onClick: () => editor?.chain().focus().toggleBold().run(), disabled: disabled || !editor?.can().chain().focus().toggleBold().run(), className: `${getToolbarButtonClass(!!editor?.isActive('bold'))} font-bold`, children: "B" }), _jsx("button", { type: "button", onClick: () => editor?.chain().focus().toggleItalic().run(), disabled: disabled || !editor?.can().chain().focus().toggleItalic().run(), className: `${getToolbarButtonClass(!!editor?.isActive('italic'))} italic`, children: "I" }), _jsx("div", { className: "mx-1 h-6 w-px self-center bg-gray-300" }), HEADING_LEVELS.map((level) => (_jsxs("button", { type: "button", onClick: () => editor
-                                    ?.chain()
-                                    .focus()
-                                    .toggleHeading({ level })
-                                    .run(), disabled: disabled, className: `${getToolbarButtonClass(!!editor?.isActive('heading', { level }))} font-bold`, children: ["H", level] }, level))), _jsx("div", { className: "mx-1 h-6 w-px self-center bg-gray-300" }), _jsx("button", { type: "button", onClick: () => editor?.chain().focus().toggleBulletList().run(), disabled: disabled, className: getToolbarButtonClass(!!editor?.isActive('bulletList')), children: "\u2022 List" }), _jsx("button", { type: "button", onClick: () => editor?.chain().focus().toggleOrderedList().run(), disabled: disabled, className: getToolbarButtonClass(!!editor?.isActive('orderedList')), children: "1. List" })] }), _jsx(EditorContent, { editor: editor })] })] }));
+    return (_jsxs("div", { className: `flex w-full flex-col ${isCompact ? 'gap-0' : 'gap-4'}`, children: [label ? _jsx("div", { children: label }) : null, _jsxs("div", { className: "flex flex-col overflow-hidden rounded-md border border-gray-300 shadow-sm", children: [_jsx(EditorToolbar, { editor: editor, disabled: disabled }), _jsx(EditorContent, { editor: editor })] })] }));
 }

package/dist/components/shared/RichTextHtml.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+interface RichTextHtmlProps {
+    html?: string | null;
+    className?: string;
+    fallback?: ReactNode;
+}
+export declare function RichTextHtml({ html, className, fallback }: RichTextHtmlProps): import("react").JSX.Element;
+export {};

package/dist/components/shared/RichTextHtml.js

@@ -0,0 +1,9 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../shared/lib/utils';
+const RICH_TEXT_CLASS = 'rich-text-html max-w-none [&_p]:m-0 [&_p+p]:mt-1 [&_h1]:mb-1 [&_h1]:mt-0 [&_h1]:text-xl [&_h1]:font-bold [&_h2]:mb-1 [&_h2]:mt-0 [&_h2]:text-lg [&_h2]:font-bold [&_h3]:mb-1 [&_h3]:mt-0 [&_h3]:text-base [&_h3]:font-bold [&_h4]:mb-1 [&_h4]:mt-0 [&_h4]:text-sm [&_h4]:font-bold [&_ul]:my-1 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:my-1 [&_ol]:list-decimal [&_ol]:pl-5 [&_blockquote]:my-1 [&_blockquote]:border-l-2 [&_blockquote]:border-slate-300 [&_blockquote]:pl-3 [&_pre]:my-1 [&_pre]:overflow-x-auto [&_pre]:rounded [&_pre]:bg-slate-100 [&_pre]:p-2 [&_code]:rounded [&_code]:bg-slate-100 [&_code]:px-1 [&_u]:underline [&_s]:line-through [&_table]:my-2 [&_table]:w-full [&_table]:border-collapse [&_th]:border [&_td]:border [&_th]:border-slate-300 [&_td]:border-slate-300 [&_th]:bg-slate-50 [&_th]:px-2 [&_th]:py-1 [&_td]:px-2 [&_td]:py-1 [&_hr]:my-2';
+export function RichTextHtml({ html, className, fallback = null }) {
+    if (!html) {
+        return fallback ? _jsx(_Fragment, { children: fallback }) : null;
+    }
+    return (_jsx("div", { className: cn(RICH_TEXT_CLASS, className), dangerouslySetInnerHTML: { __html: html } }));
+}

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, FillInBlankGroupViewer, MatchingWithLinesGroupViewer, 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, MatchColumnsToMakeSentencesViewer, WordOrderingGroupViewer, } 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, FillInBlankGroupViewer, MatchingWithLinesGroupViewer, 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, MatchColumnsToMakeSentencesViewer, WordOrderingGroupViewer, } from './components/questions/viewer';

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

@@ -84,6 +84,9 @@ export const QUESTION_TYPE_SKILLS = {
     'WORD_FILL_STRUCTURED_FORM': SkillEnum.READING,
     'CROSSWORD_PUZZLE': SkillEnum.READING,
     'FIND_WORDS_IN_MATRIX': SkillEnum.READING,
+    'MATCH_COLUMNS_TO_MAKE_SENTENCES': SkillEnum.READING,
+    'MATCH_WORD_TO_PICTURE_GROUP': SkillEnum.READING,
+    'WORD_ORDERING_GROUP': SkillEnum.READING,
     // ========================================
     // WRITING SKILLS (Viết)
     // ========================================
@@ -216,6 +219,9 @@ export const QUESTION_TYPE_LABELS = {
     '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)',
+    'MATCH_COLUMNS_TO_MAKE_SENTENCES': 'Ghép cột thành câu',
+    'MATCH_WORD_TO_PICTURE_GROUP': 'Nối từ với tranh (nhóm)',
+    'WORD_ORDERING_GROUP': 'Sắp xếp từ (nhóm)',
     // ========================================
     // WRITING SKILLS (Viết)
     // ========================================

package/dist/shared/lib/rich-text.d.ts

@@ -0,0 +1,3 @@
+/** Strip HTML tags/entities so empty TipTap documents (`<p></p>`) count as blank. */
+export declare function richTextToPlainText(value: string | null | undefined): string;
+export declare function isRichTextEmpty(value: string | null | undefined): boolean;

package/dist/shared/lib/rich-text.js

@@ -0,0 +1,24 @@
+const HTML_TAG_RE = /<[^>]*>/g;
+const HTML_ENTITIES = {
+    '&nbsp;': ' ',
+    '&amp;': '&',
+    '&lt;': '<',
+    '&gt;': '>',
+    '&quot;': '"',
+    '&#39;': "'",
+};
+/** Strip HTML tags/entities so empty TipTap documents (`<p></p>`) count as blank. */
+export function richTextToPlainText(value) {
+    if (!value)
+        return '';
+    return value
+        .replace(HTML_TAG_RE, ' ')
+        .replace(/&nbsp;|&amp;|&lt;|&gt;|&quot;|&#39;/gi, (entity) => {
+        return HTML_ENTITIES[entity.toLowerCase()] ?? entity;
+    })
+        .replace(/\s+/g, ' ')
+        .trim();
+}
+export function isRichTextEmpty(value) {
+    return richTextToPlainText(value) === '';
+}

package/dist/shared/lib/utils/question-reverse-transform.js

@@ -226,7 +226,9 @@ function normalizeChooseAnswerGroupImageUrl(value) {
 const reverseChooseTheCorrectAnswerGroup = (apiQuestion) => {
     const content = asRecord(apiQuestion.content);
     const answer = readAnswer(apiQuestion);
-    const fallbackAnswers = asArray(answer.answer).map((item) => asString(item));
+    const fallbackAnswers = asArray(answer.answer).map((item) => (asString(item) || (Array.isArray(item)
+        ? asString(item.find((token) => typeof token === 'string' && token.trim() !== ''))
+        : '')));
     const items = asArray(content.items).map((rawItem, index) => {
         const item = asRecord(rawItem);
         const itemContent = asRecord(item.content);
@@ -251,7 +253,13 @@ const reverseChooseTheCorrectAnswerGroup = (apiQuestion) => {
                 { id: 'opt-2', text: '' },
                 { id: 'opt-3', text: '' },
             ],
-            correctAnswer: asString(itemAnswer.answer) || fallbackAnswers[index] || options[0]?.id || 'opt-1',
+            correctAnswer: asString(itemAnswer.answer)
+                || (Array.isArray(itemAnswer.answer)
+                    ? asString(itemAnswer.answer.find((token) => typeof token === 'string' && token.trim() !== ''))
+                    : '')
+                || fallbackAnswers[index]
+                || options[0]?.id
+                || 'opt-1',
             isExample,
             points: isExample ? 0 : asNumber(item.points, 1),
             questionNumber: asNumber(item.questionNumber, index + 1),
@@ -260,12 +268,14 @@ const reverseChooseTheCorrectAnswerGroup = (apiQuestion) => {
         };
     });
     const audioUrl = asString(asRecord(content.meta).audioUrl).trim();
+    const imageUrl = normalizeChooseAnswerGroupImageUrl(asRecord(content.meta).imageUrl);
     return {
         content: '',
         answer: {
             instruction: asString(asRecord(content.meta).instruction, 'Choose the correct answer.'),
             passage: asString(asRecord(content.meta).passage),
             ...(audioUrl ? { audioUrl } : {}),
+            ...(imageUrl !== undefined ? { imageUrl } : {}),
             items,
             explanation: asString(apiQuestion.explanation),
             points: items.reduce((total, item) => (item.isExample ? total : total + item.points), 0),
@@ -603,6 +613,102 @@ const reverseSimpleAnswer = (apiQuestion) => {
         },
     };
 };
+const reverseWordOrderingGroup = (apiQuestion) => {
+    const content = asRecord(apiQuestion.content);
+    const answer = readAnswer(apiQuestion);
+    const fallbackAnswers = asArray(answer.answer);
+    const items = asArray(content.items);
+    const meta = asRecord(content.meta);
+    const mappedItems = items.map((rawItem, index) => {
+        const item = asRecord(rawItem);
+        const itemContent = asRecord(item.content);
+        const itemAnswer = asRecord(item.correctAnswer);
+        const isExample = item.isExample === true;
+        const words = asArray(itemContent.words).map((token) => asString(token)).filter(Boolean);
+        const itemTokens = asArray(itemAnswer.answer).map((token) => asString(token)).filter(Boolean);
+        const fallbackTokens = asArray(fallbackAnswers[index]).map((token) => asString(token)).filter(Boolean);
+        return {
+            words,
+            answer: itemTokens.length ? itemTokens : fallbackTokens,
+            isExample,
+            points: isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+            questionNumber: typeof item.questionNumber === 'number' ? item.questionNumber : index + 1,
+        };
+    });
+    return {
+        content: '',
+        answer: {
+            instruction: asString(meta.instruction, 'Order the words.'),
+            items: mappedItems,
+            explanation: asString(apiQuestion.explanation),
+            points: mappedItems.reduce((total, item) => (item.isExample ? total : total + (item.points || 0)), 0),
+        },
+    };
+};
+const reverseMatchWordToPictureGroup = (apiQuestion) => {
+    const content = asRecord(apiQuestion.content);
+    const answer = readAnswer(apiQuestion);
+    const fallbackAnswers = asArray(answer.answer);
+    const items = asArray(content.items);
+    const meta = asRecord(content.meta);
+    const mappedItems = items.map((rawItem, index) => {
+        const item = asRecord(rawItem);
+        const itemContent = asRecord(item.content);
+        const itemAnswer = asRecord(item.correctAnswer);
+        const isExample = item.isExample === true;
+        return {
+            imageUrl: asString(itemContent.imageUrl),
+            correctAnswer: asString(itemAnswer.answer) || asString(fallbackAnswers[index]),
+            isExample,
+            points: isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+            questionNumber: typeof item.questionNumber === 'number' ? item.questionNumber : index + 1,
+        };
+    });
+    return {
+        content: '',
+        answer: {
+            instruction: asString(meta.instruction, 'Look and complete.'),
+            wordBank: asArray(meta.wordBank).map((word) => asString(word)).filter(Boolean),
+            items: mappedItems,
+            explanation: asString(apiQuestion.explanation),
+            points: mappedItems.reduce((total, item) => (item.isExample ? total : total + (item.points || 0)), 0),
+        },
+    };
+};
+const reverseMatchColumnsToMakeSentences = (apiQuestion) => {
+    const content = asRecord(apiQuestion.content);
+    const answer = readAnswer(apiQuestion);
+    const fallbackAnswers = asArray(answer.answer);
+    const items = asArray(content.items);
+    const columns = asArray(content.columns);
+    const meta = asRecord(content.meta);
+    const mappedItems = items.map((rawItem, index) => {
+        const item = asRecord(rawItem);
+        const itemContent = asRecord(item.content);
+        const itemAnswer = asRecord(asRecord(item.correctAnswer).answer ?? fallbackAnswers[index]);
+        const fragmentIds = asArray(itemAnswer.fragmentIds).map((id) => asString(id)).filter(Boolean);
+        const isExample = item.isExample === true;
+        return {
+            stemFragmentId: asString(itemContent.stemFragmentId) || fragmentIds[0] || '',
+            fragmentIds,
+            sentence: asString(itemAnswer.sentence),
+            isExample,
+            points: isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+            questionNumber: typeof item.questionNumber === 'number' ? item.questionNumber : index + 1,
+        };
+    });
+    return {
+        content: '',
+        answer: {
+            title: asString(meta.title),
+            instruction: asString(meta.instruction, 'Match the information to make sentences. You can use the same words more than once.'),
+            columns,
+            items: mappedItems,
+            explanation: asString(apiQuestion.explanation),
+            points: mappedItems.reduce((total, item) => (item.isExample ? total : total + (item.points || 0)), 0),
+        },
+    };
+};
 const handlers = {
     CHOOSE_THE_CORRECT_ANSWER: reverseChooseTheCorrectAnswer,
     CHOOSE_THE_CORRECT_ANSWER_GROUP: reverseChooseTheCorrectAnswerGroup,
@@ -653,6 +759,9 @@ const handlers = {
     GN_SPEAKING_INTERVIEW: reverseGroupPayload,
     CROSSWORD_PUZZLE: reverseCrosswordPuzzle,
     FIND_WORDS_IN_MATRIX: reverseFindWordsInMatrix,
+    MATCH_COLUMNS_TO_MAKE_SENTENCES: reverseMatchColumnsToMakeSentences,
+    MATCH_WORD_TO_PICTURE_GROUP: reverseMatchWordToPictureGroup,
+    WORD_ORDERING_GROUP: reverseWordOrderingGroup,
 };
 function reverseWriteAShortLetter(apiQuestion) {
     const content = asRecord(apiQuestion.content);

package/dist/shared/lib/utils/question-transform.js

@@ -47,6 +47,9 @@ import { transformGNSpeakingInterview } from '../../../components/questions/type
 import { transformWordFillStructuredForm } from '../../../components/questions/types/word-fill-structured-form/transform';
 import { transformCrosswordPuzzle } from '../../../components/questions/types/crossword-puzzle/transform';
 import { transformFindWordsInMatrix } from '../../../components/questions/types/find-words-in-matrix/transform';
+import { transformMatchColumnsToMakeSentences } from '../../../components/questions/types/match-columns-to-make-sentences/transform';
+import { transformMatchWordToPictureGroup } from '../../../components/questions/types/match-word-to-picture-group/transform';
+import { transformWordOrderingGroup } from '../../../components/questions/types/word-ordering-group/transform';
 // ─── Handler map ────────────────────────────────────────────────────────────
 const questionTransformHandlers = {
     // Look picture
@@ -100,6 +103,9 @@ const questionTransformHandlers = {
     WORD_FILL_STRUCTURED_FORM: transformWordFillStructuredForm,
     CROSSWORD_PUZZLE: transformCrosswordPuzzle,
     FIND_WORDS_IN_MATRIX: transformFindWordsInMatrix,
+    MATCH_COLUMNS_TO_MAKE_SENTENCES: transformMatchColumnsToMakeSentences,
+    MATCH_WORD_TO_PICTURE_GROUP: transformMatchWordToPictureGroup,
+    WORD_ORDERING_GROUP: transformWordOrderingGroup,
 };
 /**
  * Transform frontend question format to API format.