@tinyweb_dev/oe-exam-sdk 0.2.3 → 0.2.5

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, MoversCrossOutWordGroupRenderer, MoversAnswerTheQuestionRenderer, MoversWriteSentencesRenderer, MoversWordOrderingRenderer, MoversWordFillParagraphRenderer, MoversMatchByWritingAnswerRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderAndMatchGroupRenderer, MoversCrosswordPuzzleRenderer, FindWordsInMatrixRenderer, } from './question-renderers';
+import { MoversListenAndWriteRenderer, MoversChooseBestAnswerRenderer, MoversChooseAdjectiveRenderer, MoversWritingRenderer, MoversColoringRenderer, MoversPictureChooseRenderer, MoversPictureFillBlankChooseRenderer, MoversReadingPassageRenderer, MoversLabelThePictureRenderer, MoversFillWordHintRenderer, MoversGridFillRenderer, MoversTrueFalseRenderer, MoversTrueFalseCorrectGroupRenderer, MoversCrossOutWordGroupRenderer, MoversAnswerTheQuestionRenderer, MoversWriteSentencesRenderer, MoversWordOrderingRenderer, MoversWordFillParagraphRenderer, MoversMatchByWritingAnswerRenderer, MoversMatchWordToPictureRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderAndMatchGroupRenderer, MoversCrosswordPuzzleRenderer, FindWordsInMatrixRenderer, } 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, transformWordOrdering, transformWordFillParagraph, transformMatchByWritingAnswer, transformWriteSentences, transformWordFillStructuredForm, transformWordOrderAndMatchGroup, 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, transformWordOrdering, transformWordFillParagraph, transformMatchByWritingAnswer, transformMatchWordToPicture, transformWriteSentences, transformWordFillStructuredForm, transformWordOrderAndMatchGroup, transformCrosswordPuzzle, transformFindWordsInMatrix, } 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, }) {
@@ -66,7 +66,7 @@ export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode =
             const firstQuestion = questions[0];
             const data = transformWriteShortLetter(firstQuestion);
             const writingAnswer = answers[firstQuestion.id] || '';
-            return (_jsx(MoversWritingRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions, prompt: data.prompt, requirements: data.requirements, minWords: data.minWords, maxWords: data.maxWords, answer: writingAnswer, onAnswerChange: (value) => onAnswerChange(firstQuestion.id, value), isReviewMode: isReviewMode, guideImages: data.guideImages }));
+            return (_jsx(MoversWritingRenderer, { partNumber: partNo, partName: part.name, instruction: part.instructions, prompt: data.prompt, requirements: data.requirements, minWords: data.minWords, maxWords: data.maxWords, answer: writingAnswer, onAnswerChange: (value) => onAnswerChange(firstQuestion.id, value), isReviewMode: isReviewMode, guideImages: data.guideImages, passage: data.passage }));
         }
         case 'READ_AND_COLOR_OBJECTS': {
             const data = transformColorObjects(questions);
@@ -157,6 +157,10 @@ export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode =
             const data = transformTrueFalseGroup(questions);
             return (_jsx(MoversTrueFalseRenderer, { 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_CORRECT_GROUP': {
+            const data = transformTrueFalseCorrectGroup(questions);
+            return (_jsx(MoversTrueFalseCorrectGroupRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+        }
         case 'CROSS_OUT_WORD_GROUP': {
             const data = transformCrossOutWordGroup(questions);
             return (_jsx(MoversCrossOutWordGroupRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
@@ -190,6 +194,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': {
+            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 }));
+        }
         case 'WORD_FILL_STRUCTURED_FORM': {
             const data = transformWordFillStructuredForm(questions);
             return (_jsx(MoversWordFillStructuredFormRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, audioUrl: data.audioUrl || part.audioUrl, groupTitle: data.groupTitle, groupContent: data.groupContent, groupImageUrl: data.groupImageUrl, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));

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

@@ -0,0 +1,10 @@
+export declare function getChooseBestAnswerOptionImageSrc(option: {
+    imageUrl?: string;
+    text?: string;
+}): string;
+export declare function toChooseBestAnswerImageUrls(value?: string | string[]): string[];
+export declare function ChooseBestAnswerImages({ imageUrl, className, imageClassName, }: {
+    imageUrl?: string | string[];
+    className?: string;
+    imageClassName?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ZoomIn } from 'lucide-react';
+import { useState } from 'react';
+import { cn } from '../../../../../shared/lib/utils';
+import { ResolvedImage } from '../../../../../components/common/ResolvedImage';
+export function getChooseBestAnswerOptionImageSrc(option) {
+    if (typeof option.imageUrl === 'string' && option.imageUrl.trim() !== '') {
+        return option.imageUrl.trim();
+    }
+    if (typeof option.text === 'string' && option.text.trim() !== '') {
+        return option.text.trim();
+    }
+    return '';
+}
+export function toChooseBestAnswerImageUrls(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 [];
+}
+function QuestionImage({ imageUrl, imageClassName, }) {
+    const [isZoomed, setIsZoomed] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative flex items-center justify-center", children: [_jsx(ResolvedImage, { src: imageUrl, alt: "Question illustration", className: cn('cursor-pointer rounded-lg object-contain shadow-md', imageClassName ?? 'max-h-[250px]'), onClick: () => setIsZoomed(true) }), _jsx("button", { type: "button", onClick: () => setIsZoomed(true), className: "absolute right-2 top-2 rounded-full bg-white/80 p-1.5 shadow-md hover:bg-white", "aria-label": "Zoom image", children: _jsx(ZoomIn, { className: "h-4 w-4 text-gray-600" }) })] }), isZoomed && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/70", onClick: () => setIsZoomed(false), children: _jsx(ResolvedImage, { src: imageUrl, alt: "Question illustration (zoomed)", className: "max-h-[90vh] max-w-[90vw] rounded-lg object-contain", showLoadingState: false }) }))] }));
+}
+export function ChooseBestAnswerImages({ imageUrl, className, imageClassName, }) {
+    const urls = toChooseBestAnswerImageUrls(imageUrl);
+    if (urls.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { className: cn('flex flex-wrap justify-center gap-3', className), children: urls.map((url, index) => (_jsx(QuestionImage, { imageUrl: url, imageClassName: imageClassName }, `${url}-${index}`))) }));
+}

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

@@ -1,12 +1,11 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ZoomIn } from 'lucide-react';
-import { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../../../../shared/lib/utils';
 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 { ChooseBestAnswerImages, getChooseBestAnswerOptionImageSrc } from './ChooseBestAnswerImages';
 function normalizeRenderableText(value) {
     if (typeof value === 'string') {
         return value;
@@ -41,16 +40,11 @@ function normalizeRenderableText(value) {
     }
     return '';
 }
-// Image with zoom functionality
-function QuestionImage({ imageUrl }) {
-    const [isZoomed, setIsZoomed] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative flex items-center justify-center", children: [_jsx(ResolvedImage, { src: imageUrl, alt: "Question illustration", className: "max-h-[250px] cursor-pointer rounded-lg object-contain shadow-md", onClick: () => setIsZoomed(true) }), _jsx("button", { type: "button", onClick: () => setIsZoomed(true), className: "absolute right-2 top-2 rounded-full bg-white/80 p-1.5 shadow-md hover:bg-white", "aria-label": "Zoom image", children: _jsx(ZoomIn, { className: "h-4 w-4 text-gray-600" }) })] }), isZoomed && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/70", onClick: () => setIsZoomed(false), children: _jsx(ResolvedImage, { src: imageUrl, alt: "Question illustration (zoomed)", className: "max-h-[90vh] max-w-[90vw] rounded-lg object-contain", showLoadingState: false }) }))] }));
-}
 // Example Section Component
 function ExampleSection({ example }) {
-    return (_jsxs("div", { className: "rounded-lg border-2 border-orange-300 bg-white p-4", children: [_jsx("p", { className: "mb-3 text-sm font-semibold text-gray-700", children: "Example:" }), _jsxs("p", { className: "mb-3 text-[19px] font-bold text-[#001590]", children: [example.questionNumber, ". ", normalizeRenderableText(example.questionText)] }), example.imageUrl && (_jsx("div", { className: "mb-3", children: _jsx(QuestionImage, { imageUrl: example.imageUrl }) })), example.optionType === 'image' ? (_jsx("div", { className: "grid gap-3 px-2", style: { gridTemplateColumns: `repeat(${example.options.length}, minmax(0, 1fr))` }, children: example.options.map((option) => {
+    return (_jsxs("div", { className: "rounded-lg border-2 border-orange-300 bg-white p-4", children: [_jsx("p", { className: "mb-3 text-sm font-semibold text-gray-700", children: "Example:" }), _jsxs("p", { className: "mb-3 text-[19px] font-bold text-[#001590]", children: [example.questionNumber, ". ", normalizeRenderableText(example.questionText)] }), _jsx(ChooseBestAnswerImages, { imageUrl: example.imageUrl, className: "mb-3" }), example.optionType === 'image' ? (_jsx("div", { className: "grid gap-3 px-2", style: { gridTemplateColumns: `repeat(${example.options.length}, minmax(0, 1fr))` }, children: example.options.map((option) => {
                     const isCorrect = option.id === example.correctOptionId;
-                    return (_jsxs("div", { className: `relative flex flex-col items-center gap-1 rounded-[16px] border-[3px] p-4 pt-6 mt-3 transition-colors ${isCorrect ? 'border-green-500 bg-green-50' : 'border-blue-200 bg-white'}`, children: [_jsx("div", { className: "absolute -top-[14px] left-1/2 -translate-x-1/2 bg-blue-600 text-white w-[28px] h-[28px] rounded-full flex items-center justify-center font-bold text-[15px] shadow-sm", children: option.label }), _jsx(ResolvedImage, { src: option.text, alt: `Option ${option.label}`, className: "w-40 rounded object-contain mb-2" }), _jsx("div", { className: cn("w-7 h-7 rounded-full flex items-center justify-center border-[3px] transition-all mt-auto", isCorrect
+                    return (_jsxs("div", { className: `relative flex flex-col items-center gap-1 rounded-[16px] border-[3px] p-4 pt-6 mt-3 transition-colors ${isCorrect ? 'border-green-500 bg-green-50' : 'border-blue-200 bg-white'}`, children: [_jsx("div", { className: "absolute -top-[14px] left-1/2 -translate-x-1/2 bg-blue-600 text-white w-[28px] h-[28px] rounded-full flex items-center justify-center font-bold text-[15px] shadow-sm", children: option.label }), _jsx(ResolvedImage, { src: getChooseBestAnswerOptionImageSrc(option), alt: `Option ${option.label}`, className: "w-40 rounded object-contain mb-2" }), _jsx("div", { className: cn("w-7 h-7 rounded-full flex items-center justify-center border-[3px] transition-all mt-auto", isCorrect
                                     ? "bg-green-500 border-green-500 text-white"
                                     : "border-gray-300 bg-white text-transparent"), children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }) })] }, option.id));
                 }) })) : (_jsx("div", { className: "flex flex-col gap-2 pl-2", children: example.options.map((option) => {
@@ -105,7 +99,7 @@ function QuestionItem({ question, selectedOptionIds, onSelect, isReviewMode, id,
         }
         return selectedOptionIds.includes(optionId) || correctOptionIds.includes(optionId);
     };
-    return (_jsxs("div", { id: id, className: "mb-6", children: [_jsxs("p", { className: "mb-3 text-[19px] font-bold text-[#001590]", children: [question.questionNumber, ". ", normalizeRenderableText(question.questionText)] }), isMultipleAnswers && (_jsx("p", { className: "mb-3 pl-2 text-sm font-medium text-blue-600", children: "Ch\u1ECDn nhi\u1EC1u \u0111\u00E1p \u00E1n" })), question.imageUrl && (_jsx("div", { className: "mb-3", children: _jsx(QuestionImage, { imageUrl: question.imageUrl }) })), question.optionType === 'image' ? (_jsx("div", { className: "grid gap-3 px-2", style: { gridTemplateColumns: `repeat(${question.options.length}, minmax(0, 1fr))` }, children: question.options.map((option) => (_jsxs("button", { type: "button", onClick: () => !isReviewMode && onSelect(option.id), disabled: isReviewMode, className: `relative flex flex-col items-center gap-1 rounded-[16px] border-[3px] p-4 pt-6 mt-3 transition-colors ${getOptionStyle(option.id)} ${isReviewMode ? 'cursor-default' : 'cursor-pointer'}`, children: [_jsx("div", { className: "absolute -top-[14px] left-1/2 -translate-x-1/2 bg-blue-600 text-white w-[28px] h-[28px] rounded-full flex items-center justify-center font-bold text-[15px] shadow-sm", children: option.label }), _jsx(ResolvedImage, { src: option.text, alt: `Option ${option.label}`, className: "w-35 rounded object-contain mb-2" }), _jsx("div", { className: cn("w-7 h-7 rounded-full flex items-center justify-center border-[3px] transition-all mt-auto", showIndicatorMark(option.id)
+    return (_jsxs("div", { id: id, className: "mb-6", children: [_jsxs("p", { className: "mb-3 text-[19px] font-bold text-[#001590]", children: [question.questionNumber, ". ", normalizeRenderableText(question.questionText)] }), isMultipleAnswers && (_jsx("p", { className: "mb-3 pl-2 text-sm font-medium text-blue-600", children: "Ch\u1ECDn nhi\u1EC1u \u0111\u00E1p \u00E1n" })), _jsx(ChooseBestAnswerImages, { imageUrl: question.imageUrl, className: "mb-3" }), question.optionType === 'image' ? (_jsx("div", { className: "grid gap-3 px-2", style: { gridTemplateColumns: `repeat(${question.options.length}, minmax(0, 1fr))` }, children: question.options.map((option) => (_jsxs("button", { type: "button", onClick: () => !isReviewMode && onSelect(option.id), disabled: isReviewMode, className: `relative flex flex-col items-center gap-1 rounded-[16px] border-[3px] p-4 pt-6 mt-3 transition-colors ${getOptionStyle(option.id)} ${isReviewMode ? 'cursor-default' : 'cursor-pointer'}`, children: [_jsx("div", { className: "absolute -top-[14px] left-1/2 -translate-x-1/2 bg-blue-600 text-white w-[28px] h-[28px] rounded-full flex items-center justify-center font-bold text-[15px] shadow-sm", children: option.label }), _jsx(ResolvedImage, { src: getChooseBestAnswerOptionImageSrc(option), alt: `Option ${option.label}`, className: "w-35 rounded object-contain mb-2" }), _jsx("div", { className: cn("w-7 h-7 rounded-full flex items-center justify-center border-[3px] transition-all mt-auto", showIndicatorMark(option.id)
                                 ? "bg-blue-600 border-blue-600 text-white"
                                 : "border-gray-300 bg-white text-transparent"), children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }) })] }, option.id))) })) : (_jsx("div", { className: "flex flex-col gap-2 pl-2", children: question.options.map((option) => (_jsxs("button", { type: "button", onClick: () => !isReviewMode && onSelect(option.id), disabled: isReviewMode, className: `flex items-center gap-3 rounded-lg border-2 px-3 py-2 text-left transition-colors ${getOptionStyle(option.id)} ${isReviewMode ? 'cursor-default' : 'cursor-pointer'}`, children: [_jsxs("span", { className: "text-sm font-medium text-gray-600", children: [option.label, "."] }), _jsx("span", { className: "flex-1 text-sm text-gray-700", children: normalizeRenderableText(option.text) }), _jsx("div", { className: `flex h-5 w-5 items-center justify-center border-2 ${isMultipleAnswers ? 'rounded-md' : 'rounded-full'} ${getIndicatorStyle(option.id)}`, children: showIndicatorMark(option.id) && (_jsx("div", { className: `${isMultipleAnswers ? 'h-2.5 w-2.5 rounded-sm' : 'h-2 w-2 rounded-full'} bg-white` })) })] }, option.id))) }))] }));
 }

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

@@ -0,0 +1,16 @@
+import type { MatchWordToPictureQuestion } from '../../utils/question-transformers';
+interface MoversMatchWordToPictureRendererProps {
+    partNumber: number;
+    partName?: string;
+    questionCount: number;
+    instruction: string;
+    wordBank: string[];
+    questions: MatchWordToPictureQuestion[];
+    answers: Record<string, string>;
+    onAnswerChange: (questionId: string, value: string) => void;
+    isReviewMode?: boolean;
+    correctAnswerTextMap?: Record<string, string>;
+    isCorrectMap?: Record<string, boolean | null>;
+}
+export declare function MoversMatchWordToPictureRenderer({ partNumber, partName, questionCount, instruction, wordBank, questions, answers, onAnswerChange, isReviewMode, correctAnswerTextMap, isCorrectMap, }: MoversMatchWordToPictureRendererProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,75 @@
+/**
+ * MATCH_WORD_TO_PICTURE Renderer
+ * Shared word bank chips + picture grid + dropdown (one word used once).
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Check, ChevronDown, X } from 'lucide-react';
+import { ResolvedImage } from '../../../../../components/common/ResolvedImage';
+import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+function normalizeWord(value) {
+    return value.trim().toLowerCase();
+}
+function WordChip({ word, isUsed }) {
+    return (_jsx("span", { className: `rounded-full border px-3 py-1 text-sm font-semibold ${isUsed
+            ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
+            : 'border-violet-200 bg-white text-slate-700'}`, children: word }));
+}
+function AnswerSelector({ value, onChange, disabled, wordBank, usedWords, }) {
+    return (_jsxs("div", { className: "group relative min-w-[160px] sm:min-w-[210px]", children: [_jsxs("select", { value: value, onChange: (event) => onChange(event.target.value), disabled: disabled, className: "h-[48px] w-full appearance-none rounded-2xl border border-slate-200 bg-white px-4 pr-11 text-sm font-semibold text-slate-700 shadow-sm outline-none transition-all duration-200 hover:border-violet-300 focus:border-violet-500 focus:ring-4 focus:ring-violet-100/50 disabled:cursor-not-allowed disabled:opacity-60", "aria-label": "Ch\u1ECDn t\u1EEB ph\u00F9 h\u1EE3p", children: [_jsx("option", { value: "", children: "Ch\u1ECDn t\u1EEB" }), wordBank.map((word, index) => {
+                        const isUsedByOther = usedWords.has(normalizeWord(word)) && normalizeWord(word) !== normalizeWord(value);
+                        return (_jsx("option", { value: word, disabled: isUsedByOther, children: word }, `${word}-${index}`));
+                    })] }), _jsx("div", { className: "pointer-events-none absolute right-2.5 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full bg-slate-100 text-slate-500 transition-colors group-focus-within:bg-violet-100 group-focus-within:text-violet-600", children: _jsx(ChevronDown, { className: "h-3.5 w-3.5", strokeWidth: 2.5 }) })] }));
+}
+function ReviewAnswer({ userAnswer, correctAnswer, status, }) {
+    const badgeCls = status === 'correct'
+        ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
+        : status === 'incorrect'
+            ? 'border-red-200 bg-red-50 text-red-700'
+            : 'border-slate-200 bg-slate-50 text-slate-700';
+    return (_jsxs("div", { className: `flex w-full items-center justify-center gap-2 rounded-xl border px-5 py-2 text-[15px] shadow-sm sm:w-auto ${badgeCls}`, children: [status === 'correct' && (_jsxs(_Fragment, { children: [_jsx(Check, { className: "h-4 w-4 shrink-0", strokeWidth: 3 }), _jsx("span", { className: "font-medium opacity-90", children: "\u0110\u00E1p \u00E1n:" }), _jsx("span", { className: "ml-1 rounded-md border border-emerald-100 bg-white px-2.5 py-0.5 font-bold shadow-sm", children: userAnswer || 'Trống' })] })), status === 'unanswered' && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium opacity-80", children: "\u0110\u00E1p \u00E1n:" }), _jsx("span", { className: "rounded-md border border-slate-200 bg-white px-2.5 py-0.5 font-bold shadow-sm", children: correctAnswer })] })), status === 'incorrect' && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(X, { className: "h-4 w-4 shrink-0", strokeWidth: 3 }), _jsx("span", { className: "font-medium opacity-90", children: "\u0110\u00E1p \u00E1n:" }), _jsx("span", { className: "rounded-md border border-red-100/50 bg-white/60 px-2 py-0.5 font-semibold line-through decoration-red-400/80 decoration-2 opacity-70", children: userAnswer || 'Trống' }), _jsx("span", { className: "font-bold text-red-400", children: "\u2192" }), _jsx("span", { className: "rounded-md border border-red-200 bg-white px-2.5 py-0.5 font-bold shadow-sm", children: correctAnswer })] }))] }));
+}
+function PictureCard({ question, rawAnswer, isDisabled, isExampleQ, onAnswerChange, isReviewMode, correctAnswer, answerStatus, wordBank, usedWords, }) {
+    return (_jsxs("div", { className: [
+            'flex flex-col gap-4 overflow-hidden rounded-[14px] border p-4 shadow-sm transition-all duration-200',
+            isExampleQ
+                ? 'border-amber-200 bg-gradient-to-br from-amber-50 to-orange-50/50 shadow-amber-100/40'
+                : 'border-slate-200/80 bg-white hover:-translate-y-0.5 hover:border-violet-200 hover:shadow-md hover:shadow-violet-100/50',
+        ].join(' '), children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("span", { className: `flex h-[38px] w-[38px] shrink-0 items-center justify-center rounded-[10px] text-[15px] font-extrabold text-white shadow-sm ${isExampleQ
+                            ? 'bg-gradient-to-br from-amber-400 to-orange-500'
+                            : 'bg-gradient-to-br from-violet-500 to-indigo-600'}`, children: question.questionNumber }), isExampleQ && (_jsx("span", { className: "w-fit rounded-full border border-amber-300 bg-amber-100 px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-amber-700", children: "Example" }))] }), question.imageUrl && (_jsx("div", { className: "flex w-full justify-center", children: _jsx(ResolvedImage, { src: question.imageUrl, alt: `Q${question.questionNumber}`, className: "h-32 w-auto min-w-[5rem] rounded-xl border border-slate-100 bg-slate-50 object-contain p-1.5 shadow-sm" }) })), _jsx("div", { className: "mt-1 flex w-full items-center justify-end border-t border-slate-100/80 pt-3", children: isReviewMode && !isExampleQ ? (_jsx(ReviewAnswer, { userAnswer: rawAnswer, correctAnswer: correctAnswer, status: answerStatus ?? 'unanswered' })) : (_jsx("div", { className: "w-full sm:w-auto", children: _jsx(AnswerSelector, { value: rawAnswer, onChange: (value) => onAnswerChange(question.id, value), disabled: isDisabled, wordBank: wordBank, usedWords: usedWords }) })) })] }));
+}
+export function MoversMatchWordToPictureRenderer({ partNumber, partName, questionCount, instruction, wordBank, questions, answers, onAnswerChange, isReviewMode = false, correctAnswerTextMap = {}, isCorrectMap = {}, }) {
+    const getAnswerStatus = (questionId) => {
+        const userAnswer = answers[questionId];
+        if (!userAnswer)
+            return 'unanswered';
+        const isCorrect = isCorrectMap[questionId];
+        if (isCorrect === true)
+            return 'correct';
+        if (isCorrect === false)
+            return 'incorrect';
+        return 'unanswered';
+    };
+    const usedWords = new Set();
+    Object.values(answers).forEach((value) => {
+        if (typeof value === 'string' && value.trim()) {
+            usedWords.add(normalizeWord(value));
+        }
+    });
+    questions.forEach((question) => {
+        if (question.isExample && question.exampleAnswer) {
+            usedWords.add(normalizeWord(question.exampleAnswer));
+        }
+    });
+    const exampleQuestions = questions.filter((question) => question.isExample);
+    const actualQuestions = questions.filter((question) => !question.isExample);
+    return (_jsxs("div", { className: "custom-scrollbar flex h-full flex-col gap-5 overflow-y-auto sm:gap-6", children: [_jsxs("div", { className: "flex flex-col gap-4 p-3 sm:gap-5 sm:px-6 sm:pt-2", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode }), wordBank.length > 0 && (_jsxs("div", { className: "rounded-[20px] border border-slate-200/80 bg-gradient-to-br from-white via-white to-slate-50 p-4 shadow-lg shadow-slate-100/70 sm:p-5", children: [_jsx("h3", { className: "mb-4 text-sm font-bold uppercase tracking-[0.18em] text-slate-500", children: "Word bank" }), _jsx("div", { className: "flex flex-wrap gap-2", children: wordBank.map((word, index) => (_jsx(WordChip, { word: word, isUsed: usedWords.has(normalizeWord(word)) }, `${word}-${index}`))) })] })), exampleQuestions.length > 0 && (_jsx("div", { className: "mt-2 grid grid-cols-1 gap-4 lg:grid-cols-2", children: exampleQuestions.map((question) => {
+                            const rawAnswer = answers[question.id] || question.exampleAnswer || '';
+                            return (_jsx("div", { id: `question-${question.id}`, className: "w-full", children: _jsx(PictureCard, { question: question, rawAnswer: rawAnswer, isDisabled: true, isExampleQ: true, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, correctAnswer: correctAnswerTextMap[question.id], wordBank: wordBank, usedWords: usedWords }) }, question.id));
+                        }) }))] }), exampleQuestions.length > 0 && actualQuestions.length > 0 && (_jsx("div", { className: "px-3 sm:px-6", children: _jsx("hr", { className: "my-2 border-t border-slate-200/60" }) })), _jsx("div", { className: "grid grid-cols-1 gap-4 p-3 sm:gap-5 sm:px-6 sm:pb-6 lg:grid-cols-2", children: actualQuestions.map((question) => {
+                    const rawAnswer = answers[question.id] || '';
+                    return (_jsx("div", { id: `question-${question.id}`, className: "w-full", children: _jsx(PictureCard, { question: question, rawAnswer: rawAnswer, isDisabled: isReviewMode, isExampleQ: false, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, correctAnswer: correctAnswerTextMap[question.id], answerStatus: isReviewMode ? getAnswerStatus(question.id) : undefined, wordBank: wordBank, usedWords: usedWords }) }, question.id));
+                }) })] }));
+}

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

@@ -0,0 +1,18 @@
+/**
+ * TRUE_FALSE_CORRECT_GROUP Renderer
+ * Tick/Cross each sentence and rewrite false sentences.
+ */
+import type { TrueFalseCorrectGroupQuestion, TrueFalseCorrectItemAnswer } from '../../utils/question-transformers';
+interface MoversTrueFalseCorrectGroupRendererProps {
+    partNumber: number;
+    partName?: string;
+    questionCount: number;
+    instruction: string;
+    questions: TrueFalseCorrectGroupQuestion[];
+    answers: Record<string, TrueFalseCorrectItemAnswer | undefined>;
+    onAnswerChange: (questionId: string, value: TrueFalseCorrectItemAnswer) => void;
+    isReviewMode?: boolean;
+    correctAnswerMap?: Record<string, TrueFalseCorrectItemAnswer>;
+}
+export declare function MoversTrueFalseCorrectGroupRenderer({ partNumber, partName, questionCount, instruction, questions, answers, onAnswerChange, isReviewMode, correctAnswerMap, }: MoversTrueFalseCorrectGroupRendererProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * TRUE_FALSE_CORRECT_GROUP Renderer
+ * Tick/Cross each sentence and rewrite false sentences.
+ */
+import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+function normalizeText(value) {
+    return value.trim().toLowerCase().replace(/\s+/g, ' ');
+}
+function parseCorrectAnswer(raw) {
+    if (!raw || typeof raw !== 'object' || Array.isArray(raw)) {
+        return undefined;
+    }
+    const obj = raw;
+    if (typeof obj.isTrue !== 'boolean') {
+        return undefined;
+    }
+    return {
+        isTrue: obj.isTrue,
+        correction: obj.isTrue ? '' : (typeof obj.correction === 'string' ? obj.correction : ''),
+    };
+}
+function emptyAnswer() {
+    return { isTrue: null, correction: '' };
+}
+function isFullyCorrect(student, correct) {
+    if (!student || !correct || student.isTrue === null) {
+        return false;
+    }
+    if (student.isTrue !== correct.isTrue) {
+        return false;
+    }
+    if (correct.isTrue) {
+        return true;
+    }
+    return normalizeText(student.correction) === normalizeText(correct.correction);
+}
+function QuestionItem({ question, answer, onAnswerChange, isReviewMode, correctAnswer, id, }) {
+    const isDisabled = isReviewMode || question.isExample;
+    const currentAnswer = question.isExample
+        ? (question.exampleCorrectAnswer || emptyAnswer())
+        : (answer || emptyAnswer());
+    const expected = question.isExample
+        ? question.exampleCorrectAnswer
+        : parseCorrectAnswer(correctAnswer) || correctAnswer;
+    const hasCorrectAnswer = isReviewMode && !!expected && typeof expected.isTrue === 'boolean';
+    const isCorrect = hasCorrectAnswer && isFullyCorrect(currentAnswer, expected);
+    const isWrong = hasCorrectAnswer && currentAnswer.isTrue !== null && !isCorrect;
+    const showCorrection = currentAnswer.isTrue === false || (hasCorrectAnswer && expected?.isTrue === false);
+    const setTruth = (isTrue) => {
+        onAnswerChange(question.id, {
+            isTrue,
+            correction: isTrue ? '' : (currentAnswer.correction || ''),
+        });
+    };
+    return (_jsxs("div", { id: id, className: `w-full rounded-2xl border p-4 sm:p-4.5 transition-all duration-200 ${question.isExample
+            ? 'border-amber-200 bg-gradient-to-r from-amber-50/70 via-orange-50/30 to-amber-50/50 shadow-sm'
+            : isCorrect
+                ? 'border-emerald-300 bg-emerald-50/30 shadow-sm'
+                : isWrong
+                    ? 'border-rose-300 bg-rose-50/30 shadow-sm'
+                    : currentAnswer.isTrue !== null
+                        ? 'border-blue-200 bg-blue-50/20 shadow-sm'
+                        : 'border-slate-200/90 bg-white shadow-sm hover:border-blue-200 hover:shadow'}`, children: [_jsxs("div", { className: "flex flex-col md:flex-row md:items-center justify-between gap-3 sm:gap-4", children: [_jsxs("div", { className: "flex flex-1 items-start sm:items-center gap-3", children: [_jsx("span", { className: `flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full text-xs font-black text-white shadow-sm ${question.isExample
+                                    ? 'bg-gradient-to-br from-amber-400 to-orange-500'
+                                    : isCorrect
+                                        ? 'bg-emerald-500'
+                                        : isWrong
+                                            ? 'bg-rose-500'
+                                            : 'bg-blue-600'}`, children: question.questionNumber }), _jsxs("div", { className: "flex flex-1 flex-col sm:flex-row sm:items-center gap-2 sm:gap-3", children: [question.isExample && (_jsx("span", { className: "self-start sm:self-center rounded-full border border-amber-300 bg-amber-100/90 px-2.5 py-0.5 text-[10.5px] font-extrabold uppercase tracking-wider text-amber-800 flex-shrink-0", children: "EXAMPLE" })), _jsx("p", { className: "text-[15.5px] sm:text-[16.5px] font-medium leading-relaxed text-slate-800", children: question.question })] })] }), _jsxs("div", { className: "flex items-center gap-2.5 flex-shrink-0 self-end md:self-center pl-10 md:pl-0", children: [_jsx("button", { type: "button", disabled: isDisabled, onClick: () => setTruth(true), className: `h-9 min-w-[90px] rounded-xl border-2 px-4 text-sm font-bold transition-all flex items-center justify-center gap-1 select-none ${currentAnswer.isTrue === true
+                                    ? isReviewMode && isWrong && !question.isExample
+                                        ? 'border-rose-500 bg-rose-50 text-rose-700'
+                                        : 'border-emerald-500 bg-emerald-50 text-emerald-700 shadow-sm'
+                                    : hasCorrectAnswer && expected?.isTrue === true && !question.isExample
+                                        ? 'border-emerald-500 bg-emerald-50 text-emerald-700 ring-2 ring-emerald-300'
+                                        : 'border-slate-200 bg-slate-50/80 text-slate-700 hover:border-emerald-400 hover:bg-emerald-50/50 hover:text-emerald-700'} ${isDisabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'}`, children: "\u2713 True" }), _jsx("button", { type: "button", disabled: isDisabled, onClick: () => setTruth(false), className: `h-9 min-w-[90px] rounded-xl border-2 px-4 text-sm font-bold transition-all flex items-center justify-center gap-1 select-none ${currentAnswer.isTrue === false
+                                    ? isReviewMode && isWrong && !question.isExample
+                                        ? 'border-rose-500 bg-rose-50 text-rose-700'
+                                        : 'border-emerald-500 bg-emerald-50 text-emerald-700 shadow-sm'
+                                    : hasCorrectAnswer && expected?.isTrue === false && !question.isExample
+                                        ? 'border-emerald-500 bg-emerald-50 text-emerald-700 ring-2 ring-emerald-300'
+                                        : 'border-slate-200 bg-slate-50/80 text-slate-700 hover:border-rose-400 hover:bg-rose-50/50 hover:text-rose-700'} ${isDisabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'}`, children: "\u2717 False" })] })] }), showCorrection && (_jsxs("div", { className: "mt-3 border-t border-slate-100 pt-3", children: [_jsx("label", { className: "mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500", children: "Correct the false sentence" }), isDisabled ? (_jsx("p", { className: "rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-800", children: currentAnswer.correction || '(empty)' })) : (_jsx("textarea", { value: currentAnswer.correction, onChange: (event) => onAnswerChange(question.id, {
+                            isTrue: false,
+                            correction: event.target.value,
+                        }), placeholder: "Write the correct sentence...", rows: 2, className: "w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800 outline-none ring-blue-200 focus:border-blue-400 focus:ring-2" }))] })), isWrong && hasCorrectAnswer && !question.isExample && (_jsxs("div", { className: "mt-2.5 flex flex-col gap-1 border-t border-slate-100 pt-2 text-xs font-semibold", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 text-rose-600", children: [_jsxs("span", { children: ["Student: ", currentAnswer.isTrue === null ? '(empty)' : currentAnswer.isTrue ? 'True' : 'False'] }), _jsx("span", { children: "\u2022" }), _jsxs("span", { className: "text-emerald-700", children: ["Correct: ", expected?.isTrue ? 'True' : 'False'] })] }), expected?.isTrue === false && (_jsxs("div", { className: "text-emerald-700", children: ["Correct sentence: ", expected.correction || '(empty)'] }))] }))] }));
+}
+export function MoversTrueFalseCorrectGroupRenderer({ partNumber, partName, questionCount, instruction, questions, answers, onAnswerChange, isReviewMode = false, correctAnswerMap = {}, }) {
+    const exampleQuestions = questions.filter((question) => question.isExample);
+    const regularQuestions = questions.filter((question) => !question.isExample);
+    return (_jsxs("div", { className: "custom-scrollbar flex h-full flex-col gap-4 overflow-y-auto sm:gap-5 pb-6", children: [_jsxs("div", { className: "flex flex-col gap-3.5 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 }), exampleQuestions.length > 0 && (_jsx("div", { className: "mt-1 flex flex-col gap-3", children: exampleQuestions.map((question) => (_jsx(QuestionItem, { id: `question-${question.id}`, question: question, answer: answers[question.id], onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, correctAnswer: correctAnswerMap[question.id] }, question.id))) }))] }), exampleQuestions.length > 0 && regularQuestions.length > 0 && (_jsx("div", { className: "px-3 sm:px-6", children: _jsx("hr", { className: "border-t border-dashed border-slate-200" }) })), _jsx("div", { className: "flex flex-col gap-3 px-3 sm:px-6", children: regularQuestions.map((question) => (_jsx(QuestionItem, { id: `question-${question.id}`, question: question, answer: answers[question.id], onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, correctAnswer: correctAnswerMap[question.id] }, question.id))) })] }));
+}

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

@@ -11,10 +11,11 @@ interface MoversWritingRendererProps {
     onAnswerChange: (value: string) => void;
     isReviewMode?: boolean;
     guideImages?: string[];
+    passage?: string;
     teacherScore?: number | null;
     maxScore?: number;
     teacherFeedback?: string | null;
     writingAssessment?: WritingAssessment | null;
 }
-export declare function MoversWritingRenderer({ partNumber, partName, instruction, prompt, requirements, minWords, maxWords, answer, onAnswerChange, isReviewMode, guideImages, teacherScore, maxScore, teacherFeedback, writingAssessment, }: MoversWritingRendererProps): import("react").JSX.Element;
+export declare function MoversWritingRenderer({ partNumber, partName, instruction, prompt, requirements, minWords, maxWords, answer, onAnswerChange, isReviewMode, guideImages, passage, teacherScore, maxScore, teacherFeedback, writingAssessment, }: MoversWritingRendererProps): import("react").JSX.Element;
 export {};

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

@@ -5,14 +5,14 @@ import { ResolvedImage } from '../../../../../components/common/ResolvedImage';
 import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
 import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
 import { HtmlOrText } from '../../../../../shared/lib/html-content';
-export function MoversWritingRenderer({ partNumber, partName, instruction, prompt, requirements, minWords, maxWords, answer, onAnswerChange, isReviewMode = false, guideImages, teacherScore, maxScore, teacherFeedback, writingAssessment, }) {
+export function MoversWritingRenderer({ partNumber, partName, instruction, prompt, requirements, minWords, maxWords, answer, onAnswerChange, isReviewMode = false, guideImages, passage, teacherScore, maxScore, teacherFeedback, writingAssessment, }) {
     // Count words by splitting on whitespace and filtering empty strings
     const wordCount = useMemo(() => {
         if (!answer || !answer.trim())
             return 0;
         return answer.trim().split(/\s+/).filter(Boolean).length;
     }, [answer]);
-    return (_jsxs("div", { className: "flex flex-col h-full gap-4 sm:gap-6 overflow-y-auto custom-scrollbar relative", children: [_jsxs("div", { className: "flex flex-col gap-2 sm:gap-3 p-3 sm:px-6 sm:pt-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: 1, partName: partName, isReviewMode: isReviewMode }), instruction && _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode })] }), _jsx("div", { className: "flex flex-col gap-4 p-3 sm:px-6 sm:pt-0 sticky top-0 z-20 bg-white/95 backdrop-blur pb-2 shadow-sm border-b border-gray-100", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "rounded-2xl border border-slate-200 bg-white p-5 shadow-sm", children: _jsxs("div", { className: "flex flex-col gap-4 text-base leading-relaxed text-gray-800", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-lg font-semibold text-slate-900", children: "Writing task" }), _jsx(HtmlOrText, { value: prompt, className: "text-base leading-relaxed text-gray-800" })] }), requirements && requirements.length > 0 && (_jsxs("div", { className: "rounded-xl bg-slate-50 p-4", children: [_jsx("p", { className: "text-sm font-bold uppercase tracking-wide text-slate-700", children: "Include" }), _jsx("ul", { className: "mt-3 space-y-2", children: requirements.map((req, index) => (_jsxs("li", { className: "flex items-start gap-2 text-sm text-slate-700", children: [_jsx("span", { className: "mt-1.5 h-2 w-2 rounded-full bg-blue-500" }), _jsx(HtmlOrText, { value: req, as: "span" })] }, index))) })] })), (minWords || maxWords) && (_jsxs("div", { className: "flex flex-wrap gap-2", children: [minWords && (_jsxs("div", { className: "inline-flex items-center rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-sm font-medium text-blue-700", children: ["Minimum: ", minWords, " words"] })), maxWords && (_jsxs("div", { className: "inline-flex items-center rounded-full border border-slate-200 bg-white px-3 py-1 text-sm font-medium text-slate-600", children: ["Suggested max: ", maxWords, " words"] }))] }))] }) }), guideImages && guideImages.length > 0 && (_jsxs("div", { className: "rounded-2xl border border-slate-200 bg-white p-4 shadow-sm", children: [_jsxs("div", { className: "mb-3 flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-sm font-semibold uppercase tracking-wide text-slate-600", children: "Story pictures" }), _jsx("p", { className: "text-xs text-slate-400", children: "Read the sequence from left to right" })] }), _jsx("div", { className: `grid gap-4 ${guideImages.length === 1 ? 'grid-cols-1' : 'grid-cols-1 sm:grid-cols-2'}`, children: guideImages.map((src, idx) => (_jsxs("div", { className: "rounded-xl border border-slate-200 bg-slate-50/80 p-2 shadow-sm", children: [_jsx(ResolvedImage, { src: src, alt: `Picture ${idx + 1}`, className: `w-full rounded-lg bg-white object-contain ${guideImages.length === 1 ? 'max-h-[400px]' : 'aspect-[4/3]'}` }), _jsx("div", { className: "pt-2 text-center text-[13px] font-medium text-slate-500", children: guideImages.length > 1 ? `Picture ${idx + 1}` : 'Reference Image' })] }, idx))) })] }))] }) }), _jsxs("div", { className: "flex flex-col gap-3 p-3 sm:px-6 sm:pb-6", children: [_jsxs("div", { className: "rounded-2xl border border-slate-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-slate-100 px-5 py-3 bg-slate-50/50 rounded-t-2xl", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-semibold uppercase tracking-wide text-slate-500", children: "Your answer" }), _jsx("p", { className: "text-xs text-slate-400", children: "Write clearly and organise your ideas in order." })] }), _jsxs("div", { className: `rounded-full px-3 py-1 text-sm font-semibold ${minWords && wordCount < minWords
+    return (_jsxs("div", { className: "flex flex-col h-full gap-4 sm:gap-6 overflow-y-auto custom-scrollbar relative", children: [_jsxs("div", { className: "flex flex-col gap-2 sm:gap-3 p-3 sm:px-6 sm:pt-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: 1, partName: partName, isReviewMode: isReviewMode }), instruction && _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode })] }), _jsx("div", { className: "flex flex-col gap-4 p-3 sm:px-6 sm:pt-0 sticky top-0 z-20 bg-white/95 backdrop-blur pb-2 shadow-sm border-b border-gray-100", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "rounded-2xl border border-slate-200 bg-white p-5 shadow-sm", children: _jsxs("div", { className: "flex flex-col gap-4 text-base leading-relaxed text-gray-800", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-lg font-semibold text-slate-900", children: "Writing task" }), _jsx(HtmlOrText, { value: prompt, className: "text-base leading-relaxed text-gray-800" })] }), passage?.trim() && (_jsxs("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50/60 p-4", children: [_jsx("p", { className: "text-sm font-bold uppercase tracking-wide text-indigo-800", children: "Read" }), _jsx(HtmlOrText, { value: passage, className: "mt-3 text-sm leading-relaxed text-slate-800" })] })), requirements && requirements.length > 0 && (_jsxs("div", { className: "rounded-xl bg-slate-50 p-4", children: [_jsx("p", { className: "text-sm font-bold uppercase tracking-wide text-slate-700", children: "Include" }), _jsx("ul", { className: "mt-3 space-y-2", children: requirements.map((req, index) => (_jsxs("li", { className: "flex items-start gap-2 text-sm text-slate-700", children: [_jsx("span", { className: "mt-1.5 h-2 w-2 rounded-full bg-blue-500" }), _jsx(HtmlOrText, { value: req, as: "span" })] }, index))) })] })), (minWords || maxWords) && (_jsxs("div", { className: "flex flex-wrap gap-2", children: [minWords && (_jsxs("div", { className: "inline-flex items-center rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-sm font-medium text-blue-700", children: ["Minimum: ", minWords, " words"] })), maxWords && (_jsxs("div", { className: "inline-flex items-center rounded-full border border-slate-200 bg-white px-3 py-1 text-sm font-medium text-slate-600", children: ["Suggested max: ", maxWords, " words"] }))] }))] }) }), guideImages && guideImages.length > 0 && (_jsxs("div", { className: "rounded-2xl border border-slate-200 bg-white p-4 shadow-sm", children: [_jsxs("div", { className: "mb-3 flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-sm font-semibold uppercase tracking-wide text-slate-600", children: "Story pictures" }), _jsx("p", { className: "text-xs text-slate-400", children: "Read the sequence from left to right" })] }), _jsx("div", { className: `grid gap-4 ${guideImages.length === 1 ? 'grid-cols-1' : 'grid-cols-1 sm:grid-cols-2'}`, children: guideImages.map((src, idx) => (_jsxs("div", { className: "rounded-xl border border-slate-200 bg-slate-50/80 p-2 shadow-sm", children: [_jsx(ResolvedImage, { src: src, alt: `Picture ${idx + 1}`, className: `w-full rounded-lg bg-white object-contain ${guideImages.length === 1 ? 'max-h-[400px]' : 'aspect-[4/3]'}` }), _jsx("div", { className: "pt-2 text-center text-[13px] font-medium text-slate-500", children: guideImages.length > 1 ? `Picture ${idx + 1}` : 'Reference Image' })] }, idx))) })] }))] }) }), _jsxs("div", { className: "flex flex-col gap-3 p-3 sm:px-6 sm:pb-6", children: [_jsxs("div", { className: "rounded-2xl border border-slate-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-slate-100 px-5 py-3 bg-slate-50/50 rounded-t-2xl", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-semibold uppercase tracking-wide text-slate-500", children: "Your answer" }), _jsx("p", { className: "text-xs text-slate-400", children: "Write clearly and organise your ideas in order." })] }), _jsxs("div", { className: `rounded-full px-3 py-1 text-sm font-semibold ${minWords && wordCount < minWords
                                             ? 'border border-amber-200 bg-amber-50 text-amber-700'
                                             : 'border border-emerald-200 bg-emerald-50 text-emerald-700'}`, children: [wordCount, " words"] })] }), _jsxs("div", { className: "p-4", children: [_jsx("textarea", { id: "writing-answer", name: "writing-answer", value: answer, onChange: (e) => {
                                             const newValue = e.target.value;

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

@@ -10,12 +10,14 @@ export { MoversLabelThePictureRenderer } from './MoversLabelThePictureRenderer';
 export { MoversFillWordHintRenderer } from './MoversFillWordHintRenderer';
 export { MoversGridFillRenderer } from './MoversGridFillRenderer';
 export { MoversTrueFalseRenderer } from './MoversTrueFalseRenderer';
+export { MoversTrueFalseCorrectGroupRenderer } from './MoversTrueFalseCorrectGroupRenderer';
 export { MoversCrossOutWordGroupRenderer } from './MoversCrossOutWordGroupRenderer';
 export { MoversAnswerTheQuestionRenderer } from './MoversAnswerTheQuestionRenderer';
 export { MoversWriteSentencesRenderer } from './MoversWriteSentencesRenderer';
 export { MoversWordOrderingRenderer } from './MoversWordOrderingRenderer';
 export { MoversWordFillParagraphRenderer } from './MoversWordFillParagraphRenderer';
 export { MoversMatchByWritingAnswerRenderer } from './MoversMatchByWritingAnswerRenderer';
+export { MoversMatchWordToPictureRenderer } from './MoversMatchWordToPictureRenderer';
 export { MoversWordFillStructuredFormRenderer } from './MoversWordFillStructuredFormRenderer';
 export { MoversWordOrderAndMatchGroupRenderer } from './MoversWordOrderAndMatchGroupRenderer';
 export { MoversCrosswordPuzzleRenderer } from './MoversCrosswordPuzzleRenderer';

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

@@ -14,12 +14,14 @@ export { MoversFillWordHintRenderer } from './MoversFillWordHintRenderer';
 export { MoversGridFillRenderer } from './MoversGridFillRenderer';
 // Starters & Movers renderers
 export { MoversTrueFalseRenderer } from './MoversTrueFalseRenderer';
+export { MoversTrueFalseCorrectGroupRenderer } from './MoversTrueFalseCorrectGroupRenderer';
 export { MoversCrossOutWordGroupRenderer } from './MoversCrossOutWordGroupRenderer';
 export { MoversAnswerTheQuestionRenderer } from './MoversAnswerTheQuestionRenderer';
 export { MoversWriteSentencesRenderer } from './MoversWriteSentencesRenderer';
 export { MoversWordOrderingRenderer } from './MoversWordOrderingRenderer';
 export { MoversWordFillParagraphRenderer } from './MoversWordFillParagraphRenderer';
 export { MoversMatchByWritingAnswerRenderer } from './MoversMatchByWritingAnswerRenderer';
+export { MoversMatchWordToPictureRenderer } from './MoversMatchWordToPictureRenderer';
 export { MoversWordFillStructuredFormRenderer } from './MoversWordFillStructuredFormRenderer';
 export { MoversWordOrderAndMatchGroupRenderer } from './MoversWordOrderAndMatchGroupRenderer';
 export { MoversCrosswordPuzzleRenderer } from './MoversCrosswordPuzzleRenderer';

package/dist/components/exams/take/exam-taking.utils.d.ts

@@ -113,6 +113,7 @@ export declare function transformWriteShortLetter(question: ExamTakingQuestion |
     minWords: number | undefined;
     maxWords: number | undefined;
     guideImages: string[];
+    passage: string | undefined;
 };
 export declare function transformWordFillStructuredForm(questions: ExamTakingQuestion[]): {
     instruction: string;

package/dist/components/exams/take/exam-taking.utils.js

@@ -61,7 +61,7 @@ export function transformWordFillParagraph(questions) {
  */
 export function transformWriteShortLetter(question) {
     if (!question) {
-        return { prompt: '', requirements: [], minWords: undefined, maxWords: undefined, guideImages: [] };
+        return { prompt: '', requirements: [], minWords: undefined, maxWords: undefined, guideImages: [], passage: undefined };
     }
     const content = asRecord(question.content);
     const instructions = asRecord(content.instructions);
@@ -72,6 +72,12 @@ export function transformWriteShortLetter(question) {
     const guideImages = readStringArray(question.content, 'guideImages');
     const minWords = readNumber(question.content, 'minWords');
     const maxWords = readNumber(question.content, 'maxWords');
+    const passageRaw = content.passage ?? content.passages;
+    const passage = typeof passageRaw === 'string' && passageRaw.trim()
+        ? passageRaw
+        : Array.isArray(passageRaw)
+            ? passageRaw.filter((item) => typeof item === 'string' && item.trim().length > 0).join('\n\n') || undefined
+            : undefined;
     // New structure: use instructions.mainInstruction as prompt, informations as requirements
     if (mainInstruction || informations.length) {
         return {
@@ -80,6 +86,7 @@ export function transformWriteShortLetter(question) {
             minWords,
             maxWords,
             guideImages,
+            passage,
         };
     }
     // Legacy structure: build prompt from contexts array
@@ -99,6 +106,7 @@ export function transformWriteShortLetter(question) {
         minWords,
         maxWords,
         guideImages,
+        passage,
     };
 }
 export function transformWordFillStructuredForm(questions) {

package/dist/components/exams/take/types.d.ts

@@ -115,6 +115,7 @@ export interface ChooseBestAnswerOption {
     id: string;
     label: string;
     text: string;
+    imageUrl?: string;
 }
 export interface ChooseBestAnswerQuestion {
     id: string;
@@ -123,7 +124,7 @@ export interface ChooseBestAnswerQuestion {
     options: ChooseBestAnswerOption[];
     correctOptionId?: string;
     correctOptionIds?: string[];
-    imageUrl?: string;
+    imageUrl?: string | string[];
     audioUrl?: string;
     optionType?: 'text' | 'image';
     multipleAnswers?: boolean;
@@ -135,7 +136,7 @@ export interface ChooseBestAnswerExample {
     options: ChooseBestAnswerOption[];
     correctOptionId: string;
     optionType?: 'text' | 'image';
-    imageUrl?: string;
+    imageUrl?: string | string[];
     audioUrl?: string;
 }
 export interface MoversChooseBestAnswerRendererProps {

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

@@ -87,6 +87,7 @@ function findParentQuestion(subQuestionId, parts) {
         if (part.questionType === 'CHOOSE_THE_CORRECT_ANSWER_GROUP' ||
             part.questionType === 'CROSS_OUT_WORD_GROUP' ||
             part.questionType === 'TRUE_FALSE_GROUP' ||
+            part.questionType === 'TRUE_FALSE_CORRECT_GROUP' ||
             part.questionType === 'WORD_ORDER_AND_MATCH_GROUP' ||
             part.questionType === 'SPONTANEOUS_QA_GROUP' ||
             part.questionType === 'ANSWER_THE_QUESTION_GROUP') {
@@ -369,6 +370,17 @@ export function transformAnswersForSubmission(answers, parts) {
                 if (parentType === 'CROSS_OUT_WORD_GROUP') {
                     return normalizeCrossOutWordGroupAnswer(raw);
                 }
+                if (parentType === 'TRUE_FALSE_CORRECT_GROUP') {
+                    if (raw && typeof raw === 'object' && !Array.isArray(raw)) {
+                        const obj = raw;
+                        const isTrue = obj.isTrue === true ? true : obj.isTrue === false ? false : null;
+                        return {
+                            isTrue,
+                            correction: typeof obj.correction === 'string' ? obj.correction : '',
+                        };
+                    }
+                    return { isTrue: null, correction: '' };
+                }
                 if (parentType === 'WORD_ORDER_AND_MATCH_GROUP') {
                     if (raw && typeof raw === 'object' && !Array.isArray(raw)) {
                         const obj = raw;