@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.30

package/dist/components/results/index.js

@@ -1 +1,22 @@
-export{PartRubricTemplateCode,ResultReviewPageContainer}from"./ResultReviewPageContainer";export{transformDetailedResultForReview,transformResultAnswersForReview}from"./review-data";export{ReviewQuestionRenderer}from"./ReviewQuestionRenderer";export{useResultReviewPolling}from"./hooks/useResultReviewPolling";export{isResultNotPublic,setPdfReady}from"./review-status.utils";export{ResultTemplateType,ReviewGradingStatus}from"../../api/result-review";export{transformSpeakingResultForReview,isSpeakingTemplateType,SPEAKING_ANSWER_COMPLETED,SPEAKING_STORY_IMAGES_TYPE}from"./utils/transform-speaking-review";export{buildSkillMetrics,deriveFeedback,deriveQuestionSkillMetrics,deriveSkillMetrics,deriveSkillScores,deriveSummaryPoints,getOverallStatusText,getScoreLabel,SPEAKING_SKILL_COLORS}from"./utils/speaking-summary";export{SpeakingResultAudioPlayer}from"./speaking/SpeakingResultAudioPlayer";export{SpeakingReviewResult,SPEAKING_REVIEW_POLL_INTERVAL_MS}from"./speaking/SpeakingReviewResult";export{OceanEduSpeakingReport}from"./report/OceanEduSpeakingReport";export{OceanEduExamReport}from"./report/OceanEduExamReport";export{OverallAssessmentSection}from"./report/OverallAssessmentSection";export{ResultNotPublicState}from"./report/ResultNotPublicState";export{ResultLoadingState}from"./report/ResultLoadingState";export{ResultErrorState}from"./report/ResultErrorState";export{SpeakingRubricSection}from"./report/SpeakingRubricSection";export{SpeakingRubricScoringVersion,KidsRubricSectionCode}from"./report/SpeakingRubricSection";export{BadgeTitle}from"./report/BadgeTitle";export{ReviewScoreBand,formatScore,formatTotalScore,getScoreLabel as getExamScoreLabel,getScoreMessage as getExamScoreMessage,getScoreStroke as getExamScoreStroke}from"./utils/review-score.utils";
+export { PartRubricTemplateCode, ResultReviewPageContainer, } from './ResultReviewPageContainer';
+export { transformDetailedResultForReview, transformResultAnswersForReview, } from './review-data';
+export { ReviewQuestionRenderer } from './ReviewQuestionRenderer';
+export { useResultReviewPolling } from './hooks/useResultReviewPolling';
+export { isResultNotPublic, setPdfReady } from './review-status.utils';
+export { ResultTemplateType, ReviewGradingStatus } from '../../api/result-review';
+export { transformSpeakingResultForReview, isSpeakingTemplateType, SPEAKING_ANSWER_COMPLETED, SPEAKING_STORY_IMAGES_TYPE, } from './utils/transform-speaking-review';
+export { buildSkillMetrics, deriveFeedback, deriveQuestionSkillMetrics, deriveSkillMetrics, deriveSkillScores, deriveSummaryPoints, getOverallStatusText, getScoreLabel, SPEAKING_SKILL_COLORS, } from './utils/speaking-summary';
+export { SpeakingResultAudioPlayer } from './speaking/SpeakingResultAudioPlayer';
+export { SpeakingReviewResult, SPEAKING_REVIEW_POLL_INTERVAL_MS, } from './speaking/SpeakingReviewResult';
+export { OceanEduSpeakingReport } from './report/OceanEduSpeakingReport';
+export { OceanEduExamReport } from './report/OceanEduExamReport';
+export { OverallAssessmentSection } from './report/OverallAssessmentSection';
+export { ResultNotPublicState } from './report/ResultNotPublicState';
+export { ResultLoadingState } from './report/ResultLoadingState';
+export { ResultErrorState } from './report/ResultErrorState';
+export { SpeakingRubricSection } from './report/SpeakingRubricSection';
+export { SpeakingRubricScoringVersion, KidsRubricSectionCode, } from './report/SpeakingRubricSection';
+export { BadgeTitle } from './report/BadgeTitle';
+export { ReviewScoreBand, formatScore, formatTotalScore, 
+/** General exam score label (distinct from speaking {@link getScoreLabel}). */
+getScoreLabel as getExamScoreLabel, getScoreMessage as getExamScoreMessage, getScoreStroke as getExamScoreStroke, } from './utils/review-score.utils';

package/dist/components/results/renderers/QuestionExplanations.js

@@ -1 +1,19 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Lightbulb as a}from"lucide-react";export function QuestionExplanations({items:n}){const s=n.filter(e=>"string"==typeof e.explanation&&e.explanation.trim().length>0);if(0===s.length)return null;const r=s.length>1;return t("div",{className:"mt-4 rounded-xl border border-amber-200 bg-amber-50/80 p-4 shadow-sm",children:[t("div",{className:"mb-2 flex items-center gap-1.5 text-sm font-bold text-amber-700",children:[e(a,{className:"h-4 w-4"}),"Giải thích"]}),e("div",{className:"space-y-3",children:s.map(a=>t("div",{className:"text-sm leading-relaxed text-amber-900",children:[r&&null!=a.questionNumber&&t("span",{className:"mr-1.5 font-bold",children:["Câu ",a.questionNumber,"."]}),e("span",{className:"whitespace-pre-wrap",children:a.explanation})]},a.id))})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Lightbulb } from 'lucide-react';
+/**
+ * QuestionExplanations - shared review block that renders the per-question
+ * explanation (questions.explanation) for every question that has one.
+ *
+ * Rendered centrally by ReviewQuestionRenderer after the type-specific
+ * renderer output, so ALL question types show explanations uniformly without
+ * each renderer having to implement it.
+ */
+export function QuestionExplanations({ items }) {
+    const withExplanation = items.filter((item) => typeof item.explanation === 'string' && item.explanation.trim().length > 0);
+    if (withExplanation.length === 0) {
+        return null;
+    }
+    const showNumbers = withExplanation.length > 1;
+    return (_jsxs("div", { className: "mt-4 rounded-xl border border-amber-200 bg-amber-50/80 p-4 shadow-sm", children: [_jsxs("div", { className: "mb-2 flex items-center gap-1.5 text-sm font-bold text-amber-700", children: [_jsx(Lightbulb, { className: "h-4 w-4" }), "Gi\u1EA3i th\u00EDch"] }), _jsx("div", { className: "space-y-3", children: withExplanation.map((item) => (_jsxs("div", { className: "text-sm leading-relaxed text-amber-900", children: [showNumbers && item.questionNumber != null && (_jsxs("span", { className: "mr-1.5 font-bold", children: ["C\u00E2u ", item.questionNumber, "."] })), _jsx("span", { className: "whitespace-pre-wrap", children: item.explanation })] }, item.id))) })] }));
+}

package/dist/components/results/renderers/ReviewChooseAdjectiveRenderer.js

@@ -1 +1,94 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Check as r,X as n}from"lucide-react";import i from"../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import s from"../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner";function l({question:i,selectedOptionId:s,isCorrect:l,correctOptionId:c}){const a=function(e,t){if(!t)return null;const r=e.options.find(e=>e.id===t);return r?.text||null}(i,s),o=function(e,t){if(!t)return null;const r=e.options.find(e=>e.id===t);return r?.text||null}(i,c),d=!!s,m=e=>{const t=s===e.id,r=c===e.id;return t&&!0===l?"border-green-500 bg-green-50 text-green-700":t&&!1===l?"border-red-500 bg-red-50 text-red-700":!r||!1!==l&&d?"border-gray-300 bg-white text-gray-500":"border-blue-500 bg-blue-50 text-blue-700"},u=d?!0===l?{borderColor:"#22c55e"}:{borderColor:"#ef4444"}:{borderColor:"#9ca3af"},p=d?!0===l?"correct":"incorrect":"unanswered";return t("div",{className:"mb-6",children:[t("div",{className:"mb-3 flex items-start 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:i.questionNumber}),e("div",{className:"flex-1 text-base leading-relaxed text-gray-800",children:t("div",{className:"flex flex-wrap items-end gap-1",children:[i.sentenceBefore&&e("span",{children:i.sentenceBefore}),t("span",{className:"inline-block min-w-[120px]",style:{borderBottom:`2px solid ${u.borderColor}`},children:["correct"===p&&e("span",{className:"block w-full text-center",children:a}),"unanswered"===p&&e("span",{className:"block w-full text-center text-gray-400",children:"_______"}),"incorrect"===p&&t("span",{className:"flex items-center justify-center gap-2",children:[e("span",{className:"text-red-500 line-through",children:a}),e("span",{className:"text-blue-600",children:o})]})]}),i.sentenceAfter&&e("span",{children:i.sentenceAfter}),t("span",{className:"ml-2 text-sm italic text-gray-500",children:["(",i.options.map(e=>e.text).join(" / "),")"]})]})})]}),e("div",{className:"flex flex-wrap gap-2 pl-9",children:i.options.map(i=>{const a=s===i.id,o=c===i.id,u=a&&!0===l,p=a&&!1===l,f=o&&(!1===l||!d);return t("div",{className:`flex items-center gap-2 rounded-lg border-2 px-4 py-2 text-sm font-medium ${m(i)}`,children:[t("span",{children:[i.label,". ",i.text]}),u&&e("div",{className:"flex h-5 w-5 items-center justify-center rounded-full bg-green-500",children:e(r,{className:"h-3 w-3 text-white",strokeWidth:3})}),p&&e("div",{className:"flex h-5 w-5 items-center justify-center rounded-full bg-red-500",children:e(n,{className:"h-3 w-3 text-white",strokeWidth:3})}),f&&e("div",{className:"flex h-5 w-5 items-center justify-center rounded-full bg-blue-500",children:e(r,{className:"h-3 w-3 text-white",strokeWidth:3})})]},i.id)})})]})}export function ReviewChooseAdjectiveRenderer({partNumber:r,questionCount:n,instruction:c,partName:a,questions:o,answers:d,isCorrectMap:m,correctOptionIdMap:u}){return t("div",{className:"flex flex-col gap-6 h-full",children:[t("div",{className:"flex flex-col gap-4 pb-0 pt-4",children:[e(i,{partNumber:r,questionCount:n,partName:a,isReviewMode:!0}),e(s,{instruction:c,isReviewMode:!0})]}),e("div",{className:"flex flex-col gap-4 pb-6 pl-2 pt-2",children:o.map(t=>e(l,{question:t,selectedOptionId:d[t.id],isCorrect:m[t.id],correctOptionId:u[t.id]},t.id))})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, X } from 'lucide-react';
+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;
+}
+/**
+ * Get correct option text
+ */
+function getCorrectText(question, correctOptionId) {
+    if (!correctOptionId)
+        return null;
+    const option = question.options.find((o) => o.id === correctOptionId);
+    return option?.text || null;
+}
+/**
+ * Single Question Component with review display
+ * Display rules:
+ * - Correct: Green border, green text, green checkmark
+ * - Incorrect: Red border, red text (strikethrough) + Blue text for correct answer, red X icon
+ * - Unanswered: Blue border, blue text for correct answer
+ */
+function ReviewQuestionItem({ question, selectedOptionId, isCorrect, correctOptionId, }) {
+    const selectedText = getSelectedText(question, selectedOptionId);
+    const correctText = getCorrectText(question, correctOptionId);
+    const hasStudentAnswered = !!selectedOptionId;
+    // Determine blank display color and border
+    const getBlankStyle = () => {
+        if (!hasStudentAnswered) {
+            // Unanswered: gray border (blank/empty)
+            return {
+                borderColor: '#9ca3af', // gray-400
+            };
+        }
+        if (isCorrect === true) {
+            // Correct: green border
+            return {
+                borderColor: '#22c55e', // green-500
+            };
+        }
+        // Incorrect: red border
+        return {
+            borderColor: '#ef4444', // red-500
+        };
+    };
+    // Option button styles
+    const getOptionStyle = (option) => {
+        const isSelected = selectedOptionId === option.id;
+        const isCorrectOption = correctOptionId === option.id;
+        // Student answered correctly - show green for correct option
+        if (isSelected && isCorrect === true) {
+            return 'border-green-500 bg-green-50 text-green-700';
+        }
+        // Student answered wrong - show red for their selection
+        if (isSelected && isCorrect === false) {
+            return 'border-red-500 bg-red-50 text-red-700';
+        }
+        // Show correct answer in blue when student was wrong or didn't answer
+        if (isCorrectOption && (isCorrect === false || !hasStudentAnswered)) {
+            return 'border-blue-500 bg-blue-50 text-blue-700';
+        }
+        return 'border-gray-300 bg-white text-gray-500';
+    };
+    const blankStyle = getBlankStyle();
+    // Get status for display
+    const getStatus = () => {
+        if (!hasStudentAnswered)
+            return 'unanswered';
+        if (isCorrect === true)
+            return 'correct';
+        return 'incorrect';
+    };
+    const status = getStatus();
+    return (_jsxs("div", { className: "mb-6", children: [_jsxs("div", { className: "mb-3 flex items-start 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 }), _jsx("div", { className: "flex-1 text-base leading-relaxed text-gray-800", children: _jsxs("div", { className: "flex flex-wrap items-end gap-1", children: [question.sentenceBefore && _jsx("span", { children: question.sentenceBefore }), _jsxs("span", { className: "inline-block min-w-[120px]", style: { borderBottom: `2px solid ${blankStyle.borderColor}` }, children: [status === 'correct' && (_jsx("span", { className: "block w-full text-center", children: selectedText })), status === 'unanswered' && (_jsx("span", { className: "block w-full text-center text-gray-400", children: "_______" })), status === 'incorrect' && (_jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx("span", { className: "text-red-500 line-through", children: selectedText }), _jsx("span", { className: "text-blue-600", children: correctText })] }))] }), question.sentenceAfter && _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) => {
+                    const isSelected = selectedOptionId === option.id;
+                    const isCorrectOption = correctOptionId === option.id;
+                    // Determine which icon to show
+                    const showGreenTick = isSelected && isCorrect === true;
+                    const showRedX = isSelected && isCorrect === false;
+                    const showBlueTick = isCorrectOption && (isCorrect === false || !hasStudentAnswered);
+                    return (_jsxs("div", { className: `flex items-center gap-2 rounded-lg border-2 px-4 py-2 text-sm font-medium ${getOptionStyle(option)}`, children: [_jsxs("span", { children: [option.label, ". ", option.text] }), showGreenTick && (_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-green-500", children: _jsx(Check, { className: "h-3 w-3 text-white", strokeWidth: 3 }) })), showRedX && (_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-red-500", children: _jsx(X, { className: "h-3 w-3 text-white", strokeWidth: 3 }) })), showBlueTick && (_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-500", children: _jsx(Check, { className: "h-3 w-3 text-white", strokeWidth: 3 }) }))] }, option.id));
+                }) })] }));
+}
+export function ReviewChooseAdjectiveRenderer({ partNumber, questionCount, instruction, partName, questions, answers, isCorrectMap, correctOptionIdMap, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-6 h-full", children: [_jsxs("div", { className: "flex flex-col gap-4 pb-0 pt-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: true }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: true })] }), _jsx("div", { className: "flex flex-col gap-4 pb-6 pl-2 pt-2", children: questions.map((question) => (_jsx(ReviewQuestionItem, { question: question, selectedOptionId: answers[question.id], isCorrect: isCorrectMap[question.id], correctOptionId: correctOptionIdMap[question.id] }, question.id))) })] }));
+}

package/dist/components/results/renderers/ReviewChooseBestAnswerRenderer.js

@@ -1 +1,75 @@
-"use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{Check as l,X as a,ZoomIn as i}from"lucide-react";import{useState as s}from"react";import{ResolvedImage as n}from"../../../components/common/ResolvedImage";import o from"../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import c from"../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner";import d from"../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer";function m({imageUrl:l}){const[a,o]=s(!1);return t(r,{children:[t("div",{className:"relative flex items-center justify-center",children:[e(n,{src:l,alt:"Question illustration",className:"max-h-[250px] cursor-pointer rounded-lg object-contain shadow-md",onClick:()=>o(!0)}),e("button",{type:"button",onClick:()=>o(!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"})})]}),a&&e("div",{className:"fixed inset-0 z-50 flex items-center justify-center bg-black/70",onClick:()=>o(!1),children:e(n,{src:l,alt:"Question illustration (zoomed)",className:"max-h-[90vh] max-w-[90vw] rounded-lg object-contain",showLoadingState:!1})})]})}function u({question:r,selectedOptionIds:i,isCorrect:s,correctOptionIds:o}){const c=i.length>0,d="image"===r.optionType,u=Boolean(r.multipleAnswers||o.length>1),p=e=>{const t=i.includes(e),r=o.includes(e);return t&&r?"border-green-500 bg-green-50":t&&!r?"border-red-500 bg-red-50":!r||c&&!1!==s&&t?"border-gray-300 bg-white":"border-blue-500 bg-blue-50"},h=t=>{const r=i.includes(t),n=o.includes(t),d=r&&!n,m=n&&(!c||!1===s||!r),p=u?"rounded-md":"rounded-full";return e("div",r&&n?{className:`flex h-6 w-6 items-center justify-center bg-green-500 ${p}`,children:e(l,{className:"h-4 w-4 text-white",strokeWidth:3})}:d?{className:`flex h-6 w-6 items-center justify-center bg-red-500 ${p}`,children:e(a,{className:"h-4 w-4 text-white",strokeWidth:3})}:m?{className:`flex h-6 w-6 items-center justify-center bg-blue-500 ${p}`,children:e(l,{className:"h-4 w-4 text-white",strokeWidth:3})}:{className:`flex h-5 w-5 items-center justify-center border-2 border-gray-300 bg-white ${p}`})};return t("div",{className:"mb-4",children:[t("p",{className:"mb-2 text-lg font-bold text-gray-900",children:[r.questionNumber,". ",r.questionText]}),u&&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})}),e("div",d?{className:"grid gap-3 px-2",style:{gridTemplateColumns:`repeat(${r.options.length}, minmax(0, 1fr))`},children:r.options.map(r=>t("div",{className:`relative flex flex-col items-center gap-1 rounded-lg border-2 p-2 cursor-default ${p(r.id)}`,children:[e("span",{className:"text-xs font-medium text-gray-600",children:r.label}),e(n,{src:r.text,alt:`Option ${r.label}`,className:"h-28 w-28 rounded object-contain"}),h(r.id)]},r.id))}:{className:"flex flex-col gap-2 pl-2",children:r.options.map(r=>t("div",{className:`flex items-center gap-3 rounded-lg border-2 px-3 py-2 cursor-default ${p(r.id)}`,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:r.text}),h(r.id)]},r.id))})]})}function p({article:r,label:l}){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:l}),e("h3",{className:"text-sm font-bold text-gray-900",children:r.name})]}),r.imageUrl&&e("div",{className:"mb-2",children:e(n,{src:r.imageUrl,alt:r.name,className:"h-24 w-full rounded-md object-cover"})}),e("p",{className:"text-sm leading-relaxed text-gray-700 whitespace-pre-line",children:r.content})]})}export function ReviewChooseBestAnswerRenderer({partNumber:r,questionCount:l,instruction:a,partName:i,imageUrl:s,audioUrl:m,groupContent:h,articles:g,questions:x,answers:b,isCorrectMap:f,correctOptionIdMap:N}){return t("div",{className:"flex flex-col gap-6 h-full",children:[t("div",{className:"flex flex-col gap-4 pb-0 pt-4",children:[e(o,{partNumber:r,questionCount:l,partName:i,isReviewMode:!0}),e(c,{instruction:a,isReviewMode:!0}),m&&e(d,{audioSrc:m,compact:!0}),s&&e("div",{className:"flex items-center justify-center",children:e(n,{src:s,alt:"Shared illustration",className:"max-h-[300px] rounded-lg object-contain shadow-md"})}),g&&g.length>0?e("div",{className:"flex flex-col gap-3",children:g.map((t,r)=>e(p,{article:t,label:String.fromCharCode(65+r)},r))}):h?e("div",{className:"rounded-lg bg-amber-50 p-4 text-sm leading-relaxed text-gray-700 max-h-[500px] overflow-y-auto pr-2 custom-scrollbar",children:h}):null]}),e("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6 pb-6 pl-2 pt-2",children:x.map(t=>{const r=b[t.id],l=Array.isArray(r)?r:"string"==typeof r&&r?[r]:[],a=N[t.id]?N[t.id].split(",").map(e=>e.trim()).filter(Boolean):[],i=t.correctOptionIds?.length?t.correctOptionIds:a;return e(u,{question:t,selectedOptionIds:l,isCorrect:f[t.id],correctOptionIds:i},t.id)})})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Check, X, ZoomIn } from 'lucide-react';
+import { useState } from 'react';
+import { ResolvedImage } from '../../../components/common/ResolvedImage';
+import CambridgeYlePartBanner from '../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import CambridgeYleInstructionBanner from '../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+import CambridgeYleAudioPlayer from '../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer';
+// 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 }) }))] }));
+}
+// Single Question Component for Review Mode
+function ReviewQuestionItem({ question, selectedOptionIds, isCorrect, correctOptionIds, }) {
+    const hasStudentAnswered = selectedOptionIds.length > 0;
+    const isImageOptions = question.optionType === 'image';
+    const isMultipleAnswers = Boolean(question.multipleAnswers || correctOptionIds.length > 1);
+    const getOptionStyle = (optionId) => {
+        const isSelected = selectedOptionIds.includes(optionId);
+        const isCorrectOption = correctOptionIds.includes(optionId);
+        if (isSelected && isCorrectOption) {
+            return 'border-green-500 bg-green-50';
+        }
+        if (isSelected && !isCorrectOption) {
+            return 'border-red-500 bg-red-50';
+        }
+        if (isCorrectOption && (!hasStudentAnswered || isCorrect === false || !isSelected)) {
+            return 'border-blue-500 bg-blue-50';
+        }
+        return 'border-gray-300 bg-white';
+    };
+    const renderIndicator = (optionId) => {
+        const isSelected = selectedOptionIds.includes(optionId);
+        const isCorrectOption = correctOptionIds.includes(optionId);
+        const showGreenTick = isSelected && isCorrectOption;
+        const showRedX = isSelected && !isCorrectOption;
+        const showBlueTick = isCorrectOption && (!hasStudentAnswered || isCorrect === false || !isSelected);
+        const shapeClass = isMultipleAnswers ? 'rounded-md' : 'rounded-full';
+        if (showGreenTick) {
+            return (_jsx("div", { className: `flex h-6 w-6 items-center justify-center bg-green-500 ${shapeClass}`, children: _jsx(Check, { className: "h-4 w-4 text-white", strokeWidth: 3 }) }));
+        }
+        if (showRedX) {
+            return (_jsx("div", { className: `flex h-6 w-6 items-center justify-center bg-red-500 ${shapeClass}`, children: _jsx(X, { className: "h-4 w-4 text-white", strokeWidth: 3 }) }));
+        }
+        if (showBlueTick) {
+            return (_jsx("div", { className: `flex h-6 w-6 items-center justify-center bg-blue-500 ${shapeClass}`, children: _jsx(Check, { className: "h-4 w-4 text-white", strokeWidth: 3 }) }));
+        }
+        return _jsx("div", { className: `flex h-5 w-5 items-center justify-center border-2 border-gray-300 bg-white ${shapeClass}` });
+    };
+    return (_jsxs("div", { className: "mb-4", children: [_jsxs("p", { className: "mb-2 text-lg font-bold text-gray-900", children: [question.questionNumber, ". ", 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 }) })), isImageOptions ? (_jsx("div", { className: "grid gap-3 px-2", style: { gridTemplateColumns: `repeat(${question.options.length}, minmax(0, 1fr))` }, children: question.options.map((option) => (_jsxs("div", { className: `relative flex flex-col items-center gap-1 rounded-lg border-2 p-2 cursor-default ${getOptionStyle(option.id)}`, children: [_jsx("span", { className: "text-xs font-medium text-gray-600", children: option.label }), _jsx(ResolvedImage, { src: option.text, alt: `Option ${option.label}`, className: "h-28 w-28 rounded object-contain" }), renderIndicator(option.id)] }, option.id))) })) : (
+            /* Options — text variant */
+            _jsx("div", { className: "flex flex-col gap-2 pl-2", children: question.options.map((option) => (_jsxs("div", { className: `flex items-center gap-3 rounded-lg border-2 px-3 py-2 cursor-default ${getOptionStyle(option.id)}`, 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 }), renderIndicator(option.id)] }, 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: "h-24 w-full rounded-md object-cover" }) })), _jsx("p", { className: "text-sm leading-relaxed text-gray-700 whitespace-pre-line", children: article.content })] }));
+}
+export function ReviewChooseBestAnswerRenderer({ partNumber, questionCount, instruction, partName, imageUrl, audioUrl, groupContent, articles, questions, answers, isCorrectMap, correctOptionIdMap, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-6 h-full", children: [_jsxs("div", { className: "flex flex-col gap-4 pb-0 pt-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: true }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: true }), 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-[300px] rounded-lg object-contain shadow-md" }) })), articles && articles.length > 0 ? (_jsx("div", { className: "flex flex-col gap-3", children: articles.map((article, index) => (_jsx(ArticleCard, { article: article, label: String.fromCharCode(65 + index) }, index))) })) : groupContent ? (_jsx("div", { className: "rounded-lg bg-amber-50 p-4 text-sm leading-relaxed text-gray-700 max-h-[500px] overflow-y-auto pr-2 custom-scrollbar", children: groupContent })) : null] }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 pb-6 pl-2 pt-2", children: questions.map((question) => {
+                    const rawAnswer = answers[question.id];
+                    const selectedOptionIds = Array.isArray(rawAnswer)
+                        ? rawAnswer
+                        : typeof rawAnswer === 'string' && rawAnswer
+                            ? [rawAnswer]
+                            : [];
+                    const mappedCorrectOptionIds = correctOptionIdMap[question.id]
+                        ? correctOptionIdMap[question.id].split(',').map((value) => value.trim()).filter(Boolean)
+                        : [];
+                    const correctOptionIds = question.correctOptionIds?.length
+                        ? question.correctOptionIds
+                        : mappedCorrectOptionIds;
+                    return (_jsx(ReviewQuestionItem, { question: question, selectedOptionIds: selectedOptionIds, isCorrect: isCorrectMap[question.id], correctOptionIds: correctOptionIds }, question.id));
+                }) })] }));
+}

package/dist/components/results/renderers/ReviewColoringRenderer.js

@@ -1 +1,110 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Check as t,X as s}from"lucide-react";import{useMemo as o,useState as n}from"react";import{usePresignedFileUrl as a}from"../../../shared/lib/hooks/usePresignedFileUrl";import i from"../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner";import l from"../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer";import c from"../../../components/themes/cambridge-yle/CambridgeYlePartBanner";function d({imageUrl:o,regions:i,hintItems:l,assignments:c,correctAnswers:d}){const{previewUrl:m}=a(o),[u,p]=n(null),h=e=>{if(!e)return"#333";if(!e.startsWith("#"))return"#fff";const r=e.replace("#","");if(r.length<6)return"#fff";return(.299*parseInt(r.substring(0,2),16)+.587*parseInt(r.substring(2,4),16)+.114*parseInt(r.substring(4,6),16))/255>.5?"#000":"#fff"};return r("div",{className:"relative inline-block",children:[e("img",{src:m||o,alt:"Coloring question",className:"max-h-[600px] w-full max-w-[900px] rounded-lg object-contain shadow-sm",onLoad:e=>{const r=e.currentTarget;p({width:r.naturalWidth,height:r.naturalHeight})}}),u&&i.map(o=>{const n=c[o.id],a=n?l.find(e=>e.color?.toUpperCase()===n.toUpperCase()):void 0,i=d[o.id],m=i?l.find(e=>e.color?.toUpperCase()===i.toUpperCase()):void 0,u=function(e,r,t){const s=t[e];return s?s.toUpperCase()===r.toUpperCase()?"correct":"incorrect":"unanswered"}(o.id,i||"",c),p=function(e){switch(e){case"correct":return"border-green-500";case"incorrect":return"border-red-500";case"unanswered":return"border-blue-500";default:return"border-gray-400"}}(u);return r("div",{className:`absolute rounded border-2 ${p} flex items-center justify-center`,style:{left:`${o.x}%`,top:`${o.y}%`,width:`${o.width}%`,height:`${o.height}%`,backgroundColor:a?.color||"transparent"},children:[a?.label&&e("span",{className:"z-10 text-[8px] sm:text-[10px] font-bold uppercase tracking-wide drop-shadow-sm font-[family-name:var(--font-nunito)]",style:{color:a.color?h(a.color):"#333"},children:a.label}),r("div",{className:"absolute -right-2 -top-2 z-20",children:["correct"===u&&e("div",{className:"flex h-5 w-5 items-center justify-center rounded-full bg-green-500 shadow-sm",children:e(t,{className:"h-3 w-3 text-white",strokeWidth:3})}),"incorrect"===u&&e("div",{className:"flex h-5 w-5 items-center justify-center rounded-full bg-red-500 shadow-sm",children:e(s,{className:"h-3 w-3 text-white",strokeWidth:3})})]}),"correct"!==u&&m&&r("div",{className:"absolute left-1/2 -translate-x-1/2 z-30 flex items-center gap-1 rounded shadow-md px-1.5 py-0.5 border-2 border-green-500",style:{bottom:"-22px",backgroundColor:m.color||"#fff"},children:[e(t,{className:"h-2 w-2 sm:h-2.5 sm:w-2.5",style:{color:m.color?h(m.color):"#333"},strokeWidth:4}),e("span",{className:"text-[7px] sm:text-[9px] font-bold uppercase tracking-wide whitespace-nowrap drop-shadow-sm font-[family-name:var(--font-nunito)]",style:{color:m.color?h(m.color):"#333"},children:m.label})]})]},o.id)})]})}function m({hintItems:t}){return e("div",{className:"flex flex-wrap gap-2",children:t.map(t=>r("div",{className:"flex items-center gap-2 rounded-lg border border-gray-200 px-3 py-1.5",children:[t.color&&e("div",{className:"h-5 w-5 rounded border border-gray-300",style:{backgroundColor:t.color}}),t.label&&e("span",{className:"text-sm text-gray-700",children:t.label})]},t.id))})}function u(){return r("div",{className:"flex items-center gap-2 rounded-lg bg-green-50 px-4 py-3 text-green-700",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-full bg-green-500",children:e(t,{className:"h-4 w-4 text-white",strokeWidth:3})}),e("span",{className:"font-medium",children:"All answers are correct!"})]})}export function ReviewColoringRenderer({partNumber:t,questionCount:s,instruction:n,instructions:a,partName:p,imageUrl:h,audioUrl:f,hintItems:g,regions:b,assignments:w,correctAnswers:x}){const y=o(()=>b.every(e=>{const r=w[e.id],t=x[e.id];return!(!r||!t)&&r.toUpperCase()===t.toUpperCase()}),[b,w,x]);return r("div",{className:"flex h-full flex-col gap-4 overflow-y-auto p-6",children:[e(c,{partNumber:t,questionCount:s,partName:p,isReviewMode:!0}),e(i,{instruction:n,instructions:a,isReviewMode:!0,children:f&&e(l,{audioSrc:f,compact:!0})}),y&&e(u,{}),e(m,{hintItems:g}),e("div",{className:"flex justify-center mt-4",children:e(d,{imageUrl:h,regions:b,hintItems:g,assignments:w,correctAnswers:x})})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, X } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { usePresignedFileUrl } from '../../../shared/lib/hooks/usePresignedFileUrl';
+import CambridgeYleInstructionBanner from '../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+import CambridgeYleAudioPlayer from '../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer';
+import CambridgeYlePartBanner from '../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+/**
+ * Get region status based on student assignment and correct answer
+ * Now compares hex colors directly instead of hint IDs
+ */
+function getRegionStatus(regionId, correctColor, assignments) {
+    const studentAnswer = assignments[regionId];
+    if (!studentAnswer) {
+        return 'unanswered';
+    }
+    // Compare hex colors (case-insensitive)
+    return studentAnswer.toUpperCase() === correctColor.toUpperCase() ? 'correct' : 'incorrect';
+}
+/**
+ * Get border class based on status
+ */
+function getBorderClass(status) {
+    switch (status) {
+        case 'correct':
+            return 'border-green-500';
+        case 'incorrect':
+            return 'border-red-500';
+        case 'unanswered':
+            return 'border-blue-500';
+        default:
+            return 'border-gray-400';
+    }
+}
+/**
+ * Coloring display component - renders image with colored region overlays
+ */
+function ColoringDisplay({ imageUrl, regions, hintItems, assignments, correctAnswers, }) {
+    // Resolve S3 key to presigned URL
+    const { previewUrl: resolvedImageUrl } = usePresignedFileUrl(imageUrl);
+    const [imageDimensions, setImageDimensions] = useState(null);
+    // Handle image load to get dimensions
+    const handleImageLoad = (e) => {
+        const img = e.currentTarget;
+        setImageDimensions({ width: img.naturalWidth, height: img.naturalHeight });
+    };
+    const getTextColor = (bgColor) => {
+        if (!bgColor)
+            return '#333';
+        if (!bgColor.startsWith('#'))
+            return '#fff';
+        const hex = bgColor.replace('#', '');
+        if (hex.length < 6)
+            return '#fff'; // fallback for short hex
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+        return luminance > 0.5 ? '#000' : '#fff';
+    };
+    return (_jsxs("div", { className: "relative inline-block", children: [_jsx("img", { src: resolvedImageUrl || imageUrl, alt: "Coloring question", className: "max-h-[600px] w-full max-w-[900px] rounded-lg object-contain shadow-sm", onLoad: handleImageLoad }), imageDimensions &&
+                regions.map((region) => {
+                    // Get student's answer (hex color)
+                    const studentColor = assignments[region.id];
+                    const studentHint = studentColor ? hintItems.find(h => h.color?.toUpperCase() === studentColor.toUpperCase()) : undefined;
+                    // Get correct answer (hex color from API)
+                    const correctColor = correctAnswers[region.id];
+                    const correctHint = correctColor ? hintItems.find(h => h.color?.toUpperCase() === correctColor.toUpperCase()) : undefined;
+                    // Determine status and border (compare hex colors)
+                    const status = getRegionStatus(region.id, correctColor || '', assignments);
+                    const borderClass = getBorderClass(status);
+                    return (_jsxs("div", { className: `absolute rounded border-2 ${borderClass} flex items-center justify-center`, style: {
+                            left: `${region.x}%`,
+                            top: `${region.y}%`,
+                            width: `${region.width}%`,
+                            height: `${region.height}%`,
+                            backgroundColor: studentHint?.color || 'transparent',
+                        }, children: [studentHint?.label && (_jsx("span", { className: "z-10 text-[8px] sm:text-[10px] font-bold uppercase tracking-wide drop-shadow-sm font-[family-name:var(--font-nunito)]", style: { color: studentHint.color ? getTextColor(studentHint.color) : '#333' }, children: studentHint.label })), _jsxs("div", { className: "absolute -right-2 -top-2 z-20", children: [status === 'correct' && (_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-green-500 shadow-sm", children: _jsx(Check, { className: "h-3 w-3 text-white", strokeWidth: 3 }) })), status === 'incorrect' && (_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-red-500 shadow-sm", children: _jsx(X, { className: "h-3 w-3 text-white", strokeWidth: 3 }) }))] }), status !== 'correct' && correctHint && (_jsxs("div", { className: "absolute left-1/2 -translate-x-1/2 z-30 flex items-center gap-1 rounded shadow-md px-1.5 py-0.5 border-2 border-green-500", style: {
+                                    bottom: '-22px',
+                                    backgroundColor: correctHint.color || '#fff'
+                                }, children: [_jsx(Check, { className: "h-2 w-2 sm:h-2.5 sm:w-2.5", style: { color: correctHint.color ? getTextColor(correctHint.color) : '#333' }, strokeWidth: 4 }), _jsx("span", { className: "text-[7px] sm:text-[9px] font-bold uppercase tracking-wide whitespace-nowrap drop-shadow-sm font-[family-name:var(--font-nunito)]", style: { color: correctHint.color ? getTextColor(correctHint.color) : '#333' }, children: correctHint.label })] }))] }, region.id));
+                })] }));
+}
+/**
+ * Color legend showing hint palette
+ */
+function ColorLegend({ hintItems }) {
+    return (_jsx("div", { className: "flex flex-wrap gap-2", children: hintItems.map((hint) => (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 px-3 py-1.5", children: [hint.color && (_jsx("div", { className: "h-5 w-5 rounded border border-gray-300", style: { backgroundColor: hint.color } })), hint.label && _jsx("span", { className: "text-sm text-gray-700", children: hint.label })] }, hint.id))) }));
+}
+/**
+ * Success banner for all-correct state
+ */
+function SuccessBanner() {
+    return (_jsxs("div", { className: "flex items-center gap-2 rounded-lg bg-green-50 px-4 py-3 text-green-700", children: [_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 }) }), _jsx("span", { className: "font-medium", children: "All answers are correct!" })] }));
+}
+export function ReviewColoringRenderer({ partNumber, questionCount, instruction, instructions, partName, imageUrl, audioUrl, hintItems, regions, assignments, correctAnswers, }) {
+    // Calculate if all answers are correct (compare hex colors)
+    const isAllCorrect = useMemo(() => {
+        return regions.every((region) => {
+            const studentColor = assignments[region.id];
+            const correctColor = correctAnswers[region.id];
+            if (!studentColor || !correctColor)
+                return false;
+            return studentColor.toUpperCase() === correctColor.toUpperCase();
+        });
+    }, [regions, assignments, correctAnswers]);
+    // Always use single panel layout
+    return (_jsxs("div", { className: "flex h-full flex-col gap-4 overflow-y-auto p-6", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: true }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, instructions: instructions, isReviewMode: true, children: audioUrl && _jsx(CambridgeYleAudioPlayer, { audioSrc: audioUrl, compact: true }) }), isAllCorrect && _jsx(SuccessBanner, {}), _jsx(ColorLegend, { hintItems: hintItems }), _jsx("div", { className: "flex justify-center mt-4", children: _jsx(ColoringDisplay, { imageUrl: imageUrl, regions: regions, hintItems: hintItems, assignments: assignments, correctAnswers: correctAnswers }) })] }));
+}

package/dist/components/results/renderers/ReviewListenAndWriteRenderer.js

@@ -1 +1,48 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Check as r,X as s}from"lucide-react";import{ResolvedImage as l}from"../../../components/common/ResolvedImage";import n from"../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import a from"../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner";import c from"../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer";export function ReviewListenAndWriteRenderer({partNumber:i,questionCount:o,instruction:d,partName:m,audioUrl:u,title:x,exampleText:f,questions:h,answers:p,isCorrectMap:N,correctAnswerTextMap:b}){const g=e=>{const t=N[e],r=p[e];return null==r||""===r?"unanswered":!0===t?"correct":!1===t?"incorrect":"unanswered"},w=e=>{switch(g(e)){case"correct":return"#22c55e";case"incorrect":return"#ef4444";case"unanswered":return"#3b82f6";default:return"#9ca3af"}};return t("div",{className:"flex flex-col gap-6 h-full",children:[t("div",{className:"flex flex-col gap-4 pb-0 pt-4",children:[e(n,{partNumber:i,questionCount:o,partName:m,isReviewMode:!0}),e(a,{instruction:d,hasExample:!!f,isReviewMode:!0}),u&&e(c,{audioSrc:u,compact:!0})]}),t("div",{className:"flex flex-col gap-6 pb-6 pl-2 pt-2",children:[e("h2",{className:"text-center text-3xl font-bold uppercase text-coral-500",children:x}),e("div",{className:"flex flex-col gap-4",children:h.map(n=>{const a=g(n.id),c=p[n.id]||"";return t("div",{className:"flex flex-col gap-2",children:[n.imageUrl&&e("div",{className:"flex items-center justify-center",children:e(l,{src:n.imageUrl,alt:`Question ${n.questionNumber} illustration`,className:"max-h-[150px] rounded-lg object-contain shadow-md"})}),t("div",{className:"flex items-start 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:n.questionNumber}),e("div",{className:"flex-1 text-base leading-relaxed text-gray-800",children:t("div",{className:"flex items-center gap-2",children:[n.textBefore&&e("span",{children:n.textBefore}),t("span",{className:"inline-block min-w-[120px]",style:{borderBottom:`2px solid ${w(n.id)}`},children:["correct"===a&&e("span",{className:"block w-full text-center",children:c}),"unanswered"===a&&e("span",{className:"block w-full text-center text-blue-600",children:b[n.id]}),"incorrect"===a&&t("span",{className:"flex items-center justify-center gap-2",children:[e("span",{className:"text-red-500 line-through",children:c}),e("span",{className:"text-gray-400",children:"→"}),e("span",{className:"text-blue-600",children:b[n.id]})]})]}),n.textAfter&&e("span",{children:n.textAfter}),"correct"===a&&e("div",{className:"flex h-6 w-6 items-center justify-center rounded-full bg-green-500",children:e(r,{className:"h-4 w-4 text-white",strokeWidth:3})}),"incorrect"===a&&e("div",{className:"flex h-6 w-6 items-center justify-center rounded-full bg-red-500",children:e(s,{className:"h-4 w-4 text-white",strokeWidth:3})}),"unanswered"===a&&e("div",{className:"flex h-6 w-6 items-center justify-center rounded-full bg-blue-500",children:e(r,{className:"h-4 w-4 text-white",strokeWidth:3})})]})})]})]},n.id)})})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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';
+import CambridgeYleAudioPlayer from '../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer';
+export function ReviewListenAndWriteRenderer({ partNumber, questionCount, instruction, partName, audioUrl, title, exampleText, questions, answers, isCorrectMap, correctAnswerTextMap, }) {
+    /**
+     * Get answer status from API's isCorrect field
+     * Returns: 'correct' | 'incorrect' | 'unanswered'
+     */
+    const getAnswerStatus = (questionId) => {
+        const isCorrect = isCorrectMap[questionId];
+        const userAnswer = answers[questionId];
+        // No answer from student (null or undefined or empty string)
+        if (userAnswer === null || userAnswer === undefined || userAnswer === '') {
+            return 'unanswered';
+        }
+        // Use API's isCorrect value
+        if (isCorrect === true)
+            return 'correct';
+        if (isCorrect === false)
+            return 'incorrect';
+        // isCorrect is null but student answered - treat as unanswered/pending
+        return 'unanswered';
+    };
+    const getUnderlineColor = (questionId) => {
+        const status = getAnswerStatus(questionId);
+        switch (status) {
+            case 'correct':
+                return '#22c55e'; // green-500
+            case 'incorrect':
+                return '#ef4444'; // red-500
+            case 'unanswered':
+                return '#3b82f6'; // blue-500
+            default:
+                return '#9ca3af'; // gray-400
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-6 h-full", children: [_jsxs("div", { className: "flex flex-col gap-4 pb-0 pt-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: true }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, hasExample: !!exampleText, isReviewMode: true }), audioUrl && _jsx(CambridgeYleAudioPlayer, { audioSrc: audioUrl, compact: true })] }), _jsxs("div", { className: "flex flex-col gap-6 pb-6 pl-2 pt-2", children: [_jsx("h2", { className: "text-center text-3xl font-bold uppercase text-coral-500", children: title }), _jsx("div", { className: "flex flex-col gap-4", children: questions.map((question) => {
+                            const status = getAnswerStatus(question.id);
+                            const userAnswer = answers[question.id] || '';
+                            return (_jsxs("div", { className: "flex flex-col gap-2", children: [question.imageUrl && (_jsx("div", { className: "flex items-center justify-center", children: _jsx(ResolvedImage, { src: question.imageUrl, alt: `Question ${question.questionNumber} illustration`, className: "max-h-[150px] rounded-lg object-contain shadow-md" }) })), _jsxs("div", { className: "flex items-start 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 }), _jsx("div", { className: "flex-1 text-base leading-relaxed text-gray-800", children: _jsxs("div", { className: "flex items-center gap-2", children: [question.textBefore && (_jsx("span", { children: question.textBefore })), _jsxs("span", { className: "inline-block min-w-[120px]", style: {
+                                                                borderBottom: `2px solid ${getUnderlineColor(question.id)}`,
+                                                            }, children: [status === 'correct' && (_jsx("span", { className: "block w-full text-center", children: userAnswer })), status === 'unanswered' && (_jsx("span", { className: "block w-full text-center text-blue-600", children: correctAnswerTextMap[question.id] })), status === 'incorrect' && (_jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx("span", { className: "text-red-500 line-through", children: userAnswer }), _jsx("span", { className: "text-gray-400", children: "\u2192" }), _jsx("span", { className: "text-blue-600", children: correctAnswerTextMap[question.id] })] }))] }), question.textAfter && (_jsx("span", { children: question.textAfter })), status === 'correct' && (_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 }) })), status === 'incorrect' && (_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 }) })), status === 'unanswered' && (_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 }) }))] }) })] })] }, question.id));
+                        }) })] })] }));
+}

package/dist/components/results/renderers/ReviewListenChooseAnswerGroupRenderer.js

@@ -1 +1,87 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Check as t,X as i}from"lucide-react";import{ResolvedImage as l}from"../../../components/common/ResolvedImage";import a from"../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import{cn as s}from"../../../shared/lib/utils";import{ReviewListeningHeader as n,ListeningLegend as o,getListeningStatus as d}from"./ReviewListeningHeader";function c(e){return"object"==typeof e&&null!==e&&!Array.isArray(e)}function m(e,r){return c(e)&&"string"==typeof e[r]?e[r]:""}function u({option:a,isCorrect:n,isStudent:o}){let d="border-dashed border-slate-300 bg-white",c=null,m="",u=a.label;return n&&o?(d="border-solid border-emerald-500 bg-emerald-50 ring-2 ring-emerald-500/30",u=`${a.label} – Đáp án đúng (bạn đã chọn)`,c=e("span",{className:"absolute right-1 top-1 flex h-7 w-7 items-center justify-center rounded-full bg-emerald-500 text-white shadow-md ring-2 ring-white",children:e(t,{className:"h-4 w-4",strokeWidth:3})})):n?(d="border-solid border-emerald-500 bg-emerald-50 ring-2 ring-emerald-500/30",u=`${a.label} – Đáp án đúng`,c=e("span",{className:"absolute right-1 top-1 flex h-7 w-7 items-center justify-center rounded-full bg-emerald-500 text-white shadow-md ring-2 ring-white",children:e(t,{className:"h-4 w-4",strokeWidth:3})})):o?(d="border-solid border-red-500 bg-red-50 ring-2 ring-red-500/30",u=`${a.label} – Lựa chọn của bạn (sai)`,c=e("span",{className:"absolute right-1 top-1 flex h-7 w-7 items-center justify-center rounded-full bg-red-500 text-white shadow-md ring-2 ring-white",children:e(i,{className:"h-4 w-4",strokeWidth:3})})):m="opacity-60",r("div",{"aria-label":u,className:s("relative flex flex-col items-center rounded-xl border-2 p-2 transition",d,m),children:[e("div",{className:"aspect-square w-full overflow-hidden rounded-lg bg-white",children:a.imageUrl?e(l,{src:a.imageUrl,alt:a.label,className:"h-full w-full object-contain",draggable:!1}):e("div",{className:"flex h-full w-full items-center justify-center text-xs text-slate-400",children:a.label})}),e("p",{className:"mt-2 line-clamp-1 w-full text-center text-xs font-medium text-slate-700",children:a.label}),c]})}export function ReviewListenChooseAnswerGroupRenderer({partNumber:t,questionCount:i,partName:l,questions:s,studentAnswers:p,rawCorrectAnswerMap:b,isCorrectMap:g,questionScoreMap:h}){return r("div",{className:"flex flex-col gap-6 pt-4",children:[e(a,{partNumber:t,questionCount:i,partName:l,isReviewMode:!0}),s.map(t=>{const i=function(e){let r=e?.payload;if("string"==typeof r)try{r=JSON.parse(r)}catch{return{}}return c(r)&&Array.isArray(r.options)?{options:r.options.flatMap(e=>c(e)&&"string"==typeof e.id?[{id:e.id,label:"string"==typeof e.label?e.label:"",imageUrl:"string"==typeof e.imageUrl?e.imageUrl:""}]:[])}:{}}(t.questionGroup).options??[],l=m(t.content,"audioUrl")||m(t.content,"audio"),a=m(p[t.id],"answer"),s=m(b[t.id],"answer"),f=g[t.id]??null,w=d(f,!!a),x=h[t.id]??{score:null,maxScore:Number(t.total_points||0)};return r("div",{className:"rounded-2xl border border-slate-100 bg-slate-50/60 p-4 md:p-5",children:[e(n,{questionNumber:t.question_number,typeLabel:"Listen & choose answer",status:w,score:x.score,maxScore:x.maxScore,audioKey:l}),e(o,{showCorrect:!0,showStudent:!!a&&!f}),i.length>0?e("div",{className:"mt-3 grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4",children:i.map(r=>e(u,{option:r,isCorrect:r.id===s,isStudent:r.id===a},r.id))}):e("div",{className:"mt-3 rounded-lg border border-slate-200 bg-white p-4 text-center text-sm text-slate-400",children:"No options available"}),!a&&e("p",{className:"mt-3 text-xs italic text-slate-500",children:"Bạn chưa trả lời câu này."})]},t.id)})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ReviewListenChooseAnswerGroupRenderer
+ *
+ * Renders LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP questions in review mode.
+ * Shows a grid of image options. The correct option is bordered in emerald with
+ * a check badge; the student's wrong pick is bordered in red with an X badge.
+ */
+import { Check, X } from 'lucide-react';
+import { ResolvedImage } from '../../../components/common/ResolvedImage';
+import CambridgeYlePartBanner from '../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import { cn } from '../../../shared/lib/utils';
+import { ReviewListeningHeader, ListeningLegend, getListeningStatus } from './ReviewListeningHeader';
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function readString(value, key) {
+    if (!isRecord(value))
+        return '';
+    return typeof value[key] === 'string' ? value[key] : '';
+}
+function parsePayload(group) {
+    let payload = group?.payload;
+    if (typeof payload === 'string') {
+        try {
+            payload = JSON.parse(payload);
+        }
+        catch {
+            return {};
+        }
+    }
+    if (!isRecord(payload) || !Array.isArray(payload.options))
+        return {};
+    const options = payload.options.flatMap((value) => {
+        if (!isRecord(value) || typeof value.id !== 'string')
+            return [];
+        return [{
+                id: value.id,
+                label: typeof value.label === 'string' ? value.label : '',
+                imageUrl: typeof value.imageUrl === 'string' ? value.imageUrl : '',
+            }];
+    });
+    return { options };
+}
+function OptionCard({ option, isCorrect, isStudent }) {
+    let frame = 'border-dashed border-slate-300 bg-white';
+    let badge = null;
+    let opacity = '';
+    let ariaLabel = option.label;
+    if (isCorrect && isStudent) {
+        frame = 'border-solid border-emerald-500 bg-emerald-50 ring-2 ring-emerald-500/30';
+        ariaLabel = `${option.label} – Đáp án đúng (bạn đã chọn)`;
+        badge = (_jsx("span", { className: "absolute right-1 top-1 flex h-7 w-7 items-center justify-center rounded-full bg-emerald-500 text-white shadow-md ring-2 ring-white", children: _jsx(Check, { className: "h-4 w-4", strokeWidth: 3 }) }));
+    }
+    else if (isCorrect) {
+        frame = 'border-solid border-emerald-500 bg-emerald-50 ring-2 ring-emerald-500/30';
+        ariaLabel = `${option.label} – Đáp án đúng`;
+        badge = (_jsx("span", { className: "absolute right-1 top-1 flex h-7 w-7 items-center justify-center rounded-full bg-emerald-500 text-white shadow-md ring-2 ring-white", children: _jsx(Check, { className: "h-4 w-4", strokeWidth: 3 }) }));
+    }
+    else if (isStudent) {
+        frame = 'border-solid border-red-500 bg-red-50 ring-2 ring-red-500/30';
+        ariaLabel = `${option.label} – Lựa chọn của bạn (sai)`;
+        badge = (_jsx("span", { className: "absolute right-1 top-1 flex h-7 w-7 items-center justify-center rounded-full bg-red-500 text-white shadow-md ring-2 ring-white", children: _jsx(X, { className: "h-4 w-4", strokeWidth: 3 }) }));
+    }
+    else {
+        opacity = 'opacity-60';
+    }
+    return (_jsxs("div", { "aria-label": ariaLabel, className: cn('relative flex flex-col items-center rounded-xl border-2 p-2 transition', frame, opacity), children: [_jsx("div", { className: "aspect-square w-full overflow-hidden rounded-lg bg-white", children: option.imageUrl ? (_jsx(ResolvedImage, { src: option.imageUrl, alt: option.label, className: "h-full w-full object-contain", draggable: false })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center text-xs text-slate-400", children: option.label })) }), _jsx("p", { className: "mt-2 line-clamp-1 w-full text-center text-xs font-medium text-slate-700", children: option.label }), badge] }));
+}
+export function ReviewListenChooseAnswerGroupRenderer({ partNumber, questionCount, partName, questions, studentAnswers, rawCorrectAnswerMap, isCorrectMap, questionScoreMap, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-6 pt-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: true }), questions.map((question) => {
+                const payload = parsePayload(question.questionGroup);
+                const options = payload.options ?? [];
+                const audioKey = readString(question.content, 'audioUrl') ||
+                    readString(question.content, 'audio');
+                const studentOptionId = readString(studentAnswers[question.id], 'answer');
+                const correctOptionId = readString(rawCorrectAnswerMap[question.id], 'answer');
+                const isCorrect = isCorrectMap[question.id] ?? null;
+                const status = getListeningStatus(isCorrect, !!studentOptionId);
+                const scoreInfo = questionScoreMap[question.id] ?? {
+                    score: null,
+                    maxScore: Number(question.total_points || 0),
+                };
+                return (_jsxs("div", { className: "rounded-2xl border border-slate-100 bg-slate-50/60 p-4 md:p-5", children: [_jsx(ReviewListeningHeader, { questionNumber: question.question_number, typeLabel: "Listen & choose answer", status: status, score: scoreInfo.score, maxScore: scoreInfo.maxScore, audioKey: audioKey }), _jsx(ListeningLegend, { showCorrect: true, showStudent: !!studentOptionId && !isCorrect }), options.length > 0 ? (_jsx("div", { className: "mt-3 grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", children: options.map((option) => (_jsx(OptionCard, { option: option, isCorrect: option.id === correctOptionId, isStudent: option.id === studentOptionId }, option.id))) })) : (_jsx("div", { className: "mt-3 rounded-lg border border-slate-200 bg-white p-4 text-center text-sm text-slate-400", children: "No options available" })), !studentOptionId && (_jsx("p", { className: "mt-3 text-xs italic text-slate-500", children: "B\u1EA1n ch\u01B0a tr\u1EA3 l\u1EDDi c\u00E2u n\u00E0y." }))] }, question.id));
+            })] }));
+}