@tinyweb_dev/oe-exam-sdk 0.2.8 → 0.2.10

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

@@ -0,0 +1,95 @@
+'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';
+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 { Eye, Pencil, Plus, Star, Trash2 } from 'lucide-react';
+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 { createEmptyMatchWordToPictureGroupItem, mapQuestionToMatchWordToPictureGroupData, } from './map-match-word-to-picture-group-data';
+function sumPoints(items) {
+    return items.reduce((total, item) => (item.isExample ? total : total + (typeof item.points === 'number' ? item.points : 1)), 0);
+}
+export function MatchWordToPictureGroupCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }) {
+    const seeded = mapQuestionToMatchWordToPictureGroupData(initialData ? { answer: initialData } : null);
+    const [instruction, setInstruction] = useState(initialData?.instruction || seeded.instruction || MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION);
+    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 || '');
+    const [isClientMode, setIsClientMode] = useState(false);
+    const [errors, setErrors] = useState([]);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    const buildPayload = (nextInstruction = instruction, nextWordBank = wordBank, nextItems = items, nextExplanation = explanation) => ({
+        instruction: nextInstruction,
+        wordBank: nextWordBank,
+        items: nextItems,
+        explanation: nextExplanation,
+        points: sumPoints(nextItems),
+    });
+    const debouncedOnChange = useDebouncedCallback((payload) => {
+        onChangeRef.current?.(payload);
+    }, 300);
+    useEffect(() => {
+        const payload = buildPayload();
+        const serialized = JSON.stringify(payload);
+        if (serialized !== previousPayloadRef.current) {
+            previousPayloadRef.current = serialized;
+            debouncedOnChange(payload);
+            onUnsavedChangesChange?.(true);
+        }
+    }, [instruction, wordBank, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
+    const validate = () => {
+        const nextErrors = [];
+        if (!instruction.trim())
+            nextErrors.push('Hướng dẫn không được để trống.');
+        const words = wordBank.map((word) => word.trim()).filter(Boolean);
+        if (words.length < 1)
+            nextErrors.push('Word bank cần ít nhất một từ.');
+        if (items.length < 1)
+            nextErrors.push('Cần ít nhất một câu hỏi.');
+        items.forEach((item, index) => {
+            if (!item.imageUrl.trim())
+                nextErrors.push(`Câu ${index + 1}: cần ảnh.`);
+            if (!item.correctAnswer.trim())
+                nextErrors.push(`Câu ${index + 1}: cần chọn từ đúng.`);
+        });
+        setErrors(nextErrors);
+        return nextErrors.length === 0;
+    };
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => validate(),
+                getFormData: () => buildPayload(),
+            };
+        }
+    }, [validationRef, instruction, wordBank, items, explanation]);
+    const updateItem = (index, patch) => {
+        setItems((prev) => prev.map((item, i) => (i === index ? { ...item, ...patch } : item)));
+    };
+    const currentPayload = buildPayload();
+    const displayErrors = externalErrors && externalErrors.length > 0 ? externalErrors : errors;
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-medium text-gray-900", children: "T\u1EA1o c\u00E2u h\u1ECFi N\u1ED1i t\u1EEB v\u1EDBi tranh (nh\u00F3m)" }), _jsx("p", { className: "text-sm text-gray-500", children: "Word bank d\u00F9ng chung; m\u1ED7i d\u00F2ng m\u1ED9t tranh." })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsClientMode((prev) => !prev), className: "gap-2", children: [isClientMode ? _jsx(Pencil, { className: "h-4 w-4" }) : _jsx(Eye, { className: "h-4 w-4" }), isClientMode ? 'Chế độ chỉnh sửa' : 'Xem trước học sinh'] })] }), displayErrors.length > 0 && (_jsx("div", { className: "rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700", children: _jsx("ul", { className: "list-disc space-y-1 pl-5", children: displayErrors.map((err, i) => _jsx("li", { children: err }, i)) }) })), isClientMode ? (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base font-semibold", children: "Xem tr\u01B0\u1EDBc hi\u1EC3n th\u1ECB h\u1ECDc sinh" }) }), _jsx(CardContent, { children: _jsx(MatchWordToPictureGroupClient, { questionData: currentPayload }) })] })) : (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base font-semibold", children: "Word bank" }) }), _jsxs(CardContent, { className: "space-y-3", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "mwtp-group-instruction", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "mwtp-group-instruction", className: "mt-1", value: instruction, onChange: (e) => setInstruction(e.target.value) })] }), wordBank.map((word, index) => (_jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { value: word, onChange: (e) => setWordBank((prev) => prev.map((item, i) => (i === index ? e.target.value : item))), placeholder: `Từ ${index + 1}` }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setWordBank((prev) => prev.filter((_, i) => i !== index)), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, index))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setWordBank((prev) => [...prev, '']), children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), "Th\u00EAm t\u1EEB"] })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs(CardTitle, { className: "text-base font-semibold", children: ["Tranh (", items.length, ")"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setItems((prev) => [...prev, createEmptyMatchWordToPictureGroupItem(prev.length + 1)]), children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), "Th\u00EAm tranh"] })] }), _jsx(CardContent, { className: "space-y-4", children: items.map((item, index) => (_jsxs("div", { className: "space-y-3 rounded-lg border border-gray-200 p-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-sm font-medium", children: ["C\u00E2u ", item.questionNumber || index + 1] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Switch, { checked: item.isExample || false, onCheckedChange: (checked) => updateItem(index, { isExample: checked, points: checked ? 0 : 1 }) }), _jsxs(Label, { className: "flex items-center gap-1 text-xs", children: [_jsx(Star, { className: "h-3 w-3 text-amber-500" }), "Example"] }), !item.isExample && (_jsx("div", { className: "w-24", children: _jsx(PointsInput, { value: item.points, allowZero: true, onChange: (event) => updateItem(index, {
+                                                                    points: parsePointsValue(event.target.value, true),
+                                                                }) }) })), items.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setItems((prev) => prev.filter((_, i) => i !== index).map((entry, i) => ({ ...entry, questionNumber: i + 1 }))), children: _jsx(Trash2, { className: "h-4 w-4 text-red-500" }) }))] })] }), _jsx(MatchWordToPictureGroupImageField, { id: `mwtp-group-image-${index}`, label: "\u1EA2nh", value: item.imageUrl, onChange: (url) => updateItem(index, { imageUrl: url }) }), _jsxs("select", { className: "rounded-md border px-3 py-2 text-sm", value: item.correctAnswer, onChange: (e) => updateItem(index, { correctAnswer: e.target.value }), children: [_jsx("option", { value: "", children: "Ch\u1ECDn t\u1EEB \u0111\u00FAng" }), wordBank.filter((word) => word.trim()).map((word) => (_jsx("option", { value: word, children: word }, word)))] })] }, index))) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Gi\u1EA3i th\u00EDch" }) }), _jsx(CardContent, { children: _jsx(Textarea, { value: explanation, onChange: (event) => setExplanation(event.target.value), rows: 3 }) })] })] }))] }));
+}

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

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

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

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

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

@@ -0,0 +1,5 @@
+export * from './MatchWordToPictureGroupCreator';
+export * from './MatchWordToPictureGroupClient';
+export * from './transform';
+export * from './register';
+export * from './map-match-word-to-picture-group-data';

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

@@ -0,0 +1,5 @@
+export * from './MatchWordToPictureGroupCreator';
+export * from './MatchWordToPictureGroupClient';
+export * from './transform';
+export * from './register';
+export * from './map-match-word-to-picture-group-data';

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

@@ -0,0 +1,4 @@
+import { type MatchWordToPictureGroupData, type MatchWordToPictureGroupItemData } from '../../_shared/types/match-word-to-picture-group.type';
+export declare function createEmptyMatchWordToPictureGroupItem(questionNumber: number): MatchWordToPictureGroupItemData;
+export declare function mapMatchWordToPictureGroupItem(item: unknown, index: number, fallbackAnswer?: string): MatchWordToPictureGroupItemData;
+export declare function mapQuestionToMatchWordToPictureGroupData(question: Record<string, unknown> | null | undefined): MatchWordToPictureGroupData;

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

@@ -0,0 +1,77 @@
+import { MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION, } from '../../_shared/types/match-word-to-picture-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;
+}
+function asStringList(value) {
+    if (!Array.isArray(value))
+        return [];
+    return value
+        .map((item) => (typeof item === 'string' ? item.trim() : ''))
+        .filter(Boolean);
+}
+export function createEmptyMatchWordToPictureGroupItem(questionNumber) {
+    return {
+        imageUrl: '',
+        correctAnswer: '',
+        isExample: false,
+        points: 1,
+        questionNumber,
+    };
+}
+export function mapMatchWordToPictureGroupItem(item, index, fallbackAnswer) {
+    const record = asRecord(item);
+    const content = asRecord(record.content);
+    const correctAnswer = asRecord(record.correctAnswer);
+    const isExample = record.isExample === true;
+    return {
+        imageUrl: asString(content.imageUrl) || asString(record.imageUrl),
+        correctAnswer: asString(correctAnswer.answer) ||
+            asString(record.correctAnswer) ||
+            asString(fallbackAnswer),
+        isExample,
+        points: isExample ? 0 : typeof record.points === 'number' ? record.points : 1,
+        questionNumber: typeof record.questionNumber === 'number' ? record.questionNumber : index + 1,
+    };
+}
+export function mapQuestionToMatchWordToPictureGroupData(question) {
+    const source = asRecord(question);
+    const content = asRecord(source.content);
+    const meta = asRecord(content.meta);
+    const answer = asRecord(source.answer);
+    const correctAnswer = asRecord(source.correctAnswer ?? source.correct_answer ?? answer.correctAnswer);
+    const explanation = asString(source.explanation) || asString(answer.explanation);
+    const fallbackAnswers = Array.isArray(correctAnswer.answer)
+        ? correctAnswer.answer.map((value) => (typeof value === 'string' ? value : ''))
+        : [];
+    if (Array.isArray(content.items) || Array.isArray(answer.items)) {
+        const rawItems = Array.isArray(content.items) ? content.items : answer.items;
+        const items = rawItems.map((item, index) => mapMatchWordToPictureGroupItem(item, index, fallbackAnswers[index]));
+        const wordBank = asStringList(meta.wordBank).length
+            ? asStringList(meta.wordBank)
+            : asStringList(answer.wordBank).length
+                ? asStringList(answer.wordBank)
+                : Array.from(new Set(items.map((item) => item.correctAnswer).filter(Boolean)));
+        return {
+            instruction: asString(meta.instruction) ||
+                asString(answer.instruction) ||
+                MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION,
+            wordBank,
+            items,
+            explanation,
+            points: items.reduce((total, item) => (item.isExample ? total : total + (item.points || 0)), 0),
+        };
+    }
+    return {
+        instruction: MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION,
+        wordBank: ['', ''],
+        items: [createEmptyMatchWordToPictureGroupItem(1)],
+        explanation,
+        points: 1,
+    };
+}

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

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

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

@@ -0,0 +1,36 @@
+import { MatchWordToPictureGroupCreator } from './MatchWordToPictureGroupCreator';
+import { mapQuestionToMatchWordToPictureGroupData } from './map-match-word-to-picture-group-data';
+export const matchWordToPictureGroupRegistration = {
+    component: MatchWordToPictureGroupCreator,
+    transformInitialData: (initialData) => mapQuestionToMatchWordToPictureGroupData(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/match-word-to-picture-group/transform.d.ts

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

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

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

package/dist/components/questions/types/word-ordering-group/WordOrderingGroupClient.d.ts

@@ -0,0 +1,2 @@
+import type { WordOrderingGroupClientProps } from '../../_shared/types/word-ordering-group.type';
+export declare function WordOrderingGroupClient({ questionData, isReviewMode, userAnswers, onAnswerChange, }: WordOrderingGroupClientProps): import("react").JSX.Element;

package/dist/components/questions/types/word-ordering-group/WordOrderingGroupClient.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Lightbulb, Star } from 'lucide-react';
+import { WordOrderingClient } from '../word-ordering/WordOrderingClient';
+export function WordOrderingGroupClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, }) {
+    const items = questionData.items || [];
+    const handleItemSubmit = (itemIndex, ordered) => {
+        if (isReviewMode || items[itemIndex]?.isExample || !onAnswerChange)
+            return;
+        const next = items.map((item, index) => {
+            if (item.isExample)
+                return item.answer;
+            if (index === itemIndex)
+                return ordered;
+            return userAnswers[index] || [];
+        });
+        onAnswerChange(next);
+    };
+    return (_jsxs("div", { className: "space-y-4", children: [questionData.instruction && (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800", children: questionData.instruction })), items.map((item, itemIndex) => (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-white p-4", 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"] })] }), _jsx(WordOrderingClient, { questionData: {
+                            words: item.words,
+                            answer: item.answer,
+                            isExample: item.isExample,
+                            points: item.points,
+                        }, isReviewMode: isReviewMode || item.isExample, userAnswer: item.isExample ? item.answer : userAnswers[itemIndex], onSubmit: (ordered) => handleItemSubmit(itemIndex, ordered) })] }, `${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/word-ordering-group/WordOrderingGroupCreator.d.ts

@@ -0,0 +1,2 @@
+import type { WordOrderingGroupCreatorProps } from '../../_shared/types/word-ordering-group.type';
+export declare function WordOrderingGroupCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }: WordOrderingGroupCreatorProps): import("react").JSX.Element;

package/dist/components/questions/types/word-ordering-group/WordOrderingGroupCreator.js

@@ -0,0 +1,106 @@
+'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';
+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 { Eye, Pencil, Plus, Star, Trash2 } from 'lucide-react';
+import { WordOrderingGroupClient } from './WordOrderingGroupClient';
+import { WORD_ORDERING_GROUP_DEFAULT_INSTRUCTION } from '../../_shared/types/word-ordering-group.type';
+import { createEmptyWordOrderingGroupItem, mapQuestionToWordOrderingGroupData, } from './map-word-ordering-group-data';
+function parseTokens(value) {
+    return value
+        .split(/[,\n]/)
+        .map((token) => token.trim())
+        .filter(Boolean);
+}
+function joinTokens(tokens) {
+    return tokens.join(', ');
+}
+function sumPoints(items) {
+    return items.reduce((total, item) => (item.isExample ? total : total + (typeof item.points === 'number' ? item.points : 1)), 0);
+}
+export function WordOrderingGroupCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }) {
+    const seeded = mapQuestionToWordOrderingGroupData(initialData ? { answer: initialData } : null);
+    const [instruction, setInstruction] = useState(initialData?.instruction || seeded.instruction || WORD_ORDERING_GROUP_DEFAULT_INSTRUCTION);
+    const [items, setItems] = useState(() => (initialData?.items?.length ? initialData.items : 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 = (nextInstruction = instruction, nextItems = items, nextExplanation = explanation) => ({
+        instruction: nextInstruction,
+        items: nextItems,
+        explanation: nextExplanation,
+        points: sumPoints(nextItems),
+    });
+    const debouncedOnChange = useDebouncedCallback((payload) => {
+        onChangeRef.current?.(payload);
+    }, 300);
+    useEffect(() => {
+        const payload = buildPayload();
+        const serialized = JSON.stringify(payload);
+        if (serialized !== previousPayloadRef.current) {
+            previousPayloadRef.current = serialized;
+            debouncedOnChange(payload);
+            onUnsavedChangesChange?.(true);
+        }
+    }, [instruction, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
+    const validate = () => {
+        const nextErrors = [];
+        if (!instruction.trim())
+            nextErrors.push('Hướng dẫn không được để trống.');
+        if (items.length < 1)
+            nextErrors.push('Cần ít nhất một câu.');
+        items.forEach((item, index) => {
+            if (item.words.filter(Boolean).length < 2) {
+                nextErrors.push(`Câu ${index + 1}: cần ít nhất 2 token (đã xáo).`);
+            }
+            if (item.answer.filter(Boolean).length < 2) {
+                nextErrors.push(`Câu ${index + 1}: cần thứ tự đúng.`);
+            }
+            const normalizeSet = (tokens) => tokens.map((token) => token.trim().toLowerCase()).filter(Boolean).sort().join('\0');
+            if (item.words.filter(Boolean).length >= 2 &&
+                item.answer.filter(Boolean).length >= 2 &&
+                normalizeSet(item.words) !== normalizeSet(item.answer)) {
+                nextErrors.push(`Câu ${index + 1}: thứ tự đúng phải dùng cùng bộ token đã xáo.`);
+            }
+        });
+        setErrors(nextErrors);
+        return nextErrors.length === 0;
+    };
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => validate(),
+                getFormData: () => buildPayload(),
+            };
+        }
+    }, [validationRef, instruction, 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 S\u1EAFp x\u1EBFp t\u1EEB (nh\u00F3m)" }), _jsx("p", { className: "text-sm text-gray-500", children: "M\u1ED7i d\u00F2ng m\u1ED9t c\u00E2u x\u00E1o tr\u1ED9n. Token c\u00E1ch nhau b\u1EB1ng d\u1EA5u ph\u1EA9y." })] }), _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(WordOrderingGroupClient, { questionData: currentPayload }) })] })) : (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base font-semibold", children: "H\u01B0\u1EDBng d\u1EABn" }) }), _jsx(CardContent, { children: _jsx(Input, { value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: WORD_ORDERING_GROUP_DEFAULT_INSTRUCTION }) })] }), _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: () => setItems((prev) => [...prev, createEmptyWordOrderingGroupItem(prev.length + 1)]), children: [_jsx(Plus, { className: "mr-1 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 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" }) }))] })] }), _jsxs("div", { children: [_jsx(Label, { children: "Token x\u00E1o tr\u1ED9n" }), _jsx(Input, { className: "mt-1", value: joinTokens(item.words), onChange: (e) => updateItem(index, { words: parseTokens(e.target.value) }), placeholder: "do, you, What, like, subjects, ?" })] }), _jsxs("div", { children: [_jsx(Label, { children: "Th\u1EE9 t\u1EF1 \u0111\u00FAng" }), _jsx(Input, { className: "mt-1", value: joinTokens(item.answer), onChange: (e) => updateItem(index, { answer: parseTokens(e.target.value) }), placeholder: "What, subjects, do, you, like, ?" })] })] }, index))) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Gi\u1EA3i th\u00EDch" }) }), _jsx(CardContent, { children: _jsx(Textarea, { value: explanation, onChange: (event) => setExplanation(event.target.value), rows: 3 }) })] })] }))] }));
+}

package/dist/components/questions/types/word-ordering-group/index.d.ts

@@ -0,0 +1,5 @@
+export * from './WordOrderingGroupCreator';
+export * from './WordOrderingGroupClient';
+export * from './transform';
+export * from './register';
+export * from './map-word-ordering-group-data';

package/dist/components/questions/types/word-ordering-group/index.js

@@ -0,0 +1,5 @@
+export * from './WordOrderingGroupCreator';
+export * from './WordOrderingGroupClient';
+export * from './transform';
+export * from './register';
+export * from './map-word-ordering-group-data';

package/dist/components/questions/types/word-ordering-group/map-word-ordering-group-data.d.ts

@@ -0,0 +1,4 @@
+import { type WordOrderingGroupData, type WordOrderingGroupItemData } from '../../_shared/types/word-ordering-group.type';
+export declare function createEmptyWordOrderingGroupItem(questionNumber: number): WordOrderingGroupItemData;
+export declare function mapWordOrderingGroupItem(item: unknown, index: number, fallbackAnswer?: unknown): WordOrderingGroupItemData;
+export declare function mapQuestionToWordOrderingGroupData(question: Record<string, unknown> | null | undefined): WordOrderingGroupData;

package/dist/components/questions/types/word-ordering-group/map-word-ordering-group-data.js

@@ -0,0 +1,74 @@
+import { WORD_ORDERING_GROUP_DEFAULT_INSTRUCTION, } from '../../_shared/types/word-ordering-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;
+}
+function asStringList(value) {
+    if (!Array.isArray(value))
+        return [];
+    return value
+        .map((item) => (typeof item === 'string' ? item.trim() : ''))
+        .filter(Boolean);
+}
+export function createEmptyWordOrderingGroupItem(questionNumber) {
+    return {
+        words: ['', ''],
+        answer: ['', ''],
+        isExample: false,
+        points: 1,
+        questionNumber,
+    };
+}
+export function mapWordOrderingGroupItem(item, index, fallbackAnswer) {
+    const record = asRecord(item);
+    const content = asRecord(record.content);
+    const correctAnswer = asRecord(record.correctAnswer);
+    const isExample = record.isExample === true;
+    const words = asStringList(content.words).length
+        ? asStringList(content.words)
+        : asStringList(record.words);
+    const answer = asStringList(correctAnswer.answer).length
+        ? asStringList(correctAnswer.answer)
+        : asStringList(record.answer).length
+            ? asStringList(record.answer)
+            : asStringList(fallbackAnswer);
+    return {
+        words,
+        answer,
+        isExample,
+        points: isExample ? 0 : (typeof record.points === 'number' ? record.points : 1),
+        questionNumber: typeof record.questionNumber === 'number' ? record.questionNumber : index + 1,
+    };
+}
+export function mapQuestionToWordOrderingGroupData(question) {
+    const source = asRecord(question);
+    const content = asRecord(source.content);
+    const meta = asRecord(content.meta);
+    const answer = asRecord(source.answer);
+    const correctAnswer = asRecord(source.correctAnswer ?? source.correct_answer ?? answer.correctAnswer);
+    const explanation = asString(source.explanation) || asString(answer.explanation);
+    const fallbackAnswers = Array.isArray(correctAnswer.answer) ? correctAnswer.answer : [];
+    if (Array.isArray(content.items) || Array.isArray(answer.items)) {
+        const rawItems = Array.isArray(content.items) ? content.items : answer.items;
+        const items = rawItems.map((item, index) => mapWordOrderingGroupItem(item, index, fallbackAnswers[index]));
+        return {
+            instruction: asString(meta.instruction) ||
+                asString(answer.instruction) ||
+                WORD_ORDERING_GROUP_DEFAULT_INSTRUCTION,
+            items,
+            explanation,
+            points: items.reduce((total, item) => (item.isExample ? total : total + (item.points || 0)), 0),
+        };
+    }
+    return {
+        instruction: WORD_ORDERING_GROUP_DEFAULT_INSTRUCTION,
+        items: [createEmptyWordOrderingGroupItem(1)],
+        explanation,
+        points: 1,
+    };
+}

package/dist/components/questions/types/word-ordering-group/register.d.ts

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

package/dist/components/questions/types/word-ordering-group/register.js

@@ -0,0 +1,36 @@
+import { WordOrderingGroupCreator } from './WordOrderingGroupCreator';
+import { mapQuestionToWordOrderingGroupData } from './map-word-ordering-group-data';
+export const wordOrderingGroupRegistration = {
+    component: WordOrderingGroupCreator,
+    transformInitialData: (initialData) => mapQuestionToWordOrderingGroupData(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/word-ordering-group/transform.d.ts

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

package/dist/components/questions/types/word-ordering-group/transform.js

@@ -0,0 +1,33 @@
+import { WORD_ORDERING_GROUP_DEFAULT_INSTRUCTION, WORD_ORDERING_ITEM_TYPE, } from '../../_shared/types/word-ordering-group.type';
+function tokens(value) {
+    if (!Array.isArray(value))
+        return [];
+    return value
+        .filter((item) => typeof item === 'string')
+        .map((item) => item.trim())
+        .filter(Boolean);
+}
+export const transformWordOrderingGroup = (question) => {
+    const answerData = question.answer;
+    const items = Array.isArray(answerData?.items) ? answerData.items : [];
+    const apiItems = items.map((item, index) => ({
+        questionType: WORD_ORDERING_ITEM_TYPE,
+        ...(item.isExample ? { isExample: true } : {}),
+        content: { words: tokens(item.words) },
+        correctAnswer: { answer: tokens(item.answer) },
+        points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+        questionNumber: item.questionNumber || index + 1,
+    }));
+    return {
+        apiContent: {
+            meta: {
+                instruction: answerData?.instruction || WORD_ORDERING_GROUP_DEFAULT_INSTRUCTION,
+            },
+            items: apiItems,
+        },
+        apiCorrectAnswer: {
+            answer: apiItems.map((item) => item.correctAnswer.answer),
+        },
+        totalPoints: items.reduce((total, item) => (item.isExample ? total : total + (typeof item.points === 'number' ? item.points : 1)), 0),
+    };
+};