@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

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));
+            })] }));
+}

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

@@ -1 +1,104 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Check as t,X as l}from"lucide-react";import{ResolvedImage as a}from"../../../components/common/ResolvedImage";import i from"../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import{cn as d}from"../../../shared/lib/utils";import{ReviewListeningHeader as s,ListeningLegend as n,getListeningStatus as o}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]:""}export function ReviewListenChooseObjectsRenderer({partNumber:h,questionCount:p,partName:u,questions:b,studentAnswers:g,rawCorrectAnswerMap:f,isCorrectMap:x,questionScoreMap:w}){return r("div",{className:"flex flex-col gap-6 pt-4",children:[e(i,{partNumber:h,questionCount:p,partName:u,isReviewMode:!0}),b.map(i=>{const h=function(e){let r=e?.payload;if("string"==typeof r)try{r=JSON.parse(r)}catch{return{}}if(!c(r))return{};const t=Array.isArray(r.objectNodes)?r.objectNodes.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:"",x:"number"==typeof e.x?e.x:0,y:"number"==typeof e.y?e.y:0,width:"number"==typeof e.width?e.width:0,height:"number"==typeof e.height?e.height:0}]:[]):[];return{backgroundImageUrl:"string"==typeof r.backgroundImageUrl?r.backgroundImageUrl:void 0,objectNodes:t}}(i.questionGroup),p=h.objectNodes??[],u=h.backgroundImageUrl??"",b=m(i.content,"audioUrl")||m(i.content,"audio"),N=m(g[i.id],"objectId"),y=m(f[i.id],"objectId"),v=x[i.id]??null,j=o(v,!!N),k=w[i.id]??{score:null,maxScore:Number(i.total_points||0)},U=p.find(e=>e.id===y),q=p.find(e=>e.id===N);return r("div",{className:"rounded-2xl border border-slate-100 bg-slate-50/60 p-4 md:p-5",children:[e(s,{questionNumber:i.question_number,typeLabel:"Listen & choose object",status:j,score:k.score,maxScore:k.maxScore,audioKey:b}),e(n,{showCorrect:!0,showStudent:!!N&&!v}),e("div",{className:"mt-3 overflow-hidden rounded-xl border border-slate-200 bg-white",children:r("div",{className:"relative w-full",style:{aspectRatio:"16 / 9"},children:[u?e(a,{src:u,alt:"Scene",className:"absolute inset-0 h-full w-full object-contain",draggable:!1}):e("div",{className:"absolute inset-0 flex items-center justify-center text-sm text-slate-400",children:"No scene image"}),p.map(i=>{const s=i.id===y,n=i.id===N;let o="",c=null,m=i.label;return s&&n?(o="ring-4 ring-emerald-500 shadow-lg shadow-emerald-500/30",m=`${i.label} – Đáp án đúng (bạn đã chọn)`,c=e("span",{className:"absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500 text-white shadow ring-2 ring-white",children:e(t,{className:"h-3.5 w-3.5",strokeWidth:3})})):s?(o="ring-4 ring-emerald-500 shadow-lg shadow-emerald-500/30",m=`${i.label} – Đáp án đúng`,c=e("span",{className:"absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500 text-white shadow ring-2 ring-white",children:e(t,{className:"h-3.5 w-3.5",strokeWidth:3})})):n&&(o="ring-4 ring-red-500 shadow-lg shadow-red-500/30",m=`${i.label} – Lựa chọn của bạn (sai)`,c=e("span",{className:"absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-white shadow ring-2 ring-white",children:e(l,{className:"h-3.5 w-3.5",strokeWidth:3})})),e("div",{className:"absolute",style:{left:`${i.x}%`,top:`${i.y}%`,width:`${i.width}%`,height:`${i.height}%`},"aria-label":m,children:r("div",{className:d("relative h-full w-full rounded-md transition",o,!o&&"rounded-md border border-dashed border-slate-300/80 bg-white/40"),children:[e("div",{className:d("h-full w-full overflow-hidden rounded-md",!o&&"opacity-60"),children:i.imageUrl?e(a,{src:i.imageUrl,alt:i.label,className:"h-full w-full object-contain",draggable:!1}):e("div",{className:"flex h-full w-full items-center justify-center bg-white/60 text-[10px] text-slate-500",children:i.label})}),c]})},i.id)})]})}),r("div","correct"===j?{className:"mt-3 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm",children:[e("p",{className:"text-[11px] font-semibold uppercase tracking-wide text-emerald-700",children:"Đáp án đúng"}),e("p",{className:"mt-0.5 text-emerald-800",children:U?.label||y||"—"})]}:"unanswered"===j?{className:"mt-3 grid grid-cols-1 gap-2 text-sm sm:grid-cols-2",children:[r("div",{className:"rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2",children:[e("p",{className:"text-[11px] font-semibold uppercase tracking-wide text-emerald-700",children:"Đáp án đúng"}),e("p",{className:"mt-0.5 text-emerald-800",children:U?.label||y||"—"})]}),r("div",{className:"rounded-lg border border-slate-200 bg-white px-3 py-2",children:[e("p",{className:"text-[11px] font-semibold uppercase tracking-wide text-slate-500",children:"Đáp án của bạn"}),e("p",{className:"mt-0.5 italic text-slate-500",children:"Bạn chưa trả lời"})]})]}:{className:"mt-3 grid grid-cols-1 gap-2 text-sm sm:grid-cols-2",children:[r("div",{className:"rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2",children:[e("p",{className:"text-[11px] font-semibold uppercase tracking-wide text-emerald-700",children:"Đáp án đúng"}),e("p",{className:"mt-0.5 text-emerald-800",children:U?.label||y||"—"})]}),r("div",{className:"rounded-lg border border-red-200 bg-red-50 px-3 py-2",children:[e("p",{className:"text-[11px] font-semibold uppercase tracking-wide text-red-700",children:"Đáp án của bạn"}),e("p",{className:"mt-0.5 text-red-800",children:q?.label||N||"—"})]})]})]},i.id)})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ReviewListenChooseObjectsRenderer
+ *
+ * Renders LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE questions in review mode.
+ * For each question we show:
+ *   - Header (number / type badge / status / score / audio)
+ *   - Scene background with object overlays positioned via x/y/width/height (%)
+ *   - The correct object is ringed in emerald
+ *   - The student's pick is ringed in red when incorrect (green when correct)
+ */
+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))
+        return {};
+    const objectNodes = Array.isArray(payload.objectNodes)
+        ? payload.objectNodes.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 : '',
+                    x: typeof value.x === 'number' ? value.x : 0,
+                    y: typeof value.y === 'number' ? value.y : 0,
+                    width: typeof value.width === 'number' ? value.width : 0,
+                    height: typeof value.height === 'number' ? value.height : 0,
+                }];
+        })
+        : [];
+    return {
+        backgroundImageUrl: typeof payload.backgroundImageUrl === 'string' ? payload.backgroundImageUrl : undefined,
+        objectNodes,
+    };
+}
+export function ReviewListenChooseObjectsRenderer({ 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 objectNodes = payload.objectNodes ?? [];
+                const backgroundUrl = payload.backgroundImageUrl ?? '';
+                const audioKey = readString(question.content, 'audioUrl') ||
+                    readString(question.content, 'audio');
+                const studentObjectId = readString(studentAnswers[question.id], 'objectId');
+                const correctObjectId = readString(rawCorrectAnswerMap[question.id], 'objectId');
+                const isCorrect = isCorrectMap[question.id] ?? null;
+                const status = getListeningStatus(isCorrect, !!studentObjectId);
+                const scoreInfo = questionScoreMap[question.id] ?? {
+                    score: null,
+                    maxScore: Number(question.total_points || 0),
+                };
+                const correctNode = objectNodes.find((n) => n.id === correctObjectId);
+                const studentNode = objectNodes.find((n) => n.id === studentObjectId);
+                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 object", status: status, score: scoreInfo.score, maxScore: scoreInfo.maxScore, audioKey: audioKey }), _jsx(ListeningLegend, { showCorrect: true, showStudent: !!studentObjectId && !isCorrect }), _jsx("div", { className: "mt-3 overflow-hidden rounded-xl border border-slate-200 bg-white", children: _jsxs("div", { className: "relative w-full", style: { aspectRatio: '16 / 9' }, children: [backgroundUrl ? (_jsx(ResolvedImage, { src: backgroundUrl, alt: "Scene", className: "absolute inset-0 h-full w-full object-contain", draggable: false })) : (_jsx("div", { className: "absolute inset-0 flex items-center justify-center text-sm text-slate-400", children: "No scene image" })), objectNodes.map((node) => {
+                                        const isCorrectNode = node.id === correctObjectId;
+                                        const isStudentNode = node.id === studentObjectId;
+                                        let ring = '';
+                                        let badge = null;
+                                        let ariaLabel = node.label;
+                                        if (isCorrectNode && isStudentNode) {
+                                            ring = 'ring-4 ring-emerald-500 shadow-lg shadow-emerald-500/30';
+                                            ariaLabel = `${node.label} – Đáp án đúng (bạn đã chọn)`;
+                                            badge = (_jsx("span", { className: "absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500 text-white shadow ring-2 ring-white", children: _jsx(Check, { className: "h-3.5 w-3.5", strokeWidth: 3 }) }));
+                                        }
+                                        else if (isCorrectNode) {
+                                            ring = 'ring-4 ring-emerald-500 shadow-lg shadow-emerald-500/30';
+                                            ariaLabel = `${node.label} – Đáp án đúng`;
+                                            badge = (_jsx("span", { className: "absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500 text-white shadow ring-2 ring-white", children: _jsx(Check, { className: "h-3.5 w-3.5", strokeWidth: 3 }) }));
+                                        }
+                                        else if (isStudentNode) {
+                                            ring = 'ring-4 ring-red-500 shadow-lg shadow-red-500/30';
+                                            ariaLabel = `${node.label} – Lựa chọn của bạn (sai)`;
+                                            badge = (_jsx("span", { className: "absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-white shadow ring-2 ring-white", children: _jsx(X, { className: "h-3.5 w-3.5", strokeWidth: 3 }) }));
+                                        }
+                                        return (_jsx("div", { className: "absolute", style: {
+                                                left: `${node.x}%`,
+                                                top: `${node.y}%`,
+                                                width: `${node.width}%`,
+                                                height: `${node.height}%`,
+                                            }, "aria-label": ariaLabel, children: _jsxs("div", { className: cn('relative h-full w-full rounded-md transition', ring, !ring && 'rounded-md border border-dashed border-slate-300/80 bg-white/40'), children: [_jsx("div", { className: cn('h-full w-full overflow-hidden rounded-md', !ring && 'opacity-60'), children: node.imageUrl ? (_jsx(ResolvedImage, { src: node.imageUrl, alt: node.label, className: "h-full w-full object-contain", draggable: false })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center bg-white/60 text-[10px] text-slate-500", children: node.label })) }), badge] }) }, node.id));
+                                    })] }) }), status === 'correct' ? (_jsxs("div", { className: "mt-3 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm", children: [_jsx("p", { className: "text-[11px] font-semibold uppercase tracking-wide text-emerald-700", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("p", { className: "mt-0.5 text-emerald-800", children: correctNode?.label || correctObjectId || '—' })] })) : status === 'unanswered' ? (_jsxs("div", { className: "mt-3 grid grid-cols-1 gap-2 text-sm sm:grid-cols-2", children: [_jsxs("div", { className: "rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2", children: [_jsx("p", { className: "text-[11px] font-semibold uppercase tracking-wide text-emerald-700", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("p", { className: "mt-0.5 text-emerald-800", children: correctNode?.label || correctObjectId || '—' })] }), _jsxs("div", { className: "rounded-lg border border-slate-200 bg-white px-3 py-2", children: [_jsx("p", { className: "text-[11px] font-semibold uppercase tracking-wide text-slate-500", children: "\u0110\u00E1p \u00E1n c\u1EE7a b\u1EA1n" }), _jsx("p", { className: "mt-0.5 italic text-slate-500", children: "B\u1EA1n ch\u01B0a tr\u1EA3 l\u1EDDi" })] })] })) : (_jsxs("div", { className: "mt-3 grid grid-cols-1 gap-2 text-sm sm:grid-cols-2", children: [_jsxs("div", { className: "rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2", children: [_jsx("p", { className: "text-[11px] font-semibold uppercase tracking-wide text-emerald-700", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("p", { className: "mt-0.5 text-emerald-800", children: correctNode?.label || correctObjectId || '—' })] }), _jsxs("div", { className: "rounded-lg border border-red-200 bg-red-50 px-3 py-2", children: [_jsx("p", { className: "text-[11px] font-semibold uppercase tracking-wide text-red-700", children: "\u0110\u00E1p \u00E1n c\u1EE7a b\u1EA1n" }), _jsx("p", { className: "mt-0.5 text-red-800", children: studentNode?.label || studentObjectId || '—' })] })] }))] }, question.id));
+            })] }));
+}

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

@@ -1 +1,123 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Check as t,X as a}from"lucide-react";import{ResolvedImage as i}from"../../../components/common/ResolvedImage";import l from"../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import{cn as d}from"../../../shared/lib/utils";import{ReviewListeningHeader as s,ListeningLegend as n,getListeningStatus as o}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({zone:l,studentObject:s,correctObject:n,isStudentZone:o,isCorrectZone:c,isStudentCorrect:m}){let u,b="border-2 border-dashed border-slate-300/80 bg-white/30",p=null;return c&&o?(b=m?"border-2 border-emerald-500 bg-emerald-50/70 ring-2 ring-emerald-400/40":"border-2 border-red-500 bg-red-50/70 ring-2 ring-red-400/40",p=e("span",m?{className:"absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500 text-white shadow ring-2 ring-white",children:e(t,{className:"h-3.5 w-3.5",strokeWidth:3})}:{className:"absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-white shadow ring-2 ring-white",children:e(a,{className:"h-3.5 w-3.5",strokeWidth:3})}),u=s):o?(b="border-2 border-red-500 bg-red-50/70 ring-2 ring-red-400/40",p=e("span",{className:"absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-white shadow ring-2 ring-white",children:e(a,{className:"h-3.5 w-3.5",strokeWidth:3})}),u=s):c&&(b="border-2 border-emerald-500 bg-emerald-50/70 ring-2 ring-emerald-400/40",p=e("span",{className:"absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500 text-white shadow ring-2 ring-white",children:e(t,{className:"h-3.5 w-3.5",strokeWidth:3})}),u=n),e("div",{className:"absolute",style:{left:`${l.x}%`,top:`${l.y}%`,width:`${l.width}%`,height:`${l.height}%`},children:r("div",{className:d("relative flex h-full w-full items-center justify-center rounded-md",b),children:[u?.imageUrl?e(i,{src:u.imageUrl,alt:u.label,className:"h-full w-full object-contain p-1",draggable:!1}):e("span",{className:"px-1 text-center text-[10px] font-medium text-slate-500",children:l.label}),p]})})}export function ReviewListenDragObjectsRenderer({partNumber:t,questionCount:a,partName:b,questions:p,studentAnswers:h,rawCorrectAnswerMap:g,isCorrectMap:f,questionScoreMap:x}){return r("div",{className:"flex flex-col gap-6 pt-4",children:[e(l,{partNumber:t,questionCount:a,partName:b,isReviewMode:!0}),p.map(t=>{const a=function(e){let r=e?.payload;if("string"==typeof r)try{r=JSON.parse(r)}catch{return{}}if(!c(r))return{};const t=Array.isArray(r.objectNodes)?r.objectNodes.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:""}]:[]):[],a=Array.isArray(r.dropZones)?r.dropZones.flatMap(e=>c(e)&&"string"==typeof e.id?[{id:e.id,label:"string"==typeof e.label?e.label:"",x:"number"==typeof e.x?e.x:0,y:"number"==typeof e.y?e.y:0,width:"number"==typeof e.width?e.width:0,height:"number"==typeof e.height?e.height:0}]:[]):[];return{backgroundImageUrl:"string"==typeof r.backgroundImageUrl?r.backgroundImageUrl:void 0,objectNodes:t,dropZones:a}}(t.questionGroup),l=a.objectNodes??[],b=a.dropZones??[],p=a.backgroundImageUrl??"",N=m(t.content,"audioUrl")||m(t.content,"audio"),w=m(h[t.id],"objectId"),y=m(h[t.id],"dropZoneId"),j=m(g[t.id],"objectId"),v=m(g[t.id],"dropZoneId"),k=!!w||!!y,S=f[t.id]??null,C=o(S,k),U=x[t.id]??{score:null,maxScore:Number(t.total_points||0)},Z=l.find(e=>e.id===w),I=l.find(e=>e.id===j),A=b.find(e=>e.id===y),q=b.find(e=>e.id===v);return r("div",{className:"rounded-2xl border border-slate-100 bg-slate-50/60 p-4 md:p-5",children:[e(s,{questionNumber:t.question_number,typeLabel:"Listen & drag object",status:C,score:U.score,maxScore:U.maxScore,audioKey:N}),e(n,{showCorrect:!0,showStudent:k&&!S}),e("div",{className:"mt-3 overflow-hidden rounded-xl border border-slate-200 bg-white",children:r("div",{className:"relative w-full",style:{aspectRatio:"16 / 9"},children:[p?e(i,{src:p,alt:"Scene",className:"absolute inset-0 h-full w-full object-contain",draggable:!1}):e("div",{className:"absolute inset-0 flex items-center justify-center text-sm text-slate-400",children:"No scene image"}),b.map(r=>e(u,{zone:r,studentObject:Z,correctObject:I,isStudentZone:r.id===y,isCorrectZone:r.id===v,isStudentCorrect:!!S},r.id))]})}),r("div","correct"===C?{className:"mt-3 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm",children:[e("p",{className:"text-[11px] font-semibold uppercase tracking-wide text-emerald-700",children:"Vị trí đúng"}),r("p",{className:"mt-0.5 text-emerald-800",children:[e("span",{className:"font-medium",children:I?.label||j||"—"}),e("span",{className:"mx-1.5 text-emerald-500",children:"→"}),e("span",{children:q?.label||v||"—"})]})]}:{className:"mt-3 grid grid-cols-1 gap-2 text-sm sm:grid-cols-2",children:[r("div",{className:"rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2",children:[e("p",{className:"text-[11px] font-semibold uppercase tracking-wide text-emerald-700",children:"Vị trí đúng"}),r("p",{className:"mt-0.5 text-emerald-800",children:[e("span",{className:"font-medium",children:I?.label||j||"—"}),e("span",{className:"mx-1.5 text-emerald-500",children:"→"}),e("span",{children:q?.label||v||"—"})]})]}),r("div",{className:d("rounded-lg border px-3 py-2","incorrect"===C?"border-red-200 bg-red-50":"border-slate-200 bg-white"),children:[e("p",{className:d("text-[11px] font-semibold uppercase tracking-wide","incorrect"===C?"text-red-700":"text-slate-500"),children:"Vị trí của bạn"}),k?r("p",{className:"mt-0.5 text-red-800",children:[e("span",{className:"font-medium",children:Z?.label||w||"—"}),e("span",{className:"mx-1.5 text-red-500",children:"→"}),e("span",{children:A?.label||y||"—"})]}):e("p",{className:"mt-0.5 italic text-slate-500",children:"Bạn chưa trả lời"})]})]})]},t.id)})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ReviewListenDragObjectsRenderer
+ *
+ * Renders LISTEN_AND_DRAG_OBJECTS_INTO_SCENE questions in review mode.
+ * Shows the scene background with drop zones outlined, and visualises:
+ *   - The correct object placed in the correct drop zone (emerald)
+ *   - The student's placement (red if incorrect, green if correct)
+ *   - A summary table showing object → drop zone for both student and correct.
+ */
+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))
+        return {};
+    const objectNodes = Array.isArray(payload.objectNodes)
+        ? payload.objectNodes.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 : '',
+                }];
+        })
+        : [];
+    const dropZones = Array.isArray(payload.dropZones)
+        ? payload.dropZones.flatMap((value) => {
+            if (!isRecord(value) || typeof value.id !== 'string')
+                return [];
+            return [{
+                    id: value.id,
+                    label: typeof value.label === 'string' ? value.label : '',
+                    x: typeof value.x === 'number' ? value.x : 0,
+                    y: typeof value.y === 'number' ? value.y : 0,
+                    width: typeof value.width === 'number' ? value.width : 0,
+                    height: typeof value.height === 'number' ? value.height : 0,
+                }];
+        })
+        : [];
+    return {
+        backgroundImageUrl: typeof payload.backgroundImageUrl === 'string' ? payload.backgroundImageUrl : undefined,
+        objectNodes,
+        dropZones,
+    };
+}
+function DropZoneOverlay({ zone, studentObject, correctObject, isStudentZone, isCorrectZone, isStudentCorrect, }) {
+    let frame = 'border-2 border-dashed border-slate-300/80 bg-white/30';
+    let badge = null;
+    let displayObject;
+    if (isCorrectZone && isStudentZone) {
+        frame = isStudentCorrect
+            ? 'border-2 border-emerald-500 bg-emerald-50/70 ring-2 ring-emerald-400/40'
+            : 'border-2 border-red-500 bg-red-50/70 ring-2 ring-red-400/40';
+        badge = isStudentCorrect ? (_jsx("span", { className: "absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500 text-white shadow ring-2 ring-white", children: _jsx(Check, { className: "h-3.5 w-3.5", strokeWidth: 3 }) })) : (_jsx("span", { className: "absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-white shadow ring-2 ring-white", children: _jsx(X, { className: "h-3.5 w-3.5", strokeWidth: 3 }) }));
+        displayObject = studentObject;
+    }
+    else if (isStudentZone) {
+        frame = 'border-2 border-red-500 bg-red-50/70 ring-2 ring-red-400/40';
+        badge = (_jsx("span", { className: "absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-white shadow ring-2 ring-white", children: _jsx(X, { className: "h-3.5 w-3.5", strokeWidth: 3 }) }));
+        displayObject = studentObject;
+    }
+    else if (isCorrectZone) {
+        frame = 'border-2 border-emerald-500 bg-emerald-50/70 ring-2 ring-emerald-400/40';
+        badge = (_jsx("span", { className: "absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500 text-white shadow ring-2 ring-white", children: _jsx(Check, { className: "h-3.5 w-3.5", strokeWidth: 3 }) }));
+        displayObject = correctObject;
+    }
+    return (_jsx("div", { className: "absolute", style: {
+            left: `${zone.x}%`,
+            top: `${zone.y}%`,
+            width: `${zone.width}%`,
+            height: `${zone.height}%`,
+        }, children: _jsxs("div", { className: cn('relative flex h-full w-full items-center justify-center rounded-md', frame), children: [displayObject?.imageUrl ? (_jsx(ResolvedImage, { src: displayObject.imageUrl, alt: displayObject.label, className: "h-full w-full object-contain p-1", draggable: false })) : (_jsx("span", { className: "px-1 text-center text-[10px] font-medium text-slate-500", children: zone.label })), badge] }) }));
+}
+export function ReviewListenDragObjectsRenderer({ 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 objectNodes = payload.objectNodes ?? [];
+                const dropZones = payload.dropZones ?? [];
+                const backgroundUrl = payload.backgroundImageUrl ?? '';
+                const audioKey = readString(question.content, 'audioUrl') ||
+                    readString(question.content, 'audio');
+                const studentObjectId = readString(studentAnswers[question.id], 'objectId');
+                const studentZoneId = readString(studentAnswers[question.id], 'dropZoneId');
+                const correctObjectId = readString(rawCorrectAnswerMap[question.id], 'objectId');
+                const correctZoneId = readString(rawCorrectAnswerMap[question.id], 'dropZoneId');
+                const hasAnswered = !!studentObjectId || !!studentZoneId;
+                const isCorrect = isCorrectMap[question.id] ?? null;
+                const status = getListeningStatus(isCorrect, hasAnswered);
+                const scoreInfo = questionScoreMap[question.id] ?? {
+                    score: null,
+                    maxScore: Number(question.total_points || 0),
+                };
+                const studentObject = objectNodes.find((o) => o.id === studentObjectId);
+                const correctObject = objectNodes.find((o) => o.id === correctObjectId);
+                const studentZone = dropZones.find((z) => z.id === studentZoneId);
+                const correctZone = dropZones.find((z) => z.id === correctZoneId);
+                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 & drag object", status: status, score: scoreInfo.score, maxScore: scoreInfo.maxScore, audioKey: audioKey }), _jsx(ListeningLegend, { showCorrect: true, showStudent: hasAnswered && !isCorrect }), _jsx("div", { className: "mt-3 overflow-hidden rounded-xl border border-slate-200 bg-white", children: _jsxs("div", { className: "relative w-full", style: { aspectRatio: '16 / 9' }, children: [backgroundUrl ? (_jsx(ResolvedImage, { src: backgroundUrl, alt: "Scene", className: "absolute inset-0 h-full w-full object-contain", draggable: false })) : (_jsx("div", { className: "absolute inset-0 flex items-center justify-center text-sm text-slate-400", children: "No scene image" })), dropZones.map((zone) => (_jsx(DropZoneOverlay, { zone: zone, studentObject: studentObject, correctObject: correctObject, isStudentZone: zone.id === studentZoneId, isCorrectZone: zone.id === correctZoneId, isStudentCorrect: !!isCorrect }, zone.id)))] }) }), status === 'correct' ? (_jsxs("div", { className: "mt-3 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm", children: [_jsx("p", { className: "text-[11px] font-semibold uppercase tracking-wide text-emerald-700", children: "V\u1ECB tr\u00ED \u0111\u00FAng" }), _jsxs("p", { className: "mt-0.5 text-emerald-800", children: [_jsx("span", { className: "font-medium", children: correctObject?.label || correctObjectId || '—' }), _jsx("span", { className: "mx-1.5 text-emerald-500", children: "\u2192" }), _jsx("span", { children: correctZone?.label || correctZoneId || '—' })] })] })) : (_jsxs("div", { className: "mt-3 grid grid-cols-1 gap-2 text-sm sm:grid-cols-2", children: [_jsxs("div", { className: "rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2", children: [_jsx("p", { className: "text-[11px] font-semibold uppercase tracking-wide text-emerald-700", children: "V\u1ECB tr\u00ED \u0111\u00FAng" }), _jsxs("p", { className: "mt-0.5 text-emerald-800", children: [_jsx("span", { className: "font-medium", children: correctObject?.label || correctObjectId || '—' }), _jsx("span", { className: "mx-1.5 text-emerald-500", children: "\u2192" }), _jsx("span", { children: correctZone?.label || correctZoneId || '—' })] })] }), _jsxs("div", { className: cn('rounded-lg border px-3 py-2', status === 'incorrect'
+                                        ? 'border-red-200 bg-red-50'
+                                        : 'border-slate-200 bg-white'), children: [_jsx("p", { className: cn('text-[11px] font-semibold uppercase tracking-wide', status === 'incorrect' ? 'text-red-700' : 'text-slate-500'), children: "V\u1ECB tr\u00ED c\u1EE7a b\u1EA1n" }), hasAnswered ? (_jsxs("p", { className: "mt-0.5 text-red-800", children: [_jsx("span", { className: "font-medium", children: studentObject?.label || studentObjectId || '—' }), _jsx("span", { className: "mx-1.5 text-red-500", children: "\u2192" }), _jsx("span", { children: studentZone?.label || studentZoneId || '—' })] })) : (_jsx("p", { className: "mt-0.5 italic text-slate-500", children: "B\u1EA1n ch\u01B0a tr\u1EA3 l\u1EDDi" }))] })] }))] }, question.id));
+            })] }));
+}

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

@@ -1 +1,104 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Check as r,Volume2 as n,X as a,Pause as s,Play as l}from"lucide-react";import{useCallback as i,useEffect as d,useRef as c,useState as o}from"react";import{Badge as u}from"../../../components/ui/badge";import{cn as m}from"../../../shared/lib/utils";import{usePresignedFileUrl as x}from"../../../shared/lib/hooks/usePresignedFileUrl";export function getListeningStatus(e,t){return t?!0===e?"correct":!1===e?"incorrect":"unanswered":"unanswered"}export function ListeningStatusBadge({status:n}){return t("span","correct"===n?{className:"inline-flex items-center gap-1 rounded-full border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-xs font-semibold text-emerald-700",children:[e("span",{className:"flex h-4 w-4 items-center justify-center rounded-full bg-emerald-500",children:e(r,{className:"h-2.5 w-2.5 text-white",strokeWidth:3})}),"Đúng"]}:"incorrect"===n?{className:"inline-flex items-center gap-1 rounded-full border border-red-200 bg-red-50 px-2 py-0.5 text-xs font-semibold text-red-700",children:[e("span",{className:"flex h-4 w-4 items-center justify-center rounded-full bg-red-500",children:e(a,{className:"h-2.5 w-2.5 text-white",strokeWidth:3})}),"Sai"]}:{className:"inline-flex items-center gap-1 rounded-full border border-slate-200 bg-slate-50 px-2 py-0.5 text-xs font-semibold text-slate-600",children:[e("span",{className:"flex h-4 w-4 items-center justify-center rounded-full bg-slate-400",children:e(a,{className:"h-2.5 w-2.5 text-white",strokeWidth:3})}),"Chưa trả lời"]})}export function ListeningScorePill({score:r,maxScore:n,status:a}){const s=null==r?"—":r;return t("div",{className:m("flex flex-shrink-0 items-baseline gap-1 rounded-full border px-3 py-1","correct"===a?"border-emerald-200 bg-emerald-50 text-emerald-700":"incorrect"===a?"border-red-200 bg-red-50 text-red-700":"border-slate-200 bg-slate-50 text-slate-600"),children:[e("span",{className:"text-sm font-bold leading-none",children:s}),t("span",{className:"text-xs font-medium opacity-80",children:["/ ",n," điểm"]})]})}function h(e){if(!isFinite(e))return"0:00";return`${Math.floor(e/60)}:${Math.floor(e%60).toString().padStart(2,"0")}`}export function ListeningAudioBar({audioKey:r}){const{previewUrl:a}=x(r),u=c(null),[m,p]=o(!1),[f,b]=o(0),[g,w]=o(0),N=i(()=>{const e=u.current;e&&(m?e.pause():e.play().catch(e=>{console.warn("Audio play request was interrupted:",e)}))},[m]),y=i(e=>{const t=u.current;if(!t)return;const r=Number(e.target.value);t.currentTime=r,b(r)},[]);return d(()=>{p(!1),b(0)},[a]),t("div",{className:"flex items-center gap-3 rounded-lg border border-slate-200 bg-white px-3 py-2",children:[a&&e("audio",{ref:u,src:a,onPlay:()=>p(!0),onPause:()=>p(!1),onEnded:()=>p(!1),onTimeUpdate:e=>b(e.currentTarget.currentTime),onLoadedMetadata:e=>w(e.currentTarget.duration),preload:"metadata"}),e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-blue-50 text-blue-600",children:e(n,{className:"h-4 w-4"})}),e("button",{type:"button",onClick:N,disabled:!a,className:"flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-white shadow-sm transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-40","aria-label":m?"Tạm dừng":"Phát âm thanh câu hỏi",children:m?e(s,{className:"h-4 w-4"}):e(l,{className:"ml-0.5 h-4 w-4"})}),e("span",{className:"w-10 text-xs tabular-nums text-slate-500",children:h(f)}),e("input",{type:"range",min:0,max:g||0,step:.01,value:f,onChange:y,className:"h-1 flex-1 cursor-pointer appearance-none rounded-full bg-slate-200 accent-blue-600","aria-label":"Tua âm thanh"}),e("span",{className:"w-10 text-right text-xs tabular-nums text-slate-500",children:h(g)})]})}export function ReviewListeningHeader({questionNumber:r,typeLabel:n,status:a,score:s,maxScore:l,audioKey:i,title:d,rightExtra:c}){return t("div",{className:"mb-3 space-y-3",children:[t("div",{className:"flex items-start gap-3",children:[e("span",{className:"mt-0.5 flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-sm font-bold text-white",children:r}),t("div",{className:"min-w-0 flex-1",children:[t("div",{className:"flex flex-wrap items-center gap-2",children:[e(u,{variant:"secondary",className:"bg-slate-100 text-slate-700 hover:bg-slate-100",children:n}),e(ListeningStatusBadge,{status:a}),c]}),d?e("p",{className:"mt-1.5 text-sm font-medium text-slate-700",children:d}):null]}),e(ListeningScorePill,{score:s,maxScore:l,status:a})]}),i?e(ListeningAudioBar,{audioKey:i}):null]})}export function ListeningLegend({showCorrect:r=!0,showStudent:n=!0}){return r||n?t("div",{className:"flex flex-wrap items-center gap-3 text-xs text-slate-600",children:[r?t("span",{className:"inline-flex items-center gap-1.5",children:[e("span",{className:"inline-block h-3 w-3 rounded-full border-2 border-emerald-500 bg-emerald-50"}),"Đáp án đúng"]}):null,n?t("span",{className:"inline-flex items-center gap-1.5",children:[e("span",{className:"inline-block h-3 w-3 rounded-full border-2 border-red-500 bg-red-50"}),"Đáp án của bạn"]}):null]}):null}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ReviewListeningHeader
+ *
+ * Shared per-question header for the three listening question reviewers:
+ *   - LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE
+ *   - LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP
+ *   - LISTEN_AND_DRAG_OBJECTS_INTO_SCENE
+ *
+ * Renders question number, type badge, textual+icon correctness label, score
+ * pill, a compact audio prompt bar (speaker icon, no recording chrome) and a
+ * legend for the visualization (Correct / Your answer).
+ */
+import { Check, Volume2, X, Pause, Play } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Badge } from '../../../components/ui/badge';
+import { cn } from '../../../shared/lib/utils';
+import { usePresignedFileUrl } from '../../../shared/lib/hooks/usePresignedFileUrl';
+export function getListeningStatus(isCorrect, hasStudentAnswer) {
+    if (!hasStudentAnswer)
+        return 'unanswered';
+    if (isCorrect === true)
+        return 'correct';
+    if (isCorrect === false)
+        return 'incorrect';
+    return 'unanswered';
+}
+/**
+ * Combined icon + textual correctness badge. Provides redundancy beyond colour
+ * for accessibility / quick scanning.
+ */
+export function ListeningStatusBadge({ status }) {
+    if (status === 'correct') {
+        return (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-xs font-semibold text-emerald-700", children: [_jsx("span", { className: "flex h-4 w-4 items-center justify-center rounded-full bg-emerald-500", children: _jsx(Check, { className: "h-2.5 w-2.5 text-white", strokeWidth: 3 }) }), "\u0110\u00FAng"] }));
+    }
+    if (status === 'incorrect') {
+        return (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-red-200 bg-red-50 px-2 py-0.5 text-xs font-semibold text-red-700", children: [_jsx("span", { className: "flex h-4 w-4 items-center justify-center rounded-full bg-red-500", children: _jsx(X, { className: "h-2.5 w-2.5 text-white", strokeWidth: 3 }) }), "Sai"] }));
+    }
+    return (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-slate-200 bg-slate-50 px-2 py-0.5 text-xs font-semibold text-slate-600", children: [_jsx("span", { className: "flex h-4 w-4 items-center justify-center rounded-full bg-slate-400", children: _jsx(X, { className: "h-2.5 w-2.5 text-white", strokeWidth: 3 }) }), "Ch\u01B0a tr\u1EA3 l\u1EDDi"] }));
+}
+export function ListeningScorePill({ score, maxScore, status }) {
+    const tone = 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-600';
+    const display = score === null || score === undefined ? '—' : score;
+    return (_jsxs("div", { className: cn('flex flex-shrink-0 items-baseline gap-1 rounded-full border px-3 py-1', tone), children: [_jsx("span", { className: "text-sm font-bold leading-none", children: display }), _jsxs("span", { className: "text-xs font-medium opacity-80", children: ["/ ", maxScore, " \u0111i\u1EC3m"] })] }));
+}
+function formatTime(s) {
+    if (!isFinite(s))
+        return '0:00';
+    const m = Math.floor(s / 60);
+    const sec = Math.floor(s % 60).toString().padStart(2, '0');
+    return `${m}:${sec}`;
+}
+/**
+ * Minimal audio bar tailored for listening prompts in review mode.
+ * Uses a speaker icon (not a microphone) so it reads as "audio to listen to",
+ * not "your recording".
+ */
+export function ListeningAudioBar({ audioKey }) {
+    const { previewUrl } = usePresignedFileUrl(audioKey);
+    const audioRef = useRef(null);
+    const [isPlaying, setPlaying] = useState(false);
+    const [time, setTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const toggle = useCallback(() => {
+        const el = audioRef.current;
+        if (!el)
+            return;
+        if (isPlaying) {
+            el.pause();
+        }
+        else {
+            el.play().catch((err) => {
+                console.warn('Audio play request was interrupted:', err);
+            });
+        }
+    }, [isPlaying]);
+    const seek = useCallback((e) => {
+        const el = audioRef.current;
+        if (!el)
+            return;
+        const v = Number(e.target.value);
+        el.currentTime = v;
+        setTime(v);
+    }, []);
+    useEffect(() => {
+        setPlaying(false);
+        setTime(0);
+    }, [previewUrl]);
+    return (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-slate-200 bg-white px-3 py-2", children: [previewUrl && (_jsx("audio", { ref: audioRef, src: previewUrl, onPlay: () => setPlaying(true), onPause: () => setPlaying(false), onEnded: () => setPlaying(false), onTimeUpdate: (e) => setTime(e.currentTarget.currentTime), onLoadedMetadata: (e) => setDuration(e.currentTarget.duration), preload: "metadata" })), _jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-blue-50 text-blue-600", children: _jsx(Volume2, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: toggle, disabled: !previewUrl, className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-white shadow-sm transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-40", "aria-label": isPlaying ? 'Tạm dừng' : 'Phát âm thanh câu hỏi', children: isPlaying ? _jsx(Pause, { className: "h-4 w-4" }) : _jsx(Play, { className: "ml-0.5 h-4 w-4" }) }), _jsx("span", { className: "w-10 text-xs tabular-nums text-slate-500", children: formatTime(time) }), _jsx("input", { type: "range", min: 0, max: duration || 0, step: 0.01, value: time, onChange: seek, className: "h-1 flex-1 cursor-pointer appearance-none rounded-full bg-slate-200 accent-blue-600", "aria-label": "Tua \u00E2m thanh" }), _jsx("span", { className: "w-10 text-right text-xs tabular-nums text-slate-500", children: formatTime(duration) })] }));
+}
+export function ReviewListeningHeader({ questionNumber, typeLabel, status, score, maxScore, audioKey, title, rightExtra, }) {
+    return (_jsxs("div", { className: "mb-3 space-y-3", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("span", { className: "mt-0.5 flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-sm font-bold text-white", children: questionNumber }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Badge, { variant: "secondary", className: "bg-slate-100 text-slate-700 hover:bg-slate-100", children: typeLabel }), _jsx(ListeningStatusBadge, { status: status }), rightExtra] }), title ? (_jsx("p", { className: "mt-1.5 text-sm font-medium text-slate-700", children: title })) : null] }), _jsx(ListeningScorePill, { score: score, maxScore: maxScore, status: status })] }), audioKey ? _jsx(ListeningAudioBar, { audioKey: audioKey }) : null] }));
+}
+/** Small legend chip rendered above the visualization. Shown only when relevant. */
+export function ListeningLegend({ showCorrect = true, showStudent = true, }) {
+    if (!showCorrect && !showStudent)
+        return null;
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-3 text-xs text-slate-600", children: [showCorrect ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("span", { className: "inline-block h-3 w-3 rounded-full border-2 border-emerald-500 bg-emerald-50" }), "\u0110\u00E1p \u00E1n \u0111\u00FAng"] })) : null, showStudent ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("span", { className: "inline-block h-3 w-3 rounded-full border-2 border-red-500 bg-red-50" }), "\u0110\u00E1p \u00E1n c\u1EE7a b\u1EA1n"] })) : null] }));
+}