@tinyweb_dev/oe-exam-sdk 0.1.0 → 0.1.2

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

@@ -7,4 +7,3 @@ import type { ListenAndDragObjectsIntoSceneClientProps } from '../../_shared/typ
  * Student listens to audio and drags the correct object to the correct drop zone.
  */
 export declare function ListenAndDragObjectsIntoSceneClient({ questionData, onSubmit, isReviewMode, userAnswer, correctAnswer, explanation, }: ListenAndDragObjectsIntoSceneClientProps): import("react").JSX.Element;
-//# sourceMappingURL=ListenAndDragObjectsIntoSceneClient.d.ts.map

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

@@ -1,107 +1 @@
-'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 })] }))] })] })] }));
-}
-//# sourceMappingURL=ListenAndDragObjectsIntoSceneClient.js.map
+"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})]})]})]})]})}

package/dist/components/questions/types/listen-and-drag-objects-into-scene/ListenAndDragObjectsIntoSceneCreator.d.ts

@@ -9,4 +9,3 @@ interface CreatorProps extends ListenAndDragObjectsIntoSceneCreatorProps {
 }
 export declare function ListenAndDragObjectsIntoSceneCreator(props: CreatorProps): import("react").JSX.Element;
 export {};
-//# sourceMappingURL=ListenAndDragObjectsIntoSceneCreator.d.ts.map