@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.29

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

@@ -1 +1,14 @@
-"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Textarea as r}from"../../../components/ui/textarea";import{Label as n}from"../../../components/ui/label";export function GenericQuestionRenderer({question:s,value:i,onChange:o}){return e("div",{className:"rounded-lg border border-gray-200 bg-white p-4 shadow-sm",children:[e("div",{className:"mb-3 flex items-center justify-between gap-3",children:[e("h3",{className:"font-medium text-gray-900",children:["Câu ",s.question_number]}),t("span",{className:"rounded bg-gray-100 px-2 py-1 text-xs text-gray-600",children:s.question_type})]}),t(a,{content:s.content}),e("div",{className:"mt-4 space-y-2",children:[t(n,{htmlFor:`answer-${s.id}`,children:"Câu trả lời"}),t(r,{id:`answer-${s.id}`,value:"string"==typeof i?i:i?JSON.stringify(i):"",onChange:e=>o(s.id,e.target.value),placeholder:"Nhập câu trả lời"})]})]})}function a({content:e}){return"string"==typeof e?t("p",{className:"whitespace-pre-wrap text-sm text-gray-700",children:e}):"object"==typeof e&&null!==e?t("pre",{className:"max-h-48 overflow-auto rounded bg-gray-50 p-3 text-xs text-gray-600",children:JSON.stringify(e,null,2)}):t("p",{className:"text-sm text-gray-500",children:"Không có nội dung câu hỏi."})}
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Textarea } from '../../../components/ui/textarea';
+import { Label } from '../../../components/ui/label';
+export function GenericQuestionRenderer({ question, value, onChange }) {
+    return (_jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-4 shadow-sm", children: [_jsxs("div", { className: "mb-3 flex items-center justify-between gap-3", children: [_jsxs("h3", { className: "font-medium text-gray-900", children: ["C\u00E2u ", question.question_number] }), _jsx("span", { className: "rounded bg-gray-100 px-2 py-1 text-xs text-gray-600", children: question.question_type })] }), _jsx(QuestionContent, { content: question.content }), _jsxs("div", { className: "mt-4 space-y-2", children: [_jsx(Label, { htmlFor: `answer-${question.id}`, children: "C\u00E2u tr\u1EA3 l\u1EDDi" }), _jsx(Textarea, { id: `answer-${question.id}`, value: typeof value === 'string' ? value : value ? JSON.stringify(value) : '', onChange: (event) => onChange(question.id, event.target.value), placeholder: "Nh\u1EADp c\u00E2u tr\u1EA3 l\u1EDDi" })] })] }));
+}
+function QuestionContent({ content }) {
+    if (typeof content === 'string')
+        return _jsx("p", { className: "whitespace-pre-wrap text-sm text-gray-700", children: content });
+    if (typeof content === 'object' && content !== null)
+        return _jsx("pre", { className: "max-h-48 overflow-auto rounded bg-gray-50 p-3 text-xs text-gray-600", children: JSON.stringify(content, null, 2) });
+    return _jsx("p", { className: "text-sm text-gray-500", children: "Kh\u00F4ng c\u00F3 n\u1ED9i dung c\u00E2u h\u1ECFi." });
+}

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

@@ -1 +1,207 @@
-"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import{MoversListenAndWriteRenderer as t,MoversChooseBestAnswerRenderer as s,MoversChooseAdjectiveRenderer as i,MoversWritingRenderer as r,MoversColoringRenderer as o,MoversPictureChooseRenderer as a,MoversPictureFillBlankChooseRenderer as u,MoversReadingPassageRenderer as c,MoversLabelThePictureRenderer as m,MoversFillWordHintRenderer as l,MoversGridFillRenderer as p,MoversTrueFalseRenderer as g,MoversAnswerTheQuestionRenderer as _,MoversWriteSentencesRenderer as N,MoversWordOrderingRenderer as E,MoversWordFillParagraphRenderer as C,MoversMatchByWritingAnswerRenderer as d,MoversWordFillStructuredFormRenderer as A}from"./question-renderers";import{SpeakingQuestionRenderer as R}from"./speaking/renderers";import{transformFillInBlank as w,transformWriteCorrectVerbForm as I,transformChooseCorrectAnswer as T,transformChooseTheCorrectAnswerGroup as h,transformChooseCorrectAdjective as S,transformWriteShortLetter as O,transformColorObjects as U,transformPictureChoose as q,transformPictureFillBlankChoose as M,transformReadingPassage as b,transformLabelPicture as L,transformFillWordHint as x,transformGridFill as v,transformAnswerTheQuestion as D,transformTrueFalse as f,transformWordOrdering as P,transformWordFillParagraph as W,transformMatchByWritingAnswer as G,transformWriteSentences as H,transformWordFillStructuredForm as B}from"../utils/question-transformers";import{normalizeColoringAssignments as K}from"../utils/coloring-assignments";export function QuestionRenderer({part:Q,answers:F,onAnswerChange:k,isReviewMode:j=!1,onExit:y,onPartComplete:V,onPartBack:J,speakingTheme:Y,initialQuestionIndex:X,skipTeacherVideo:z,onTeacherIntroPlayed:Z,currentQuestionIndex:$}){const{partNo:ee,questionType:ne,questions:te}=Q,se=te.filter(e=>!e.is_example).length,ie=e=>{if(void 0!==$&&$>=0){if(e.length>0&&"isExample"in e[0]){const n=e.filter(e=>e.isExample),t=e.filter(e=>!e.isExample);if($<t.length)return 0===$&&n.length>0?[...n,t[$]]:[t[$]]}else if($<e.length)return[e[$]]}return e};switch(ne){case"FILL_IN_BLANK":{const n=w(te);return e(t,{partNumber:ee,partName:Q.name,questionCount:se,instruction:Q.instructions||n.instruction,title:n.title,imageUrl:n.groupImageUrl||n.imageUrl,audioUrl:n.audioUrl||Q.audioUrl,exampleText:n.exampleText,exampleHighlight:n.exampleHighlight,questions:ie(n.questions),answers:F,onAnswerChange:k,isReviewMode:j,showHints:n.showHints,groupContent:n.groupContent,groupTitle:n.groupTitle})}case"WRITE_CORRECT_VERB_FORM":{const n=I(te);return e(t,{partNumber:ee,partName:Q.name,questionCount:se,instruction:Q.instructions||n.instruction,title:n.title,questions:ie(n.questions),answers:F,onAnswerChange:k,isReviewMode:j})}case"CHOOSE_THE_CORRECT_ANSWER":{const n=T(te);return e(s,{partNumber:ee,partName:Q.name,questionCount:se,instruction:Q.instructions||n.instruction,imageUrl:n.groupImageUrl,groupTitle:n.groupTitle,groupContent:n.groupContent,articles:n.articles,audioUrl:n.audioUrl||Q.audioUrl,example:n.example,questions:ie(n.questions),answers:F,onAnswerChange:k,isReviewMode:j})}case"CHOOSE_THE_CORRECT_ANSWER_GROUP":{const n=h(te);return e(s,{partNumber:ee,partName:Q.name,questionCount:se,instruction:Q.instructions||n.instruction,example:n.example,questions:ie(n.questions),answers:F,onAnswerChange:k,isReviewMode:j})}case"CHOOSE_CORRECT_ADJECTIVE":{const n=S(te);return e(i,{partNumber:ee,partName:Q.name,questionCount:se,instruction:Q.instructions||n.instruction,questions:ie(n.questions),answers:F,onAnswerChange:k,isReviewMode:j})}case"WRITE_A_SHORT_LETTER":{const n=te[0],t=O(n),s=F[n.id]||"";return e(r,{partNumber:ee,partName:Q.name,instruction:Q.instructions,prompt:t.prompt,requirements:t.requirements,minWords:t.minWords,maxWords:t.maxWords,answer:s,onAnswerChange:e=>k(n.id,e),isReviewMode:j,guideImages:t.guideImages})}case"READ_AND_COLOR_OBJECTS":{const n=U(te),t=new Set(n.regions.map(e=>e.id)),s=Object.fromEntries(Object.entries(F).filter(([e])=>t.has(e))),i=K(s,n.hintItems);return e(o,{partNumber:ee,partName:Q.name,questionCount:se,instruction:Q.instructions||n.instruction,instructions:n.instructions,imageUrl:n.imageUrl,audioUrl:n.audioUrl||Q.audioUrl,hintItems:n.hintItems,regions:n.regions,assignments:i,onAssignmentChange:(e,t)=>{if(t){const s=n.hintItems.find(e=>e.id===t);if(s&&s.color)return void k(e,s.color)}k(e,t)},isReviewMode:j})}case"LOOK_PICTURE_CHOOSE_CORRECT_ANSWER":{const n=q(te);return e(a,{partNumber:ee,partName:Q.name,questionCount:se,instruction:Q.instructions||n.instruction,subQuestions:n.subQuestions,answers:F,onAnswerChange:k,isReviewMode:j})}case"LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER":{const n=M(te);return e(u,{partNumber:ee,partName:Q.name,questionCount:se,instruction:Q.instructions||n.instruction,subQuestions:n.subQuestions,answers:F,onAnswerChange:k,isReviewMode:j})}case"READ_PASSAGE_AND_ANSWER_QUESTIONS":{const n=b(te);return e(c,{partNumber:ee,partName:Q.name,questionCount:n.questions.length,instruction:Q.instructions||n.instruction,passageTitle:n.passageTitle,passage:n.passage,passageImageUrl:n.passageImageUrl,questions:ie(n.questions),answers:F,onAnswerChange:k,isReviewMode:j})}case"LABEL_THE_PICTURE":{const n=L(te);return e(m,{partNumber:ee,partName:Q.name,questionCount:n.labels.length,instruction:Q.instructions||n.instruction,imageUrl:n.imageUrl,wordBank:n.wordBank,labels:n.labels,answers:F,onAnswerChange:k,isReviewMode:j})}case"LOOK_PICTURE_FILL_WORD_HINT":{const n=x(te);return e(l,{partNumber:ee,partName:Q.name,questionCount:n.subQuestions.length,instruction:Q.instructions||n.instruction,hintLetters:n.hintLetters,subQuestions:n.subQuestions,answers:F,onAnswerChange:k,isReviewMode:j})}case"FILL_MISSING_WORDS_IN_GRID":{const n=v(te);return e(p,{partNumber:ee,partName:Q.name,questionCount:se,instruction:Q.instructions||n.instruction,grid:n.grid,rows:n.rows,columns:n.columns,cellAnswers:{},answers:F,onAnswerChange:k,isReviewMode:j,disabledCells:n.disabledCells})}case"IMAGE_OBJECT_MATCHING":{const n=U(te),t=new Set(n.regions.map(e=>e.id)),s=Object.fromEntries(Object.entries(F).filter(([e])=>t.has(e))),i=K(s,n.hintItems);return e(o,{partNumber:ee,partName:Q.name,questionCount:se,instruction:Q.instructions||n.instruction,instructions:n.instructions,imageUrl:n.imageUrl,audioUrl:n.audioUrl||Q.audioUrl,hintItems:n.hintItems,regions:n.regions,assignments:i,onAssignmentChange:(e,t)=>{if(t){const s=n.hintItems.find(e=>e.id===t);if(s&&s.color)return void k(e,s.color)}k(e,t)},isReviewMode:j})}case"ANSWER_THE_QUESTION":{const n=D(te);return e(_,{partNumber:ee,partName:Q.name,questionCount:se,instruction:Q.instructions||n.instruction,imageUrl:n.imageUrl,audioUrl:Q.audioUrl,title:n.title,groupContent:n.groupContent,questions:ie(n.questions),answers:F,onAnswerChange:k,isReviewMode:j})}case"TRUE_FALSE":{const n=f(te);return e(g,{partNumber:ee,partName:Q.name,questionCount:se,instruction:Q.instructions||n.instruction,imageUrl:n.imageUrl,groupContent:n.groupContent,questions:ie(n.questions),answers:F,onAnswerChange:k,isReviewMode:j})}case"WORD_ORDERING":{const n=P(te);return e(E,{partNumber:ee,partName:Q.name,questionCount:se,instruction:Q.instructions||n.instruction,questions:ie(n.questions),answers:F,onAnswerChange:k,isReviewMode:j})}case"WORD_FILL_PARAGRAPH":{const n=W(te),t=n.wordBank.filter(e=>e.isExample).length,s=n.paragraph.match(/\{\d+\}/g),i=s?s.length:0,r=Math.max(1,i-t);let o=Q.instructions||n.instruction;return o=o.replace(/\{FROM\}/gi,"1").replace(/\{TO\}/gi,String(r)),e(C,{partNumber:ee,partName:Q.name,questionCount:se,instruction:o,questionId:n.questionId,paragraph:n.paragraph,title:n.title,imageUrl:n.imageUrl,wordBank:n.wordBank,viewMode:n.viewMode,answers:F,onAnswerChange:k,exampleAnswer:n.exampleAnswer,isReviewMode:j,emailFrom:n.emailFrom,emailTo:n.emailTo})}case"MATCH_BY_WRITING_ANSWER":{const n=G(te);return e(d,{partNumber:ee,partName:Q.name,questionCount:se,instruction:Q.instructions||n.instruction,audioUrl:Q.audioUrl,options:n.options,questions:ie(n.questions),answers:F,onAnswerChange:k,isReviewMode:j,viewMode:n.viewMode,groupImageUrl:n.groupImageUrl})}case"WORD_FILL_STRUCTURED_FORM":{const n=B(te);return e(A,{partNumber:ee,partName:Q.name,questionCount:se,instruction:Q.instructions||n.instruction,audioUrl:n.audioUrl||Q.audioUrl,groupTitle:n.groupTitle,groupContent:n.groupContent,groupImageUrl:n.groupImageUrl,questions:ie(n.questions),answers:F,onAnswerChange:k,isReviewMode:j})}case"WRITE_SENTENCES":{const n=H(te);return e(N,{partNumber:ee,partName:Q.name,questionCount:se,instruction:Q.instructions||n.instruction,imageUrl:n.imageUrl,title:n.title,groupContent:n.groupContent,questions:ie(n.questions),answers:F,onAnswerChange:k,isReviewMode:j})}case"LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE":case"LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP":case"LISTEN_AND_DRAG_OBJECTS_INTO_SCENE":case"LISTEN_AND_SPEAK_ANSWER":case"LISTEN_AND_SPEAK_COMPARE_IMAGES":case"LISTEN_AND_SPEAK_WITH_STORY_IMAGES":case"LISTEN_AND_SPEAK_IMAGE_GROUP":case"LISTEN_AND_SPEAK_ODD_ONE_OUT":case"LISTEN_AND_SPEAK_QUESTION_LIST":case"LISTEN_AND_SPEAK_INFO_EXCHANGE":case"SPEAKING_DESCRIBE_IMAGE":case"READ_DISPLAYED_CONTENT":case"SPONTANEOUS_QA":case"SPEAKING_CONVERSATION":case"GN_SPEAKING_INTERVIEW":case"SPEAKING_CUE_CARD":return e(R,{part:Q,answers:F,onAnswerChange:k,isReviewMode:j,onExit:y,onPartComplete:V,onPartBack:J,speakingTheme:Y,initialQuestionIndex:X,skipTeacherVideo:z,onTeacherIntroPlayed:Z,currentQuestionIndex:$});default:return e("div",{className:"flex h-full items-center justify-center",children:n("div",{className:"text-center",children:[e("p",{className:"text-lg font-semibold text-red-500",children:"Unsupported question type"}),e("p",{className:"mt-2 text-gray-500",children:ne})]})})}}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * QuestionRenderer - Dispatches to appropriate question renderer based on question type
+ *
+ * This component acts as a factory that:
+ * 1. Receives API question data (grouped by part)
+ * 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, } from './question-renderers';
+import { SpeakingQuestionRenderer } from './speaking/renderers';
+import { transformFillInBlank, transformWriteCorrectVerbForm, transformChooseCorrectAnswer, transformChooseTheCorrectAnswerGroup, transformChooseCorrectAdjective, transformWriteShortLetter, transformColorObjects, transformPictureChoose, transformPictureFillBlankChoose, transformReadingPassage, transformLabelPicture, transformFillWordHint, transformGridFill, transformAnswerTheQuestion, transformTrueFalse, transformTrueFalseGroup, transformWordOrdering, transformWordFillParagraph, transformMatchByWritingAnswer, transformWriteSentences, transformWordFillStructuredForm, transformWordOrderAndMatchGroup, } 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, }) {
+    const { partNo, questionType, questions } = part;
+    const questionCount = questions.filter(q => !q.is_example).length;
+    const getRenderQuestions = (arr) => {
+        if (currentQuestionIndex !== undefined && currentQuestionIndex >= 0) {
+            // Some transformers keep examples in the main array with isExample flag
+            const hasIsExampleProp = arr.length > 0 && 'isExample' in arr[0];
+            if (hasIsExampleProp) {
+                const examples = arr.filter(q => q.isExample);
+                const nonExamples = arr.filter(q => !q.isExample);
+                if (currentQuestionIndex < nonExamples.length) {
+                    // Show examples along with the first question
+                    if (currentQuestionIndex === 0 && examples.length > 0) {
+                        return [...examples, nonExamples[currentQuestionIndex]];
+                    }
+                    return [nonExamples[currentQuestionIndex]];
+                }
+            }
+            else {
+                // Transformers that separate examples already
+                if (currentQuestionIndex < arr.length) {
+                    return [arr[currentQuestionIndex]];
+                }
+            }
+        }
+        return arr;
+    };
+    switch (questionType) {
+        case 'FILL_IN_BLANK': {
+            const data = transformFillInBlank(questions);
+            return (_jsx(MoversListenAndWriteRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, title: data.title, imageUrl: data.groupImageUrl || data.imageUrl, audioUrl: data.audioUrl || part.audioUrl, exampleText: data.exampleText, exampleHighlight: data.exampleHighlight, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, showHints: data.showHints, groupContent: data.groupContent, groupTitle: data.groupTitle }));
+        }
+        case 'WRITE_CORRECT_VERB_FORM': {
+            const data = transformWriteCorrectVerbForm(questions);
+            return (_jsx(MoversListenAndWriteRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, title: data.title, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+        }
+        case 'CHOOSE_THE_CORRECT_ANSWER': {
+            const data = transformChooseCorrectAnswer(questions);
+            return (_jsx(MoversChooseBestAnswerRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, imageUrl: data.groupImageUrl, groupTitle: data.groupTitle, groupContent: data.groupContent, articles: data.articles, audioUrl: data.audioUrl || part.audioUrl, example: data.example, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+        }
+        case 'CHOOSE_THE_CORRECT_ANSWER_GROUP': {
+            const data = transformChooseTheCorrectAnswerGroup(questions);
+            return (_jsx(MoversChooseBestAnswerRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, example: data.example, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+        }
+        case 'CHOOSE_CORRECT_ADJECTIVE': {
+            const data = transformChooseCorrectAdjective(questions);
+            return (_jsx(MoversChooseAdjectiveRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+        }
+        case 'WRITE_A_SHORT_LETTER': {
+            // Writing has single question per part
+            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 }));
+        }
+        case 'READ_AND_COLOR_OBJECTS': {
+            const data = transformColorObjects(questions);
+            // Filter answers to only include regions from this part
+            const regionIds = new Set(data.regions.map((r) => r.id));
+            const partAnswers = Object.fromEntries(Object.entries(answers).filter(([key]) => regionIds.has(key)));
+            // Normalize assignments to convert hex colors back to color node IDs for display
+            const assignments = normalizeColoringAssignments(partAnswers, data.hintItems);
+            return (_jsx(MoversColoringRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, instructions: data.instructions, imageUrl: data.imageUrl, audioUrl: data.audioUrl || part.audioUrl, hintItems: data.hintItems, regions: data.regions, assignments: assignments, onAssignmentChange: (regionId, hintItemId) => {
+                    // Find the hint item and store its color instead of its ID
+                    if (hintItemId) {
+                        const hint = data.hintItems.find((h) => h.id === hintItemId);
+                        if (hint && hint.color) {
+                            onAnswerChange(regionId, hint.color);
+                            return;
+                        }
+                    }
+                    // Fallback (e.g. when unassigning, hintItemId is null)
+                    onAnswerChange(regionId, hintItemId);
+                }, isReviewMode: isReviewMode }));
+        }
+        case 'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER': {
+            const data = transformPictureChoose(questions);
+            return (_jsx(MoversPictureChooseRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, subQuestions: data.subQuestions, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+        }
+        case 'LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER': {
+            const data = transformPictureFillBlankChoose(questions);
+            return (_jsx(MoversPictureFillBlankChooseRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, subQuestions: data.subQuestions, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+        }
+        case 'READ_PASSAGE_AND_ANSWER_QUESTIONS': {
+            const data = transformReadingPassage(questions);
+            return (_jsx(MoversReadingPassageRenderer, { partNumber: partNo, partName: part.name, questionCount: data.questions.length, instruction: part.instructions || data.instruction, passageTitle: data.passageTitle, passage: data.passage, passageImageUrl: data.passageImageUrl, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+        }
+        case 'LABEL_THE_PICTURE': {
+            const data = transformLabelPicture(questions);
+            return (_jsx(MoversLabelThePictureRenderer, { partNumber: partNo, partName: part.name, questionCount: data.labels.length, instruction: part.instructions || data.instruction, imageUrl: data.imageUrl, wordBank: data.wordBank, labels: data.labels, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+        }
+        case 'LOOK_PICTURE_FILL_WORD_HINT': {
+            const data = transformFillWordHint(questions);
+            return (_jsx(MoversFillWordHintRenderer, { partNumber: partNo, partName: part.name, questionCount: data.subQuestions.length, instruction: part.instructions || data.instruction, hintLetters: data.hintLetters, subQuestions: data.subQuestions, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+        }
+        case 'FILL_MISSING_WORDS_IN_GRID': {
+            const data = transformGridFill(questions);
+            return (_jsx(MoversGridFillRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, grid: data.grid, rows: data.rows, columns: data.columns, cellAnswers: {}, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, disabledCells: data.disabledCells }));
+        }
+        case 'IMAGE_OBJECT_MATCHING': {
+            // Reuse coloring renderer — same content structure as READ_AND_COLOR_OBJECTS
+            const data = transformColorObjects(questions);
+            // Filter answers to only include regions from this part
+            const regionIds = new Set(data.regions.map((r) => r.id));
+            const partAnswers = Object.fromEntries(Object.entries(answers).filter(([key]) => regionIds.has(key)));
+            // Normalize assignments to convert hex colors back to color node IDs for display
+            const assignments = normalizeColoringAssignments(partAnswers, data.hintItems);
+            return (_jsx(MoversColoringRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, instructions: data.instructions, imageUrl: data.imageUrl, audioUrl: data.audioUrl || part.audioUrl, hintItems: data.hintItems, regions: data.regions, assignments: assignments, onAssignmentChange: (regionId, hintItemId) => {
+                    // Find the hint item and store its color instead of its ID
+                    if (hintItemId) {
+                        const hint = data.hintItems.find((h) => h.id === hintItemId);
+                        if (hint && hint.color) {
+                            onAnswerChange(regionId, hint.color);
+                            return;
+                        }
+                    }
+                    // Fallback (e.g. when unassigning, hintItemId is null)
+                    onAnswerChange(regionId, hintItemId);
+                }, isReviewMode: isReviewMode }));
+        }
+        case 'ANSWER_THE_QUESTION': {
+            const data = transformAnswerTheQuestion(questions);
+            return (_jsx(MoversAnswerTheQuestionRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, imageUrl: data.imageUrl, audioUrl: part.audioUrl, title: data.title, groupContent: data.groupContent, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+        }
+        case 'TRUE_FALSE_GROUP': {
+            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 '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 }));
+        }
+        case 'WORD_ORDER_AND_MATCH_GROUP': {
+            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 '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 }));
+        }
+        case 'WORD_ORDERING': {
+            const data = transformWordOrdering(questions);
+            return (_jsx(MoversWordOrderingRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+        }
+        case 'WORD_FILL_PARAGRAPH': {
+            const data = transformWordFillParagraph(questions);
+            // Replace {FROM}/{TO} placeholders in instruction with actual blank range
+            const exampleCount = data.wordBank.filter((w) => w.isExample).length;
+            const blankMatch = data.paragraph.match(/\{\d+\}/g);
+            const totalBlanksInParagraph = blankMatch ? blankMatch.length : 0;
+            const questionBlanksCount = Math.max(1, totalBlanksInParagraph - exampleCount);
+            let resolvedInstruction = part.instructions || data.instruction;
+            resolvedInstruction = resolvedInstruction
+                .replace(/\{FROM\}/gi, "1")
+                .replace(/\{TO\}/gi, String(questionBlanksCount));
+            return (_jsx(MoversWordFillParagraphRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: resolvedInstruction, questionId: data.questionId, paragraph: data.paragraph, title: data.title, imageUrl: data.imageUrl, wordBank: data.wordBank, viewMode: data.viewMode, answers: answers, onAnswerChange: onAnswerChange, exampleAnswer: data.exampleAnswer, isReviewMode: isReviewMode, emailFrom: data.emailFrom, emailTo: data.emailTo }));
+        }
+        case 'MATCH_BY_WRITING_ANSWER': {
+            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 '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 }));
+        }
+        case 'WRITE_SENTENCES': {
+            const data = transformWriteSentences(questions);
+            return (_jsx(MoversWriteSentencesRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, imageUrl: data.imageUrl, title: data.title, groupContent: data.groupContent, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+        }
+        case 'LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE':
+        case 'LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP':
+        case 'LISTEN_AND_DRAG_OBJECTS_INTO_SCENE':
+        case 'LISTEN_AND_SPEAK_ANSWER':
+        case 'LISTEN_AND_SPEAK_COMPARE_IMAGES':
+        case 'LISTEN_AND_SPEAK_WITH_STORY_IMAGES':
+        case 'LISTEN_AND_SPEAK_IMAGE_GROUP':
+        case 'LISTEN_AND_SPEAK_ODD_ONE_OUT':
+        case 'LISTEN_AND_SPEAK_QUESTION_LIST':
+        case 'LISTEN_AND_SPEAK_INFO_EXCHANGE':
+        case 'SPEAKING_DESCRIBE_IMAGE':
+        case 'READ_DISPLAYED_CONTENT':
+        case 'SPONTANEOUS_QA':
+        case 'SPONTANEOUS_QA_GROUP':
+        case 'SPEAKING_CONVERSATION':
+        case 'GN_SPEAKING_INTERVIEW':
+        case 'SPEAKING_CUE_CARD': {
+            return (_jsx(SpeakingQuestionRenderer, { part: part, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, onExit: onExit, onPartComplete: onPartComplete, onPartBack: onPartBack, speakingTheme: speakingTheme, initialQuestionIndex: initialQuestionIndex, skipTeacherVideo: skipTeacherVideo, onTeacherIntroPlayed: onTeacherIntroPlayed, currentQuestionIndex: currentQuestionIndex }));
+        }
+        default:
+            return (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-lg font-semibold text-red-500", children: "Unsupported question type" }), _jsx("p", { className: "mt-2 text-gray-500", children: questionType })] }) }));
+    }
+}

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

@@ -1 +1,11 @@
-export{CambridgeYleExamLayout as MoversExamLayout}from"../../../../components/themes/cambridge-yle/CambridgeYleExamLayout";export{CambridgeYleHeader as MoversHeader}from"../../../../components/themes/cambridge-yle/CambridgeYleHeader";export{CambridgeYleNavButton as MoversNavButton}from"../../../../components/themes/cambridge-yle/CambridgeYleNavButton";export{CambridgeYleProgressBar as MoversProgressBar}from"../../../../components/themes/cambridge-yle/CambridgeYleProgressBar";export{CambridgeYleTimer as MoversTimer}from"../../../../components/themes/cambridge-yle/CambridgeYleTimer";export{default as MoversQuestionCard}from"../../../../components/themes/cambridge-yle/CambridgeYleQuestionCard";export{default as MoversPartBanner}from"../../../../components/themes/cambridge-yle/CambridgeYlePartBanner";export{default as MoversInstructionBanner}from"../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner";export{default as MoversAudioPlayer}from"../../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer";export{default as MoversExampleText}from"../../../../components/themes/cambridge-yle/CambridgeYleExampleText";
+// Legacy re-exports - components now live in @/components/themes/cambridge-yle/
+export { CambridgeYleExamLayout as MoversExamLayout } from '../../../../components/themes/cambridge-yle/CambridgeYleExamLayout';
+export { CambridgeYleHeader as MoversHeader } from '../../../../components/themes/cambridge-yle/CambridgeYleHeader';
+export { CambridgeYleNavButton as MoversNavButton } from '../../../../components/themes/cambridge-yle/CambridgeYleNavButton';
+export { CambridgeYleProgressBar as MoversProgressBar } from '../../../../components/themes/cambridge-yle/CambridgeYleProgressBar';
+export { CambridgeYleTimer as MoversTimer } from '../../../../components/themes/cambridge-yle/CambridgeYleTimer';
+export { default as MoversQuestionCard } from '../../../../components/themes/cambridge-yle/CambridgeYleQuestionCard';
+export { default as MoversPartBanner } from '../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+export { default as MoversInstructionBanner } from '../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+export { default as MoversAudioPlayer } from '../../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer';
+export { default as MoversExampleText } from '../../../../components/themes/cambridge-yle/CambridgeYleExampleText';

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

@@ -1 +1,8 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import{ResolvedImage as r}from"../../../../../components/common/ResolvedImage";export function ArticlesViewer({articles:t,title:a}){return t&&0!==t.length?l("div",{className:"flex flex-col gap-3",children:[a&&e("h3",{className:"text-center text-lg font-bold text-gray-800",children:a}),e("div",{className:"grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3",children:t.map((t,a)=>l("div",{className:"rounded-lg border border-gray-200 bg-white p-3 shadow-sm",children:[t.imageUrl&&e("div",{className:"mb-2 flex justify-center",children:e(r,{src:t.imageUrl,alt:t.name,className:"h-24 w-24 rounded-full object-cover"})}),e("h4",{className:"mb-1 text-center text-base font-bold text-gray-900",children:t.name}),e("p",{className:"text-sm leading-relaxed text-gray-700",children:t.content})]},a))})]}):null}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ResolvedImage } from '../../../../../components/common/ResolvedImage';
+export function ArticlesViewer({ articles, title }) {
+    if (!articles || articles.length === 0)
+        return null;
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [title && (_jsx("h3", { className: "text-center text-lg font-bold text-gray-800", children: title })), _jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: articles.map((article, idx) => (_jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-3 shadow-sm", children: [article.imageUrl && (_jsx("div", { className: "mb-2 flex justify-center", children: _jsx(ResolvedImage, { src: article.imageUrl, alt: article.name, className: "h-24 w-24 rounded-full object-cover" }) })), _jsx("h4", { className: "mb-1 text-center text-base font-bold text-gray-900", children: article.name }), _jsx("p", { className: "text-sm leading-relaxed text-gray-700", children: article.content })] }, idx))) })] }));
+}

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

@@ -1 +1,30 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{ResolvedImage as s}from"../../../../../components/common/ResolvedImage";import a from"../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import t from"../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner";import n from"../../../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer";function i({question:a,answer:t,onAnswerChange:n,isReviewMode:i,correctAnswerTextMap:o,id:l}){const d=a.isExample,m=i||d,c=o[a.id],g=t||"",p=d&&a.exampleAnswer?a.exampleAnswer:g,x=i&&void 0!==c,u=x&&g.trim().toLowerCase()===c.trim().toLowerCase(),b=x&&!!g&&!u;return r("div",{id:l,className:"flex items-start gap-3 rounded-lg p-3 "+(d?"border-2 border-orange-200 bg-orange-50":""),children:[e("span",{className:"flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full text-sm font-bold text-white "+(d?"bg-orange-400":u?"bg-green-500":b?"bg-red-500":"bg-blue-500"),children:a.questionNumber}),r("div",{className:"flex flex-1 flex-col gap-2",children:[a.imageUrl&&e(s,{src:a.imageUrl,alt:`Q${a.questionNumber}`,className:"max-h-[120px] rounded-lg object-contain"}),r("div",{className:"flex flex-wrap items-baseline gap-2",children:[e("span",{className:"font-medium text-gray-800",children:a.question}),a.prefixText&&e("span",{className:"text-gray-600",children:a.prefixText}),e("input",{type:"text",value:p,onChange:e=>n(a.id,e.target.value),disabled:m,placeholder:d?"":"Type your answer...",className:"min-w-[140px] flex-1 border-b-2 bg-transparent px-1 py-1 text-center outline-none focus:border-blue-500 disabled:cursor-default "+(d?"border-orange-400 font-semibold text-orange-700 disabled:opacity-100":u?"border-green-500 text-green-700":b?"border-red-500 text-red-700":"border-gray-400 disabled:opacity-60")}),a.suffixText&&e("span",{className:"text-gray-600",children:a.suffixText}),d&&e("span",{className:"rounded bg-orange-100 px-2 py-0.5 text-xs font-semibold text-orange-600",children:"Example"})]}),!d&&b&&x&&r("p",{className:"text-sm text-green-600",children:["Đáp án đúng: ",c]}),!d&&x&&!g&&r("p",{className:"text-sm text-green-600",children:["Đáp án đúng: ",c]}),a.suggestedAnswers&&a.suggestedAnswers.length>0&&!m&&e("div",{className:"flex flex-wrap gap-2",children:a.suggestedAnswers.map((r,s)=>e("button",{type:"button",onClick:()=>n(a.id,r),className:"rounded-full border border-blue-300 bg-blue-50 px-3 py-1 text-sm text-blue-700 transition-colors hover:bg-blue-100",children:r},s))})]})]})}export function MoversAnswerTheQuestionRenderer({partNumber:o,partName:l,questionCount:d,instruction:m,imageUrl:c,audioUrl:g,groupContent:p,questions:x,answers:u,onAnswerChange:b,isReviewMode:h=!1,correctAnswerTextMap:f={}}){const w=x.filter(e=>e.isExample),N=x.filter(e=>!e.isExample);return r("div",{className:"flex flex-col h-full gap-4 sm:gap-6 overflow-y-auto custom-scrollbar",children:[r("div",{className:"flex flex-col gap-4 p-3 sm:px-6 sm:pt-2",children:[e(a,{partNumber:o,questionCount:d,partName:l,isReviewMode:h}),e(t,{instruction:m,isReviewMode:h}),g&&e("div",{className:"relative z-10",children:e(n,{audioSrc:g,compact:!0})}),c&&e("div",{className:"relative z-0 flex items-center justify-center",children:e(s,{src:c,alt:"Shared illustration",className:"max-h-[450px] rounded-lg object-contain shadow-md"})}),p&&e("div",{className:"rounded-lg bg-amber-50 p-4 text-base leading-relaxed text-gray-800",dangerouslySetInnerHTML:{__html:p}}),w.length>0&&e("div",{className:"flex flex-col gap-4 mt-2",children:w.map(r=>e(i,{id:`question-${r.id}`,question:r,answer:u[r.id],onAnswerChange:b,isReviewMode:h,correctAnswerTextMap:f},r.id))})]}),w.length>0&&N.length>0&&e("div",{className:"px-3 sm:px-6",children:e("hr",{className:"border-t border-slate-200/60 my-1"})}),e("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-5 p-3 sm:px-6 sm:pb-6",children:N.map(r=>e("div",{id:`question-${r.id}`,className:"w-full rounded-xl border border-gray-200 bg-white shadow-sm transition-all hover:border-indigo-200 hover:shadow-md",children:e(i,{question:r,answer:u[r.id],onAnswerChange:b,isReviewMode:h,correctAnswerTextMap:f})},r.id))})]})}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ANSWER_THE_QUESTION Renderer - Text input per question with optional prefix/suffix
+ * Used in Starters P2/P6/P9, Movers P2/P11
+ */
+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';
+// Single Question Component
+function QuestionItem({ question, answer, onAnswerChange, isReviewMode, correctAnswerTextMap, id, }) {
+    const isExampleQ = question.isExample;
+    const isDisabled = isReviewMode || isExampleQ;
+    const correctAnswer = correctAnswerTextMap[question.id];
+    const userAnswer = answer || '';
+    const displayValue = isExampleQ && question.exampleAnswer ? question.exampleAnswer : userAnswer;
+    const hasCorrectAnswer = isReviewMode && correctAnswer !== undefined;
+    const isCorrect = hasCorrectAnswer && userAnswer.trim().toLowerCase() === correctAnswer.trim().toLowerCase();
+    const isWrong = hasCorrectAnswer && !!userAnswer && !isCorrect;
+    return (_jsxs("div", { id: id, className: `flex items-start gap-3 rounded-lg p-3 ${isExampleQ ? 'border-2 border-orange-200 bg-orange-50' : ''}`, children: [_jsx("span", { className: `flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ${isExampleQ ? 'bg-orange-400' : isCorrect ? 'bg-green-500' : isWrong ? 'bg-red-500' : 'bg-blue-500'}`, children: question.questionNumber }), _jsxs("div", { className: "flex flex-1 flex-col gap-2", children: [question.imageUrl && (_jsx(ResolvedImage, { src: question.imageUrl, alt: `Q${question.questionNumber}`, className: "max-h-[120px] rounded-lg object-contain" })), _jsxs("div", { className: "flex flex-wrap items-baseline gap-2", children: [_jsx("span", { className: "font-medium text-gray-800", children: question.question }), question.prefixText && _jsx("span", { className: "text-gray-600", children: question.prefixText }), _jsx("input", { type: "text", value: displayValue, onChange: (e) => onAnswerChange(question.id, e.target.value), disabled: isDisabled, placeholder: isExampleQ ? '' : 'Type your answer...', className: `min-w-[140px] flex-1 border-b-2 bg-transparent px-1 py-1 text-center outline-none focus:border-blue-500 disabled:cursor-default ${isExampleQ ? 'border-orange-400 font-semibold text-orange-700 disabled:opacity-100' :
+                                    isCorrect ? 'border-green-500 text-green-700' :
+                                        isWrong ? 'border-red-500 text-red-700' :
+                                            'border-gray-400 disabled:opacity-60'}` }), question.suffixText && _jsx("span", { className: "text-gray-600", children: question.suffixText }), isExampleQ && (_jsx("span", { className: "rounded bg-orange-100 px-2 py-0.5 text-xs font-semibold text-orange-600", children: "Example" }))] }), !isExampleQ && isWrong && hasCorrectAnswer && (_jsxs("p", { className: "text-sm text-green-600", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", correctAnswer] })), !isExampleQ && hasCorrectAnswer && !userAnswer && (_jsxs("p", { className: "text-sm text-green-600", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", correctAnswer] })), question.suggestedAnswers && question.suggestedAnswers.length > 0 && !isDisabled && (_jsx("div", { className: "flex flex-wrap gap-2", children: question.suggestedAnswers.map((sa, idx) => (_jsx("button", { type: "button", onClick: () => onAnswerChange(question.id, sa), className: "rounded-full border border-blue-300 bg-blue-50 px-3 py-1 text-sm text-blue-700 transition-colors hover:bg-blue-100", children: sa }, idx))) }))] })] }));
+}
+export function MoversAnswerTheQuestionRenderer({ partNumber, partName, questionCount, instruction, imageUrl, audioUrl, groupContent, questions, answers, onAnswerChange, isReviewMode = false, correctAnswerTextMap = {}, }) {
+    // Separate example questions from regular questions
+    const exampleQuestions = questions.filter((q) => q.isExample);
+    const regularQuestions = questions.filter((q) => !q.isExample);
+    return (_jsxs("div", { className: "flex flex-col h-full gap-4 sm:gap-6 overflow-y-auto custom-scrollbar", children: [_jsxs("div", { className: "flex flex-col gap-4 p-3 sm:px-6 sm:pt-2", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode }), audioUrl && (_jsx("div", { className: "relative z-10", children: _jsx(CambridgeYleAudioPlayer, { audioSrc: audioUrl, compact: true }) })), imageUrl && (_jsx("div", { className: "relative z-0 flex items-center justify-center", children: _jsx(ResolvedImage, { src: imageUrl, alt: "Shared illustration", className: "max-h-[450px] rounded-lg object-contain shadow-md" }) })), groupContent && (_jsx("div", { className: "rounded-lg bg-amber-50 p-4 text-base leading-relaxed text-gray-800", dangerouslySetInnerHTML: { __html: groupContent } })), exampleQuestions.length > 0 && (_jsx("div", { className: "flex flex-col gap-4 mt-2", children: exampleQuestions.map((question) => (_jsx(QuestionItem, { id: `question-${question.id}`, question: question, answer: answers[question.id], onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, correctAnswerTextMap: correctAnswerTextMap }, question.id))) }))] }), exampleQuestions.length > 0 && regularQuestions.length > 0 && (_jsx("div", { className: "px-3 sm:px-6", children: _jsx("hr", { className: "border-t border-slate-200/60 my-1" }) })), _jsx("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-5 p-3 sm:px-6 sm:pb-6", children: regularQuestions.map((question) => (_jsx("div", { id: `question-${question.id}`, className: "w-full rounded-xl border border-gray-200 bg-white shadow-sm transition-all hover:border-indigo-200 hover:shadow-md", children: _jsx(QuestionItem, { question: question, answer: answers[question.id], onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, correctAnswerTextMap: correctAnswerTextMap }) }, question.id))) })] }));
+}

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

@@ -1 +1,63 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import t from"../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import n from"../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner";function i({question:t,selectedOptionId:n,onSelect:i,isReviewMode:o,correctOptionIndex:s,id:d}){const l=function(e,r){if(!r)return null;const t=e.options.find(e=>e.id===r);return t?.text||null}(t,n),a=void 0!==s?`${t.id}-opt-${s}`:void 0,c=e=>{const r=n===e.id,t=e.id===a;return o?t?"border-green-500 bg-green-50 text-green-700":r&&!t?"border-red-500 bg-red-50 text-red-700":"border-gray-300 bg-white text-gray-500":r?"border-blue-500 bg-blue-50 text-blue-700":"border-gray-300 bg-white hover:border-blue-300 text-gray-700"};return r("div",{id:d,className:"mb-6",children:[r("div",{className:"mb-3 flex items-baseline gap-2",children:[e("span",{className:"flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-sm font-bold text-white",children:t.questionNumber}),r("div",{className:"flex-1 text-base leading-relaxed text-gray-800",children:[e("span",{children:t.sentenceBefore}),e("span",{className:`mx-1 inline-block min-w-[100px] border-b-2 px-2 text-center font-semibold ${(()=>{if(!o)return l?"text-blue-600":"text-gray-400";if(!n)return"text-gray-400";return n===a?"text-green-600":"text-red-600"})()} ${(()=>{if(!o)return l?"border-blue-500":"border-gray-300";if(!n)return"border-gray-300";return n===a?"border-green-500":"border-red-500"})()}`,children:l||"_______"}),e("span",{children:t.sentenceAfter}),r("span",{className:"ml-2 text-sm italic text-gray-500",children:["(",t.options.map(e=>e.text).join(" / "),")"]})]})]}),e("div",{className:"flex flex-wrap gap-2 pl-9",children:t.options.map(e=>r("button",{type:"button",onClick:()=>!o&&i(e.id),disabled:o,className:`rounded-lg border-2 px-4 py-2 text-sm font-medium transition-colors ${c(e)} ${o?"cursor-default":"cursor-pointer"}`,children:[e.label,". ",e.text]},e.id))}),o&&n&&n!==a&&void 0!==s&&r("div",{className:"mt-2 pl-9 text-sm text-green-600",children:[e("span",{className:"font-semibold",children:"Đáp án đúng: "}),t.options[s]?.text]})]})}export function MoversChooseAdjectiveRenderer({partNumber:o,partName:s,questionCount:d,instruction:l,questions:a,answers:c,onAnswerChange:m,isReviewMode:u=!1,correctAnswers:p={}}){return r("div",{className:"grid h-full grid-cols-1 gap-4 sm:gap-6 "+(u?"":"lg:grid-cols-2"),children:[r("div",{className:"flex flex-col gap-4 overflow-y-auto p-3 sm:pb-6 sm:pr-6 sm:pt-6",children:[e(t,{partNumber:o,questionCount:d,partName:s,isReviewMode:u}),e(n,{instruction:l,isReviewMode:u})]}),e("div",{className:"flex flex-col gap-4 overflow-y-auto p-3 sm:pb-6 sm:pl-2 sm:pt-6",children:a.map(r=>e(i,{id:`question-${r.id}`,question:r,selectedOptionId:c[r.id],onSelect:e=>m(r.id,e),isReviewMode:u,correctOptionIndex:p[r.id]},r.id))})]})}
+'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';
+// Get selected option text from answer
+function getSelectedText(question, selectedOptionId) {
+    if (!selectedOptionId)
+        return null;
+    const option = question.options.find((o) => o.id === selectedOptionId);
+    return option?.text || null;
+}
+// Single Question Component with fill-in-blank UI
+function QuestionItem({ question, selectedOptionId, onSelect, isReviewMode, correctOptionIndex, id, }) {
+    const selectedText = getSelectedText(question, selectedOptionId);
+    const correctOptionId = correctOptionIndex !== undefined
+        ? `${question.id}-opt-${correctOptionIndex}`
+        : undefined;
+    // Determine blank color based on review mode
+    const getBlankColor = () => {
+        if (!isReviewMode) {
+            return selectedText ? 'text-blue-600' : 'text-gray-400';
+        }
+        // Review mode
+        if (!selectedOptionId)
+            return 'text-gray-400';
+        const isCorrect = selectedOptionId === correctOptionId;
+        return isCorrect ? 'text-green-600' : 'text-red-600';
+    };
+    const getBlankBorderColor = () => {
+        if (!isReviewMode) {
+            return selectedText ? 'border-blue-500' : 'border-gray-300';
+        }
+        if (!selectedOptionId)
+            return 'border-gray-300';
+        const isCorrect = selectedOptionId === correctOptionId;
+        return isCorrect ? 'border-green-500' : 'border-red-500';
+    };
+    // Option button styles
+    const getOptionStyle = (option) => {
+        const isSelected = selectedOptionId === option.id;
+        const isCorrect = option.id === correctOptionId;
+        if (!isReviewMode) {
+            return isSelected
+                ? 'border-blue-500 bg-blue-50 text-blue-700'
+                : 'border-gray-300 bg-white hover:border-blue-300 text-gray-700';
+        }
+        // Review mode
+        if (isCorrect) {
+            return 'border-green-500 bg-green-50 text-green-700';
+        }
+        if (isSelected && !isCorrect) {
+            return 'border-red-500 bg-red-50 text-red-700';
+        }
+        return 'border-gray-300 bg-white text-gray-500';
+    };
+    return (_jsxs("div", { id: id, className: "mb-6", children: [_jsxs("div", { className: "mb-3 flex items-baseline gap-2", children: [_jsx("span", { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-sm font-bold text-white", children: question.questionNumber }), _jsxs("div", { className: "flex-1 text-base leading-relaxed text-gray-800", children: [_jsx("span", { children: question.sentenceBefore }), _jsx("span", { className: `mx-1 inline-block min-w-[100px] border-b-2 px-2 text-center font-semibold ${getBlankColor()} ${getBlankBorderColor()}`, children: selectedText || '_______' }), _jsx("span", { children: question.sentenceAfter }), _jsxs("span", { className: "ml-2 text-sm italic text-gray-500", children: ["(", question.options.map((o) => o.text).join(' / '), ")"] })] })] }), _jsx("div", { className: "flex flex-wrap gap-2 pl-9", children: question.options.map((option) => (_jsxs("button", { type: "button", onClick: () => !isReviewMode && onSelect(option.id), disabled: isReviewMode, className: `rounded-lg border-2 px-4 py-2 text-sm font-medium transition-colors ${getOptionStyle(option)} ${isReviewMode ? 'cursor-default' : 'cursor-pointer'}`, children: [option.label, ". ", option.text] }, option.id))) }), isReviewMode &&
+                selectedOptionId &&
+                selectedOptionId !== correctOptionId &&
+                correctOptionIndex !== undefined && (_jsxs("div", { className: "mt-2 pl-9 text-sm text-green-600", children: [_jsx("span", { className: "font-semibold", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng: " }), question.options[correctOptionIndex]?.text] }))] }));
+}
+export function MoversChooseAdjectiveRenderer({ partNumber, partName, questionCount, instruction, questions, answers, onAnswerChange, isReviewMode = false, correctAnswers = {}, }) {
+    return (_jsxs("div", { className: `grid h-full grid-cols-1 gap-4 sm:gap-6 ${!isReviewMode ? 'lg:grid-cols-2' : ''}`, children: [_jsxs("div", { className: "flex flex-col gap-4 overflow-y-auto p-3 sm:pb-6 sm:pr-6 sm:pt-6", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode })] }), _jsx("div", { className: "flex flex-col gap-4 overflow-y-auto p-3 sm:pb-6 sm:pl-2 sm:pt-6", children: questions.map((question) => (_jsx(QuestionItem, { id: `question-${question.id}`, question: question, selectedOptionId: answers[question.id], onSelect: (optionId) => onAnswerChange(question.id, optionId), isReviewMode: isReviewMode, correctOptionIndex: correctAnswers[question.id] }, question.id))) })] }));
+}

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

@@ -1 +1,136 @@
-"use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{ZoomIn as n}from"lucide-react";import{useState as l}from"react";import{cn as o}from"../../../../../shared/lib/utils";import{ResolvedImage as i}from"../../../../../components/common/ResolvedImage";import s from"../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import a from"../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner";import d from"../../../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer";function c(e){if("string"==typeof e)return e;if("number"==typeof e||"boolean"==typeof e)return String(e);if(Array.isArray(e))return e.map(e=>c(e)).filter(Boolean).join(" ");if(e&&"object"==typeof e){const t=e;if("string"==typeof t.content)return t.content;if("string"==typeof t.question)return t.question;if("string"==typeof t.text)return t.text;const r=Object.entries(t).filter(([e,t])=>/^\d+$/.test(e)&&"string"==typeof t).sort(([e],[t])=>Number(e)-Number(t)).map(([,e])=>e);if(r.length>0)return r.join("")}return""}function m({imageUrl:o}){const[s,a]=l(!1);return t(r,{children:[t("div",{className:"relative flex items-center justify-center",children:[e(i,{src:o,alt:"Question illustration",className:"max-h-[250px] cursor-pointer rounded-lg object-contain shadow-md",onClick:()=>a(!0)}),e("button",{type:"button",onClick:()=>a(!0),className:"absolute right-2 top-2 rounded-full bg-white/80 p-1.5 shadow-md hover:bg-white","aria-label":"Zoom image",children:e(n,{className:"h-4 w-4 text-gray-600"})})]}),s&&e("div",{className:"fixed inset-0 z-50 flex items-center justify-center bg-black/70",onClick:()=>a(!1),children:e(i,{src:o,alt:"Question illustration (zoomed)",className:"max-h-[90vh] max-w-[90vw] rounded-lg object-contain",showLoadingState:!1})})]})}function u({example:r}){return t("div",{className:"rounded-lg border-2 border-orange-300 bg-white p-4",children:[e("p",{className:"mb-3 text-sm font-semibold text-gray-700",children:"Example:"}),t("p",{className:"mb-3 text-[19px] font-bold text-[#001590]",children:[r.questionNumber,". ",c(r.questionText)]}),r.imageUrl&&e("div",{className:"mb-3",children:e(m,{imageUrl:r.imageUrl})}),"image"===r.optionType?e("div",{className:"grid gap-3 px-2",style:{gridTemplateColumns:`repeat(${r.options.length}, minmax(0, 1fr))`},children:r.options.map(n=>{const l=n.id===r.correctOptionId;return t("div",{className:"relative flex flex-col items-center gap-1 rounded-[16px] border-[3px] p-4 pt-6 mt-3 transition-colors "+(l?"border-green-500 bg-green-50":"border-blue-200 bg-white"),children:[e("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:n.label}),e(i,{src:n.text,alt:`Option ${n.label}`,className:"w-40 rounded object-contain mb-2"}),e("div",{className:o("w-7 h-7 rounded-full flex items-center justify-center border-[3px] transition-all mt-auto",l?"bg-green-500 border-green-500 text-white":"border-gray-300 bg-white text-transparent"),children:e("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3.5",strokeLinecap:"round",strokeLinejoin:"round",children:e("polyline",{points:"20 6 9 17 4 12"})})})]},n.id)})}):e("div",{className:"flex flex-col gap-2 pl-2",children:r.options.map(n=>{const l=n.id===r.correctOptionId;return t("div",{className:"flex items-center gap-3 rounded-lg border-2 px-3 py-2 text-left transition-colors "+(l?"border-green-500 bg-green-50":"border-blue-200 bg-white"),children:[t("span",{className:"text-sm font-medium text-gray-600",children:[n.label,"."]}),e("span",{className:"flex-1 text-sm text-gray-700",children:c(n.text)}),e("div",{className:"flex h-5 w-5 items-center justify-center border-2 rounded-full "+(l?"border-green-500 bg-green-500":"border-gray-300 bg-white"),children:l&&e("div",{className:"h-2 w-2 rounded-full bg-white"})})]},n.id)})})]})}function p({question:r,selectedOptionIds:n,onSelect:l,isReviewMode:s,id:a}){const d=Boolean(r.multipleAnswers||r.correctOptionIds?.length),u=r.correctOptionIds?.length?r.correctOptionIds:r.correctOptionId?[r.correctOptionId]:[],p=e=>{const t=n.includes(e),r=u.includes(e);return s?r?"border-green-500 bg-green-50":t&&!r?"border-red-500 bg-red-50":"border-blue-200 bg-white":t?"border-blue-500 bg-[#f4f9ff]":"border-blue-200 bg-white hover:border-blue-300 hover:bg-blue-50/30"},b=e=>{const t=n.includes(e),r=u.includes(e);return s?r?"border-green-500 bg-green-500":t&&!r?"border-red-500 bg-red-500":"border-gray-300 bg-white":t?"border-blue-500 bg-blue-500":"border-gray-300 bg-white"},g=e=>s?n.includes(e)||u.includes(e):n.includes(e);return t("div",{id:a,className:"mb-6",children:[t("p",{className:"mb-3 text-[19px] font-bold text-[#001590]",children:[r.questionNumber,". ",c(r.questionText)]}),d&&e("p",{className:"mb-3 pl-2 text-sm font-medium text-blue-600",children:"Chọn nhiều đáp án"}),r.imageUrl&&e("div",{className:"mb-3",children:e(m,{imageUrl:r.imageUrl})}),"image"===r.optionType?e("div",{className:"grid gap-3 px-2",style:{gridTemplateColumns:`repeat(${r.options.length}, minmax(0, 1fr))`},children:r.options.map(r=>t("button",{type:"button",onClick:()=>!s&&l(r.id),disabled:s,className:`relative flex flex-col items-center gap-1 rounded-[16px] border-[3px] p-4 pt-6 mt-3 transition-colors ${p(r.id)} ${s?"cursor-default":"cursor-pointer"}`,children:[e("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:r.label}),e(i,{src:r.text,alt:`Option ${r.label}`,className:"w-35 rounded object-contain mb-2"}),e("div",{className:o("w-7 h-7 rounded-full flex items-center justify-center border-[3px] transition-all mt-auto",g(r.id)?"bg-blue-600 border-blue-600 text-white":"border-gray-300 bg-white text-transparent"),children:e("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3.5",strokeLinecap:"round",strokeLinejoin:"round",children:e("polyline",{points:"20 6 9 17 4 12"})})})]},r.id))}):e("div",{className:"flex flex-col gap-2 pl-2",children:r.options.map(r=>t("button",{type:"button",onClick:()=>!s&&l(r.id),disabled:s,className:`flex items-center gap-3 rounded-lg border-2 px-3 py-2 text-left transition-colors ${p(r.id)} ${s?"cursor-default":"cursor-pointer"}`,children:[t("span",{className:"text-sm font-medium text-gray-600",children:[r.label,"."]}),e("span",{className:"flex-1 text-sm text-gray-700",children:c(r.text)}),e("div",{className:`flex h-5 w-5 items-center justify-center border-2 ${d?"rounded-md":"rounded-full"} ${b(r.id)}`,children:g(r.id)&&e("div",{className:(d?"h-2.5 w-2.5 rounded-sm":"h-2 w-2 rounded-full")+" bg-white"})})]},r.id))})]})}function b({article:r,label:n}){return t("div",{className:"rounded-lg border border-gray-200 bg-white p-4 shadow-sm",children:[t("div",{className:"mb-2 flex items-center gap-2",children:[e("span",{className:"flex h-7 w-7 items-center justify-center rounded-full bg-teal-500 text-xs font-bold text-white",children:n}),e("h3",{className:"text-sm font-bold text-gray-900",children:r.name})]}),r.imageUrl&&e("div",{className:"mb-2",children:e(i,{src:r.imageUrl,alt:r.name,className:"max-h-48 w-full rounded-md object-contain"})}),e("div",{className:"article-content text-sm leading-relaxed text-gray-700",dangerouslySetInnerHTML:{__html:r.content}})]})}export function MoversChooseBestAnswerRenderer({partNumber:r,partName:n,questionCount:l,instruction:o,imageUrl:c,groupTitle:m,groupContent:g,articles:x,audioUrl:h,example:f,questions:w,answers:N,onAnswerChange:y,isReviewMode:v=!1}){const j=!!(h||c||x&&x.length>0||g);return t("div",{className:"flex flex-col h-full gap-4 sm:gap-6 overflow-y-auto custom-scrollbar relative",children:[t("div",{className:"flex flex-col gap-2 sm:gap-3 p-3 sm:px-6 sm:pt-2",children:[e(s,{partNumber:r,questionCount:l,partName:n,isReviewMode:v}),e(a,{instruction:o,isReviewMode:v}),m&&!(x&&x.length>0)&&e("h2",{className:"text-center text-xl font-bold uppercase text-coral-500",children:m})]}),j&&t("div",{className:"flex flex-col gap-2 sm:gap-3 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:[h&&e(d,{audioSrc:h,compact:!0}),c&&e("div",{className:"flex items-center justify-center",children:e(i,{src:c,alt:"Shared illustration",className:"max-h-[250px] rounded-lg object-contain shadow-md"})}),x&&x.length>0?e("div",{className:"flex flex-col gap-3 max-h-[35vh] overflow-y-auto custom-scrollbar pr-2",children:x.map((t,r)=>e(b,{article:t,label:String.fromCharCode(65+r)},r))}):g?e("div",{className:"article-content rounded-lg bg-amber-50 p-3 sm:p-4 text-sm leading-relaxed text-gray-700 max-h-[35vh] overflow-y-auto pr-2 custom-scrollbar shadow-inner",dangerouslySetInnerHTML:{__html:g}}):null]}),f&&e("div",{className:"p-3 sm:px-6",children:e(u,{example:f})}),e("div",{className:"p-3 sm:pb-6 sm:px-6 "+(v?"grid grid-cols-1 md:grid-cols-2 gap-6":"flex flex-col gap-4"),children:w.map(t=>{const r=N[t.id],n=Array.isArray(r)?r:"string"==typeof r&&r?[r]:[];return e(p,{id:`question-${t.id}`,question:t,selectedOptionIds:n,onSelect:e=>{const r=t.multipleAnswers?n.includes(e)?n.filter(t=>t!==e):[...n,e]:e;y(t.id,r)},isReviewMode:v},t.id)})})]})}
+'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';
+import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+import CambridgeYleAudioPlayer from '../../../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer';
+function normalizeRenderableText(value) {
+    if (typeof value === 'string') {
+        return value;
+    }
+    if (typeof value === 'number' || typeof value === 'boolean') {
+        return String(value);
+    }
+    if (Array.isArray(value)) {
+        return value
+            .map((item) => normalizeRenderableText(item))
+            .filter(Boolean)
+            .join(' ');
+    }
+    if (value && typeof value === 'object') {
+        const record = value;
+        if (typeof record.content === 'string') {
+            return record.content;
+        }
+        if (typeof record.question === 'string') {
+            return record.question;
+        }
+        if (typeof record.text === 'string') {
+            return record.text;
+        }
+        const numericSegments = Object.entries(record)
+            .filter(([key, segment]) => /^\d+$/.test(key) && typeof segment === 'string')
+            .sort(([a], [b]) => Number(a) - Number(b))
+            .map(([, segment]) => segment);
+        if (numericSegments.length > 0) {
+            return numericSegments.join('');
+        }
+    }
+    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) => {
+                    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
+                                    ? "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) => {
+                    const isCorrect = option.id === example.correctOptionId;
+                    return (_jsxs("div", { className: `flex items-center gap-3 rounded-lg border-2 px-3 py-2 text-left transition-colors ${isCorrect ? 'border-green-500 bg-green-50' : 'border-blue-200 bg-white'}`, 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 rounded-full ${isCorrect ? 'border-green-500 bg-green-500' : 'border-gray-300 bg-white'}`, children: isCorrect && (_jsx("div", { className: "h-2 w-2 rounded-full bg-white" })) })] }, option.id));
+                }) }))] }));
+}
+// Single Question Component
+function QuestionItem({ question, selectedOptionIds, onSelect, isReviewMode, id, }) {
+    const isMultipleAnswers = Boolean(question.multipleAnswers ||
+        (Array.isArray(question.correctOptionIds) && question.correctOptionIds.length > 1));
+    const correctOptionIds = question.correctOptionIds?.length
+        ? question.correctOptionIds
+        : question.correctOptionId
+            ? [question.correctOptionId]
+            : [];
+    const getOptionStyle = (optionId) => {
+        const isSelected = selectedOptionIds.includes(optionId);
+        const isCorrect = correctOptionIds.includes(optionId);
+        if (!isReviewMode) {
+            return isSelected
+                ? 'border-blue-500 bg-[#f4f9ff]'
+                : 'border-blue-200 bg-white hover:border-blue-300 hover:bg-blue-50/30';
+        }
+        if (isCorrect) {
+            return 'border-green-500 bg-green-50';
+        }
+        if (isSelected && !isCorrect) {
+            return 'border-red-500 bg-red-50';
+        }
+        return 'border-blue-200 bg-white';
+    };
+    const getIndicatorStyle = (optionId) => {
+        const isSelected = selectedOptionIds.includes(optionId);
+        const isCorrect = correctOptionIds.includes(optionId);
+        if (!isReviewMode) {
+            return isSelected
+                ? 'border-blue-500 bg-blue-500'
+                : 'border-gray-300 bg-white';
+        }
+        if (isCorrect) {
+            return 'border-green-500 bg-green-500';
+        }
+        if (isSelected && !isCorrect) {
+            return 'border-red-500 bg-red-500';
+        }
+        return 'border-gray-300 bg-white';
+    };
+    const showIndicatorMark = (optionId) => {
+        if (!isReviewMode) {
+            return selectedOptionIds.includes(optionId);
+        }
+        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)
+                                ? "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))) }))] }));
+}
+// Article Card for ARTICLES groupType (e.g., GN QE RWL Part 2)
+function ArticleCard({ article, label, }) {
+    return (_jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-4 shadow-sm", 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 bg-teal-500 text-xs font-bold text-white", children: label }), _jsx("h3", { className: "text-sm font-bold text-gray-900", children: article.name })] }), article.imageUrl && (_jsx("div", { className: "mb-2", children: _jsx(ResolvedImage, { src: article.imageUrl, alt: article.name, className: "max-h-48 w-full rounded-md object-contain" }) })), _jsx("div", { className: "article-content text-sm leading-relaxed text-gray-700", dangerouslySetInnerHTML: { __html: article.content } })] }));
+}
+export function MoversChooseBestAnswerRenderer({ partNumber, partName, questionCount, instruction, imageUrl, groupTitle, groupContent, articles, audioUrl, example, questions, answers, onAnswerChange, isReviewMode = false, }) {
+    const hasGroupContent = !!(audioUrl || imageUrl || (articles && articles.length > 0) || groupContent);
+    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-2", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode }), groupTitle && !(articles && articles.length > 0) && (_jsx("h2", { className: "text-center text-xl font-bold uppercase text-coral-500", children: groupTitle }))] }), hasGroupContent && (_jsxs("div", { className: "flex flex-col gap-2 sm:gap-3 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: [audioUrl && _jsx(CambridgeYleAudioPlayer, { audioSrc: audioUrl, compact: true }), imageUrl && (_jsx("div", { className: "flex items-center justify-center", children: _jsx(ResolvedImage, { src: imageUrl, alt: "Shared illustration", className: "max-h-[250px] rounded-lg object-contain shadow-md" }) })), articles && articles.length > 0 ? (_jsx("div", { className: "flex flex-col gap-3 max-h-[35vh] overflow-y-auto custom-scrollbar pr-2", children: articles.map((article, index) => (_jsx(ArticleCard, { article: article, label: String.fromCharCode(65 + index) }, index))) })) : groupContent ? (_jsx("div", { className: "article-content rounded-lg bg-amber-50 p-3 sm:p-4 text-sm leading-relaxed text-gray-700 max-h-[35vh] overflow-y-auto pr-2 custom-scrollbar shadow-inner", dangerouslySetInnerHTML: { __html: groupContent } })) : null] })), example && _jsx("div", { className: "p-3 sm:px-6", children: _jsx(ExampleSection, { example: example }) }), _jsx("div", { className: `p-3 sm:pb-6 sm:px-6 ${isReviewMode ? 'grid grid-cols-1 md:grid-cols-2 gap-6' : 'flex flex-col gap-4'}`, children: questions.map((question) => {
+                    const rawAnswer = answers[question.id];
+                    const selectedOptionIds = Array.isArray(rawAnswer)
+                        ? rawAnswer
+                        : typeof rawAnswer === 'string' && rawAnswer
+                            ? [rawAnswer]
+                            : [];
+                    const isMultiple = Boolean(question.multipleAnswers ||
+                        (Array.isArray(question.correctOptionIds) && question.correctOptionIds.length > 1));
+                    return (_jsx(QuestionItem, { id: `question-${question.id}`, question: question, selectedOptionIds: selectedOptionIds, onSelect: (optionId) => {
+                            const nextAnswer = isMultiple
+                                ? (selectedOptionIds.includes(optionId)
+                                    ? selectedOptionIds.filter((selectedId) => selectedId !== optionId)
+                                    : [...selectedOptionIds, optionId])
+                                : optionId;
+                            onAnswerChange(question.id, nextAnswer);
+                        }, isReviewMode: isReviewMode }, question.id));
+                }) })] }));
+}