@tinyweb_dev/oe-exam-sdk 0.2.13 → 1.0.0

package/dist/components/questions/types/sort-words-into-categories/map-sort-words-into-categories-data.js

@@ -0,0 +1,153 @@
+import { SORT_WORDS_INTO_CATEGORIES_DEFAULT_INSTRUCTION } from '../../_shared/types/sort-words-into-categories.type';
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function asRecord(value) {
+    return isRecord(value) ? value : {};
+}
+function asString(value, fallback = '') {
+    return typeof value === 'string' ? value : fallback;
+}
+export function nextPrefixedId(prefix, existing) {
+    let n = existing.length + 1;
+    const used = new Set(existing);
+    while (used.has(`${prefix}${n}`))
+        n += 1;
+    return `${prefix}${n}`;
+}
+export function sumGradablePoints(words) {
+    return words.reduce((total, word) => {
+        if (word.isExample)
+            return total;
+        return total + (typeof word.points === 'number' ? word.points : 1);
+    }, 0);
+}
+export function buildPlacements(words) {
+    return words.map((word) => ({
+        wordId: word.id,
+        categoryId: word.categoryId || '',
+    }));
+}
+export function readPlacements(value) {
+    const source = Array.isArray(value)
+        ? value
+        : isRecord(value) && Array.isArray(value.placements)
+            ? value.placements
+            : null;
+    if (!source)
+        return undefined;
+    return source.map((item) => {
+        const record = asRecord(item);
+        return {
+            wordId: asString(record.wordId),
+            categoryId: asString(record.categoryId),
+        };
+    });
+}
+export function padPlacements(words, raw) {
+    const source = readPlacements(raw) ?? [];
+    const byWord = new Map();
+    source.forEach((item) => {
+        const record = asRecord(item);
+        const wordId = asString(record.wordId);
+        if (!wordId || byWord.has(wordId))
+            return;
+        byWord.set(wordId, asString(record.categoryId));
+    });
+    return words.map((word) => ({
+        wordId: word.id,
+        categoryId: byWord.get(word.id) ?? '',
+    }));
+}
+export function createEmptyCategory(existingIds) {
+    return {
+        id: nextPrefixedId('cat_', existingIds),
+        name: '',
+    };
+}
+export function createEmptyWord(existingIds, categoryId) {
+    return {
+        id: nextPrefixedId('w', existingIds),
+        text: '',
+        categoryId,
+        isExample: false,
+        points: 1,
+    };
+}
+function mapCategories(raw) {
+    if (!Array.isArray(raw))
+        return [];
+    return raw.map((item, index) => {
+        const record = asRecord(item);
+        return {
+            id: asString(record.id, `cat_${index + 1}`),
+            name: asString(record.name),
+        };
+    });
+}
+function mapWords(rawWords, placements) {
+    if (!Array.isArray(rawWords))
+        return [];
+    const placementMap = new Map(placements.map((item) => [item.wordId, item.categoryId]));
+    return rawWords.map((item, index) => {
+        const record = asRecord(item);
+        const id = asString(record.id, `w${index + 1}`);
+        const isExample = record.isExample === true;
+        return {
+            id,
+            text: asString(record.text),
+            categoryId: asString(record.categoryId) || placementMap.get(id) || '',
+            isExample,
+            points: isExample ? 0 : (typeof record.points === 'number' ? record.points : 1),
+        };
+    });
+}
+export function mapQuestionToSortWordsIntoCategoriesData(question) {
+    const source = asRecord(question);
+    const content = asRecord(source.content);
+    const answer = asRecord(source.answer);
+    const correctAnswer = asRecord(source.correctAnswer ?? source.correct_answer ?? answer.correctAnswer);
+    const explanation = asString(source.explanation) || asString(answer.explanation);
+    const meta = asRecord(content.meta ?? answer.meta);
+    const placements = padPlacements(Array.isArray(content.words)
+        ? content.words.map((item, index) => ({ id: asString(asRecord(item).id, `w${index + 1}`) }))
+        : Array.isArray(answer.words)
+            ? answer.words.map((item, index) => ({ id: asString(asRecord(item).id, `w${index + 1}`) }))
+            : [], correctAnswer.placements ?? answer.placements);
+    if (Array.isArray(content.words) || Array.isArray(content.categories)) {
+        const words = mapWords(content.words, placements);
+        return {
+            title: asString(meta.title) || asString(answer.title),
+            instruction: asString(meta.instruction) ||
+                asString(answer.instruction) ||
+                SORT_WORDS_INTO_CATEGORIES_DEFAULT_INSTRUCTION,
+            categories: mapCategories(content.categories),
+            words,
+            explanation,
+            points: sumGradablePoints(words),
+        };
+    }
+    if (Array.isArray(answer.words) || Array.isArray(answer.categories)) {
+        const words = mapWords(answer.words, placements);
+        return {
+            title: asString(answer.title),
+            instruction: asString(answer.instruction) || SORT_WORDS_INTO_CATEGORIES_DEFAULT_INSTRUCTION,
+            categories: mapCategories(answer.categories),
+            words,
+            explanation,
+            points: typeof answer.points === 'number' ? answer.points : sumGradablePoints(words),
+        };
+    }
+    const firstCategory = createEmptyCategory([]);
+    const secondCategory = createEmptyCategory([firstCategory.id]);
+    const firstWord = createEmptyWord([], firstCategory.id);
+    const secondWord = createEmptyWord([firstWord.id], secondCategory.id);
+    return {
+        title: '',
+        instruction: SORT_WORDS_INTO_CATEGORIES_DEFAULT_INSTRUCTION,
+        categories: [firstCategory, secondCategory],
+        words: [firstWord, secondWord],
+        explanation,
+        points: 2,
+    };
+}

package/dist/components/questions/types/sort-words-into-categories/register.d.ts

@@ -0,0 +1,3 @@
+import type { QuestionTypeRegistration } from '../../creator/question-type-registry';
+export { buildPlacements, createEmptyCategory, createEmptyWord, mapQuestionToSortWordsIntoCategoriesData, padPlacements, readPlacements, sumGradablePoints, } from './map-sort-words-into-categories-data';
+export declare const sortWordsIntoCategoriesRegistration: QuestionTypeRegistration;

package/dist/components/questions/types/sort-words-into-categories/register.js

@@ -0,0 +1,37 @@
+import { SortWordsIntoCategoriesCreator } from './SortWordsIntoCategoriesCreator';
+import { mapQuestionToSortWordsIntoCategoriesData } from './map-sort-words-into-categories-data';
+export { buildPlacements, createEmptyCategory, createEmptyWord, mapQuestionToSortWordsIntoCategoriesData, padPlacements, readPlacements, sumGradablePoints, } from './map-sort-words-into-categories-data';
+export const sortWordsIntoCategoriesRegistration = {
+    component: SortWordsIntoCategoriesCreator,
+    transformInitialData: (initialData) => mapQuestionToSortWordsIntoCategoriesData(initialData),
+    getExtraProps: (ctx) => ({
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+    }),
+    wrapOnSave: (data, ctx) => {
+        const payload = data;
+        return {
+            type: ctx.questionType,
+            content: ctx.state.content,
+            points: payload.points ?? ctx.state.points ?? 1,
+            level: ctx.state.level,
+            difficulty: ctx.state.difficulty,
+            skill: ctx.state.skill,
+            answer: payload,
+            explanation: payload.explanation || '',
+        };
+    },
+    wrapOnChange: (data, ctx) => {
+        const payload = data;
+        return {
+            type: ctx.questionType,
+            content: ctx.state.content,
+            points: payload.points ?? ctx.state.points ?? 1,
+            level: ctx.state.level,
+            difficulty: ctx.state.difficulty,
+            skill: ctx.state.skill,
+            answer: payload,
+            explanation: payload.explanation || '',
+        };
+    },
+};

package/dist/components/questions/types/sort-words-into-categories/transform.d.ts

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

package/dist/components/questions/types/sort-words-into-categories/transform.js

@@ -0,0 +1,33 @@
+import { SORT_WORDS_INTO_CATEGORIES_DEFAULT_INSTRUCTION } from '../../_shared/types/sort-words-into-categories.type';
+import { sumGradablePoints } from './map-sort-words-into-categories-data';
+export const transformSortWordsIntoCategories = (question) => {
+    const answerData = question.answer;
+    const categories = Array.isArray(answerData?.categories) ? answerData.categories : [];
+    const words = Array.isArray(answerData?.words) ? answerData.words : [];
+    const title = typeof answerData?.title === 'string' ? answerData.title.trim() : '';
+    return {
+        apiContent: {
+            meta: {
+                instruction: answerData?.instruction || SORT_WORDS_INTO_CATEGORIES_DEFAULT_INSTRUCTION,
+                ...(title ? { title } : {}),
+            },
+            categories: categories.map((item) => ({
+                id: item.id || '',
+                name: item.name || '',
+            })),
+            words: words.map((item) => ({
+                id: item.id || '',
+                text: item.text || '',
+                points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+                ...(item.isExample ? { isExample: true } : {}),
+            })),
+        },
+        apiCorrectAnswer: {
+            placements: words.map((item) => ({
+                wordId: item.id || '',
+                categoryId: item.categoryId || '',
+            })),
+        },
+        totalPoints: sumGradablePoints(words),
+    };
+};

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

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

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

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AnswerTheQuestionClient } from '../types/answer-the-question/AnswerTheQuestionClient';
+import { mapQuestionToAnswerTheQuestionData } from '../types/answer-the-question/map-answer-the-question-data';
+export function AnswerTheQuestionViewer({ question, isReviewMode = false, userAnswer, onSubmitAnswer, }) {
+    const questionData = mapQuestionToAnswerTheQuestionData(question);
+    return (_jsx(AnswerTheQuestionClient, { questionData: questionData, isReviewMode: isReviewMode, userAnswer: userAnswer, autoFillCorrectAnswers: isReviewMode && !userAnswer, explanation: question.explanation || questionData.explanation, onSubmit: isReviewMode ? undefined : onSubmitAnswer }));
+}

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

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

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)',