@tinyweb_dev/oe-exam-sdk 0.2.9 → 0.2.11

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

@@ -8,6 +8,16 @@ function asRecord(value) {
 function asString(value, fallback = '') {
     return typeof value === 'string' ? value : fallback;
 }
+function asOptionId(value) {
+    if (typeof value === 'string') {
+        return value.trim();
+    }
+    if (Array.isArray(value)) {
+        const first = value.find((item) => typeof item === 'string' && item.trim() !== '');
+        return typeof first === 'string' ? first.trim() : '';
+    }
+    return '';
+}
 function asOptionalUrl(value) {
     if (typeof value !== 'string') {
         return undefined;
@@ -63,7 +73,7 @@ export function mapChooseAnswerGroupItem(item, index, fallbackAnswer) {
         question: asString(content.question) || asString(record.question),
         optionType: asString(content.optionType) === 'image' ? 'image' : 'text',
         options,
-        correctAnswer: asString(correctAnswer.answer) || fallbackAnswer || options[0]?.id || 'opt-1',
+        correctAnswer: asOptionId(correctAnswer.answer) || fallbackAnswer || options[0]?.id || 'opt-1',
         isExample,
         points: isExample ? 0 : typeof record.points === 'number' ? record.points : 1,
         questionNumber: typeof record.questionNumber === 'number' ? record.questionNumber : index + 1,
@@ -78,15 +88,17 @@ export function mapQuestionToChooseAnswerGroupData(question) {
     const correctAnswer = asRecord(source.correctAnswer ?? source.correct_answer ?? answer.correctAnswer);
     const explanation = String(source.explanation || answer.explanation || '');
     const fallbackAnswers = Array.isArray(correctAnswer.answer)
-        ? correctAnswer.answer.map((value) => typeof value === 'string' ? value : undefined)
+        ? correctAnswer.answer.map((value) => asOptionId(value))
         : [];
     if (Array.isArray(content.items)) {
         const items = content.items.map((item, index) => mapChooseAnswerGroupItem(item, index, fallbackAnswers[index]));
         const audioUrl = asOptionalUrl(asRecord(content.meta).audioUrl);
+        const imageUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(asRecord(content.meta).imageUrl));
         return {
             instruction: asString(asRecord(content.meta).instruction) || 'Choose the correct answer.',
             passage: asString(asRecord(content.meta).passage),
             ...(audioUrl ? { audioUrl } : {}),
+            ...(imageUrl !== undefined ? { imageUrl } : {}),
             items,
             explanation,
             points: items.reduce((total, item) => (item.isExample ? total : total + (item.points || 0)), 0),
@@ -94,10 +106,12 @@ export function mapQuestionToChooseAnswerGroupData(question) {
     }
     if (Array.isArray(answer.items)) {
         const audioUrl = asOptionalUrl(answer.audioUrl);
+        const imageUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(answer.imageUrl));
         return {
             instruction: asString(answer.instruction, 'Choose the correct answer.'),
             passage: asString(answer.passage),
             ...(audioUrl ? { audioUrl } : {}),
+            ...(imageUrl !== undefined ? { imageUrl } : {}),
             items: answer.items.map((item, index) => mapChooseAnswerGroupItem(item, index, fallbackAnswers[index])),
             explanation,
             points: typeof answer.points === 'number' ? answer.points : undefined,

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

@@ -51,6 +51,10 @@ export const transformChooseTheCorrectAnswerGroup = (question) => {
     if (answerData?.audioUrl && answerData.audioUrl.trim()) {
         meta.audioUrl = answerData.audioUrl.trim();
     }
+    const groupImageUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(answerData?.imageUrl));
+    if (groupImageUrl !== undefined) {
+        meta.imageUrl = groupImageUrl;
+    }
     return {
         apiContent: {
             meta,

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

@@ -20,9 +20,28 @@ function toItemAnswer(item) {
         caseSensitive: item.caseSensitive === true,
     };
 }
-export const transformFillInBlankGroup = (question) => {
+/**
+ * wrapOnSave nests creator fields under `answer`. getFormData() (Quiz Playground
+ * Update save) returns the same fields at the root. Prefer nested items, then root.
+ */
+function resolveFillInBlankGroupSource(question) {
     const answerData = question.answer;
-    const items = Array.isArray(answerData?.items) ? answerData.items : [];
+    const rootData = question;
+    const answerItems = Array.isArray(answerData?.items) ? answerData.items : null;
+    const rootItems = Array.isArray(rootData.items) ? rootData.items : null;
+    if (answerItems && answerItems.length > 0) {
+        return { items: answerItems, source: answerData ?? {} };
+    }
+    if (rootItems && rootItems.length > 0) {
+        return { items: rootItems, source: rootData };
+    }
+    return {
+        items: answerItems ?? rootItems ?? [],
+        source: answerData ?? {},
+    };
+}
+export const transformFillInBlankGroup = (question) => {
+    const { items, source: answerData } = resolveFillInBlankGroupSource(question);
     if (items.length === 0) {
         return { apiContent: { items: [] }, apiCorrectAnswer: { answer: [] } };
     }

package/dist/components/questions/types/match-columns-to-make-sentences/MatchColumnsToMakeSentencesClient.d.ts

@@ -0,0 +1,2 @@
+import type { MatchColumnsGroupClientProps } from '../../_shared/types/match-columns-to-make-sentences.type';
+export declare function MatchColumnsToMakeSentencesClient({ questionData, isReviewMode, userAnswers, onAnswerChange, }: MatchColumnsGroupClientProps): import("react").JSX.Element;

package/dist/components/questions/types/match-columns-to-make-sentences/MatchColumnsToMakeSentencesClient.js

@@ -0,0 +1,74 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Lightbulb, Star } from 'lucide-react';
+import { cn } from '../../../../shared/lib/utils';
+import { assembleMatchColumnsSentence, getMatchColumnsChoiceColumns, getMatchColumnsStemColumn, } from './map-match-columns-to-make-sentences-data';
+function emptyAnswer(stemFragmentId) {
+    return { fragmentIds: stemFragmentId ? [stemFragmentId] : [], sentence: '' };
+}
+export function MatchColumnsToMakeSentencesClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, }) {
+    const items = questionData.items || [];
+    const columns = questionData.columns || [];
+    const stemColumn = getMatchColumnsStemColumn(columns);
+    const choiceColumns = getMatchColumnsChoiceColumns(columns);
+    const canEdit = Boolean(onAnswerChange) && !isReviewMode;
+    const resolveAnswer = (itemIndex) => {
+        const item = items[itemIndex];
+        if (!item)
+            return emptyAnswer('');
+        if (item.isExample) {
+            return { fragmentIds: item.fragmentIds, sentence: item.sentence };
+        }
+        const raw = userAnswers[itemIndex];
+        if (raw && Array.isArray(raw.fragmentIds)) {
+            return raw;
+        }
+        return emptyAnswer(item.stemFragmentId);
+    };
+    const handleChoiceChange = (itemIndex, choiceIndex, fragmentId) => {
+        if (!canEdit || items[itemIndex]?.isExample)
+            return;
+        const next = items.map((item, index) => {
+            if (item.isExample) {
+                return { fragmentIds: item.fragmentIds, sentence: item.sentence };
+            }
+            const current = resolveAnswer(index);
+            if (index !== itemIndex)
+                return current;
+            const fragmentIds = [
+                item.stemFragmentId,
+                ...choiceColumns.map((column, colIndex) => {
+                    if (colIndex === choiceIndex)
+                        return fragmentId;
+                    return current.fragmentIds[colIndex + 1] || '';
+                }),
+            ];
+            return {
+                fragmentIds,
+                sentence: assembleMatchColumnsSentence(fragmentIds, columns),
+            };
+        });
+        onAnswerChange?.(next);
+    };
+    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("div", { className: "overflow-x-auto rounded-xl border border-gray-200 bg-white", children: _jsxs("table", { className: "min-w-full text-sm", children: [_jsx("thead", { children: _jsx("tr", { className: "bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500", children: columns.map((column) => (_jsxs("th", { className: "px-3 py-2 font-semibold", children: [column.label || column.id, column.role === 'stem' ? ' (stem)' : ''] }, column.id))) }) }), _jsx("tbody", { children: _jsx("tr", { className: "align-top", children: columns.map((column) => (_jsx("td", { className: "px-3 py-2", children: _jsx("ul", { className: "space-y-1", children: column.fragments.map((fragment) => (_jsxs("li", { className: "text-slate-700", children: [_jsxs("span", { className: "mr-1 font-semibold text-slate-500", children: [fragment.id, "."] }), fragment.text || '—'] }, fragment.id))) }) }, `${column.id}-bank`))) }) })] }) }), _jsx("div", { className: "space-y-3", children: items.map((item, itemIndex) => {
+                    const current = resolveAnswer(itemIndex);
+                    const canSelect = canEdit && !item.isExample;
+                    const stemText = stemColumn?.fragments.find((fragment) => fragment.id === item.stemFragmentId)?.text
+                        || item.stemFragmentId
+                        || '—';
+                    const isCorrect = isReviewMode &&
+                        current.sentence.trim().toLowerCase() === item.sentence.trim().toLowerCase();
+                    return (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-white p-4 shadow-sm", children: [_jsxs("div", { className: "mb-3 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_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: "grid gap-3 md:grid-cols-[minmax(0,1fr)_repeat(2,minmax(0,1fr))]", children: [_jsx("div", { className: "rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm font-semibold text-slate-800", children: stemText }), choiceColumns.map((column, choiceIndex) => {
+                                        const selectedId = current.fragmentIds[choiceIndex + 1] || '';
+                                        return (_jsxs("select", { className: cn('rounded-lg border-2 px-3 py-2 text-sm', isReviewMode && selectedId === item.fragmentIds[choiceIndex + 1]
+                                                ? 'border-green-400 bg-green-50'
+                                                : selectedId
+                                                    ? 'border-blue-400 bg-blue-50'
+                                                    : 'border-gray-200 bg-white'), disabled: !canSelect, value: selectedId, onChange: (event) => handleChoiceChange(itemIndex, choiceIndex, event.target.value), children: [_jsxs("option", { value: "", children: ["Ch\u1ECDn ", column.label || column.id] }), column.fragments.map((fragment) => (_jsxs("option", { value: fragment.id, children: [fragment.id, ". ", fragment.text] }, fragment.id)))] }, `${itemIndex}-${column.id}`));
+                                    })] }), _jsx("p", { className: cn('mt-3 text-sm', isReviewMode
+                                    ? isCorrect
+                                        ? 'text-green-700'
+                                        : 'text-red-700'
+                                    : 'text-slate-600'), children: current.sentence || 'Chưa ghép câu' }), isReviewMode && !item.isExample && (_jsxs("p", { className: "mt-1 text-xs text-slate-500", children: ["\u0110\u00E1p \u00E1n: ", item.sentence] }))] }, `${item.questionNumber}-${itemIndex}`));
+                }) }), isReviewMode && questionData.explanation && (_jsxs("div", { className: "flex items-start gap-2 rounded-xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-800", children: [_jsx(Lightbulb, { className: "mt-0.5 h-4 w-4 flex-shrink-0" }), questionData.explanation] }))] }));
+}

package/dist/components/questions/types/match-columns-to-make-sentences/MatchColumnsToMakeSentencesCreator.d.ts

@@ -0,0 +1,2 @@
+import type { MatchColumnsGroupCreatorProps } from '../../_shared/types/match-columns-to-make-sentences.type';
+export declare function MatchColumnsToMakeSentencesCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }: MatchColumnsGroupCreatorProps): import("react").JSX.Element;

package/dist/components/questions/types/match-columns-to-make-sentences/MatchColumnsToMakeSentencesCreator.js

@@ -0,0 +1,222 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '../../../../components/ui/button';
+import { Label } from '../../../../components/ui/label';
+import { Input } from '../../../../components/ui/input';
+import { 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 { MatchColumnsToMakeSentencesClient } from './MatchColumnsToMakeSentencesClient';
+import { MATCH_COLUMNS_DEFAULT_INSTRUCTION } from '../../_shared/types/match-columns-to-make-sentences.type';
+function parsePointsValue(raw, allowZero = false) {
+    if (raw === '')
+        return allowZero ? 0 : 1;
+    const parsed = parseInt(raw.replace(/[^0-9]/g, ''), 10);
+    if (Number.isNaN(parsed))
+        return allowZero ? 0 : 1;
+    const min = allowZero ? 0 : 1;
+    return Math.max(min, parsed);
+}
+import { assembleMatchColumnsSentence, createEmptyMatchColumnsColumns, createEmptyMatchColumnsItem, getMatchColumnsChoiceColumns, getMatchColumnsStemColumn, mapQuestionToMatchColumnsGroupData, nextMatchColumnsFragmentId, } from './map-match-columns-to-make-sentences-data';
+function sumPoints(items) {
+    return items.reduce((total, item) => (item.isExample ? total : total + (typeof item.points === 'number' ? item.points : 1)), 0);
+}
+function syncItemAnswers(items, columns) {
+    const choiceCount = getMatchColumnsChoiceColumns(columns).length;
+    return items.map((item, index) => {
+        const stemFragmentId = item.stemFragmentId || getMatchColumnsStemColumn(columns)?.fragments[0]?.id || '';
+        const fragmentIds = [
+            stemFragmentId,
+            ...Array.from({ length: choiceCount }, (_, choiceIndex) => item.fragmentIds[choiceIndex + 1] || ''),
+        ];
+        return {
+            ...item,
+            stemFragmentId,
+            fragmentIds,
+            sentence: assembleMatchColumnsSentence(fragmentIds, columns),
+            questionNumber: item.questionNumber || index + 1,
+            points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+        };
+    });
+}
+export function MatchColumnsToMakeSentencesCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }) {
+    const seeded = mapQuestionToMatchColumnsGroupData(initialData ? { answer: initialData } : null);
+    const [title, setTitle] = useState(initialData?.title ?? seeded.title ?? '');
+    const [instruction, setInstruction] = useState(initialData?.instruction || seeded.instruction || MATCH_COLUMNS_DEFAULT_INSTRUCTION);
+    const [columns, setColumns] = useState(() => (initialData?.columns?.length ? initialData.columns : seeded.columns.length ? seeded.columns : createEmptyMatchColumnsColumns()));
+    const [items, setItems] = useState(() => (initialData?.items?.length ? syncItemAnswers(initialData.items, initialData.columns || columns) : seeded.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, nextColumns = columns, nextItems = items, nextExplanation = explanation) => ({
+        title: nextTitle,
+        instruction: nextInstruction,
+        columns: nextColumns,
+        items: syncItemAnswers(nextItems, nextColumns),
+        explanation: nextExplanation,
+        points: sumPoints(nextItems),
+    });
+    const debouncedOnChange = useDebouncedCallback((payload) => {
+        onChangeRef.current?.(payload);
+    }, 300);
+    useEffect(() => {
+        const payload = buildPayload();
+        const serialized = JSON.stringify(payload);
+        if (serialized !== previousPayloadRef.current) {
+            previousPayloadRef.current = serialized;
+            debouncedOnChange(payload);
+            onUnsavedChangesChange?.(true);
+        }
+    }, [title, instruction, columns, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
+    const validate = () => {
+        const nextErrors = [];
+        if (!instruction.trim())
+            nextErrors.push('Hướng dẫn (Instruction) không được để trống.');
+        if (columns.length < 2)
+            nextErrors.push('Cần ít nhất 2 cột (1 stem + 1 choice).');
+        const stems = columns.filter((column) => column.role === 'stem');
+        if (stems.length !== 1)
+            nextErrors.push('Cần đúng 1 cột stem.');
+        if (getMatchColumnsChoiceColumns(columns).length < 1)
+            nextErrors.push('Cần ít nhất 1 cột choice.');
+        columns.forEach((column, index) => {
+            if (!column.fragments.length) {
+                nextErrors.push(`Cột ${index + 1}: cần ít nhất một fragment.`);
+            }
+            column.fragments.forEach((fragment, fragmentIndex) => {
+                if (!fragment.id.trim() || !fragment.text.trim()) {
+                    nextErrors.push(`Cột ${index + 1}, fragment ${fragmentIndex + 1}: id và text bắt buộc.`);
+                }
+            });
+        });
+        if (items.length < 1)
+            nextErrors.push('Cần ít nhất một câu hỏi.');
+        const expectedCount = 1 + getMatchColumnsChoiceColumns(columns).length;
+        items.forEach((item, index) => {
+            if (!item.stemFragmentId) {
+                nextErrors.push(`Câu ${index + 1}: chưa chọn stem.`);
+            }
+            if (item.fragmentIds.filter(Boolean).length !== expectedCount) {
+                nextErrors.push(`Câu ${index + 1}: cần chọn đủ ${expectedCount} fragment.`);
+            }
+        });
+        setErrors(nextErrors);
+        return nextErrors.length === 0;
+    };
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => validate(),
+                getFormData: () => buildPayload(),
+            };
+        }
+    }, [validationRef, title, instruction, columns, items, explanation]);
+    const updateColumn = (index, patch) => {
+        setColumns((prev) => prev.map((column, i) => (i === index ? { ...column, ...patch } : column)));
+    };
+    const updateFragment = (columnIndex, fragmentIndex, patch) => {
+        setColumns((prev) => prev.map((column, i) => {
+            if (i !== columnIndex)
+                return column;
+            return {
+                ...column,
+                fragments: column.fragments.map((fragment, fi) => (fi === fragmentIndex ? { ...fragment, ...patch } : fragment)),
+            };
+        }));
+    };
+    const addFragment = (columnIndex) => {
+        setColumns((prev) => prev.map((column, i) => {
+            if (i !== columnIndex)
+                return column;
+            return {
+                ...column,
+                fragments: [...column.fragments, { id: nextMatchColumnsFragmentId(prev), text: '' }],
+            };
+        }));
+    };
+    const removeFragment = (columnIndex, fragmentIndex) => {
+        setColumns((prev) => prev.map((column, i) => {
+            if (i !== columnIndex || column.fragments.length <= 1)
+                return column;
+            return {
+                ...column,
+                fragments: column.fragments.filter((_, fi) => fi !== fragmentIndex),
+            };
+        }));
+    };
+    const addChoiceColumn = () => {
+        setColumns((prev) => [
+            ...prev,
+            {
+                id: `col-${prev.length + 1}`,
+                label: String(prev.length + 1),
+                role: 'choice',
+                fragments: [{ id: nextMatchColumnsFragmentId(prev), text: '' }],
+            },
+        ]);
+    };
+    const removeColumn = (index) => {
+        setColumns((prev) => {
+            const target = prev[index];
+            if (!target || target.role === 'stem' || prev.filter((column) => column.role === 'choice').length <= 1) {
+                return prev;
+            }
+            return prev.filter((_, i) => i !== index);
+        });
+    };
+    const updateItem = (index, patch) => {
+        setItems((prev) => {
+            const next = [...prev];
+            const current = next[index];
+            if (!current)
+                return prev;
+            const merged = { ...current, ...patch };
+            if (patch.stemFragmentId) {
+                merged.fragmentIds = [patch.stemFragmentId, ...current.fragmentIds.slice(1)];
+            }
+            next[index] = {
+                ...merged,
+                sentence: assembleMatchColumnsSentence(merged.fragmentIds, columns),
+            };
+            return next;
+        });
+    };
+    const setItemChoice = (itemIndex, choiceIndex, fragmentId) => {
+        setItems((prev) => prev.map((item, index) => {
+            if (index !== itemIndex)
+                return item;
+            const fragmentIds = item.fragmentIds.map((id, fi) => (fi === choiceIndex + 1 ? fragmentId : id));
+            return {
+                ...item,
+                fragmentIds,
+                sentence: assembleMatchColumnsSentence(fragmentIds, columns),
+            };
+        }));
+    };
+    const addItem = () => {
+        setItems((prev) => [...prev, createEmptyMatchColumnsItem(prev.length + 1, columns)]);
+    };
+    const removeItem = (index) => {
+        setItems((prev) => {
+            if (prev.length <= 1)
+                return prev;
+            return prev.filter((_, i) => i !== index).map((item, i) => ({ ...item, questionNumber: i + 1 }));
+        });
+    };
+    const currentPayload = buildPayload();
+    const displayErrors = externalErrors && externalErrors.length > 0 ? externalErrors : errors;
+    const stemColumn = getMatchColumnsStemColumn(columns);
+    const choiceColumns = getMatchColumnsChoiceColumns(columns);
+    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 Gh\u00E9p c\u1ED9t th\u00E0nh c\u00E2u" }), _jsx("p", { className: "text-sm text-gray-500", children: "C\u1ED9t stem c\u1ED1 \u0111\u1ECBnh theo d\u00F2ng; h\u1ECDc sinh ch\u1ECDn 1 fragment m\u1ED7i c\u1ED9t choice." })] }), _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(MatchColumnsToMakeSentencesClient, { questionData: currentPayload }) })] })) : (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base font-semibold", children: "Th\u00F4ng tin chung" }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "match-columns-title", children: "Ti\u00EAu \u0111\u1EC1" }), _jsx(Input, { id: "match-columns-title", className: "mt-1", value: title, onChange: (e) => setTitle(e.target.value) })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "match-columns-instruction", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "match-columns-instruction", className: "mt-1", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: MATCH_COLUMNS_DEFAULT_INSTRUCTION })] })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsx(CardTitle, { className: "text-base font-semibold", children: "C\u1ED9t fragment" }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addChoiceColumn, className: "gap-2", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm c\u1ED9t choice"] })] }), _jsx(CardContent, { className: "grid gap-4 md:grid-cols-3", children: columns.map((column, columnIndex) => (_jsxs("div", { className: "space-y-3 rounded-lg border border-gray-200 p-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx(Input, { value: column.label || '', onChange: (e) => updateColumn(columnIndex, { label: e.target.value }), placeholder: "Nh\u00E3n c\u1ED9t" }), _jsx("span", { className: "text-xs text-slate-500", children: column.role }), column.role === 'choice' && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeColumn(columnIndex), children: _jsx(Trash2, { className: "h-4 w-4 text-red-500" }) }))] }), column.fragments.map((fragment, fragmentIndex) => (_jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { className: "w-16", value: fragment.id, onChange: (e) => updateFragment(columnIndex, fragmentIndex, { id: e.target.value }) }), _jsx(Input, { value: fragment.text, onChange: (e) => updateFragment(columnIndex, fragmentIndex, { text: e.target.value }), placeholder: "Text" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeFragment(columnIndex, fragmentIndex), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, `${column.id}-${fragmentIndex}`))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => addFragment(columnIndex), children: "Th\u00EAm fragment" })] }, column.id))) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs(CardTitle, { className: "text-base font-semibold", children: ["C\u00E2u h\u1ECFi (", items.length, ")"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addItem, className: "gap-2", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm c\u00E2u"] })] }), _jsx(CardContent, { className: "space-y-4", children: items.map((item, index) => (_jsxs("div", { className: "space-y-3 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\u00E2u ", item.questionNumber || index + 1] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Switch, { id: `match-columns-example-${index}`, checked: item.isExample || false, onCheckedChange: (checked) => updateItem(index, { isExample: checked, points: checked ? 0 : 1 }) }), _jsxs(Label, { htmlFor: `match-columns-example-${index}`, 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: () => removeItem(index), children: _jsx(Trash2, { className: "h-4 w-4 text-red-500" }) }))] })] }), _jsxs("div", { className: "grid gap-3 md:grid-cols-3", children: [_jsxs("select", { className: "rounded-md border px-3 py-2 text-sm", value: item.stemFragmentId, onChange: (e) => updateItem(index, { stemFragmentId: e.target.value }), children: [_jsx("option", { value: "", children: "Ch\u1ECDn stem" }), (stemColumn?.fragments || []).map((fragment) => (_jsxs("option", { value: fragment.id, children: [fragment.id, ". ", fragment.text || '(trống)'] }, fragment.id)))] }), choiceColumns.map((column, choiceIndex) => (_jsxs("select", { className: "rounded-md border px-3 py-2 text-sm", value: item.fragmentIds[choiceIndex + 1] || '', onChange: (e) => setItemChoice(index, choiceIndex, e.target.value), children: [_jsxs("option", { value: "", children: ["Ch\u1ECDn ", column.label || column.id] }), column.fragments.map((fragment) => (_jsxs("option", { value: fragment.id, children: [fragment.id, ". ", fragment.text || '(trống)'] }, fragment.id)))] }, `${index}-${column.id}`)))] }), _jsx("p", { className: "text-sm text-slate-600", children: item.sentence || 'Câu sẽ tự ghép từ fragment đã chọn.' })] }, index))) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Gi\u1EA3i th\u00EDch" }) }), _jsx(CardContent, { children: _jsx(Textarea, { id: "match-columns-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/match-columns-to-make-sentences/index.d.ts

@@ -0,0 +1,5 @@
+export * from './MatchColumnsToMakeSentencesCreator';
+export * from './MatchColumnsToMakeSentencesClient';
+export * from './transform';
+export * from './register';
+export * from './map-match-columns-to-make-sentences-data';

package/dist/components/questions/types/match-columns-to-make-sentences/index.js

@@ -0,0 +1,5 @@
+export * from './MatchColumnsToMakeSentencesCreator';
+export * from './MatchColumnsToMakeSentencesClient';
+export * from './transform';
+export * from './register';
+export * from './map-match-columns-to-make-sentences-data';

package/dist/components/questions/types/match-columns-to-make-sentences/map-match-columns-to-make-sentences-data.d.ts

@@ -0,0 +1,8 @@
+import type { MatchColumnsColumn, MatchColumnsGroupData, MatchColumnsGroupItemData } from '../../_shared/types/match-columns-to-make-sentences.type';
+export declare function assembleMatchColumnsSentence(fragmentIds: string[], columns: MatchColumnsColumn[]): string;
+export declare function getMatchColumnsStemColumn(columns: MatchColumnsColumn[]): MatchColumnsColumn | undefined;
+export declare function getMatchColumnsChoiceColumns(columns: MatchColumnsColumn[]): MatchColumnsColumn[];
+export declare function nextMatchColumnsFragmentId(columns: MatchColumnsColumn[]): string;
+export declare function createEmptyMatchColumnsColumns(): MatchColumnsColumn[];
+export declare function createEmptyMatchColumnsItem(questionNumber: number, columns: MatchColumnsColumn[]): MatchColumnsGroupItemData;
+export declare function mapQuestionToMatchColumnsGroupData(question: Record<string, unknown> | null | undefined): MatchColumnsGroupData;

package/dist/components/questions/types/match-columns-to-make-sentences/map-match-columns-to-make-sentences-data.js

@@ -0,0 +1,199 @@
+import { MATCH_COLUMNS_DEFAULT_INSTRUCTION } from '../../_shared/types/match-columns-to-make-sentences.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 assembleMatchColumnsSentence(fragmentIds, columns) {
+    const texts = new Map();
+    columns.forEach((column) => {
+        column.fragments.forEach((fragment) => {
+            texts.set(fragment.id, fragment.text);
+        });
+    });
+    return fragmentIds
+        .map((id) => texts.get(id) || '')
+        .filter(Boolean)
+        .join(' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+}
+export function getMatchColumnsStemColumn(columns) {
+    return columns.find((column) => column.role === 'stem');
+}
+export function getMatchColumnsChoiceColumns(columns) {
+    return columns.filter((column) => column.role === 'choice');
+}
+export function nextMatchColumnsFragmentId(columns) {
+    const used = new Set();
+    columns.forEach((column) => {
+        column.fragments.forEach((fragment) => used.add(fragment.id));
+    });
+    let n = 1;
+    while (used.has(String(n)))
+        n += 1;
+    return String(n);
+}
+export function createEmptyMatchColumnsColumns() {
+    return [
+        {
+            id: 'col-1',
+            label: '1',
+            role: 'stem',
+            fragments: [
+                { id: '1', text: '' },
+                { id: '2', text: '' },
+            ],
+        },
+        {
+            id: 'col-2',
+            label: '2',
+            role: 'choice',
+            fragments: [
+                { id: 'a', text: '' },
+                { id: 'b', text: '' },
+            ],
+        },
+        {
+            id: 'col-3',
+            label: '3',
+            role: 'choice',
+            fragments: [
+                { id: 'c', text: '' },
+                { id: 'd', text: '' },
+            ],
+        },
+    ];
+}
+export function createEmptyMatchColumnsItem(questionNumber, columns) {
+    const stem = getMatchColumnsStemColumn(columns);
+    const choices = getMatchColumnsChoiceColumns(columns);
+    const stemFragmentId = stem?.fragments[0]?.id || '';
+    const fragmentIds = [
+        stemFragmentId,
+        ...choices.map((column) => column.fragments[0]?.id || ''),
+    ];
+    return {
+        stemFragmentId,
+        fragmentIds,
+        sentence: assembleMatchColumnsSentence(fragmentIds, columns),
+        isExample: false,
+        points: 1,
+        questionNumber,
+    };
+}
+function parseItemAnswer(raw) {
+    const record = asRecord(raw);
+    const fragmentIds = Array.isArray(record.fragmentIds)
+        ? record.fragmentIds.filter((id) => typeof id === 'string')
+        : [];
+    return {
+        fragmentIds,
+        sentence: asString(record.sentence),
+    };
+}
+function mapColumn(raw, index) {
+    const record = asRecord(raw);
+    const fragments = Array.isArray(record.fragments)
+        ? record.fragments.map((fragment, fragmentIndex) => {
+            const item = asRecord(fragment);
+            return {
+                id: asString(item.id, `${index + 1}-${fragmentIndex + 1}`),
+                text: asString(item.text),
+            };
+        })
+        : [];
+    return {
+        id: asString(record.id, `col-${index + 1}`),
+        ...(asString(record.label) ? { label: asString(record.label) } : {}),
+        role: record.role === 'stem' ? 'stem' : 'choice',
+        fragments,
+    };
+}
+function mapApiItem(item, index, columns, fallbackAnswer) {
+    const record = asRecord(item);
+    const content = asRecord(record.content);
+    const correctAnswer = asRecord(record.correctAnswer);
+    const parsed = parseItemAnswer(correctAnswer.answer ?? fallbackAnswer);
+    const isExample = record.isExample === true;
+    const stemFragmentId = asString(content.stemFragmentId) || parsed.fragmentIds[0] || '';
+    const fragmentIds = parsed.fragmentIds.length > 0
+        ? parsed.fragmentIds
+        : [stemFragmentId];
+    const sentence = parsed.sentence.trim() || assembleMatchColumnsSentence(fragmentIds, columns);
+    return {
+        stemFragmentId,
+        fragmentIds,
+        sentence,
+        isExample,
+        points: isExample ? 0 : (typeof record.points === 'number' ? record.points : 1),
+        questionNumber: typeof record.questionNumber === 'number' ? record.questionNumber : index + 1,
+    };
+}
+export function mapQuestionToMatchColumnsGroupData(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 fallbackAnswers = Array.isArray(correctAnswer.answer)
+        ? correctAnswer.answer
+        : Array.isArray(answer.answer)
+            ? answer.answer
+            : [];
+    const explanation = asString(source.explanation) || asString(answer.explanation);
+    const meta = asRecord(content.meta ?? answer.meta);
+    if (Array.isArray(content.columns) || Array.isArray(content.items)) {
+        const columns = Array.isArray(content.columns)
+            ? content.columns.map((column, index) => mapColumn(column, index))
+            : [];
+        const items = Array.isArray(content.items)
+            ? content.items.map((item, index) => mapApiItem(item, index, columns, fallbackAnswers[index]))
+            : [];
+        return {
+            title: asString(meta.title) || asString(answer.title),
+            instruction: asString(meta.instruction) ||
+                asString(answer.instruction) ||
+                MATCH_COLUMNS_DEFAULT_INSTRUCTION,
+            columns,
+            items,
+            explanation,
+            points: items.reduce((total, item) => (item.isExample ? total : total + (item.points || 0)), 0),
+        };
+    }
+    if (Array.isArray(answer.columns) || Array.isArray(answer.items)) {
+        const columns = Array.isArray(answer.columns)
+            ? answer.columns.map((column, index) => mapColumn(column, index))
+            : [];
+        const items = Array.isArray(answer.items)
+            ? answer.items.map((item, index) => ({
+                ...createEmptyMatchColumnsItem(index + 1, columns),
+                ...item,
+                questionNumber: item.questionNumber || index + 1,
+            }))
+            : [];
+        return {
+            title: asString(answer.title),
+            instruction: asString(answer.instruction) || MATCH_COLUMNS_DEFAULT_INSTRUCTION,
+            columns,
+            items,
+            explanation,
+            points: typeof answer.points === 'number'
+                ? answer.points
+                : items.reduce((total, item) => (item.isExample ? total : total + (item.points || 0)), 0),
+        };
+    }
+    const columns = createEmptyMatchColumnsColumns();
+    const items = [createEmptyMatchColumnsItem(1, columns)];
+    return {
+        title: '',
+        instruction: MATCH_COLUMNS_DEFAULT_INSTRUCTION,
+        columns,
+        items,
+        explanation,
+        points: 1,
+    };
+}

package/dist/components/questions/types/match-columns-to-make-sentences/register.d.ts

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