@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.30

package/dist/components/questions/types/word-order-and-match-group/WordOrderAndMatchGroupCreator.js

@@ -0,0 +1,182 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { useForm, useFieldArray, Controller } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Plus, Trash2, Shuffle, Eye, Edit3, Layers, Tag, } from 'lucide-react';
+import { Button } from '../../../../components/ui/button';
+import { Input } from '../../../../components/ui/input';
+import { Textarea } from '../../../../components/ui/textarea';
+import { Switch } from '../../../../components/ui/switch';
+import { Label } from '../../../../components/ui/label';
+import { cn } from '../../../../shared/lib/utils';
+import { WordOrderAndMatchGroupClient } from './WordOrderAndMatchGroupClient';
+const itemSchema = z.object({
+    scrambledWords: z.array(z.string().min(1, 'Từ không được để trống')).min(2, 'Cần ít nhất 2 từ xáo trộn'),
+    orderedPhrase: z.string().min(1, 'Vui lòng nhập câu hoàn chỉnh đúng'),
+    matchLabel: z.string().min(1, 'Vui lòng chọn nhãn nối'),
+    isExample: z.boolean().optional(),
+    points: z.number().min(0, 'Điểm số không âm'),
+    questionNumber: z.number(),
+});
+const formSchema = z.object({
+    instruction: z.string().min(1, 'Vui lòng nhập hướng dẫn'),
+    matchOptions: z.array(z.string().min(1)).min(1, 'Cần ít nhất 1 nhãn lựa chọn'),
+    items: z.array(itemSchema).min(1, 'Cần ít nhất 1 câu hỏi con'),
+    explanation: z.string().optional(),
+});
+const DEFAULT_INSTRUCTION = 'Put the useful phrases in order, then match them to parts A–F in Exercise 4.';
+const DEFAULT_MATCH_OPTIONS = ['A', 'B', 'C', 'D', 'E', 'F'];
+export function WordOrderAndMatchGroupCreator({ initialData, onSave, onChange, externalErrors, onUnsavedChangesChange, validationRef, }) {
+    const [activeTab, setActiveTab] = useState('editor');
+    const [newOptionInput, setNewOptionInput] = useState('');
+    const [newWordInputs, setNewWordInputs] = useState({});
+    const defaultValues = {
+        instruction: initialData?.instruction || DEFAULT_INSTRUCTION,
+        matchOptions: initialData?.matchOptions && initialData.matchOptions.length > 0
+            ? initialData.matchOptions
+            : DEFAULT_MATCH_OPTIONS,
+        items: initialData?.items && initialData.items.length > 0
+            ? initialData.items
+            : [
+                {
+                    scrambledWords: ["don't", "you ...", "Why"],
+                    orderedPhrase: "Why don't you ...",
+                    matchLabel: 'C',
+                    isExample: true,
+                    points: 0,
+                    questionNumber: 1,
+                },
+                {
+                    scrambledWords: ['sure', 'OK', 'will', 'everything', 'be', "I'm"],
+                    orderedPhrase: "I'm sure everything will be OK",
+                    matchLabel: 'A',
+                    isExample: false,
+                    points: 1,
+                    questionNumber: 2,
+                },
+            ],
+        explanation: initialData?.explanation || '',
+    };
+    const { control, register, handleSubmit, watch, setValue, trigger, formState: { errors, isDirty }, } = useForm({
+        resolver: zodResolver(formSchema),
+        defaultValues,
+        mode: 'onChange',
+    });
+    const { fields, append, remove } = useFieldArray({
+        control,
+        name: 'items',
+    });
+    const watchedValues = watch();
+    useEffect(() => {
+        onUnsavedChangesChange?.(isDirty);
+    }, [isDirty, onUnsavedChangesChange]);
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            onChange?.(watchedValues);
+        }, 300);
+        return () => clearTimeout(timer);
+    }, [watchedValues, onChange]);
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    return await trigger();
+                },
+                getFormData: () => watchedValues,
+            };
+        }
+    }, [validationRef, trigger, watchedValues]);
+    const handleAutoScramble = (itemIndex) => {
+        const phrase = watchedValues.items?.[itemIndex]?.orderedPhrase || '';
+        if (!phrase.trim())
+            return;
+        const words = phrase.split(' ').map((w) => w.trim()).filter(Boolean);
+        if (words.length < 2)
+            return;
+        const shuffled = [...words].sort(() => Math.random() - 0.5);
+        setValue(`items.${itemIndex}.scrambledWords`, shuffled, { shouldDirty: true, shouldValidate: true });
+    };
+    const handleAddWord = (itemIndex) => {
+        const word = (newWordInputs[itemIndex] || '').trim();
+        if (!word)
+            return;
+        const currentWords = watchedValues.items?.[itemIndex]?.scrambledWords || [];
+        setValue(`items.${itemIndex}.scrambledWords`, [...currentWords, word], {
+            shouldDirty: true,
+            shouldValidate: true,
+        });
+        setNewWordInputs((prev) => ({ ...prev, [itemIndex]: '' }));
+    };
+    const handleRemoveWord = (itemIndex, wordIndex) => {
+        const currentWords = watchedValues.items?.[itemIndex]?.scrambledWords || [];
+        setValue(`items.${itemIndex}.scrambledWords`, currentWords.filter((_, idx) => idx !== wordIndex), { shouldDirty: true, shouldValidate: true });
+    };
+    const handleAddMatchOption = () => {
+        const opt = newOptionInput.trim().toUpperCase();
+        if (!opt)
+            return;
+        const current = watchedValues.matchOptions || [];
+        if (!current.includes(opt)) {
+            setValue('matchOptions', [...current, opt], { shouldDirty: true, shouldValidate: true });
+        }
+        setNewOptionInput('');
+    };
+    const handleRemoveMatchOption = (optToRemove) => {
+        const current = watchedValues.matchOptions || [];
+        if (current.length <= 1)
+            return;
+        const nextOptions = current.filter((opt) => opt !== optToRemove);
+        setValue('matchOptions', nextOptions, { shouldDirty: true, shouldValidate: true });
+        watchedValues.items?.forEach((item, idx) => {
+            if (item.matchLabel === optToRemove) {
+                setValue(`items.${idx}.matchLabel`, nextOptions[0] || 'A', { shouldDirty: true });
+            }
+        });
+    };
+    const handleAddItem = () => {
+        const nextNumber = (watchedValues.items?.length || 0) + 1;
+        append({
+            scrambledWords: [],
+            orderedPhrase: '',
+            matchLabel: watchedValues.matchOptions?.[0] || 'A',
+            isExample: false,
+            points: 1,
+            questionNumber: nextNumber,
+        });
+    };
+    const onSubmit = (data) => {
+        onSave?.(data);
+    };
+    return (_jsxs("div", { className: "w-full space-y-6", children: [_jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b pb-4", children: [_jsxs("div", { children: [_jsxs("h3", { className: "text-lg font-bold text-gray-900 flex items-center gap-2", children: [_jsx(Layers, { className: "h-5 w-5 text-indigo-600" }), "S\u1EAFp x\u1EBFp t\u1EEB & N\u1ED1i nh\u00E3n (Nh\u00F3m c\u00E2u h\u1ECFi)"] }), _jsx("p", { className: "text-xs text-gray-500 mt-0.5", children: "D\u1EA1ng b\u00E0i h\u1ECDc sinh s\u1EAFp x\u1EBFp c\u00E1c t\u1EEB x\u00E1o tr\u1ED9n th\u00E0nh c\u00E2u ho\u00E0n ch\u1EC9nh v\u00E0 n\u1ED1i nh\u00E3n ch\u1EEF c\u00E1i t\u01B0\u01A1ng \u1EE9ng." })] }), _jsxs("div", { className: "flex items-center rounded-xl bg-gray-100 p-1", children: [_jsxs("button", { type: "button", onClick: () => setActiveTab('editor'), className: cn('flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold transition-all', activeTab === 'editor'
+                                    ? 'bg-white text-indigo-700 shadow-xs'
+                                    : 'text-gray-600 hover:text-gray-900'), children: [_jsx(Edit3, { className: "h-3.5 w-3.5" }), "So\u1EA1n th\u1EA3o"] }), _jsxs("button", { type: "button", onClick: () => setActiveTab('preview'), className: cn('flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold transition-all', activeTab === 'preview'
+                                    ? 'bg-white text-indigo-700 shadow-xs'
+                                    : 'text-gray-600 hover:text-gray-900'), children: [_jsx(Eye, { className: "h-3.5 w-3.5" }), "Xem tr\u01B0\u1EDBc"] })] })] }), externalErrors && externalErrors.length > 0 && (_jsx("div", { className: "rounded-xl border border-rose-200 bg-rose-50 p-4 text-xs text-rose-800", children: _jsx("ul", { className: "list-disc pl-4 space-y-1", children: externalErrors.map((err, i) => (_jsx("li", { children: err }, i))) }) })), activeTab === 'preview' ? (
+            /* Preview Mode */
+            _jsxs("div", { className: "rounded-2xl border border-gray-200 bg-gray-50/50 p-6", children: [_jsx("div", { className: "mb-4 text-xs font-bold text-gray-500 uppercase tracking-wider", children: "Giao di\u1EC7n l\u00E0m b\u00E0i th\u1EF1c t\u1EBF c\u1EE7a h\u1ECDc sinh:" }), _jsx(WordOrderAndMatchGroupClient, { questionData: watchedValues })] })) : (
+            /* Editor Mode */
+            _jsxs("form", { onSubmit: handleSubmit(onSubmit), className: "space-y-6", children: [_jsxs("div", { className: "rounded-2xl border border-gray-200 bg-white p-5 shadow-xs space-y-4", children: [_jsxs("div", { children: [_jsxs(Label, { className: "text-xs font-bold text-gray-700 uppercase tracking-wider", children: ["1. H\u01B0\u1EDBng d\u1EABn l\u00E0m b\u00E0i chung (Instruction) ", _jsx("span", { className: "text-rose-500", children: "*" })] }), _jsx(Textarea, { ...register('instruction'), rows: 2, placeholder: "Nh\u1EADp h\u01B0\u1EDBng d\u1EABn l\u00E0m b\u00E0i...", className: "mt-1.5 text-sm" }), errors.instruction && (_jsx("p", { className: "mt-1 text-xs text-rose-500", children: errors.instruction.message }))] }), _jsxs("div", { children: [_jsxs(Label, { className: "text-xs font-bold text-gray-700 uppercase tracking-wider flex items-center justify-between", children: [_jsx("span", { children: "2. Danh s\u00E1ch nh\u00E3n l\u1EF1a ch\u1ECDn (Match Options)" }), _jsx("span", { className: "text-[11px] font-normal text-gray-400", children: "V\u00ED d\u1EE5: A, B, C, D, E, F" })] }), _jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: [watchedValues.matchOptions?.map((opt) => (_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-xl border border-indigo-200 bg-indigo-50/70 px-3 py-1 text-xs font-bold text-indigo-700", children: [_jsx("span", { children: opt }), watchedValues.matchOptions && watchedValues.matchOptions.length > 1 && (_jsx("button", { type: "button", onClick: () => handleRemoveMatchOption(opt), className: "text-indigo-400 hover:text-rose-600 transition-colors", title: "Xo\u00E1 nh\u00E3n", children: _jsx(Trash2, { className: "h-3 w-3" }) }))] }, opt))), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Input, { value: newOptionInput, onChange: (e) => setNewOptionInput(e.target.value), placeholder: "Nh\u00E3n m\u1EDBi (VD: G)", className: "h-8 w-28 text-xs uppercase", onKeyDown: (e) => {
+                                                            if (e.key === 'Enter') {
+                                                                e.preventDefault();
+                                                                handleAddMatchOption();
+                                                            }
+                                                        } }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: handleAddMatchOption, className: "h-8 text-xs font-medium", children: [_jsx(Plus, { className: "h-3.5 w-3.5 mr-1" }), " Th\u00EAm"] })] })] }), errors.matchOptions && (_jsx("p", { className: "mt-1 text-xs text-rose-500", children: errors.matchOptions.message }))] })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("h4", { className: "text-sm font-bold text-gray-800 uppercase tracking-wider flex items-center gap-2", children: [_jsx(Tag, { className: "h-4 w-4 text-indigo-600" }), "Danh s\u00E1ch c\u00E2u h\u1ECFi con (", fields.length, ")"] }), _jsxs(Button, { type: "button", onClick: handleAddItem, size: "sm", className: "bg-indigo-600 text-white hover:bg-indigo-700 text-xs font-medium", children: [_jsx(Plus, { className: "h-3.5 w-3.5 mr-1" }), " Th\u00EAm c\u00E2u h\u1ECFi"] })] }), fields.map((field, index) => {
+                                const itemWords = watchedValues.items?.[index]?.scrambledWords || [];
+                                const isExample = watchedValues.items?.[index]?.isExample;
+                                return (_jsxs("div", { className: cn('rounded-2xl border p-5 bg-white shadow-xs transition-all space-y-4', isExample ? 'border-amber-200 bg-amber-50/20' : 'border-gray-200'), children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 border-b border-gray-100 pb-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { className: "inline-flex h-7 items-center justify-center rounded-lg bg-indigo-100 px-2.5 text-xs font-bold text-indigo-800", children: ["#", index + 1] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: `example-${index}`, checked: isExample || false, onCheckedChange: (checked) => {
+                                                                        setValue(`items.${index}.isExample`, checked, { shouldDirty: true });
+                                                                        if (checked) {
+                                                                            setValue(`items.${index}.points`, 0, { shouldDirty: true });
+                                                                        }
+                                                                    } }), _jsx(Label, { htmlFor: `example-${index}`, className: "text-xs font-medium text-gray-700 cursor-pointer", children: "C\u00E2u v\u00ED d\u1EE5 m\u1EABu (0 \u0111i\u1EC3m)" })] })] }), _jsxs("div", { className: "flex items-center gap-3", children: [!isExample && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Label, { className: "text-xs font-medium text-gray-600", children: "\u0110i\u1EC3m:" }), _jsx(Input, { type: "number", ...register(`items.${index}.points`, { valueAsNumber: true }), className: "h-8 w-16 text-center text-xs", min: 0, step: 0.5 })] })), fields.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => remove(index), className: "h-8 w-8 p-0 text-gray-400 hover:text-rose-600 hover:bg-rose-50", title: "Xo\u00E1 c\u00E2u n\u00E0y", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] })] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-12", children: [_jsxs("div", { className: "space-y-1.5 lg:col-span-8", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "text-xs font-bold text-gray-700", children: ["C\u00E2u \u0111\u00FAng ho\u00E0n ch\u1EC9nh (Ordered Phrase) ", _jsx("span", { className: "text-rose-500", children: "*" })] }), _jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => handleAutoScramble(index), className: "h-6 text-[11px] text-indigo-600 hover:bg-indigo-50 font-medium px-2", children: [_jsx(Shuffle, { className: "h-3 w-3 mr-1" }), " T\u1EF1 x\u00E1o tr\u1ED9n t\u1EEB"] })] }), _jsx(Input, { ...register(`items.${index}.orderedPhrase`), placeholder: "V\u00ED d\u1EE5: I'm sure everything will be OK", className: "text-sm font-medium" }), errors.items?.[index]?.orderedPhrase && (_jsx("p", { className: "text-xs text-rose-500", children: errors.items[index]?.orderedPhrase?.message }))] }), _jsxs("div", { className: "space-y-1.5 lg:col-span-4", children: [_jsxs(Label, { className: "text-xs font-bold text-gray-700", children: ["Nh\u00E3n \u0111\u00FAng (Match Label) ", _jsx("span", { className: "text-rose-500", children: "*" })] }), _jsx(Controller, { control: control, name: `items.${index}.matchLabel`, render: ({ field }) => (_jsx("div", { className: "flex flex-wrap gap-1", children: watchedValues.matchOptions?.map((opt) => (_jsx("button", { type: "button", onClick: () => field.onChange(opt), className: cn('h-9 w-9 rounded-lg font-bold text-xs transition-all flex items-center justify-center', field.value === opt
+                                                                        ? 'bg-indigo-600 text-white shadow-xs'
+                                                                        : 'border border-gray-200 bg-white text-gray-700 hover:border-indigo-300'), children: opt }, opt))) })) }), errors.items?.[index]?.matchLabel && (_jsx("p", { className: "text-xs text-rose-500", children: errors.items[index]?.matchLabel?.message }))] })] }), _jsxs("div", { className: "rounded-xl border border-dashed border-gray-200 bg-gray-50/70 p-3 space-y-2", children: [_jsxs(Label, { className: "text-xs font-bold text-gray-600 flex items-center justify-between", children: [_jsxs("span", { children: ["C\u00E1c t\u1EEB b\u1ECB x\u00E1o tr\u1ED9n (Scrambled Words) (", itemWords.length, ")"] }), _jsx("span", { className: "text-[11px] font-normal text-gray-400", children: "Th\u1EE9 t\u1EF1 t\u1EEB \u1EDF \u0111\u00E2y s\u1EBD hi\u1EC3n th\u1ECB cho h\u1ECDc sinh" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [itemWords.map((word, wordIdx) => (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-lg border border-gray-300 bg-white px-2.5 py-1 text-xs font-semibold text-gray-800 shadow-xs", children: [_jsx("span", { children: word }), _jsx("button", { type: "button", onClick: () => handleRemoveWord(index, wordIdx), className: "text-gray-400 hover:text-rose-600 transition-colors", children: _jsx(Trash2, { className: "h-3 w-3" }) })] }, wordIdx))), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Input, { value: newWordInputs[index] || '', onChange: (e) => setNewWordInputs((prev) => ({ ...prev, [index]: e.target.value })), placeholder: "+ Th\u00EAm t\u1EEB", className: "h-7 w-28 text-xs", onKeyDown: (e) => {
+                                                                        if (e.key === 'Enter') {
+                                                                            e.preventDefault();
+                                                                            handleAddWord(index);
+                                                                        }
+                                                                    } }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => handleAddWord(index), className: "h-7 text-xs font-medium px-2", children: "Th\u00EAm" })] })] }), errors.items?.[index]?.scrambledWords && (_jsx("p", { className: "text-xs text-rose-500", children: errors.items[index]?.scrambledWords?.message }))] })] }, field.id));
+                            })] }), _jsxs("div", { className: "rounded-2xl border border-gray-200 bg-white p-5 shadow-xs space-y-1.5", children: [_jsx(Label, { className: "text-xs font-bold text-gray-700 uppercase tracking-wider", children: "3. Gi\u1EA3i th\u00EDch \u0111\u00E1p \u00E1n (Explanation - Tu\u1EF3 ch\u1ECDn)" }), _jsx(Textarea, { ...register('explanation'), rows: 2, placeholder: "Nh\u1EADp gi\u1EA3i th\u00EDch cho \u0111\u1EC1 b\u00E0i n\u00E0y n\u1EBFu c\u00F3...", className: "text-sm" })] })] }))] }));
+}

package/dist/components/questions/types/word-order-and-match-group/index.d.ts

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

package/dist/components/questions/types/word-order-and-match-group/index.js

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

package/dist/components/questions/types/word-order-and-match-group/register.d.ts

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

package/dist/components/questions/types/word-order-and-match-group/register.js

@@ -0,0 +1,121 @@
+import { WordOrderAndMatchGroupCreator } from './WordOrderAndMatchGroupCreator';
+const DEFAULT_INSTRUCTION = 'Put the useful phrases in order, then match them to parts A–F in Exercise 4.';
+const DEFAULT_MATCH_OPTIONS = ['A', 'B', 'C', 'D', 'E', 'F'];
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function asRecord(value) {
+    return isRecord(value) ? value : {};
+}
+function asString(value, fallback = '') {
+    return typeof value === 'string' ? value : fallback;
+}
+function createEmptyItem(questionNumber) {
+    return {
+        scrambledWords: [],
+        orderedPhrase: '',
+        matchLabel: 'A',
+        isExample: false,
+        points: 1,
+        questionNumber,
+    };
+}
+function mapApiItem(item, index, fallbackAnswer) {
+    const record = asRecord(item);
+    const content = asRecord(record.content);
+    const correctAnswerRaw = asRecord(record.correctAnswer);
+    const answerObj = isRecord(correctAnswerRaw.answer)
+        ? correctAnswerRaw.answer
+        : isRecord(correctAnswerRaw) && (correctAnswerRaw.orderedPhrase || correctAnswerRaw.matchLabel)
+            ? correctAnswerRaw
+            : isRecord(fallbackAnswer)
+                ? fallbackAnswer
+                : {};
+    const words = Array.isArray(content.scrambledWords)
+        ? content.scrambledWords.map((w) => String(w || '').trim()).filter(Boolean)
+        : [];
+    const isExample = record.isExample === true;
+    return {
+        scrambledWords: words,
+        orderedPhrase: asString(answerObj.orderedPhrase) || asString(record.orderedPhrase),
+        matchLabel: asString(answerObj.matchLabel) || asString(record.matchLabel) || 'A',
+        isExample,
+        points: isExample ? 0 : (typeof record.points === 'number' ? record.points : 1),
+        questionNumber: typeof record.questionNumber === 'number' ? record.questionNumber : index + 1,
+    };
+}
+export const wordOrderAndMatchGroupRegistration = {
+    component: WordOrderAndMatchGroupCreator,
+    transformInitialData: (initialData) => {
+        const content = initialData?.content;
+        const answer = initialData?.answer;
+        const correctAnswer = initialData?.correctAnswer || answer?.correctAnswer || {};
+        const explanation = initialData?.explanation || answer?.explanation || '';
+        const fallbackAnswers = Array.isArray(correctAnswer?.answer)
+            ? correctAnswer.answer
+            : [];
+        const rawList = asRecord(initialData?.wordOrderMatchList ?? content?.wordOrderMatchList ?? content);
+        const meta = asRecord(rawList.meta ?? content?.meta);
+        const itemsSource = Array.isArray(rawList.items)
+            ? rawList.items
+            : Array.isArray(content?.items)
+                ? content.items
+                : Array.isArray(answer?.items)
+                    ? answer.items
+                    : [];
+        const matchOptions = Array.isArray(meta.matchOptions)
+            ? meta.matchOptions.map((opt) => String(opt || '').trim()).filter(Boolean)
+            : Array.isArray(answer?.matchOptions)
+                ? answer.matchOptions
+                : DEFAULT_MATCH_OPTIONS;
+        if (itemsSource.length > 0) {
+            const items = itemsSource.map((item, index) => mapApiItem(item, index, fallbackAnswers[index]));
+            return {
+                ...initialData,
+                answer: {
+                    instruction: asString(meta.instruction) || asString(answer?.instruction) || DEFAULT_INSTRUCTION,
+                    matchOptions: matchOptions.length > 0 ? matchOptions : DEFAULT_MATCH_OPTIONS,
+                    items,
+                    explanation,
+                },
+            };
+        }
+        if (Array.isArray(answer?.items) && answer.items.length > 0) {
+            return {
+                ...initialData,
+                answer: {
+                    instruction: answer.instruction || DEFAULT_INSTRUCTION,
+                    matchOptions: answer.matchOptions || DEFAULT_MATCH_OPTIONS,
+                    items: answer.items,
+                    explanation: answer.explanation || explanation,
+                },
+            };
+        }
+        return {
+            ...initialData,
+            answer: {
+                instruction: DEFAULT_INSTRUCTION,
+                matchOptions: DEFAULT_MATCH_OPTIONS,
+                items: [createEmptyItem(1)],
+                explanation,
+            },
+        };
+    },
+    wrapOnSave: (data) => {
+        return {
+            instruction: data.instruction,
+            matchOptions: data.matchOptions,
+            items: data.items,
+            explanation: data.explanation,
+        };
+    },
+    wrapOnChange: (data) => {
+        return {
+            instruction: data.instruction,
+            matchOptions: data.matchOptions,
+            items: data.items,
+            explanation: data.explanation,
+        };
+    },
+    getExtraProps: () => ({}),
+};

package/dist/components/questions/types/word-order-and-match-group/transform.d.ts

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

package/dist/components/questions/types/word-order-and-match-group/transform.js

@@ -0,0 +1,70 @@
+const CHILD_QUESTION_TYPE = 'WORD_ORDER_AND_MATCH';
+function sumGradablePoints(items) {
+    return items.reduce((total, item) => {
+        if (item.isExample) {
+            return total;
+        }
+        const points = typeof item.points === 'number' ? item.points : 1;
+        return total + points;
+    }, 0);
+}
+function normalizeAnswer(answer) {
+    return {
+        orderedPhrase: typeof answer?.orderedPhrase === 'string' ? answer.orderedPhrase.trim() : '',
+        matchLabel: typeof answer?.matchLabel === 'string' ? answer.matchLabel.trim().toUpperCase() : '',
+    };
+}
+export const transformWordOrderAndMatchGroup = (question) => {
+    const answerData = question.answer;
+    const items = Array.isArray(answerData?.items) ? answerData.items : [];
+    const matchOptions = Array.isArray(answerData?.matchOptions)
+        ? answerData.matchOptions.map((opt) => String(opt || '').trim().toUpperCase()).filter(Boolean)
+        : ['A', 'B', 'C', 'D', 'E', 'F'];
+    if (items.length === 0) {
+        return {
+            apiContent: {
+                meta: {
+                    instruction: answerData?.instruction || '',
+                    matchOptions,
+                },
+                items: [],
+            },
+            apiCorrectAnswer: { answer: [] },
+        };
+    }
+    const apiItems = items.map((item, index) => {
+        const rawWords = Array.isArray(item.scrambledWords) ? item.scrambledWords : [];
+        const scrambledWords = rawWords.map((w) => String(w || '').trim()).filter(Boolean);
+        const correctAnswer = normalizeAnswer({
+            orderedPhrase: item.orderedPhrase,
+            matchLabel: item.matchLabel,
+        });
+        return {
+            questionType: CHILD_QUESTION_TYPE,
+            ...(item.isExample ? { isExample: true } : {}),
+            content: {
+                scrambledWords,
+            },
+            correctAnswer,
+            points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+            questionNumber: item.questionNumber || index + 1,
+        };
+    });
+    return {
+        apiContent: {
+            meta: {
+                instruction: answerData?.instruction ||
+                    'Put the useful phrases in order, then match them to parts A–F in Exercise 4.',
+                matchOptions,
+            },
+            items: apiItems,
+        },
+        apiCorrectAnswer: {
+            answer: apiItems.map((item) => ({
+                orderedPhrase: item.correctAnswer.orderedPhrase,
+                matchLabel: item.correctAnswer.matchLabel,
+            })),
+        },
+        totalPoints: sumGradablePoints(items),
+    };
+};

package/dist/components/questions/types/word-ordering/WordOrderingClient.js

@@ -1 +1,84 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t,useEffect as a,useCallback as s}from"react";import{Check as n,X as d,ArrowUpDown as i,Lightbulb as l}from"lucide-react";import{usePresignedFileUrl as o}from"../../../../shared/lib/hooks";import{cn as c}from"../../../../shared/lib/utils";export function WordOrderingClient({questionData:m,onSubmit:b,isReviewMode:g=!1,userAnswer:p,autoFillCorrectAnswers:h=!1,explanation:x}){const{words:u=[],answer:f=[],isExample:N,imageUrl:w}=m,[y,v]=t(p||(h?f:[])),[j,k]=t(()=>{const e=p||(h?f:[]);if(e.length>0){const r=[...u];return e.forEach(e=>{const t=r.indexOf(e);t>=0&&r.splice(t,1)}),r}return[...u]}),{previewUrl:C,isLoading:O}=o(w||"");a(()=>{if(p){v(p);const e=[...u];p.forEach(r=>{const t=e.indexOf(r);t>=0&&e.splice(t,1)}),k(e)}},[p]),a(()=>{p||h||(v([]),k([...u]))},[JSON.stringify(u)]);const S=s((e,r)=>{if(g)return;const t=[...y,e],a=[...j];a.splice(r,1),v(t),k(a),b?.(t)},[y,j,g,b]),E=s(e=>{if(g)return;const r=y[e],t=y.filter((r,t)=>t!==e);v(t),k([...j,r]),b?.(t)},[y,j,g,b]),$=g&&y.length===f.length&&y.every((e,r)=>e===f[r]),A=g&&y.length>0&&!$,U=y.length===u.length,q=x||m.explanation;return e("div",{className:"space-y-4",children:r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:[r("div",{className:"flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3",children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-600 text-white shadow-sm",children:e(i,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:"Sắp xếp từ"}),N&&r("span",{className:"inline-flex items-center gap-1 rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-semibold text-amber-700",children:[e(l,{className:"h-3 w-3"}),"Ví dụ"]})]}),g&&U&&r("div",{className:c("flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold",$?"bg-green-100 text-green-700":"bg-red-100 text-red-700"),children:[e($?n:d,{className:"h-3.5 w-3.5"}),$?"Đúng":"Sai"]})]}),r("div",{className:"p-5 space-y-5",children:[(C||w)&&e("div",{className:"flex justify-center",children:e("div",{className:"overflow-hidden rounded-lg border border-gray-200 bg-gray-50",children:O?e("div",{className:"flex h-48 w-48 items-center justify-center",children:e("div",{className:"h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-amber-500"})}):e("img",{src:C||w,alt:"Hình ảnh câu hỏi",className:"max-h-56 w-auto object-contain p-2"})})}),r("div",{className:"space-y-2",children:[e("span",{className:"text-xs font-medium text-gray-500 uppercase tracking-wider",children:"Đáp án của bạn"}),e("div",{className:"flex flex-wrap gap-2 min-h-[48px] rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-3",children:0===y.length?e("span",{className:"text-sm text-gray-400 italic",children:"Nhấn vào các từ bên dưới để sắp xếp..."}):y.map((t,a)=>{const s=g&&f[a]===t;g&&f[a];return r("button",{type:"button",onClick:()=>E(a),disabled:g,className:c("inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm font-semibold transition-all shadow-sm",g?s?"bg-green-100 text-green-800 border border-green-300":"bg-red-100 text-red-800 border border-red-300":"bg-amber-100 text-amber-800 border border-amber-300 hover:bg-amber-200 cursor-pointer"),children:[t,g&&(s?e(n,{className:"h-3.5 w-3.5 text-green-600"}):e(d,{className:"h-3.5 w-3.5 text-red-600"}))]},`selected-${a}`)})})]}),j.length>0&&r("div",{className:"space-y-2",children:[e("span",{className:"text-xs font-medium text-gray-500 uppercase tracking-wider",children:"Từ có sẵn"}),e("div",{className:"flex flex-wrap gap-2",children:j.map((r,t)=>e("button",{type:"button",onClick:()=>S(r,t),disabled:g,className:c("rounded-lg border-2 px-3 py-2 text-sm font-semibold transition-all shadow-sm",g?"border-gray-200 bg-gray-100 text-gray-500 cursor-default":"border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100 hover:border-blue-300 cursor-pointer hover:shadow-md"),children:r},`available-${t}`))})]}),g&&A&&r("div",{className:"rounded-lg border border-green-200 bg-green-50 p-3",children:[e("span",{className:"text-xs font-medium text-green-600 uppercase tracking-wider",children:"Đáp án đúng"}),e("div",{className:"mt-2 flex flex-wrap gap-2",children:f.map((r,t)=>e("span",{className:"rounded-lg bg-green-100 px-3 py-1.5 text-sm font-semibold text-green-800 border border-green-300",children:r},`correct-${t}`))})]}),g&&q&&r("div",{className:"rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-3",children:[e("span",{className:"text-xs font-medium text-blue-600 uppercase tracking-wider",children:"Giải thích"}),e("p",{className:"mt-1 text-sm text-blue-800",children:q})]})]})]})})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from 'react';
+import { Check, X, ArrowUpDown, Lightbulb } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { cn } from '../../../../shared/lib/utils';
+export function WordOrderingClient({ questionData, onSubmit, isReviewMode = false, userAnswer, autoFillCorrectAnswers = false, explanation, }) {
+    const { words = [], answer = [], isExample, imageUrl } = questionData;
+    // State: the user's current arrangement
+    const [selectedWords, setSelectedWords] = useState(userAnswer || (autoFillCorrectAnswers ? answer : []));
+    // Words remaining in the pool
+    const [availableWords, setAvailableWords] = useState(() => {
+        const initial = userAnswer || (autoFillCorrectAnswers ? answer : []);
+        if (initial.length > 0) {
+            // Remove used words from available pool
+            const remaining = [...words];
+            initial.forEach((w) => {
+                const idx = remaining.indexOf(w);
+                if (idx >= 0)
+                    remaining.splice(idx, 1);
+            });
+            return remaining;
+        }
+        return [...words];
+    });
+    const { previewUrl: imagePreviewUrl, isLoading } = usePresignedFileUrl(imageUrl || '');
+    // Sync with userAnswer changes
+    useEffect(() => {
+        if (userAnswer) {
+            setSelectedWords(userAnswer);
+            const remaining = [...words];
+            userAnswer.forEach((w) => {
+                const idx = remaining.indexOf(w);
+                if (idx >= 0)
+                    remaining.splice(idx, 1);
+            });
+            setAvailableWords(remaining);
+        }
+    }, [userAnswer]);
+    // Reset when words change (question navigation)
+    useEffect(() => {
+        if (!userAnswer && !autoFillCorrectAnswers) {
+            setSelectedWords([]);
+            setAvailableWords([...words]);
+        }
+    }, [JSON.stringify(words)]);
+    const handleSelectWord = useCallback((word, poolIndex) => {
+        if (isReviewMode)
+            return;
+        const newSelected = [...selectedWords, word];
+        const newAvailable = [...availableWords];
+        newAvailable.splice(poolIndex, 1);
+        setSelectedWords(newSelected);
+        setAvailableWords(newAvailable);
+        onSubmit?.(newSelected);
+    }, [selectedWords, availableWords, isReviewMode, onSubmit]);
+    const handleRemoveWord = useCallback((index) => {
+        if (isReviewMode)
+            return;
+        const removed = selectedWords[index];
+        const newSelected = selectedWords.filter((_, i) => i !== index);
+        setSelectedWords(newSelected);
+        setAvailableWords([...availableWords, removed]);
+        onSubmit?.(newSelected);
+    }, [selectedWords, availableWords, isReviewMode, onSubmit]);
+    const isCorrect = isReviewMode && selectedWords.length === answer.length &&
+        selectedWords.every((w, i) => w === answer[i]);
+    const isWrong = isReviewMode && selectedWords.length > 0 && !isCorrect;
+    const isComplete = selectedWords.length === words.length;
+    const displayExplanation = explanation || questionData.explanation;
+    return (_jsx("div", { className: "space-y-4", children: _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-5 py-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-600 text-white shadow-sm", children: _jsx(ArrowUpDown, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "S\u1EAFp x\u1EBFp t\u1EEB" }), isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Lightbulb, { className: "h-3 w-3" }), "V\u00ED d\u1EE5"] }))] }), isReviewMode && isComplete && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isCorrect ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'), children: [isCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), isCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "p-5 space-y-5", children: [(imagePreviewUrl || imageUrl) && (_jsx("div", { className: "flex justify-center", children: _jsx("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gray-50", children: isLoading ? (_jsx("div", { className: "flex h-48 w-48 items-center justify-center", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-amber-500" }) })) : (_jsx("img", { src: imagePreviewUrl || imageUrl, alt: "H\u00ECnh \u1EA3nh c\u00E2u h\u1ECFi", className: "max-h-56 w-auto object-contain p-2" })) }) })), _jsxs("div", { className: "space-y-2", children: [_jsx("span", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider", children: "\u0110\u00E1p \u00E1n c\u1EE7a b\u1EA1n" }), _jsx("div", { className: "flex flex-wrap gap-2 min-h-[48px] rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-3", children: selectedWords.length === 0 ? (_jsx("span", { className: "text-sm text-gray-400 italic", children: "Nh\u1EA5n v\u00E0o c\u00E1c t\u1EEB b\u00EAn d\u01B0\u1EDBi \u0111\u1EC3 s\u1EAFp x\u1EBFp..." })) : (selectedWords.map((word, index) => {
+                                        const isWordCorrect = isReviewMode && answer[index] === word;
+                                        const isWordWrong = isReviewMode && answer[index] !== word;
+                                        return (_jsxs("button", { type: "button", onClick: () => handleRemoveWord(index), disabled: isReviewMode, className: cn('inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm font-semibold transition-all shadow-sm', isReviewMode
+                                                ? isWordCorrect
+                                                    ? 'bg-green-100 text-green-800 border border-green-300'
+                                                    : 'bg-red-100 text-red-800 border border-red-300'
+                                                : 'bg-amber-100 text-amber-800 border border-amber-300 hover:bg-amber-200 cursor-pointer'), children: [word, isReviewMode && (isWordCorrect
+                                                    ? _jsx(Check, { className: "h-3.5 w-3.5 text-green-600" })
+                                                    : _jsx(X, { className: "h-3.5 w-3.5 text-red-600" }))] }, `selected-${index}`));
+                                    })) })] }), availableWords.length > 0 && (_jsxs("div", { className: "space-y-2", children: [_jsx("span", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider", children: "T\u1EEB c\u00F3 s\u1EB5n" }), _jsx("div", { className: "flex flex-wrap gap-2", children: availableWords.map((word, index) => (_jsx("button", { type: "button", onClick: () => handleSelectWord(word, index), disabled: isReviewMode, className: cn('rounded-lg border-2 px-3 py-2 text-sm font-semibold transition-all shadow-sm', isReviewMode
+                                            ? 'border-gray-200 bg-gray-100 text-gray-500 cursor-default'
+                                            : 'border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100 hover:border-blue-300 cursor-pointer hover:shadow-md'), children: word }, `available-${index}`))) })] })), isReviewMode && isWrong && (_jsxs("div", { className: "rounded-lg border border-green-200 bg-green-50 p-3", children: [_jsx("span", { className: "text-xs font-medium text-green-600 uppercase tracking-wider", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: answer.map((word, index) => (_jsx("span", { className: "rounded-lg bg-green-100 px-3 py-1.5 text-sm font-semibold text-green-800 border border-green-300", children: word }, `correct-${index}`))) })] })), isReviewMode && displayExplanation && (_jsxs("div", { className: "rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-3", children: [_jsx("span", { className: "text-xs font-medium text-blue-600 uppercase tracking-wider", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-blue-800", children: displayExplanation })] }))] })] }) }));
+}