@tinyweb_dev/oe-exam-sdk 0.2.4 → 0.2.6

package/dist/components/questions/types/fill-in-blank-group/transform.js

@@ -0,0 +1,68 @@
+import { FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION, FILL_IN_BLANK_ITEM_TYPE, } from '../../_shared/types/fill-in-blank-group.type';
+import { blankSlotCount, extractPlaceholderIndices, normalizeAnswersMatrix, } from './blank-utils';
+function sumGradablePoints(items) {
+    return items.reduce((total, item) => {
+        if (item.isExample)
+            return total;
+        const points = typeof item.points === 'number' ? item.points : 1;
+        return total + points;
+    }, 0);
+}
+function toItemAnswer(item) {
+    const indices = extractPlaceholderIndices(item.question || '');
+    const requiredLength = blankSlotCount(item.question || '');
+    return {
+        answers: normalizeAnswersMatrix(item.answers, requiredLength).map((alts, index) => {
+            if (!indices.includes(index))
+                return [];
+            return alts.length > 0 ? alts : [''];
+        }),
+        caseSensitive: item.caseSensitive === true,
+    };
+}
+export const transformFillInBlankGroup = (question) => {
+    const answerData = question.answer;
+    const items = Array.isArray(answerData?.items) ? answerData.items : [];
+    if (items.length === 0) {
+        return { apiContent: { items: [] }, apiCorrectAnswer: { answer: [] } };
+    }
+    const apiItems = items.map((item, index) => {
+        const correctAnswer = toItemAnswer(item);
+        const hints = Array.isArray(item.hints)
+            ? item.hints.map((hint) => String(hint ?? '').trim()).filter(Boolean)
+            : [];
+        return {
+            questionType: FILL_IN_BLANK_ITEM_TYPE,
+            ...(item.isExample ? { isExample: true } : {}),
+            content: {
+                question: item.question || '',
+                ...(item.imageUrl ? { imageUrl: item.imageUrl } : {}),
+                ...(item.audioUrl ? { audioUrl: item.audioUrl } : {}),
+                ...(item.showHints ? { showHints: true } : {}),
+                ...(hints.length > 0 ? { hints } : {}),
+            },
+            correctAnswer,
+            points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+            questionNumber: item.questionNumber || index + 1,
+        };
+    });
+    const groupHints = Array.isArray(answerData?.hints)
+        ? answerData.hints.map((hint) => String(hint ?? '').trim()).filter(Boolean)
+        : [];
+    return {
+        apiContent: {
+            meta: {
+                instruction: answerData?.instruction || FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION,
+                ...(answerData?.audioUrl ? { audioUrl: answerData.audioUrl } : {}),
+                ...(answerData?.imageUrl ? { imageUrl: answerData.imageUrl } : {}),
+                ...(answerData?.showHints ? { showHints: true } : {}),
+                ...(groupHints.length > 0 ? { hints: groupHints } : {}),
+            },
+            items: apiItems,
+        },
+        apiCorrectAnswer: {
+            answer: apiItems.map((item) => item.correctAnswer),
+        },
+        totalPoints: sumGradablePoints(items),
+    };
+};

package/dist/components/questions/types/match-word-to-picture/MatchWordToPictureClient.d.ts

@@ -0,0 +1,2 @@
+import { MatchWordToPictureClientProps } from '../../_shared/types/match-word-to-picture.type';
+export declare function MatchWordToPictureClient({ questionData, onSubmit, isReviewMode, userAnswer, autoFillCorrectAnswers, explanation, }: MatchWordToPictureClientProps): import("react").JSX.Element;

package/dist/components/questions/types/match-word-to-picture/MatchWordToPictureClient.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent } from '../../../../components/ui/card';
+import { Label } from '../../../../components/ui/label';
+import { BookOpen, CheckCircle2, XCircle } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { MATCH_WORD_TO_PICTURE_DEFAULT_INSTRUCTION, } from '../../_shared/types/match-word-to-picture.type';
+import { useState } from 'react';
+export function MatchWordToPictureClient({ questionData, onSubmit, isReviewMode = false, userAnswer, autoFillCorrectAnswers = false, explanation, }) {
+    const [answer, setAnswer] = useState(userAnswer || '');
+    const { previewUrl: questionImageUrl } = usePresignedFileUrl(questionData.imageUrl || '');
+    const wordBank = questionData.wordBank || [];
+    if (!questionData.imageUrl) {
+        return (_jsx(Card, { children: _jsx(CardContent, { className: "p-6", children: _jsx("p", { className: "text-gray-500", children: "Kh\u00F4ng c\u00F3 d\u1EEF li\u1EC7u c\u00E2u h\u1ECFi" }) }) }));
+    }
+    const isExample = questionData.isExample || false;
+    const displayedAnswer = autoFillCorrectAnswers || isExample
+        ? questionData.correctAnswer
+        : answer;
+    const isCorrect = isReviewMode && userAnswer !== undefined
+        ? userAnswer.trim().toLowerCase() === questionData.correctAnswer.trim().toLowerCase()
+        : undefined;
+    return (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-violet-400 to-indigo-500" }), _jsxs(CardContent, { className: "space-y-6 p-6", children: [_jsx("p", { className: "text-sm font-semibold uppercase tracking-wide text-violet-700", children: questionData.instruction || MATCH_WORD_TO_PICTURE_DEFAULT_INSTRUCTION }), wordBank.length > 0 && (_jsxs("div", { className: "rounded-xl border border-violet-200 bg-gradient-to-r from-violet-50 to-indigo-50 p-4", children: [_jsx("p", { className: "mb-3 text-sm font-semibold text-violet-700", children: "Word bank:" }), _jsx("div", { className: "flex flex-wrap gap-2", children: wordBank.map((word, index) => (_jsx("span", { className: "rounded-full border border-violet-200 bg-white px-3 py-1 text-sm font-semibold text-slate-700", children: word }, `${word}-${index}`))) })] })), _jsxs("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-5", children: [isExample && (_jsxs("div", { className: "mb-2 inline-flex items-center gap-1.5 rounded-full border border-amber-300 bg-amber-100 px-3 py-1", children: [_jsx(BookOpen, { className: "h-3.5 w-3.5 text-amber-600" }), _jsx("span", { className: "text-xs font-semibold uppercase tracking-wide text-amber-700", children: "Example" })] })), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "relative h-24 w-24 flex-shrink-0 overflow-hidden rounded-lg border border-gray-200 bg-gray-50 shadow-sm", children: _jsx("img", { src: questionImageUrl || questionData.imageUrl, alt: questionData.correctAnswer || 'Picture', className: "h-full w-full object-contain" }) }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(Label, { className: "text-base font-semibold text-gray-800", children: "Ch\u1ECDn t\u1EEB ph\u00F9 h\u1EE3p" }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("select", { value: displayedAnswer, onChange: (event) => {
+                                                            setAnswer(event.target.value);
+                                                            onSubmit?.(event.target.value);
+                                                        }, disabled: isReviewMode || isExample, className: `h-10 max-w-xs rounded-md border-2 bg-white px-3 text-sm font-medium ${isReviewMode
+                                                            ? isCorrect
+                                                                ? 'border-green-400 bg-green-50 text-green-700'
+                                                                : 'border-red-400 bg-red-50 text-red-700'
+                                                            : 'border-violet-300 focus:border-violet-500 focus:ring-violet-200'}`, children: [_jsx("option", { value: "", children: "-- Ch\u1ECDn t\u1EEB --" }), wordBank.map((word, index) => (_jsx("option", { value: word, children: word }, `${word}-${index}`)))] }), isReviewMode && isCorrect !== undefined && (_jsx("span", { className: "flex items-center gap-1", children: isCorrect ? (_jsx(CheckCircle2, { className: "h-5 w-5 text-green-500" })) : (_jsx(XCircle, { className: "h-5 w-5 text-red-500" })) }))] })] })] }), isReviewMode && isCorrect === false && (_jsxs("div", { className: "mt-3 flex items-center gap-2 rounded-lg border border-green-200 bg-green-50 px-4 py-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }), _jsxs("span", { className: "text-sm text-green-700", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", _jsx("strong", { children: questionData.correctAnswer })] })] }))] }), explanation && isReviewMode && (_jsxs("div", { className: "rounded-xl border border-blue-200 bg-blue-50 p-4", children: [_jsx("p", { className: "mb-1 text-sm font-semibold text-blue-800", children: "Gi\u1EA3i th\u00EDch:" }), _jsx("p", { className: "text-sm text-blue-700", children: explanation })] }))] })] }));
+}

package/dist/components/questions/types/match-word-to-picture/MatchWordToPictureCreator.d.ts

@@ -0,0 +1,2 @@
+import { MatchWordToPictureCreatorProps } from '../../_shared/types/match-word-to-picture.type';
+export declare function MatchWordToPictureCreator(props: MatchWordToPictureCreatorProps): import("react").JSX.Element;

package/dist/components/questions/types/match-word-to-picture/MatchWordToPictureCreator.js

@@ -0,0 +1,267 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ImagePreview } from '../../../../components/ui/image-preview';
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '../../../../components/ui/button';
+import { Label } from '../../../../components/ui/label';
+import { Textarea } from '../../../../components/ui/textarea';
+import { PointsInput } from '../../../../components/ui/points-input';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { BookOpen, Eye, HelpCircle, ImageIcon, Pencil } from 'lucide-react';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { Checkbox } from '../../../../components/ui/checkbox';
+import { MATCH_WORD_TO_PICTURE_DEFAULT_INSTRUCTION, } from '../../_shared/types/match-word-to-picture.type';
+import { MatchWordToPictureClient } from './MatchWordToPictureClient';
+import { WordBankEditor } from './WordBankEditor';
+import { useDebouncedCallback, usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { useExamQuestionStore } from '../../../../shared/lib/stores/examQuestionStore';
+function getGroupNumberForIndex(questionIndex, groups) {
+    if (!groups || groups.length === 0) {
+        return 1;
+    }
+    let currentIndex = 0;
+    for (const group of groups) {
+        if (questionIndex < currentIndex + group.questionCount) {
+            return group.number;
+        }
+        currentIndex += group.questionCount;
+    }
+    return groups[groups.length - 1]?.number || 1;
+}
+function normalizeWordBank(wordBank) {
+    if (!Array.isArray(wordBank)) {
+        return [];
+    }
+    return wordBank.filter((word) => typeof word === 'string');
+}
+function MatchWordToPictureContent({ initialData, onChange, onUnsavedChangesChange, externalErrors, groups, questionIndexInPart = 0, partId = '', validationRef, }) {
+    const setSharedPassageData = useExamQuestionStore((state) => state.setSharedPassageData);
+    const getSharedPassageData = useExamQuestionStore((state) => state.getSharedPassageData);
+    const initialGroupNum = getGroupNumberForIndex(questionIndexInPart, groups);
+    const [imageUrl, setImageUrl] = useState(initialData?.imageUrl || '');
+    const [correctAnswer, setCorrectAnswer] = useState(initialData?.correctAnswer || '');
+    const [points, setPoints] = useState(initialData?.points || 1);
+    const [isExample, setIsExample] = useState(initialData?.isExample || false);
+    const [groupNumber, setGroupNumber] = useState(initialData?.groupNumber || initialGroupNum);
+    const [explanation, setExplanation] = useState(initialData?.explanation || '');
+    const [wordBank, setWordBank] = useState(() => {
+        if (partId) {
+            const storedData = getSharedPassageData(partId, initialGroupNum);
+            if (Array.isArray(storedData?.wordBank)) {
+                return storedData.wordBank;
+            }
+        }
+        return initialData?.wordBank || [];
+    });
+    const [instruction, setInstruction] = useState(() => {
+        if (partId) {
+            const storedData = getSharedPassageData(partId, initialGroupNum);
+            if (storedData?.instruction) {
+                return storedData.instruction;
+            }
+        }
+        return initialData?.instruction || MATCH_WORD_TO_PICTURE_DEFAULT_INSTRUCTION;
+    });
+    const [isClientMode, setIsClientMode] = useState(false);
+    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+    const [imagePreviewUrl, setImagePreviewUrl] = useState('');
+    const [validationErrors, setValidationErrors] = useState({});
+    const savedStateRef = useRef('');
+    const previousQuestionIndexRef = useRef(questionIndexInPart);
+    const isInitializingRef = useRef(false);
+    const hasInitializedRef = useRef(false);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    const onUnsavedChangesChangeRef = useRef(onUnsavedChangesChange);
+    const currentGroupNumber = groupNumber || 1;
+    const { previewUrl: generatedPreviewUrl } = usePresignedFileUrl(imageUrl);
+    const displayPreviewUrl = imagePreviewUrl || generatedPreviewUrl || '';
+    const usableWords = wordBank.map((word) => word.trim()).filter((word) => word.length > 0);
+    useEffect(() => {
+        onUnsavedChangesChangeRef.current = onUnsavedChangesChange;
+    }, [onUnsavedChangesChange]);
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    const debouncedOnChange = useDebouncedCallback((data) => {
+        onChangeRef.current?.(data);
+    }, 300);
+    const getCurrentStateString = () => JSON.stringify({ imageUrl, correctAnswer, points, isExample, wordBank, instruction });
+    useEffect(() => {
+        if (isInitializingRef.current)
+            return;
+        const timer = setTimeout(() => {
+            savedStateRef.current = getCurrentStateString();
+            setHasUnsavedChanges(false);
+        }, 150);
+        return () => clearTimeout(timer);
+    }, [questionIndexInPart]);
+    useEffect(() => {
+        if (isInitializingRef.current || !savedStateRef.current)
+            return;
+        const hasChanges = getCurrentStateString() !== savedStateRef.current;
+        if (hasChanges !== hasUnsavedChanges) {
+            setHasUnsavedChanges(hasChanges);
+            onUnsavedChangesChangeRef.current?.(hasChanges);
+        }
+    }, [imageUrl, correctAnswer, points, isExample, wordBank, instruction, hasUnsavedChanges]);
+    useEffect(() => {
+        if (!validationRef)
+            return;
+        validationRef.current = {
+            triggerValidation: async () => {
+                const errors = {};
+                let isValid = true;
+                if (!imageUrl.trim()) {
+                    errors.imageUrl = 'Vui lòng upload hình ảnh';
+                    isValid = false;
+                }
+                if (usableWords.length === 0) {
+                    errors.wordBank = 'Vui lòng thêm word bank';
+                    isValid = false;
+                }
+                if (!correctAnswer.trim()) {
+                    errors.correctAnswer = 'Vui lòng chọn đáp án';
+                    isValid = false;
+                }
+                else if (usableWords.length > 0 &&
+                    !usableWords.some((word) => word.toLowerCase() === correctAnswer.trim().toLowerCase())) {
+                    errors.correctAnswer = 'Đáp án phải nằm trong word bank';
+                    isValid = false;
+                }
+                setValidationErrors(errors);
+                return isValid;
+            },
+            getFormData: () => ({
+                imageUrl,
+                correctAnswer,
+                points,
+                groupNumber: currentGroupNumber,
+                isExample,
+                wordBank,
+                instruction,
+                explanation,
+                groups,
+            }),
+        };
+    }, [
+        validationRef,
+        imageUrl,
+        correctAnswer,
+        points,
+        currentGroupNumber,
+        isExample,
+        wordBank,
+        instruction,
+        explanation,
+        groups,
+        usableWords,
+    ]);
+    useEffect(() => {
+        const questionIndexChanged = questionIndexInPart !== previousQuestionIndexRef.current;
+        const shouldSyncForFirstInit = !hasInitializedRef.current && !!initialData?.imageUrl;
+        if (!shouldSyncForFirstInit && !questionIndexChanged)
+            return;
+        isInitializingRef.current = true;
+        previousQuestionIndexRef.current = questionIndexInPart;
+        hasInitializedRef.current = true;
+        const groupNum = getGroupNumberForIndex(questionIndexInPart, groups);
+        setImageUrl(initialData?.imageUrl || '');
+        setCorrectAnswer(initialData?.correctAnswer || '');
+        setPoints(initialData?.points || 1);
+        setIsExample(initialData?.isExample || false);
+        setGroupNumber(groupNum);
+        setExplanation(initialData?.explanation || '');
+        let sharedWordBank = [];
+        let sharedInstruction = MATCH_WORD_TO_PICTURE_DEFAULT_INSTRUCTION;
+        if (partId) {
+            const storedData = getSharedPassageData(partId, groupNum);
+            if (Array.isArray(storedData?.wordBank)) {
+                sharedWordBank = storedData.wordBank;
+                sharedInstruction = storedData.instruction || MATCH_WORD_TO_PICTURE_DEFAULT_INSTRUCTION;
+            }
+            else {
+                sharedWordBank = initialData?.wordBank || [];
+                sharedInstruction = initialData?.instruction || MATCH_WORD_TO_PICTURE_DEFAULT_INSTRUCTION;
+                if (sharedWordBank.length > 0 || sharedInstruction) {
+                    setSharedPassageData(partId, groupNum, {
+                        wordBank: sharedWordBank,
+                        instruction: sharedInstruction,
+                    });
+                }
+            }
+        }
+        else {
+            sharedWordBank = initialData?.wordBank || [];
+            sharedInstruction = initialData?.instruction || MATCH_WORD_TO_PICTURE_DEFAULT_INSTRUCTION;
+        }
+        setWordBank(normalizeWordBank(sharedWordBank));
+        setInstruction(sharedInstruction);
+        setTimeout(() => {
+            isInitializingRef.current = false;
+        }, 100);
+    }, [initialData, groups, questionIndexInPart, partId, getSharedPassageData, setSharedPassageData]);
+    useEffect(() => {
+        if (isInitializingRef.current)
+            return;
+        const payload = {
+            imageUrl,
+            correctAnswer,
+            points: points || 1,
+            groupNumber: currentGroupNumber,
+            isExample,
+            wordBank,
+            instruction,
+            explanation,
+            groups,
+        };
+        const payloadString = JSON.stringify(payload);
+        if (previousPayloadRef.current === payloadString)
+            return;
+        previousPayloadRef.current = payloadString;
+        if (partId) {
+            setSharedPassageData(partId, currentGroupNumber, { wordBank, instruction });
+        }
+        debouncedOnChange(payload);
+    }, [
+        imageUrl,
+        correctAnswer,
+        points,
+        currentGroupNumber,
+        isExample,
+        wordBank,
+        instruction,
+        explanation,
+        groups,
+        partId,
+        setSharedPassageData,
+        debouncedOnChange,
+    ]);
+    if (isClientMode) {
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "Match word to picture (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc - Hi\u1EC3n th\u1ECB \u0111\u00E1p \u00E1n \u0111\u00FAng" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i Edit Mode"] })] }) }) }), _jsx(MatchWordToPictureClient, { questionData: {
+                        imageUrl: displayPreviewUrl || imageUrl,
+                        correctAnswer,
+                        points,
+                        groupNumber: currentGroupNumber,
+                        isExample,
+                        wordBank: usableWords,
+                        instruction,
+                    }, isReviewMode: true, autoFillCorrectAnswers: true, explanation: explanation })] }));
+    }
+    return (_jsxs("div", { className: "space-y-4", children: [groups && groups.length > 0 && (_jsx(WordBankEditor, { wordBank: wordBank, instruction: instruction, onWordBankChange: setWordBank, onInstructionChange: setInstruction })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-violet-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "N\u1ED1i t\u1EEB v\u1EDBi tranh" }), _jsx("p", { className: "text-xs text-gray-500", children: "Upload tranh v\u00E0 ch\u1ECDn t\u1EEB trong word bank" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !imageUrl, className: "gap-2 border-violet-200 text-violet-600 hover:bg-violet-50", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] }) }), _jsxs(CardContent, { className: "space-y-4 px-4 pb-4", children: [_jsxs("div", { className: "flex items-center gap-6", children: [_jsx(PointsInput, { value: points || 1, onChange: (e) => setPoints(parseFloat(e.target.value) || 1) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "mwtp-isExample", checked: isExample || false, onCheckedChange: (checked) => setIsExample(!!checked) }), _jsx(Label, { htmlFor: "mwtp-isExample", className: "cursor-pointer text-sm font-medium text-gray-700", children: "\u0110\u00E1nh d\u1EA5u l\u00E0 c\u00E2u h\u1ECFi Example" })] })] }), (!groups || groups.length === 0) && (_jsx(WordBankEditor, { wordBank: wordBank, instruction: instruction, onWordBankChange: setWordBank, onInstructionChange: setInstruction })), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-violet-500" }), "H\u00ECnh \u1EA3nh ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FileUpload, { id: "mwtp-question-image", label: "", accept: "image/*", value: imageUrl || '', onChange: (url) => {
+                                            setImageUrl(url);
+                                            if (validationErrors.imageUrl) {
+                                                setValidationErrors((prev) => ({ ...prev, imageUrl: undefined }));
+                                            }
+                                        }, onPresignedUrlChange: setImagePreviewUrl, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }), displayPreviewUrl && (_jsx(ImagePreview, { src: displayPreviewUrl, alt: "Preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" })), validationErrors.imageUrl && _jsx("p", { className: "text-sm text-red-600", children: validationErrors.imageUrl })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "mwtp-correctAnswer", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(HelpCircle, { className: "h-4 w-4 text-green-500" }), "\u0110\u00E1p \u00E1n \u0111\u00FAng ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs("select", { id: "mwtp-correctAnswer", value: correctAnswer, onChange: (event) => {
+                                            setCorrectAnswer(event.target.value);
+                                            if (validationErrors.correctAnswer) {
+                                                setValidationErrors((prev) => ({ ...prev, correctAnswer: undefined }));
+                                            }
+                                        }, className: `flex h-10 w-full rounded-md border bg-white px-3 py-2 text-sm ${validationErrors.correctAnswer
+                                            ? 'border-red-400 focus:border-red-500'
+                                            : 'border-gray-200 focus:border-green-300'}`, children: [_jsx("option", { value: "", children: "-- Ch\u1ECDn t\u1EEB trong word bank --" }), usableWords.map((word, index) => (_jsx("option", { value: word, children: word }, `${word}-${index}`)))] }), validationErrors.correctAnswer && (_jsx("p", { className: "text-sm text-red-600", children: validationErrors.correctAnswer })), validationErrors.wordBank && _jsx("p", { className: "text-sm text-red-600", children: validationErrors.wordBank })] }), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700", children: [_jsx("p", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("ul", { className: "mt-1 list-inside list-disc", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-3.5 w-3.5 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "mt-0.5 text-xs text-gray-500", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { className: "px-4 pb-4", children: _jsx(Textarea, { id: "mwtp-explanation", value: explanation, onChange: (event) => setExplanation(event.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] resize-none border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200" }) })] })] }));
+}
+export function MatchWordToPictureCreator(props) {
+    return _jsx(MatchWordToPictureContent, { ...props });
+}

package/dist/components/questions/types/match-word-to-picture/MatchWordToPictureGroupClient.d.ts

@@ -0,0 +1,2 @@
+import type { MatchWordToPictureGroupClientProps } from '../../_shared/types/match-word-to-picture.type';
+export declare function MatchWordToPictureGroupClient({ questionData, isReviewMode, userAnswers, onAnswerChange, }: MatchWordToPictureGroupClientProps): import("react").JSX.Element;

package/dist/components/questions/types/match-word-to-picture/MatchWordToPictureGroupClient.js

@@ -0,0 +1,65 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, CircleHelp, Lightbulb, Star, X } from 'lucide-react';
+import { cn } from '../../../../shared/lib/utils';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+function normalizeWord(value) {
+    return value.trim().toLowerCase();
+}
+function ClientImageItem({ url, alt }) {
+    const { previewUrl, isLoading } = usePresignedFileUrl(url);
+    const src = previewUrl ||
+        (typeof url === 'string' &&
+            (url.startsWith('http') || url.startsWith('blob:') || url.startsWith('data:'))
+            ? url
+            : '');
+    if (!url) {
+        return (_jsx("div", { className: "flex h-28 w-28 items-center justify-center rounded-lg border border-dashed border-gray-300 bg-gray-50 text-xs text-gray-400", children: "Ch\u01B0a c\u00F3 \u1EA3nh" }));
+    }
+    if (!src && !isLoading) {
+        return (_jsx("div", { className: "flex h-28 w-28 items-center justify-center rounded-lg border border-gray-200 bg-gray-50 text-xs text-gray-400", children: "Kh\u00F4ng t\u1EA3i \u0111\u01B0\u1EE3c \u1EA3nh" }));
+    }
+    return (_jsx("div", { className: "relative h-28 w-28 flex-shrink-0 overflow-hidden rounded-lg border border-gray-200 bg-gray-50", children: isLoading ? (_jsx("div", { className: "flex h-full w-full items-center justify-center", children: _jsx("div", { className: "h-6 w-6 animate-spin rounded-full border-2 border-gray-200 border-t-violet-500" }) })) : (_jsx("img", { src: src, alt: alt || 'Picture', className: "h-full w-full object-contain" })) }));
+}
+export function MatchWordToPictureGroupClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, }) {
+    const items = questionData.items || [];
+    const wordBank = questionData.wordBank || [];
+    const handleSelect = (itemIndex, value) => {
+        const item = items[itemIndex];
+        if (isReviewMode || item?.isExample || !onAnswerChange) {
+            return;
+        }
+        const next = items.map((entry, index) => entry.isExample ? entry.correctAnswer : (userAnswers[index] ?? ''));
+        next[itemIndex] = value;
+        onAnswerChange(next);
+    };
+    const usedWords = new Set();
+    items.forEach((item, index) => {
+        const value = item.isExample ? item.correctAnswer : (userAnswers[index] ?? '');
+        if (value.trim()) {
+            usedWords.add(normalizeWord(value));
+        }
+    });
+    return (_jsxs("div", { className: "space-y-4", children: [questionData.instruction && (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800", children: questionData.instruction })), wordBank.length > 0 && (_jsxs("div", { className: "rounded-xl border border-violet-200 bg-gradient-to-r from-violet-50 to-indigo-50 p-4", children: [_jsx("p", { className: "mb-3 text-sm font-semibold text-violet-700", children: "Word bank:" }), _jsx("div", { className: "flex flex-wrap gap-2", children: wordBank.map((word, index) => {
+                            const isUsed = usedWords.has(normalizeWord(word));
+                            return (_jsx("span", { className: cn('rounded-full border px-3 py-1 text-sm font-semibold', isUsed
+                                    ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
+                                    : 'border-violet-200 bg-white text-slate-700'), children: word }, `${word}-${index}`));
+                        }) })] })), items.map((item, itemIndex) => {
+                const selectedWord = item.isExample
+                    ? item.correctAnswer
+                    : (userAnswers[itemIndex] ?? '');
+                const canSelect = !isReviewMode && !item.isExample && Boolean(onAnswerChange);
+                const isCorrect = normalizeWord(selectedWord) === normalizeWord(item.correctAnswer) &&
+                    Boolean(item.correctAnswer);
+                return (_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-4 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-violet-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] }))] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "flex flex-col gap-4 p-4 sm:flex-row sm:items-center", children: [_jsx(ClientImageItem, { url: item.imageUrl, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1}` }), _jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [_jsx("p", { className: "text-sm font-semibold text-gray-800", children: "Ch\u1ECDn t\u1EEB ph\u00F9 h\u1EE3p" }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("select", { value: selectedWord, disabled: !canSelect, onChange: (event) => handleSelect(itemIndex, event.target.value), className: cn('h-10 max-w-xs rounded-md border-2 bg-white px-3 text-sm font-medium', isReviewMode && isCorrect
+                                                        ? 'border-green-400 bg-green-50 text-green-700'
+                                                        : isReviewMode && selectedWord && !isCorrect
+                                                            ? 'border-red-400 bg-red-50 text-red-700'
+                                                            : 'border-violet-300 focus:border-violet-500 focus:ring-violet-200', !canSelect && 'cursor-default opacity-80'), children: [_jsx("option", { value: "", children: "-- Ch\u1ECDn t\u1EEB --" }), wordBank.map((word, wordIndex) => {
+                                                            const isUsedByOther = usedWords.has(normalizeWord(word)) &&
+                                                                normalizeWord(word) !== normalizeWord(selectedWord);
+                                                            return (_jsx("option", { value: word, disabled: isUsedByOther, children: word }, `${word}-${wordIndex}`));
+                                                        })] }), isReviewMode && !item.isExample && (_jsx("span", { className: "flex items-center gap-1", children: isCorrect ? (_jsx(Check, { className: "h-5 w-5 text-green-500" })) : (_jsx(X, { className: "h-5 w-5 text-red-500" })) }))] }), isReviewMode && !item.isExample && !isCorrect && (_jsxs("p", { className: "text-sm text-green-700", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", _jsx("strong", { children: item.correctAnswer || '—' })] }))] })] })] }, `${item.questionNumber}-${itemIndex}`));
+            }), isReviewMode && questionData.explanation && (_jsxs("div", { className: "flex items-start gap-2 rounded-xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-800", children: [_jsx(Lightbulb, { className: "mt-0.5 h-4 w-4 flex-shrink-0" }), questionData.explanation] }))] }));
+}

package/dist/components/questions/types/match-word-to-picture/WordBankEditor.d.ts

@@ -0,0 +1,8 @@
+interface WordBankEditorProps {
+    wordBank: string[];
+    instruction: string;
+    onWordBankChange: (wordBank: string[]) => void;
+    onInstructionChange: (instruction: string) => void;
+}
+export declare function WordBankEditor({ wordBank, instruction, onWordBankChange, onInstructionChange, }: WordBankEditorProps): import("react").JSX.Element;
+export {};

package/dist/components/questions/types/match-word-to-picture/WordBankEditor.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../../components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { Input } from '../../../../components/ui/input';
+import { Label } from '../../../../components/ui/label';
+import { Plus, Trash2, Type } from 'lucide-react';
+export function WordBankEditor({ wordBank, instruction, onWordBankChange, onInstructionChange, }) {
+    const updateWord = (index, value) => {
+        const next = [...wordBank];
+        next[index] = value;
+        onWordBankChange(next);
+    };
+    return (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-violet-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-violet-600 shadow-sm", children: _jsx(Type, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "Word bank nh\u00F3m" }), _jsx("p", { className: "text-xs text-gray-500", children: "C\u00E1c t\u1EEB d\u00F9ng chung cho m\u1ECDi tranh trong nh\u00F3m" })] })] }) }), _jsxs(CardContent, { className: "space-y-4 px-4 pb-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "mwtp-instruction", className: "text-sm font-medium text-gray-700", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "mwtp-instruction", value: instruction, onChange: (event) => onInstructionChange(event.target.value), placeholder: "Look and complete." })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { className: "text-sm font-medium text-gray-700", children: "Danh s\u00E1ch t\u1EEB" }), _jsx("div", { className: "space-y-2", children: wordBank.map((word, index) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { value: word, onChange: (event) => updateWord(index, event.target.value), placeholder: `Từ ${index + 1}` }), _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: () => onWordBankChange(wordBank.filter((_, wordIndex) => wordIndex !== index)), "aria-label": `Xóa từ ${index + 1}`, children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, index))) }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onWordBankChange([...wordBank, '']), className: "gap-2", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm t\u1EEB"] })] })] })] }));
+}

package/dist/components/questions/types/match-word-to-picture/index.d.ts

@@ -0,0 +1,6 @@
+export { MatchWordToPictureCreator } from './MatchWordToPictureCreator';
+export { MatchWordToPictureClient } from './MatchWordToPictureClient';
+export { MatchWordToPictureGroupClient } from './MatchWordToPictureGroupClient';
+export { matchWordToPictureRegistration } from './register';
+export { mapQuestionToMatchWordToPictureData } from './map-match-word-to-picture-data';
+export { mapQuestionToMatchWordToPictureGroupData } from './map-match-word-to-picture-group-data';

package/dist/components/questions/types/match-word-to-picture/index.js

@@ -0,0 +1,6 @@
+export { MatchWordToPictureCreator } from './MatchWordToPictureCreator';
+export { MatchWordToPictureClient } from './MatchWordToPictureClient';
+export { MatchWordToPictureGroupClient } from './MatchWordToPictureGroupClient';
+export { matchWordToPictureRegistration } from './register';
+export { mapQuestionToMatchWordToPictureData } from './map-match-word-to-picture-data';
+export { mapQuestionToMatchWordToPictureGroupData } from './map-match-word-to-picture-group-data';

package/dist/components/questions/types/match-word-to-picture/map-match-word-to-picture-data.d.ts

@@ -0,0 +1,2 @@
+import { type MatchWordToPictureData } from '../../_shared/types/match-word-to-picture.type';
+export declare function mapQuestionToMatchWordToPictureData(question: Record<string, unknown> | null | undefined): MatchWordToPictureData;

package/dist/components/questions/types/match-word-to-picture/map-match-word-to-picture-data.js

@@ -0,0 +1,53 @@
+import { MATCH_WORD_TO_PICTURE_DEFAULT_INSTRUCTION, } from '../../_shared/types/match-word-to-picture.type';
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function asRecord(value) {
+    return isRecord(value) ? value : {};
+}
+function asString(value, fallback = '') {
+    return typeof value === 'string' ? value : fallback;
+}
+function asStringList(value) {
+    if (!Array.isArray(value)) {
+        return [];
+    }
+    return value
+        .map((item) => (typeof item === 'string' ? item.trim() : ''))
+        .filter(Boolean);
+}
+export function mapQuestionToMatchWordToPictureData(question) {
+    const source = asRecord(question);
+    const content = asRecord(source.content);
+    const meta = asRecord(content.meta);
+    const answer = asRecord(source.answer ?? source.correctAnswer ?? source.correct_answer);
+    const questionGroup = asRecord(source.questionGroup);
+    const groupPayload = asRecord(questionGroup.payload);
+    const correctAnswer = asString(answer.answer) || asString(answer.correctAnswer);
+    const wordBank = asStringList(groupPayload.wordBank).length
+        ? asStringList(groupPayload.wordBank)
+        : asStringList(meta.wordBank).length
+            ? asStringList(meta.wordBank)
+            : asStringList(answer.wordBank).length
+                ? asStringList(answer.wordBank)
+                : correctAnswer
+                    ? [correctAnswer]
+                    : [];
+    return {
+        imageUrl: asString(content.imageUrl) || asString(answer.imageUrl),
+        correctAnswer,
+        points: typeof source.points === 'number' ? source.points : 1,
+        groupNumber: typeof questionGroup.groupNumber === 'number'
+            ? questionGroup.groupNumber
+            : typeof answer.groupNumber === 'number'
+                ? answer.groupNumber
+                : 1,
+        isExample: source.isExample === true || answer.isExample === true,
+        wordBank,
+        instruction: asString(groupPayload.instruction) ||
+            asString(meta.instruction) ||
+            asString(answer.instruction) ||
+            MATCH_WORD_TO_PICTURE_DEFAULT_INSTRUCTION,
+        explanation: asString(source.explanation) || asString(answer.explanation) || undefined,
+    };
+}

package/dist/components/questions/types/match-word-to-picture/map-match-word-to-picture-group-data.d.ts

@@ -0,0 +1,4 @@
+import { type MatchWordToPictureGroupData, type MatchWordToPictureGroupItemData } from '../../_shared/types/match-word-to-picture.type';
+export declare function createEmptyMatchWordToPictureGroupItem(questionNumber: number): MatchWordToPictureGroupItemData;
+export declare function mapMatchWordToPictureGroupItem(item: unknown, index: number, fallbackAnswer?: string): MatchWordToPictureGroupItemData;
+export declare function mapQuestionToMatchWordToPictureGroupData(question: Record<string, unknown> | null | undefined): MatchWordToPictureGroupData;