@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.30

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

@@ -1 +1,131 @@
-"use client";import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import{Check as s,ChevronDown as a,X as n}from"lucide-react";import{ResolvedImage as i}from"../../../../../components/common/ResolvedImage";import o from"../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import l from"../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner";import d from"../../../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer";function c({opt:s,isUsed:a}){const n=Boolean(s.imageUrl?.trim()),o=Boolean(s.content?.trim()),l=!n&&!o,d=o?s.content:s.answer;return l?e("div",{className:["group relative flex min-h-[56px] items-center rounded-xl border-2 px-4 py-3 shadow-sm transition-all duration-300",a?"border-emerald-400 bg-emerald-50/50 opacity-60 scale-[0.98] shadow-emerald-100/50":"border-slate-200 bg-white hover:border-indigo-300 hover:shadow-md hover:shadow-indigo-100/50"].join(" "),children:e("span",{className:"min-w-0 flex-1 text-sm font-semibold leading-snug break-words transition-colors "+(a?"text-emerald-700":"text-slate-700"),children:s.answer})}):t("div",{className:["group relative flex min-h-[180px] flex-col gap-3 rounded-2xl border-2 p-3 shadow-sm transition-all duration-300",a?"border-emerald-400 bg-emerald-50/40 opacity-60 scale-[0.98] shadow-emerald-100/50":"border-slate-200 bg-white/95 hover:-translate-y-1 hover:border-indigo-300 hover:shadow-lg hover:shadow-indigo-100/50"].join(" "),children:[s.answer!==d&&e("div",{className:"flex items-start justify-start gap-2",children:e("div",{className:"relative inline-flex min-h-[40px] min-w-[40px] items-center justify-center rounded-xl px-3 py-1.5 font-extrabold text-white shadow-sm transition-all duration-300 "+(a?"bg-gradient-to-br from-emerald-400 to-emerald-600":"bg-gradient-to-br from-indigo-500 to-violet-600"),children:e("span",{className:"text-sm text-center leading-tight break-words line-clamp-2",children:s.answer})})}),n?t(r,{children:[e("div",{className:"flex flex-1 items-center justify-center overflow-hidden rounded-xl border p-2 transition-all duration-300 "+(a?"border-emerald-200/50 bg-emerald-100/30 grayscale-[40%]":"border-slate-100 bg-gradient-to-br from-slate-50 to-white"),children:e(i,{src:s.imageUrl,alt:s.answer,className:"h-28 w-full rounded-xl object-contain sm:h-32"})}),e("div",{className:"min-w-0",children:e("div",{className:"truncate text-center text-sm font-semibold transition-colors "+(a?"text-emerald-700":"text-slate-700"),children:d||`Picture ${s.answer}`})})]}):e("div",{className:"flex flex-1 items-center justify-center rounded-xl border border-slate-100 bg-gradient-to-br from-slate-50 to-white px-4 py-5 text-center",children:e("span",{className:"text-sm font-semibold leading-snug "+(a?"text-emerald-700":"text-slate-700"),children:d})})]})}function m({value:r,onChange:s,disabled:n,options:i}){const o=r.trim().toUpperCase();return t("div",{className:"group relative min-w-[160px] sm:min-w-[210px]",children:[t("select",{value:o,onChange:e=>s(e.target.value),disabled:n,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-indigo-300 focus:border-indigo-500 focus:ring-4 focus:ring-indigo-100/50 disabled:cursor-not-allowed disabled:opacity-60","aria-label":"Chọn đáp án đúng",children:[e("option",{value:"",children:"Chọn đáp án"}),i.map(r=>e("option",{value:r.answer.toUpperCase(),children:r.content||r.answer},r.answer))]}),e("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-indigo-100 group-focus-within:text-indigo-600",children:e(a,{className:"h-3.5 w-3.5",strokeWidth:2.5})})]})}function p({question:r,rawAnswer:s,displayValue:a,isDisabled:n,isExampleQ:o,onAnswerChange:l,isReviewMode:d,correctAnswer:c,answerStatus:p,options:u}){return t("div",{className:["group relative overflow-hidden rounded-[14px] border p-4 shadow-sm transition-all duration-200 flex flex-col gap-4",o?"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-indigo-200 hover:shadow-md hover:shadow-indigo-100/50"].join(" "),children:[t("div",{className:"flex items-start gap-4",children:[e("span",{className:"flex h-[38px] w-[38px] shrink-0 items-center justify-center rounded-[10px] text-[15px] font-extrabold text-white shadow-sm "+(o?"bg-gradient-to-br from-amber-400 to-orange-500":"bg-gradient-to-br from-indigo-500 to-violet-600"),children:r.questionNumber}),t("div",{className:"flex flex-1 flex-col gap-2 pt-1",children:[o&&e("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"}),e("div",{className:"text-[15px] font-medium leading-relaxed text-slate-800 break-words",children:r.question})]})]}),r.imageUrl&&e("div",{className:"flex w-full justify-center",children:e(i,{src:r.imageUrl,alt:`Q${r.questionNumber}`,className:"h-30 w-auto min-w-[5rem] rounded-xl border border-slate-100 bg-slate-50 object-contain p-1.5 shadow-sm sm:h-30"})}),e("div",{className:"mt-1 flex w-full items-center justify-end border-t border-slate-100/80 pt-3",children:d&&!o?e(h,{userAnswer:a,correctAnswer:c,status:p??"unanswered"}):e("div",{className:"w-full sm:w-auto",children:e(m,{value:s,onChange:e=>l(r.id,e),disabled:n,options:u})})})]})}function h({userAnswer:a,correctAnswer:i,status:o}){return t("div",{className:`flex w-full sm:w-auto items-center justify-center gap-2 rounded-xl border px-5 py-2 text-[15px] shadow-sm transition-colors ${"correct"===o?"border-emerald-200 bg-emerald-50 text-emerald-700":"incorrect"===o?"border-red-200 bg-red-50 text-red-700":"border-slate-200 bg-slate-50 text-slate-700"}`,children:["correct"===o&&t(r,{children:[e(s,{className:"h-4 w-4 shrink-0",strokeWidth:3}),e("span",{className:"font-medium opacity-90",children:"Đáp án:"}),e("span",{className:"ml-1 rounded-md bg-white px-2.5 py-0.5 border border-emerald-100 font-bold shadow-sm",children:a||"Trống"})]}),"unanswered"===o&&t("div",{className:"flex items-center gap-2",children:[e("span",{className:"font-medium opacity-80",children:"Đáp án:"}),e("span",{className:"rounded-md bg-white px-2.5 py-0.5 border border-slate-200 font-bold shadow-sm",children:i})]}),"incorrect"===o&&t("div",{className:"flex items-center gap-2",children:[e(n,{className:"h-4 w-4 shrink-0",strokeWidth:3}),e("span",{className:"font-medium opacity-90",children:"Đáp án:"}),e("span",{className:"line-through decoration-red-400/80 decoration-2 rounded-md bg-white/60 px-2 py-0.5 border border-red-100/50 font-semibold opacity-70",children:a||"Trống"}),e("span",{className:"text-red-400 font-bold",children:"→"}),e("span",{className:"rounded-md bg-white px-2.5 py-0.5 border border-red-200 font-bold shadow-sm",children:i})]})]})}export function MoversMatchByWritingAnswerRenderer({partNumber:a,partName:m,questionCount:h,instruction:u,audioUrl:x,options:g,questions:b,answers:w,onAnswerChange:f,isReviewMode:v=!1,viewMode:N="DEFAULT",groupImageUrl:y,correctAnswerTextMap:C={},isCorrectMap:j={}}){const A=e=>{if(!w[e])return"unanswered";const r=j[e];return!0===r?"correct":!1===r?"incorrect":"unanswered"},k=e=>{if(!e)return"";const r=e.trim().toUpperCase(),t=g.find(e=>e.answer.toUpperCase()===r);return t?t.content||t.answer:e};if("CONVERSATION"===N)return t("div",{className:"flex h-full flex-col gap-4 overflow-y-auto p-3 sm:gap-6 sm:p-6",children:[e(o,{partNumber:a,questionCount:h,partName:m,isReviewMode:v}),e(l,{instruction:u,isReviewMode:v}),x&&e("div",{className:"shrink-0",children:e(d,{audioSrc:x,compact:!0})}),y&&e(i,{src:y,alt:"Group illustration",className:"max-h-[200px] rounded-lg object-contain shadow-md"}),g.length>0&&e("div",{className:"grid grid-cols-2 gap-2 rounded-xl border border-slate-200 bg-slate-50 p-3 sm:grid-cols-4",children:g.map((r,s)=>t("div",{className:"flex items-center gap-2 rounded-lg border border-slate-200 bg-white p-2",children:[e("span",{className:"flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 text-xs font-bold text-white",children:r.answer}),e("span",{className:"flex-1 text-sm text-slate-700",children:r.content||r.answer})]},s))}),e("div",{className:"flex flex-col gap-3",children:b.filter(e=>!e.isExample).map(a=>{const i=A(a.id),o=w[a.id]||"",l=k(o),d=C[a.id];return t("div",{id:`question-${a.id}`,className:"flex flex-col gap-2",children:[t("div",{className:"flex items-start gap-2",children:[t("span",{className:"w-12 shrink-0 text-xs font-semibold text-slate-500",children:[a.askerName,":"]}),e("div",{className:"max-w-[80%] rounded-2xl rounded-tl-none bg-slate-100 px-4 py-2 text-sm text-slate-800",children:a.question})]}),e("div",{className:"flex items-center justify-end gap-2",children:t("div",{className:"flex max-w-[80%] items-center gap-2 rounded-2xl rounded-tr-none border border-indigo-200 bg-indigo-50 px-4 py-2",children:[t("span",{className:"shrink-0 text-xs font-semibold text-indigo-600",children:[a.answererName,":"]}),v?t("span",{className:"flex items-center gap-1 text-sm font-bold",children:["correct"===i&&e("span",{className:"text-slate-800",children:l}),"unanswered"===i&&e("span",{className:"text-indigo-600",children:d}),"incorrect"===i&&t(r,{children:[e("span",{className:"text-red-500 line-through",children:l}),e("span",{className:"text-slate-400",children:"→"}),e("span",{className:"text-indigo-600",children:d})]}),e("div",{className:"flex h-5 w-5 items-center justify-center rounded-full text-white "+("correct"===i?"bg-emerald-500":"incorrect"===i?"bg-red-500":"bg-indigo-500"),children:e("incorrect"===i?n:s,{className:"h-3 w-3",strokeWidth:3})})]}):t("select",{value:o.trim().toUpperCase(),onChange:e=>f(a.id,e.target.value),disabled:v,className:"min-w-[140px] rounded-lg border border-indigo-300 bg-white px-3 py-2 text-sm font-bold text-slate-700 outline-none focus:border-indigo-500",children:[e("option",{value:"",children:"Chọn đáp án"}),g.map(r=>e("option",{value:r.answer.toUpperCase(),children:r.content||r.answer},r.answer))]})]})})]},a.id)})})]});const U=new Set(Object.values(w).filter(e=>"string"==typeof e&&Boolean(e)).map(e=>e.trim().toUpperCase()));b.forEach(e=>{e.isExample&&e.exampleAnswer&&U.add(e.exampleAnswer.trim().toUpperCase())});const q=b.filter(e=>e.isExample),M=b.filter(e=>!e.isExample);return t("div",{className:"flex flex-col h-full gap-5 sm:gap-6 overflow-y-auto custom-scrollbar",children:[t("div",{className:"flex flex-col gap-4 sm:gap-5 p-3 sm:px-6 sm:pt-2",children:[e(o,{partNumber:a,questionCount:h,partName:m,isReviewMode:v}),e(l,{instruction:u,isReviewMode:v}),x&&e("div",{className:"shrink-0",children:e(d,{audioSrc:x,compact:!0})}),y&&e("div",{className:"flex items-center justify-center rounded-2xl border border-slate-200/80 bg-white p-3 shadow-sm",children:e(i,{src:y,alt:"Group illustration",className:"max-h-[300px] rounded-xl object-contain shadow-md"})}),g.length>0&&t("div",{className:"rounded-[20px] border border-slate-200/80 bg-gradient-to-br from-white via-white to-slate-50 p-4 sm:p-5 shadow-lg shadow-slate-100/70",children:[e("div",{className:"mb-4 flex items-center justify-between gap-3",children:e("div",{children:e("h3",{className:"text-sm font-bold uppercase tracking-[0.18em] text-slate-500",children:"Answer bank"})})}),e("div",{className:"grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",children:g.map((r,t)=>e(c,{opt:r,isUsed:U.has(r.answer.toUpperCase())},t))})]}),q.length>0&&e("div",{className:"flex flex-col gap-4 mt-2",children:q.map(r=>{const t=w[r.id]||"",s=r.exampleAnswer||k(t);return e("div",{id:`question-${r.id}`,className:"w-full",children:e(p,{question:r,rawAnswer:t,displayValue:s,isDisabled:!0,isExampleQ:!0,onAnswerChange:f,isReviewMode:v,correctAnswer:C[r.id],answerStatus:void 0,options:g})},r.id)})})]}),q.length>0&&M.length>0&&e("div",{className:"px-3 sm:px-6",children:e("hr",{className:"border-t border-slate-200/60 my-2"})}),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:M.map(r=>{const t=v,s=w[r.id]||"",a=k(s);return e("div",{id:`question-${r.id}`,className:"w-full",children:e(p,{question:r,rawAnswer:s,displayValue:a,isDisabled:t,isExampleQ:!1,onAnswerChange:f,isReviewMode:v,correctAnswer:C[r.id],answerStatus:v?A(r.id):void 0,options:g})},r.id)})})]})}
+/**
+ * MATCH_BY_WRITING_ANSWER Renderer - Shared options grid + choose matching answer
+ * Supports DEFAULT (image-based options) and CONVERSATION (dialogue) modes
+ * Used in Movers P3/P6, Flyers P7
+ */
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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';
+import CambridgeYleAudioPlayer from '../../../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer';
+// ---------------------------------------------------------------------------
+// Option card — left column palette
+// ---------------------------------------------------------------------------
+function OptionCard({ opt, isUsed, }) {
+    const hasImage = Boolean(opt.imageUrl?.trim());
+    const hasContent = Boolean(opt.content?.trim());
+    const isAnswerOnly = !hasImage && !hasContent;
+    const displayText = hasContent ? opt.content : opt.answer;
+    if (isAnswerOnly) {
+        return (_jsx("div", { className: [
+                'group relative flex min-h-[56px] items-center rounded-xl border-2 px-4 py-3 shadow-sm transition-all duration-300',
+                isUsed
+                    ? 'border-emerald-400 bg-emerald-50/50 opacity-60 scale-[0.98] shadow-emerald-100/50'
+                    : 'border-slate-200 bg-white hover:border-indigo-300 hover:shadow-md hover:shadow-indigo-100/50',
+            ].join(' '), children: _jsx("span", { className: `min-w-0 flex-1 text-sm font-semibold leading-snug break-words transition-colors ${isUsed ? 'text-emerald-700' : 'text-slate-700'}`, children: opt.answer }) }));
+    }
+    return (_jsxs("div", { className: [
+            'group relative flex min-h-[180px] flex-col gap-3 rounded-2xl border-2 p-3 shadow-sm transition-all duration-300',
+            isUsed
+                ? 'border-emerald-400 bg-emerald-50/40 opacity-60 scale-[0.98] shadow-emerald-100/50'
+                : 'border-slate-200 bg-white/95 hover:-translate-y-1 hover:border-indigo-300 hover:shadow-lg hover:shadow-indigo-100/50',
+        ].join(' '), children: [opt.answer !== displayText && (_jsx("div", { className: "flex items-start justify-start gap-2", children: _jsx("div", { className: `relative inline-flex min-h-[40px] min-w-[40px] items-center justify-center rounded-xl px-3 py-1.5 font-extrabold text-white shadow-sm transition-all duration-300 ${isUsed
+                        ? 'bg-gradient-to-br from-emerald-400 to-emerald-600'
+                        : 'bg-gradient-to-br from-indigo-500 to-violet-600'}`, children: _jsx("span", { className: "text-sm text-center leading-tight break-words line-clamp-2", children: opt.answer }) }) })), hasImage ? (_jsxs(_Fragment, { children: [_jsx("div", { className: `flex flex-1 items-center justify-center overflow-hidden rounded-xl border p-2 transition-all duration-300 ${isUsed ? 'border-emerald-200/50 bg-emerald-100/30 grayscale-[40%]' : 'border-slate-100 bg-gradient-to-br from-slate-50 to-white'}`, children: _jsx(ResolvedImage, { src: opt.imageUrl, alt: opt.answer, className: "h-28 w-full rounded-xl object-contain sm:h-32" }) }), _jsx("div", { className: "min-w-0", children: _jsx("div", { className: `truncate text-center text-sm font-semibold transition-colors ${isUsed ? 'text-emerald-700' : 'text-slate-700'}`, children: displayText || `Picture ${opt.answer}` }) })] })) : (_jsx("div", { className: "flex flex-1 items-center justify-center rounded-xl border border-slate-100 bg-gradient-to-br from-slate-50 to-white px-4 py-5 text-center", children: _jsx("span", { className: `text-sm font-semibold leading-snug ${isUsed ? 'text-emerald-700' : 'text-slate-700'}`, children: displayText }) }))] }));
+}
+// ---------------------------------------------------------------------------
+// Answer selector — choose correct answer
+// ---------------------------------------------------------------------------
+function AnswerSelector({ value, onChange, disabled, options, }) {
+    const normalizedValue = value.trim().toUpperCase();
+    return (_jsxs("div", { className: "group relative min-w-[160px] sm:min-w-[210px]", children: [_jsxs("select", { value: normalizedValue, onChange: (e) => onChange(e.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-indigo-300 focus:border-indigo-500 focus:ring-4 focus:ring-indigo-100/50 disabled:cursor-not-allowed disabled:opacity-60", "aria-label": "Ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng", children: [_jsx("option", { value: "", children: "Ch\u1ECDn \u0111\u00E1p \u00E1n" }), options.map((opt) => (_jsx("option", { value: opt.answer.toUpperCase(), children: opt.content || opt.answer }, opt.answer)))] }), _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-indigo-100 group-focus-within:text-indigo-600", children: _jsx(ChevronDown, { className: "h-3.5 w-3.5", strokeWidth: 2.5 }) })] }));
+}
+// ---------------------------------------------------------------------------
+// Question row — right column
+// ---------------------------------------------------------------------------
+function QuestionRow({ question, rawAnswer, displayValue, isDisabled, isExampleQ, onAnswerChange, isReviewMode, correctAnswer, answerStatus, options, }) {
+    return (_jsxs("div", { className: [
+            'group relative overflow-hidden rounded-[14px] border p-4 shadow-sm transition-all duration-200 flex flex-col gap-4',
+            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-indigo-200 hover:shadow-md hover:shadow-indigo-100/50',
+        ].join(' '), children: [_jsxs("div", { className: "flex items-start gap-4", 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-indigo-500 to-violet-600'}`, children: question.questionNumber }), _jsxs("div", { className: "flex flex-1 flex-col gap-2 pt-1", children: [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" })), _jsx("div", { className: "text-[15px] font-medium leading-relaxed text-slate-800 break-words", children: question.question })] })] }), question.imageUrl && (_jsx("div", { className: "flex w-full justify-center", children: _jsx(ResolvedImage, { src: question.imageUrl, alt: `Q${question.questionNumber}`, className: "h-30 w-auto min-w-[5rem] rounded-xl border border-slate-100 bg-slate-50 object-contain p-1.5 shadow-sm sm:h-30" }) })), _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: displayValue, 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, options: options }) })) })] }));
+}
+// ---------------------------------------------------------------------------
+// Review answer display
+// ---------------------------------------------------------------------------
+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 sm:w-auto items-center justify-center gap-2 rounded-xl border px-5 py-2 text-[15px] shadow-sm transition-colors ${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 bg-white px-2.5 py-0.5 border border-emerald-100 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 bg-white px-2.5 py-0.5 border border-slate-200 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: "line-through decoration-red-400/80 decoration-2 rounded-md bg-white/60 px-2 py-0.5 border border-red-100/50 font-semibold opacity-70", children: userAnswer || 'Trống' }), _jsx("span", { className: "text-red-400 font-bold", children: "\u2192" }), _jsx("span", { className: "rounded-md bg-white px-2.5 py-0.5 border border-red-200 font-bold shadow-sm", children: correctAnswer })] }))] }));
+}
+// ---------------------------------------------------------------------------
+// Main renderer
+// ---------------------------------------------------------------------------
+export function MoversMatchByWritingAnswerRenderer({ partNumber, partName, questionCount, instruction, audioUrl, options, questions, answers, onAnswerChange, isReviewMode = false, viewMode = 'DEFAULT', groupImageUrl, 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';
+    };
+    // Helper to get original text for display instead of uppercase
+    const getOriginalAnswerText = (val) => {
+        if (!val)
+            return '';
+        const upperVal = val.trim().toUpperCase();
+        const opt = options.find((o) => o.answer.toUpperCase() === upperVal);
+        return opt ? (opt.content || opt.answer) : val;
+    };
+    // --------------------- CONVERSATION MODE ---------------------
+    if (viewMode === 'CONVERSATION') {
+        return (_jsxs("div", { className: "flex h-full flex-col gap-4 overflow-y-auto p-3 sm:gap-6 sm:p-6", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode }), audioUrl && (_jsx("div", { className: "shrink-0", children: _jsx(CambridgeYleAudioPlayer, { audioSrc: audioUrl, compact: true }) })), groupImageUrl && (_jsx(ResolvedImage, { src: groupImageUrl, alt: "Group illustration", className: "max-h-[200px] rounded-lg object-contain shadow-md" })), options.length > 0 && (_jsx("div", { className: "grid grid-cols-2 gap-2 rounded-xl border border-slate-200 bg-slate-50 p-3 sm:grid-cols-4", children: options.map((opt, idx) => (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-slate-200 bg-white p-2", children: [_jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 text-xs font-bold text-white", children: opt.answer }), _jsx("span", { className: "flex-1 text-sm text-slate-700", children: opt.content || opt.answer })] }, idx))) })), _jsx("div", { className: "flex flex-col gap-3", children: questions
+                        .filter((q) => !q.isExample)
+                        .map((question) => {
+                        const status = getAnswerStatus(question.id);
+                        const rawUserAnswer = answers[question.id] || '';
+                        const userAnswer = getOriginalAnswerText(rawUserAnswer);
+                        const correctAnswer = correctAnswerTextMap[question.id];
+                        return (_jsxs("div", { id: `question-${question.id}`, className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsxs("span", { className: "w-12 shrink-0 text-xs font-semibold text-slate-500", children: [question.askerName, ":"] }), _jsx("div", { className: "max-w-[80%] rounded-2xl rounded-tl-none bg-slate-100 px-4 py-2 text-sm text-slate-800", children: question.question })] }), _jsx("div", { className: "flex items-center justify-end gap-2", children: _jsxs("div", { className: "flex max-w-[80%] items-center gap-2 rounded-2xl rounded-tr-none border border-indigo-200 bg-indigo-50 px-4 py-2", children: [_jsxs("span", { className: "shrink-0 text-xs font-semibold text-indigo-600", children: [question.answererName, ":"] }), isReviewMode ? (_jsxs("span", { className: "flex items-center gap-1 text-sm font-bold", children: [status === 'correct' && _jsx("span", { className: "text-slate-800", children: userAnswer }), status === 'unanswered' && _jsx("span", { className: "text-indigo-600", children: correctAnswer }), status === 'incorrect' && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-red-500 line-through", children: userAnswer }), _jsx("span", { className: "text-slate-400", children: "\u2192" }), _jsx("span", { className: "text-indigo-600", children: correctAnswer })] })), _jsx("div", { className: `flex h-5 w-5 items-center justify-center rounded-full text-white ${status === 'correct'
+                                                            ? 'bg-emerald-500'
+                                                            : status === 'incorrect'
+                                                                ? 'bg-red-500'
+                                                                : 'bg-indigo-500'}`, children: status === 'incorrect' ? (_jsx(X, { className: "h-3 w-3", strokeWidth: 3 })) : (_jsx(Check, { className: "h-3 w-3", strokeWidth: 3 })) })] })) : (_jsxs("select", { value: rawUserAnswer.trim().toUpperCase(), onChange: (e) => onAnswerChange(question.id, e.target.value), disabled: isReviewMode, className: "min-w-[140px] rounded-lg border border-indigo-300 bg-white px-3 py-2 text-sm font-bold text-slate-700 outline-none focus:border-indigo-500", children: [_jsx("option", { value: "", children: "Ch\u1ECDn \u0111\u00E1p \u00E1n" }), options.map((opt) => (_jsx("option", { value: opt.answer.toUpperCase(), children: opt.content || opt.answer }, opt.answer)))] }))] }) })] }, question.id));
+                    }) })] }));
+    }
+    // Collect used answer letters for visual state
+    const usedAnswers = new Set(Object.values(answers)
+        .filter((v) => typeof v === 'string' && Boolean(v))
+        .map((v) => v.trim().toUpperCase()));
+    // Also include example answers as "used"
+    questions.forEach((q) => {
+        if (q.isExample && q.exampleAnswer)
+            usedAnswers.add(q.exampleAnswer.trim().toUpperCase());
+    });
+    // Separate example questions and actual questions
+    const exampleQuestions = questions.filter((q) => q.isExample);
+    const actualQuestions = questions.filter((q) => !q.isExample);
+    // --------------------- DEFAULT MODE — Top/Bottom layout ---------------------
+    return (_jsxs("div", { className: "flex flex-col h-full gap-5 sm:gap-6 overflow-y-auto custom-scrollbar", children: [_jsxs("div", { className: "flex flex-col gap-4 sm:gap-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 }), audioUrl && (_jsx("div", { className: "shrink-0", children: _jsx(CambridgeYleAudioPlayer, { audioSrc: audioUrl, compact: true }) })), groupImageUrl && (_jsx("div", { className: "flex items-center justify-center rounded-2xl border border-slate-200/80 bg-white p-3 shadow-sm", children: _jsx(ResolvedImage, { src: groupImageUrl, alt: "Group illustration", className: "max-h-[300px] rounded-xl object-contain shadow-md" }) })), options.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 sm:p-5 shadow-lg shadow-slate-100/70", children: [_jsx("div", { className: "mb-4 flex items-center justify-between gap-3", children: _jsx("div", { children: _jsx("h3", { className: "text-sm font-bold uppercase tracking-[0.18em] text-slate-500", children: "Answer bank" }) }) }), _jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4", children: options.map((opt, idx) => (_jsx(OptionCard, { opt: opt, isUsed: usedAnswers.has(opt.answer.toUpperCase()) }, idx))) })] })), exampleQuestions.length > 0 && (_jsx("div", { className: "flex flex-col gap-4 mt-2", children: exampleQuestions.map((question) => {
+                            const rawAnswer = answers[question.id] || '';
+                            const displayValue = question.exampleAnswer || getOriginalAnswerText(rawAnswer);
+                            return (_jsx("div", { id: `question-${question.id}`, className: "w-full", children: _jsx(QuestionRow, { question: question, rawAnswer: rawAnswer, displayValue: displayValue, isDisabled: true, isExampleQ: true, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, correctAnswer: correctAnswerTextMap[question.id], answerStatus: undefined, options: options }) }, question.id));
+                        }) }))] }), exampleQuestions.length > 0 && actualQuestions.length > 0 && (_jsx("div", { className: "px-3 sm:px-6", children: _jsx("hr", { className: "border-t border-slate-200/60 my-2" }) })), _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: actualQuestions.map((question) => {
+                    const isDisabled = isReviewMode;
+                    const rawAnswer = answers[question.id] || '';
+                    const displayValue = getOriginalAnswerText(rawAnswer);
+                    return (_jsx("div", { id: `question-${question.id}`, className: "w-full", children: _jsx(QuestionRow, { question: question, rawAnswer: rawAnswer, displayValue: displayValue, isDisabled: isDisabled, isExampleQ: false, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, correctAnswer: correctAnswerTextMap[question.id], answerStatus: isReviewMode ? getAnswerStatus(question.id) : undefined, options: options }) }, question.id));
+                }) })] }));
+}

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

@@ -1 +1,76 @@
-"use client";import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{useState as o}from"react";import{ZoomIn as i,Check as n,X as s}from"lucide-react";import{ResolvedImage as l}from"../../../../../components/common/ResolvedImage";import d from"../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import a from"../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner";function c({imageUrl:n,alt:s}){const[d,a]=o(!1);return r(t,{children:[r("div",{className:"relative flex items-center justify-center",children:[e(l,{src:n,alt:s,className:"max-h-[180px] 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(i,{className:"h-4 w-4 text-gray-600"})})]}),d&&e("div",{className:"fixed inset-0 z-50 flex items-center justify-center bg-black/70",onClick:()=>a(!1),children:e(l,{src:n,alt:`${s} (zoomed)`,className:"max-h-[90vh] max-w-[90vw] rounded-lg object-contain",showLoadingState:!1})})]})}function m({subQuestion:t,selectedOptionId:o,onSelect:i,isReviewMode:l,id:d}){const a=l&&o===t.correctOptionId,m=e=>{if(!l)return o===e?"border-blue-500 bg-[#f4f9ff]":"border-blue-200 bg-white hover:border-blue-300 hover:bg-blue-50/30";const r=o===e,i=t.correctOptionId===e;return i?a?"border-green-500 bg-green-50":"border-blue-500 bg-blue-50":r&&!i?"border-red-500 bg-red-50":"border-blue-200 bg-white"},u=e=>{if(!l)return o===e?"border-blue-500 bg-blue-500":"border-gray-300 bg-white";const r=o===e,i=t.correctOptionId===e;return i?a?"border-green-500 bg-green-500":"border-blue-500 bg-blue-500":r&&!i?"border-red-500 bg-red-500":"border-gray-300 bg-white"},b=r=>{if(!l)return null;const i=o===r,d=t.correctOptionId===r;return d?e(n,{className:"h-4 w-4 text-white"}):i&&!d?e(s,{className:"h-4 w-4 text-white"}):null};return r("div",{id:d,className:"rounded-lg border border-gray-200 bg-white p-4 shadow-sm",children:[r("div",{className:"mb-3 flex items-start gap-3",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}),e(c,{imageUrl:t.imageUrl,alt:`Question ${t.questionNumber}`})]}),t.questionText&&e("p",{className:"mb-3 text-[17px] font-bold text-[#001590]",children:t.questionText}),e("div",{className:"flex flex-col gap-2",children:t.options.map(t=>r("button",{type:"button",onClick:()=>!l&&i(t.id),disabled:l,className:`flex items-center gap-3 rounded-lg border-2 px-3 py-2 text-left transition-colors ${m(t.id)} ${l?"cursor-default":"cursor-pointer"}`,children:[r("span",{className:"text-sm font-medium text-gray-600",children:[t.label,"."]}),e("span",{className:"flex-1 text-sm text-gray-700",children:t.text}),e("div",{className:`flex h-5 w-5 items-center justify-center rounded-full border-2 ${u(t.id)}`,children:l?b(t.id):o===t.id&&e("div",{className:"h-2 w-2 rounded-full bg-white"})})]},t.id))})]})}export function MoversPictureChooseRenderer({partNumber:t,partName:o,questionCount:i,instruction:n,subQuestions:s,answers:l,onAnswerChange:c,isReviewMode:u=!1}){return r("div",{className:"flex h-full flex-col gap-4 overflow-y-auto p-6",children:[r("div",{className:"flex flex-col gap-4",children:[e(d,{partNumber:t,questionCount:i,partName:o,isReviewMode:u}),e(a,{instruction:n,isReviewMode:u})]}),e("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2",children:s.map(r=>e(m,{id:`question-${r.id}`,subQuestion:r,selectedOptionId:l[r.id],onSelect:e=>c(r.id,e),isReviewMode:u},r.id))})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ZoomIn, Check, 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';
+// Image with zoom functionality
+function QuestionImage({ imageUrl, alt }) {
+    const [isZoomed, setIsZoomed] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative flex items-center justify-center", children: [_jsx(ResolvedImage, { src: imageUrl, alt: alt, className: "max-h-[180px] 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: `${alt} (zoomed)`, className: "max-h-[90vh] max-w-[90vw] rounded-lg object-contain", showLoadingState: false }) }))] }));
+}
+// Single Sub-Question Component
+function SubQuestionItem({ subQuestion, selectedOptionId, onSelect, isReviewMode, id, }) {
+    // Review mode states
+    const isUserCorrect = isReviewMode && selectedOptionId === subQuestion.correctOptionId;
+    const getOptionStyle = (optionId) => {
+        if (!isReviewMode) {
+            return selectedOptionId === optionId
+                ? 'border-blue-500 bg-[#f4f9ff]'
+                : 'border-blue-200 bg-white hover:border-blue-300 hover:bg-blue-50/30';
+        }
+        // Review mode
+        const isSelected = selectedOptionId === optionId;
+        const isCorrect = subQuestion.correctOptionId === optionId;
+        if (isCorrect) {
+            // ✅ Green if user answered correctly
+            // ⚪ Blue if user didn't answer or was wrong (show correct answer)
+            return isUserCorrect
+                ? 'border-green-500 bg-green-50'
+                : 'border-blue-500 bg-blue-50';
+        }
+        if (isSelected && !isCorrect) {
+            // ❌ Red for wrong answer
+            return 'border-red-500 bg-red-50';
+        }
+        return 'border-blue-200 bg-white';
+    };
+    const getRadioStyle = (optionId) => {
+        if (!isReviewMode) {
+            return selectedOptionId === optionId
+                ? 'border-blue-500 bg-blue-500'
+                : 'border-gray-300 bg-white';
+        }
+        // Review mode
+        const isSelected = selectedOptionId === optionId;
+        const isCorrect = subQuestion.correctOptionId === optionId;
+        if (isCorrect) {
+            return isUserCorrect
+                ? 'border-green-500 bg-green-500'
+                : 'border-blue-500 bg-blue-500';
+        }
+        if (isSelected && !isCorrect) {
+            return 'border-red-500 bg-red-500';
+        }
+        return 'border-gray-300 bg-white';
+    };
+    // Get icon for review mode
+    const getReviewIcon = (optionId) => {
+        if (!isReviewMode)
+            return null;
+        const isSelected = selectedOptionId === optionId;
+        const isCorrect = subQuestion.correctOptionId === optionId;
+        if (isCorrect) {
+            return _jsx(Check, { className: "h-4 w-4 text-white" });
+        }
+        if (isSelected && !isCorrect) {
+            return _jsx(X, { className: "h-4 w-4 text-white" });
+        }
+        return null;
+    };
+    return (_jsxs("div", { id: id, className: "rounded-lg border border-gray-200 bg-white p-4 shadow-sm", children: [_jsxs("div", { className: "mb-3 flex items-start gap-3", 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: subQuestion.questionNumber }), _jsx(QuestionImage, { imageUrl: subQuestion.imageUrl, alt: `Question ${subQuestion.questionNumber}` })] }), subQuestion.questionText && (_jsx("p", { className: "mb-3 text-[17px] font-bold text-[#001590]", children: subQuestion.questionText })), _jsx("div", { className: "flex flex-col gap-2", children: subQuestion.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: option.text }), _jsx("div", { className: `flex h-5 w-5 items-center justify-center rounded-full border-2 ${getRadioStyle(option.id)}`, children: isReviewMode ? (getReviewIcon(option.id)) : (selectedOptionId === option.id && (_jsx("div", { className: "h-2 w-2 rounded-full bg-white" }))) })] }, option.id))) })] }));
+}
+export function MoversPictureChooseRenderer({ partNumber, partName, questionCount, instruction, subQuestions, answers, onAnswerChange, isReviewMode = false, }) {
+    return (_jsxs("div", { className: "flex h-full flex-col gap-4 overflow-y-auto p-6", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode })] }), _jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: subQuestions.map((subQuestion) => (_jsx(SubQuestionItem, { id: `question-${subQuestion.id}`, subQuestion: subQuestion, selectedOptionId: answers[subQuestion.id], onSelect: (optionId) => onAnswerChange(subQuestion.id, optionId), isReviewMode: isReviewMode }, subQuestion.id))) })] }));
+}

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

@@ -1 +1,68 @@
-"use client";import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{useState as o}from"react";import{ZoomIn as i}from"lucide-react";import{ResolvedImage as n}from"../../../../../components/common/ResolvedImage";import s from"../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import d from"../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner";function l({imageUrl:s,alt:d}){const[l,a]=o(!1);return r(t,{children:[r("div",{className:"relative flex items-center justify-center",children:[e(n,{src:s,alt:d,className:"max-h-[150px] cursor-pointer rounded-lg object-contain shadow-md",onClick:()=>a(!0)}),e("button",{type:"button",onClick:()=>a(!0),className:"absolute right-1 top-1 rounded-full bg-white/80 p-1 shadow-md hover:bg-white","aria-label":"Zoom image",children:e(i,{className:"h-3 w-3 text-gray-600"})})]}),l&&e("div",{className:"fixed inset-0 z-50 flex items-center justify-center bg-black/70",onClick:()=>a(!1),children:e(n,{src:s,alt:`${d} (zoomed)`,className:"max-h-[90vh] max-w-[90vw] rounded-lg object-contain",showLoadingState:!1})})]})}function a({question:t,selectedAnswer:o,isReviewMode:i,isCorrect:n}){const s=t.split("{0}");return r("p",{className:"text-sm font-medium text-gray-700",children:[s[0],e("span",{className:"mx-1 inline-block min-w-[60px] border-b-2 border-dashed px-2 text-center font-semibold "+(i&&o?n?"border-green-500 text-green-600":"border-red-500 text-red-600":"border-blue-400 text-blue-600"),children:o||"______"}),s[1]]})}function c({subQuestion:t,selectedOptionId:o,onSelect:i,isReviewMode:n,id:s}){const d=t.options.find(e=>e.id===o),c=n&&o===t.correctOptionId,m=e=>{if(!n)return o===e?"border-blue-500 bg-blue-50":"border-gray-300 bg-white hover:border-blue-300";const r=o===e,i=t.correctOptionId===e;return i?c?"border-green-500 bg-green-50":"border-blue-500 bg-blue-50":r&&!i?"border-red-500 bg-red-50":"border-gray-300 bg-white"},u=e=>{if(!n)return"text-gray-700";const r=o===e;return t.correctOptionId===e||r?"text-gray-800 font-bold":"text-gray-600"};return r("div",{id:s,className:"rounded-lg border border-gray-200 bg-white p-4 shadow-sm",children:[r("div",{className:"mb-3 flex items-start gap-3",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}),e(l,{imageUrl:t.imageUrl,alt:`Question ${t.questionNumber}`})]}),e("div",{className:"mb-3",children:e(a,{question:t.question,selectedAnswer:d?.text,isReviewMode:n,isCorrect:o===t.correctOptionId})}),e("div",{className:"flex flex-wrap gap-2",children:t.options.map(e=>r("button",{type:"button",onClick:()=>!n&&i(e.id),disabled:n,className:`rounded-lg border-2 px-3 py-1.5 text-sm transition-colors ${m(e.id)} ${u(e.id)} ${n?"cursor-default":"cursor-pointer"}`,children:[e.label,". ",e.text]},e.id))})]})}export function MoversPictureFillBlankChooseRenderer({partNumber:t,partName:o,questionCount:i,instruction:n,subQuestions:l,answers:a,onAnswerChange:m,isReviewMode:u=!1}){return r("div",{className:"flex h-full flex-col gap-4 overflow-y-auto p-6",children:[r("div",{className:"flex flex-col gap-4",children:[e(s,{partNumber:t,questionCount:i,partName:o,isReviewMode:u}),e(d,{instruction:n,isReviewMode:u})]}),e("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2",children:l.map(r=>e(c,{id:`question-${r.id}`,subQuestion:r,selectedOptionId:a[r.id],onSelect:e=>m(r.id,e),isReviewMode:u},r.id))})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ZoomIn } 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';
+// Image with zoom functionality
+function QuestionImage({ imageUrl, alt }) {
+    const [isZoomed, setIsZoomed] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative flex items-center justify-center", children: [_jsx(ResolvedImage, { src: imageUrl, alt: alt, className: "max-h-[150px] cursor-pointer rounded-lg object-contain shadow-md", onClick: () => setIsZoomed(true) }), _jsx("button", { type: "button", onClick: () => setIsZoomed(true), className: "absolute right-1 top-1 rounded-full bg-white/80 p-1 shadow-md hover:bg-white", "aria-label": "Zoom image", children: _jsx(ZoomIn, { className: "h-3 w-3 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: `${alt} (zoomed)`, className: "max-h-[90vh] max-w-[90vw] rounded-lg object-contain", showLoadingState: false }) }))] }));
+}
+// Render question text with blank highlight
+function QuestionWithBlank({ question, selectedAnswer, isReviewMode, isCorrect, }) {
+    // Split by {0} placeholder
+    const parts = question.split('{0}');
+    const getBlankStyle = () => {
+        if (!isReviewMode || !selectedAnswer) {
+            return 'border-blue-400 text-blue-600';
+        }
+        return isCorrect
+            ? 'border-green-500 text-green-600'
+            : 'border-red-500 text-red-600';
+    };
+    return (_jsxs("p", { className: "text-sm font-medium text-gray-700", children: [parts[0], _jsx("span", { className: `mx-1 inline-block min-w-[60px] border-b-2 border-dashed px-2 text-center font-semibold ${getBlankStyle()}`, children: selectedAnswer || '______' }), parts[1]] }));
+}
+// Single Sub-Question Component
+function SubQuestionItem({ subQuestion, selectedOptionId, onSelect, isReviewMode, id, }) {
+    const selectedOption = subQuestion.options.find((o) => o.id === selectedOptionId);
+    // Review mode states
+    const isUserCorrect = isReviewMode && selectedOptionId === subQuestion.correctOptionId;
+    const getOptionStyle = (optionId) => {
+        if (!isReviewMode) {
+            return selectedOptionId === optionId
+                ? 'border-blue-500 bg-blue-50'
+                : 'border-gray-300 bg-white hover:border-blue-300';
+        }
+        // Review mode
+        const isSelected = selectedOptionId === optionId;
+        const isCorrect = subQuestion.correctOptionId === optionId;
+        if (isCorrect) {
+            // ✅ Green if user answered correctly
+            // ⚪ Blue if user didn't answer or was wrong (show correct answer)
+            return isUserCorrect
+                ? 'border-green-500 bg-green-50'
+                : 'border-blue-500 bg-blue-50';
+        }
+        if (isSelected && !isCorrect) {
+            // ❌ Red for wrong answer
+            return 'border-red-500 bg-red-50';
+        }
+        return 'border-gray-300 bg-white';
+    };
+    const getTextStyle = (optionId) => {
+        if (!isReviewMode)
+            return 'text-gray-700';
+        const isSelected = selectedOptionId === optionId;
+        const isCorrect = subQuestion.correctOptionId === optionId;
+        if (isCorrect || isSelected) {
+            return 'text-gray-800 font-bold';
+        }
+        return 'text-gray-600';
+    };
+    return (_jsxs("div", { id: id, className: "rounded-lg border border-gray-200 bg-white p-4 shadow-sm", children: [_jsxs("div", { className: "mb-3 flex items-start gap-3", 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: subQuestion.questionNumber }), _jsx(QuestionImage, { imageUrl: subQuestion.imageUrl, alt: `Question ${subQuestion.questionNumber}` })] }), _jsx("div", { className: "mb-3", children: _jsx(QuestionWithBlank, { question: subQuestion.question, selectedAnswer: selectedOption?.text, isReviewMode: isReviewMode, isCorrect: selectedOptionId === subQuestion.correctOptionId }) }), _jsx("div", { className: "flex flex-wrap gap-2", children: subQuestion.options.map((option) => (_jsxs("button", { type: "button", onClick: () => !isReviewMode && onSelect(option.id), disabled: isReviewMode, className: `rounded-lg border-2 px-3 py-1.5 text-sm transition-colors ${getOptionStyle(option.id)} ${getTextStyle(option.id)} ${isReviewMode ? 'cursor-default' : 'cursor-pointer'}`, children: [option.label, ". ", option.text] }, option.id))) })] }));
+}
+export function MoversPictureFillBlankChooseRenderer({ partNumber, partName, questionCount, instruction, subQuestions, answers, onAnswerChange, isReviewMode = false, }) {
+    return (_jsxs("div", { className: "flex h-full flex-col gap-4 overflow-y-auto p-6", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode })] }), _jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: subQuestions.map((subQuestion) => (_jsx(SubQuestionItem, { id: `question-${subQuestion.id}`, subQuestion: subQuestion, selectedOptionId: answers[subQuestion.id], onSelect: (optionId) => onAnswerChange(subQuestion.id, optionId), isReviewMode: isReviewMode }, subQuestion.id))) })] }));
+}

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

@@ -1 +1,62 @@
-"use client";import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{useState as s}from"react";import{Check as a,X as i,ZoomIn as l}from"lucide-react";import{ResolvedImage as o}from"../../../../../components/common/ResolvedImage";import n from"../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import d from"../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner";function c({imageUrl:a}){const[i,n]=s(!1);return r(t,{children:[r("div",{className:"relative flex items-center justify-center",children:[e(o,{src:a,alt:"Passage illustration",className:"max-h-[200px] cursor-pointer rounded-lg object-contain shadow-md",onClick:()=>n(!0)}),e("button",{type:"button",onClick:()=>n(!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(l,{className:"h-4 w-4 text-gray-600"})})]}),i&&e("div",{className:"fixed inset-0 z-50 flex items-center justify-center bg-black/70",onClick:()=>n(!1),children:e(o,{src:a,alt:"Passage illustration (zoomed)",className:"max-h-[90vh] max-w-[90vw] rounded-lg object-contain",showLoadingState:!1})})]})}function m({title:t,passage:s,imageUrl:a}){return r("div",{className:"rounded-lg border-2 border-amber-200 bg-amber-50 p-4",children:[t&&e("h3",{className:"mb-3 text-center text-lg font-bold text-amber-800",children:t}),a&&e("div",{className:"mb-3",children:e(c,{imageUrl:a})}),e("div",{className:"prose prose-sm max-w-none text-gray-700",children:s.split("\n").map((r,t)=>e("p",{className:"mb-2 last:mb-0",children:r},t))})]})}function u({question:t,selectedOptionId:s,onSelect:l,isReviewMode:o,correctOptionId:n,id:d}){const c=n||t.correctOptionId,m=!!s,u=s===c,b=e=>{if(!o)return s===e?"border-blue-500 bg-blue-50":"border-gray-300 bg-white hover:border-blue-300";const r=s===e;return r&&u?"border-green-500 bg-green-50":r&&!u?"border-red-500 bg-red-50":!(c===e)||u&&m?"border-gray-300 bg-white":"border-blue-500 bg-blue-50"};return r("div",{id:d,className:"mb-4",children:[r("p",{className:"mb-2 text-base font-semibold text-gray-800",children:[t.questionNumber,". ",t.questionText]}),e("div",{className:"flex flex-col gap-2 pl-2",children:t.options.map(t=>{const n=s===t.id,d=c===t.id,p=o&&n&&u,g=o&&n&&!u,h=o&&d&&(!u||!m);return r("button",{type:"button",onClick:()=>!o&&l(t.id),disabled:o,className:`flex items-center gap-3 rounded-lg border-2 px-3 py-2 text-left transition-colors ${b(t.id)} ${o?"cursor-default":"cursor-pointer"}`,children:[r("span",{className:"text-sm font-medium text-gray-600",children:[t.label,"."]}),e("span",{className:"flex-1 text-sm text-gray-700",children:t.text}),p&&e("div",{className:"flex h-6 w-6 items-center justify-center rounded-full bg-green-500",children:e(a,{className:"h-4 w-4 text-white",strokeWidth:3})}),g&&e("div",{className:"flex h-6 w-6 items-center justify-center rounded-full bg-red-500",children:e(i,{className:"h-4 w-4 text-white",strokeWidth:3})}),h&&e("div",{className:"flex h-6 w-6 items-center justify-center rounded-full bg-blue-500",children:e(a,{className:"h-4 w-4 text-white",strokeWidth:3})}),!o&&e("div",{className:"flex h-5 w-5 items-center justify-center rounded-full border-2 "+(n?"border-blue-500 bg-blue-500":"border-gray-300 bg-white"),children:n&&e("div",{className:"h-2 w-2 rounded-full bg-white"})}),o&&!p&&!g&&!h&&e("div",{className:"flex h-5 w-5 items-center justify-center rounded-full border-2 border-gray-300 bg-white"})]},t.id)})})]})}export function MoversReadingPassageRenderer({partNumber:t,partName:s,questionCount:a,instruction:i,passageTitle:l,passage:o,passageImageUrl:c,questions:b,answers:p,onAnswerChange:g,isReviewMode:h=!1,correctOptionIdMap:f}){return r("div",{className:"flex flex-col h-full gap-4 sm:gap-6 overflow-y-auto custom-scrollbar relative",children:[r("div",{className:"flex flex-col gap-4 p-3 sm:px-6 sm:pt-4",children:[e(n,{partNumber:t,questionCount:a,partName:s,isReviewMode:h}),e(d,{instruction:i,isReviewMode:h})]}),e("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:e("div",{className:"max-h-[35vh] overflow-y-auto custom-scrollbar pr-2",children:e(m,{title:l,passage:o,imageUrl:c})})}),e("div",{className:"flex flex-col gap-4 p-3 sm:pb-6 sm:px-6",children:b.map(r=>e(u,{id:`question-${r.id}`,question:r,selectedOptionId:p[r.id],onSelect:e=>g(r.id,e),isReviewMode:h,correctOptionId:f?.[r.id]},r.id))})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Check, X, ZoomIn } 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';
+// Passage Image with zoom
+function PassageImage({ 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: "Passage illustration", className: "max-h-[200px] 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: "Passage illustration (zoomed)", className: "max-h-[90vh] max-w-[90vw] rounded-lg object-contain", showLoadingState: false }) }))] }));
+}
+// Passage Section Component
+function PassageSection({ title, passage, imageUrl, }) {
+    return (_jsxs("div", { className: "rounded-lg border-2 border-amber-200 bg-amber-50 p-4", children: [title && (_jsx("h3", { className: "mb-3 text-center text-lg font-bold text-amber-800", children: title })), imageUrl && (_jsx("div", { className: "mb-3", children: _jsx(PassageImage, { imageUrl: imageUrl }) })), _jsx("div", { className: "prose prose-sm max-w-none text-gray-700", children: passage.split('\n').map((paragraph, index) => (_jsx("p", { className: "mb-2 last:mb-0", children: paragraph }, index))) })] }));
+}
+// Single Question Component
+function QuestionItem({ question, selectedOptionId, onSelect, isReviewMode, correctOptionId, id, }) {
+    // Use passed correctOptionId (from map) or fallback to question.correctOptionId
+    const actualCorrectId = correctOptionId || question.correctOptionId;
+    const hasStudentAnswered = !!selectedOptionId;
+    // Determine if student's answer is correct for this sub-question
+    const isStudentCorrect = selectedOptionId === actualCorrectId;
+    const getOptionStyle = (optionId) => {
+        if (!isReviewMode) {
+            return selectedOptionId === optionId
+                ? 'border-blue-500 bg-blue-50'
+                : 'border-gray-300 bg-white hover:border-blue-300';
+        }
+        // Review mode
+        const isSelected = selectedOptionId === optionId;
+        const isCorrectOption = actualCorrectId === optionId;
+        // Student answered correctly
+        if (isSelected && isStudentCorrect) {
+            return 'border-green-500 bg-green-50';
+        }
+        // Student answered wrong - highlight their wrong selection
+        if (isSelected && !isStudentCorrect) {
+            return 'border-red-500 bg-red-50';
+        }
+        // Show correct answer (blue border) when student was wrong or didn't answer
+        if (isCorrectOption && (!isStudentCorrect || !hasStudentAnswered)) {
+            return 'border-blue-500 bg-blue-50';
+        }
+        return 'border-gray-300 bg-white';
+    };
+    return (_jsxs("div", { id: id, className: "mb-4", children: [_jsxs("p", { className: "mb-2 text-base font-semibold text-gray-800", children: [question.questionNumber, ". ", question.questionText] }), _jsx("div", { className: "flex flex-col gap-2 pl-2", children: question.options.map((option) => {
+                    const isSelected = selectedOptionId === option.id;
+                    const isCorrectOption = actualCorrectId === option.id;
+                    // Determine which icon to show (review mode only)
+                    // Green tick: Student selected correct
+                    const showGreenTick = isReviewMode && isSelected && isStudentCorrect;
+                    // Red X: Student selected wrong
+                    const showRedX = isReviewMode && isSelected && !isStudentCorrect;
+                    // Blue tick: This is correct answer but student was wrong or didn't answer
+                    const showBlueTick = isReviewMode && isCorrectOption && (!isStudentCorrect || !hasStudentAnswered);
+                    return (_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: option.text }), showGreenTick && (_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-green-500", children: _jsx(Check, { className: "h-4 w-4 text-white", strokeWidth: 3 }) })), showRedX && (_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-red-500", children: _jsx(X, { className: "h-4 w-4 text-white", strokeWidth: 3 }) })), showBlueTick && (_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-blue-500", children: _jsx(Check, { className: "h-4 w-4 text-white", strokeWidth: 3 }) })), !isReviewMode && (_jsx("div", { className: `flex h-5 w-5 items-center justify-center rounded-full border-2 ${isSelected ? 'border-blue-500 bg-blue-500' : 'border-gray-300 bg-white'}`, children: isSelected && _jsx("div", { className: "h-2 w-2 rounded-full bg-white" }) })), isReviewMode && !showGreenTick && !showRedX && !showBlueTick && (_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full border-2 border-gray-300 bg-white" }))] }, option.id));
+                }) })] }));
+}
+export function MoversReadingPassageRenderer({ partNumber, partName, questionCount, instruction, passageTitle, passage, passageImageUrl, questions, answers, onAnswerChange, isReviewMode = false, correctOptionIdMap, }) {
+    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-4 p-3 sm:px-6 sm:pt-4", 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 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: _jsx("div", { className: "max-h-[35vh] overflow-y-auto custom-scrollbar pr-2", children: _jsx(PassageSection, { title: passageTitle, passage: passage, imageUrl: passageImageUrl }) }) }), _jsx("div", { className: "flex flex-col gap-4 p-3 sm:pb-6 sm:px-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, correctOptionId: correctOptionIdMap?.[question.id] }, question.id))) })] }));
+}

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

@@ -1,6 +1,6 @@
 /**
  * TRUE_FALSE Renderer - Display questions with True/False buttons
- * Used in Starters P5
+ * - Full-width 1-line-per-question layout
  */
 import type { TrueFalseQuestion } from '../../utils/question-transformers';
 interface MoversTrueFalseRendererProps {

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

@@ -1 +1,51 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{ResolvedImage as a}from"../../../../../components/common/ResolvedImage";import t from"../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import s from"../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner";function o({question:t,answer:s,onAnswerChange:o,isReviewMode:l,correctAnswerTextMap:i,id:n}){const d=l||t.isExample,m=i[t.id],c="true"===m||"false"!==m&&void 0,g=t.isExample?t.exampleCorrectAnswer:s,p=l&&void 0!==c,x=p&&g===c,b=p&&void 0!==g&&g!==c;return r("div",{id:n,className:"flex items-start gap-3 rounded-xl p-3 "+(t.isExample?"border border-amber-300 bg-gradient-to-br from-amber-50 via-orange-50 to-white shadow-amber-100/70":""),children:[e("span",{className:"flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full text-sm font-bold text-white "+(t.isExample?"bg-gradient-to-br from-amber-400 to-orange-500":x?"bg-emerald-500":b?"bg-rose-500":"bg-blue-500"),children:t.questionNumber}),r("div",{className:"flex flex-1 flex-col gap-2",children:[e("div",{className:"flex items-center gap-2",children:t.isExample&&e("span",{className:"rounded-full border border-amber-300 bg-gradient-to-r from-amber-100 to-orange-100 px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-widest text-amber-700 shadow-sm",children:"Example"})}),t.imageUrl&&e(a,{src:t.imageUrl,alt:`Q${t.questionNumber}`,className:"max-h-[120px] rounded-lg object-contain"}),e("p",{className:"text-base text-gray-800",children:t.question}),r("div",{className:"flex gap-3",children:[e("button",{type:"button",disabled:d,onClick:()=>o(t.id,!0),className:`rounded-lg border-2 px-5 py-2 text-sm font-semibold transition-colors ${!0===g?l&&b&&!t.isExample?"border-rose-500 bg-rose-50 text-rose-700":"border-emerald-500 bg-emerald-50 text-emerald-700":p&&!0===c&&!t.isExample?"border-emerald-500 bg-emerald-50 text-emerald-700 ring-2 ring-emerald-300":"border-gray-300 bg-white text-gray-600 hover:border-emerald-400"} ${d?"cursor-not-allowed opacity-60":""}`,children:"✓ True"}),e("button",{type:"button",disabled:d,onClick:()=>o(t.id,!1),className:`rounded-lg border-2 px-5 py-2 text-sm font-semibold transition-colors ${!1===g?l&&b&&!t.isExample?"border-rose-500 bg-rose-50 text-rose-700":"border-emerald-500 bg-emerald-50 text-emerald-700":p&&!1===c&&!t.isExample?"border-emerald-500 bg-emerald-50 text-emerald-700 ring-2 ring-emerald-300":"border-gray-300 bg-white text-gray-600 hover:border-rose-400"} ${d?"cursor-not-allowed opacity-60":""}`,children:"✗ False"})]}),b&&p&&!t.isExample&&r("p",{className:"text-sm font-medium text-emerald-600",children:["Đáp án đúng: ",c?"True":"False"]})]})]})}export function MoversTrueFalseRenderer({partNumber:l,partName:i,questionCount:n,instruction:d,imageUrl:m,questions:c,answers:g,onAnswerChange:p,isReviewMode:x=!1,correctAnswerTextMap:b={},groupContent:u}){const h=c.filter(e=>e.isExample),f=c.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(t,{partNumber:l,questionCount:n,partName:i,isReviewMode:x}),e(s,{instruction:d,isReviewMode:x}),m&&e("div",{className:"flex items-center justify-center",children:e(a,{src:m,alt:"Question illustration",className:"max-h-[300px] rounded-lg object-contain shadow-md"})}),u&&e("div",{className:"rounded-lg bg-amber-50 p-4 text-base leading-relaxed text-gray-800",dangerouslySetInnerHTML:{__html:u}}),h.length>0&&e("div",{className:"flex flex-col gap-4 mt-2",children:h.map(r=>e(o,{id:`question-${r.id}`,question:r,answer:g[r.id],onAnswerChange:p,isReviewMode:x,correctAnswerTextMap:b},r.id))})]}),h.length>0&&f.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:f.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(o,{question:r,answer:g[r.id],onAnswerChange:p,isReviewMode:x,correctAnswerTextMap:b})},r.id))})]})}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * TRUE_FALSE Renderer - Display questions with True/False buttons
+ * - Full-width 1-line-per-question layout
+ */
+import { ResolvedImage } from '../../../../../components/common/ResolvedImage';
+import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+// Single Question Component (1 Line / Full Width Row)
+function QuestionItem({ question, answer, onAnswerChange, isReviewMode, correctAnswerTextMap, id, }) {
+    const isDisabled = isReviewMode || question.isExample;
+    const correctAnswerText = correctAnswerTextMap[question.id];
+    const correctAnswer = correctAnswerText === 'true' ? true : correctAnswerText === 'false' ? false : undefined;
+    const currentAnswer = question.isExample ? question.exampleCorrectAnswer : answer;
+    const hasCorrectAnswer = isReviewMode && correctAnswer !== undefined;
+    const isCorrect = hasCorrectAnswer && currentAnswer === correctAnswer;
+    const isWrong = hasCorrectAnswer && currentAnswer !== undefined && currentAnswer !== correctAnswer;
+    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 !== undefined
+                        ? '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" })), question.imageUrl && (_jsx(ResolvedImage, { src: question.imageUrl, alt: `Q${question.questionNumber}`, className: "max-h-[80px] max-w-[120px] rounded-lg object-contain shadow-sm" })), _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: () => onAnswerChange(question.id, 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 === 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 && correctAnswer === 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: () => onAnswerChange(question.id, 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 === 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 && correctAnswer === 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" })] })] }), isWrong && hasCorrectAnswer && !question.isExample && (_jsxs("div", { className: "mt-2.5 border-t border-slate-100 pt-2 flex items-center gap-2 text-xs font-semibold text-rose-600", children: [_jsxs("span", { children: ["H\u1ECDc sinh: ", currentAnswer ? 'True' : 'False'] }), _jsx("span", { children: "\u2022" }), _jsxs("span", { className: "text-emerald-700", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", correctAnswer ? 'True' : 'False'] })] }))] }));
+}
+export function MoversTrueFalseRenderer({ partNumber, partName, questionCount, instruction, imageUrl, questions, answers, onAnswerChange, isReviewMode = false, correctAnswerTextMap = {}, groupContent, }) {
+    // Separate example questions from regular questions
+    const exampleQuestions = questions.filter((q) => q.isExample);
+    const regularQuestions = questions.filter((q) => !q.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 }), imageUrl && (_jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(ResolvedImage, { src: imageUrl, alt: "Question illustration", className: "max-h-[300px] rounded-xl object-contain shadow-md" }) })), groupContent && (_jsx("div", { className: "rounded-xl border border-amber-200 bg-amber-50/60 p-4 text-[15.5px] leading-relaxed text-slate-800 shadow-sm", dangerouslySetInnerHTML: { __html: groupContent } })), 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, 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-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, correctAnswerTextMap: correctAnswerTextMap }, question.id))) })] }));
+}