@tinyweb_dev/oe-exam-sdk 0.1.0 → 0.1.2

package/dist/components/questions/types/image-object-matching/ImageObjectMatchingClient.js

@@ -1,17 +1 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ColorRegionClient } from '../../components/ColorRegionClient';
-const imageObjectMatchingConfig = {
-    creatorTitle: 'Ghép nối hình ảnh',
-    creatorSubtitle: 'Tạo câu hỏi ghép nối hình ảnh với đối tượng',
-    instructionsLabel: 'Hướng dẫn ghép nối',
-    instructionsTips: [],
-    instructionPlaceholder: '',
-    previewTitle: 'Image Object Matching (Preview)',
-    clientTitle: 'Image Object Matching',
-    clientSubtitle: 'Ghép nối hình ảnh với đối tượng tương ứng',
-};
-export function ImageObjectMatchingClient(props) {
-    return _jsx(ColorRegionClient, { ...props, config: imageObjectMatchingConfig });
-}
-//# sourceMappingURL=ImageObjectMatchingClient.js.map
+"use client";import{jsx as n}from"react/jsx-runtime";import{ColorRegionClient as t}from"../../components/ColorRegionClient";const i={creatorTitle:"Ghép nối hình ảnh",creatorSubtitle:"Tạo câu hỏi ghép nối hình ảnh với đối tượng",instructionsLabel:"Hướng dẫn ghép nối",instructionsTips:[],instructionPlaceholder:"",previewTitle:"Image Object Matching (Preview)",clientTitle:"Image Object Matching",clientSubtitle:"Ghép nối hình ảnh với đối tượng tương ứng"};export function ImageObjectMatchingClient(e){return n(t,{...e,config:i})}

package/dist/components/questions/types/image-object-matching/ImageObjectMatchingCreator.d.ts

@@ -1,3 +1,2 @@
 import type { ReadAndColorObjectsCreatorProps } from '../../_shared/types/read-and-color-objects.type';
 export declare function ImageObjectMatchingCreator(props: ReadAndColorObjectsCreatorProps): import("react").JSX.Element;
-//# sourceMappingURL=ImageObjectMatchingCreator.d.ts.map

package/dist/components/questions/types/image-object-matching/ImageObjectMatchingCreator.js

@@ -1,28 +1 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ColorRegionCreator } from '../../components/ColorRegionCreator';
-import { ImageObjectMatchingClient } from './ImageObjectMatchingClient';
-const imageObjectMatchingConfig = {
-    creatorTitle: 'Ghép nối hình ảnh',
-    creatorSubtitle: 'Tạo câu hỏi ghép nối hình ảnh với đối tượng',
-    instructionsLabel: 'Hướng dẫn ghép nối',
-    instructionsTips: [
-        'Upload hình ảnh nền cần ghép nối',
-        'Thêm đối tượng kèm label (ví dụ: Tom) và tạo vùng tương ứng trên hình ảnh',
-        'Kéo thả các vùng để điều chỉnh vị trí',
-        'Thêm hướng dẫn ghép nối cho mỗi câu lệnh (ví dụ: "Match the red object with the apple")',
-    ],
-    instructionPlaceholder: 'Match the red object with the apple',
-    instructionsRequired: false,
-    showColorLabel: true,
-    colorLabelPlaceholder: 'Nhập tên (ví dụ: Tom, Apple, Cat...)',
-    addItemLabel: 'Thêm đối tượng',
-    emptyItemMessage: 'Chưa có đối tượng nào. Nhấn "Thêm đối tượng" để bắt đầu.',
-    previewTitle: 'Image Object Matching (Preview)',
-    clientTitle: 'Image Object Matching',
-    clientSubtitle: 'Ghép nối hình ảnh với đối tượng tương ứng',
-};
-export function ImageObjectMatchingCreator(props) {
-    return (_jsx(ColorRegionCreator, { ...props, config: imageObjectMatchingConfig, ClientComponent: ImageObjectMatchingClient }));
-}
-//# sourceMappingURL=ImageObjectMatchingCreator.js.map
+"use client";import{jsx as t}from"react/jsx-runtime";import{ColorRegionCreator as n}from"../../components/ColorRegionCreator";import{ImageObjectMatchingClient as e}from"./ImageObjectMatchingClient";const i={creatorTitle:"Ghép nối hình ảnh",creatorSubtitle:"Tạo câu hỏi ghép nối hình ảnh với đối tượng",instructionsLabel:"Hướng dẫn ghép nối",instructionsTips:["Upload hình ảnh nền cần ghép nối","Thêm đối tượng kèm label (ví dụ: Tom) và tạo vùng tương ứng trên hình ảnh","Kéo thả các vùng để điều chỉnh vị trí",'Thêm hướng dẫn ghép nối cho mỗi câu lệnh (ví dụ: "Match the red object with the apple")'],instructionPlaceholder:"Match the red object with the apple",instructionsRequired:!1,showColorLabel:!0,colorLabelPlaceholder:"Nhập tên (ví dụ: Tom, Apple, Cat...)",addItemLabel:"Thêm đối tượng",emptyItemMessage:'Chưa có đối tượng nào. Nhấn "Thêm đối tượng" để bắt đầu.',previewTitle:"Image Object Matching (Preview)",clientTitle:"Image Object Matching",clientSubtitle:"Ghép nối hình ảnh với đối tượng tương ứng"};export function ImageObjectMatchingCreator(h){return t(n,{...h,config:i,ClientComponent:e})}

package/dist/components/questions/types/image-object-matching/index.d.ts

@@ -1,3 +1,2 @@
 export * from './ImageObjectMatchingCreator';
 export * from './ImageObjectMatchingClient';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/questions/types/image-object-matching/index.js

@@ -1,3 +1 @@
-export * from './ImageObjectMatchingCreator';
-export * from './ImageObjectMatchingClient';
-//# sourceMappingURL=index.js.map
+export*from"./ImageObjectMatchingCreator";export*from"./ImageObjectMatchingClient";

package/dist/components/questions/types/image-object-matching/register.d.ts

@@ -1,2 +1 @@
 export declare const imageObjectMatchingRegistration: import("../..").QuestionTypeRegistration;
-//# sourceMappingURL=register.d.ts.map

package/dist/components/questions/types/image-object-matching/register.js

@@ -1,4 +1 @@
-import { ImageObjectMatchingCreator } from './ImageObjectMatchingCreator';
-import { createColorRegionRegistration } from '../../_shared/utils/createColorRegionRegistration';
-export const imageObjectMatchingRegistration = createColorRegionRegistration(ImageObjectMatchingCreator);
-//# sourceMappingURL=register.js.map
+import{ImageObjectMatchingCreator as t}from"./ImageObjectMatchingCreator";import{createColorRegionRegistration as e}from"../../_shared/utils/createColorRegionRegistration";export const imageObjectMatchingRegistration=e(t);

package/dist/components/questions/types/image-object-matching/transform.d.ts

@@ -1,2 +1 @@
 export { transformReadAndColorObjects as transformImageObjectMatching } from '../read-and-color-objects/transform';
-//# sourceMappingURL=transform.d.ts.map

package/dist/components/questions/types/image-object-matching/transform.js

@@ -1,3 +1 @@
-// IMAGE_OBJECT_MATCHING reuses the same transform as READ_AND_COLOR_OBJECTS
-export { transformReadAndColorObjects as transformImageObjectMatching } from '../read-and-color-objects/transform';
-//# sourceMappingURL=transform.js.map
+export{transformReadAndColorObjects as transformImageObjectMatching}from"../read-and-color-objects/transform";

package/dist/components/questions/types/label-the-picture/LabelThePictureClient.d.ts

@@ -4,4 +4,3 @@ interface ExtendedProps extends LabelThePictureClientProps {
 }
 export declare function LabelThePictureClient({ questionData, userAnswer, isReviewMode, explanation, onSubmit, }: ExtendedProps): import("react").JSX.Element;
 export {};
-//# sourceMappingURL=LabelThePictureClient.d.ts.map

package/dist/components/questions/types/label-the-picture/LabelThePictureClient.js

@@ -1,103 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from 'react';
-import { cn } from '../../../../shared/lib/utils';
-import { Input } from '../../../../components/ui/input';
-import { Lightbulb } from 'lucide-react';
-import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-export function LabelThePictureClient({ questionData, userAnswer = {}, isReviewMode = false, explanation, onSubmit, }) {
-    const { imageUrl, wordBank, labels } = questionData;
-    // Initialize answers with pre-filled values
-    const initialAnswers = labels.reduce((acc, label) => {
-        if (label.isPreFilled && label.correctAnswer) {
-            acc[label.id] = label.correctAnswer;
-        }
-        return acc;
-    }, {});
-    const [answers, setAnswers] = useState(userAnswer || initialAnswers);
-    // Use refs to track previous values and prevent infinite loops
-    const previousUserAnswerRef = useRef('');
-    const previousLabelsRef = useRef('');
-    useEffect(() => {
-        // Serialize current values for comparison
-        const currentUserAnswerStr = JSON.stringify(userAnswer || {});
-        const currentLabelsStr = JSON.stringify(labels);
-        // Only update if values actually changed
-        if (previousUserAnswerRef.current === currentUserAnswerStr &&
-            previousLabelsRef.current === currentLabelsStr) {
-            return;
-        }
-        // Update refs
-        previousUserAnswerRef.current = currentUserAnswerStr;
-        previousLabelsRef.current = currentLabelsStr;
-        // Re-calculate pre-filled answers
-        const preFilledAnswers = labels.reduce((acc, label) => {
-            if (label.isPreFilled && label.correctAnswer) {
-                acc[label.id] = label.correctAnswer;
-            }
-            return acc;
-        }, {});
-        if (userAnswer && Object.keys(userAnswer).length > 0) {
-            // Merge user answers with pre-filled values
-            const mergedAnswers = { ...preFilledAnswers, ...userAnswer };
-            setAnswers(mergedAnswers);
-        }
-        else {
-            // Initialize with pre-filled values if no user answer
-            setAnswers(preFilledAnswers);
-        }
-    }, [userAnswer, labels]);
-    const handleAnswerChange = (labelId, value) => {
-        if (isReviewMode)
-            return;
-        const newAnswers = {
-            ...answers,
-            [labelId]: value,
-        };
-        setAnswers(newAnswers);
-        onSubmit?.(newAnswers);
-    };
-    const { previewUrl, isLoading: isLoadingUrl, error: urlError } = usePresignedFileUrl(imageUrl);
-    // Debug logging
-    console.log('🖼️ LabelThePictureClient image debug:', {
-        inputImageUrl: imageUrl,
-        previewUrl,
-        isLoadingUrl,
-        urlError,
-        finalSrc: previewUrl || imageUrl,
-    });
-    // Sort labels by number
-    const sortedLabels = [...labels].sort((a, b) => a.number - b.number);
-    return (_jsxs("div", { className: "space-y-5", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Label the Picture" }), _jsx("p", { className: "text-sm text-gray-500", children: "Nh\u00ECn tranh v\u00E0 \u0111i\u1EC1n t\u1EEB v\u00E0o c\u00E1c v\u1ECB tr\u00ED t\u01B0\u01A1ng \u1EE9ng" })] }) }), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg", children: [_jsx("div", { className: "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-2", children: [_jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-red-400" }), _jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-yellow-400" }), _jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-green-400" }), _jsx("span", { className: "ml-3 text-sm font-medium text-gray-500", children: "H\u00ECnh \u1EA3nh" })] }) }), _jsx("div", { className: "flex justify-center bg-gradient-to-br from-slate-50 to-gray-100 p-4", children: _jsxs("div", { className: "relative max-h-[400px] w-full max-w-2xl overflow-hidden rounded-lg", children: [isLoadingUrl && (_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-blue-500" }) })), !isLoadingUrl && (previewUrl || imageUrl) ? (
-                                /* eslint-disable-next-line @next/next/no-img-element */
-                                _jsx("img", { src: previewUrl || imageUrl, alt: "Label the picture", className: "h-full w-full object-contain", onError: (e) => {
-                                        console.error('Failed to load image:', imageUrl, 'previewUrl:', previewUrl);
-                                        // Replace with default placeholder
-                                        const target = e.target;
-                                        target.onerror = null; // Prevent infinite loop
-                                        target.src = '/images/placeholder-image.svg';
-                                    } })) : (_jsxs("div", { className: "flex h-64 flex-col items-center justify-center gap-3 bg-gray-50 rounded-lg border-2 border-dashed border-gray-200", children: [_jsx("svg", { className: "h-16 w-16 text-gray-300", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }), _jsx("p", { className: "text-gray-400 font-medium", children: "Ch\u01B0a c\u00F3 h\u00ECnh \u1EA3nh" })] }))] }) })] }), wordBank.length > 0 && (_jsxs("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-gray-100 bg-gradient-to-r from-amber-50 to-orange-50 px-4 py-2.5", children: [_jsx("svg", { className: "h-5 w-5 text-amber-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" }) }), _jsx("h3", { className: "text-sm font-semibold text-gray-800", children: "Word Bank" })] }), _jsx("div", { className: "p-4", children: _jsx("div", { className: "flex flex-wrap gap-2", children: wordBank.map((word, index) => {
-                                const isUsedAsPreFilled = labels.some((label) => label.isPreFilled && label.correctAnswer === word);
-                                const isUsedByUser = Object.values(answers).includes(word);
-                                return (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-lg border-2 px-3 py-1.5 text-sm font-semibold transition-all', isUsedAsPreFilled
-                                        ? 'border-blue-300 bg-blue-50 text-blue-700'
-                                        : isUsedByUser
-                                            ? 'border-green-300 bg-green-50 text-green-700'
-                                            : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300 hover:shadow-sm'), children: [word, isUsedAsPreFilled && (_jsx("span", { className: "rounded bg-blue-200 px-1 py-0.5 text-xs", children: "s\u1EB5n" })), isUsedByUser && !isUsedAsPreFilled && (_jsx("span", { className: "rounded bg-green-200 px-1 py-0.5 text-xs", children: "\u2713" }))] }, index));
-                            }) }) })] })), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("svg", { className: "h-5 w-5 text-blue-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" }) }), _jsx("h3", { className: "text-sm font-semibold text-gray-800", children: "\u0110i\u1EC1n t\u1EEB v\u00E0o c\u00E1c v\u1ECB tr\u00ED" })] }), _jsx("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3", children: sortedLabels.map((label) => {
-                            const userAnswerValue = answers[label.id] || '';
-                            const correctAnswer = label.correctAnswer.trim().toLowerCase();
-                            const userAnswerLower = userAnswerValue.trim().toLowerCase();
-                            const isCorrect = isReviewMode && userAnswerLower === correctAnswer && userAnswerValue.trim() !== '';
-                            const isWrong = isReviewMode && userAnswerValue.trim() !== '' && userAnswerLower !== correctAnswer;
-                            const isPreFilled = label.isPreFilled || false;
-                            return (_jsxs("div", { className: cn('group overflow-hidden rounded-xl border bg-white shadow-sm transition-all hover:shadow-md', isPreFilled && 'border-blue-300 bg-blue-50/30', isReviewMode && isCorrect && !isPreFilled && 'border-green-400 bg-green-50/50', isReviewMode && isWrong && !isPreFilled && 'border-red-400 bg-red-50/50', !isReviewMode && !isPreFilled && 'border-gray-200'), children: [_jsxs("div", { className: cn('flex items-center justify-between px-4 py-2', isPreFilled ? 'bg-blue-100/50' : 'bg-gray-50'), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: cn('flex h-7 w-7 items-center justify-center rounded-lg text-xs font-bold text-white shadow-sm', isPreFilled
-                                                            ? 'bg-blue-500'
-                                                            : isCorrect
-                                                                ? 'bg-green-500'
-                                                                : isWrong
-                                                                    ? 'bg-red-500'
-                                                                    : 'bg-gradient-to-br from-blue-500 to-indigo-600'), children: label.number }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["V\u1ECB tr\u00ED ", label.number] })] }), isPreFilled && (_jsx("span", { className: "rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-600", children: "\u0110i\u1EC1n s\u1EB5n" })), isReviewMode && isCorrect && !isPreFilled && (_jsx("span", { className: "rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-600", children: "\u2713 \u0110\u00FAng" })), isReviewMode && isWrong && !isPreFilled && (_jsx("span", { className: "rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-600", children: "\u2717 Sai" }))] }), _jsxs("div", { className: "p-4", children: [_jsx(Input, { value: userAnswerValue, onChange: (e) => handleAnswerChange(label.id, e.target.value), readOnly: isReviewMode || isPreFilled, placeholder: isPreFilled ? '' : 'Nhập từ...', className: cn('w-full text-center font-semibold', isPreFilled && 'bg-blue-50 border-blue-200 cursor-not-allowed', isCorrect && !isPreFilled && 'bg-green-50 border-green-300', isWrong && !isPreFilled && 'bg-red-50 border-red-300') }), isReviewMode && isWrong && !isPreFilled && (_jsxs("div", { className: "mt-2 rounded-lg bg-green-50 p-2 flex items-center justify-center gap-1.5 border border-green-200", children: [_jsx("span", { className: "text-xs text-green-600", children: "\u0110\u00E1p \u00E1n:" }), _jsx("span", { className: "text-sm font-bold text-green-700", children: label.correctAnswer })] }))] })] }, label.id));
-                        }) })] }), isReviewMode && explanation && (_jsx("div", { className: "rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border border-blue-200", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-xs font-semibold text-blue-700 uppercase tracking-wider", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-gray-700 leading-relaxed", children: explanation })] })] }) }))] }));
-}
-//# sourceMappingURL=LabelThePictureClient.js.map
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t,useEffect as l,useRef as s}from"react";import{cn as n}from"../../../../shared/lib/utils";import{Input as a}from"../../../../components/ui/input";import{Lightbulb as d}from"lucide-react";import{usePresignedFileUrl as i}from"../../../../shared/lib/hooks";export function LabelThePictureClient({questionData:o,userAnswer:c={},isReviewMode:m=!1,explanation:g,onSubmit:h}){const{imageUrl:b,wordBank:u,labels:x}=o,p=x.reduce((e,r)=>(r.isPreFilled&&r.correctAnswer&&(e[r.id]=r.correctAnswer),e),{}),[f,v]=t(c||p),N=s(""),w=s("");l(()=>{const e=JSON.stringify(c||{}),r=JSON.stringify(x);if(N.current===e&&w.current===r)return;N.current=e,w.current=r;const t=x.reduce((e,r)=>(r.isPreFilled&&r.correctAnswer&&(e[r.id]=r.correctAnswer),e),{});if(c&&Object.keys(c).length>0){const e={...t,...c};v(e)}else v(t)},[c,x]);const{previewUrl:y,isLoading:k,error:j}=i(b);console.log("🖼️ LabelThePictureClient image debug:",{inputImageUrl:b,previewUrl:y,isLoadingUrl:k,urlError:j,finalSrc:y||b});const L=[...x].sort((e,r)=>e.number-r.number);return r("div",{className:"space-y-5",children:[e("div",{className:"flex items-center justify-between",children:r("div",{children:[e("h2",{className:"text-lg font-semibold text-gray-900",children:"Label the Picture"}),e("p",{className:"text-sm text-gray-500",children:"Nhìn tranh và điền từ vào các vị trí tương ứng"})]})}),r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg",children:[e("div",{className:"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-2",children:[e("div",{className:"h-2.5 w-2.5 rounded-full bg-red-400"}),e("div",{className:"h-2.5 w-2.5 rounded-full bg-yellow-400"}),e("div",{className:"h-2.5 w-2.5 rounded-full bg-green-400"}),e("span",{className:"ml-3 text-sm font-medium text-gray-500",children:"Hình ảnh"})]})}),e("div",{className:"flex justify-center bg-gradient-to-br from-slate-50 to-gray-100 p-4",children:r("div",{className:"relative max-h-[400px] w-full max-w-2xl overflow-hidden rounded-lg",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-blue-500"})}),k||!y&&!b?r("div",{className:"flex h-64 flex-col items-center justify-center gap-3 bg-gray-50 rounded-lg border-2 border-dashed border-gray-200",children:[e("svg",{className:"h-16 w-16 text-gray-300",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"})}),e("p",{className:"text-gray-400 font-medium",children:"Chưa có hình ảnh"})]}):e("img",{src:y||b,alt:"Label the picture",className:"h-full w-full object-contain",onError:e=>{console.error("Failed to load image:",b,"previewUrl:",y);const r=e.target;r.onerror=null,r.src="/images/placeholder-image.svg"}})]})})]}),u.length>0&&r("div",{className:"overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm",children:[r("div",{className:"flex items-center gap-2 border-b border-gray-100 bg-gradient-to-r from-amber-50 to-orange-50 px-4 py-2.5",children:[e("svg",{className:"h-5 w-5 text-amber-600",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"})}),e("h3",{className:"text-sm font-semibold text-gray-800",children:"Word Bank"})]}),e("div",{className:"p-4",children:e("div",{className:"flex flex-wrap gap-2",children:u.map((t,l)=>{const s=x.some(e=>e.isPreFilled&&e.correctAnswer===t),a=Object.values(f).includes(t);return r("div",{className:n("flex items-center gap-1.5 rounded-lg border-2 px-3 py-1.5 text-sm font-semibold transition-all",s?"border-blue-300 bg-blue-50 text-blue-700":a?"border-green-300 bg-green-50 text-green-700":"border-gray-200 bg-white text-gray-700 hover:border-gray-300 hover:shadow-sm"),children:[t,s&&e("span",{className:"rounded bg-blue-200 px-1 py-0.5 text-xs",children:"sẵn"}),a&&!s&&e("span",{className:"rounded bg-green-200 px-1 py-0.5 text-xs",children:"✓"})]},l)})})})]}),r("div",{className:"space-y-4",children:[r("div",{className:"flex items-center gap-2",children:[e("svg",{className:"h-5 w-5 text-blue-600",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"})}),e("h3",{className:"text-sm font-semibold text-gray-800",children:"Điền từ vào các vị trí"})]}),e("div",{className:"grid gap-3 sm:grid-cols-2 lg:grid-cols-3",children:L.map(t=>{const l=f[t.id]||"",s=t.correctAnswer.trim().toLowerCase(),d=l.trim().toLowerCase(),i=m&&d===s&&""!==l.trim(),o=m&&""!==l.trim()&&d!==s,c=t.isPreFilled||!1;return r("div",{className:n("group overflow-hidden rounded-xl border bg-white shadow-sm transition-all hover:shadow-md",c&&"border-blue-300 bg-blue-50/30",m&&i&&!c&&"border-green-400 bg-green-50/50",m&&o&&!c&&"border-red-400 bg-red-50/50",!m&&!c&&"border-gray-200"),children:[r("div",{className:n("flex items-center justify-between px-4 py-2",c?"bg-blue-100/50":"bg-gray-50"),children:[r("div",{className:"flex items-center gap-2",children:[e("div",{className:n("flex h-7 w-7 items-center justify-center rounded-lg text-xs font-bold text-white shadow-sm",c?"bg-blue-500":i?"bg-green-500":o?"bg-red-500":"bg-gradient-to-br from-blue-500 to-indigo-600"),children:t.number}),r("span",{className:"text-sm font-medium text-gray-700",children:["Vị trí ",t.number]})]}),c&&e("span",{className:"rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-600",children:"Điền sẵn"}),m&&i&&!c&&e("span",{className:"rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-600",children:"✓ Đúng"}),m&&o&&!c&&e("span",{className:"rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-600",children:"✗ Sai"})]}),r("div",{className:"p-4",children:[e(a,{value:l,onChange:e=>((e,r)=>{if(m)return;const t={...f,[e]:r};v(t),h?.(t)})(t.id,e.target.value),readOnly:m||c,placeholder:c?"":"Nhập từ...",className:n("w-full text-center font-semibold",c&&"bg-blue-50 border-blue-200 cursor-not-allowed",i&&!c&&"bg-green-50 border-green-300",o&&!c&&"bg-red-50 border-red-300")}),m&&o&&!c&&r("div",{className:"mt-2 rounded-lg bg-green-50 p-2 flex items-center justify-center gap-1.5 border border-green-200",children:[e("span",{className:"text-xs text-green-600",children:"Đáp án:"}),e("span",{className:"text-sm font-bold text-green-700",children:t.correctAnswer})]})]})]},t.id)})})]}),m&&g&&e("div",{className:"rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border border-blue-200",children:r("div",{className:"flex items-start gap-3",children:[e("div",{className:"flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white",children:e(d,{className:"h-3.5 w-3.5"})}),r("div",{className:"flex-1",children:[e("span",{className:"text-xs font-semibold text-blue-700 uppercase tracking-wider",children:"Giải thích"}),e("p",{className:"mt-1 text-sm text-gray-700 leading-relaxed",children:g})]})]})})]})}

package/dist/components/questions/types/label-the-picture/LabelThePictureCreator.d.ts

@@ -1,3 +1,2 @@
 import { LabelThePictureCreatorProps } from '../../_shared/types/label-the-picture.type';
 export declare function LabelThePictureCreator(props: LabelThePictureCreatorProps): import("react").JSX.Element;
-//# sourceMappingURL=LabelThePictureCreator.d.ts.map