@tinyweb_dev/oe-exam-sdk 0.2.13 → 0.2.14

package/dist/components/questions/types/choose-then-answer-group/ChooseThenAnswerGroupCreator.js

@@ -0,0 +1,174 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { PointsInput } from '../../../../components/ui/points-input';
+import { Textarea } from '../../../../components/ui/textarea';
+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 { ChooseThenAnswerGroupClient } from './ChooseThenAnswerGroupClient';
+import { createEmptyItem, createEmptyOption, sumGradablePoints, } from './map-choose-then-answer-group-data';
+import { CHOOSE_THEN_ANSWER_GROUP_DEFAULT_INSTRUCTION } from '../../_shared/types/choose-then-answer-group.type';
+function normalizeItems(raw) {
+    if (!Array.isArray(raw) || raw.length === 0) {
+        return [createEmptyItem(1)];
+    }
+    return raw.map((item, index) => {
+        const fallback = createEmptyItem(index + 1);
+        const options = Array.isArray(item.options) && item.options.length >= 2
+            ? item.options.map((option, optionIndex) => ({
+                id: option.id || `opt-${optionIndex + 1}`,
+                text: option.text || '',
+            }))
+            : fallback.options;
+        return {
+            question: item.question || '',
+            options,
+            optionId: item.optionId || options[0]?.id || '',
+            isExample: item.isExample === true,
+            points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+            questionNumber: item.questionNumber || index + 1,
+        };
+    });
+}
+export function ChooseThenAnswerGroupCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }) {
+    const [title, setTitle] = useState(initialData?.title || '');
+    const [instruction, setInstruction] = useState(initialData?.instruction || CHOOSE_THEN_ANSWER_GROUP_DEFAULT_INSTRUCTION);
+    const [items, setItems] = useState(() => normalizeItems(initialData?.items));
+    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, nextItems = items, nextExplanation = explanation) => ({
+        title: nextTitle,
+        instruction: nextInstruction,
+        items: nextItems,
+        explanation: nextExplanation,
+        points: sumGradablePoints(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, 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 < 1) {
+            nextErrors.push('Cần ít nhất 1 câu.');
+        }
+        items.forEach((item, index) => {
+            if (!item.question.trim()) {
+                nextErrors.push(`Câu ${index + 1}: nội dung không được để trống.`);
+            }
+            else if (!item.question.includes('{0}')) {
+                nextErrors.push(`Câu ${index + 1}: phải có chỗ chọn {0}.`);
+            }
+            if (item.options.length < 2) {
+                nextErrors.push(`Câu ${index + 1}: cần ít nhất 2 lựa chọn.`);
+            }
+            const ids = new Set();
+            item.options.forEach((option, optionIndex) => {
+                if (!option.id.trim())
+                    nextErrors.push(`Câu ${index + 1} option ${optionIndex + 1}: thiếu id.`);
+                if (!option.text.trim())
+                    nextErrors.push(`Câu ${index + 1} option ${optionIndex + 1}: thiếu nội dung.`);
+                if (option.id.trim() && ids.has(option.id.trim())) {
+                    nextErrors.push(`Câu ${index + 1}: id "${option.id}" bị trùng.`);
+                }
+                ids.add(option.id.trim());
+            });
+            if (!item.optionId.trim() || !ids.has(item.optionId)) {
+                nextErrors.push(`Câu ${index + 1}: chưa chọn đáp án đúng.`);
+            }
+        });
+        setErrors(nextErrors);
+        return nextErrors.length === 0;
+    };
+    useEffect(() => {
+        if (!validationRef)
+            return;
+        validationRef.current = {
+            triggerValidation: async () => validate(),
+            getFormData: () => buildPayload(),
+        };
+        return () => {
+            validationRef.current = null;
+        };
+    });
+    const updateItem = (index, patch) => {
+        setItems((prev) => prev.map((item, i) => {
+            if (i !== index)
+                return item;
+            const next = { ...item, ...patch };
+            if (next.isExample)
+                next.points = 0;
+            return next;
+        }));
+    };
+    const updateOption = (itemIndex, optionIndex, text) => {
+        setItems((prev) => prev.map((item, i) => {
+            if (i !== itemIndex)
+                return item;
+            return {
+                ...item,
+                options: item.options.map((option, j) => (j === optionIndex ? { ...option, text } : option)),
+            };
+        }));
+    };
+    const addOption = (itemIndex) => {
+        setItems((prev) => prev.map((item, i) => {
+            if (i !== itemIndex)
+                return item;
+            return {
+                ...item,
+                options: [...item.options, createEmptyOption(item.options.map((option) => option.id))],
+            };
+        }));
+    };
+    const removeOption = (itemIndex, optionIndex) => {
+        setItems((prev) => prev.map((item, i) => {
+            if (i !== itemIndex || item.options.length <= 2)
+                return item;
+            const options = item.options.filter((_, j) => j !== optionIndex);
+            const removedId = item.options[optionIndex]?.id;
+            return {
+                ...item,
+                options,
+                optionId: item.optionId === removedId ? (options[0]?.id || '') : item.optionId,
+            };
+        }));
+    };
+    const addItem = () => {
+        setItems((prev) => [...prev, createEmptyItem(prev.length + 1)]);
+    };
+    const removeItem = (index) => {
+        if (items.length <= 1)
+            return;
+        setItems((prev) => prev.filter((_, i) => i !== index).map((item, i) => ({
+            ...item,
+            questionNumber: i + 1,
+        })));
+    };
+    const displayErrors = [...errors, ...(externalErrors || [])];
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsClientMode((v) => !v), children: [isClientMode ? _jsx(Pencil, { className: "mr-2 h-4 w-4" }) : _jsx(Eye, { className: "mr-2 h-4 w-4" }), isClientMode ? 'Sửa' : 'Xem trước'] }) }), isClientMode ? (_jsx(ChooseThenAnswerGroupClient, { questionData: buildPayload(), isReviewMode: true })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "cta-title", children: "Ti\u00EAu \u0111\u1EC1 (optional)" }), _jsx(Input, { id: "cta-title", value: title, onChange: (event) => setTitle(event.target.value), placeholder: "GRAMMAR" })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "cta-instruction", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "cta-instruction", value: instruction, onChange: (event) => setInstruction(event.target.value), placeholder: CHOOSE_THEN_ANSWER_GROUP_DEFAULT_INSTRUCTION })] })] }), items.map((item, index) => (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0", children: [_jsxs(CardTitle, { className: "text-base", children: ["C\u00E2u ", index + 1] }), items.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeItem(index), children: _jsx(Trash2, { className: "h-4 w-4 text-red-500" }) }))] }), _jsxs(CardContent, { className: "space-y-3", children: [_jsx(Input, { value: item.question, onChange: (event) => updateItem(index, { question: event.target.value }), placeholder: "Did you eat {0} for lunch today?" }), _jsxs("p", { className: "text-xs text-slate-500", children: ["D\u00F9ng ", '{0}', " cho ch\u1ED7 hi\u1EC7n chip ch\u1ECDn."] }), item.options.map((option, optionIndex) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { value: option.text, onChange: (event) => updateOption(index, optionIndex, event.target.value), placeholder: `Lựa chọn ${optionIndex + 1}` }), item.options.length > 2 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeOption(index, optionIndex), children: _jsx(Trash2, { className: "h-4 w-4 text-red-500" }) }))] }, option.id))), _jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: () => addOption(index), children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), " Th\u00EAm l\u1EF1a ch\u1ECDn"] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx("select", { className: "h-10 rounded-md border border-input bg-background px-3 text-sm", value: item.optionId, onChange: (event) => updateItem(index, { optionId: event.target.value }), children: item.options.map((option) => (_jsx("option", { value: option.id, children: option.text || option.id }, option.id))) }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Switch, { id: `cta-example-${index}`, checked: item.isExample === true, onCheckedChange: (checked) => updateItem(index, { isExample: checked }) }), _jsxs(Label, { htmlFor: `cta-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(PointsInput, { value: item.points, allowZero: true, onChange: (event) => updateItem(index, {
+                                                    points: Number.parseInt(event.target.value, 10) || 1,
+                                                }) }))] })] })] }, `${item.questionNumber}-${index}`))), _jsxs(Button, { type: "button", variant: "outline", onClick: addItem, children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), " Th\u00EAm c\u00E2u"] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "cta-explanation", children: "Gi\u1EA3i th\u00EDch" }), _jsx(Textarea, { id: "cta-explanation", value: explanation, onChange: (event) => setExplanation(event.target.value) })] })] })), displayErrors.length > 0 && (_jsx("ul", { className: "list-disc space-y-1 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700", children: displayErrors.map((error) => (_jsx("li", { children: error }, error))) }))] }));
+}

package/dist/components/questions/types/choose-then-answer-group/index.d.ts

@@ -0,0 +1,5 @@
+export { ChooseThenAnswerGroupCreator } from './ChooseThenAnswerGroupCreator';
+export { ChooseThenAnswerGroupClient } from './ChooseThenAnswerGroupClient';
+export { transformChooseThenAnswerGroup } from './transform';
+export { chooseThenAnswerGroupRegistration } from './register';
+export { mapQuestionToChooseThenAnswerGroupData, parseStudentAnswer, } from './map-choose-then-answer-group-data';

package/dist/components/questions/types/choose-then-answer-group/index.js

@@ -0,0 +1,5 @@
+export { ChooseThenAnswerGroupCreator } from './ChooseThenAnswerGroupCreator';
+export { ChooseThenAnswerGroupClient } from './ChooseThenAnswerGroupClient';
+export { transformChooseThenAnswerGroup } from './transform';
+export { chooseThenAnswerGroupRegistration } from './register';
+export { mapQuestionToChooseThenAnswerGroupData, parseStudentAnswer, } from './map-choose-then-answer-group-data';

package/dist/components/questions/types/choose-then-answer-group/map-choose-then-answer-group-data.d.ts

@@ -0,0 +1,11 @@
+import type { ChooseThenAnswerGroupData, ChooseThenAnswerGroupItemData, ChooseThenAnswerOption, ChooseThenAnswerStudentItemAnswer } from '../../_shared/types/choose-then-answer-group.type';
+export declare function nextPrefixedId(prefix: string, existing: string[]): string;
+export declare function sumGradablePoints(items: ChooseThenAnswerGroupItemData[]): number;
+export declare function createEmptyOption(existingIds: string[]): ChooseThenAnswerOption;
+export declare function createEmptyItem(questionNumber: number): ChooseThenAnswerGroupItemData;
+export declare function parseItemAnswer(raw: unknown): {
+    optionId: string;
+};
+export declare function parseStudentAnswer(raw: unknown): ChooseThenAnswerStudentItemAnswer;
+export declare function mapApiItem(item: unknown, index: number, fallbackAnswer?: unknown): ChooseThenAnswerGroupItemData;
+export declare function mapQuestionToChooseThenAnswerGroupData(question: Record<string, unknown> | null | undefined): ChooseThenAnswerGroupData;

package/dist/components/questions/types/choose-then-answer-group/map-choose-then-answer-group-data.js

@@ -0,0 +1,127 @@
+import { CHOOSE_THEN_ANSWER_GROUP_DEFAULT_INSTRUCTION } from '../../_shared/types/choose-then-answer-group.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;
+}
+export function nextPrefixedId(prefix, existing) {
+    let n = existing.length + 1;
+    const used = new Set(existing);
+    while (used.has(`${prefix}${n}`))
+        n += 1;
+    return `${prefix}${n}`;
+}
+export function sumGradablePoints(items) {
+    return items.reduce((total, item) => {
+        if (item.isExample)
+            return total;
+        return total + (typeof item.points === 'number' ? item.points : 1);
+    }, 0);
+}
+export function createEmptyOption(existingIds) {
+    return {
+        id: nextPrefixedId('opt-', existingIds),
+        text: '',
+    };
+}
+export function createEmptyItem(questionNumber) {
+    const first = createEmptyOption([]);
+    const second = createEmptyOption([first.id]);
+    return {
+        question: '',
+        options: [first, second],
+        optionId: first.id,
+        isExample: false,
+        points: 1,
+        questionNumber,
+    };
+}
+export function parseItemAnswer(raw) {
+    if (!isRecord(raw))
+        return { optionId: '' };
+    return { optionId: asString(raw.optionId) };
+}
+export function parseStudentAnswer(raw) {
+    if (!isRecord(raw))
+        return { optionId: '', text: '' };
+    return {
+        optionId: asString(raw.optionId),
+        text: asString(raw.text),
+    };
+}
+function mapOptions(raw) {
+    if (!Array.isArray(raw) || raw.length < 2) {
+        const first = createEmptyOption([]);
+        const second = createEmptyOption([first.id]);
+        return [first, second];
+    }
+    return raw.map((item, index) => {
+        const record = asRecord(item);
+        return {
+            id: asString(record.id, `opt-${index + 1}`),
+            text: asString(record.text),
+        };
+    });
+}
+export function mapApiItem(item, index, fallbackAnswer) {
+    const record = asRecord(item);
+    const content = asRecord(record.content);
+    const correctAnswer = asRecord(record.correctAnswer);
+    const isExample = record.isExample === true;
+    const options = mapOptions(content.options);
+    const parsed = parseItemAnswer(correctAnswer.answer ?? fallbackAnswer);
+    return {
+        question: asString(content.question) || asString(record.question),
+        options,
+        optionId: parsed.optionId || options[0]?.id || '',
+        isExample,
+        points: isExample ? 0 : (typeof record.points === 'number' ? record.points : 1),
+        questionNumber: typeof record.questionNumber === 'number' ? record.questionNumber : index + 1,
+    };
+}
+export function mapQuestionToChooseThenAnswerGroupData(question) {
+    const source = asRecord(question);
+    const content = asRecord(source.content);
+    const answer = asRecord(source.answer);
+    const correctAnswer = asRecord(source.correctAnswer ?? source.correct_answer ?? answer.correctAnswer);
+    const explanation = asString(source.explanation) || asString(answer.explanation);
+    const meta = asRecord(content.meta ?? answer.meta);
+    const fallbackAnswers = Array.isArray(correctAnswer.answer) ? correctAnswer.answer : [];
+    if (Array.isArray(content.items)) {
+        const items = content.items.map((item, index) => mapApiItem(item, index, fallbackAnswers[index]));
+        return {
+            title: asString(meta.title) || asString(answer.title),
+            instruction: asString(meta.instruction) ||
+                asString(answer.instruction) ||
+                CHOOSE_THEN_ANSWER_GROUP_DEFAULT_INSTRUCTION,
+            items,
+            explanation,
+            points: sumGradablePoints(items),
+        };
+    }
+    if (Array.isArray(answer.items)) {
+        const items = answer.items.map((item, index) => ({
+            ...createEmptyItem(index + 1),
+            ...item,
+            questionNumber: item.questionNumber || index + 1,
+        }));
+        return {
+            title: asString(answer.title),
+            instruction: asString(answer.instruction) || CHOOSE_THEN_ANSWER_GROUP_DEFAULT_INSTRUCTION,
+            items,
+            explanation,
+            points: typeof answer.points === 'number' ? answer.points : sumGradablePoints(items),
+        };
+    }
+    return {
+        title: '',
+        instruction: CHOOSE_THEN_ANSWER_GROUP_DEFAULT_INSTRUCTION,
+        items: [createEmptyItem(1)],
+        explanation,
+        points: 1,
+    };
+}

package/dist/components/questions/types/choose-then-answer-group/register.d.ts

@@ -0,0 +1,3 @@
+import type { QuestionTypeRegistration } from '../../creator/question-type-registry';
+export { createEmptyItem, mapQuestionToChooseThenAnswerGroupData, parseStudentAnswer, sumGradablePoints, } from './map-choose-then-answer-group-data';
+export declare const chooseThenAnswerGroupRegistration: QuestionTypeRegistration;

package/dist/components/questions/types/choose-then-answer-group/register.js

@@ -0,0 +1,37 @@
+import { ChooseThenAnswerGroupCreator } from './ChooseThenAnswerGroupCreator';
+import { mapQuestionToChooseThenAnswerGroupData } from './map-choose-then-answer-group-data';
+export { createEmptyItem, mapQuestionToChooseThenAnswerGroupData, parseStudentAnswer, sumGradablePoints, } from './map-choose-then-answer-group-data';
+export const chooseThenAnswerGroupRegistration = {
+    component: ChooseThenAnswerGroupCreator,
+    transformInitialData: (initialData) => mapQuestionToChooseThenAnswerGroupData(initialData),
+    getExtraProps: (ctx) => ({
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+    }),
+    wrapOnSave: (data, ctx) => {
+        const payload = data;
+        return {
+            type: ctx.questionType,
+            content: ctx.state.content,
+            points: payload.points ?? ctx.state.points ?? 1,
+            level: ctx.state.level,
+            difficulty: ctx.state.difficulty,
+            skill: ctx.state.skill,
+            answer: payload,
+            explanation: payload.explanation || '',
+        };
+    },
+    wrapOnChange: (data, ctx) => {
+        const payload = data;
+        return {
+            type: ctx.questionType,
+            content: ctx.state.content,
+            points: payload.points ?? ctx.state.points ?? 1,
+            level: ctx.state.level,
+            difficulty: ctx.state.difficulty,
+            skill: ctx.state.skill,
+            answer: payload,
+            explanation: payload.explanation || '',
+        };
+    },
+};

package/dist/components/questions/types/choose-then-answer-group/transform.d.ts

@@ -0,0 +1,2 @@
+import type { TransformHandler } from '../../../../shared/lib/utils/question-transform-types';
+export declare const transformChooseThenAnswerGroup: TransformHandler;

package/dist/components/questions/types/choose-then-answer-group/transform.js

@@ -0,0 +1,37 @@
+import { CHOOSE_THEN_ANSWER_GROUP_DEFAULT_INSTRUCTION, CHOOSE_THEN_ANSWER_ITEM_TYPE, } from '../../_shared/types/choose-then-answer-group.type';
+import { sumGradablePoints } from './map-choose-then-answer-group-data';
+export const transformChooseThenAnswerGroup = (question) => {
+    const answerData = question.answer;
+    const items = Array.isArray(answerData?.items) ? answerData.items : [];
+    if (items.length === 0) {
+        return { apiContent: { items: [] }, apiCorrectAnswer: { answer: [] } };
+    }
+    const title = typeof answerData?.title === 'string' ? answerData.title.trim() : '';
+    const apiItems = items.map((item, index) => ({
+        questionType: CHOOSE_THEN_ANSWER_ITEM_TYPE,
+        ...(item.isExample ? { isExample: true } : {}),
+        content: {
+            question: item.question || '',
+            options: (item.options || []).map((option) => ({
+                id: option.id || '',
+                text: option.text || '',
+            })),
+        },
+        correctAnswer: { answer: { optionId: item.optionId || '' } },
+        points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+        questionNumber: item.questionNumber || index + 1,
+    }));
+    return {
+        apiContent: {
+            meta: {
+                instruction: answerData?.instruction || CHOOSE_THEN_ANSWER_GROUP_DEFAULT_INSTRUCTION,
+                ...(title ? { title } : {}),
+            },
+            items: apiItems,
+        },
+        apiCorrectAnswer: {
+            answer: apiItems.map((item) => item.correctAnswer.answer),
+        },
+        totalPoints: sumGradablePoints(items),
+    };
+};

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

@@ -1,18 +1,47 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check, CircleHelp, Lightbulb, Star, X } from 'lucide-react';
+import { BookOpen, Check, CircleHelp, Lightbulb, Star, Volume2, X } from 'lucide-react';
 import { cn } from '../../../../shared/lib/utils';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { toMatchWordToPictureImageUrls } from '../../_shared/types/match-word-to-picture-group.type';
 function normalizeWord(value) {
     return value.trim().toLowerCase();
 }
+function isPlayableAudioUrl(value) {
+    return (value.startsWith('http://')
+        || value.startsWith('https://')
+        || value.startsWith('blob:')
+        || value.startsWith('data:'));
+}
+function toPresignKey(value) {
+    const trimmed = value.trim();
+    if (isPlayableAudioUrl(trimmed)) {
+        return trimmed;
+    }
+    return trimmed.replace(/^\/+/, '');
+}
+function ClientAudio({ url }) {
+    const fileKey = toPresignKey(url);
+    const { previewUrl, isLoading } = usePresignedFileUrl(fileKey);
+    const src = previewUrl || (isPlayableAudioUrl(fileKey) ? fileKey : '');
+    if (isLoading) {
+        return (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2", children: [_jsx(Volume2, { className: "h-4 w-4 text-slate-500" }), _jsx("div", { className: "h-8 w-full max-w-xs animate-pulse rounded-md bg-slate-100" })] }));
+    }
+    if (!src) {
+        return null;
+    }
+    return (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2", children: [_jsx(Volume2, { className: "h-4 w-4 text-slate-500" }), _jsx("audio", { controls: true, src: src, className: "h-8 max-w-full", preload: "metadata" })] }));
+}
+function isDisplayableImageUrl(value) {
+    return (value.startsWith('http://')
+        || value.startsWith('https://')
+        || value.startsWith('blob:')
+        || value.startsWith('data:'));
+}
 function ClientImageItem({ url, alt, large = false, }) {
-    const { previewUrl, isLoading } = usePresignedFileUrl(url);
-    const src = previewUrl ||
-        (typeof url === 'string' &&
-            (url.startsWith('http') || url.startsWith('blob:') || url.startsWith('data:'))
-            ? url
-            : '');
+    const fileKey = toPresignKey(url);
+    const { previewUrl, isLoading } = usePresignedFileUrl(fileKey);
+    const src = previewUrl || (isDisplayableImageUrl(fileKey) ? fileKey : '');
     if (!url) {
         return (_jsx("div", { className: "flex h-28 w-28 items-center justify-center rounded-lg border border-dashed border-gray-300 bg-gray-50 text-xs text-gray-400", children: "Ch\u01B0a c\u00F3 \u1EA3nh" }));
     }
@@ -40,19 +69,19 @@ export function MatchWordToPictureGroupClient({ questionData, isReviewMode = fal
             usedWords.add(normalizeWord(value));
         }
     });
-    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 }))] })), wordBank.length > 0 && (_jsxs("div", { className: "rounded-xl border border-violet-200 bg-gradient-to-r from-violet-50 to-indigo-50 p-4", children: [_jsx("p", { className: "mb-3 text-sm font-semibold text-violet-700", children: "Word bank:" }), _jsx("div", { className: "flex flex-wrap gap-2", children: wordBank.map((word, index) => {
+    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.audioUrl ? _jsx(ClientAudio, { url: questionData.audioUrl }) : null, toMatchWordToPictureImageUrls(questionData.imageUrl).length > 0 ? (_jsx("div", { className: "flex flex-wrap justify-center gap-3 rounded-lg border border-slate-100 bg-slate-50 p-3", children: toMatchWordToPictureImageUrls(questionData.imageUrl).map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh bài (${imageIndex + 1})`, large: true }, `mwtp-cover-${imageIndex}`))) })) : null, 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, wordBank.length > 0 && (_jsxs("div", { className: "rounded-xl border border-violet-200 bg-gradient-to-r from-violet-50 to-indigo-50 p-4", children: [_jsx("p", { className: "mb-3 text-sm font-semibold text-violet-700", children: "Word bank:" }), _jsx("div", { className: "flex flex-wrap gap-2", children: wordBank.map((word, index) => {
                             const isUsed = usedWords.has(normalizeWord(word));
                             return (_jsx("span", { className: cn('rounded-full border px-3 py-1 text-sm font-semibold', isUsed
                                     ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
                                     : 'border-violet-200 bg-white text-slate-700'), children: word }, `${word}-${index}`));
-                        }) })] })), questionData.imageUrl ? (_jsx("div", { className: "flex justify-center rounded-lg border border-slate-100 bg-slate-50 p-3", children: _jsx(ClientImageItem, { url: questionData.imageUrl, alt: "Look and match", large: true }) })) : null, items.map((item, itemIndex) => {
+                        }) })] })), items.map((item, itemIndex) => {
                 const selectedWord = item.isExample
                     ? item.correctAnswer
                     : (userAnswers[itemIndex] ?? '');
                 const canSelect = !isReviewMode && !item.isExample && Boolean(onAnswerChange);
                 const isCorrect = normalizeWord(selectedWord) === normalizeWord(item.correctAnswer) &&
                     Boolean(item.correctAnswer);
-                return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-4 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-violet-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] }))] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "flex flex-col gap-4 p-4 sm:flex-row sm:items-center", children: [item.imageUrl && !questionData.imageUrl ? (_jsx(ClientImageItem, { url: item.imageUrl, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1}` })) : null, _jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [_jsxs("p", { className: "text-sm font-semibold text-gray-800", children: [item.questionNumber || itemIndex + 1, ". Ch\u1ECDn t\u1EEB ph\u00F9 h\u1EE3p"] }), _jsxs("div", { className: "flex items-center gap-3", children: [item.isExample ? (_jsx("span", { className: "text-sm italic text-gray-800 underline decoration-gray-400", children: item.correctAnswer })) : (_jsxs("select", { value: selectedWord, disabled: !canSelect, onChange: (event) => handleSelect(itemIndex, event.target.value), className: cn('h-10 max-w-xs rounded-md border-2 bg-white px-3 text-sm font-medium', isReviewMode && isCorrect
+                return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-4 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-violet-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] }))] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "flex flex-col gap-4 p-4 sm:flex-row sm:items-center", children: [toMatchWordToPictureImageUrls(item.imageUrl).length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-2", children: toMatchWordToPictureImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1}${imageIndex > 0 ? ` (${imageIndex + 1})` : ''}` }, `${item.questionNumber}-${imageIndex}`))) })) : null, _jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [_jsxs("p", { className: "text-sm font-semibold text-gray-800", children: [item.questionNumber || itemIndex + 1, ". Ch\u1ECDn t\u1EEB ph\u00F9 h\u1EE3p"] }), _jsxs("div", { className: "flex items-center gap-3", children: [item.isExample ? (_jsx("span", { className: "text-sm italic text-gray-800 underline decoration-gray-400", children: item.correctAnswer })) : (_jsxs("select", { value: selectedWord, disabled: !canSelect, onChange: (event) => handleSelect(itemIndex, event.target.value), className: cn('h-10 max-w-xs rounded-md border-2 bg-white px-3 text-sm font-medium', isReviewMode && isCorrect
                                                         ? 'border-green-400 bg-green-50 text-green-700'
                                                         : isReviewMode && selectedWord && !isCorrect
                                                             ? 'border-red-400 bg-red-50 text-red-700'

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

@@ -19,9 +19,10 @@ 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);
@@ -30,7 +31,9 @@ export function MatchWordToPictureGroupCreator({ initialData, onChange, external
     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 [imageUrl, setImageUrl] = useState(initialData?.imageUrl || '');
+    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 || '');
@@ -41,9 +44,11 @@ export function MatchWordToPictureGroupCreator({ initialData, onChange, external
     useEffect(() => {
         onChangeRef.current = onChange;
     }, [onChange]);
-    const buildPayload = (nextTitle = title, nextInstruction = instruction, nextImageUrl = imageUrl, 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,
@@ -61,7 +66,7 @@ export function MatchWordToPictureGroupCreator({ initialData, onChange, external
             debouncedOnChange(payload);
             onUnsavedChangesChange?.(true);
         }
-    }, [title, instruction, imageUrl, wordBank, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
+    }, [title, instruction, passage, audioUrl, imageUrl, wordBank, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
     const validate = () => {
         const nextErrors = [];
         if (!instruction.trim())
@@ -72,7 +77,7 @@ 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 (!imageUrl.trim() && !item.imageUrl?.trim()) {
+            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())
@@ -88,15 +93,17 @@ export function MatchWordToPictureGroupCreator({ initialData, onChange, external
                 getFormData: () => buildPayload(),
             };
         }
-    }, [validationRef, title, instruction, imageUrl, 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. 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) })] }), _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, {
+    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" }), Array.from(new Set([
+                                                                }) }) })), 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 }) })] })] }))] }));