@tinyweb_dev/oe-exam-sdk 0.2.12 → 0.2.14

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

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ChooseThenAnswerGroupClient } from '../types/choose-then-answer-group/ChooseThenAnswerGroupClient';
+import { mapQuestionToChooseThenAnswerGroupData, parseStudentAnswer, } from '../types/choose-then-answer-group/map-choose-then-answer-group-data';
+function readStudentAnswers(value, itemCount) {
+    const record = value && typeof value === 'object' && !Array.isArray(value)
+        ? value
+        : null;
+    const raw = Array.isArray(record?.answer)
+        ? record.answer
+        : Array.isArray(value)
+            ? value
+            : null;
+    if (!raw)
+        return undefined;
+    return Array.from({ length: itemCount }, (_, index) => parseStudentAnswer(raw[index]));
+}
+export function ChooseThenAnswerGroupViewer({ question, isReviewMode = false, userAnswer, onSubmitAnswer, }) {
+    const questionData = mapQuestionToChooseThenAnswerGroupData(question);
+    const seed = questionData.items.map((item) => ({
+        optionId: item.isExample ? item.optionId : '',
+        text: '',
+    }));
+    const parsedUser = readStudentAnswers(userAnswer, questionData.items.length);
+    const questionKey = `${question.id}:${question.type}:${questionData.items.length}`;
+    const [cachedKey, setCachedKey] = useState(questionKey);
+    const [localAnswers, setLocalAnswers] = useState(() => parsedUser ?? seed);
+    if (cachedKey !== questionKey) {
+        setCachedKey(questionKey);
+        setLocalAnswers(parsedUser ?? seed);
+    }
+    const handleChange = (index, next) => {
+        const updated = localAnswers.map((item, itemIndex) => itemIndex === index ? next : item);
+        setLocalAnswers(updated);
+        onSubmitAnswer?.({ answer: updated });
+    };
+    return (_jsx(ChooseThenAnswerGroupClient, { questionData: questionData, isReviewMode: isReviewMode, userAnswers: isReviewMode && !parsedUser ? undefined : (parsedUser ?? localAnswers), onAnswerChange: isReviewMode ? undefined : handleChange }));
+}

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

@@ -21,6 +21,8 @@ import { FillMissingWordsInGridClient } from '../types/fill-missing-words-in-gri
 import { WordFillStructuredFormClient } from '../types/word-fill-structured-form/WordFillStructuredFormClient';
 import { CrosswordPuzzleClient } from '../types/crossword-puzzle/CrosswordPuzzleClient';
 import { FindWordsInMatrixClient } from '../types/find-words-in-matrix/FindWordsInMatrixClient';
+import { SortWordsIntoCategoriesViewer } from './SortWordsIntoCategoriesViewer';
+import { ChooseThenAnswerGroupViewer } from './ChooseThenAnswerGroupViewer';
 import { parseFillBlankStemLine } from '../_shared/utils/parseFillBlankStem';
 import { WordFillStructuredFormViewer } from './WordFillStructuredFormViewer';
 import { ChooseTheCorrectAnswerGroupViewer } from './ChooseTheCorrectAnswerGroupViewer';
@@ -31,6 +33,7 @@ import { MatchingWithLinesGroupViewer } from './MatchingWithLinesGroupViewer';
 import { CrossOutWordGroupViewer } from './CrossOutWordGroupViewer';
 import { SpontaneousQaGroupViewer } from './SpontaneousQaGroupViewer';
 import { WordOrderAndMatchGroupViewer } from './WordOrderAndMatchGroupViewer';
+import { AnswerTheQuestionViewer } from './AnswerTheQuestionViewer';
 import { AnswerTheQuestionGroupViewer } from './AnswerTheQuestionGroupViewer';
 import { MatchWordToPictureViewer } from './MatchWordToPictureViewer';
 import { MatchWordToPictureGroupViewer } from './MatchWordToPictureGroupViewer';
@@ -647,6 +650,8 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
                 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':
+                return (_jsx(AnswerTheQuestionViewer, { question: question, isReviewMode: isReviewMode, userAnswer: typeof userAnswer === 'string' ? userAnswer : undefined, onSubmitAnswer: onSubmitAnswer }));
             case 'ANSWER_THE_QUESTION_GROUP':
                 return (_jsx(AnswerTheQuestionGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer }));
             case 'SPONTANEOUS_QA_GROUP':
@@ -703,6 +708,10 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
                 return (_jsx(CrosswordPuzzleClient, { content: question.content, correctAnswer: question.answer, isReviewMode: isReviewMode, userAnswers: userAnswer }));
             case 'FIND_WORDS_IN_MATRIX':
                 return (_jsx(FindWordsInMatrixClient, { content: question.content, correctAnswer: question.answer, showSolution: isReviewMode }));
+            case 'SORT_WORDS_INTO_CATEGORIES':
+                return (_jsx(SortWordsIntoCategoriesViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer, onSubmitAnswer: onSubmitAnswer }));
+            case 'CHOOSE_THEN_ANSWER_GROUP':
+                return (_jsx(ChooseThenAnswerGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer, onSubmitAnswer: onSubmitAnswer }));
             default:
                 return _jsxs("div", { children: ["Lo\u1EA1i c\u00E2u h\u1ECFi kh\u00F4ng \u0111\u01B0\u1EE3c h\u1ED7 tr\u1EE3: ", question.type] });
         }
@@ -716,7 +725,8 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
         // WFSF and Crossword show title/instruction inside the client — no outer card label.
         if (question.type === 'WORD_FILL_STRUCTURED_FORM' ||
             question.type === 'CROSSWORD_PUZZLE' ||
-            question.type === 'MATCH_WORD_TO_PICTURE') {
+            question.type === 'MATCH_WORD_TO_PICTURE' ||
+            question.type === 'ANSWER_THE_QUESTION') {
             return null;
         }
         // Modern fill stems live entirely in the body; title is a short label.
@@ -741,7 +751,8 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
     // WFSF and Crossword already have their own bordered shell — avoid double Card border.
     if (question.type === 'WORD_FILL_STRUCTURED_FORM' ||
         question.type === 'CROSSWORD_PUZZLE' ||
-        question.type === 'MATCH_WORD_TO_PICTURE') {
+        question.type === 'MATCH_WORD_TO_PICTURE' ||
+        question.type === 'ANSWER_THE_QUESTION') {
         return (_jsx("div", { className: "space-y-4", children: renderQuestion() }));
     }
     return (_jsxs(Card, { children: [cardTitle ? (_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "flex items-center justify-between", children: [_jsx("span", { className: "min-w-0 pr-2 text-base font-semibold leading-snug", children: cardTitle }), _jsxs("span", { className: "shrink-0 text-sm font-normal text-gray-500", children: [question.points, " \u0111i\u1EC3m"] })] }) })) : null, _jsx(CardContent, { className: cardTitle ? 'space-y-4' : 'space-y-4 pt-4', children: renderQuestion() })] }));

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

@@ -0,0 +1,10 @@
+import type { Question } from '../../../shared/types/entities/question.types';
+import type { SortWordsPlacement } from '../_shared/types/sort-words-into-categories.type';
+export declare function SortWordsIntoCategoriesViewer({ question, isReviewMode, userAnswer, onSubmitAnswer, }: {
+    question: Question;
+    isReviewMode?: boolean;
+    userAnswer?: unknown;
+    onSubmitAnswer?: (answer: {
+        placements: SortWordsPlacement[];
+    }) => void;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { SortWordsIntoCategoriesClient } from '../types/sort-words-into-categories/SortWordsIntoCategoriesClient';
+import { mapQuestionToSortWordsIntoCategoriesData, readPlacements, } from '../types/sort-words-into-categories/map-sort-words-into-categories-data';
+export function SortWordsIntoCategoriesViewer({ question, isReviewMode = false, userAnswer, onSubmitAnswer, }) {
+    const questionData = mapQuestionToSortWordsIntoCategoriesData(question);
+    const parsedUser = readPlacements(userAnswer);
+    const questionKey = `${question.id}:${question.type}:${questionData.words.map((word) => word.id).join(',')}`;
+    const [cachedKey, setCachedKey] = useState(questionKey);
+    const [localPlacements, setLocalPlacements] = useState(() => parsedUser ?? questionData.words.map((word) => ({
+        wordId: word.id,
+        categoryId: word.isExample ? word.categoryId : '',
+    })));
+    if (cachedKey !== questionKey) {
+        setCachedKey(questionKey);
+        setLocalPlacements(parsedUser ?? questionData.words.map((word) => ({
+            wordId: word.id,
+            categoryId: word.isExample ? word.categoryId : '',
+        })));
+    }
+    const handleChange = (next) => {
+        setLocalPlacements(next);
+        onSubmitAnswer?.({ placements: next });
+    };
+    return (_jsx(SortWordsIntoCategoriesClient, { questionData: questionData, isReviewMode: isReviewMode, userPlacements: isReviewMode && !parsedUser ? undefined : (parsedUser ?? localPlacements), onPlacementsChange: isReviewMode ? undefined : handleChange }));
+}

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

@@ -9,8 +9,11 @@ export { MatchingWithLinesGroupViewer } from './MatchingWithLinesGroupViewer';
 export { CrossOutWordGroupViewer } from './CrossOutWordGroupViewer';
 export { SpontaneousQaGroupViewer } from './SpontaneousQaGroupViewer';
 export { WordOrderAndMatchGroupViewer } from './WordOrderAndMatchGroupViewer';
+export { AnswerTheQuestionViewer } from './AnswerTheQuestionViewer';
 export { AnswerTheQuestionGroupViewer } from './AnswerTheQuestionGroupViewer';
 export { MatchWordToPictureViewer } from './MatchWordToPictureViewer';
 export { MatchWordToPictureGroupViewer } from './MatchWordToPictureGroupViewer';
 export { MatchColumnsToMakeSentencesViewer } from './MatchColumnsToMakeSentencesViewer';
 export { WordOrderingGroupViewer } from './WordOrderingGroupViewer';
+export { SortWordsIntoCategoriesViewer } from './SortWordsIntoCategoriesViewer';
+export { ChooseThenAnswerGroupViewer } from './ChooseThenAnswerGroupViewer';

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

@@ -9,8 +9,11 @@ export { MatchingWithLinesGroupViewer } from './MatchingWithLinesGroupViewer';
 export { CrossOutWordGroupViewer } from './CrossOutWordGroupViewer';
 export { SpontaneousQaGroupViewer } from './SpontaneousQaGroupViewer';
 export { WordOrderAndMatchGroupViewer } from './WordOrderAndMatchGroupViewer';
+export { AnswerTheQuestionViewer } from './AnswerTheQuestionViewer';
 export { AnswerTheQuestionGroupViewer } from './AnswerTheQuestionGroupViewer';
 export { MatchWordToPictureViewer } from './MatchWordToPictureViewer';
 export { MatchWordToPictureGroupViewer } from './MatchWordToPictureGroupViewer';
 export { MatchColumnsToMakeSentencesViewer } from './MatchColumnsToMakeSentencesViewer';
 export { WordOrderingGroupViewer } from './WordOrderingGroupViewer';
+export { SortWordsIntoCategoriesViewer } from './SortWordsIntoCategoriesViewer';
+export { ChooseThenAnswerGroupViewer } from './ChooseThenAnswerGroupViewer';

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

@@ -11,9 +11,10 @@ interface ReviewAnswerTheQuestionGroupRendererProps {
     questionCount: number;
     instruction: string;
     groupContent?: string;
+    imageUrl?: string | string[];
     questions: AnswerTheQuestionQuestion[];
     answers: Record<string, string>;
     itemMeta: Record<string, ReviewAnswerTheQuestionGroupItemMeta>;
 }
-export declare function ReviewAnswerTheQuestionGroupRenderer({ partNumber, partName, questionCount, instruction, groupContent, questions, answers, itemMeta, }: ReviewAnswerTheQuestionGroupRendererProps): import("react").JSX.Element;
+export declare function ReviewAnswerTheQuestionGroupRenderer({ partNumber, partName, questionCount, instruction, groupContent, imageUrl, questions, answers, itemMeta, }: ReviewAnswerTheQuestionGroupRendererProps): import("react").JSX.Element;
 export {};

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

@@ -1,10 +1,19 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BookOpen, Check, Sparkles, Star, X } from 'lucide-react';
+import { ResolvedImage } from '../../../components/common/ResolvedImage';
 import CambridgeYlePartBanner from '../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
 import CambridgeYleInstructionBanner from '../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
-export function ReviewAnswerTheQuestionGroupRenderer({ partNumber, partName, questionCount, instruction, groupContent, questions, answers, itemMeta, }) {
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, partName: partName, questionCount: questionCount }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction }), groupContent && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-white p-5 shadow-xs", children: [_jsxs("div", { className: "mb-2.5 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-indigo-700", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: "B\u00E0i \u0111\u1ECDc (Reading Passage)" })] }), _jsx("div", { className: "prose prose-sm max-w-none leading-relaxed text-gray-800", dangerouslySetInnerHTML: { __html: groupContent } })] })), questions.map((question) => {
+import { toAnswerTheQuestionImageUrls } from '../../questions/_shared/types/answer-the-question.type';
+function ReviewImages({ imageUrl, alt, }) {
+    const urls = toAnswerTheQuestionImageUrls(imageUrl);
+    if (urls.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: urls.map((url, imageIndex) => (_jsx(ResolvedImage, { src: url, alt: `${alt} ${imageIndex + 1}`, className: "max-h-56 w-auto rounded-lg object-contain" }, `${alt}-${imageIndex}`))) }));
+}
+export function ReviewAnswerTheQuestionGroupRenderer({ partNumber, partName, questionCount, instruction, groupContent, imageUrl, questions, answers, itemMeta, }) {
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, partName: partName, questionCount: questionCount }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction }), _jsx(ReviewImages, { imageUrl: imageUrl, alt: "Shared illustration" }), groupContent && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-white p-5 shadow-xs", children: [_jsxs("div", { className: "mb-2.5 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-indigo-700", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: "B\u00E0i \u0111\u1ECDc (Reading Passage)" })] }), _jsx("div", { className: "prose prose-sm max-w-none leading-relaxed text-gray-800", dangerouslySetInnerHTML: { __html: groupContent } })] })), questions.map((question) => {
                 const meta = itemMeta[question.id];
                 const studentAnswer = answers[question.id] || '';
                 const expectedAnswers = meta?.expectedAnswers || [];
@@ -16,7 +25,7 @@ export function ReviewAnswerTheQuestionGroupRenderer({ partNumber, partName, que
                                                     ? 'bg-green-500'
                                                     : isCorrect === false
                                                         ? 'bg-red-500'
-                                                        : 'bg-blue-500'}`, children: question.questionNumber }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", question.questionNumber] }), question.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] })), _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-violet-100 px-2 py-0.5 text-xs font-semibold text-violet-700", children: [_jsx(Sparkles, { className: "h-3 w-3" }), "AI"] })] }), isCorrect === true && _jsx(Check, { className: "h-4 w-4 text-green-600" }), isCorrect === false && _jsx(X, { className: "h-4 w-4 text-red-600" })] }), _jsxs("div", { className: "space-y-3 p-4", children: [_jsx("p", { className: "text-sm font-semibold leading-relaxed text-gray-800", children: question.question }), _jsx("div", { className: `rounded-lg border px-3 py-2 text-sm ${isCorrect === true
+                                                        : 'bg-blue-500'}`, children: question.questionNumber }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", question.questionNumber] }), question.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] })), _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-violet-100 px-2 py-0.5 text-xs font-semibold text-violet-700", children: [_jsx(Sparkles, { className: "h-3 w-3" }), "AI"] })] }), isCorrect === true && _jsx(Check, { className: "h-4 w-4 text-green-600" }), isCorrect === false && _jsx(X, { className: "h-4 w-4 text-red-600" })] }), _jsxs("div", { className: "space-y-3 p-4", children: [_jsx(ReviewImages, { imageUrl: question.imageUrl, alt: `Hình ảnh câu ${question.questionNumber}` }), _jsx("p", { className: "text-sm font-semibold leading-relaxed text-gray-800", children: question.question }), _jsx("div", { className: `rounded-lg border px-3 py-2 text-sm ${isCorrect === true
                                         ? 'border-green-200 bg-green-50 text-green-800'
                                         : isCorrect === false
                                             ? 'border-red-200 bg-red-50 text-red-800'

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

@@ -115,7 +115,7 @@ export function renderDedicatedReviewBody(ctx) {
                         feedbackVi: typeof feedback.vi === 'string' ? feedback.vi : undefined,
                     }];
             }));
-            return (_jsx(ReviewAnswerTheQuestionGroupRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, groupContent: data.groupContent, questions: data.questions, answers: answers, itemMeta: itemMeta }));
+            return (_jsx(ReviewAnswerTheQuestionGroupRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, groupContent: data.groupContent, imageUrl: data.imageUrl, questions: data.questions, answers: answers, itemMeta: itemMeta }));
         }
         case 'SPONTANEOUS_QA_GROUP': {
             const parent = questions[0];

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, 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 { MoversAnswerTheQuestionRenderer, MoversFillWordHintRenderer, MoversGridFillRenderer, MoversLabelThePictureRenderer, MoversMatchByWritingAnswerRenderer, MoversMatchWordToPictureRenderer, MoversPictureChooseRenderer, MoversPictureFillBlankChooseRenderer, MoversReadingPassageRenderer, MoversTrueFalseRenderer, MoversTrueFalseCorrectGroupRenderer, MoversFillInBlankGroupRenderer, MoversMatchingWithLinesGroupRenderer, MoversCrossOutWordGroupRenderer, MoversWordFillParagraphRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderingRenderer, MoversWordOrderingGroupRenderer, MoversWriteSentencesRenderer, MoversWritingRenderer, MoversCrosswordPuzzleRenderer, ChooseThenAnswerGroupRenderer, SortWordsIntoCategoriesRenderer, } 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, transformChooseThenAnswerGroup, transformSortWordsIntoCategories, } 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;
@@ -110,6 +110,28 @@ export function renderMoversReviewBody(ctx) {
             });
             return (_jsx(MoversCrossOutWordGroupRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions || data.instruction, questionCount: questionCount, questions: data.questions, answers: answers, onAnswerChange: handleAnswerChange, isReviewMode: true, correctAnswerMap: correctAnswerMap }));
         }
+        case 'CHOOSE_THEN_ANSWER_GROUP': {
+            const data = transformChooseThenAnswerGroup(apiQuestions);
+            const gradableCount = data.questions.filter((item) => !item.isExample).length;
+            return (_jsx(ChooseThenAnswerGroupRenderer, { partNumber: partNo, partName: part.name, questionCount: gradableCount || questionCount, instruction: part.instructions || data.instruction, data: data, answers: answers, onAnswerChange: () => undefined, isReviewMode: true }));
+        }
+        case 'SORT_WORDS_INTO_CATEGORIES': {
+            const data = transformSortWordsIntoCategories(apiQuestions);
+            const firstQuestion = apiQuestions[0];
+            const stored = firstQuestion?.id ? answers[firstQuestion.id] : undefined;
+            const storedRecord = stored && typeof stored === 'object' && !Array.isArray(stored)
+                ? stored
+                : undefined;
+            const storedPlacements = Array.isArray(storedRecord?.placements)
+                ? storedRecord.placements
+                : Array.isArray(stored)
+                    ? stored
+                    : [];
+            const gradableCount = data.words.filter((word) => !word.isExample).length;
+            return (_jsx(SortWordsIntoCategoriesRenderer, { partNumber: partNo, partName: part.name, questionCount: gradableCount || questionCount, instruction: part.instructions || data.instruction, data: data, answers: {
+                    [data.questionId]: { placements: storedPlacements },
+                }, onAnswerChange: () => undefined, isReviewMode: true }));
+        }
         case 'TRUE_FALSE_CORRECT_GROUP': {
             const data = transformTrueFalseCorrectGroup(apiQuestions);
             const correctAnswerMap = {};

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

@@ -9,6 +9,7 @@ const FLATTENED_ANSWER_TYPES = new Set([
     'ANSWER_THE_QUESTION_GROUP',
     'CROSS_OUT_WORD_GROUP',
     'TRUE_FALSE_CORRECT_GROUP',
+    'CHOOSE_THEN_ANSWER_GROUP',
     'FILL_IN_BLANK_GROUP',
     'MATCHING_WITH_LINES_GROUP',
 ]);
@@ -186,6 +187,26 @@ function transformStudentAnswer(questionId, questionType, value) {
             normalizeCrossOutWordGroupAnswer(item),
         ]));
     }
+    if (questionType === 'CHOOSE_THEN_ANSWER_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)) {
+                const obj = item;
+                return [
+                    `${questionId}-item-${index}`,
+                    {
+                        optionId: typeof obj.optionId === 'string' ? obj.optionId : '',
+                        text: typeof obj.text === 'string' ? obj.text : '',
+                    },
+                ];
+            }
+            return [`${questionId}-item-${index}`, { optionId: '', text: '' }];
+        }));
+    }
     if (questionType === 'TRUE_FALSE_CORRECT_GROUP') {
         const answer = Array.isArray(record.answer)
             ? record.answer
@@ -282,6 +303,13 @@ function transformStudentAnswer(questionId, questionType, value) {
     }
     if (questionType === 'READ_AND_COLOR_OBJECTS' || questionType === 'IMAGE_OBJECT_MATCHING' || questionType === 'CROSSWORD_PUZZLE')
         return record.cells ?? record.answers ?? value;
+    if (questionType === 'SORT_WORDS_INTO_CATEGORIES') {
+        if (Array.isArray(record.placements))
+            return record;
+        if (Array.isArray(value))
+            return { placements: value };
+        return value;
+    }
     if (questionType === 'WRITE_A_SHORT_LETTER')
         return typeof value === 'string' ? value : record.answer ?? '';
     return record.answer ?? value;

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, MatchColumnsToMakeSentencesViewer, WordOrderingGroupViewer, } from './components/questions/viewer';
+export { QuestionViewer, QuestionGroupViewer, WordFillStructuredFormViewer, ChooseTheCorrectAnswerGroupViewer, TrueFalseGroupViewer, TrueFalseCorrectGroupViewer, FillInBlankGroupViewer, MatchingWithLinesGroupViewer, CrossOutWordGroupViewer, SpontaneousQaGroupViewer, WordOrderAndMatchGroupViewer, AnswerTheQuestionGroupViewer, MatchWordToPictureViewer, MatchWordToPictureGroupViewer, MatchColumnsToMakeSentencesViewer, WordOrderingGroupViewer, SortWordsIntoCategoriesViewer, ChooseThenAnswerGroupViewer, } from './components/questions/viewer';

package/dist/index.js

@@ -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, MatchColumnsToMakeSentencesViewer, WordOrderingGroupViewer, } from './components/questions/viewer';
+export { QuestionViewer, QuestionGroupViewer, WordFillStructuredFormViewer, ChooseTheCorrectAnswerGroupViewer, TrueFalseGroupViewer, TrueFalseCorrectGroupViewer, FillInBlankGroupViewer, MatchingWithLinesGroupViewer, CrossOutWordGroupViewer, SpontaneousQaGroupViewer, WordOrderAndMatchGroupViewer, AnswerTheQuestionGroupViewer, MatchWordToPictureViewer, MatchWordToPictureGroupViewer, MatchColumnsToMakeSentencesViewer, WordOrderingGroupViewer, SortWordsIntoCategoriesViewer, ChooseThenAnswerGroupViewer, } from './components/questions/viewer';

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

@@ -84,6 +84,8 @@ export const QUESTION_TYPE_SKILLS = {
     'WORD_FILL_STRUCTURED_FORM': SkillEnum.READING,
     'CROSSWORD_PUZZLE': SkillEnum.READING,
     'FIND_WORDS_IN_MATRIX': SkillEnum.READING,
+    'SORT_WORDS_INTO_CATEGORIES': SkillEnum.READING,
+    'CHOOSE_THEN_ANSWER_GROUP': SkillEnum.READING,
     'MATCH_COLUMNS_TO_MAKE_SENTENCES': SkillEnum.READING,
     'MATCH_WORD_TO_PICTURE_GROUP': SkillEnum.READING,
     'WORD_ORDERING_GROUP': SkillEnum.READING,
@@ -219,6 +221,8 @@ 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)',
+    'SORT_WORDS_INTO_CATEGORIES': 'Sắp xếp từ vào nhóm',
+    'CHOOSE_THEN_ANSWER_GROUP': 'Chọn đáp án rồi trả lời',
     '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)',

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

@@ -1,3 +1,5 @@
+import { fromFillInBlankImageUrls, toFillInBlankImageUrls, } from '../../../components/questions/types/fill-in-blank-group/blank-utils';
+import { fromMatchWordToPictureImageUrls } from '../../../components/questions/_shared/types/match-word-to-picture-group.type';
 const isRecord = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
 const asRecord = (value) => isRecord(value) ? value : {};
 const asArray = (value) => Array.isArray(value) ? value : [];
@@ -301,19 +303,30 @@ const reverseAnswerTheQuestionGroup = (apiQuestion) => {
             .filter((value) => value !== '');
         const expectedAnswers = nested.length > 0 ? nested : (fallbackExpected.length > 0 ? fallbackExpected : ['']);
         const isExample = item.isExample === true;
+        const imageUrl = normalizeChooseAnswerGroupImageUrl(itemContent.imageUrl);
         return {
             question: asString(itemContent.question),
             expectedAnswers,
             isExample,
             points: isExample ? 0 : asNumber(item.points, 1),
             questionNumber: asNumber(item.questionNumber, index + 1),
+            ...(imageUrl !== undefined ? { imageUrl } : {}),
         };
     });
+    const meta = asRecord(content.meta);
+    const audioUrl = asString(meta.audioUrl).trim();
+    const imageUrl = asArray(meta.imageUrl)
+        .filter((value) => typeof value === 'string')
+        .map((value) => value.trim())
+        .filter((value) => value !== '');
+    const singleImage = asString(meta.imageUrl).trim();
     return {
         content: '',
         answer: {
-            instruction: asString(asRecord(content.meta).instruction, 'Read the text again and answer the questions.'),
-            passage: asString(asRecord(content.meta).passage),
+            instruction: asString(meta.instruction, 'Read the text again and answer the questions.'),
+            passage: asString(meta.passage),
+            ...(audioUrl ? { audioUrl } : {}),
+            ...(imageUrl.length ? { imageUrl } : (singleImage ? { imageUrl: [singleImage] } : {})),
             items,
             explanation: asString(apiQuestion.explanation),
             points: items.reduce((total, item) => (item.isExample ? total : total + item.points), 0),
@@ -383,6 +396,45 @@ const reverseTrueFalseCorrectGroup = (apiQuestion) => {
         },
     };
 };
+const reverseChooseThenAnswerGroup = (apiQuestion) => {
+    const content = asRecord(apiQuestion.content);
+    const answer = readAnswer(apiQuestion);
+    const fallbackAnswers = asArray(answer.answer);
+    const meta = asRecord(content.meta);
+    const items = asArray(content.items).map((rawItem, index) => {
+        const item = asRecord(rawItem);
+        const itemContent = asRecord(item.content);
+        const itemAnswer = asRecord(asRecord(item.correctAnswer).answer);
+        const fallback = asRecord(fallbackAnswers[index]);
+        const rawAnswer = Object.keys(itemAnswer).length > 0 ? itemAnswer : fallback;
+        const isExample = item.isExample === true;
+        const options = asArray(itemContent.options).map((rawOption, optionIndex) => {
+            const option = asRecord(rawOption);
+            return {
+                id: asString(option.id, `opt-${optionIndex + 1}`),
+                text: asString(option.text),
+            };
+        });
+        return {
+            question: asString(itemContent.question),
+            options,
+            optionId: asString(rawAnswer.optionId) || options[0]?.id || '',
+            isExample,
+            points: isExample ? 0 : asNumber(item.points, 1),
+            questionNumber: asNumber(item.questionNumber, index + 1),
+        };
+    });
+    return {
+        content: '',
+        answer: {
+            title: asString(meta.title),
+            instruction: asString(meta.instruction, 'Read and choose. Then answer for you.'),
+            items,
+            explanation: asString(apiQuestion.explanation),
+            points: items.reduce((total, item) => (item.isExample ? total : total + item.points), 0),
+        },
+    };
+};
 const reverseFillInBlankGroup = (apiQuestion) => {
     const content = asRecord(apiQuestion.content);
     const answer = readAnswer(apiQuestion);
@@ -402,27 +454,34 @@ const reverseFillInBlankGroup = (apiQuestion) => {
                 : [String(blank ?? '').trim()].filter(Boolean);
             return alts.length > 0 ? alts : [''];
         });
+        const wordBank = asArray(itemContent.wordBank);
         return {
             question,
             answers: answers.length > 0 ? answers : [['']],
             caseSensitive: itemAnswer.caseSensitive === true || fallback.caseSensitive === true,
-            imageUrl: asString(itemContent.imageUrl),
+            imageUrl: fromFillInBlankImageUrls(toFillInBlankImageUrls(itemContent.imageUrl)),
             audioUrl: asString(itemContent.audioUrl),
             showHints: itemContent.showHints === true,
             hints: asArray(itemContent.hints).map((hint) => String(hint ?? '').trim()).filter(Boolean),
+            ...(wordBank.length > 0 ? { wordBank } : {}),
             isExample,
             points: isExample ? 0 : asNumber(item.points, 1),
             questionNumber: asNumber(item.questionNumber, index + 1),
         };
     });
+    const groupWordBank = asArray(meta.wordBank);
+    const viewMode = asString(meta.viewMode) === 'WITH_OPTIONS' ? 'WITH_OPTIONS' : undefined;
     return {
         content: '',
         answer: {
             instruction: asString(meta.instruction, 'Complete the sentences.'),
+            passage: asString(meta.passage),
             audioUrl: asString(meta.audioUrl),
-            imageUrl: asString(meta.imageUrl),
+            imageUrl: fromFillInBlankImageUrls(toFillInBlankImageUrls(meta.imageUrl)),
             showHints: meta.showHints === true,
             hints: asArray(meta.hints).map((hint) => String(hint ?? '').trim()).filter(Boolean),
+            ...(viewMode ? { viewMode } : {}),
+            ...(groupWordBank.length > 0 ? { wordBank: groupWordBank } : {}),
             items,
             explanation: asString(apiQuestion.explanation),
             points: items.reduce((total, item) => (item.isExample ? total : total + item.points), 0),
@@ -436,9 +495,12 @@ const reverseMatchingWithLinesGroup = (apiQuestion) => {
     const meta = asRecord(content.meta);
     const rightItems = asArray(content.rightItems).map((raw, index) => {
         const item = asRecord(raw);
+        const imageUrl = asString(item.imageUrl).trim();
+        const text = asString(item.text).trim();
         return {
             id: asString(item.id, `r${index + 1}`),
-            text: asString(item.text),
+            ...(text ? { text } : {}),
+            ...(imageUrl ? { imageUrl } : {}),
         };
     });
     const items = asArray(content.items).map((rawItem, index) => {
@@ -449,6 +511,7 @@ const reverseMatchingWithLinesGroup = (apiQuestion) => {
         const isExample = item.isExample === true;
         return {
             imageUrl: asString(itemContent.imageUrl),
+            text: asString(itemContent.text),
             correctAnswer: asString(itemAnswer.answer, typeof fallback === 'string' ? fallback : ''),
             isExample,
             points: isExample ? 0 : asNumber(item.points, 1),
@@ -460,6 +523,9 @@ const reverseMatchingWithLinesGroup = (apiQuestion) => {
         answer: {
             title: asString(meta.title),
             instruction: asString(meta.instruction, 'Look and match.'),
+            ...(asString(meta.passage).trim() ? { passage: asString(meta.passage).trim() } : {}),
+            ...(asString(meta.audioUrl).trim() ? { audioUrl: asString(meta.audioUrl).trim() } : {}),
+            ...(asString(meta.imageUrl).trim() ? { imageUrl: asString(meta.imageUrl).trim() } : {}),
             rightItems,
             items,
             explanation: asString(apiQuestion.explanation),
@@ -658,8 +724,9 @@ const reverseMatchWordToPictureGroup = (apiQuestion) => {
         const itemContent = asRecord(item.content);
         const itemAnswer = asRecord(item.correctAnswer);
         const isExample = item.isExample === true;
+        const itemImageUrl = fromMatchWordToPictureImageUrls(itemContent.imageUrl ?? item.imageUrl);
         return {
-            imageUrl: asString(itemContent.imageUrl),
+            ...(itemImageUrl ? { imageUrl: itemImageUrl } : {}),
             correctAnswer: asString(itemAnswer.answer) || asString(fallbackAnswers[index]),
             isExample,
             points: isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
@@ -669,7 +736,13 @@ const reverseMatchWordToPictureGroup = (apiQuestion) => {
     return {
         content: '',
         answer: {
+            ...(asString(meta.title).trim() ? { title: asString(meta.title).trim() } : {}),
             instruction: asString(meta.instruction, 'Look and complete.'),
+            ...(asString(meta.passage).trim() ? { passage: asString(meta.passage).trim() } : {}),
+            ...(asString(meta.audioUrl).trim() ? { audioUrl: asString(meta.audioUrl).trim() } : {}),
+            ...(fromMatchWordToPictureImageUrls(meta.imageUrl)
+                ? { imageUrl: fromMatchWordToPictureImageUrls(meta.imageUrl) }
+                : {}),
             wordBank: asArray(meta.wordBank).map((word) => asString(word)).filter(Boolean),
             items: mappedItems,
             explanation: asString(apiQuestion.explanation),
@@ -717,6 +790,7 @@ const handlers = {
     ANSWER_THE_QUESTION_GROUP: reverseAnswerTheQuestionGroup,
     TRUE_FALSE_GROUP: reverseTrueFalseGroup,
     TRUE_FALSE_CORRECT_GROUP: reverseTrueFalseCorrectGroup,
+    CHOOSE_THEN_ANSWER_GROUP: reverseChooseThenAnswerGroup,
     FILL_IN_BLANK_GROUP: reverseFillInBlankGroup,
     MATCHING_WITH_LINES_GROUP: reverseMatchingWithLinesGroup,
     CROSS_OUT_WORD_GROUP: reverseCrossOutWordGroup,
@@ -761,6 +835,7 @@ const handlers = {
     GN_SPEAKING_INTERVIEW: reverseGroupPayload,
     CROSSWORD_PUZZLE: reverseCrosswordPuzzle,
     FIND_WORDS_IN_MATRIX: reverseFindWordsInMatrix,
+    SORT_WORDS_INTO_CATEGORIES: reverseSortWordsIntoCategories,
     MATCH_COLUMNS_TO_MAKE_SENTENCES: reverseMatchColumnsToMakeSentences,
     MATCH_WORD_TO_PICTURE_GROUP: reverseMatchWordToPictureGroup,
     WORD_ORDERING_GROUP: reverseWordOrderingGroup,
@@ -935,6 +1010,51 @@ function reverseFindWordsInMatrix(apiQuestion) {
         },
     };
 }
+function reverseSortWordsIntoCategories(apiQuestion) {
+    const apiContent = asRecord(apiQuestion.content);
+    const apiAnswer = readAnswer(apiQuestion);
+    const meta = asRecord(apiContent.meta);
+    const categories = asArray(apiContent.categories);
+    const words = asArray(apiContent.words);
+    const placements = asArray(apiAnswer.placements);
+    const placementMap = new Map();
+    placements.forEach((item) => {
+        const record = asRecord(item);
+        const wordId = asString(record.wordId);
+        if (wordId && !placementMap.has(wordId)) {
+            placementMap.set(wordId, asString(record.categoryId));
+        }
+    });
+    const mappedWords = words.map((raw, index) => {
+        const item = asRecord(raw);
+        const id = asString(item.id, `w${index + 1}`);
+        const isExample = item.isExample === true;
+        return {
+            id,
+            text: asString(item.text),
+            categoryId: placementMap.get(id) || '',
+            isExample,
+            points: isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+        };
+    });
+    return {
+        content: '',
+        answer: {
+            title: asString(meta.title),
+            instruction: asString(meta.instruction, 'Read and sort the words.'),
+            categories: categories.map((raw, index) => {
+                const item = asRecord(raw);
+                return {
+                    id: asString(item.id, `cat_${index + 1}`),
+                    name: asString(item.name),
+                };
+            }),
+            words: mappedWords,
+            explanation: asString(apiQuestion.explanation),
+            points: mappedWords.reduce((total, word) => (word.isExample ? total : total + (word.points || 0)), 0),
+        },
+    };
+}
 export function transformApiQuestionToFrontend(apiQuestion) {
     const questionType = String(apiQuestion.questionType ?? apiQuestion.question_type ?? apiQuestion.type ?? '');
     const handlerResult = (handlers[questionType] ?? defaultReverse)(apiQuestion);

package/dist/shared/lib/utils/question-transform-types.d.ts

@@ -312,7 +312,7 @@ export interface AnswerTheQuestionAnswerData {
     groupNumber?: number;
     isExample?: boolean;
     suggestedAnswers?: string[];
-    imageUrl?: string;
+    imageUrl?: string | string[];
     title?: string;
     subtitle?: string;
     groupContent?: string;

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

@@ -47,6 +47,8 @@ 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 { transformSortWordsIntoCategories } from '../../../components/questions/types/sort-words-into-categories/transform';
+import { transformChooseThenAnswerGroup } from '../../../components/questions/types/choose-then-answer-group/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';
@@ -103,6 +105,8 @@ const questionTransformHandlers = {
     WORD_FILL_STRUCTURED_FORM: transformWordFillStructuredForm,
     CROSSWORD_PUZZLE: transformCrosswordPuzzle,
     FIND_WORDS_IN_MATRIX: transformFindWordsInMatrix,
+    SORT_WORDS_INTO_CATEGORIES: transformSortWordsIntoCategories,
+    CHOOSE_THEN_ANSWER_GROUP: transformChooseThenAnswerGroup,
     MATCH_COLUMNS_TO_MAKE_SENTENCES: transformMatchColumnsToMakeSentences,
     MATCH_WORD_TO_PICTURE_GROUP: transformMatchWordToPictureGroup,
     WORD_ORDERING_GROUP: transformWordOrderingGroup,