@tinyweb_dev/oe-exam-sdk 0.2.13 → 1.0.0

package/README.md

@@ -419,6 +419,18 @@ npm run dev
 
 ## Publish
 
+CI release uses `.github/workflows/release_sdk.yml` on tags `sdk-v*` with
+**npm Trusted Publishing (OIDC)** (no long-lived `NPM_TOKEN`).
+
+Configure Trusted Publisher on npmjs.com for `@tinyweb_dev/oe-exam-sdk`:
+
+- Organization or user: `ocean-edu`
+- Repository: `oe-exam`
+- Workflow filename: `release_sdk.yml`
+- Allowed actions: `npm publish`
+
+Manual local publish (maintainer + 2FA):
+
 ```bash
 cd sdk
 npm version patch

package/dist/components/exams/take/ExamTakingPageContainer.js

@@ -643,6 +643,12 @@ function ExamTakingPageContainerInner({ roomId, api, onNavigate, resultPath = (a
                         map.set(`${question.id}-item-${index}`, question.id);
                     });
                 }
+                if (part.questionType === 'CHOOSE_THEN_ANSWER_GROUP' &&
+                    Array.isArray(content?.items)) {
+                    content.items.forEach((_, index) => {
+                        map.set(`${question.id}-item-${index}`, question.id);
+                    });
+                }
             });
         });
         return map;

package/dist/components/exams/take/components/QuestionRenderer.js

@@ -8,9 +8,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * 2. Transforms data to renderer-specific props
  * 3. Renders the correct component for each question type
  */
-import { MoversListenAndWriteRenderer, MoversChooseBestAnswerRenderer, MoversChooseAdjectiveRenderer, MoversWritingRenderer, MoversColoringRenderer, MoversPictureChooseRenderer, MoversPictureFillBlankChooseRenderer, MoversReadingPassageRenderer, MoversLabelThePictureRenderer, MoversFillWordHintRenderer, MoversGridFillRenderer, MoversTrueFalseRenderer, MoversTrueFalseCorrectGroupRenderer, MoversFillInBlankGroupRenderer, MoversCrossOutWordGroupRenderer, MoversAnswerTheQuestionRenderer, MoversWriteSentencesRenderer, MoversWordOrderingRenderer, MoversWordOrderingGroupRenderer, MoversWordFillParagraphRenderer, MoversMatchByWritingAnswerRenderer, MoversMatchWordToPictureRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderAndMatchGroupRenderer, MoversMatchingWithLinesGroupRenderer, MoversCrosswordPuzzleRenderer, FindWordsInMatrixRenderer, } from './question-renderers';
+import { MoversListenAndWriteRenderer, MoversChooseBestAnswerRenderer, MoversChooseAdjectiveRenderer, MoversWritingRenderer, MoversColoringRenderer, MoversPictureChooseRenderer, MoversPictureFillBlankChooseRenderer, MoversReadingPassageRenderer, MoversLabelThePictureRenderer, MoversFillWordHintRenderer, MoversGridFillRenderer, MoversTrueFalseRenderer, MoversTrueFalseCorrectGroupRenderer, MoversFillInBlankGroupRenderer, MoversCrossOutWordGroupRenderer, MoversAnswerTheQuestionRenderer, MoversWriteSentencesRenderer, MoversWordOrderingRenderer, MoversWordOrderingGroupRenderer, MoversWordFillParagraphRenderer, MoversMatchByWritingAnswerRenderer, MoversMatchWordToPictureRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderAndMatchGroupRenderer, MoversMatchingWithLinesGroupRenderer, MoversCrosswordPuzzleRenderer, FindWordsInMatrixRenderer, SortWordsIntoCategoriesRenderer, ChooseThenAnswerGroupRenderer, } from './question-renderers';
 import { SpeakingQuestionRenderer } from './speaking/renderers';
-import { transformFillInBlank, transformWriteCorrectVerbForm, transformChooseCorrectAnswer, transformChooseTheCorrectAnswerGroup, transformChooseCorrectAdjective, transformWriteShortLetter, transformColorObjects, transformPictureChoose, transformPictureFillBlankChoose, transformReadingPassage, transformLabelPicture, transformFillWordHint, transformGridFill, transformAnswerTheQuestion, transformAnswerTheQuestionGroup, transformTrueFalse, transformTrueFalseGroup, transformTrueFalseCorrectGroup, transformFillInBlankGroup, transformWordOrdering, transformWordOrderingGroupTake, transformWordFillParagraph, transformMatchByWritingAnswer, transformMatchWordToPicture, transformWriteSentences, transformWordFillStructuredForm, transformWordOrderAndMatchGroup, transformMatchingWithLinesGroup, transformCrosswordPuzzle, transformFindWordsInMatrix, } from '../utils/question-transformers';
+import { transformFillInBlank, transformWriteCorrectVerbForm, transformChooseCorrectAnswer, transformChooseTheCorrectAnswerGroup, transformChooseCorrectAdjective, transformWriteShortLetter, transformColorObjects, transformPictureChoose, transformPictureFillBlankChoose, transformReadingPassage, transformLabelPicture, transformFillWordHint, transformGridFill, transformAnswerTheQuestion, transformAnswerTheQuestionGroup, transformTrueFalse, transformTrueFalseGroup, transformTrueFalseCorrectGroup, transformFillInBlankGroup, transformWordOrdering, transformWordOrderingGroupTake, transformWordFillParagraph, transformMatchByWritingAnswer, transformMatchWordToPicture, transformWriteSentences, transformWordFillStructuredForm, transformWordOrderAndMatchGroup, transformMatchingWithLinesGroup, transformCrosswordPuzzle, transformFindWordsInMatrix, transformSortWordsIntoCategories, transformChooseThenAnswerGroup, } from '../utils/question-transformers';
 import { transformCrossOutWordGroup } from '../utils/cross-out-word-group.transformer';
 import { normalizeColoringAssignments } from '../utils/coloring-assignments';
 export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode = false, onExit, onPartComplete, onPartBack, speakingTheme, initialQuestionIndex, skipTeacherVideo, onTeacherIntroPlayed, currentQuestionIndex, }) {
@@ -141,6 +141,16 @@ export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode =
             const data = transformCrosswordPuzzle(questions);
             return (_jsx(MoversCrosswordPuzzleRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, title: data.title, gridSize: data.gridSize, clues: data.clues, answers: answers, correctAnswers: data.correctAnswers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
         }
+        case 'SORT_WORDS_INTO_CATEGORIES': {
+            const data = transformSortWordsIntoCategories(questions);
+            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: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+        }
+        case 'CHOOSE_THEN_ANSWER_GROUP': {
+            const data = transformChooseThenAnswerGroup(questions);
+            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: onAnswerChange, isReviewMode: isReviewMode }));
+        }
         case 'FIND_WORDS_IN_MATRIX': {
             const data = transformFindWordsInMatrix(questions);
             return (_jsx(FindWordsInMatrixRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, type: data.type, title: data.title, gridSize: data.gridSize, grid: data.grid, categories: data.categories, wordBank: data.wordBank, exampleSelection: data.exampleSelection, correctWords: data.correctWords, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, questionId: questions[0]?.id || 'find-words' }));
@@ -151,7 +161,7 @@ export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode =
         }
         case 'ANSWER_THE_QUESTION_GROUP': {
             const data = transformAnswerTheQuestionGroup(questions);
-            return (_jsx(MoversAnswerTheQuestionRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, groupContent: data.groupContent, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+            return (_jsx(MoversAnswerTheQuestionRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, imageUrl: data.imageUrl, groupContent: data.groupContent, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
         }
         case 'TRUE_FALSE_GROUP': {
             const data = transformTrueFalseGroup(questions);

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

@@ -0,0 +1,14 @@
+import type { ChooseThenAnswerGroupPartData } from '../../utils/question-transformers';
+import type { ChooseThenAnswerStudentItemAnswer } from '../../../../questions/_shared/types/choose-then-answer-group.type';
+interface ChooseThenAnswerGroupRendererProps {
+    partNumber: number;
+    partName?: string;
+    questionCount: number;
+    instruction: string;
+    data: ChooseThenAnswerGroupPartData;
+    answers: Record<string, unknown>;
+    onAnswerChange: (questionId: string, value: ChooseThenAnswerStudentItemAnswer) => void;
+    isReviewMode?: boolean;
+}
+export declare function ChooseThenAnswerGroupRenderer({ partNumber, partName, questionCount, instruction, data, answers, onAnswerChange, isReviewMode, }: ChooseThenAnswerGroupRendererProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+import { ChooseThenAnswerGroupClient } from '../../../../questions/types/choose-then-answer-group/ChooseThenAnswerGroupClient';
+import { parseStudentAnswer } from '../../../../questions/types/choose-then-answer-group/map-choose-then-answer-group-data';
+export function ChooseThenAnswerGroupRenderer({ partNumber, partName, questionCount, instruction, data, answers, onAnswerChange, isReviewMode = false, }) {
+    const userAnswers = data.questions.map((item) => {
+        if (item.isExample) {
+            return { optionId: item.correctOptionId, text: parseStudentAnswer(answers[item.id]).text };
+        }
+        return parseStudentAnswer(answers[item.id]);
+    });
+    return (_jsxs("div", { className: "w-full space-y-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, partName: partName, questionCount: questionCount }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction }), _jsx("div", { className: "mt-4", children: _jsx(ChooseThenAnswerGroupClient, { questionData: {
+                        title: data.title,
+                        instruction: data.instruction,
+                        items: data.questions.map((item) => ({
+                            question: item.question,
+                            options: item.options,
+                            optionId: item.correctOptionId,
+                            isExample: item.isExample,
+                            points: item.points,
+                            questionNumber: item.questionNumber,
+                        })),
+                        explanation: data.explanation,
+                    }, isReviewMode: isReviewMode, userAnswers: userAnswers, onAnswerChange: isReviewMode ? undefined : (index, next) => {
+                        const item = data.questions[index];
+                        if (!item || item.isExample)
+                            return;
+                        onAnswerChange(item.id, next);
+                    } }) })] }));
+}

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

@@ -8,7 +8,7 @@ interface MoversAnswerTheQuestionRendererProps {
     partName?: string;
     questionCount: number;
     instruction: string;
-    imageUrl?: string;
+    imageUrl?: string | string[];
     audioUrl?: string;
     title?: string;
     groupContent?: string;

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

@@ -7,6 +7,14 @@ import { ResolvedImage } from '../../../../../components/common/ResolvedImage';
 import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
 import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
 import CambridgeYleAudioPlayer from '../../../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer';
+import { toAnswerTheQuestionImageUrls } from '../../../../questions/_shared/types/answer-the-question.type';
+function QuestionImages({ imageUrl, alt, className, }) {
+    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: className }, `${alt}-${imageIndex}`))) }));
+}
 // Single Question Component
 function QuestionItem({ question, answer, onAnswerChange, isReviewMode, correctAnswerTextMap, id, }) {
     const isExampleQ = question.isExample;
@@ -17,7 +25,7 @@ function QuestionItem({ question, answer, onAnswerChange, isReviewMode, correctA
     const hasCorrectAnswer = isReviewMode && correctAnswer !== undefined;
     const isCorrect = hasCorrectAnswer && userAnswer.trim().toLowerCase() === correctAnswer.trim().toLowerCase();
     const isWrong = hasCorrectAnswer && !!userAnswer && !isCorrect;
-    return (_jsxs("div", { id: id, className: `flex items-start gap-3 rounded-lg p-3 ${isExampleQ ? 'border-2 border-orange-200 bg-orange-50' : ''}`, children: [_jsx("span", { className: `flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ${isExampleQ ? 'bg-orange-400' : isCorrect ? 'bg-green-500' : isWrong ? 'bg-red-500' : 'bg-blue-500'}`, children: question.questionNumber }), _jsxs("div", { className: "flex flex-1 flex-col gap-2", children: [question.imageUrl && (_jsx(ResolvedImage, { src: question.imageUrl, alt: `Q${question.questionNumber}`, className: "max-h-[120px] rounded-lg object-contain" })), _jsxs("div", { className: "flex flex-wrap items-baseline gap-2", children: [_jsx("span", { className: "font-medium text-gray-800", children: question.question }), question.prefixText && _jsx("span", { className: "text-gray-600", children: question.prefixText }), _jsx("input", { type: "text", value: displayValue, onChange: (e) => onAnswerChange(question.id, e.target.value), disabled: isDisabled, placeholder: isExampleQ ? '' : 'Type your answer...', className: `min-w-[140px] flex-1 border-b-2 bg-transparent px-1 py-1 text-center outline-none focus:border-blue-500 disabled:cursor-default ${isExampleQ ? 'border-orange-400 font-semibold text-orange-700 disabled:opacity-100' :
+    return (_jsxs("div", { id: id, className: `flex items-start gap-3 rounded-lg p-3 ${isExampleQ ? 'border-2 border-orange-200 bg-orange-50' : ''}`, children: [_jsx("span", { className: `flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ${isExampleQ ? 'bg-orange-400' : isCorrect ? 'bg-green-500' : isWrong ? 'bg-red-500' : 'bg-blue-500'}`, children: question.questionNumber }), _jsxs("div", { className: "flex flex-1 flex-col gap-2", children: [_jsx(QuestionImages, { imageUrl: question.imageUrl, alt: `Q${question.questionNumber}`, className: "max-h-[120px] rounded-lg object-contain" }), _jsxs("div", { className: "flex flex-wrap items-baseline gap-2", children: [_jsx("span", { className: "font-medium text-gray-800", children: question.question }), question.prefixText && _jsx("span", { className: "text-gray-600", children: question.prefixText }), _jsx("input", { type: "text", value: displayValue, onChange: (e) => onAnswerChange(question.id, e.target.value), disabled: isDisabled, placeholder: isExampleQ ? '' : 'Type your answer...', className: `min-w-[140px] flex-1 border-b-2 bg-transparent px-1 py-1 text-center outline-none focus:border-blue-500 disabled:cursor-default ${isExampleQ ? 'border-orange-400 font-semibold text-orange-700 disabled:opacity-100' :
                                     isCorrect ? 'border-green-500 text-green-700' :
                                         isWrong ? 'border-red-500 text-red-700' :
                                             'border-gray-400 disabled:opacity-60'}` }), question.suffixText && _jsx("span", { className: "text-gray-600", children: question.suffixText }), isExampleQ && (_jsx("span", { className: "rounded bg-orange-100 px-2 py-0.5 text-xs font-semibold text-orange-600", children: "Example" }))] }), !isExampleQ && isWrong && hasCorrectAnswer && (_jsxs("p", { className: "text-sm text-green-600", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", correctAnswer] })), !isExampleQ && hasCorrectAnswer && !userAnswer && (_jsxs("p", { className: "text-sm text-green-600", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", correctAnswer] })), question.suggestedAnswers && question.suggestedAnswers.length > 0 && !isDisabled && (_jsx("div", { className: "flex flex-wrap gap-2", children: question.suggestedAnswers.map((sa, idx) => (_jsx("button", { type: "button", onClick: () => onAnswerChange(question.id, sa), className: "rounded-full border border-blue-300 bg-blue-50 px-3 py-1 text-sm text-blue-700 transition-colors hover:bg-blue-100", children: sa }, idx))) }))] })] }));
@@ -26,5 +34,5 @@ export function MoversAnswerTheQuestionRenderer({ partNumber, partName, question
     // Separate example questions from regular questions
     const exampleQuestions = questions.filter((q) => q.isExample);
     const regularQuestions = questions.filter((q) => !q.isExample);
-    return (_jsxs("div", { className: "flex flex-col h-full gap-4 sm:gap-6 overflow-y-auto custom-scrollbar", children: [_jsxs("div", { className: "flex flex-col gap-4 p-3 sm:px-6 sm:pt-2", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode }), audioUrl && (_jsx("div", { className: "relative z-10", children: _jsx(CambridgeYleAudioPlayer, { audioSrc: audioUrl, compact: true }) })), imageUrl && (_jsx("div", { className: "relative z-0 flex items-center justify-center", children: _jsx(ResolvedImage, { src: imageUrl, alt: "Shared illustration", className: "max-h-[450px] rounded-lg object-contain shadow-md" }) })), groupContent && (_jsx("div", { className: "rounded-lg bg-amber-50 p-4 text-base leading-relaxed text-gray-800", dangerouslySetInnerHTML: { __html: groupContent } })), exampleQuestions.length > 0 && (_jsx("div", { className: "flex flex-col gap-4 mt-2", children: exampleQuestions.map((question) => (_jsx(QuestionItem, { id: `question-${question.id}`, question: question, answer: answers[question.id], onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, correctAnswerTextMap: correctAnswerTextMap }, question.id))) }))] }), exampleQuestions.length > 0 && regularQuestions.length > 0 && (_jsx("div", { className: "px-3 sm:px-6", children: _jsx("hr", { className: "border-t border-slate-200/60 my-1" }) })), _jsx("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-5 p-3 sm:px-6 sm:pb-6", children: regularQuestions.map((question) => (_jsx("div", { id: `question-${question.id}`, className: "w-full rounded-xl border border-gray-200 bg-white shadow-sm transition-all hover:border-indigo-200 hover:shadow-md", children: _jsx(QuestionItem, { question: question, answer: answers[question.id], onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, correctAnswerTextMap: correctAnswerTextMap }) }, question.id))) })] }));
+    return (_jsxs("div", { className: "flex flex-col h-full gap-4 sm:gap-6 overflow-y-auto custom-scrollbar", children: [_jsxs("div", { className: "flex flex-col gap-4 p-3 sm:px-6 sm:pt-2", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode }), audioUrl && (_jsx("div", { className: "relative z-10", children: _jsx(CambridgeYleAudioPlayer, { audioSrc: audioUrl, compact: true }) })), toAnswerTheQuestionImageUrls(imageUrl).length > 0 && (_jsx("div", { className: "relative z-0 flex items-center justify-center", children: _jsx(QuestionImages, { imageUrl: imageUrl, alt: "Shared illustration", className: "max-h-[450px] rounded-lg object-contain shadow-md" }) })), groupContent && (_jsx("div", { className: "rounded-lg bg-amber-50 p-4 text-base leading-relaxed text-gray-800", dangerouslySetInnerHTML: { __html: groupContent } })), exampleQuestions.length > 0 && (_jsx("div", { className: "flex flex-col gap-4 mt-2", children: exampleQuestions.map((question) => (_jsx(QuestionItem, { id: `question-${question.id}`, question: question, answer: answers[question.id], onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, correctAnswerTextMap: correctAnswerTextMap }, question.id))) }))] }), exampleQuestions.length > 0 && regularQuestions.length > 0 && (_jsx("div", { className: "px-3 sm:px-6", children: _jsx("hr", { className: "border-t border-slate-200/60 my-1" }) })), _jsx("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-5 p-3 sm:px-6 sm:pb-6", children: regularQuestions.map((question) => (_jsx("div", { id: `question-${question.id}`, className: "w-full rounded-xl border border-gray-200 bg-white shadow-sm transition-all hover:border-indigo-200 hover:shadow-md", children: _jsx(QuestionItem, { question: question, answer: answers[question.id], onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, correctAnswerTextMap: correctAnswerTextMap }) }, question.id))) })] }));
 }

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

@@ -0,0 +1,16 @@
+import type { SortWordsIntoCategoriesPartData } from '../../utils/question-transformers';
+import type { SortWordsPlacement } from '../../../../questions/_shared/types/sort-words-into-categories.type';
+interface SortWordsIntoCategoriesRendererProps {
+    partNumber: number;
+    partName?: string;
+    questionCount: number;
+    instruction: string;
+    data: SortWordsIntoCategoriesPartData;
+    answers: Record<string, unknown>;
+    onAnswerChange: (questionId: string, value: {
+        placements: SortWordsPlacement[];
+    }) => void;
+    isReviewMode?: boolean;
+}
+export declare function SortWordsIntoCategoriesRenderer({ partNumber, partName, questionCount, instruction, data, answers, onAnswerChange, isReviewMode, }: SortWordsIntoCategoriesRendererProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+import { SortWordsIntoCategoriesClient } from '../../../../questions/types/sort-words-into-categories/SortWordsIntoCategoriesClient';
+import { padPlacements, readPlacements } from '../../../../questions/types/sort-words-into-categories/map-sort-words-into-categories-data';
+export function SortWordsIntoCategoriesRenderer({ partNumber, partName, questionCount, instruction, data, answers, onAnswerChange, isReviewMode = false, }) {
+    const stored = readPlacements(answers[data.questionId]);
+    const exampleSeed = data.words.map((word) => ({
+        wordId: word.id,
+        categoryId: word.isExample ? word.categoryId : '',
+    }));
+    const userPlacements = padPlacements(data.words, stored ?? exampleSeed);
+    return (_jsxs("div", { className: "w-full space-y-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, partName: partName, questionCount: questionCount }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction }), _jsx("div", { className: "mt-4", children: _jsx(SortWordsIntoCategoriesClient, { questionData: {
+                        title: data.title,
+                        instruction: data.instruction,
+                        categories: data.categories,
+                        words: data.words,
+                        explanation: data.explanation,
+                    }, isReviewMode: isReviewMode, userPlacements: userPlacements, onPlacementsChange: isReviewMode ? undefined : (next) => {
+                        onAnswerChange(data.questionId, { placements: next });
+                    } }) })] }));
+}

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

@@ -25,4 +25,6 @@ export { MoversWordOrderAndMatchGroupRenderer } from './MoversWordOrderAndMatchG
 export { MoversMatchingWithLinesGroupRenderer } from './MoversMatchingWithLinesGroupRenderer';
 export { MoversCrosswordPuzzleRenderer } from './MoversCrosswordPuzzleRenderer';
 export { FindWordsInMatrixRenderer } from './FindWordsInMatrixRenderer';
+export { SortWordsIntoCategoriesRenderer } from './SortWordsIntoCategoriesRenderer';
+export { ChooseThenAnswerGroupRenderer } from './ChooseThenAnswerGroupRenderer';
 export { ArticlesViewer } from './ArticlesViewer';

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

@@ -29,4 +29,6 @@ export { MoversWordOrderAndMatchGroupRenderer } from './MoversWordOrderAndMatchG
 export { MoversMatchingWithLinesGroupRenderer } from './MoversMatchingWithLinesGroupRenderer';
 export { MoversCrosswordPuzzleRenderer } from './MoversCrosswordPuzzleRenderer';
 export { FindWordsInMatrixRenderer } from './FindWordsInMatrixRenderer';
+export { SortWordsIntoCategoriesRenderer } from './SortWordsIntoCategoriesRenderer';
+export { ChooseThenAnswerGroupRenderer } from './ChooseThenAnswerGroupRenderer';
 export { ArticlesViewer } from './ArticlesViewer';

package/dist/components/exams/take/utils/answer-transformers.js

@@ -93,7 +93,8 @@ function findParentQuestion(subQuestionId, parts) {
             part.questionType === 'WORD_ORDER_AND_MATCH_GROUP' ||
             part.questionType === 'SPONTANEOUS_QA_GROUP' ||
             part.questionType === 'ANSWER_THE_QUESTION_GROUP' ||
-            part.questionType === 'WORD_ORDERING_GROUP') {
+            part.questionType === 'WORD_ORDERING_GROUP' ||
+            part.questionType === 'CHOOSE_THEN_ANSWER_GROUP') {
             const parent = part.questions.find((question) => subQuestionId.startsWith(`${question.id}-item-`));
             if (parent) {
                 return {
@@ -205,7 +206,29 @@ function findQuestionType(questionId, parts) {
 /**
  * Wrap answer in proper format for backend grading
  */
+function normalizeSortWordsIntoCategoriesAnswer(answer) {
+    const raw = answer && typeof answer === 'object' && !Array.isArray(answer)
+        ? answer.placements
+        : Array.isArray(answer)
+            ? answer
+            : [];
+    const source = Array.isArray(raw) ? raw : [];
+    return {
+        placements: source.map((item) => {
+            const record = item && typeof item === 'object'
+                ? item
+                : {};
+            return {
+                wordId: typeof record.wordId === 'string' ? record.wordId : '',
+                categoryId: typeof record.categoryId === 'string' ? record.categoryId : '',
+            };
+        }),
+    };
+}
 function wrapAnswer(answer, questionType) {
+    if (questionType === 'SORT_WORDS_INTO_CATEGORIES') {
+        return normalizeSortWordsIntoCategoriesAnswer(answer);
+    }
     // For single/multiple choice, wrap in { answer: value }
     if (typeof answer === 'number') {
         return { answer };
@@ -373,6 +396,16 @@ export function transformAnswersForSubmission(answers, parts) {
                 if (parentType === 'CROSS_OUT_WORD_GROUP') {
                     return normalizeCrossOutWordGroupAnswer(raw);
                 }
+                if (parentType === 'CHOOSE_THEN_ANSWER_GROUP') {
+                    if (raw && typeof raw === 'object' && !Array.isArray(raw)) {
+                        const obj = raw;
+                        return {
+                            optionId: typeof obj.optionId === 'string' ? obj.optionId : '',
+                            text: typeof obj.text === 'string' ? obj.text : '',
+                        };
+                    }
+                    return { optionId: '', text: '' };
+                }
                 if (parentType === 'TRUE_FALSE_CORRECT_GROUP') {
                     if (raw && typeof raw === 'object' && !Array.isArray(raw)) {
                         const obj = raw;

package/dist/components/exams/take/utils/question-transformers.d.ts

@@ -5,7 +5,7 @@
  * Each transformer handles specific question type data structure.
  */
 import type { FillBlankQuestion, ChooseBestAnswerQuestion, PictureChooseSubQuestion, PictureFillBlankSubQuestion, ReadingPassageQuestion, LabelThePictureLabel, FillWordHintSubQuestion, ColoringHintItem, ColoringRegion } from '../types';
-export type QuestionType = 'FILL_IN_BLANK' | 'WRITE_CORRECT_VERB_FORM' | 'CHOOSE_THE_CORRECT_ANSWER' | 'CHOOSE_THE_CORRECT_ANSWER_GROUP' | 'CHOOSE_CORRECT_ADJECTIVE' | 'WRITE_A_SHORT_LETTER' | 'READ_AND_COLOR_OBJECTS' | 'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER' | 'LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER' | 'READ_PASSAGE_AND_ANSWER_QUESTIONS' | 'LABEL_THE_PICTURE' | 'LOOK_PICTURE_FILL_WORD_HINT' | 'FILL_MISSING_WORDS_IN_GRID' | 'IMAGE_OBJECT_MATCHING' | 'ANSWER_THE_QUESTION' | 'ANSWER_THE_QUESTION_GROUP' | 'TRUE_FALSE' | 'TRUE_FALSE_GROUP' | 'TRUE_FALSE_CORRECT_GROUP' | 'FILL_IN_BLANK_GROUP' | 'MATCHING_WITH_LINES_GROUP' | 'CROSS_OUT_WORD_GROUP' | 'WORD_ORDERING' | 'WORD_ORDERING_GROUP' | 'WORD_FILL_PARAGRAPH' | 'MATCH_BY_WRITING_ANSWER' | 'MATCH_WORD_TO_PICTURE' | 'WRITE_SENTENCES' | 'WORD_FILL_STRUCTURED_FORM' | 'CROSSWORD_PUZZLE' | 'FIND_WORDS_IN_MATRIX' | 'WORD_ORDER_AND_MATCH_GROUP' | 'LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE' | 'LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP' | 'LISTEN_AND_DRAG_OBJECTS_INTO_SCENE' | 'LISTEN_AND_SPEAK_ANSWER' | 'LISTEN_AND_SPEAK_COMPARE_IMAGES' | 'LISTEN_AND_SPEAK_WITH_STORY_IMAGES' | 'LISTEN_AND_SPEAK_IMAGE_GROUP' | 'LISTEN_AND_SPEAK_ODD_ONE_OUT' | 'LISTEN_AND_SPEAK_QUESTION_LIST' | 'LISTEN_AND_SPEAK_INFO_EXCHANGE' | 'READ_DISPLAYED_CONTENT' | 'SPEAKING_DESCRIBE_IMAGE' | 'SPONTANEOUS_QA' | 'SPONTANEOUS_QA_GROUP' | 'SPEAKING_CONVERSATION' | 'GN_SPEAKING_INTERVIEW' | 'SPEAKING_CUE_CARD';
+export type QuestionType = 'FILL_IN_BLANK' | 'WRITE_CORRECT_VERB_FORM' | 'CHOOSE_THE_CORRECT_ANSWER' | 'CHOOSE_THE_CORRECT_ANSWER_GROUP' | 'CHOOSE_CORRECT_ADJECTIVE' | 'WRITE_A_SHORT_LETTER' | 'READ_AND_COLOR_OBJECTS' | 'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER' | 'LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER' | 'READ_PASSAGE_AND_ANSWER_QUESTIONS' | 'LABEL_THE_PICTURE' | 'LOOK_PICTURE_FILL_WORD_HINT' | 'FILL_MISSING_WORDS_IN_GRID' | 'IMAGE_OBJECT_MATCHING' | 'ANSWER_THE_QUESTION' | 'ANSWER_THE_QUESTION_GROUP' | 'TRUE_FALSE' | 'TRUE_FALSE_GROUP' | 'TRUE_FALSE_CORRECT_GROUP' | 'FILL_IN_BLANK_GROUP' | 'MATCHING_WITH_LINES_GROUP' | 'CROSS_OUT_WORD_GROUP' | 'WORD_ORDERING' | 'WORD_ORDERING_GROUP' | 'WORD_FILL_PARAGRAPH' | 'MATCH_BY_WRITING_ANSWER' | 'MATCH_WORD_TO_PICTURE' | 'WRITE_SENTENCES' | 'WORD_FILL_STRUCTURED_FORM' | 'CROSSWORD_PUZZLE' | 'FIND_WORDS_IN_MATRIX' | 'SORT_WORDS_INTO_CATEGORIES' | 'CHOOSE_THEN_ANSWER_GROUP' | 'WORD_ORDER_AND_MATCH_GROUP' | 'LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE' | 'LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP' | 'LISTEN_AND_DRAG_OBJECTS_INTO_SCENE' | 'LISTEN_AND_SPEAK_ANSWER' | 'LISTEN_AND_SPEAK_COMPARE_IMAGES' | 'LISTEN_AND_SPEAK_WITH_STORY_IMAGES' | 'LISTEN_AND_SPEAK_IMAGE_GROUP' | 'LISTEN_AND_SPEAK_ODD_ONE_OUT' | 'LISTEN_AND_SPEAK_QUESTION_LIST' | 'LISTEN_AND_SPEAK_INFO_EXCHANGE' | 'READ_DISPLAYED_CONTENT' | 'SPEAKING_DESCRIBE_IMAGE' | 'SPONTANEOUS_QA' | 'SPONTANEOUS_QA_GROUP' | 'SPEAKING_CONVERSATION' | 'GN_SPEAKING_INTERVIEW' | 'SPEAKING_CUE_CARD';
 export interface ApiQuestion {
     id: string;
     content: any;
@@ -233,7 +233,7 @@ export interface AnswerTheQuestionQuestion {
     id: string;
     questionNumber: number;
     question: string;
-    imageUrl?: string;
+    imageUrl?: string | string[];
     prefixText?: string;
     suffixText?: string;
     suggestedAnswers?: string[];
@@ -243,7 +243,7 @@ export interface AnswerTheQuestionQuestion {
 export declare function transformAnswerTheQuestion(questions: ApiQuestion[]): {
     questions: AnswerTheQuestionQuestion[];
     instruction: string;
-    imageUrl?: string;
+    imageUrl?: string | string[];
     title?: string;
     groupContent?: string;
 };
@@ -251,6 +251,7 @@ export declare function transformAnswerTheQuestionGroup(questions: ApiQuestion[]
     questions: AnswerTheQuestionQuestion[];
     instruction: string;
     groupContent?: string;
+    imageUrl?: string | string[];
 };
 export interface TrueFalseQuestion {
     id: string;
@@ -532,6 +533,44 @@ export interface FindWordsInMatrixPartData {
     explanation?: string;
 }
 export declare function transformFindWordsInMatrix(questions: ApiQuestion[]): FindWordsInMatrixPartData;
+export interface SortWordsIntoCategoriesPartData {
+    questionId: string;
+    title?: string;
+    instruction: string;
+    categories: Array<{
+        id: string;
+        name: string;
+    }>;
+    words: Array<{
+        id: string;
+        text: string;
+        categoryId: string;
+        isExample?: boolean;
+        points: number;
+    }>;
+    explanation?: string;
+}
+export declare function transformSortWordsIntoCategories(questions: ApiQuestion[]): SortWordsIntoCategoriesPartData;
+export interface ChooseThenAnswerGroupQuestion {
+    id: string;
+    questionNumber: number;
+    question: string;
+    options: Array<{
+        id: string;
+        text: string;
+    }>;
+    correctOptionId: string;
+    isExample: boolean;
+    points: number;
+}
+export interface ChooseThenAnswerGroupPartData {
+    questionId: string;
+    title?: string;
+    instruction: string;
+    questions: ChooseThenAnswerGroupQuestion[];
+    explanation?: string;
+}
+export declare function transformChooseThenAnswerGroup(questions: ApiQuestion[]): ChooseThenAnswerGroupPartData;
 export interface MatchingWithLinesGroupQuestionItem {
     id: string;
     questionNumber: number;

package/dist/components/exams/take/utils/question-transformers.js

@@ -829,7 +829,8 @@ export function transformAnswerTheQuestion(questions) {
     return {
         questions: transformed,
         instruction: 'ANSWER THE QUESTION',
-        imageUrl: groupPayload?.mainImageUrl || groupPayload?.imageUrl || firstContent?.imageUrl,
+        // Do not lift the first item image here — that duplicates content.imageUrl.
+        imageUrl: groupPayload?.mainImageUrl || groupPayload?.imageUrl,
         title: firstContent?.title,
         groupContent: groupPayload?.groupContent || firstContent?.groupContent,
     };
@@ -857,6 +858,7 @@ export function transformAnswerTheQuestionGroup(questions) {
             id: `${parent.id}-item-${itemIndex}`,
             questionNumber: item.questionNumber || itemIndex + 1,
             question: item.content?.question || '',
+            imageUrl: item.content?.imageUrl,
             isExample,
             exampleAnswer: isExample ? exampleAnswer : undefined,
         };
@@ -865,6 +867,7 @@ export function transformAnswerTheQuestionGroup(questions) {
         questions: transformed,
         instruction: content?.meta?.instruction || 'Read the text again and answer the questions.',
         groupContent: content?.meta?.passage,
+        imageUrl: content?.meta?.imageUrl,
     };
 }
 export function transformTrueFalse(questions) {
@@ -1379,6 +1382,73 @@ export function transformFindWordsInMatrix(questions) {
         explanation: question?.explanation,
     };
 }
+export function transformSortWordsIntoCategories(questions) {
+    const question = questions[0];
+    const content = (question?.content || {});
+    const correctAnswer = (question?.correct_answer || question?.correctAnswer || {});
+    const placementMap = new Map();
+    (Array.isArray(correctAnswer.placements) ? correctAnswer.placements : []).forEach((item) => {
+        if (item?.wordId && !placementMap.has(item.wordId)) {
+            placementMap.set(item.wordId, item.categoryId || '');
+        }
+    });
+    const words = (Array.isArray(content.words) ? content.words : []).map((item, index) => {
+        const id = item?.id || `w${index + 1}`;
+        const isExample = item?.isExample === true;
+        return {
+            id,
+            text: item?.text || '',
+            categoryId: placementMap.get(id) || '',
+            isExample,
+            points: isExample ? 0 : (typeof item?.points === 'number' ? item.points : 1),
+        };
+    });
+    return {
+        questionId: question?.id || 'sort-words',
+        title: content.meta?.title || '',
+        instruction: question?.instruction ||
+            content.meta?.instruction ||
+            'Read and sort the words.',
+        categories: (Array.isArray(content.categories) ? content.categories : []).map((item, index) => ({
+            id: item?.id || `cat_${index + 1}`,
+            name: item?.name || '',
+        })),
+        words,
+        explanation: question?.explanation,
+    };
+}
+export function transformChooseThenAnswerGroup(questions) {
+    const parent = questions[0];
+    const content = (parent?.content || {});
+    const parentCorrect = Array.isArray(parent?.correct_answer?.answer)
+        ? parent.correct_answer.answer
+        : [];
+    const items = Array.isArray(content.items) ? content.items : [];
+    return {
+        questionId: parent?.id || 'choose-then-answer',
+        title: content.meta?.title || '',
+        instruction: parent?.instruction ||
+            content.meta?.instruction ||
+            'Read and choose. Then answer for you.',
+        questions: items.map((item, index) => {
+            const fallback = parentCorrect[index];
+            const optionId = item.correctAnswer?.answer?.optionId || fallback?.optionId || '';
+            return {
+                id: `${parent?.id || 'choose-then-answer'}-item-${index}`,
+                questionNumber: item.questionNumber || index + 1,
+                question: item.content?.question || '',
+                options: (Array.isArray(item.content?.options) ? item.content.options : []).map((option, optionIndex) => ({
+                    id: option?.id || `opt-${optionIndex + 1}`,
+                    text: option?.text || '',
+                })),
+                correctOptionId: optionId,
+                isExample: item.isExample === true,
+                points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+            };
+        }),
+        explanation: parent?.explanation,
+    };
+}
 export function transformMatchingWithLinesGroup(questions) {
     const parent = questions[0];
     const content = (parent?.content || {});

package/dist/components/questions/_shared/config/question-types.config.js

@@ -347,6 +347,16 @@ export const QUESTION_TYPE_CONFIG = {
         requiresContent: true,
         hasDedicatedComponent: true,
     },
+    SORT_WORDS_INTO_CATEGORIES: {
+        label: 'Sắp xếp từ vào nhóm',
+        requiresContent: true,
+        hasDedicatedComponent: true,
+    },
+    CHOOSE_THEN_ANSWER_GROUP: {
+        label: 'Chọn đáp án rồi trả lời',
+        requiresContent: true,
+        hasDedicatedComponent: true,
+    },
     MATCH_COLUMNS_TO_MAKE_SENTENCES: {
         label: 'Ghép cột thành câu',
         requiresContent: true,
@@ -413,6 +423,8 @@ export const QUESTION_TYPES_WITH_DEDICATED_COMPONENTS = [
     'WORD_FILL_STRUCTURED_FORM',
     'CROSSWORD_PUZZLE',
     'FIND_WORDS_IN_MATRIX',
+    'SORT_WORDS_INTO_CATEGORIES',
+    'CHOOSE_THEN_ANSWER_GROUP',
     'MATCH_COLUMNS_TO_MAKE_SENTENCES',
     'MATCH_WORD_TO_PICTURE_GROUP',
     'WORD_ORDERING_GROUP',

package/dist/components/questions/_shared/types/answer-the-question-group.type.d.ts

@@ -5,13 +5,17 @@ export interface AnswerTheQuestionGroupItemData {
     isExample?: boolean;
     points: number;
     questionNumber: number;
+    imageUrl?: string | string[];
 }
 export declare function toAnswerTheQuestionGroupImageUrls(value?: unknown): string[];
+export declare function fromAnswerTheQuestionGroupImageUrls(value?: unknown): string | string[] | undefined;
 export interface AnswerTheQuestionGroupData {
     instruction: string;
     passage?: string;
+    /** Group-level listening audio (one player for the whole group). */
+    audioUrl?: string;
     /** Shared images above the question list (1 or many). */
-    imageUrl?: string[];
+    imageUrl?: string | string[];
     items: AnswerTheQuestionGroupItemData[];
     explanation?: string;
     points?: number;

package/dist/components/questions/_shared/types/answer-the-question-group.type.js

@@ -10,3 +10,10 @@ export function toAnswerTheQuestionGroupImageUrls(value) {
     }
     return [];
 }
+export function fromAnswerTheQuestionGroupImageUrls(value) {
+    const urls = toAnswerTheQuestionGroupImageUrls(value);
+    if (urls.length === 0) {
+        return undefined;
+    }
+    return urls.length === 1 ? urls[0] : urls;
+}

package/dist/components/questions/_shared/types/answer-the-question.type.d.ts

@@ -23,13 +23,15 @@ export interface AnswerTheQuestionData {
     groupNumber?: number;
     isExample?: boolean;
     suggestedAnswers?: string[];
-    imageUrl: string;
+    imageUrl?: string | string[];
     title?: string;
     subtitle?: string;
     groupContent?: string;
     groups?: AnswerTheQuestionGroup[];
     explanation?: string;
 }
+export declare function toAnswerTheQuestionImageUrls(value?: unknown): string[];
+export declare function fromAnswerTheQuestionImageUrls(value?: unknown): string | string[] | undefined;
 import type { ValidationRef } from './look-and-choose-answer.type';
 export type { ValidationRef };
 export interface AnswerTheQuestionCreatorProps {

package/dist/components/questions/_shared/types/answer-the-question.type.js

@@ -1 +1,19 @@
-export {};
+export function toAnswerTheQuestionImageUrls(value) {
+    if (Array.isArray(value)) {
+        return value
+            .filter((url) => typeof url === 'string')
+            .map((url) => url.trim())
+            .filter((url) => url !== '');
+    }
+    if (typeof value === 'string' && value.trim() !== '') {
+        return [value.trim()];
+    }
+    return [];
+}
+export function fromAnswerTheQuestionImageUrls(value) {
+    const urls = toAnswerTheQuestionImageUrls(value);
+    if (urls.length === 0) {
+        return undefined;
+    }
+    return urls.length === 1 ? urls[0] : urls;
+}

package/dist/components/questions/_shared/types/choose-then-answer-group.type.d.ts

@@ -0,0 +1,47 @@
+import type { MutableRefObject } from 'react';
+export declare const CHOOSE_THEN_ANSWER_ITEM_TYPE: "CHOOSE_THEN_ANSWER";
+export declare const CHOOSE_THEN_ANSWER_GROUP_DEFAULT_INSTRUCTION = "Read and choose. Then answer for you.";
+export interface ChooseThenAnswerOption {
+    id: string;
+    text: string;
+}
+export interface ChooseThenAnswerItemAnswer {
+    optionId: string;
+}
+export interface ChooseThenAnswerStudentItemAnswer {
+    optionId: string;
+    text: string;
+}
+export interface ChooseThenAnswerGroupItemData {
+    question: string;
+    options: ChooseThenAnswerOption[];
+    optionId: string;
+    isExample?: boolean;
+    points: number;
+    questionNumber: number;
+}
+export interface ChooseThenAnswerGroupData {
+    title?: string;
+    instruction: string;
+    items: ChooseThenAnswerGroupItemData[];
+    explanation?: string;
+    points?: number;
+}
+export interface ChooseThenAnswerGroupCreatorProps {
+    initialData?: ChooseThenAnswerGroupData;
+    onSave?: (data: ChooseThenAnswerGroupData) => void;
+    onCancel?: () => void;
+    onChange?: (data: ChooseThenAnswerGroupData) => void;
+    externalErrors?: string[];
+    onUnsavedChangesChange?: (hasUnsavedChanges: boolean) => void;
+    validationRef?: MutableRefObject<{
+        triggerValidation: () => Promise<boolean>;
+        getFormData?: () => ChooseThenAnswerGroupData;
+    } | null>;
+}
+export interface ChooseThenAnswerGroupClientProps {
+    questionData: ChooseThenAnswerGroupData;
+    isReviewMode?: boolean;
+    userAnswers?: ChooseThenAnswerStudentItemAnswer[];
+    onAnswerChange?: (index: number, next: ChooseThenAnswerStudentItemAnswer) => void;
+}

package/dist/components/questions/_shared/types/choose-then-answer-group.type.js

@@ -0,0 +1,2 @@
+export const CHOOSE_THEN_ANSWER_ITEM_TYPE = 'CHOOSE_THEN_ANSWER';
+export const CHOOSE_THEN_ANSWER_GROUP_DEFAULT_INSTRUCTION = 'Read and choose. Then answer for you.';