@tinyweb_dev/oe-exam-sdk 0.2.4 → 0.2.6

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

@@ -0,0 +1,75 @@
+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 createEmptyMatchWordToPictureGroupItem(questionNumber) {
+    return {
+        imageUrl: '',
+        correctAnswer: '',
+        isExample: false,
+        points: 1,
+        questionNumber,
+    };
+}
+export function mapMatchWordToPictureGroupItem(item, index, fallbackAnswer) {
+    const record = asRecord(item);
+    const content = asRecord(record.content);
+    const correctAnswer = asRecord(record.correctAnswer);
+    const isExample = record.isExample === true;
+    return {
+        imageUrl: asString(content.imageUrl) || asString(record.imageUrl),
+        correctAnswer: asString(correctAnswer.answer) ||
+            asString(record.correctAnswer) ||
+            asString(fallbackAnswer),
+        isExample,
+        points: isExample ? 0 : typeof record.points === 'number' ? record.points : 1,
+        questionNumber: typeof record.questionNumber === 'number' ? record.questionNumber : index + 1,
+    };
+}
+export function mapQuestionToMatchWordToPictureGroupData(question) {
+    const source = asRecord(question);
+    const content = asRecord(source.content);
+    const meta = asRecord(content.meta);
+    const answer = asRecord(source.answer);
+    const correctAnswer = asRecord(source.correctAnswer ?? source.correct_answer ?? answer.correctAnswer);
+    const questionGroup = asRecord(source.questionGroup);
+    const groupPayload = asRecord(questionGroup.payload);
+    const explanation = String(source.explanation || answer.explanation || '');
+    const fallbackAnswers = Array.isArray(correctAnswer.answer)
+        ? correctAnswer.answer.map((value) => (typeof value === 'string' ? value : ''))
+        : [];
+    const items = Array.isArray(content.items)
+        ? content.items.map((item, index) => mapMatchWordToPictureGroupItem(item, index, fallbackAnswers[index]))
+        : [createEmptyMatchWordToPictureGroupItem(1)];
+    const wordBank = asStringList(meta.wordBank).length
+        ? asStringList(meta.wordBank)
+        : asStringList(groupPayload.wordBank).length
+            ? asStringList(groupPayload.wordBank)
+            : asStringList(answer.wordBank).length
+                ? asStringList(answer.wordBank)
+                : Array.from(new Set(items.map((item) => item.correctAnswer).filter(Boolean)));
+    return {
+        instruction: asString(meta.instruction) ||
+            asString(groupPayload.instruction) ||
+            asString(answer.instruction) ||
+            MATCH_WORD_TO_PICTURE_DEFAULT_INSTRUCTION,
+        wordBank,
+        items,
+        explanation,
+        points: items.reduce((total, item) => (item.isExample ? total : total + (item.points || 0)), 0),
+    };
+}

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

@@ -0,0 +1,2 @@
+import { QuestionTypeRegistration } from '../../creator/question-type-registry';
+export declare const matchWordToPictureRegistration: QuestionTypeRegistration;

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

@@ -0,0 +1,55 @@
+import { MATCH_WORD_TO_PICTURE_DEFAULT_INSTRUCTION } from '../../_shared/types/match-word-to-picture.type';
+import { MatchWordToPictureCreator } from './MatchWordToPictureCreator';
+export const matchWordToPictureRegistration = {
+    component: MatchWordToPictureCreator,
+    transformInitialData: (initialData) => {
+        const content = initialData?.content;
+        const answer = initialData?.answer;
+        const questionGroup = initialData?.questionGroup;
+        const groupPayload = questionGroup?.payload || {};
+        const groupNumber = questionGroup?.groupNumber || 1;
+        const wordBank = (Array.isArray(groupPayload.wordBank) && groupPayload.wordBank) ||
+            (Array.isArray(answer?.wordBank) && answer?.wordBank) ||
+            [];
+        return {
+            imageUrl: content?.imageUrl || answer?.imageUrl || '',
+            correctAnswer: answer?.answer || answer?.correctAnswer || '',
+            points: initialData?.points || 1,
+            groupNumber: answer?.groupNumber || groupNumber,
+            isExample: initialData?.isExample || answer?.isExample || false,
+            wordBank,
+            instruction: groupPayload.instruction ||
+                answer?.instruction ||
+                MATCH_WORD_TO_PICTURE_DEFAULT_INSTRUCTION,
+            explanation: initialData?.explanation || answer?.explanation || '',
+        };
+    },
+    getExtraProps: (ctx) => ({
+        groups: ctx.groups,
+        groupConfig: ctx.groupConfig,
+        questionConfig: ctx.questionConfig,
+        questionIndexInPart: ctx.questionIndexInPart,
+        partId: ctx.partId,
+        validationRef: ctx.validationRef,
+    }),
+    wrapOnSave: (data, ctx) => ({
+        type: ctx.questionType,
+        content: ctx.state.content,
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: data,
+        explanation: data?.explanation || '',
+    }),
+    wrapOnChange: (data, ctx) => ({
+        type: ctx.questionType,
+        content: ctx.state.content,
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: data,
+        explanation: data?.explanation || '',
+    }),
+};

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

@@ -0,0 +1,11 @@
+import { ExamQuestion } from '../../../../shared/types/entities/exam.types';
+import type { TransformResult } from '../../../../shared/lib/utils/question-transform-types';
+/**
+ * Transform MATCH_WORD_TO_PICTURE creator data → API format
+ *
+ * API format:
+ *   content: { imageUrl }
+ *   correctAnswer: { answer }
+ *   questionGroup.payload: { wordBank, instruction }
+ */
+export declare function transformMatchWordToPicture(question: Partial<ExamQuestion>): TransformResult;

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

@@ -0,0 +1,43 @@
+import { MATCH_WORD_TO_PICTURE_DEFAULT_INSTRUCTION } from '../../_shared/types/match-word-to-picture.type';
+function normalizeWordBank(wordBank) {
+    if (!Array.isArray(wordBank)) {
+        return [];
+    }
+    return wordBank
+        .filter((word) => typeof word === 'string')
+        .map((word) => word.trim())
+        .filter((word) => word.length > 0);
+}
+/**
+ * Transform MATCH_WORD_TO_PICTURE creator data → API format
+ *
+ * API format:
+ *   content: { imageUrl }
+ *   correctAnswer: { answer }
+ *   questionGroup.payload: { wordBank, instruction }
+ */
+export function transformMatchWordToPicture(question) {
+    const answerData = question.answer;
+    if (!answerData) {
+        return { apiContent: {}, apiCorrectAnswer: {} };
+    }
+    const wordBank = normalizeWordBank(answerData.wordBank);
+    const instruction = typeof answerData.instruction === 'string' && answerData.instruction.trim()
+        ? answerData.instruction.trim()
+        : MATCH_WORD_TO_PICTURE_DEFAULT_INSTRUCTION;
+    return {
+        apiContent: {
+            imageUrl: answerData.imageUrl || '',
+        },
+        apiCorrectAnswer: {
+            answer: answerData.correctAnswer || '',
+        },
+        totalPoints: answerData.points || 1,
+        imageData: {
+            wordBank,
+            instruction,
+        },
+        groupNumber: answerData.groupNumber || 1,
+        isExample: answerData.isExample || false,
+    };
+}

package/dist/components/questions/types/matching-with-lines-group/MatchingWithLinesBoard.d.ts

@@ -0,0 +1,20 @@
+export interface MatchingWithLinesBoardLeftItem {
+    imageUrl: string;
+    isExample?: boolean;
+    questionNumber?: number;
+}
+export interface MatchingWithLinesBoardRightItem {
+    id: string;
+    text: string;
+}
+interface MatchingWithLinesBoardProps {
+    leftItems: MatchingWithLinesBoardLeftItem[];
+    rightItems: MatchingWithLinesBoardRightItem[];
+    values: string[];
+    correctValues?: string[];
+    onChange?: (next: string[]) => void;
+    isReviewMode?: boolean;
+    disabled?: boolean;
+}
+export declare function MatchingWithLinesBoard({ leftItems, rightItems, values, correctValues, onChange, isReviewMode, disabled, }: MatchingWithLinesBoardProps): import("react").JSX.Element;
+export {};

package/dist/components/questions/types/matching-with-lines-group/MatchingWithLinesBoard.js

@@ -0,0 +1,109 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { Star } from 'lucide-react';
+import { cn } from '../../../../shared/lib/utils';
+import { ResolvedImage } from '../../../../components/common/ResolvedImage';
+export function MatchingWithLinesBoard({ leftItems, rightItems, values, correctValues, onChange, isReviewMode = false, disabled = false, }) {
+    const containerRef = useRef(null);
+    const leftDotRefs = useRef([]);
+    const rightDotRefs = useRef([]);
+    const [lines, setLines] = useState([]);
+    const [selectedLeft, setSelectedLeft] = useState(null);
+    const measure = useCallback(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const box = container.getBoundingClientRect();
+        const next = [];
+        leftItems.forEach((left, index) => {
+            const rightId = values[index] || '';
+            if (!rightId)
+                return;
+            const rightIndex = rightItems.findIndex((item) => item.id === rightId);
+            if (rightIndex < 0)
+                return;
+            const leftDot = leftDotRefs.current[index];
+            const rightDot = rightDotRefs.current[rightIndex];
+            if (!leftDot || !rightDot)
+                return;
+            const leftBox = leftDot.getBoundingClientRect();
+            const rightBox = rightDot.getBoundingClientRect();
+            const expected = correctValues?.[index] || '';
+            let color = '#0f766e';
+            if (isReviewMode && !left.isExample) {
+                color = rightId && expected && rightId === expected ? '#16a34a' : '#dc2626';
+            }
+            else if (left.isExample) {
+                color = '#d97706';
+            }
+            next.push({
+                x1: leftBox.left + leftBox.width / 2 - box.left,
+                y1: leftBox.top + leftBox.height / 2 - box.top,
+                x2: rightBox.left + rightBox.width / 2 - box.left,
+                y2: rightBox.top + rightBox.height / 2 - box.top,
+                color,
+            });
+        });
+        setLines(next);
+    }, [correctValues, isReviewMode, leftItems, rightItems, values]);
+    useLayoutEffect(() => {
+        measure();
+        const container = containerRef.current;
+        if (!container || typeof ResizeObserver === 'undefined')
+            return undefined;
+        const observer = new ResizeObserver(() => measure());
+        observer.observe(container);
+        window.addEventListener('resize', measure);
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('resize', measure);
+        };
+    }, [measure]);
+    const locked = disabled || isReviewMode;
+    const assignPair = (leftIndex, rightId) => {
+        if (locked || leftItems[leftIndex]?.isExample)
+            return;
+        const next = leftItems.map((_, index) => values[index] || '');
+        next.forEach((id, index) => {
+            if (index !== leftIndex && id === rightId)
+                next[index] = '';
+        });
+        next[leftIndex] = next[leftIndex] === rightId ? '' : rightId;
+        onChange?.(next);
+        setSelectedLeft(null);
+    };
+    const handleLeftClick = (index) => {
+        if (locked || leftItems[index]?.isExample)
+            return;
+        if (selectedLeft === index) {
+            setSelectedLeft(null);
+            return;
+        }
+        if (values[index]) {
+            const next = [...values];
+            next[index] = '';
+            onChange?.(next);
+            setSelectedLeft(null);
+            return;
+        }
+        setSelectedLeft(index);
+    };
+    const handleRightClick = (rightId) => {
+        if (locked || selectedLeft === null)
+            return;
+        assignPair(selectedLeft, rightId);
+    };
+    return (_jsxs("div", { ref: containerRef, className: "relative", children: [_jsx("svg", { className: "pointer-events-none absolute inset-0 h-full w-full", "aria-hidden": true, children: lines.map((line, index) => (_jsx("line", { x1: line.x1, y1: line.y1, x2: line.x2, y2: line.y2, stroke: line.color, strokeWidth: 3, strokeLinecap: "round" }, `${line.x1}-${line.y1}-${index}`))) }), _jsxs("div", { className: "flex justify-between gap-6 sm:gap-10", children: [_jsx("div", { className: "flex w-max flex-col gap-2", children: leftItems.map((item, index) => (_jsxs("button", { type: "button", onClick: () => handleLeftClick(index), disabled: locked || item.isExample, "aria-label": `Connect left item ${index + 1}`, "aria-pressed": selectedLeft === index, className: cn('box-border flex h-14 w-max items-center gap-2 rounded-lg border bg-white px-1.5 text-left shadow-sm', item.isExample ? 'border-amber-200' : 'border-gray-200', selectedLeft === index && 'ring-2 ring-teal-500', !locked && !item.isExample && 'cursor-pointer hover:border-teal-400'), children: [_jsxs("div", { className: "relative size-11 shrink-0 overflow-hidden rounded-md bg-gray-50", children: [_jsx(ResolvedImage, { src: item.imageUrl, alt: `Match item ${item.questionNumber || index + 1}`, className: "h-full w-full object-contain" }), item.isExample && (_jsxs("span", { className: "absolute left-0.5 top-0.5 inline-flex items-center gap-0.5 rounded-full bg-amber-100 px-1 py-0.5 text-[10px] font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Ex"] }))] }), _jsx("span", { ref: (node) => {
+                                        leftDotRefs.current[index] = node;
+                                    }, className: cn('h-4 w-4 shrink-0 rounded-full border-2 bg-white', selectedLeft === index
+                                        ? 'border-teal-600 bg-teal-500'
+                                        : values[index]
+                                            ? 'border-teal-600'
+                                            : 'border-gray-400'), "aria-hidden": true })] }, `left-${index}`))) }), _jsx("div", { className: "flex w-max flex-col gap-2", children: rightItems.map((item, index) => {
+                            const used = values.includes(item.id);
+                            return (_jsxs("button", { type: "button", onClick: () => handleRightClick(item.id), disabled: locked, "aria-label": `Connect right item ${item.text || index + 1}`, className: cn('box-border flex h-14 w-full items-center gap-2 rounded-lg border border-gray-200 bg-white px-2 text-left shadow-sm', selectedLeft !== null && !locked && 'cursor-pointer hover:border-teal-400', used && 'border-teal-200'), children: [_jsx("span", { ref: (node) => {
+                                            rightDotRefs.current[index] = node;
+                                        }, className: cn('h-4 w-4 shrink-0 rounded-full border-2 bg-white', used || selectedLeft !== null ? 'border-teal-600' : 'border-gray-400', selectedLeft !== null && 'bg-teal-100'), "aria-hidden": true }), _jsx("span", { className: "whitespace-nowrap text-sm font-medium text-gray-800", children: item.text || '—' })] }, item.id || `right-${index}`));
+                        }) })] })] }));
+}

package/dist/components/questions/types/matching-with-lines-group/MatchingWithLinesGroupClient.d.ts

@@ -0,0 +1,2 @@
+import type { MatchingWithLinesGroupClientProps } from '../../_shared/types/matching-with-lines-group.type';
+export declare function MatchingWithLinesGroupClient({ questionData, isReviewMode, userAnswers, onAnswerChange, onAnswersChange, }: MatchingWithLinesGroupClientProps): import("react").JSX.Element;

package/dist/components/questions/types/matching-with-lines-group/MatchingWithLinesGroupClient.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Lightbulb } from 'lucide-react';
+import { MatchingWithLinesBoard } from './MatchingWithLinesBoard';
+export function MatchingWithLinesGroupClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, onAnswersChange, }) {
+    const items = questionData.items || [];
+    const rightItems = questionData.rightItems || [];
+    const canEdit = Boolean(onAnswerChange || onAnswersChange);
+    const values = items.map((item, index) => {
+        if (item.isExample)
+            return item.correctAnswer || '';
+        return typeof userAnswers[index] === 'string' ? userAnswers[index] : '';
+    });
+    const correctValues = items.map((item) => item.correctAnswer || '');
+    const handleChange = (next) => {
+        onAnswersChange?.(next);
+        next.forEach((rightId, index) => {
+            if (items[index]?.isExample)
+                return;
+            if ((userAnswers[index] || '') !== rightId) {
+                onAnswerChange?.(index, rightId);
+            }
+        });
+    };
+    return (_jsxs("div", { className: "space-y-4", children: [(questionData.title || questionData.instruction) && (_jsxs("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3", children: [questionData.title && (_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-indigo-500", children: questionData.title })), questionData.instruction && (_jsx("p", { className: "text-sm font-medium text-indigo-800", children: questionData.instruction }))] })), _jsx(MatchingWithLinesBoard, { leftItems: items.map((item) => ({
+                    imageUrl: item.imageUrl,
+                    isExample: item.isExample,
+                    questionNumber: item.questionNumber,
+                })), rightItems: rightItems, values: values, correctValues: isReviewMode ? correctValues : undefined, onChange: handleChange, isReviewMode: isReviewMode, disabled: isReviewMode || !canEdit }), 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/matching-with-lines-group/MatchingWithLinesGroupCreator.d.ts

@@ -0,0 +1,2 @@
+import type { MatchingWithLinesGroupCreatorProps } from '../../_shared/types/matching-with-lines-group.type';
+export declare function MatchingWithLinesGroupCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }: MatchingWithLinesGroupCreatorProps): import("react").JSX.Element;

package/dist/components/questions/types/matching-with-lines-group/MatchingWithLinesGroupCreator.js

@@ -0,0 +1,180 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '../../../../components/ui/button';
+import { Label } from '../../../../components/ui/label';
+import { Input } from '../../../../components/ui/input';
+import { Textarea } from '../../../../components/ui/textarea';
+import { PointsInput } from '../../../../components/ui/points-input';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { Switch } from '../../../../components/ui/switch';
+import { useDebouncedCallback } from '../../../../shared/lib/hooks';
+import { Eye, Pencil, Plus, Star, Trash2 } from 'lucide-react';
+import { MatchingWithLinesGroupClient } from './MatchingWithLinesGroupClient';
+import { MatchingWithLinesImageField } from './MatchingWithLinesImageField';
+import { createEmptyMatchingPair, nextRightId } from './map-matching-with-lines-group-data';
+import { MATCHING_WITH_LINES_GROUP_DEFAULT_INSTRUCTION } from '../../_shared/types/matching-with-lines-group.type';
+function parsePointsValue(raw, allowZero = false) {
+    if (raw === '')
+        return allowZero ? 0 : 1;
+    const parsed = parseInt(raw.replace(/[^0-9]/g, ''), 10);
+    if (Number.isNaN(parsed))
+        return allowZero ? 0 : 1;
+    const min = allowZero ? 0 : 1;
+    return Math.max(min, parsed);
+}
+function normalizeRightItems(raw) {
+    if (!Array.isArray(raw) || raw.length === 0) {
+        return [
+            { id: 'r1', text: '' },
+            { id: 'r2', text: '' },
+        ];
+    }
+    return raw.map((item, index) => ({
+        id: item.id || `r${index + 1}`,
+        text: item.text || '',
+    }));
+}
+function normalizeItems(rawItems, rightItems) {
+    if (!Array.isArray(rawItems) || rawItems.length === 0) {
+        return rightItems.map((right, index) => ({
+            imageUrl: '',
+            correctAnswer: right.id,
+            isExample: false,
+            points: 1,
+            questionNumber: index + 1,
+        }));
+    }
+    return rawItems.map((item, index) => ({
+        imageUrl: item.imageUrl || '',
+        correctAnswer: item.correctAnswer || rightItems[index]?.id || '',
+        isExample: item.isExample === true,
+        points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+        questionNumber: item.questionNumber || index + 1,
+    }));
+}
+function sumPoints(items) {
+    return items.reduce((total, item) => (item.isExample ? total : total + (typeof item.points === 'number' ? item.points : 1)), 0);
+}
+export function MatchingWithLinesGroupCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }) {
+    const [title, setTitle] = useState(initialData?.title || '');
+    const [instruction, setInstruction] = useState(initialData?.instruction || MATCHING_WITH_LINES_GROUP_DEFAULT_INSTRUCTION);
+    const [rightItems, setRightItems] = useState(() => normalizeRightItems(initialData?.rightItems));
+    const [items, setItems] = useState(() => normalizeItems(initialData?.items, normalizeRightItems(initialData?.rightItems)));
+    const [explanation, setExplanation] = useState(initialData?.explanation || '');
+    const [isClientMode, setIsClientMode] = useState(false);
+    const [errors, setErrors] = useState([]);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    const buildPayload = (nextTitle = title, nextInstruction = instruction, nextRightItems = rightItems, nextItems = items, nextExplanation = explanation) => ({
+        title: nextTitle,
+        instruction: nextInstruction,
+        rightItems: nextRightItems,
+        items: nextItems,
+        explanation: nextExplanation,
+        points: sumPoints(nextItems),
+    });
+    const debouncedOnChange = useDebouncedCallback((payload) => {
+        onChangeRef.current?.(payload);
+    }, 300);
+    useEffect(() => {
+        const payload = buildPayload();
+        const serialized = JSON.stringify(payload);
+        if (serialized !== previousPayloadRef.current) {
+            previousPayloadRef.current = serialized;
+            debouncedOnChange(payload);
+            onUnsavedChangesChange?.(true);
+        }
+    }, [title, instruction, rightItems, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
+    const validate = () => {
+        const nextErrors = [];
+        if (!instruction.trim()) {
+            nextErrors.push('Hướng dẫn (Instruction) không được để trống.');
+        }
+        if (items.length < 2 || rightItems.length < 2) {
+            nextErrors.push('Cần ít nhất 2 cặp để nối.');
+        }
+        if (items.length !== rightItems.length) {
+            nextErrors.push('Số ảnh (cột trái) phải bằng số từ (cột phải).');
+        }
+        const ids = new Set();
+        rightItems.forEach((item, index) => {
+            if (!item.id.trim())
+                nextErrors.push(`Từ ${index + 1}: id không được để trống.`);
+            if (!item.text.trim())
+                nextErrors.push(`Từ ${index + 1}: nội dung không được để trống.`);
+            if (item.id.trim() && ids.has(item.id.trim())) {
+                nextErrors.push(`Từ ${index + 1}: id "${item.id}" bị trùng.`);
+            }
+            ids.add(item.id.trim());
+        });
+        const usedAnswers = new Set();
+        items.forEach((item, index) => {
+            if (!item.imageUrl.trim())
+                nextErrors.push(`Ảnh ${index + 1}: cần upload hình.`);
+            if (!item.correctAnswer.trim())
+                nextErrors.push(`Ảnh ${index + 1}: chưa chọn đáp án.`);
+            if (item.correctAnswer && usedAnswers.has(item.correctAnswer)) {
+                nextErrors.push(`Ảnh ${index + 1}: đáp án bị trùng (mỗi từ chỉ dùng 1 lần).`);
+            }
+            usedAnswers.add(item.correctAnswer);
+        });
+        setErrors(nextErrors);
+        return nextErrors.length === 0;
+    };
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => validate(),
+                getFormData: () => buildPayload(),
+            };
+        }
+    }, [validationRef, title, instruction, rightItems, items, explanation]);
+    const updateItem = (index, patch) => {
+        setItems((prev) => {
+            const next = [...prev];
+            const current = next[index];
+            if (!current)
+                return prev;
+            next[index] = { ...current, ...patch };
+            return next;
+        });
+    };
+    const updateRightItem = (index, patch) => {
+        setRightItems((prev) => {
+            const current = prev[index];
+            if (!current)
+                return prev;
+            const next = [...prev];
+            const updated = { ...current, ...patch };
+            next[index] = updated;
+            if (patch.id && patch.id !== current.id) {
+                setItems((itemsPrev) => itemsPrev.map((item) => (item.correctAnswer === current.id ? { ...item, correctAnswer: patch.id || '' } : item)));
+            }
+            return next;
+        });
+    };
+    const addPair = () => {
+        const rightId = nextRightId(rightItems.map((item) => item.id));
+        const pair = createEmptyMatchingPair(items.length + 1, rightId);
+        setRightItems((prev) => [...prev, pair.rightItem]);
+        setItems((prev) => [...prev, pair.item]);
+    };
+    const removePair = (index) => {
+        if (items.length <= 2)
+            return;
+        setRightItems((prev) => prev.filter((_, i) => i !== index));
+        setItems((prev) => prev.filter((_, i) => i !== index).map((item, i) => ({
+            ...item,
+            questionNumber: i + 1,
+        })));
+    };
+    const currentPayload = buildPayload();
+    const displayErrors = externalErrors && externalErrors.length > 0 ? externalErrors : errors;
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-medium text-gray-900", children: "T\u1EA1o c\u00E2u h\u1ECFi N\u1ED1i b\u1EB1ng \u0111\u01B0\u1EDDng k\u1EBB (Nh\u00F3m)" }), _jsx("p", { className: "text-sm text-gray-500", children: "N\u1ED1i \u1EA3nh c\u1ED9t tr\u00E1i v\u1EDBi t\u1EEB c\u1ED9t ph\u1EA3i. M\u1ED7i t\u1EEB d\u00F9ng \u0111\u00FAng 1 l\u1EA7n." })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsClientMode((prev) => !prev), className: "gap-2", children: [isClientMode ? _jsx(Pencil, { className: "h-4 w-4" }) : _jsx(Eye, { className: "h-4 w-4" }), isClientMode ? 'Chế độ chỉnh sửa' : 'Xem trước học sinh'] })] }), displayErrors.length > 0 && (_jsxs("div", { className: "rounded-lg border border-red-200 bg-red-50 p-4", children: [_jsx("h3", { className: "text-sm font-medium text-red-800", children: "C\u1EA7n s\u1EEDa c\u00E1c l\u1ED7i sau:" }), _jsx("ul", { className: "mt-2 list-disc space-y-1 pl-5 text-sm text-red-700", children: displayErrors.map((err, i) => (_jsx("li", { children: err }, i))) })] })), isClientMode ? (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base font-semibold", children: "Xem tr\u01B0\u1EDBc hi\u1EC3n th\u1ECB h\u1ECDc sinh" }) }), _jsx(CardContent, { children: _jsx(MatchingWithLinesGroupClient, { questionData: currentPayload, userAnswers: currentPayload.items.map((item) => item.correctAnswer) }) })] })) : (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base font-semibold", children: "H\u01B0\u1EDBng d\u1EABn chung" }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "mwl-title", children: "Ti\u00EAu \u0111\u1EC1 (optional)" }), _jsx(Input, { id: "mwl-title", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "VOCABULARY", className: "mt-1" })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "mwl-instruction", children: "H\u01B0\u1EDBng d\u1EABn b\u00E0i l\u00E0m" }), _jsx(Input, { id: "mwl-instruction", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: MATCHING_WITH_LINES_GROUP_DEFAULT_INSTRUCTION, className: "mt-1" })] })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs(CardTitle, { className: "text-base font-semibold", children: ["C\u1EB7p n\u1ED1i (", items.length, ")"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addPair, className: "gap-2", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm c\u1EB7p"] })] }), _jsx(CardContent, { className: "space-y-4", children: items.map((item, index) => (_jsxs("div", { className: "space-y-4 rounded-lg border border-gray-200 bg-gray-50/50 p-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u1EB7p ", index + 1] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: `mwl-example-${index}`, checked: item.isExample || false, onCheckedChange: (checked) => updateItem(index, { isExample: checked, points: checked ? 0 : 1 }) }), _jsxs(Label, { htmlFor: `mwl-example-${index}`, className: "flex cursor-pointer items-center gap-1 text-xs", children: [_jsx(Star, { className: "h-3 w-3 text-amber-500" }), "Example"] })] }), !item.isExample && (_jsx("div", { className: "w-24", children: _jsx(PointsInput, { value: item.points, allowZero: true, onChange: (event) => updateItem(index, {
+                                                                    points: parsePointsValue(event.target.value, true),
+                                                                }) }) })), items.length > 2 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removePair(index), className: "text-red-500 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] })] }), _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsx(MatchingWithLinesImageField, { id: `mwl-image-${index}`, label: "\u1EA2nh c\u1ED9t tr\u00E1i", value: item.imageUrl, onChange: (url) => updateItem(index, { imageUrl: url }) }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: `mwl-right-text-${index}`, children: "T\u1EEB c\u1ED9t ph\u1EA3i" }), _jsx(Input, { id: `mwl-right-text-${index}`, value: rightItems[index]?.text || '', onChange: (e) => updateRightItem(index, { text: e.target.value }), placeholder: "paintbrush", className: "mt-1 bg-white" })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: `mwl-answer-${index}`, children: "\u0110\u00E1p \u00E1n \u0111\u00FAng (id t\u1EEB)" }), _jsxs("select", { id: `mwl-answer-${index}`, value: item.correctAnswer, onChange: (e) => updateItem(index, { correctAnswer: e.target.value }), className: "mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm", children: [_jsx("option", { value: "", children: "Ch\u1ECDn t\u1EEB \u0111\u00FAng" }), rightItems.map((right) => (_jsxs("option", { value: right.id, children: [right.text || right.id, " (", right.id, ")"] }, right.id)))] })] })] })] })] }, `${rightItems[index]?.id || index}`))) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Gi\u1EA3i th\u00EDch" }) }), _jsx(CardContent, { children: _jsx(Textarea, { id: "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 }) })] })] }))] }));
+}

package/dist/components/questions/types/matching-with-lines-group/MatchingWithLinesImageField.d.ts

@@ -0,0 +1,6 @@
+export declare function MatchingWithLinesImageField({ id, label, value, onChange, }: {
+    id: string;
+    label: string;
+    value: string;
+    onChange: (url: string) => void;
+}): import("react").JSX.Element;

package/dist/components/questions/types/matching-with-lines-group/MatchingWithLinesImageField.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '../../../../components/ui/button';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { ImagePreview } from '../../../../components/ui/image-preview';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { Trash2 } from 'lucide-react';
+function resolveDisplayUrl(fileUrl, previewOverride, fetchedPreviewUrl) {
+    if (previewOverride)
+        return previewOverride;
+    if (fetchedPreviewUrl)
+        return fetchedPreviewUrl;
+    if (fileUrl.startsWith('http') || fileUrl.startsWith('blob:'))
+        return fileUrl;
+    return '';
+}
+export function MatchingWithLinesImageField({ id, label, value, onChange, }) {
+    const [previewOverride, setPreviewOverride] = useState('');
+    const { previewUrl: fetchedPreviewUrl } = usePresignedFileUrl(value);
+    const displayUrl = resolveDisplayUrl(value, previewOverride, fetchedPreviewUrl);
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(FileUpload, { id: id, label: label, accept: "image/*", value: value, onChange: onChange, onPresignedUrlChange: setPreviewOverride, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }), value && (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(ImagePreview, { src: displayUrl || value, alt: label, className: "h-20 w-20 rounded-md object-contain" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
+                            setPreviewOverride('');
+                            onChange('');
+                        }, className: "text-red-500 hover:bg-red-50", children: _jsx(Trash2, { className: "h-4 w-4" }) })] }))] }));
+}

package/dist/components/questions/types/matching-with-lines-group/index.d.ts

@@ -0,0 +1,4 @@
+export * from './MatchingWithLinesGroupCreator';
+export * from './MatchingWithLinesGroupClient';
+export * from './transform';
+export * from './register';

package/dist/components/questions/types/matching-with-lines-group/index.js

@@ -0,0 +1,4 @@
+export * from './MatchingWithLinesGroupCreator';
+export * from './MatchingWithLinesGroupClient';
+export * from './transform';
+export * from './register';

package/dist/components/questions/types/matching-with-lines-group/map-matching-with-lines-group-data.d.ts

@@ -0,0 +1,8 @@
+import type { MatchingWithLinesGroupData, MatchingWithLinesGroupItemData, MatchingWithLinesRightItem } from '../../_shared/types/matching-with-lines-group.type';
+export declare function nextRightId(existing: string[]): string;
+export declare function createEmptyMatchingPair(questionNumber: number, rightId: string): {
+    rightItem: MatchingWithLinesRightItem;
+    item: MatchingWithLinesGroupItemData;
+};
+export declare function mapMatchingWithLinesGroupItem(item: unknown, index: number, fallbackAnswer?: unknown): MatchingWithLinesGroupItemData;
+export declare function mapQuestionToMatchingWithLinesGroupData(question: Record<string, unknown> | null | undefined): MatchingWithLinesGroupData;