@tinyweb_dev/oe-exam-sdk 0.2.4 → 0.2.6

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

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

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

@@ -8,9 +8,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * 2. Transforms data to renderer-specific props
  * 3. Renders the correct component for each question type
  */
-import { MoversListenAndWriteRenderer, MoversChooseBestAnswerRenderer, MoversChooseAdjectiveRenderer, MoversWritingRenderer, MoversColoringRenderer, MoversPictureChooseRenderer, MoversPictureFillBlankChooseRenderer, MoversReadingPassageRenderer, MoversLabelThePictureRenderer, MoversFillWordHintRenderer, MoversGridFillRenderer, MoversTrueFalseRenderer, 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, MoversFillInBlankGroupRenderer, MoversCrossOutWordGroupRenderer, MoversAnswerTheQuestionRenderer, MoversWriteSentencesRenderer, MoversWordOrderingRenderer, MoversWordFillParagraphRenderer, MoversMatchByWritingAnswerRenderer, MoversMatchWordToPictureRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderAndMatchGroupRenderer, MoversMatchingWithLinesGroupRenderer, 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, transformFillInBlankGroup, transformWordOrdering, transformWordFillParagraph, transformMatchByWritingAnswer, transformMatchWordToPicture, transformWriteSentences, transformWordFillStructuredForm, transformWordOrderAndMatchGroup, transformMatchingWithLinesGroup, 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,14 @@ 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 'FILL_IN_BLANK_GROUP': {
+            const data = transformFillInBlankGroup(questions);
+            return (_jsx(MoversFillInBlankGroupRenderer, { partNumber: partNo, partName: part.name, questionCount: data.questions.filter((question) => !question.isExample).length, instruction: part.instructions || data.instruction, audioUrl: data.audioUrl || part.audioUrl, imageUrl: data.imageUrl, showHints: data.showHints, hints: data.hints, 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 }));
@@ -165,6 +173,10 @@ export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode =
             const data = transformWordOrderAndMatchGroup(questions);
             return (_jsx(MoversWordOrderAndMatchGroupRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, matchOptions: data.matchOptions, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
         }
+        case 'MATCHING_WITH_LINES_GROUP': {
+            const data = transformMatchingWithLinesGroup(questions);
+            return (_jsx(MoversMatchingWithLinesGroupRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, data: data, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+        }
         case 'TRUE_FALSE': {
             const data = transformTrueFalse(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 }));
@@ -190,6 +202,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/MoversFillInBlankGroupRenderer.d.ts

@@ -0,0 +1,22 @@
+/**
+ * FILL_IN_BLANK_GROUP Renderer
+ * Shared audio/image on top, then each item: picture + fill blanks.
+ */
+import type { FillInBlankGroupQuestion, FillInBlankGroupItemAnswer, FillInBlankGroupStudentItemAnswer } from '../../utils/question-transformers';
+interface MoversFillInBlankGroupRendererProps {
+    partNumber: number;
+    partName?: string;
+    questionCount: number;
+    instruction: string;
+    audioUrl?: string;
+    imageUrl?: string;
+    showHints?: boolean;
+    hints?: string[];
+    questions: FillInBlankGroupQuestion[];
+    answers: Record<string, FillInBlankGroupStudentItemAnswer | undefined>;
+    onAnswerChange: (questionId: string, value: FillInBlankGroupStudentItemAnswer) => void;
+    isReviewMode?: boolean;
+    correctAnswerMap?: Record<string, FillInBlankGroupItemAnswer>;
+}
+export declare function MoversFillInBlankGroupRenderer({ partNumber, partName, questionCount, instruction, audioUrl, imageUrl, showHints, hints, questions, answers, onAnswerChange, isReviewMode, correctAnswerMap, }: MoversFillInBlankGroupRendererProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * FILL_IN_BLANK_GROUP Renderer
+ * Shared audio/image on top, then each item: picture + fill blanks.
+ */
+import { Fragment } from 'react';
+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 { extractPlaceholderIndices, isBlankMatch, padStudentAnswers, splitStem, } from '../../../../questions/types/fill-in-blank-group/blank-utils';
+function emptyAnswer(blankCount) {
+    return { answers: Array.from({ length: blankCount }, () => '') };
+}
+function ItemCard({ question, answer, onAnswerChange, isReviewMode, correctAnswer, }) {
+    const isDisabled = isReviewMode || question.isExample;
+    const current = question.isExample
+        ? { answers: question.exampleAnswers || emptyAnswer(question.blankCount).answers }
+        : { answers: padStudentAnswers(answer, question.blankCount) };
+    const stem = splitStem(question.question || '{0}');
+    const expected = correctAnswer?.answers || [];
+    const blankIndices = extractPlaceholderIndices(question.question || '{0}');
+    const allCorrect = isReviewMode
+        && !question.isExample
+        && blankIndices.length > 0
+        && blankIndices.every((index) => isBlankMatch(current.answers[index], expected[index]));
+    const anyFilled = current.answers.some((value) => value.trim().length > 0);
+    const isWrong = isReviewMode && !question.isExample && anyFilled && !allCorrect;
+    const setBlank = (blankIndex, value) => {
+        const next = [...current.answers];
+        next[blankIndex] = value;
+        onAnswerChange(question.id, { answers: next });
+    };
+    return (_jsxs("div", { id: `question-${question.id}`, className: `rounded-2xl border p-3 sm:p-4 transition-all ${question.isExample
+            ? 'border-amber-200 bg-amber-50/60'
+            : allCorrect
+                ? 'border-emerald-300 bg-emerald-50/30'
+                : isWrong
+                    ? 'border-rose-300 bg-rose-50/30'
+                    : 'border-slate-200 bg-white'}`, children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx("span", { className: `flex h-7 w-7 items-center justify-center rounded-full text-xs font-black text-white ${question.isExample ? 'bg-amber-500' : allCorrect ? 'bg-emerald-500' : isWrong ? 'bg-rose-500' : 'bg-blue-600'}`, children: question.questionNumber }), question.isExample && (_jsx("span", { className: "rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-extrabold uppercase text-amber-800", children: "Example" }))] }), question.audioUrl && (_jsx("div", { className: "mb-2", children: _jsx(CambridgeYleAudioPlayer, { audioSrc: question.audioUrl, compact: true, dense: true }) })), _jsxs("div", { className: "flex items-center gap-3", children: [question.imageUrl && (_jsx(ResolvedImage, { src: question.imageUrl, alt: `Question ${question.questionNumber}`, className: "h-24 w-24 flex-shrink-0 rounded-lg object-contain" })), _jsx("div", { className: "min-w-0 flex-1 text-[15px] leading-relaxed text-slate-800", children: stem.map((part, partIndex) => {
+                            if (part.type === 'text') {
+                                const lines = part.value.split('\n');
+                                return (_jsx(Fragment, { children: lines.map((line, lineIndex) => (_jsxs(Fragment, { children: [lineIndex > 0 ? _jsx("br", {}) : null, line] }, lineIndex))) }, partIndex));
+                            }
+                            const student = current.answers[part.index] || '';
+                            const alts = expected[part.index] || [];
+                            const blankCorrect = isReviewMode && !question.isExample && isBlankMatch(student, alts);
+                            const blankWrong = isReviewMode && !question.isExample && student.trim().length > 0 && !blankCorrect;
+                            return (_jsx("input", { type: "text", value: student, disabled: isDisabled, onChange: (event) => setBlank(part.index, event.target.value), placeholder: question.isExample ? '' : '...', className: `mx-1 inline-block w-[4.5rem] rounded-md border-2 px-1 py-1 text-center text-sm font-semibold outline-none sm:w-20 ${question.isExample
+                                    ? 'border-amber-300 bg-amber-100/70 text-amber-800'
+                                    : blankCorrect
+                                        ? 'border-emerald-400 bg-emerald-50 text-emerald-800'
+                                        : 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(' | ')] }))] }));
+}
+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 || imageUrl) && (_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 }), imageUrl && (_jsx("div", { className: "flex justify-center", children: _jsx(ResolvedImage, { src: imageUrl, alt: "Shared illustration", className: "max-h-[180px] rounded-lg object-contain" }) }))] })), 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/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/MoversMatchingWithLinesGroupRenderer.d.ts

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

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

@@ -0,0 +1,31 @@
+'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 { MatchingWithLinesGroupClient } from '../../../../questions/types/matching-with-lines-group/MatchingWithLinesGroupClient';
+export function MoversMatchingWithLinesGroupRenderer({ partNumber, partName, questionCount, instruction, data, answers, onAnswerChange, isReviewMode = false, }) {
+    const userAnswers = data.questions.map((question) => {
+        if (question.isExample)
+            return question.correctRightId;
+        const raw = answers[question.id];
+        return typeof raw === 'string' ? raw : '';
+    });
+    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,
+                        rightItems: data.rightItems,
+                        items: data.questions.map((question) => ({
+                            imageUrl: question.imageUrl,
+                            correctAnswer: question.correctRightId,
+                            isExample: question.isExample,
+                            points: question.points,
+                            questionNumber: question.questionNumber,
+                        })),
+                        explanation: data.explanation,
+                    }, isReviewMode: isReviewMode, userAnswers: userAnswers, onAnswerChange: (index, rightId) => {
+                        const target = data.questions[index];
+                        if (target && !target.isExample) {
+                            onAnswerChange(target.id, rightId);
+                        }
+                    } }) })] }));
+}

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;