@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

package/dist/components/questions/types/listen-and-choose-objects-in-scene/register.js

@@ -1 +1,100 @@
-import{ListenAndChooseObjectsInSceneCreator as e}from"./ListenAndChooseObjectsInSceneCreator";export const listenAndChooseObjectsInSceneRegistration={component:e,transformInitialData:e=>{if(!e)return;const t=e,o=t?.questionGroup?.payload?.backgroundImageUrl||t?.answer?.backgroundImageUrl||t?.content?.backgroundImageUrl||t?.backgroundImageUrl||"",n=t?.questionGroup?.payload?.objectNodes?.length>0&&t?.questionGroup?.payload?.objectNodes||t?.answer?.objectNodes?.length>0&&t?.answer?.objectNodes||t?.content?.objectNodes?.length>0&&t?.content?.objectNodes||t?.objectNodes||[],a=t?.content?.audioUrl||t?.answer?.audioUrl||t?.audioUrl||"",r=t?.answer?.correctObjectId||t?.correctAnswer?.objectId||t?.answer?.objectId||t?.content?.correctObjectId||t?.correctObjectId||"",c=t?.points||t?.answer?.points||1,s=t?.explanation||t?.answer?.explanation||t?.content?.explanation||"",i=t?.content?.isBackup||t?.isBackup||!1;return console.log("[LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE register] transformInitialData:",{correctObjectId:r,audioUrl:a?"✓":"✗",backgroundImageUrl:o?"✓":"✗",objectNodesCount:n?.length||0,sources:{"answer.correctObjectId":t?.answer?.correctObjectId,"correctAnswer.objectId":t?.correctAnswer?.objectId,"answer.objectId":t?.answer?.objectId}}),{audioUrl:a,backgroundImageUrl:o,objectNodes:n,correctObjectId:r,points:c,explanation:s,isBackup:i,isCompleted:t?.isCompleted}},getExtraProps:e=>({groups:e.groups,questionIndexInPart:e.questionIndexInPart,partId:e.partId,onUnsavedChangesChange:e.onUnsavedChangesChange,validationRef:e.validationRef}),wrapOnSave:(e,t)=>({type:t.questionType,content:{..."object"==typeof t.state.content&&null!==t.state.content?t.state.content:{},isBackup:e.isBackup||!1},answer:{audioUrl:e.audioUrl,backgroundImageUrl:e.backgroundImageUrl,objectNodes:e.objectNodes,correctObjectId:e.correctObjectId,groupNumber:e.groupNumber},points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,explanation:e?.explanation||""}),wrapOnChange:(e,t)=>({type:t.questionType,content:{..."object"==typeof t.state.content&&null!==t.state.content?t.state.content:{},isBackup:e.isBackup||!1},answer:{audioUrl:e.audioUrl,backgroundImageUrl:e.backgroundImageUrl,objectNodes:e.objectNodes,correctObjectId:e.correctObjectId,groupNumber:e.groupNumber},points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,explanation:e?.explanation||""})};
+import { ListenAndChooseObjectsInSceneCreator } from './ListenAndChooseObjectsInSceneCreator';
+export const listenAndChooseObjectsInSceneRegistration = {
+    component: ListenAndChooseObjectsInSceneCreator,
+    transformInitialData: (initialData) => {
+        if (!initialData)
+            return undefined;
+        const d = initialData;
+        // Group scene data
+        // Use data from questionGroup.payload first (API format), fallback to answer (reverse-transformed)
+        const backgroundImageUrl = d?.questionGroup?.payload?.backgroundImageUrl ||
+            d?.answer?.backgroundImageUrl ||
+            d?.content?.backgroundImageUrl ||
+            d?.backgroundImageUrl || '';
+        const objectNodes = (d?.questionGroup?.payload?.objectNodes?.length > 0 && d?.questionGroup?.payload?.objectNodes) ||
+            (d?.answer?.objectNodes?.length > 0 && d?.answer?.objectNodes) ||
+            (d?.content?.objectNodes?.length > 0 && d?.content?.objectNodes) ||
+            d?.objectNodes || [];
+        // Question specific data - prioritize content (API) then answer (reverse-transformed)
+        const audioUrl = d?.content?.audioUrl || d?.answer?.audioUrl || d?.audioUrl || '';
+        // Correct object ID from multiple possible locations
+        // After reverse transform: answer.correctObjectId has the value
+        // From API directly: correctAnswer.objectId has the value
+        const correctObjectId = d?.answer?.correctObjectId ||
+            d?.correctAnswer?.objectId ||
+            d?.answer?.objectId ||
+            d?.content?.correctObjectId ||
+            d?.correctObjectId || '';
+        // Points and explanation - top-level fields take priority (set by transformApiQuestionToFrontend)
+        const points = d?.points || d?.answer?.points || 1;
+        const explanation = d?.explanation || d?.answer?.explanation || d?.content?.explanation || '';
+        const isBackup = d?.content?.isBackup || d?.isBackup || false;
+        console.log('[LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE register] transformInitialData:', {
+            correctObjectId,
+            audioUrl: audioUrl ? '✓' : '✗',
+            backgroundImageUrl: backgroundImageUrl ? '✓' : '✗',
+            objectNodesCount: objectNodes?.length || 0,
+            sources: {
+                'answer.correctObjectId': d?.answer?.correctObjectId,
+                'correctAnswer.objectId': d?.correctAnswer?.objectId,
+                'answer.objectId': d?.answer?.objectId,
+            }
+        });
+        // Create a lean, flat, structure for the Creator component
+        return {
+            audioUrl,
+            backgroundImageUrl,
+            objectNodes,
+            correctObjectId,
+            points,
+            explanation,
+            isBackup,
+            isCompleted: d?.isCompleted
+        };
+    },
+    getExtraProps: (ctx) => ({
+        groups: ctx.groups,
+        questionIndexInPart: ctx.questionIndexInPart,
+        partId: ctx.partId,
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+    }),
+    wrapOnSave: (data, ctx) => ({
+        type: ctx.questionType,
+        content: {
+            ...(typeof ctx.state.content === 'object' && ctx.state.content !== null ? ctx.state.content : {}),
+            isBackup: data.isBackup || false,
+        },
+        answer: {
+            audioUrl: data.audioUrl,
+            backgroundImageUrl: data.backgroundImageUrl,
+            objectNodes: data.objectNodes,
+            correctObjectId: data.correctObjectId,
+            groupNumber: data.groupNumber,
+        },
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        explanation: data?.explanation || '',
+    }),
+    wrapOnChange: (data, ctx) => ({
+        type: ctx.questionType,
+        content: {
+            ...(typeof ctx.state.content === 'object' && ctx.state.content !== null ? ctx.state.content : {}),
+            isBackup: data.isBackup || false,
+        },
+        answer: {
+            audioUrl: data.audioUrl,
+            backgroundImageUrl: data.backgroundImageUrl,
+            objectNodes: data.objectNodes,
+            correctObjectId: data.correctObjectId,
+            groupNumber: data.groupNumber,
+        },
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        explanation: data?.explanation || '',
+    }),
+};

package/dist/components/questions/types/listen-and-choose-objects-in-scene/transform.js

@@ -1 +1,33 @@
-export const transformListenAndChooseObjectsInScene=e=>{const r=e.answer,o={};r?.audioUrl&&(o.audioUrl=r.audioUrl),void 0!==r.isBackup&&(o.isBackup=r.isBackup);const a={backgroundImageUrl:r.backgroundImageUrl,objectNodes:(r.objectNodes||[]).map(e=>({id:e.id,imageUrl:e.imageUrl,label:e.label,x:e.x,y:e.y,width:e.width,height:e.height}))};return{apiContent:o,apiCorrectAnswer:{objectId:r.correctObjectId||""},sceneData:a,groupNumber:r.groupNumber||1}};
+export const transformListenAndChooseObjectsInScene = (question) => {
+    const answerData = question.answer;
+    const apiContent = {};
+    if (answerData?.audioUrl) {
+        apiContent.audioUrl = answerData.audioUrl;
+    }
+    if (answerData.isBackup !== undefined) {
+        apiContent.isBackup = answerData.isBackup;
+    }
+    const sceneData = {
+        backgroundImageUrl: answerData.backgroundImageUrl,
+        objectNodes: (answerData.objectNodes || []).map((node) => ({
+            id: node.id,
+            imageUrl: node.imageUrl,
+            label: node.label,
+            x: node.x,
+            y: node.y,
+            width: node.width,
+            height: node.height,
+        })),
+    };
+    const apiCorrectAnswer = {
+        objectId: answerData.correctObjectId || '',
+    };
+    // Get group number directly from the component payload
+    const groupNumber = answerData.groupNumber || 1;
+    return {
+        apiContent,
+        apiCorrectAnswer,
+        sceneData,
+        groupNumber,
+    };
+};

package/dist/components/questions/types/listen-and-drag-objects-into-scene/ListenAndDragObjectsIntoSceneClient.js

@@ -1 +1,106 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as d,useEffect as l}from"react";import{Check as n,X as t,CircleHelp as a,Volume2 as i,Target as o}from"lucide-react";import{usePresignedFileUrl as s}from"../../../../shared/lib/hooks";import{cn as c}from"../../../../shared/lib/utils";function g({url:r,alt:d}){const{previewUrl:l}=s(r);return l?e("img",{src:l,alt:d,className:"h-full w-full object-contain pointer-events-none",draggable:!1}):e("div",{className:"flex h-full w-full items-center justify-center text-xs text-gray-400",children:d})}export function ListenAndDragObjectsIntoSceneClient({questionData:b,onSubmit:m,isReviewMode:h=!1,userAnswer:u,correctAnswer:f,explanation:x}){const[p,v]=d(u?.objectId||""),[N,w]=d(u?.dropZoneId||""),[y,j]=d(null),{previewUrl:I,isLoading:k}=s(b.backgroundImageUrl||""),{previewUrl:Z}=s(b.audioUrl||"");l(()=>{u?.objectId&&v(u.objectId),u?.dropZoneId&&w(u.dropZoneId)},[u]);const D=e=>{h||j(e)},U=e=>{e.preventDefault()},C=()=>{j(null)},S=e=>{h||v(e)},$=""!==p&&""!==N,A=h&&f&&p===f.objectId&&N===f.dropZoneId,M=b.objectNodes.find(e=>e.id===p),E=b.dropZones.find(e=>e.id===N);return r("div",{className:"space-y-4",children:[b.isBackup&&r("div",{className:"inline-flex self-center items-center gap-1.5 px-3 py-1.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 text-xs font-bold shadow-sm",children:[e("span",{children:"🔄"})," Câu hỏi dự phòng"]}),r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:[r("div",{className:"flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3",children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-amber-600 text-white shadow-sm",children:e(a,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:"Nghe và kéo thả đối tượng vào cảnh"})]}),h&&$&&r("div",{className:c("flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold",A?"bg-green-100 text-green-700":"bg-red-100 text-red-700"),children:[e(A?n:t,{className:"h-3.5 w-3.5"}),A?"Đúng":"Sai"]})]}),r("div",{className:"space-y-5 p-5",children:[Z&&r("div",{className:"flex items-center gap-3 rounded-lg border border-orange-100 bg-gradient-to-r from-orange-50 to-amber-50 p-3",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-orange-500 text-white",children:e(i,{className:"h-4 w-4"})}),e("audio",{controls:!0,className:"h-8 w-full",src:Z,children:"Trình duyệt không hỗ trợ audio."})]}),r("div",{className:"flex gap-4",children:[e("div",{className:"flex w-24 flex-shrink-0 flex-col gap-2",children:b.objectNodes.slice(0,Math.ceil(b.objectNodes.length/2)).map(r=>{const d=p===r.id,l=y===r.id,n=h&&f?.objectId===r.id;return e("div",{draggable:!h,onDragStart:()=>D(r.id),onDragEnd:C,onClick:()=>S(r.id),className:c("flex h-20 w-full cursor-grab items-center justify-center rounded-lg border-2 bg-white p-1 transition-all",l&&"opacity-50 scale-95",d&&!h&&"border-orange-500 ring-2 ring-orange-200 shadow-md",n&&"border-green-500 ring-2 ring-green-200",!d&&!n&&"border-gray-200 hover:border-orange-300",h&&"cursor-default"),title:r.label,children:e(g,{url:r.imageUrl,alt:r.label})},r.id)})}),r("div",{className:"flex-1 overflow-hidden rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100",children:[e("div",{className:"border-b border-gray-100 px-3 py-1.5",children:r("div",{className:"flex items-center gap-1.5",children:[e("div",{className:"h-2 w-2 rounded-full bg-red-400"}),e("div",{className:"h-2 w-2 rounded-full bg-yellow-400"}),e("div",{className:"h-2 w-2 rounded-full bg-green-400"}),e("span",{className:"ml-2 text-xs font-medium text-gray-500",children:"Scene"})]})}),e("div",{className:"relative p-2",children:k?e("div",{className:"flex h-64 items-center justify-center",children:e("div",{className:"h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-orange-500"})}):I?r("div",{className:"relative w-full",children:[e("img",{src:I,alt:"Scene background",className:"w-full rounded-md object-contain",draggable:!1}),b.dropZones.map(d=>{const l=N===d.id,a=h&&f?.dropZoneId===d.id,i=h&&l&&f?.dropZoneId!==d.id;return r("div",{onDragOver:U,onDrop:()=>{return e=d.id,void(!h&&y&&(v(y),w(e),m?.({objectId:y,dropZoneId:e}),j(null)));var e},onClick:()=>{return e=d.id,void(!h&&p&&(w(e),m?.({objectId:p,dropZoneId:e})));var e},className:c("absolute rounded-lg border-2 border-dashed transition-all",!h&&!l&&"border-blue-300/60 bg-blue-100/20 hover:border-blue-400 hover:bg-blue-200/30 cursor-pointer",!h&&l&&"border-orange-500 bg-orange-100/40 ring-2 ring-orange-200",a&&"border-green-500 bg-green-100/40 ring-2 ring-green-200",i&&"border-red-500 bg-red-100/40 ring-2 ring-red-200",h&&!a&&!i&&"border-blue-300/40 bg-blue-50/10"),style:{left:`${d.x}%`,top:`${d.y}%`,width:`${d.width}%`,height:`${d.height}%`},title:d.label,children:[e("div",{className:"flex h-full w-full items-center justify-center",children:l&&M?e("div",{className:"h-full w-full p-1",children:e(g,{url:M.imageUrl,alt:M.label})}):e(o,{className:"h-4 w-4 text-blue-400/50"})}),h&&(a||i)&&e("div",{className:c("absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full shadow-md z-20",a?"bg-green-500":"bg-red-500"),children:e(a?n:t,{className:"h-3 w-3 text-white"})})]},d.id)})]}):e("div",{className:"flex h-64 items-center justify-center text-sm text-gray-400",children:"Chưa có ảnh nền"})})]}),e("div",{className:"flex w-24 flex-shrink-0 flex-col gap-2",children:b.objectNodes.slice(Math.ceil(b.objectNodes.length/2)).map(r=>{const d=p===r.id,l=y===r.id,n=h&&f?.objectId===r.id;return e("div",{draggable:!h,onDragStart:()=>D(r.id),onDragEnd:C,onClick:()=>S(r.id),className:c("flex h-20 w-full cursor-grab items-center justify-center rounded-lg border-2 bg-white p-1 transition-all",l&&"opacity-50 scale-95",d&&!h&&"border-orange-500 ring-2 ring-orange-200 shadow-md",n&&"border-green-500 ring-2 ring-green-200",!d&&!n&&"border-gray-200 hover:border-orange-300",h&&"cursor-default"),title:r.label,children:e(g,{url:r.imageUrl,alt:r.label})},r.id)})})]}),$&&M&&E&&r("div",{className:c("flex items-center gap-2 rounded-lg border p-3",h?A?"border-green-200 bg-green-50":"border-red-200 bg-red-50":"border-orange-200 bg-orange-50"),children:[r("span",{className:"text-sm font-medium text-gray-700",children:["Đã đặt: ",e("strong",{children:M.label})," → ",e("strong",{children:E.label})]}),h&&e("span",{className:c("text-xs font-semibold",A?"text-green-600":"text-red-600"),children:A?"✓ Chính xác":"✗ Không chính xác"})]}),!h&&!$&&r("div",{className:"flex items-center gap-2 rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3",children:[e("div",{className:"flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white",children:e("span",{className:"text-xs font-bold",children:"!"})}),e("span",{className:"text-sm text-amber-800",children:"Nghe audio và kéo đối tượng phù hợp vào vùng thả trên cảnh"})]}),h&&x&&r("div",{className:"rounded-lg border border-indigo-200 bg-indigo-50 p-4",children:[e("p",{className:"text-sm font-semibold text-indigo-800",children:"Giải thích:"}),e("p",{className:"mt-1 text-sm text-indigo-700",children:x})]})]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Check, X, CircleHelp, Volume2, Target } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { cn } from '../../../../shared/lib/utils';
+/**
+ * PresignedImage helper
+ */
+function PresignedImage({ url, alt }) {
+    const { previewUrl } = usePresignedFileUrl(url);
+    if (!previewUrl)
+        return _jsx("div", { className: "flex h-full w-full items-center justify-center text-xs text-gray-400", children: alt });
+    return (_jsx("img", { src: previewUrl, alt: alt, className: "h-full w-full object-contain pointer-events-none", draggable: false }));
+}
+/**
+ * ListenAndDragObjectsIntoSceneClient
+ *
+ * Student/preview view for the "Listen and Drag Objects into Scene" question type.
+ * Displays a background scene with drop zones overlay, and sidebar with draggable objects.
+ * Student listens to audio and drags the correct object to the correct drop zone.
+ */
+export function ListenAndDragObjectsIntoSceneClient({ questionData, onSubmit, isReviewMode = false, userAnswer, correctAnswer, explanation, }) {
+    // State
+    const [selectedObjectId, setSelectedObjectId] = useState(userAnswer?.objectId || '');
+    const [selectedDropZoneId, setSelectedDropZoneId] = useState(userAnswer?.dropZoneId || '');
+    const [draggedObjectId, setDraggedObjectId] = useState(null);
+    // Presigned URLs
+    const { previewUrl: backgroundUrl, isLoading: bgLoading } = usePresignedFileUrl(questionData.backgroundImageUrl || '');
+    const { previewUrl: audioUrl } = usePresignedFileUrl(questionData.audioUrl || '');
+    // Sync userAnswer
+    useEffect(() => {
+        if (userAnswer?.objectId) {
+            setSelectedObjectId(userAnswer.objectId);
+        }
+        if (userAnswer?.dropZoneId) {
+            setSelectedDropZoneId(userAnswer.dropZoneId);
+        }
+    }, [userAnswer]);
+    // Drag handlers
+    const handleDragStart = (objectId) => {
+        if (isReviewMode)
+            return;
+        setDraggedObjectId(objectId);
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+    };
+    const handleDrop = (dropZoneId) => {
+        if (isReviewMode || !draggedObjectId)
+            return;
+        setSelectedObjectId(draggedObjectId);
+        setSelectedDropZoneId(dropZoneId);
+        onSubmit?.({ objectId: draggedObjectId, dropZoneId });
+        setDraggedObjectId(null);
+    };
+    const handleDragEnd = () => {
+        setDraggedObjectId(null);
+    };
+    // Click-based fallback for selecting
+    const handleObjectClick = (objectId) => {
+        if (isReviewMode)
+            return;
+        setSelectedObjectId(objectId);
+    };
+    const handleDropZoneClick = (dropZoneId) => {
+        if (isReviewMode || !selectedObjectId)
+            return;
+        setSelectedDropZoneId(dropZoneId);
+        onSubmit?.({ objectId: selectedObjectId, dropZoneId });
+    };
+    const hasAnswered = selectedObjectId !== '' && selectedDropZoneId !== '';
+    const isAnswerCorrect = isReviewMode &&
+        correctAnswer &&
+        selectedObjectId === correctAnswer.objectId &&
+        selectedDropZoneId === correctAnswer.dropZoneId;
+    const selectedObject = questionData.objectNodes.find((n) => n.id === selectedObjectId);
+    const selectedDropZone = questionData.dropZones.find((z) => z.id === selectedDropZoneId);
+    return (_jsxs("div", { className: "space-y-4", children: [questionData.isBackup && (_jsxs("div", { className: "inline-flex self-center items-center gap-1.5 px-3 py-1.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 text-xs font-bold shadow-sm", children: [_jsx("span", { children: "\uD83D\uDD04" }), " C\u00E2u h\u1ECFi d\u1EF1 ph\u00F2ng"] })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-amber-600 text-white shadow-sm", children: _jsx(CircleHelp, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Nghe v\u00E0 k\u00E9o th\u1EA3 \u0111\u1ED1i t\u01B0\u1EE3ng v\u00E0o c\u1EA3nh" })] }), isReviewMode && hasAnswered && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isAnswerCorrect
+                                    ? 'bg-green-100 text-green-700'
+                                    : 'bg-red-100 text-red-700'), children: [isAnswerCorrect ? (_jsx(Check, { className: "h-3.5 w-3.5" })) : (_jsx(X, { className: "h-3.5 w-3.5" })), isAnswerCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "space-y-5 p-5", children: [audioUrl && (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-orange-100 bg-gradient-to-r from-orange-50 to-amber-50 p-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-orange-500 text-white", children: _jsx(Volume2, { className: "h-4 w-4" }) }), _jsx("audio", { controls: true, className: "h-8 w-full", src: audioUrl, children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." })] })), _jsxs("div", { className: "flex gap-4", children: [_jsx("div", { className: "flex w-24 flex-shrink-0 flex-col gap-2", children: questionData.objectNodes.slice(0, Math.ceil(questionData.objectNodes.length / 2)).map((node) => {
+                                            const isSelected = selectedObjectId === node.id;
+                                            const isDragging = draggedObjectId === node.id;
+                                            const isCorrectObj = isReviewMode && correctAnswer?.objectId === node.id;
+                                            return (_jsx("div", { draggable: !isReviewMode, onDragStart: () => handleDragStart(node.id), onDragEnd: handleDragEnd, onClick: () => handleObjectClick(node.id), className: cn('flex h-20 w-full cursor-grab items-center justify-center rounded-lg border-2 bg-white p-1 transition-all', isDragging && 'opacity-50 scale-95', isSelected && !isReviewMode && 'border-orange-500 ring-2 ring-orange-200 shadow-md', isCorrectObj && 'border-green-500 ring-2 ring-green-200', !isSelected && !isCorrectObj && 'border-gray-200 hover:border-orange-300', isReviewMode && 'cursor-default'), title: node.label, children: _jsx(PresignedImage, { url: node.imageUrl, alt: node.label }) }, node.id));
+                                        }) }), _jsxs("div", { className: "flex-1 overflow-hidden rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100", children: [_jsx("div", { className: "border-b border-gray-100 px-3 py-1.5", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-red-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-yellow-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-green-400" }), _jsx("span", { className: "ml-2 text-xs font-medium text-gray-500", children: "Scene" })] }) }), _jsx("div", { className: "relative p-2", children: bgLoading ? (_jsx("div", { className: "flex h-64 items-center justify-center", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-orange-500" }) })) : backgroundUrl ? (_jsxs("div", { className: "relative w-full", children: [_jsx("img", { src: backgroundUrl, alt: "Scene background", className: "w-full rounded-md object-contain", draggable: false }), questionData.dropZones.map((zone) => {
+                                                            const isDropTarget = selectedDropZoneId === zone.id;
+                                                            const isCorrectZone = isReviewMode && correctAnswer?.dropZoneId === zone.id;
+                                                            const isWrongZone = isReviewMode && isDropTarget && correctAnswer?.dropZoneId !== zone.id;
+                                                            return (_jsxs("div", { onDragOver: handleDragOver, onDrop: () => handleDrop(zone.id), onClick: () => handleDropZoneClick(zone.id), className: cn('absolute rounded-lg border-2 border-dashed transition-all', !isReviewMode && !isDropTarget && 'border-blue-300/60 bg-blue-100/20 hover:border-blue-400 hover:bg-blue-200/30 cursor-pointer', !isReviewMode && isDropTarget && 'border-orange-500 bg-orange-100/40 ring-2 ring-orange-200', isCorrectZone && 'border-green-500 bg-green-100/40 ring-2 ring-green-200', isWrongZone && 'border-red-500 bg-red-100/40 ring-2 ring-red-200', isReviewMode && !isCorrectZone && !isWrongZone && 'border-blue-300/40 bg-blue-50/10'), style: {
+                                                                    left: `${zone.x}%`,
+                                                                    top: `${zone.y}%`,
+                                                                    width: `${zone.width}%`,
+                                                                    height: `${zone.height}%`,
+                                                                }, title: zone.label, children: [_jsx("div", { className: "flex h-full w-full items-center justify-center", children: isDropTarget && selectedObject ? (_jsx("div", { className: "h-full w-full p-1", children: _jsx(PresignedImage, { url: selectedObject.imageUrl, alt: selectedObject.label }) })) : (_jsx(Target, { className: "h-4 w-4 text-blue-400/50" })) }), isReviewMode && (isCorrectZone || isWrongZone) && (_jsx("div", { className: cn('absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full shadow-md z-20', isCorrectZone ? 'bg-green-500' : 'bg-red-500'), children: isCorrectZone ? (_jsx(Check, { className: "h-3 w-3 text-white" })) : (_jsx(X, { className: "h-3 w-3 text-white" })) }))] }, zone.id));
+                                                        })] })) : (_jsx("div", { className: "flex h-64 items-center justify-center text-sm text-gray-400", children: "Ch\u01B0a c\u00F3 \u1EA3nh n\u1EC1n" })) })] }), _jsx("div", { className: "flex w-24 flex-shrink-0 flex-col gap-2", children: questionData.objectNodes.slice(Math.ceil(questionData.objectNodes.length / 2)).map((node) => {
+                                            const isSelected = selectedObjectId === node.id;
+                                            const isDragging = draggedObjectId === node.id;
+                                            const isCorrectObj = isReviewMode && correctAnswer?.objectId === node.id;
+                                            return (_jsx("div", { draggable: !isReviewMode, onDragStart: () => handleDragStart(node.id), onDragEnd: handleDragEnd, onClick: () => handleObjectClick(node.id), className: cn('flex h-20 w-full cursor-grab items-center justify-center rounded-lg border-2 bg-white p-1 transition-all', isDragging && 'opacity-50 scale-95', isSelected && !isReviewMode && 'border-orange-500 ring-2 ring-orange-200 shadow-md', isCorrectObj && 'border-green-500 ring-2 ring-green-200', !isSelected && !isCorrectObj && 'border-gray-200 hover:border-orange-300', isReviewMode && 'cursor-default'), title: node.label, children: _jsx(PresignedImage, { url: node.imageUrl, alt: node.label }) }, node.id));
+                                        }) })] }), hasAnswered && selectedObject && selectedDropZone && (_jsxs("div", { className: cn('flex items-center gap-2 rounded-lg border p-3', isReviewMode
+                                    ? isAnswerCorrect
+                                        ? 'border-green-200 bg-green-50'
+                                        : 'border-red-200 bg-red-50'
+                                    : 'border-orange-200 bg-orange-50'), children: [_jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["\u0110\u00E3 \u0111\u1EB7t: ", _jsx("strong", { children: selectedObject.label }), " \u2192 ", _jsx("strong", { children: selectedDropZone.label })] }), isReviewMode && (_jsx("span", { className: cn('text-xs font-semibold', isAnswerCorrect ? 'text-green-600' : 'text-red-600'), children: isAnswerCorrect ? '✓ Chính xác' : '✗ Không chính xác' }))] })), !isReviewMode && !hasAnswered && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3", children: [_jsx("div", { className: "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white", children: _jsx("span", { className: "text-xs font-bold", children: "!" }) }), _jsx("span", { className: "text-sm text-amber-800", children: "Nghe audio v\u00E0 k\u00E9o \u0111\u1ED1i t\u01B0\u1EE3ng ph\u00F9 h\u1EE3p v\u00E0o v\u00F9ng th\u1EA3 tr\u00EAn c\u1EA3nh" })] })), isReviewMode && explanation && (_jsxs("div", { className: "rounded-lg border border-indigo-200 bg-indigo-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold text-indigo-800", children: "Gi\u1EA3i th\u00EDch:" }), _jsx("p", { className: "mt-1 text-sm text-indigo-700", children: explanation })] }))] })] })] }));
+}