@tinyweb_dev/oe-exam-sdk 1.0.9 → 1.0.11

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

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

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, MoversReadingPassageRenderer, MoversLabelThePictureRenderer, MoversGridFillRenderer, MoversTrueFalseRenderer, MoversTrueFalseCorrectGroupRenderer, MoversFillInBlankGroupRenderer, MoversCrossOutWordGroupRenderer, MoversAnswerTheQuestionRenderer, MoversWriteSentencesRenderer, MoversWordOrderingRenderer, MoversWordOrderingGroupRenderer, MoversWordFillParagraphRenderer, MoversMatchByWritingAnswerRenderer, MoversMatchWordToPictureRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderAndMatchGroupRenderer, MoversMatchingWithLinesGroupRenderer, MoversCrosswordPuzzleRenderer, FindWordsInMatrixRenderer, SortWordsIntoCategoriesRenderer, ChooseThenAnswerGroupRenderer, } from './question-renderers';
+import { MoversListenAndWriteRenderer, MoversChooseBestAnswerRenderer, MoversChooseAdjectiveRenderer, MoversWritingRenderer, MoversColoringRenderer, MoversReadingPassageRenderer, MoversLabelThePictureRenderer, MoversGridFillRenderer, MoversTrueFalseRenderer, MoversTrueFalseCorrectGroupRenderer, MoversFillInBlankGroupRenderer, MoversCrossOutWordGroupRenderer, MoversAnswerTheQuestionRenderer, MoversWriteSentencesRenderer, MoversWordOrderingRenderer, MoversWordOrderingGroupRenderer, MoversWordFillParagraphRenderer, MoversMatchByWritingAnswerRenderer, MoversMatchWordToPictureRenderer, MoversMatchWordToPictureGroupRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderAndMatchGroupRenderer, MoversMatchingWithLinesGroupRenderer, MoversCrosswordPuzzleRenderer, FindWordsInMatrixRenderer, SortWordsIntoCategoriesRenderer, ChooseThenAnswerGroupRenderer, } from './question-renderers';
 import { SpeakingQuestionRenderer } from './speaking/renderers';
-import { transformFillInBlank, transformWriteCorrectVerbForm, transformChooseCorrectAnswer, transformChooseTheCorrectAnswerGroup, transformChooseCorrectAdjective, transformWriteShortLetter, transformColorObjects, transformReadingPassage, transformLabelPicture, 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 { transformFillInBlank, transformWriteCorrectVerbForm, transformChooseCorrectAnswer, transformChooseTheCorrectAnswerGroup, transformChooseCorrectAdjective, transformWriteShortLetter, transformColorObjects, transformReadingPassage, transformLabelPicture, transformGridFill, transformAnswerTheQuestion, transformAnswerTheQuestionGroup, transformTrueFalse, transformTrueFalseGroup, transformTrueFalseCorrectGroup, transformFillInBlankGroup, transformWordOrdering, transformWordOrderingGroupTake, transformWordFillParagraph, transformMatchByWritingAnswer, transformMatchWordToPicture, transformMatchWordToPictureGroup, 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, compactLayout = false, }) {
@@ -102,7 +102,7 @@ export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode =
         }
         case 'CROSSWORD_PUZZLE': {
             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 }));
+            return (_jsx(MoversCrosswordPuzzleRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, title: data.title, gridSize: data.gridSize, markedColumn: data.markedColumn, hiddenWord: data.hiddenWord, clues: data.clues, answers: answers, correctAnswers: data.correctAnswers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, caseSensitive: data.caseSensitive }));
         }
         case 'IMAGE_OBJECT_MATCHING': {
             // Reuse coloring renderer — same content structure as READ_AND_COLOR_OBJECTS
@@ -125,10 +125,6 @@ export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode =
                     onAnswerChange(regionId, hintItemId);
                 }, isReviewMode: isReviewMode }));
         }
-        case 'CROSSWORD_PUZZLE': {
-            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;
@@ -204,6 +200,10 @@ export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode =
             const data = transformMatchByWritingAnswer(questions);
             return (_jsx(MoversMatchByWritingAnswerRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, audioUrl: part.audioUrl, options: data.options, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, viewMode: data.viewMode, groupImageUrl: data.groupImageUrl }));
         }
+        case 'MATCH_WORD_TO_PICTURE_GROUP': {
+            const data = transformMatchWordToPictureGroup(questions);
+            return (_jsx(MoversMatchWordToPictureGroupRenderer, { partNumber: partNo, partName: part.name, questionCount: data.questions.filter((q) => !q.isExample).length, instruction: part.instructions || data.instruction, audioUrl: part.audioUrl, data: data, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+        }
         case 'MATCH_WORD_TO_PICTURE': {
             const data = transformMatchWordToPicture(questions);
             return (_jsx(MoversMatchWordToPictureRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, wordBank: data.wordBank, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));

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

@@ -8,9 +8,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
 import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
-function tokenize(sentence) {
-    return sentence.trim().split(/\s+/).filter(Boolean);
-}
+import { tokenizeCrossOutQuestion } from '../../../../questions/types/cross-out-word-group/tokenize';
 function normalizeWord(word) {
     return word.replace(/[^\p{L}\p{N}'-]/gu, '').toLowerCase();
 }
@@ -27,12 +25,20 @@ function formatAnswerLabel(answer) {
         return 'câu đúng (không gạch)';
     return `gạch "${answer.crossOut}"${posInfo}`;
 }
+function isCorrectToken(correct, tokenIndex, plain) {
+    if (!correct)
+        return false;
+    if (typeof correct.wordIndex === 'number' && correct.wordIndex >= 0) {
+        return correct.wordIndex === tokenIndex;
+    }
+    return Boolean(correct.crossOut) && normalizeWord(correct.crossOut) === plain && plain !== '';
+}
 function QuestionItem({ question, answer, onAnswerChange, isReviewMode, correctAnswer, id, }) {
     const isDisabled = isReviewMode || question.isExample;
     const currentAnswer = question.isExample
         ? question.exampleCorrectAnswer
         : answer;
-    const tokens = useMemo(() => tokenize(question.question), [question.question]);
+    const tokens = useMemo(() => tokenizeCrossOutQuestion(question.question), [question.question]);
     const selectedWord = currentAnswer?.crossOut || '';
     const selectedIndex = currentAnswer?.wordIndex;
     const replaceWith = currentAnswer?.replaceWith || '';
@@ -76,11 +82,10 @@ function QuestionItem({ question, answer, onAnswerChange, isReviewMode, correctA
             });
         }
         else {
-            const cleanWord = rawToken.replace(/[^\p{L}\p{N}'-]/gu, '') || rawToken;
             onAnswerChange(question.id, {
                 type: mode,
                 wordIndex: tokenIndex,
-                crossOut: cleanWord,
+                crossOut: rawToken,
                 ...(mode === 'CROSS_OUT_AND_REPLACE' ? { replaceWith } : {}),
             });
         }
@@ -109,9 +114,9 @@ function QuestionItem({ question, answer, onAnswerChange, isReviewMode, correctA
                                             ? 'bg-emerald-500'
                                             : isWrong
                                                 ? 'bg-rose-500'
-                                                : 'bg-blue-600'}`, children: question.questionNumber }), question.isExample && (_jsx("span", { className: "rounded-full border border-amber-300 bg-amber-100/90 px-2 py-0.5 text-[10.5px] font-extrabold uppercase tracking-wider text-amber-800", children: "EXAMPLE" })), _jsx("span", { className: `rounded-full px-2.5 py-0.5 text-[11px] font-bold ${mode === 'CROSS_OUT_AND_REPLACE'
+                                                : 'bg-blue-600'}`, children: question.questionNumber }), question.isExample && (_jsx("span", { className: "rounded-full border border-amber-300 bg-amber-100/90 px-2 py-0.5 text-[10.5px] font-extrabold uppercase tracking-wider text-amber-800", children: "EXAMPLE" })), isReviewMode ? (_jsx("span", { className: `rounded-full px-2.5 py-0.5 text-[11px] font-bold ${mode === 'CROSS_OUT_AND_REPLACE'
                                         ? 'bg-violet-100/80 text-violet-700 border border-violet-200/60'
-                                        : 'bg-sky-100/80 text-sky-700 border border-sky-200/60'}`, children: mode === 'CROSS_OUT_AND_REPLACE' ? 'Gạch + Thay thế' : 'Chỉ gạch' }), !question.isExample && selectedWord && (_jsxs("span", { className: "flex items-center gap-1 rounded-full bg-emerald-100 px-2 py-0.5 text-[10.5px] font-bold text-emerald-700", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-emerald-500" }), "\u0110\u00E3 g\u1EA1ch: \"", selectedWord, "\"", typeof selectedIndex === 'number' && (_jsxs("span", { className: "text-[10px] text-emerald-600 font-normal", children: ["(t\u1EEB #", selectedIndex + 1, ")"] }))] }))] }), mode === 'CROSS_OUT_AND_REPLACE' && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { className: "text-xs font-bold text-slate-600 whitespace-nowrap", children: "T\u1EEB \u0111\u00FAng:" }), _jsx("input", { type: "text", value: replaceWith, disabled: isDisabled, onChange: (e) => setReplaceWith(e.target.value), placeholder: "Nh\u1EADp t\u1EEB thay th\u1EBF...", className: "h-8 w-40 sm:w-52 rounded-lg border border-slate-200 bg-white px-2.5 text-sm font-semibold text-slate-800 outline-none transition-all focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-100 disabled:cursor-not-allowed disabled:bg-slate-50" })] }))] }), _jsx("div", { className: "flex flex-wrap items-center gap-1.5 sm:gap-2 text-[15.5px] sm:text-[16.5px] font-medium leading-loose text-slate-800 px-1", children: tokens.map((token, tokenIndex) => {
+                                        : 'bg-sky-100/80 text-sky-700 border border-sky-200/60'}`, children: mode === 'CROSS_OUT_AND_REPLACE' ? 'Gạch + Thay thế' : 'Chỉ gạch' })) : null, !question.isExample && selectedWord && (_jsxs("span", { className: "flex items-center gap-1 rounded-full bg-emerald-100 px-2 py-0.5 text-[10.5px] font-bold text-emerald-700", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-emerald-500" }), "\u0110\u00E3 g\u1EA1ch: \"", selectedWord, "\"", typeof selectedIndex === 'number' && (_jsxs("span", { className: "text-[10px] text-emerald-600 font-normal", children: ["(t\u1EEB #", selectedIndex + 1, ")"] }))] }))] }), mode === 'CROSS_OUT_AND_REPLACE' && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { className: "text-xs font-bold text-slate-600 whitespace-nowrap", children: "T\u1EEB \u0111\u00FAng:" }), _jsx("input", { type: "text", value: replaceWith, disabled: isDisabled, onChange: (e) => setReplaceWith(e.target.value), placeholder: "Nh\u1EADp t\u1EEB thay th\u1EBF...", className: "h-8 w-40 sm:w-52 rounded-lg border border-slate-200 bg-white px-2.5 text-sm font-semibold text-slate-800 outline-none transition-all focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-100 disabled:cursor-not-allowed disabled:bg-slate-50" })] }))] }), _jsx("div", { className: "flex flex-wrap items-center gap-1.5 sm:gap-2 text-[15.5px] sm:text-[16.5px] font-medium leading-loose text-slate-800 px-1", children: tokens.map((token, tokenIndex) => {
                         const plain = normalizeWord(token);
                         const isSelected = selectedIndex !== undefined && selectedIndex !== null
                             ? selectedIndex === tokenIndex
@@ -119,12 +124,21 @@ function QuestionItem({ question, answer, onAnswerChange, isReviewMode, correctA
                         const isCorrectTargetInReview = isReviewMode &&
                             !question.isExample &&
                             correctAnswer?.wordIndex === tokenIndex;
+                        const isSelectedCorrect = isReviewMode &&
+                            !question.isExample &&
+                            isSelected &&
+                            isCorrectToken(correctAnswer, tokenIndex, plain);
+                        const isSelectedWrong = isReviewMode &&
+                            !question.isExample &&
+                            isSelected &&
+                            !!correctAnswer &&
+                            !isSelectedCorrect;
                         return (_jsx("button", { type: "button", disabled: isDisabled || plain === '', onClick: () => setCrossOut(tokenIndex, token), className: `rounded-lg px-2 py-1 transition-all duration-150 select-none relative ${isSelected
                                 ? question.isExample
                                     ? 'bg-amber-200/90 text-amber-900 font-bold line-through decoration-amber-700 decoration-2 shadow-sm'
-                                    : isCorrect
+                                    : isSelectedCorrect
                                         ? 'bg-emerald-100 text-emerald-800 font-bold line-through decoration-emerald-600 decoration-2 shadow-sm border border-emerald-300'
-                                        : isWrong
+                                        : isSelectedWrong
                                             ? 'bg-rose-100 text-rose-700 font-bold line-through decoration-rose-600 decoration-2 shadow-sm border border-rose-300 scale-[0.98]'
                                             : 'bg-blue-100 text-blue-700 font-bold line-through decoration-blue-600 decoration-2 shadow-sm border border-blue-200 scale-[0.98]'
                                 : isCorrectTargetInReview

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

@@ -307,5 +307,5 @@ export function MoversCrosswordPuzzleRenderer({ partNumber, partName, questionCo
                                                                 inputRefs.current.delete(key);
                                                         }, type: "text", maxLength: 1, disabled: Boolean(isExample), value: cellValue, onChange: (e) => handleInputChange(e.target.value, r, c), onKeyDown: (e) => handleKeyDown(e, r, c), onFocus: () => handleCellClick(r, c), className: `w-full h-full text-center bg-transparent uppercase font-bold outline-none ${isExample ? 'cursor-default' : 'cursor-pointer'}` })) : (_jsxs("div", { className: "flex flex-col items-center justify-center", children: [_jsx("span", { children: cellValue || '—' }), reviewStatus && !reviewStatus.isCorrect && (_jsx("span", { className: "absolute -bottom-1 -right-1 text-[9px] bg-green-600 text-white font-bold px-1 rounded-full shadow", children: reviewStatus.expected }))] })), isReviewMode && reviewStatus && (_jsx("span", { className: `absolute -top-1 -right-1 rounded-full p-0.5 text-white ${reviewStatus.isCorrect ? 'bg-green-500' : 'bg-red-500'}`, children: reviewStatus.isCorrect ? (_jsx(Check, { className: "h-2.5 w-2.5" })) : (_jsx(X, { className: "h-2.5 w-2.5" })) }))] }, key));
                                         });
-                                    }) }) })] })] })] }));
+                                    }) }) }), (markedColumn || hiddenWord) && (_jsxs("div", { className: "w-full max-w-md rounded-xl border-2 border-amber-200 bg-amber-50 p-4", children: [_jsx("label", { className: "block text-sm font-bold text-amber-900 mb-2", children: "What's the hidden word?" }), !isReviewMode ? (_jsx("input", { type: "text", value: answers['hidden-word'] || '', onChange: (event) => onAnswerChange('hidden-word', event.target.value.toUpperCase()), placeholder: "Hidden word", className: "w-full rounded-lg border border-amber-300 bg-white px-3 py-2 text-sm font-semibold uppercase tracking-wider outline-none focus:border-amber-500" })) : (_jsxs("div", { className: "text-sm", children: [answers['hidden-word'] && (_jsx("span", { className: "font-semibold text-gray-800", children: answers['hidden-word'] })), hiddenWord && (_jsxs("div", { className: "mt-1 text-xs", children: [_jsx("span", { className: "text-gray-500", children: "\u0110\u00E1p \u00E1n: " }), _jsx("span", { className: "font-bold text-green-700", children: hiddenWord })] }))] }))] }))] })] })] }));
 }

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

@@ -8,6 +8,7 @@ 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 { FillInBlankAnswerKey } from '../../../../questions/types/fill-in-blank-group/FillInBlankAnswerKey';
 import { extractPlaceholderIndices, isBlankMatch, padStudentAnswers, splitStem, toFillInBlankImageUrls, } from '../../../../questions/types/fill-in-blank-group/blank-utils';
 function emptyAnswer(blankCount) {
     return { answers: Array.from({ length: blankCount }, () => '') };
@@ -53,7 +54,7 @@ function ItemCard({ question, answer, onAnswerChange, isReviewMode, correctAnswe
                                         : blankWrong
                                             ? 'border-rose-400 bg-rose-50 text-rose-800'
                                             : 'border-blue-200 bg-blue-50/40 text-blue-900 focus:border-blue-500 focus:bg-white'}` }, partIndex));
-                        }) })] }), isReviewMode && !question.isExample && expected.length > 0 && (_jsxs("div", { className: "mt-2 rounded-lg border border-emerald-200 bg-emerald-50 px-2.5 py-2 text-sm text-emerald-800", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", expected.map((alts) => alts.join(' / ') || '(trống)').join(' | ')] }))] }));
+                        }) })] }), isReviewMode && !question.isExample && expected.length > 0 && (_jsx("div", { className: "mt-2 rounded-lg border border-emerald-200 bg-emerald-50 px-2.5 py-2", children: _jsx(FillInBlankAnswerKey, { answersByBlank: expected, blankIndices: blankIndices }) }))] }));
 }
 export function MoversFillInBlankGroupRenderer({ partNumber, partName, questionCount, instruction, audioUrl, imageUrl, showHints = false, hints = [], questions, answers, onAnswerChange, isReviewMode = false, correctAnswerMap, }) {
     return (_jsxs("div", { className: "relative flex h-full flex-col gap-4 overflow-y-auto custom-scrollbar sm:gap-6", children: [_jsxs("div", { className: "flex flex-col gap-2 p-3 sm:gap-3 sm:px-6 sm:pt-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode })] }), (audioUrl || toFillInBlankImageUrls(imageUrl).length > 0) && (_jsxs("div", { className: "sticky top-0 z-20 flex flex-col gap-3 border-b border-gray-100 bg-white/95 p-3 pb-2 shadow-sm backdrop-blur sm:px-6", children: [audioUrl && _jsx(CambridgeYleAudioPlayer, { audioSrc: audioUrl, compact: true }), toFillInBlankImageUrls(imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: toFillInBlankImageUrls(imageUrl).map((url, imageIndex) => (_jsx(ResolvedImage, { src: url, alt: `Shared illustration ${imageIndex + 1}`, className: "max-h-[180px] rounded-lg object-contain" }, `group-image-${imageIndex}`))) }))] })), showHints && hints.length > 0 && !isReviewMode && (_jsx("div", { className: "flex flex-wrap gap-2 px-3 sm:px-6", children: hints.map((hint) => (_jsx("span", { className: "rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700", children: hint }, hint))) })), _jsx("div", { className: "grid grid-cols-1 gap-3 p-3 sm:grid-cols-2 sm:px-6 lg:grid-cols-3", children: questions.map((question) => (_jsx(ItemCard, { question: question, answer: answers[question.id], onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, correctAnswer: correctAnswerMap?.[question.id] }, question.id))) })] }));

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

@@ -0,0 +1,14 @@
+import type { MatchWordToPictureGroupPartData } from '../../utils/question-transformers';
+interface MoversMatchWordToPictureGroupRendererProps {
+    partNumber: number;
+    partName?: string;
+    questionCount: number;
+    instruction: string;
+    audioUrl?: string;
+    data: MatchWordToPictureGroupPartData;
+    answers: Record<string, string | undefined>;
+    onAnswerChange: (questionId: string, value: string) => void;
+    isReviewMode?: boolean;
+}
+export declare function MoversMatchWordToPictureGroupRenderer({ partNumber, partName, questionCount, instruction, audioUrl, data, answers, onAnswerChange, isReviewMode, }: MoversMatchWordToPictureGroupRendererProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,36 @@
+'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 { MatchWordToPictureGroupClient } from '../../../../questions/types/match-word-to-picture-group/MatchWordToPictureGroupClient';
+export function MoversMatchWordToPictureGroupRenderer({ partNumber, partName, questionCount, instruction, audioUrl, data, answers, onAnswerChange, isReviewMode = false, }) {
+    const userAnswers = data.questions.map((question) => {
+        if (question.isExample)
+            return question.correctAnswer;
+        return typeof answers[question.id] === 'string' ? answers[question.id] || '' : '';
+    });
+    const resolvedAudio = data.audioUrl || audioUrl || '';
+    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(MatchWordToPictureGroupClient, { questionData: {
+                        title: data.title,
+                        instruction: data.instruction,
+                        ...(data.passage ? { passage: data.passage } : {}),
+                        ...(resolvedAudio ? { audioUrl: resolvedAudio } : {}),
+                        ...(data.imageUrl ? { imageUrl: data.imageUrl } : {}),
+                        wordBank: data.wordBank,
+                        items: data.questions.map((question) => ({
+                            imageUrl: question.imageUrl,
+                            correctAnswer: question.correctAnswer,
+                            isExample: question.isExample,
+                            points: question.points,
+                            questionNumber: question.questionNumber,
+                        })),
+                        explanation: data.explanation,
+                    }, isReviewMode: isReviewMode, userAnswers: userAnswers, onAnswerChange: (next) => {
+                        next.forEach((value, index) => {
+                            const target = data.questions[index];
+                            if (target && !target.isExample) {
+                                onAnswerChange(target.id, value);
+                            }
+                        });
+                    } }) })] }));
+}

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

@@ -13,9 +13,13 @@ export function MoversMatchingWithLinesGroupRenderer({ partNumber, partName, que
     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(MatchingWithLinesGroupClient, { questionData: {
                         title: data.title,
                         instruction: data.instruction,
+                        ...(data.passage ? { passage: data.passage } : {}),
+                        ...(data.audioUrl ? { audioUrl: data.audioUrl } : {}),
+                        ...(data.imageUrl ? { imageUrl: data.imageUrl } : {}),
                         rightItems: data.rightItems,
                         items: data.questions.map((question) => ({
                             imageUrl: question.imageUrl,
+                            text: question.text,
                             correctAnswer: question.correctRightId,
                             isExample: question.isExample,
                             points: question.points,

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

@@ -17,6 +17,7 @@ export { MoversWordOrderingGroupRenderer } from './MoversWordOrderingGroupRender
 export { MoversWordFillParagraphRenderer } from './MoversWordFillParagraphRenderer';
 export { MoversMatchByWritingAnswerRenderer } from './MoversMatchByWritingAnswerRenderer';
 export { MoversMatchWordToPictureRenderer } from './MoversMatchWordToPictureRenderer';
+export { MoversMatchWordToPictureGroupRenderer } from './MoversMatchWordToPictureGroupRenderer';
 export { MoversWordFillStructuredFormRenderer } from './MoversWordFillStructuredFormRenderer';
 export { MoversWordOrderAndMatchGroupRenderer } from './MoversWordOrderAndMatchGroupRenderer';
 export { MoversMatchingWithLinesGroupRenderer } from './MoversMatchingWithLinesGroupRenderer';

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

@@ -21,6 +21,7 @@ export { MoversWordOrderingGroupRenderer } from './MoversWordOrderingGroupRender
 export { MoversWordFillParagraphRenderer } from './MoversWordFillParagraphRenderer';
 export { MoversMatchByWritingAnswerRenderer } from './MoversMatchByWritingAnswerRenderer';
 export { MoversMatchWordToPictureRenderer } from './MoversMatchWordToPictureRenderer';
+export { MoversMatchWordToPictureGroupRenderer } from './MoversMatchWordToPictureGroupRenderer';
 export { MoversWordFillStructuredFormRenderer } from './MoversWordFillStructuredFormRenderer';
 export { MoversWordOrderAndMatchGroupRenderer } from './MoversWordOrderAndMatchGroupRenderer';
 export { MoversMatchingWithLinesGroupRenderer } from './MoversMatchingWithLinesGroupRenderer';

package/dist/components/exams/take/components/speaking/renderers/SpeakingSpontaneousQaGroupRenderer.js

@@ -37,14 +37,24 @@ export function SpeakingSpontaneousQaGroupRenderer(props) {
     useEffect(() => {
         setSequenceStep(getInitialSequenceStep());
     }, [getInitialSequenceStep, setup.nav.currentIndex]);
+    const hasQuestionAudio = Boolean(content?.audioUrl?.trim());
     useEffect(() => {
         if (sequenceStep !== SPONTANEOUS_QA_SEQUENCE_STEP.DELAYING || shouldResumeCompletedState)
             return;
         const timer = setTimeout(() => {
-            setSequenceStep(SPONTANEOUS_QA_SEQUENCE_STEP.PLAYING_QUESTION);
+            setSequenceStep(hasQuestionAudio
+                ? SPONTANEOUS_QA_SEQUENCE_STEP.PLAYING_QUESTION
+                : SPONTANEOUS_QA_SEQUENCE_STEP.ALLOW_RECORDING);
         }, 3000);
         return () => clearTimeout(timer);
-    }, [sequenceStep, shouldResumeCompletedState]);
+    }, [hasQuestionAudio, sequenceStep, shouldResumeCompletedState]);
+    useEffect(() => {
+        if (sequenceStep === SPONTANEOUS_QA_SEQUENCE_STEP.PLAYING_QUESTION &&
+            !hasQuestionAudio &&
+            !shouldResumeCompletedState) {
+            setSequenceStep(SPONTANEOUS_QA_SEQUENCE_STEP.ALLOW_RECORDING);
+        }
+    }, [hasQuestionAudio, sequenceStep, shouldResumeCompletedState]);
     const handleTeacherVideoEnded = useCallback(() => {
         setSequenceStep(SPONTANEOUS_QA_SEQUENCE_STEP.DELAYING);
         props.onTeacherIntroPlayed?.();

package/dist/components/exams/take/hooks/useSpontaneousQaGroupRendererSetup.js

@@ -27,8 +27,9 @@ export function useSpontaneousQaGroupRendererSetup({ part, answers, onAnswerChan
                 flattenIndex: child.flattenIndex,
                 expectedAnswers: child.expectedAnswers,
                 points: child.points,
+                isExample: child.isExample,
             },
-            is_example: false,
+            is_example: child.isExample,
             correct_answer: { expectedAnswers: child.expectedAnswers },
             total_points: String(child.points),
             question_type: 'SPONTANEOUS_QA_GROUP',

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

@@ -90,6 +90,7 @@ function findParentQuestion(subQuestionId, parts) {
             part.questionType === 'TRUE_FALSE_CORRECT_GROUP' ||
             part.questionType === 'FILL_IN_BLANK_GROUP' ||
             part.questionType === 'MATCHING_WITH_LINES_GROUP' ||
+            part.questionType === 'MATCH_WORD_TO_PICTURE_GROUP' ||
             part.questionType === 'WORD_ORDER_AND_MATCH_GROUP' ||
             part.questionType === 'SPONTANEOUS_QA_GROUP' ||
             part.questionType === 'ANSWER_THE_QUESTION_GROUP' ||
@@ -263,6 +264,16 @@ export function transformAnswersForSubmission(answers, parts) {
         if (speakingQuestionIds.has(questionId) && typeof answer === 'string') {
             continue;
         }
+        if (questionId === 'hidden-word') {
+            const parent = findGridParentQuestion(parts);
+            if (parent?.questionType === 'CROSSWORD_PUZZLE') {
+                if (!gridCellAnswers.has(parent.parentId)) {
+                    gridCellAnswers.set(parent.parentId, {});
+                }
+                gridCellAnswers.get(parent.parentId)['hidden-word'] = String(answer);
+            }
+            continue;
+        }
         // Handle grid cell keys (from FILL_MISSING_WORDS_IN_GRID)
         if (isGridCellKey(questionId)) {
             const parent = findGridParentQuestion(parts);
@@ -454,9 +465,14 @@ export function transformAnswersForSubmission(answers, parts) {
                     words[`down-${c.number}`] = word;
                 }
             }
+            const hiddenWord = cellAnswers['hidden-word'];
+            const cells = Object.fromEntries(Object.entries(cellAnswers).filter(([key]) => key !== 'hidden-word'));
+            if (hiddenWord) {
+                words['hidden-word'] = hiddenWord;
+            }
             result.push({
                 questionId: parentId,
-                answer: { answers: words, cells: cellAnswers },
+                answer: { answers: words, cells },
             });
         }
         else {

package/dist/components/exams/take/utils/cross-out-word-group.transformer.js

@@ -63,21 +63,19 @@ export function normalizeCrossOutWordGroupAnswer(raw) {
         const rawIndex = obj.wordIndex;
         const wordIndex = typeof rawIndex === 'number' && Number.isInteger(rawIndex) && rawIndex >= 0
             ? rawIndex
-            : rawIndex === null
-                ? null
-                : undefined;
+            : null;
         return type === 'CROSS_OUT_AND_REPLACE'
             ? {
                 type,
-                ...(wordIndex !== undefined ? { wordIndex } : {}),
+                wordIndex,
                 crossOut: typeof obj.crossOut === 'string' ? obj.crossOut : '',
                 replaceWith: typeof obj.replaceWith === 'string' ? obj.replaceWith : '',
             }
             : {
                 type: 'CROSS_OUT',
-                ...(wordIndex !== undefined ? { wordIndex } : {}),
+                wordIndex,
                 crossOut: typeof obj.crossOut === 'string' ? obj.crossOut : '',
             };
     }
-    return { type: 'CROSS_OUT', crossOut: '' };
+    return { type: 'CROSS_OUT', wordIndex: null, crossOut: '' };
 }

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, ReadingPassageQuestion, LabelThePictureLabel, 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' | 'READ_PASSAGE_AND_ANSWER_QUESTIONS' | 'LABEL_THE_PICTURE' | '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' | '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' | 'READ_PASSAGE_AND_ANSWER_QUESTIONS' | 'LABEL_THE_PICTURE' | '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' | 'MATCH_WORD_TO_PICTURE_GROUP' | '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' | 'SPEAKING_CUE_CARD';
 export interface ApiQuestion {
     id: string;
     content: any;
@@ -372,6 +372,25 @@ export declare function transformMatchWordToPicture(questions: ApiQuestion[]): {
     wordBank: string[];
     instruction: string;
 };
+export interface MatchWordToPictureGroupQuestionItem {
+    id: string;
+    questionNumber: number;
+    imageUrl?: string | string[];
+    correctAnswer: string;
+    isExample: boolean;
+    points: number;
+}
+export interface MatchWordToPictureGroupPartData {
+    questions: MatchWordToPictureGroupQuestionItem[];
+    wordBank: string[];
+    title?: string;
+    instruction: string;
+    passage?: string;
+    audioUrl?: string;
+    imageUrl?: string | string[];
+    explanation?: string;
+}
+export declare function transformMatchWordToPictureGroup(questions: ApiQuestion[]): MatchWordToPictureGroupPartData;
 export declare function transformWriteSentences(questions: ApiQuestion[]): {
     questions: Array<{
         id: string;
@@ -472,14 +491,19 @@ export interface CrosswordClueItem {
     startRow: number;
     startCol: number;
     length: number;
+    isExample?: boolean;
 }
 export interface CrosswordPuzzlePartData {
+    type?: 'STANDARD' | 'HIDDEN_WORD';
     title?: string;
     instruction: string;
     gridSize: {
         rows: number;
         cols: number;
     };
+    markedColumn?: number;
+    hiddenWord?: string;
+    caseSensitive?: boolean;
     clues: {
         across: CrosswordClueItem[];
         down: CrosswordClueItem[];
@@ -569,7 +593,8 @@ export declare function transformChooseThenAnswerGroup(questions: ApiQuestion[])
 export interface MatchingWithLinesGroupQuestionItem {
     id: string;
     questionNumber: number;
-    imageUrl: string;
+    imageUrl?: string;
+    text?: string;
     correctRightId: string;
     isExample: boolean;
     points: number;
@@ -578,10 +603,14 @@ export interface MatchingWithLinesGroupPartData {
     questions: MatchingWithLinesGroupQuestionItem[];
     rightItems: Array<{
         id: string;
-        text: string;
+        text?: string;
+        imageUrl?: string;
     }>;
     title?: string;
     instruction: string;
+    passage?: string;
+    audioUrl?: string | string[];
+    imageUrl?: string | string[];
     explanation?: string;
 }
 export declare function transformMatchingWithLinesGroup(questions: ApiQuestion[]): MatchingWithLinesGroupPartData;

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

@@ -1045,6 +1045,39 @@ export function transformMatchWordToPicture(questions) {
         instruction,
     };
 }
+export function transformMatchWordToPictureGroup(questions) {
+    const parent = questions[0];
+    const content = (parent?.content || {});
+    const items = Array.isArray(content.items) ? content.items : [];
+    const parentCorrect = Array.isArray(parent?.correct_answer?.answer)
+        ? parent.correct_answer.answer
+        : [];
+    const title = typeof content.meta?.title === 'string' ? content.meta.title.trim() : '';
+    const passage = typeof content.meta?.passage === 'string' ? content.meta.passage.trim() : '';
+    const audioUrl = typeof content.meta?.audioUrl === 'string' ? content.meta.audioUrl.trim() : '';
+    return {
+        questions: items.map((item, index) => {
+            const isExample = item.isExample === true;
+            const fromItem = typeof item.correctAnswer?.answer === 'string' ? item.correctAnswer.answer : '';
+            const fromParent = typeof parentCorrect[index] === 'string' ? parentCorrect[index] : '';
+            return {
+                id: `${parent?.id || 'q'}-item-${index}`,
+                questionNumber: item.questionNumber || index + 1,
+                imageUrl: item.content?.imageUrl,
+                correctAnswer: fromItem || fromParent,
+                isExample,
+                points: isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+            };
+        }),
+        wordBank: Array.isArray(content.meta?.wordBank) ? content.meta.wordBank : [],
+        ...(title ? { title } : {}),
+        instruction: content.meta?.instruction || 'Look and complete.',
+        ...(passage ? { passage } : {}),
+        ...(audioUrl ? { audioUrl } : {}),
+        ...(content.meta?.imageUrl ? { imageUrl: content.meta.imageUrl } : {}),
+        explanation: parent?.explanation,
+    };
+}
 export function transformWriteSentences(questions) {
     const firstQuestion = questions[0];
     const content = firstQuestion?.content;
@@ -1258,6 +1291,7 @@ export function transformCrosswordPuzzle(questions) {
             startRow: Number(c.startRow) || 1,
             startCol: Number(c.startCol) || 1,
             length: Number(c.length) || 1,
+            ...(c.isExample === true ? { isExample: true } : {}),
         }))
         : [];
     const down = Array.isArray(content?.clues?.down)
@@ -1267,15 +1301,20 @@ export function transformCrosswordPuzzle(questions) {
             startRow: Number(c.startRow) || 1,
             startCol: Number(c.startCol) || 1,
             length: Number(c.length) || 1,
+            ...(c.isExample === true ? { isExample: true } : {}),
         }))
         : [];
     const correctAnswers = correctAnswer?.answers && typeof correctAnswer.answers === 'object'
         ? correctAnswer.answers
         : {};
     return {
+        type: content?.type === 'HIDDEN_WORD' ? 'HIDDEN_WORD' : 'STANDARD',
         title: content?.title || '',
         instruction: question?.instruction || content?.instruction || 'Complete the crossword.',
         gridSize: { rows, cols },
+        ...(typeof content?.markedColumn === 'number' ? { markedColumn: content.markedColumn } : {}),
+        hiddenWord: correctAnswers['hidden-word'] || '',
+        caseSensitive: correctAnswer?.caseSensitive === true,
         clues: { across, down },
         correctAnswers,
         explanation: question?.explanation,
@@ -1382,18 +1421,25 @@ export function transformMatchingWithLinesGroup(questions) {
     const rightItems = Array.isArray(content.rightItems)
         ? content.rightItems.map((item, index) => ({
             id: typeof item?.id === 'string' ? item.id : `r${index + 1}`,
-            text: typeof item?.text === 'string' ? item.text : '',
+            ...(typeof item?.text === 'string' && item.text.trim() ? { text: item.text } : {}),
+            ...(typeof item?.imageUrl === 'string' && item.imageUrl.trim() ? { imageUrl: item.imageUrl } : {}),
         }))
         : [];
+    const passage = content.meta?.passage?.trim() || '';
+    const audioUrl = content.meta?.audioUrl;
+    const imageUrl = content.meta?.imageUrl;
     return {
         questions: items.map((item, index) => {
             const isExample = item.isExample === true;
             const fromItem = typeof item.correctAnswer?.answer === 'string' ? item.correctAnswer.answer : '';
             const fromParent = typeof parentCorrect[index] === 'string' ? parentCorrect[index] : '';
+            const itemImage = item.content?.imageUrl?.trim() || '';
+            const itemText = item.content?.text?.trim() || '';
             return {
                 id: `${parent?.id || 'q'}-item-${index}`,
                 questionNumber: item.questionNumber || index + 1,
-                imageUrl: item.content?.imageUrl || '',
+                ...(itemImage ? { imageUrl: itemImage } : {}),
+                ...(itemText ? { text: itemText } : {}),
                 correctRightId: fromItem || fromParent,
                 isExample,
                 points: isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
@@ -1402,6 +1448,9 @@ export function transformMatchingWithLinesGroup(questions) {
         rightItems,
         title: content.meta?.title || '',
         instruction: content.meta?.instruction || 'Look and match.',
+        ...(passage ? { passage } : {}),
+        ...(audioUrl ? { audioUrl } : {}),
+        ...(imageUrl ? { imageUrl } : {}),
         explanation: parent?.explanation,
     };
 }

package/dist/components/questions/_shared/components/compact/KidChoiceRow.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export declare function optionLetter(index: number): string;
+export declare function KidChoiceRow({ letter, selected, isReviewMode, isCorrect, disabled, onClick, children, className, }: {
+    letter: string;
+    selected?: boolean;
+    isReviewMode?: boolean;
+    isCorrect?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/questions/_shared/components/compact/KidChoiceRow.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, X } from 'lucide-react';
+import { cn } from '../../../../../shared/lib/utils';
+export function optionLetter(index) {
+    return String.fromCharCode(65 + index);
+}
+export function KidChoiceRow({ letter, selected = false, isReviewMode = false, isCorrect = false, disabled = false, onClick, children, className, }) {
+    const showStatus = isReviewMode && (isCorrect || selected);
+    const rowTone = isReviewMode
+        ? isCorrect
+            ? 'border-green-400 bg-green-50'
+            : selected
+                ? 'border-red-400 bg-red-50'
+                : 'border-gray-200 bg-gray-50'
+        : selected
+            ? 'border-blue-500 bg-blue-50 shadow-sm ring-2 ring-blue-100'
+            : 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50 hover:shadow-sm';
+    const badgeTone = isReviewMode
+        ? isCorrect
+            ? 'bg-green-500 text-white'
+            : selected
+                ? 'bg-red-500 text-white'
+                : 'bg-gray-200 text-gray-600'
+        : selected
+            ? 'bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-sm'
+            : 'bg-gray-100 text-gray-600 group-hover:bg-gray-200';
+    return (_jsxs("button", { type: "button", onClick: onClick, disabled: disabled || isReviewMode || !onClick, className: cn('group flex w-full items-center gap-2 rounded-md border px-3 py-1.5 text-left transition-all', rowTone, (disabled || isReviewMode || !onClick) && 'cursor-default', className), children: [_jsx("div", { className: cn('flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full text-xs font-bold transition-all', badgeTone), children: letter }), _jsx("div", { className: cn('min-w-0 flex-1 text-sm font-medium', isReviewMode && isCorrect
+                    ? 'text-green-800'
+                    : isReviewMode && selected && !isCorrect
+                        ? 'text-red-800'
+                        : 'text-gray-700'), children: children }), showStatus && (_jsx("div", { className: cn('flex h-5 w-5 shrink-0 items-center justify-center rounded-full', isCorrect ? 'bg-green-500' : 'bg-red-500'), children: isCorrect ? _jsx(Check, { className: "h-3 w-3 text-white" }) : _jsx(X, { className: "h-3 w-3 text-white" }) }))] }));
+}