@tinyweb_dev/oe-exam-sdk 0.2.12 → 0.2.14

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

@@ -19,16 +19,21 @@ function parsePointsValue(raw, allowZero = false) {
     return Math.max(min, parsed);
 }
 import { Eye, Pencil, Plus, Star, Trash2 } from 'lucide-react';
+import { RichTextEditor } from '../../../../components/shared/RichTextEditor';
 import { MatchWordToPictureGroupClient } from './MatchWordToPictureGroupClient';
 import { MatchWordToPictureGroupImageField } from './MatchWordToPictureGroupImageField';
-import { MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION } from '../../_shared/types/match-word-to-picture-group.type';
+import { MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION, fromMatchWordToPictureImageUrls, toMatchWordToPictureImageUrls, } from '../../_shared/types/match-word-to-picture-group.type';
 import { createEmptyMatchWordToPictureGroupItem, mapQuestionToMatchWordToPictureGroupData, } from './map-match-word-to-picture-group-data';
 function sumPoints(items) {
     return items.reduce((total, item) => (item.isExample ? total : total + (typeof item.points === 'number' ? item.points : 1)), 0);
 }
 export function MatchWordToPictureGroupCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }) {
     const seeded = mapQuestionToMatchWordToPictureGroupData(initialData ? { answer: initialData } : null);
+    const [title, setTitle] = useState(initialData?.title || '');
     const [instruction, setInstruction] = useState(initialData?.instruction || seeded.instruction || MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION);
+    const [passage, setPassage] = useState(initialData?.passage || seeded.passage || '');
+    const [audioUrl] = useState(initialData?.audioUrl || seeded.audioUrl || '');
+    const [imageUrl, setImageUrl] = useState(toMatchWordToPictureImageUrls(initialData?.imageUrl)[0] || '');
     const [wordBank, setWordBank] = useState(initialData?.wordBank?.length ? initialData.wordBank : seeded.wordBank);
     const [items, setItems] = useState(() => (initialData?.items?.length ? initialData.items : seeded.items));
     const [explanation, setExplanation] = useState(initialData?.explanation || '');
@@ -39,8 +44,12 @@ export function MatchWordToPictureGroupCreator({ initialData, onChange, external
     useEffect(() => {
         onChangeRef.current = onChange;
     }, [onChange]);
-    const buildPayload = (nextInstruction = instruction, nextWordBank = wordBank, nextItems = items, nextExplanation = explanation) => ({
+    const buildPayload = (nextTitle = title, nextInstruction = instruction, nextPassage = passage, nextImageUrl = imageUrl, nextWordBank = wordBank, nextItems = items, nextExplanation = explanation) => ({
+        ...(nextTitle.trim() ? { title: nextTitle } : {}),
         instruction: nextInstruction,
+        ...(nextPassage.trim() ? { passage: nextPassage } : {}),
+        ...(audioUrl.trim() ? { audioUrl: audioUrl.trim() } : {}),
+        ...(nextImageUrl.trim() ? { imageUrl: nextImageUrl } : {}),
         wordBank: nextWordBank,
         items: nextItems,
         explanation: nextExplanation,
@@ -57,7 +66,7 @@ export function MatchWordToPictureGroupCreator({ initialData, onChange, external
             debouncedOnChange(payload);
             onUnsavedChangesChange?.(true);
         }
-    }, [instruction, wordBank, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
+    }, [title, instruction, passage, audioUrl, imageUrl, wordBank, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
     const validate = () => {
         const nextErrors = [];
         if (!instruction.trim())
@@ -68,8 +77,9 @@ export function MatchWordToPictureGroupCreator({ initialData, onChange, external
         if (items.length < 1)
             nextErrors.push('Cần ít nhất một câu hỏi.');
         items.forEach((item, index) => {
-            if (!item.imageUrl.trim())
-                nextErrors.push(`Câu ${index + 1}: cần ảnh.`);
+            if (!imageUrl.trim() && toMatchWordToPictureImageUrls(item.imageUrl).length === 0) {
+                nextErrors.push(`Câu ${index + 1}: cần ảnh (hoặc ảnh chung).`);
+            }
             if (!item.correctAnswer.trim())
                 nextErrors.push(`Câu ${index + 1}: cần chọn từ đúng.`);
         });
@@ -83,13 +93,18 @@ export function MatchWordToPictureGroupCreator({ initialData, onChange, external
                 getFormData: () => buildPayload(),
             };
         }
-    }, [validationRef, instruction, wordBank, items, explanation]);
+    }, [validationRef, title, instruction, passage, audioUrl, imageUrl, wordBank, items, explanation]);
     const updateItem = (index, patch) => {
         setItems((prev) => prev.map((item, i) => (i === index ? { ...item, ...patch } : item)));
     };
     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 t\u1EEB v\u1EDBi tranh (nh\u00F3m)" }), _jsx("p", { className: "text-sm text-gray-500", children: "Word bank d\u00F9ng chung; m\u1ED7i d\u00F2ng m\u1ED9t tranh." })] }), _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 && (_jsx("div", { className: "rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700", children: _jsx("ul", { className: "list-disc space-y-1 pl-5", 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(MatchWordToPictureGroupClient, { questionData: currentPayload }) })] })) : (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base font-semibold", children: "Word bank" }) }), _jsxs(CardContent, { className: "space-y-3", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "mwtp-group-instruction", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "mwtp-group-instruction", className: "mt-1", value: instruction, onChange: (e) => setInstruction(e.target.value) })] }), wordBank.map((word, index) => (_jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { value: word, onChange: (e) => setWordBank((prev) => prev.map((item, i) => (i === index ? e.target.value : item))), placeholder: `Từ ${index + 1}` }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setWordBank((prev) => prev.filter((_, i) => i !== index)), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, index))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setWordBank((prev) => [...prev, '']), children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), "Th\u00EAm t\u1EEB"] })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs(CardTitle, { className: "text-base font-semibold", children: ["Tranh (", items.length, ")"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setItems((prev) => [...prev, createEmptyMatchWordToPictureGroupItem(prev.length + 1)]), children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), "Th\u00EAm tranh"] })] }), _jsx(CardContent, { className: "space-y-4", children: items.map((item, index) => (_jsxs("div", { className: "space-y-3 rounded-lg border border-gray-200 p-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-sm font-medium", children: ["C\u00E2u ", item.questionNumber || index + 1] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Switch, { checked: item.isExample || false, onCheckedChange: (checked) => updateItem(index, { isExample: checked, points: checked ? 0 : 1 }) }), _jsxs(Label, { className: "flex 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, {
+    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 t\u1EEB v\u1EDBi tranh (nh\u00F3m)" }), _jsx("p", { className: "text-sm text-gray-500", children: "Word bank d\u00F9ng chung. C\u00F3 th\u1EC3 1 \u1EA3nh chung + \u00F4 s\u1ED1, ho\u1EB7c m\u1ED7i d\u00F2ng m\u1ED9t tranh." })] }), _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 && (_jsx("div", { className: "rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700", children: _jsx("ul", { className: "list-disc space-y-1 pl-5", 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(MatchWordToPictureGroupClient, { questionData: currentPayload }) })] })) : (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base font-semibold", children: "Word bank" }) }), _jsxs(CardContent, { className: "space-y-3", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "mwtp-group-title", children: "Ti\u00EAu \u0111\u1EC1 (optional)" }), _jsx(Input, { id: "mwtp-group-title", className: "mt-1", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "VOCABULARY" })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "mwtp-group-instruction", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "mwtp-group-instruction", className: "mt-1", value: instruction, onChange: (e) => setInstruction(e.target.value) })] }), _jsxs("div", { children: [_jsx(Label, { children: "N\u1ED9i dung b\u00E0i \u0111\u1ECDc (Passage)" }), _jsx("div", { className: "mt-1", children: _jsx(RichTextEditor, { value: passage, onChange: setPassage, minHeightClassName: "min-h-[160px]" }) })] }), _jsx(MatchWordToPictureGroupImageField, { id: "mwtp-group-shared-image", label: "\u1EA2nh chung (optional \u2014 1 b\u1EE9c tranh nhi\u1EC1u \u00F4 s\u1ED1)", value: imageUrl, onChange: setImageUrl }), wordBank.map((word, index) => (_jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { value: word, onChange: (e) => setWordBank((prev) => prev.map((item, i) => (i === index ? e.target.value : item))), placeholder: `Từ ${index + 1}` }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setWordBank((prev) => prev.filter((_, i) => i !== index)), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, index))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setWordBank((prev) => [...prev, '']), children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), "Th\u00EAm t\u1EEB"] })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs(CardTitle, { className: "text-base font-semibold", children: ["Tranh (", items.length, ")"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setItems((prev) => [...prev, createEmptyMatchWordToPictureGroupItem(prev.length + 1)]), children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), "Th\u00EAm tranh"] })] }), _jsx(CardContent, { className: "space-y-4", children: items.map((item, index) => (_jsxs("div", { className: "space-y-3 rounded-lg border border-gray-200 p-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-sm font-medium", children: ["C\u00E2u ", item.questionNumber || index + 1] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Switch, { checked: item.isExample || false, onCheckedChange: (checked) => updateItem(index, { isExample: checked, points: checked ? 0 : 1 }) }), _jsxs(Label, { className: "flex 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 > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setItems((prev) => prev.filter((_, i) => i !== index).map((entry, i) => ({ ...entry, questionNumber: i + 1 }))), children: _jsx(Trash2, { className: "h-4 w-4 text-red-500" }) }))] })] }), _jsx(MatchWordToPictureGroupImageField, { id: `mwtp-group-image-${index}`, label: "\u1EA2nh", value: item.imageUrl, onChange: (url) => updateItem(index, { imageUrl: url }) }), _jsxs("select", { className: "rounded-md border px-3 py-2 text-sm", value: item.correctAnswer, onChange: (e) => updateItem(index, { correctAnswer: e.target.value }), children: [_jsx("option", { value: "", children: "Ch\u1ECDn t\u1EEB \u0111\u00FAng" }), wordBank.filter((word) => word.trim()).map((word) => (_jsx("option", { value: word, children: word }, word)))] })] }, index))) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Gi\u1EA3i th\u00EDch" }) }), _jsx(CardContent, { children: _jsx(Textarea, { value: explanation, onChange: (event) => setExplanation(event.target.value), rows: 3 }) })] })] }))] }));
+                                                                }) }) })), items.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setItems((prev) => prev.filter((_, i) => i !== index).map((entry, i) => ({ ...entry, questionNumber: i + 1 }))), children: _jsx(Trash2, { className: "h-4 w-4 text-red-500" }) }))] })] }), _jsx(MatchWordToPictureGroupImageField, { id: `mwtp-group-image-${index}`, label: "\u1EA2nh", value: toMatchWordToPictureImageUrls(item.imageUrl)[0] || '', onChange: (url) => updateItem(index, {
+                                                imageUrl: fromMatchWordToPictureImageUrls(url),
+                                            }) }), _jsxs("select", { className: "rounded-md border px-3 py-2 text-sm", value: item.correctAnswer, onChange: (e) => updateItem(index, { correctAnswer: e.target.value }), children: [_jsx("option", { value: "", children: "Ch\u1ECDn t\u1EEB \u0111\u00FAng" }), Array.from(new Set([
+                                                    ...wordBank.map((word) => word.trim()).filter(Boolean),
+                                                    item.correctAnswer.trim(),
+                                                ].filter(Boolean))).map((word) => (_jsx("option", { value: word, children: word }, word)))] })] }, index))) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Gi\u1EA3i th\u00EDch" }) }), _jsx(CardContent, { children: _jsx(Textarea, { value: explanation, onChange: (event) => setExplanation(event.target.value), rows: 3 }) })] })] }))] }));
 }

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

@@ -1,4 +1,4 @@
-import { MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION, } from '../../_shared/types/match-word-to-picture-group.type';
+import { MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION, fromMatchWordToPictureImageUrls, } from '../../_shared/types/match-word-to-picture-group.type';
 function isRecord(value) {
     return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
@@ -30,7 +30,7 @@ export function mapMatchWordToPictureGroupItem(item, index, fallbackAnswer) {
     const correctAnswer = asRecord(record.correctAnswer);
     const isExample = record.isExample === true;
     return {
-        imageUrl: asString(content.imageUrl) || asString(record.imageUrl),
+        imageUrl: fromMatchWordToPictureImageUrls(content.imageUrl ?? record.imageUrl),
         correctAnswer: asString(correctAnswer.answer) ||
             asString(record.correctAnswer) ||
             asString(fallbackAnswer),
@@ -57,10 +57,19 @@ export function mapQuestionToMatchWordToPictureGroupData(question) {
             : asStringList(answer.wordBank).length
                 ? asStringList(answer.wordBank)
                 : Array.from(new Set(items.map((item) => item.correctAnswer).filter(Boolean)));
+        const title = asString(meta.title) || asString(answer.title);
+        const passage = asString(meta.passage).trim() || asString(answer.passage).trim();
+        const audioUrl = asString(meta.audioUrl).trim() || asString(answer.audioUrl).trim();
+        const imageUrl = fromMatchWordToPictureImageUrls(meta.imageUrl)
+            ?? fromMatchWordToPictureImageUrls(answer.imageUrl);
         return {
+            ...(title ? { title } : {}),
             instruction: asString(meta.instruction) ||
                 asString(answer.instruction) ||
                 MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION,
+            ...(passage ? { passage } : {}),
+            ...(audioUrl ? { audioUrl } : {}),
+            ...(imageUrl ? { imageUrl } : {}),
             wordBank,
             items,
             explanation,

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

@@ -1,4 +1,4 @@
-import { MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION, MATCH_WORD_TO_PICTURE_ITEM_TYPE, } from '../../_shared/types/match-word-to-picture-group.type';
+import { MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION, MATCH_WORD_TO_PICTURE_ITEM_TYPE, fromMatchWordToPictureImageUrls, } from '../../_shared/types/match-word-to-picture-group.type';
 function sumGradablePoints(items) {
     return items.reduce((total, item) => {
         if (item.isExample)
@@ -12,18 +12,34 @@ export const transformMatchWordToPictureGroup = (question) => {
     const wordBank = Array.isArray(answerData?.wordBank)
         ? answerData.wordBank.filter((word) => typeof word === 'string').map((word) => word.trim()).filter(Boolean)
         : [];
-    const apiItems = items.map((item, index) => ({
-        questionType: MATCH_WORD_TO_PICTURE_ITEM_TYPE,
-        ...(item.isExample ? { isExample: true } : {}),
-        content: { imageUrl: item.imageUrl || '' },
-        correctAnswer: { answer: item.correctAnswer || '' },
-        points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
-        questionNumber: item.questionNumber || index + 1,
-    }));
+    const groupImageUrl = fromMatchWordToPictureImageUrls(answerData?.imageUrl);
+    const apiItems = items.map((item, index) => {
+        const itemImageUrl = fromMatchWordToPictureImageUrls(item.imageUrl);
+        return {
+            questionType: MATCH_WORD_TO_PICTURE_ITEM_TYPE,
+            ...(item.isExample ? { isExample: true } : {}),
+            content: {
+                ...(itemImageUrl ? { imageUrl: itemImageUrl } : {}),
+            },
+            correctAnswer: { answer: item.correctAnswer || '' },
+            points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+            questionNumber: item.questionNumber || index + 1,
+        };
+    });
     return {
         apiContent: {
             meta: {
                 instruction: answerData?.instruction || MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION,
+                ...(typeof answerData?.title === 'string' && answerData.title.trim()
+                    ? { title: answerData.title.trim() }
+                    : {}),
+                ...(typeof answerData?.passage === 'string' && answerData.passage.trim()
+                    ? { passage: answerData.passage }
+                    : {}),
+                ...(typeof answerData?.audioUrl === 'string' && answerData.audioUrl.trim()
+                    ? { audioUrl: answerData.audioUrl.trim() }
+                    : {}),
+                ...(groupImageUrl ? { imageUrl: groupImageUrl } : {}),
                 wordBank,
             },
             items: apiItems,

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

@@ -1,11 +1,13 @@
 export interface MatchingWithLinesBoardLeftItem {
-    imageUrl: string;
+    imageUrl?: string;
+    text?: string;
     isExample?: boolean;
     questionNumber?: number;
 }
 export interface MatchingWithLinesBoardRightItem {
     id: string;
-    text: string;
+    text?: string;
+    imageUrl?: string;
 }
 interface MatchingWithLinesBoardProps {
     leftItems: MatchingWithLinesBoardLeftItem[];

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

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { Star } from 'lucide-react';
 import { cn } from '../../../../shared/lib/utils';
@@ -94,7 +94,7 @@ export function MatchingWithLinesBoard({ leftItems, rightItems, values, correctV
             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) => {
+    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 ${item.text || index + 1}`, "aria-pressed": selectedLeft === index, className: cn('box-border flex h-auto min-h-14 w-max items-center gap-2 rounded-lg border bg-white px-1.5 py-1 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: [item.imageUrl ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative size-11 shrink-0 overflow-hidden rounded-md bg-gray-50", children: [_jsx(ResolvedImage, { src: item.imageUrl, alt: item.text || `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"] }))] }), item.text?.trim() ? (_jsx("span", { className: "whitespace-nowrap text-sm font-medium text-gray-800", children: item.text })) : null] })) : (_jsxs("span", { className: "relative whitespace-nowrap pl-1 text-sm font-medium text-gray-800", children: [item.isExample && (_jsxs("span", { className: "mr-1 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"] })), item.text || '—'] })), _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'
@@ -102,8 +102,8 @@ export function MatchingWithLinesBoard({ leftItems, rightItems, values, correctV
                                             ? '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) => {
+                            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-auto min-h-14 w-max items-center gap-2 rounded-lg border border-gray-200 bg-white px-2 py-1 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}`));
+                                        }, 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 }), item.imageUrl ? (_jsx("div", { className: "relative size-11 shrink-0 overflow-hidden rounded-md bg-gray-50", children: _jsx(ResolvedImage, { src: item.imageUrl, alt: item.text || `Match option ${index + 1}`, className: "h-full w-full object-contain" }) })) : (_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.js

@@ -1,7 +1,17 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Lightbulb } from 'lucide-react';
+import { BookOpen, Lightbulb } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { ResolvedImage } from '../../../../components/common/ResolvedImage';
 import { MatchingWithLinesBoard } from './MatchingWithLinesBoard';
+function ClientAudio({ url }) {
+    const { previewUrl, isLoading } = usePresignedFileUrl(url);
+    const src = previewUrl ||
+        (typeof url === 'string' && (url.startsWith('http') || url.startsWith('blob:')) ? url : '');
+    if (!src && !isLoading)
+        return null;
+    return (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50/70 px-4 py-3", children: isLoading ? (_jsx("div", { className: "h-8 w-full animate-pulse rounded bg-indigo-100" })) : (_jsx("audio", { controls: true, src: src, className: "w-full", children: _jsx("track", { kind: "captions" }) })) }));
+}
 export function MatchingWithLinesGroupClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, onAnswersChange, }) {
     const items = questionData.items || [];
     const rightItems = questionData.rightItems || [];
@@ -22,8 +32,9 @@ export function MatchingWithLinesGroupClient({ questionData, isReviewMode = fals
             }
         });
     };
-    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) => ({
+    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 }))] })), questionData.passage ? (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-white p-5 shadow-xs", children: [_jsxs("div", { className: "mb-2.5 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-indigo-700", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: "B\u00E0i \u0111\u1ECDc (Reading Passage)" })] }), _jsx("div", { className: "prose prose-sm max-w-none leading-relaxed text-gray-800", dangerouslySetInnerHTML: { __html: questionData.passage } })] })) : null, questionData.audioUrl ? _jsx(ClientAudio, { url: questionData.audioUrl }) : null, questionData.imageUrl ? (_jsx("div", { className: "flex justify-center rounded-lg border border-slate-100 bg-slate-50 p-3", children: _jsx(ResolvedImage, { src: questionData.imageUrl, alt: "Match passage image", className: "max-h-44 w-auto rounded-md object-contain" }) })) : null, _jsx(MatchingWithLinesBoard, { leftItems: items.map((item) => ({
                     imageUrl: item.imageUrl,
+                    text: item.text,
                     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.js

@@ -10,6 +10,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '../../../../components
 import { Switch } from '../../../../components/ui/switch';
 import { useDebouncedCallback } from '../../../../shared/lib/hooks';
 import { Eye, Pencil, Plus, Star, Trash2 } from 'lucide-react';
+import { RichTextEditor } from '../../../../components/shared/RichTextEditor';
 import { MatchingWithLinesGroupClient } from './MatchingWithLinesGroupClient';
 import { MatchingWithLinesImageField } from './MatchingWithLinesImageField';
 import { createEmptyMatchingPair, nextRightId } from './map-matching-with-lines-group-data';
@@ -32,13 +33,15 @@ function normalizeRightItems(raw) {
     }
     return raw.map((item, index) => ({
         id: item.id || `r${index + 1}`,
-        text: item.text || '',
+        ...(item.text?.trim() ? { text: item.text.trim() } : {}),
+        ...(item.imageUrl?.trim() ? { imageUrl: item.imageUrl.trim() } : {}),
     }));
 }
 function normalizeItems(rawItems, rightItems) {
     if (!Array.isArray(rawItems) || rawItems.length === 0) {
         return rightItems.map((right, index) => ({
             imageUrl: '',
+            text: '',
             correctAnswer: right.id,
             isExample: false,
             points: 1,
@@ -47,6 +50,7 @@ function normalizeItems(rawItems, rightItems) {
     }
     return rawItems.map((item, index) => ({
         imageUrl: item.imageUrl || '',
+        text: item.text || '',
         correctAnswer: item.correctAnswer || rightItems[index]?.id || '',
         isExample: item.isExample === true,
         points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
@@ -61,6 +65,9 @@ export function MatchingWithLinesGroupCreator({ initialData, onChange, externalE
     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 [passage, setPassage] = useState(initialData?.passage || '');
+    const [audioUrl] = useState(initialData?.audioUrl || '');
+    const [imageUrl, setImageUrl] = useState(initialData?.imageUrl || '');
     const [explanation, setExplanation] = useState(initialData?.explanation || '');
     const [isClientMode, setIsClientMode] = useState(false);
     const [errors, setErrors] = useState([]);
@@ -69,9 +76,12 @@ export function MatchingWithLinesGroupCreator({ initialData, onChange, externalE
     useEffect(() => {
         onChangeRef.current = onChange;
     }, [onChange]);
-    const buildPayload = (nextTitle = title, nextInstruction = instruction, nextRightItems = rightItems, nextItems = items, nextExplanation = explanation) => ({
+    const buildPayload = (nextTitle = title, nextInstruction = instruction, nextPassage = passage, nextRightItems = rightItems, nextItems = items, nextImageUrl = imageUrl, nextExplanation = explanation) => ({
         title: nextTitle,
         instruction: nextInstruction,
+        ...(nextPassage.trim() ? { passage: nextPassage } : {}),
+        ...(audioUrl ? { audioUrl } : {}),
+        ...(nextImageUrl.trim() ? { imageUrl: nextImageUrl } : {}),
         rightItems: nextRightItems,
         items: nextItems,
         explanation: nextExplanation,
@@ -88,7 +98,7 @@ export function MatchingWithLinesGroupCreator({ initialData, onChange, externalE
             debouncedOnChange(payload);
             onUnsavedChangesChange?.(true);
         }
-    }, [title, instruction, rightItems, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
+    }, [title, instruction, passage, audioUrl, imageUrl, rightItems, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
     const validate = () => {
         const nextErrors = [];
         if (!instruction.trim()) {
@@ -98,14 +108,15 @@ export function MatchingWithLinesGroupCreator({ initialData, onChange, externalE
             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).');
+            nextErrors.push('Số ô cột trái phải bằng số ô 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.text?.trim() && !item.imageUrl?.trim()) {
+                nextErrors.push(`Cột phải ${index + 1}: cần từ hoặc ảnh.`);
+            }
             if (item.id.trim() && ids.has(item.id.trim())) {
                 nextErrors.push(`Từ ${index + 1}: id "${item.id}" bị trùng.`);
             }
@@ -113,12 +124,13 @@ export function MatchingWithLinesGroupCreator({ initialData, onChange, externalE
         });
         const usedAnswers = new Set();
         items.forEach((item, index) => {
-            if (!item.imageUrl.trim())
-                nextErrors.push(`Ảnh ${index + 1}: cần upload hình.`);
+            if (!item.imageUrl?.trim() && !item.text?.trim()) {
+                nextErrors.push(`Cột trái ${index + 1}: cần ảnh hoặc chữ.`);
+            }
             if (!item.correctAnswer.trim())
-                nextErrors.push(`Ảnh ${index + 1}: chưa chọn đáp án.`);
+                nextErrors.push(`Cột trái ${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).`);
+                nextErrors.push(`Cột trái ${index + 1}: đáp án bị trùng (mỗi từ chỉ dùng 1 lần).`);
             }
             usedAnswers.add(item.correctAnswer);
         });
@@ -132,7 +144,7 @@ export function MatchingWithLinesGroupCreator({ initialData, onChange, externalE
                 getFormData: () => buildPayload(),
             };
         }
-    }, [validationRef, title, instruction, rightItems, items, explanation]);
+    }, [validationRef, title, instruction, passage, audioUrl, imageUrl, rightItems, items, explanation]);
     const updateItem = (index, patch) => {
         setItems((prev) => {
             const next = [...prev];
@@ -174,7 +186,7 @@ export function MatchingWithLinesGroupCreator({ initialData, onChange, externalE
     };
     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, {
+    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("div", { children: [_jsx(Label, { children: "N\u1ED9i dung b\u00E0i \u0111\u1ECDc (Passage)" }), _jsx("div", { className: "mt-1", children: _jsx(RichTextEditor, { value: passage, onChange: setPassage, minHeightClassName: "min-h-[160px]" }) })] }), _jsx(MatchingWithLinesImageField, { id: "mwl-group-image", label: "\u1EA2nh chung (optional)", value: imageUrl, onChange: setImageUrl })] })] }), _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 }) })] })] }))] }));
+                                                                }) }) })), 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: [_jsxs("div", { className: "space-y-3", children: [_jsx(MatchingWithLinesImageField, { id: `mwl-image-${index}`, label: "\u1EA2nh c\u1ED9t tr\u00E1i", value: item.imageUrl || '', onChange: (url) => updateItem(index, { imageUrl: url }) }), _jsxs("div", { children: [_jsx(Label, { htmlFor: `mwl-left-text-${index}`, children: "Ch\u1EEF c\u1ED9t tr\u00E1i (text-to-text)" }), _jsx(Input, { id: `mwl-left-text-${index}`, value: item.text || '', onChange: (e) => updateItem(index, { text: e.target.value }), placeholder: "ball", className: "mt-1 bg-white" })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(MatchingWithLinesImageField, { id: `mwl-right-image-${index}`, label: "\u1EA2nh c\u1ED9t ph\u1EA3i (image-to-image)", value: rightItems[index]?.imageUrl || '', onChange: (url) => updateRightItem(index, { imageUrl: url || undefined }) }), _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/map-matching-with-lines-group-data.js

@@ -17,9 +17,10 @@ export function nextRightId(existing) {
 }
 export function createEmptyMatchingPair(questionNumber, rightId) {
     return {
-        rightItem: { id: rightId, text: '' },
+        rightItem: { id: rightId },
         item: {
             imageUrl: '',
+            text: '',
             correctAnswer: rightId,
             isExample: false,
             points: 1,
@@ -36,6 +37,7 @@ export function mapMatchingWithLinesGroupItem(item, index, fallbackAnswer) {
         (typeof fallbackAnswer === 'string' ? fallbackAnswer : '');
     return {
         imageUrl: asString(content.imageUrl) || asString(record.imageUrl),
+        text: asString(content.text) || asString(record.text),
         correctAnswer: answer,
         isExample,
         points: isExample ? 0 : (typeof record.points === 'number' ? record.points : 1),
@@ -47,9 +49,12 @@ function mapRightItems(raw) {
         return [];
     return raw.map((item, index) => {
         const record = asRecord(item);
+        const imageUrl = asString(record.imageUrl).trim();
+        const text = asString(record.text).trim();
         return {
             id: asString(record.id, `r${index + 1}`),
-            text: asString(record.text),
+            ...(text ? { text } : {}),
+            ...(imageUrl ? { imageUrl } : {}),
         };
     });
 }
@@ -67,11 +72,17 @@ export function mapQuestionToMatchingWithLinesGroupData(question) {
     const meta = asRecord(content.meta ?? answer.meta);
     if (Array.isArray(content.items)) {
         const items = content.items.map((item, index) => mapMatchingWithLinesGroupItem(item, index, fallbackAnswers[index]));
+        const audioUrl = asString(meta.audioUrl).trim() || asString(answer.audioUrl).trim();
+        const passage = asString(meta.passage).trim() || asString(answer.passage).trim();
+        const imageUrl = asString(meta.imageUrl).trim() || asString(answer.imageUrl).trim();
         return {
             title: asString(meta.title) || asString(answer.title),
             instruction: asString(meta.instruction) ||
                 asString(answer.instruction) ||
                 MATCHING_WITH_LINES_GROUP_DEFAULT_INSTRUCTION,
+            ...(passage ? { passage } : {}),
+            ...(audioUrl ? { audioUrl } : {}),
+            ...(imageUrl ? { imageUrl } : {}),
             rightItems: mapRightItems(content.rightItems),
             items,
             explanation,
@@ -80,9 +91,15 @@ export function mapQuestionToMatchingWithLinesGroupData(question) {
     }
     if (Array.isArray(answer.items)) {
         const items = answer.items.map((item, index) => mapMatchingWithLinesGroupItem(item, index, fallbackAnswers[index]));
+        const audioUrl = asString(answer.audioUrl).trim();
+        const passage = asString(answer.passage).trim();
+        const imageUrl = asString(answer.imageUrl).trim();
         return {
             title: asString(answer.title),
             instruction: asString(answer.instruction) || MATCHING_WITH_LINES_GROUP_DEFAULT_INSTRUCTION,
+            ...(passage ? { passage } : {}),
+            ...(audioUrl ? { audioUrl } : {}),
+            ...(imageUrl ? { imageUrl } : {}),
             rightItems: mapRightItems(answer.rightItems),
             items,
             explanation,

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

@@ -14,26 +14,42 @@ export const transformMatchingWithLinesGroup = (question) => {
     if (items.length === 0) {
         return { apiContent: { rightItems: [], items: [] }, apiCorrectAnswer: { answer: [] } };
     }
-    const apiItems = items.map((item, index) => ({
-        ...(item.isExample ? { isExample: true } : {}),
-        content: {
-            imageUrl: item.imageUrl || '',
-        },
-        correctAnswer: { answer: item.correctAnswer || '' },
-        points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
-        questionNumber: item.questionNumber || index + 1,
-    }));
+    const apiItems = items.map((item, index) => {
+        const imageUrl = item.imageUrl?.trim() || '';
+        const text = item.text?.trim() || '';
+        return {
+            ...(item.isExample ? { isExample: true } : {}),
+            content: {
+                ...(imageUrl ? { imageUrl } : {}),
+                ...(text ? { text } : {}),
+            },
+            correctAnswer: { answer: item.correctAnswer || '' },
+            points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+            questionNumber: item.questionNumber || index + 1,
+        };
+    });
     const title = typeof answerData?.title === 'string' ? answerData.title.trim() : '';
+    const passage = typeof answerData?.passage === 'string' ? answerData.passage.trim() : '';
+    const audioUrl = typeof answerData?.audioUrl === 'string' ? answerData.audioUrl.trim() : '';
+    const imageUrl = typeof answerData?.imageUrl === 'string' ? answerData.imageUrl.trim() : '';
     return {
         apiContent: {
             meta: {
                 instruction: answerData?.instruction || MATCHING_WITH_LINES_GROUP_DEFAULT_INSTRUCTION,
                 ...(title ? { title } : {}),
+                ...(passage ? { passage } : {}),
+                ...(audioUrl ? { audioUrl } : {}),
+                ...(imageUrl ? { imageUrl } : {}),
             },
-            rightItems: rightItems.map((item) => ({
-                id: item.id || '',
-                text: item.text || '',
-            })),
+            rightItems: rightItems.map((item) => {
+                const imageUrl = item.imageUrl?.trim() || '';
+                const text = item.text?.trim() || '';
+                return {
+                    id: item.id || '',
+                    ...(text ? { text } : {}),
+                    ...(imageUrl ? { imageUrl } : {}),
+                };
+            }),
             items: apiItems,
         },
         apiCorrectAnswer: {

package/dist/components/questions/types/sort-words-into-categories/SortWordsIntoCategoriesBoard.d.ts

@@ -0,0 +1,12 @@
+import type { SortWordsCategory, SortWordsPlacement, SortWordsWordItem } from '../../_shared/types/sort-words-into-categories.type';
+interface SortWordsIntoCategoriesBoardProps {
+    categories: SortWordsCategory[];
+    words: SortWordsWordItem[];
+    placements: SortWordsPlacement[];
+    correctPlacements?: SortWordsPlacement[];
+    onChange?: (next: SortWordsPlacement[]) => void;
+    disabled?: boolean;
+    isReviewMode?: boolean;
+}
+export declare function SortWordsIntoCategoriesBoard({ categories, words, placements, correctPlacements, onChange, disabled, isReviewMode, }: SortWordsIntoCategoriesBoardProps): import("react").JSX.Element;
+export {};