@tinyweb_dev/oe-exam-sdk 0.2.5 → 0.2.6

package/dist/components/questions/creator/question-type-registry.js

@@ -14,6 +14,7 @@ import { chooseTheCorrectAnswerRegistration } from '../types/choose-the-correct-
 import { chooseTheCorrectAnswerGroupRegistration } from '../types/choose-the-correct-answer-group/register';
 import { trueFalseGroupRegistration } from '../types/true-false-group/register';
 import { trueFalseCorrectGroupRegistration } from '../types/true-false-correct-group/register';
+import { fillInBlankGroupRegistration } from '../types/fill-in-blank-group/register';
 import { crossOutWordGroupRegistration } from '../types/cross-out-word-group/register';
 import { writeAShortLetterRegistration } from '../types/write-a-short-letter/register';
 import { writeCorrectVerbFormRegistration } from '../types/write-correct-verb-form/register';
@@ -25,6 +26,7 @@ import { wordOrderingRegistration } from '../types/word-ordering/register';
 import { wordFillParagraphRegistration } from '../types/word-fill-paragraph/register';
 import { matchByWritingAnswerRegistration } from '../types/match-by-writing-answer/register';
 import { matchWordToPictureRegistration } from '../types/match-word-to-picture/register';
+import { matchingWithLinesGroupRegistration } from '../types/matching-with-lines-group/register';
 import { writeSentencesRegistration } from '../types/write-sentences/register';
 import { listenAndChooseFromAnswerGroupRegistration } from '../types/listen-and-choose-from-answer-group/register';
 import { listenAndChooseObjectsInSceneRegistration } from '../types/listen-and-choose-objects-in-scene/register';
@@ -53,6 +55,7 @@ export const questionTypeRegistry = {
     CHOOSE_THE_CORRECT_ANSWER_GROUP: chooseTheCorrectAnswerGroupRegistration,
     TRUE_FALSE_GROUP: trueFalseGroupRegistration,
     TRUE_FALSE_CORRECT_GROUP: trueFalseCorrectGroupRegistration,
+    FILL_IN_BLANK_GROUP: fillInBlankGroupRegistration,
     CROSS_OUT_WORD_GROUP: crossOutWordGroupRegistration,
     WORD_ORDER_AND_MATCH_GROUP: wordOrderAndMatchGroupRegistration,
     FILL_IN_BLANK: fillInBlankRegistration,
@@ -76,6 +79,7 @@ export const questionTypeRegistry = {
     WORD_FILL_PARAGRAPH: wordFillParagraphRegistration, // Will need to handle viewMode mapping either here or in wrapper
     MATCH_BY_WRITING_ANSWER: matchByWritingAnswerRegistration,
     MATCH_WORD_TO_PICTURE: matchWordToPictureRegistration,
+    MATCHING_WITH_LINES_GROUP: matchingWithLinesGroupRegistration,
     WRITE_SENTENCES: writeSentencesRegistration,
     LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP: listenAndChooseFromAnswerGroupRegistration,
     LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE: listenAndChooseObjectsInSceneRegistration,

package/dist/components/questions/types/fill-in-blank-group/FillInBlankGroupClient.d.ts

@@ -0,0 +1,2 @@
+import type { FillInBlankGroupClientProps } from '../../_shared/types/fill-in-blank-group.type';
+export declare function FillInBlankGroupClient({ questionData, isReviewMode, userAnswers, onAnswerChange, }: FillInBlankGroupClientProps): import("react").JSX.Element;

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

@@ -0,0 +1,64 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Lightbulb, Star, Volume2 } from 'lucide-react';
+import { cn } from '../../../../shared/lib/utils';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { blankSlotCount, extractPlaceholderIndices, isBlankMatch, joinSlashAnswers, padStudentAnswers, splitStem, } from './blank-utils';
+function MediaPreview({ src, kind, alt }) {
+    const { previewUrl, isLoading } = usePresignedFileUrl(src);
+    if (isLoading) {
+        return _jsx("div", { className: "h-16 w-16 animate-pulse rounded-md bg-slate-100" });
+    }
+    const url = previewUrl || src;
+    if (kind === 'audio') {
+        return _jsx("audio", { controls: true, src: url, className: "h-8 max-w-full" });
+    }
+    return (_jsx("img", { src: url, alt: alt, className: "max-h-28 w-auto rounded-md object-contain", onError: (event) => {
+            const target = event.target;
+            target.onerror = null;
+            target.src = '/images/placeholder-image.svg';
+        } }));
+}
+export function FillInBlankGroupClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, }) {
+    const items = questionData.items || [];
+    const groupHints = questionData.showHints ? (questionData.hints || []) : [];
+    const handleBlankChange = (itemIndex, blankIndex, value) => {
+        const item = items[itemIndex];
+        if (isReviewMode || item?.isExample || !onAnswerChange) {
+            return;
+        }
+        const next = items.map((row, index) => ({
+            answers: padStudentAnswers(userAnswers[index], blankSlotCount(row.question || '{0}')),
+        }));
+        const current = [...next[itemIndex].answers];
+        current[blankIndex] = value;
+        next[itemIndex] = { answers: current };
+        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 })), questionData.audioUrl && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2", children: [_jsx(Volume2, { className: "h-4 w-4 text-slate-500" }), _jsx(MediaPreview, { src: questionData.audioUrl, kind: "audio", alt: "Group audio" })] })), questionData.imageUrl && (_jsx("div", { className: "flex justify-center rounded-lg border border-slate-100 bg-slate-50 p-3", children: _jsx(MediaPreview, { src: questionData.imageUrl, kind: "image", alt: "Group image" }) })), groupHints.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: groupHints.map((hint) => (_jsx("span", { className: "rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700", children: hint }, hint))) })), _jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: items.map((item, itemIndex) => {
+                    const blankCount = blankSlotCount(item.question || '{0}');
+                    const placeholderIndices = extractPlaceholderIndices(item.question || '{0}');
+                    const userValue = padStudentAnswers(userAnswers[itemIndex], blankCount);
+                    const stem = splitStem(item.question || '{0}');
+                    const showItemAudio = Boolean(item.audioUrl) && !questionData.audioUrl;
+                    return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gray-50 px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-blue-600 text-xs font-bold text-white", children: item.questionNumber || itemIndex + 1 }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] }))] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "flex items-center gap-3 p-3", children: [item.imageUrl && (_jsx(MediaPreview, { src: item.imageUrl, kind: "image", alt: `Item ${item.questionNumber}` })), _jsxs("div", { className: "min-w-0 flex-1 space-y-2 text-sm leading-relaxed text-slate-800", children: [showItemAudio && item.audioUrl && (_jsx(MediaPreview, { src: item.audioUrl, kind: "audio", alt: `Item ${item.questionNumber} audio` })), stem.map((part, partIndex) => {
+                                                if (part.type === 'text') {
+                                                    return _jsx("span", { children: part.value }, partIndex);
+                                                }
+                                                const alts = item.answers[part.index] || [];
+                                                const student = userValue[part.index] || '';
+                                                const canEdit = !isReviewMode && !item.isExample && Boolean(onAnswerChange);
+                                                const correct = isReviewMode && isBlankMatch(student, alts);
+                                                const wrong = isReviewMode && student.trim().length > 0 && !correct;
+                                                return (_jsx("input", { type: "text", disabled: !canEdit, value: item.isExample ? (alts[0] || '') : student, onChange: (event) => handleBlankChange(itemIndex, part.index, event.target.value), placeholder: item.isExample ? '' : '...', className: cn('mx-1 inline-block w-16 rounded-md border-2 px-1 py-0.5 text-center text-sm font-semibold outline-none', item.isExample
+                                                        ? 'border-amber-300 bg-amber-50 text-amber-800'
+                                                        : correct
+                                                            ? 'border-emerald-400 bg-emerald-50 text-emerald-800'
+                                                            : wrong
+                                                                ? 'border-rose-400 bg-rose-50 text-rose-800'
+                                                                : canEdit
+                                                                    ? 'border-blue-300 bg-white text-slate-800 focus:border-blue-500'
+                                                                    : 'border-blue-200 bg-blue-50 text-blue-900') }, partIndex));
+                                            })] })] }), isReviewMode && !item.isExample && (_jsxs("div", { className: "border-t border-emerald-100 bg-emerald-50 px-3 py-2 text-xs text-emerald-800", children: ["\u0110\u00E1p \u00E1n: ", placeholderIndices.map((index) => joinSlashAnswers(item.answers[index]) || '(trống)').join(' | ')] }))] }, `${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/fill-in-blank-group/FillInBlankGroupCreator.d.ts

@@ -0,0 +1,2 @@
+import type { FillInBlankGroupCreatorProps } from '../../_shared/types/fill-in-blank-group.type';
+export declare function FillInBlankGroupCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }: FillInBlankGroupCreatorProps): import("react").JSX.Element;

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

@@ -0,0 +1,158 @@
+'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 { Textarea } from '../../../../components/ui/textarea';
+import { PointsInput } from '../../../../components/ui/points-input';
+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 { FillInBlankGroupClient } from './FillInBlankGroupClient';
+import { FillInBlankGroupMediaField } from './FillInBlankGroupMediaField';
+import { createEmptyFillInBlankGroupItem } from './map-fill-in-blank-group-data';
+import { blankSlotCount, extractPlaceholderIndices, joinSlashAnswers, normalizeAnswersMatrix, parseSlashAnswers, } from './blank-utils';
+import { FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION } from '../../_shared/types/fill-in-blank-group.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);
+}
+function syncItemAnswers(item) {
+    const indices = extractPlaceholderIndices(item.question || '');
+    const requiredLength = blankSlotCount(item.question || '');
+    return {
+        ...item,
+        answers: normalizeAnswersMatrix(item.answers, requiredLength).map((alts, index) => {
+            if (!indices.includes(index))
+                return [];
+            return alts.length > 0 ? alts : [''];
+        }),
+    };
+}
+function normalizeItems(rawItems) {
+    if (!Array.isArray(rawItems) || rawItems.length === 0) {
+        return [createEmptyFillInBlankGroupItem(1)];
+    }
+    return rawItems.map((item, index) => syncItemAnswers({
+        ...createEmptyFillInBlankGroupItem(index + 1),
+        ...item,
+        question: item.question || '{0}',
+        isExample: item.isExample === true,
+        points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+        questionNumber: item.questionNumber || index + 1,
+    }));
+}
+function sumPoints(items) {
+    return items.reduce((total, item) => (item.isExample ? total : total + (typeof item.points === 'number' ? item.points : 1)), 0);
+}
+export function FillInBlankGroupCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }) {
+    const [instruction, setInstruction] = useState(initialData?.instruction || FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION);
+    const [audioUrl, setAudioUrl] = useState(initialData?.audioUrl || '');
+    const [imageUrl, setImageUrl] = useState(initialData?.imageUrl || '');
+    const [showHints, setShowHints] = useState(initialData?.showHints === true);
+    const [hintsText, setHintsText] = useState((initialData?.hints || []).join(' / '));
+    const [items, setItems] = useState(() => normalizeItems(initialData?.items));
+    const [explanation, setExplanation] = useState(initialData?.explanation || '');
+    const [isClientMode, setIsClientMode] = useState(false);
+    const [errors, setErrors] = useState([]);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    const parseHints = (value) => parseSlashAnswers(value);
+    const buildPayload = (nextInstruction = instruction, nextItems = items, nextExplanation = explanation, nextAudioUrl = audioUrl, nextImageUrl = imageUrl, nextShowHints = showHints, nextHintsText = hintsText) => ({
+        instruction: nextInstruction,
+        audioUrl: nextAudioUrl,
+        imageUrl: nextImageUrl,
+        showHints: nextShowHints,
+        hints: parseHints(nextHintsText),
+        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, audioUrl, imageUrl, showHints, hintsText, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
+    const validate = () => {
+        const nextErrors = [];
+        if (!instruction.trim()) {
+            nextErrors.push('Hướng dẫn (Instruction) không được để trống.');
+        }
+        if (items.length === 0) {
+            nextErrors.push('Cần ít nhất một câu hỏi trong nhóm.');
+        }
+        items.forEach((item, index) => {
+            if (!item.question.trim()) {
+                nextErrors.push(`Câu ${index + 1}: Stem không được để trống.`);
+            }
+            else if (extractPlaceholderIndices(item.question).length === 0) {
+                nextErrors.push(`Câu ${index + 1}: Stem cần có chỗ trống {0}, {1}...`);
+            }
+            item.answers.forEach((alts, blankIndex) => {
+                if (!extractPlaceholderIndices(item.question).includes(blankIndex))
+                    return;
+                if (!alts.some((alt) => alt.trim())) {
+                    nextErrors.push(`Câu ${index + 1}: Blank {${blankIndex}} cần ít nhất một đáp án.`);
+                }
+            });
+        });
+        setErrors(nextErrors);
+        return nextErrors.length === 0;
+    };
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => validate(),
+                getFormData: () => buildPayload(),
+            };
+        }
+    }, [validationRef, instruction, audioUrl, imageUrl, showHints, hintsText, items, explanation]);
+    const updateItem = (index, patch) => {
+        setItems((prev) => {
+            const next = [...prev];
+            const current = next[index];
+            if (!current)
+                return prev;
+            next[index] = syncItemAnswers({ ...current, ...patch });
+            return next;
+        });
+    };
+    const addItem = () => {
+        setItems((prev) => [...prev, createEmptyFillInBlankGroupItem(prev.length + 1)]);
+    };
+    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;
+    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 \u0110i\u1EC1n ch\u1ED7 tr\u1ED1ng (Nh\u00F3m)" }), _jsxs("p", { className: "text-sm text-gray-500", children: ["M\u1ED7i d\u00F2ng l\u00E0 1 stem c\u00F3 ", '{0}', ". C\u00F3 th\u1EC3 th\u00EAm audio/\u1EA3nh chung ho\u1EB7c t\u1EEBng item."] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsClientMode((prev) => !prev), className: "gap-2", children: [isClientMode ? _jsx(Pencil, { className: "h-4 w-4" }) : _jsx(Eye, { className: "h-4 w-4" }), isClientMode ? 'Chế độ chỉnh sửa' : 'Xem trước học sinh'] })] }), displayErrors.length > 0 && (_jsxs("div", { className: "rounded-lg border border-red-200 bg-red-50 p-4", children: [_jsx("h3", { className: "text-sm font-medium text-red-800", children: "C\u1EA7n s\u1EEDa c\u00E1c l\u1ED7i sau:" }), _jsx("ul", { className: "mt-2 list-disc space-y-1 pl-5 text-sm text-red-700", children: displayErrors.map((err, i) => (_jsx("li", { children: err }, i))) })] })), isClientMode ? (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base font-semibold", children: "Xem tr\u01B0\u1EDBc hi\u1EC3n th\u1ECB h\u1ECDc sinh" }) }), _jsx(CardContent, { children: _jsx(FillInBlankGroupClient, { 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 v\u00E0 media chung" }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "instruction", children: "H\u01B0\u1EDBng d\u1EABn b\u00E0i l\u00E0m" }), _jsx(Input, { id: "instruction", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION, className: "mt-1" })] }), _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsx(FillInBlankGroupMediaField, { id: "fib-group-audio", label: "Audio chung (optional)", accept: "audio/*", value: audioUrl, onChange: setAudioUrl }), _jsx(FillInBlankGroupMediaField, { id: "fib-group-image", label: "\u1EA2nh chung (optional)", accept: "image/*", value: imageUrl, onChange: setImageUrl })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "show-hints", checked: showHints, onCheckedChange: setShowHints }), _jsx(Label, { htmlFor: "show-hints", children: "Hi\u1EC7n h\u1ED9p t\u1EEB g\u1EE3i \u00FD chung" })] }), showHints && (_jsx(Input, { value: hintsText, onChange: (e) => setHintsText(e.target.value), placeholder: "am / is / are" }))] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs(CardTitle, { className: "text-base font-semibold", children: ["Danh s\u00E1ch c\u00E2u (", 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: "flex items-center gap-2 text-sm font-medium text-gray-700", children: [_jsx("span", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-blue-100 text-xs font-semibold text-blue-700", children: item.questionNumber || index + 1 }), "C\u00E2u ", index + 1] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: `example-${index}`, checked: item.isExample || false, onCheckedChange: (checked) => updateItem(index, { isExample: checked, points: checked ? 0 : 1 }) }), _jsxs(Label, { htmlFor: `example-${index}`, className: "flex cursor-pointer items-center gap-1 text-xs", children: [_jsx(Star, { className: "h-3 w-3 text-amber-500" }), "Example"] })] }), !item.isExample && (_jsx("div", { className: "w-24", children: _jsx(PointsInput, { value: item.points, allowZero: true, onChange: (event) => updateItem(index, {
+                                                                    points: parsePointsValue(event.target.value, true),
+                                                                }) }) })), items.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeItem(index), className: "text-red-500 hover:bg-red-50", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] })] }), _jsxs("div", { children: [_jsxs(Label, { htmlFor: `question-${index}`, children: ["Stem (d\u00F9ng ", '{0}', ", ", '{1}', "...)"] }), _jsx(Textarea, { id: `question-${index}`, value: item.question, onChange: (e) => updateItem(index, { question: e.target.value }), placeholder: "{0}", className: "mt-1" })] }), extractPlaceholderIndices(item.question).map((blankIndex) => (_jsxs("div", { children: [_jsxs(Label, { htmlFor: `answer-${index}-${blankIndex}`, children: ["\u0110\u00E1p \u00E1n blank ", '{' + blankIndex + '}', " (c\u00E1ch nhau b\u1EDFi /)"] }), _jsx(Input, { id: `answer-${index}-${blankIndex}`, value: joinSlashAnswers(item.answers[blankIndex]), onChange: (e) => {
+                                                        const next = [...item.answers];
+                                                        next[blankIndex] = parseSlashAnswers(e.target.value);
+                                                        updateItem(index, { answers: next });
+                                                    }, placeholder: "is / 's", className: "mt-1" })] }, blankIndex))), _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsx(FillInBlankGroupMediaField, { id: `fib-item-image-${index}`, label: "\u1EA2nh item (optional)", accept: "image/*", value: item.imageUrl || '', onChange: (url) => updateItem(index, { imageUrl: url }) }), !audioUrl && (_jsx(FillInBlankGroupMediaField, { id: `fib-item-audio-${index}`, label: "Audio item (khi kh\u00F4ng c\u00F3 audio nh\u00F3m)", accept: "audio/*", value: item.audioUrl || '', onChange: (url) => updateItem(index, { audioUrl: url }) }))] })] }, index))) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Gi\u1EA3i th\u00EDch" }) }), _jsx(CardContent, { children: _jsx(Textarea, { id: "explanation", value: explanation, onChange: (event) => setExplanation(event.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3 }) })] })] }))] }));
+}

package/dist/components/questions/types/fill-in-blank-group/FillInBlankGroupMediaField.d.ts

@@ -0,0 +1,7 @@
+export declare function FillInBlankGroupMediaField({ id, label, accept, value, onChange, }: {
+    id: string;
+    label: string;
+    accept: 'image/*' | 'audio/*';
+    value: string;
+    onChange: (url: string) => void;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,30 @@
+'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';
+function resolveDisplayUrl(fileUrl, previewOverride, fetchedPreviewUrl) {
+    if (previewOverride)
+        return previewOverride;
+    if (fetchedPreviewUrl)
+        return fetchedPreviewUrl;
+    if (fileUrl.startsWith('http') || fileUrl.startsWith('blob:'))
+        return fileUrl;
+    return '';
+}
+export function FillInBlankGroupMediaField({ id, label, accept, value, onChange, }) {
+    const [previewOverride, setPreviewOverride] = useState('');
+    const { previewUrl: fetchedPreviewUrl } = usePresignedFileUrl(value);
+    const displayUrl = resolveDisplayUrl(value, previewOverride, fetchedPreviewUrl);
+    const isImage = accept === 'image/*';
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(FileUpload, { id: id, label: label, accept: accept, value: value, onChange: onChange, onPresignedUrlChange: setPreviewOverride, maxSize: accept === 'image/*' ? 5 : 20, placeholder: isImage ? 'Upload ảnh hoặc paste URL' : 'Upload audio hoặc paste URL', autoUpload: true, prefix: "questions" }), value && isImage && (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(ImagePreview, { src: displayUrl || value, alt: label, className: "h-20 w-20 rounded-md object-contain" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
+                            setPreviewOverride('');
+                            onChange('');
+                        }, className: "text-red-500 hover:bg-red-50", children: _jsx(Trash2, { className: "h-4 w-4" }) })] })), value && !isImage && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("audio", { controls: true, src: displayUrl || value, className: "h-8 max-w-full" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
+                            setPreviewOverride('');
+                            onChange('');
+                        }, className: "text-red-500 hover:bg-red-50", children: _jsx(Trash2, { className: "h-4 w-4" }) })] }))] }));
+}

package/dist/components/questions/types/fill-in-blank-group/blank-utils.d.ts

@@ -0,0 +1,20 @@
+import { FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION } from '../../_shared/types/fill-in-blank-group.type';
+export { FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION };
+export type FillBlankStemPart = {
+    type: 'text';
+    value: string;
+} | {
+    type: 'blank';
+    index: number;
+};
+export declare function extractPlaceholderIndices(question: string): number[];
+/** answers[j] aligns with placeholder {j}; length = max(N)+1 */
+export declare function blankSlotCount(question: string): number;
+export declare function normalizeBlankAlts(value: unknown): string[];
+export declare function normalizeAnswersMatrix(raw: unknown, requiredLength?: number): string[][];
+export declare function joinSlashAnswers(alts: string[] | undefined): string;
+export declare function parseSlashAnswers(text: string): string[];
+export declare function splitStem(question: string): FillBlankStemPart[];
+export declare function normalizeStudentText(value: string): string;
+export declare function isBlankMatch(studentValue: string | undefined, alts: string[] | undefined): boolean;
+export declare function padStudentAnswers(raw: unknown, blankCount: number): string[];

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

@@ -0,0 +1,99 @@
+import { FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION } from '../../_shared/types/fill-in-blank-group.type';
+export { FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION };
+export function extractPlaceholderIndices(question) {
+    if (!question)
+        return [];
+    const regex = /\{(\d+)\}/g;
+    const indices = [];
+    let match;
+    while ((match = regex.exec(question)) !== null) {
+        const index = Number.parseInt(match[1], 10);
+        if (!indices.includes(index)) {
+            indices.push(index);
+        }
+    }
+    return indices.sort((a, b) => a - b);
+}
+/** answers[j] aligns with placeholder {j}; length = max(N)+1 */
+export function blankSlotCount(question) {
+    const indices = extractPlaceholderIndices(question);
+    if (indices.length === 0)
+        return 1;
+    return Math.max(...indices, 0) + 1;
+}
+export function normalizeBlankAlts(value) {
+    if (Array.isArray(value)) {
+        return value
+            .map((item) => (item == null ? '' : String(item).trim()))
+            .filter((item) => item.length > 0);
+    }
+    if (value == null)
+        return [];
+    const text = String(value).trim();
+    return text ? [text] : [];
+}
+export function normalizeAnswersMatrix(raw, requiredLength) {
+    let result = [];
+    if (Array.isArray(raw)) {
+        result = raw.map((item) => normalizeBlankAlts(item));
+    }
+    if (typeof requiredLength === 'number' && requiredLength > 0) {
+        if (result.length > requiredLength) {
+            result = result.slice(0, requiredLength);
+        }
+        while (result.length < requiredLength) {
+            result.push([]);
+        }
+    }
+    return result;
+}
+export function joinSlashAnswers(alts) {
+    return (alts || []).map((item) => item.trim()).filter(Boolean).join(' / ');
+}
+export function parseSlashAnswers(text) {
+    return text
+        .split('/')
+        .map((item) => item.trim())
+        .filter(Boolean);
+}
+export function splitStem(question) {
+    if (!question)
+        return [];
+    const parts = [];
+    const regex = /\{(\d+)\}/g;
+    let lastIndex = 0;
+    let match;
+    while ((match = regex.exec(question)) !== null) {
+        if (match.index > lastIndex) {
+            parts.push({ type: 'text', value: question.slice(lastIndex, match.index) });
+        }
+        parts.push({ type: 'blank', index: Number.parseInt(match[1], 10) });
+        lastIndex = match.index + match[0].length;
+    }
+    if (lastIndex < question.length) {
+        parts.push({ type: 'text', value: question.slice(lastIndex) });
+    }
+    return parts;
+}
+export function normalizeStudentText(value) {
+    return value.toString().trim().toLowerCase().replace(/\s+/g, ' ');
+}
+export function isBlankMatch(studentValue, alts) {
+    const user = normalizeStudentText(studentValue ?? '');
+    if (!user || !alts?.length)
+        return false;
+    return alts.some((alt) => normalizeStudentText(alt) === user);
+}
+export function padStudentAnswers(raw, blankCount) {
+    const values = Array.isArray(raw?.answers)
+        ? raw.answers.map((item) => String(item ?? ''))
+        : Array.isArray(raw)
+            ? raw.map((item) => String(item ?? ''))
+            : typeof raw === 'string'
+                ? [raw]
+                : [];
+    const next = [...values];
+    while (next.length < blankCount)
+        next.push('');
+    return next.slice(0, Math.max(blankCount, 0));
+}

package/dist/components/questions/types/fill-in-blank-group/index.d.ts

@@ -0,0 +1,5 @@
+export * from './FillInBlankGroupCreator';
+export * from './FillInBlankGroupClient';
+export * from './transform';
+export * from './register';
+export * from './map-fill-in-blank-group-data';

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

@@ -0,0 +1,5 @@
+export * from './FillInBlankGroupCreator';
+export * from './FillInBlankGroupClient';
+export * from './transform';
+export * from './register';
+export * from './map-fill-in-blank-group-data';

package/dist/components/questions/types/fill-in-blank-group/map-fill-in-blank-group-data.d.ts

@@ -0,0 +1,4 @@
+import type { FillInBlankGroupData, FillInBlankGroupItemData } from '../../_shared/types/fill-in-blank-group.type';
+export declare function createEmptyFillInBlankGroupItem(questionNumber: number): FillInBlankGroupItemData;
+export declare function mapFillInBlankGroupItem(item: unknown, index: number, fallbackAnswer?: unknown): FillInBlankGroupItemData;
+export declare function mapQuestionToFillInBlankGroupData(question: Record<string, unknown> | null | undefined): FillInBlankGroupData;

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

@@ -0,0 +1,102 @@
+import { FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION } from '../../_shared/types/fill-in-blank-group.type';
+import { blankSlotCount, extractPlaceholderIndices, normalizeAnswersMatrix, } from './blank-utils';
+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 asStringArray(value) {
+    return Array.isArray(value)
+        ? value.map((item) => String(item ?? '').trim()).filter(Boolean)
+        : [];
+}
+export function createEmptyFillInBlankGroupItem(questionNumber) {
+    return {
+        question: '{0}',
+        answers: [['']],
+        caseSensitive: false,
+        imageUrl: '',
+        audioUrl: '',
+        isExample: false,
+        points: 1,
+        questionNumber,
+    };
+}
+export function mapFillInBlankGroupItem(item, index, fallbackAnswer) {
+    const record = asRecord(item);
+    const content = asRecord(record.content);
+    const correctAnswer = asRecord(record.correctAnswer);
+    const fallback = asRecord(fallbackAnswer);
+    const isExample = record.isExample === true;
+    const question = asString(content.question) || asString(record.question) || '{0}';
+    const indices = extractPlaceholderIndices(question);
+    const answers = normalizeAnswersMatrix(correctAnswer.answers ?? record.answers ?? fallback.answers, blankSlotCount(question)).map((alts, index) => {
+        if (!indices.includes(index))
+            return [];
+        return alts.length > 0 ? alts : [''];
+    });
+    return {
+        question,
+        answers,
+        caseSensitive: correctAnswer.caseSensitive === true
+            || record.caseSensitive === true
+            || fallback.caseSensitive === true,
+        imageUrl: asString(content.imageUrl) || asString(record.imageUrl),
+        audioUrl: asString(content.audioUrl) || asString(record.audioUrl),
+        showHints: content.showHints === true,
+        hints: asStringArray(content.hints),
+        isExample,
+        points: isExample ? 0 : (typeof record.points === 'number' ? record.points : 1),
+        questionNumber: typeof record.questionNumber === 'number' ? record.questionNumber : index + 1,
+    };
+}
+export function mapQuestionToFillInBlankGroupData(question) {
+    const source = asRecord(question);
+    const content = asRecord(source.content);
+    const answer = asRecord(source.answer);
+    const correctAnswer = asRecord(source.correctAnswer ?? source.correct_answer ?? answer.correctAnswer);
+    const explanation = String(source.explanation || answer.explanation || '');
+    const fallbackAnswers = Array.isArray(correctAnswer.answer)
+        ? correctAnswer.answer
+        : [];
+    const meta = asRecord(content.meta);
+    if (Array.isArray(content.items)) {
+        const items = content.items.map((item, index) => mapFillInBlankGroupItem(item, index, fallbackAnswers[index]));
+        return {
+            instruction: asString(meta.instruction) || FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION,
+            audioUrl: asString(meta.audioUrl),
+            imageUrl: asString(meta.imageUrl),
+            showHints: meta.showHints === true,
+            hints: asStringArray(meta.hints),
+            items,
+            explanation,
+            points: items.reduce((total, item) => (item.isExample ? total : total + (item.points || 0)), 0),
+        };
+    }
+    if (Array.isArray(answer.items)) {
+        return {
+            instruction: asString(answer.instruction, FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION),
+            audioUrl: asString(answer.audioUrl),
+            imageUrl: asString(answer.imageUrl),
+            showHints: answer.showHints === true,
+            hints: asStringArray(answer.hints),
+            items: answer.items.map((item, index) => mapFillInBlankGroupItem(item, index, fallbackAnswers[index])),
+            explanation,
+            points: typeof answer.points === 'number' ? answer.points : undefined,
+        };
+    }
+    return {
+        instruction: FILL_IN_BLANK_GROUP_DEFAULT_INSTRUCTION,
+        audioUrl: '',
+        imageUrl: '',
+        showHints: false,
+        hints: [],
+        items: [createEmptyFillInBlankGroupItem(1)],
+        explanation,
+        points: 1,
+    };
+}

package/dist/components/questions/types/fill-in-blank-group/register.d.ts

@@ -0,0 +1,3 @@
+import type { QuestionTypeRegistration } from '../../creator/question-type-registry';
+export { createEmptyFillInBlankGroupItem, mapFillInBlankGroupItem, mapQuestionToFillInBlankGroupData, } from './map-fill-in-blank-group-data';
+export declare const fillInBlankGroupRegistration: QuestionTypeRegistration;

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

@@ -0,0 +1,37 @@
+import { FillInBlankGroupCreator } from './FillInBlankGroupCreator';
+import { mapQuestionToFillInBlankGroupData } from './map-fill-in-blank-group-data';
+export { createEmptyFillInBlankGroupItem, mapFillInBlankGroupItem, mapQuestionToFillInBlankGroupData, } from './map-fill-in-blank-group-data';
+export const fillInBlankGroupRegistration = {
+    component: FillInBlankGroupCreator,
+    transformInitialData: (initialData) => mapQuestionToFillInBlankGroupData(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/fill-in-blank-group/transform.d.ts

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