@tinyweb_dev/oe-exam-sdk 1.0.7 → 1.0.9

package/dist/components/questions/types/find-words-in-matrix/FindWordsInMatrixClient.js

@@ -1,69 +1,168 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
 import { Card } from '../../../../components/ui/card';
 import { Badge } from '../../../../components/ui/badge';
-// 10 Distinct pastel highlighter colors for word selections
 const WORD_COLORS = [
-    { bg: 'bg-amber-100 text-amber-900 border-amber-400', badge: 'bg-amber-500 text-white', stroke: '#f59e0b' },
-    { bg: 'bg-emerald-100 text-emerald-900 border-emerald-400', badge: 'bg-emerald-500 text-white', stroke: '#10b981' },
-    { bg: 'bg-sky-100 text-sky-900 border-sky-400', badge: 'bg-sky-500 text-white', stroke: '#0ea5e9' },
-    { bg: 'bg-purple-100 text-purple-900 border-purple-400', badge: 'bg-purple-500 text-white', stroke: '#a855f7' },
-    { bg: 'bg-rose-100 text-rose-900 border-rose-400', badge: 'bg-rose-500 text-white', stroke: '#f43f5e' },
-    { bg: 'bg-indigo-100 text-indigo-900 border-indigo-400', badge: 'bg-indigo-500 text-white', stroke: '#6366f1' },
-    { bg: 'bg-teal-100 text-teal-900 border-teal-400', badge: 'bg-teal-500 text-white', stroke: '#14b8a6' },
-    { bg: 'bg-yellow-100 text-yellow-900 border-yellow-400', badge: 'bg-yellow-500 text-white', stroke: '#eab308' },
-    { bg: 'bg-pink-100 text-pink-900 border-pink-400', badge: 'bg-pink-500 text-white', stroke: '#ec4899' },
-    { bg: 'bg-cyan-100 text-cyan-900 border-cyan-400', badge: 'bg-cyan-500 text-white', stroke: '#06b6d4' },
+    { bg: 'bg-amber-100 text-amber-900 border-amber-400', badge: 'bg-amber-500 text-white' },
+    { bg: 'bg-emerald-100 text-emerald-900 border-emerald-400', badge: 'bg-emerald-500 text-white' },
+    { bg: 'bg-sky-100 text-sky-900 border-sky-400', badge: 'bg-sky-500 text-white' },
+    { bg: 'bg-purple-100 text-purple-900 border-purple-400', badge: 'bg-purple-500 text-white' },
+    { bg: 'bg-rose-100 text-rose-900 border-rose-400', badge: 'bg-rose-500 text-white' },
+    { bg: 'bg-indigo-100 text-indigo-900 border-indigo-400', badge: 'bg-indigo-500 text-white' },
+    { bg: 'bg-teal-100 text-teal-900 border-teal-400', badge: 'bg-teal-500 text-white' },
+    { bg: 'bg-yellow-100 text-yellow-900 border-yellow-400', badge: 'bg-yellow-500 text-white' },
+    { bg: 'bg-pink-100 text-pink-900 border-pink-400', badge: 'bg-pink-500 text-white' },
+    { bg: 'bg-cyan-100 text-cyan-900 border-cyan-400', badge: 'bg-cyan-500 text-white' },
 ];
-export function FindWordsInMatrixClient({ content, correctAnswer, showSolution = false, }) {
+function cleanWord(value) {
+    return (value || '').replace(/[\s\-_]/g, '').toUpperCase();
+}
+function getStraightLinePath(start, end) {
+    const dr = end.row - start.row;
+    const dc = end.col - start.col;
+    const stepR = dr === 0 ? 0 : dr > 0 ? 1 : -1;
+    const stepC = dc === 0 ? 0 : dc > 0 ? 1 : -1;
+    if (dr === 0 && dc !== 0) {
+        return Array.from({ length: Math.abs(dc) + 1 }, (_, i) => ({
+            row: start.row,
+            col: start.col + i * stepC,
+        }));
+    }
+    if (dc === 0 && dr !== 0) {
+        return Array.from({ length: Math.abs(dr) + 1 }, (_, i) => ({
+            row: start.row + i * stepR,
+            col: start.col,
+        }));
+    }
+    if (Math.abs(dr) === Math.abs(dc) && dr !== 0) {
+        return Array.from({ length: Math.abs(dr) + 1 }, (_, i) => ({
+            row: start.row + i * stepR,
+            col: start.col + i * stepC,
+        }));
+    }
+    return dr === 0 && dc === 0 ? [start] : [];
+}
+function readSelections(value) {
+    if (Array.isArray(value)) {
+        return value;
+    }
+    if (value && typeof value === 'object' && Array.isArray(value.words)) {
+        return value.words;
+    }
+    return [];
+}
+function pathLetters(grid, path) {
+    return path
+        .map((cell) => (grid[cell.row - 1]?.[cell.col - 1] || '').toUpperCase())
+        .join('');
+}
+export function FindWordsInMatrixClient({ content, correctAnswer, showSolution = false, userAnswer, onAnswerChange, }) {
     const rows = content.gridSize?.rows || content.grid?.length || 14;
     const cols = content.gridSize?.cols || content.grid?.[0]?.length || 14;
     const grid = content.grid || [];
     const wordBank = content.wordBank || [];
     const isCategorize = content.type === 'CATEGORIZE' && Array.isArray(content.categories) && content.categories.length > 0;
     const categories = content.categories || [];
-    // Build cell highlight map
-    const cellColorMap = {};
-    // Example selection
-    if (content.exampleSelection?.path) {
-        for (const c of content.exampleSelection.path) {
-            cellColorMap[`${c.row}-${c.col}`] = { colorIdx: 0, word: 'Example' };
+    const canSelect = !showSolution && Boolean(onAnswerChange);
+    const selections = readSelections(userAnswer);
+    const [activeWordId, setActiveWordId] = useState(null);
+    const [anchor, setAnchor] = useState(null);
+    const playableWords = wordBank.filter((word) => !word.isExample);
+    const activeWord = playableWords.find((word) => word.id === activeWordId) ||
+        playableWords.find((word) => !selections.some((selection) => selection.wordId === word.id || cleanWord(selection.word) === cleanWord(word.word))) ||
+        null;
+    const cellColorMap = useMemo(() => {
+        const map = {};
+        if (content.exampleSelection?.path) {
+            for (const cell of content.exampleSelection.path) {
+                map[`${cell.row}-${cell.col}`] = { colorIdx: 0, word: 'Example' };
+            }
         }
-    }
-    // Solution paths if visible
-    if (showSolution && correctAnswer?.words) {
-        correctAnswer.words.forEach((item, idx) => {
-            const colorIdx = (idx + 1) % WORD_COLORS.length;
-            item.path?.forEach((c) => {
-                cellColorMap[`${c.row}-${c.col}`] = { colorIdx, word: item.word || item.wordId };
+        const source = showSolution && correctAnswer?.words ? correctAnswer.words : selections;
+        source.forEach((item, index) => {
+            const colorIdx = (index + 1) % WORD_COLORS.length;
+            item.path?.forEach((cell) => {
+                map[`${cell.row}-${cell.col}`] = {
+                    colorIdx,
+                    word: item.word || item.wordId || '',
+                };
             });
         });
-    }
-    return (_jsxs("div", { className: "space-y-3", children: [content.title && (_jsx("h3", { className: "text-lg font-bold text-gray-800 dark:text-gray-100", children: content.title })), isCategorize ? (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4", children: categories.map((cat) => {
-                    const wordsInCat = wordBank.filter((w) => w.categoryId === cat.id);
-                    return (_jsxs(Card, { className: "p-3.5 bg-gray-50/70 dark:bg-gray-800/40 border", children: [_jsxs("div", { className: "font-bold text-sm text-gray-800 dark:text-gray-200 border-b pb-1.5 mb-2.5 flex items-center justify-between", children: [_jsx("span", { children: cat.name }), _jsx(Badge, { variant: "outline", className: "text-xs", children: wordsInCat.length })] }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: wordsInCat.map((w, idx) => {
-                                    const isExample = Boolean(w.isExample);
-                                    return (_jsxs(Badge, { variant: "outline", className: `px-2.5 py-1 text-xs font-medium ${isExample
-                                            ? 'line-through bg-amber-50 text-amber-800 border-amber-300'
-                                            : 'bg-white dark:bg-gray-800'}`, children: [w.word, isExample && _jsx("span", { className: "ml-1 text-amber-600 font-bold", children: "(Ex)" })] }, w.id || idx));
-                                }) })] }, cat.id));
-                }) })) : (_jsxs(Card, { className: "p-4 bg-gray-50 dark:bg-gray-800/50 border-dashed border-2", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3 flex items-center gap-2", children: _jsxs("span", { children: ["Word Bank (", wordBank.length, " words)"] }) }), _jsx("div", { className: "flex flex-wrap gap-2", children: wordBank.map((w, idx) => {
-                            const isExample = Boolean(w.isExample);
-                            return (_jsxs(Badge, { variant: "outline", className: `px-3 py-1.5 text-sm font-medium transition-all ${isExample
-                                    ? 'line-through bg-amber-50 text-amber-800 border-amber-300'
-                                    : 'bg-white dark:bg-gray-800 hover:shadow-sm'}`, children: [w.word, isExample && (_jsx("span", { className: "ml-1.5 text-xs text-amber-600 font-bold no-underline", children: "(Example)" }))] }, w.id || idx));
-                        }) })] })), _jsx("div", { className: "overflow-x-auto pb-2 flex justify-center", children: _jsx("div", { className: "inline-grid gap-1 p-3 bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-800", style: {
-                        gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
-                    }, children: Array.from({ length: rows }).map((_, rIdx) => {
+        return map;
+    }, [content.exampleSelection, correctAnswer?.words, selections, showSolution]);
+    const emit = (next) => {
+        onAnswerChange?.({ words: next });
+    };
+    const handleWordClick = (wordId) => {
+        if (!canSelect)
+            return;
+        const already = selections.find((selection) => selection.wordId === wordId);
+        if (already) {
+            emit(selections.filter((selection) => selection.wordId !== wordId));
+            setActiveWordId(null);
+            setAnchor(null);
+            return;
+        }
+        setActiveWordId(wordId);
+        setAnchor(null);
+    };
+    const handleCellClick = (row, col) => {
+        if (!canSelect || !activeWord)
+            return;
+        const cell = { row, col };
+        if (!anchor) {
+            setAnchor(cell);
+            return;
+        }
+        const path = getStraightLinePath(anchor, cell);
+        const letters = pathLetters(grid, path);
+        const target = cleanWord(activeWord.word);
+        const matched = letters === target || [...letters].reverse().join('') === target;
+        setAnchor(null);
+        if (!matched || path.length === 0) {
+            setAnchor(cell);
+            return;
+        }
+        emit([
+            ...selections.filter((selection) => selection.wordId !== activeWord.id && cleanWord(selection.word) !== target),
+            {
+                wordId: activeWord.id,
+                word: activeWord.word,
+                categoryId: activeWord.categoryId,
+                path,
+            },
+        ]);
+        setActiveWordId(null);
+    };
+    const renderWordBadge = (word, index) => {
+        const isExample = Boolean(word.isExample);
+        const isFound = selections.some((selection) => selection.wordId === word.id || cleanWord(selection.word) === cleanWord(word.word));
+        const isActive = activeWord?.id === word.id;
+        return (_jsxs("button", { type: "button", disabled: !canSelect || isExample, onClick: () => handleWordClick(word.id), className: `rounded-full border px-3 py-1.5 text-sm font-medium ${isExample
+                ? 'border-amber-300 bg-amber-50 text-amber-800 line-through'
+                : isFound
+                    ? 'border-emerald-400 bg-emerald-50 text-emerald-800'
+                    : isActive
+                        ? 'border-blue-500 bg-blue-50 text-blue-800'
+                        : 'border-gray-200 bg-white'}`, children: [word.word, isExample ? _jsx("span", { className: "ml-1 font-bold", children: "(Ex)" }) : null] }, word.id || index));
+    };
+    return (_jsxs("div", { className: "space-y-3", children: [content.title && (_jsx("h3", { className: "text-lg font-bold text-gray-800 dark:text-gray-100", children: content.title })), canSelect ? (_jsx("p", { className: "text-xs text-slate-500", children: "Ch\u1ECDn t\u1EEB trong word bank, r\u1ED3i b\u1EA5m \u00F4 \u0111\u1EA7u v\u00E0 \u00F4 cu\u1ED1i tr\u00EAn l\u01B0\u1EDBi." })) : null, isCategorize ? (_jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3", children: categories.map((cat) => {
+                    const wordsInCat = wordBank.filter((word) => word.categoryId === cat.id);
+                    return (_jsxs(Card, { className: "border bg-gray-50/70 p-3.5", children: [_jsxs("div", { className: "mb-2.5 flex items-center justify-between border-b pb-1.5 text-sm font-bold", children: [_jsx("span", { children: cat.name }), _jsx(Badge, { variant: "outline", className: "text-xs", children: wordsInCat.length })] }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: wordsInCat.map((word, index) => renderWordBadge(word, index)) })] }, cat.id));
+                }) })) : (_jsxs(Card, { className: "border-2 border-dashed bg-gray-50 p-4", children: [_jsxs("div", { className: "mb-3 text-xs font-semibold uppercase tracking-wider text-gray-500", children: ["Word Bank (", wordBank.length, " words)"] }), _jsx("div", { className: "flex flex-wrap gap-2", children: wordBank.map((word, index) => renderWordBadge(word, index)) })] })), _jsx("div", { className: "flex justify-center overflow-x-auto pb-2", children: _jsx("div", { className: "inline-grid gap-1 rounded-xl border border-gray-200 bg-white p-3 shadow-sm", style: { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }, children: Array.from({ length: rows }).map((_, rIdx) => {
                         const r = rIdx + 1;
                         return Array.from({ length: cols }).map((_, cIdx) => {
                             const c = cIdx + 1;
                             const char = grid[rIdx]?.[cIdx] || '';
                             const highlight = cellColorMap[`${r}-${c}`];
                             const colorConfig = highlight ? WORD_COLORS[highlight.colorIdx] : null;
-                            return (_jsx("div", { className: `h-9 w-9 sm:h-11 sm:w-11 flex items-center justify-center font-bold text-sm sm:text-base select-none rounded-md transition-colors border ${colorConfig
-                                    ? `${colorConfig.bg} font-extrabold shadow-sm scale-95`
-                                    : 'border-gray-100 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/30 text-gray-700 dark:text-gray-300'}`, title: highlight ? `${highlight.word} (${r},${c})` : `(${r},${c})`, children: char || '·' }, `${r}-${c}`));
+                            const isAnchor = anchor?.row === r && anchor?.col === c;
+                            return (_jsx("button", { type: "button", disabled: !canSelect, onClick: () => handleCellClick(r, c), className: `flex h-9 w-9 items-center justify-center rounded-md border text-sm font-bold sm:h-11 sm:w-11 sm:text-base ${colorConfig
+                                    ? `${colorConfig.bg} shadow-sm`
+                                    : isAnchor
+                                        ? 'border-blue-500 bg-blue-50 text-blue-800'
+                                        : 'border-gray-100 bg-gray-50/50 text-gray-700'}`, title: highlight ? `${highlight.word} (${r},${c})` : `(${r},${c})`, children: char || '·' }, `${r}-${c}`));
                         });
                     }) }) })] }));
 }

package/dist/components/questions/types/spontaneous-qa-group/SpontaneousQaGroupClient.d.ts

@@ -1,2 +1,2 @@
 import type { SpontaneousQaGroupClientProps } from '../../_shared/types/spontaneous-qa-group.type';
-export declare function SpontaneousQaGroupClient({ questionData, }: SpontaneousQaGroupClientProps): import("react").JSX.Element;
+export declare function SpontaneousQaGroupClient({ questionData, isReviewMode, }: SpontaneousQaGroupClientProps): import("react").JSX.Element;

package/dist/components/questions/types/spontaneous-qa-group/SpontaneousQaGroupClient.js

@@ -1,9 +1,85 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CircleHelp, Lightbulb } from 'lucide-react';
-export function SpontaneousQaGroupClient({ questionData, }) {
+import { useEffect, useRef, useState } from 'react';
+import { CircleHelp, Lightbulb, Mic, Square, Volume2 } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+function QuestionAudio({ url }) {
+    const { previewUrl, isLoading } = usePresignedFileUrl(url);
+    const src = previewUrl ||
+        (url.startsWith('http') || url.startsWith('blob:') ? url : '');
+    if (!src && !isLoading) {
+        return null;
+    }
+    return (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2", children: [_jsx(Volume2, { className: "h-4 w-4 shrink-0 text-blue-500" }), isLoading ? (_jsx("div", { className: "h-8 flex-1 animate-pulse rounded-md bg-blue-100" })) : (_jsx("audio", { controls: true, src: src, className: "h-8 w-full", preload: "metadata", children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." }))] }));
+}
+function SpeakingReplyMic() {
+    const [status, setStatus] = useState('idle');
+    const [error, setError] = useState('');
+    const [blobUrl, setBlobUrl] = useState('');
+    const recorderRef = useRef(null);
+    const chunksRef = useRef([]);
+    const streamRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            recorderRef.current?.stop();
+            streamRef.current?.getTracks().forEach((track) => track.stop());
+            if (blobUrl) {
+                URL.revokeObjectURL(blobUrl);
+            }
+        };
+    }, [blobUrl]);
+    const stopStream = () => {
+        streamRef.current?.getTracks().forEach((track) => track.stop());
+        streamRef.current = null;
+    };
+    const startRecording = async () => {
+        setError('');
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            streamRef.current = stream;
+            chunksRef.current = [];
+            const recorder = new MediaRecorder(stream);
+            recorderRef.current = recorder;
+            recorder.ondataavailable = (event) => {
+                if (event.data.size > 0) {
+                    chunksRef.current.push(event.data);
+                }
+            };
+            recorder.onstop = () => {
+                const blob = new Blob(chunksRef.current, { type: recorder.mimeType || 'audio/webm' });
+                setBlobUrl((current) => {
+                    if (current) {
+                        URL.revokeObjectURL(current);
+                    }
+                    return URL.createObjectURL(blob);
+                });
+                setStatus('recorded');
+                stopStream();
+            };
+            recorder.start();
+            setStatus('recording');
+        }
+        catch {
+            setError('Không thể mở microphone. Hãy cho phép quyền ghi âm.');
+            stopStream();
+        }
+    };
+    const stopRecording = () => {
+        if (recorderRef.current && recorderRef.current.state !== 'inactive') {
+            recorderRef.current.stop();
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col items-center gap-2 rounded-lg border border-dashed border-indigo-200 bg-indigo-50/60 px-4 py-3", children: [_jsx("button", { type: "button", onClick: status === 'recording' ? stopRecording : startRecording, title: status === 'recording' ? 'Dừng ghi âm' : 'Nhấn micro để trả lời', className: `inline-flex h-12 w-12 items-center justify-center rounded-full text-white shadow-sm transition-colors ${status === 'recording'
+                    ? 'animate-pulse bg-red-500 hover:bg-red-600'
+                    : 'bg-indigo-600 hover:bg-indigo-700'}`, children: status === 'recording' ? _jsx(Square, { className: "h-4 w-4 fill-current" }) : _jsx(Mic, { className: "h-5 w-5" }) }), _jsx("p", { className: "text-center text-xs text-indigo-700", children: status === 'recording'
+                    ? 'Đang ghi âm... Nhấn để dừng'
+                    : status === 'recorded'
+                        ? 'Đã ghi. Nhấn micro để ghi lại'
+                        : 'Nhấn micro để trả lời bằng giọng nói' }), error && _jsx("p", { className: "text-center text-xs text-red-600", children: error }), status === 'recorded' && blobUrl && (_jsx("audio", { controls: true, src: blobUrl, className: "h-8 w-full max-w-sm", preload: "metadata", children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." }))] }));
+}
+export function SpontaneousQaGroupClient({ questionData, isReviewMode = false, }) {
     const parts = questionData.parts || [];
-    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 })), parts.map((part, partIndex) => (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "border-b border-gray-100 bg-gradient-to-r from-slate-50 to-white px-3 py-2", children: [_jsx("p", { className: "text-sm font-semibold text-slate-800", children: part.partTitle || `PART ${part.partNumber || partIndex + 1}` }), part.topic && (_jsx("p", { className: "mt-1 text-sm text-slate-600", children: part.topic }))] }), _jsx("div", { className: "space-y-3 p-3", children: part.questions.map((question, questionIndex) => (_jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-3", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-blue-100 text-blue-700", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", question.questionNumber || questionIndex + 1] })] }), _jsxs("span", { className: "text-xs text-gray-500", children: [question.points || 0, " \u0111i\u1EC3m"] })] }), _jsx("p", { className: "text-sm font-semibold text-gray-800", children: question.questionText || 'Câu hỏi chưa được nhập' }), question.expectedAnswers.filter((item) => item.trim() !== '').length > 0 && (_jsxs("div", { className: "mt-2 rounded-lg border border-amber-100 bg-amber-50 px-3 py-2", children: [_jsxs("div", { className: "mb-1 flex items-center gap-1 text-xs font-semibold text-amber-700", children: [_jsx(Lightbulb, { className: "h-3 w-3" }), "\u0110\u00E1p \u00E1n m\u1EABu"] }), _jsx("ul", { className: "list-disc space-y-1 pl-4 text-xs text-amber-800", children: question.expectedAnswers
+    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 })), parts.map((part, partIndex) => (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "border-b border-gray-100 bg-gradient-to-r from-slate-50 to-white px-3 py-2", children: [_jsx("p", { className: "text-sm font-semibold text-slate-800", children: part.partTitle || `PART ${part.partNumber || partIndex + 1}` }), part.topic && (_jsx("p", { className: "mt-1 text-sm text-slate-600", children: part.topic }))] }), _jsx("div", { className: "space-y-3 p-3", children: part.questions.map((question, questionIndex) => (_jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-3", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-blue-100 text-blue-700", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", question.questionNumber || questionIndex + 1] })] }), _jsxs("span", { className: "text-xs text-gray-500", children: [question.points || 0, " \u0111i\u1EC3m"] })] }), _jsx("p", { className: "text-sm font-semibold text-gray-800", children: question.questionText || 'Câu hỏi chưa được nhập' }), question.audioUrl ? _jsx("div", { className: "mt-2", children: _jsx(QuestionAudio, { url: question.audioUrl }) }) : null, _jsx("div", { className: "mt-3", children: _jsx(SpeakingReplyMic, {}) }), isReviewMode && question.expectedAnswers.filter((item) => item.trim() !== '').length > 0 && (_jsxs("div", { className: "mt-2 rounded-lg border border-amber-100 bg-amber-50 px-3 py-2", children: [_jsxs("div", { className: "mb-1 flex items-center gap-1 text-xs font-semibold text-amber-700", children: [_jsx(Lightbulb, { className: "h-3 w-3" }), "\u0110\u00E1p \u00E1n m\u1EABu"] }), _jsx("ul", { className: "list-disc space-y-1 pl-4 text-xs text-amber-800", children: question.expectedAnswers
                                                 .filter((item) => item.trim() !== '')
                                                 .map((item) => (_jsx("li", { children: item }, item))) })] }))] }, `${part.partNumber}-${question.questionNumber}-${questionIndex}`))) })] }, `part-${part.partNumber}-${partIndex}`)))] }));
 }

package/dist/components/questions/types/spontaneous-qa-group/index.d.ts

@@ -1,2 +1,3 @@
 export * from './SpontaneousQaGroupCreator';
 export * from './SpontaneousQaGroupClient';
+export * from './map-spontaneous-qa-group-data';

package/dist/components/questions/types/spontaneous-qa-group/index.js

@@ -1,2 +1,3 @@
 export * from './SpontaneousQaGroupCreator';
 export * from './SpontaneousQaGroupClient';
+export * from './map-spontaneous-qa-group-data';

package/dist/components/questions/types/spontaneous-qa-group/map-spontaneous-qa-group-data.d.ts

@@ -0,0 +1,2 @@
+import type { SpontaneousQaGroupData } from '../../_shared/types/spontaneous-qa-group.type';
+export declare function mapQuestionToSpontaneousQaGroupData(question: Record<string, unknown>): SpontaneousQaGroupData;

package/dist/components/questions/types/spontaneous-qa-group/map-spontaneous-qa-group-data.js

@@ -0,0 +1,74 @@
+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 asNumber(value, fallback) {
+    return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+}
+function normalizeExpectedAnswers(value) {
+    if (!Array.isArray(value)) {
+        return [];
+    }
+    return value
+        .filter((item) => typeof item === 'string')
+        .map((item) => item.trim())
+        .filter((item) => item !== '');
+}
+function mapQuestion(item, index) {
+    const record = asRecord(item);
+    const content = asRecord(record.content);
+    const correctAnswer = asRecord(record.correctAnswer);
+    return {
+        questionText: asString(content.questionText) ||
+            asString(content.question) ||
+            asString(record.questionText),
+        inputType: asString(content.inputType) === 'AUDIO' ? 'AUDIO' : 'TEXT',
+        audioUrl: asString(content.audioUrl),
+        expectedAnswers: normalizeExpectedAnswers(correctAnswer.expectedAnswers),
+        points: asNumber(record.points, 1),
+        questionNumber: asNumber(record.questionNumber, index + 1),
+    };
+}
+function mapPart(item, index) {
+    const record = asRecord(item);
+    const questions = Array.isArray(record.questions) ? record.questions : [];
+    return {
+        partNumber: asNumber(record.partNumber, index + 1),
+        partTitle: asString(record.partTitle, `PART ${index + 1}`),
+        topic: asString(record.topic),
+        questions: questions.length > 0
+            ? questions.map((question, questionIndex) => mapQuestion(question, questionIndex))
+            : [],
+    };
+}
+export function mapQuestionToSpontaneousQaGroupData(question) {
+    const content = asRecord(question.content);
+    const list = asRecord(question.spontaneousQAList ?? content.spontaneousQAList ?? content);
+    const itemsRaw = Array.isArray(list.items)
+        ? list.items
+        : Array.isArray(content.items)
+            ? content.items
+            : [];
+    const hasNestedParts = itemsRaw.some((item) => Array.isArray(asRecord(item).questions));
+    const parts = hasNestedParts
+        ? itemsRaw.map((item, index) => mapPart(item, index))
+        : [mapPart({
+                partNumber: 1,
+                partTitle: '',
+                topic: '',
+                questions: itemsRaw,
+            }, 0)];
+    return {
+        instruction: asString(asRecord(list.meta).instruction) ||
+            asString(asRecord(content.meta).instruction) ||
+            'Talk about the topic.',
+        parts,
+        explanation: asString(question.explanation),
+        points: parts.reduce((total, part) => (total + part.questions.reduce((partTotal, item) => partTotal + (item.points || 0), 0)), 0),
+    };
+}

package/dist/components/questions/types/true-false-correct-group/TrueFalseCorrectGroupClient.d.ts

@@ -1,2 +1,2 @@
 import type { TrueFalseCorrectGroupClientProps } from '../../_shared/types/true-false-correct-group.type';
-export declare function TrueFalseCorrectGroupClient({ questionData, isReviewMode, userAnswers, }: TrueFalseCorrectGroupClientProps): import("react").JSX.Element;
+export declare function TrueFalseCorrectGroupClient({ questionData, isReviewMode, userAnswers, onAnswerChange, }: TrueFalseCorrectGroupClientProps): import("react").JSX.Element;

package/dist/components/questions/types/true-false-correct-group/TrueFalseCorrectGroupClient.js

@@ -2,24 +2,46 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, CircleHelp, Lightbulb, Star, X } from 'lucide-react';
 import { cn } from '../../../../shared/lib/utils';
-export function TrueFalseCorrectGroupClient({ questionData, isReviewMode = false, userAnswers = [], }) {
+function emptyAnswer() {
+    return { isTrue: null, correction: '' };
+}
+export function TrueFalseCorrectGroupClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, }) {
     const items = questionData.items || [];
+    const emit = (itemIndex, nextItem) => {
+        const item = items[itemIndex];
+        if (isReviewMode || item?.isExample || !onAnswerChange) {
+            return;
+        }
+        const next = items.map((_, index) => userAnswers[index] ?? emptyAnswer());
+        next[itemIndex] = nextItem;
+        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) => {
-                const userValue = userAnswers[itemIndex];
                 const correctIsTrue = item.isTrue === true;
+                const userValue = item.isExample
+                    ? { isTrue: item.isTrue, correction: item.correction }
+                    : userAnswers[itemIndex];
+                const canSelect = !isReviewMode && !item.isExample && Boolean(onAnswerChange);
+                const showStudentCorrection = userValue?.isTrue === false || (isReviewMode && !correctIsTrue);
                 return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] }))] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-3", children: [_jsx("p", { className: "text-sm font-semibold leading-relaxed text-gray-800", children: item.question || 'Câu hỏi chưa được nhập' }), _jsx("div", { className: "flex items-center gap-3", children: [
                                         { value: true, label: 'True' },
                                         { value: false, label: 'False' },
                                     ].map((opt) => {
                                         const isCorrect = opt.value === correctIsTrue;
                                         const isSelected = userValue?.isTrue === opt.value;
-                                        return (_jsxs("div", { className: cn('flex flex-1 items-center justify-center gap-2 rounded-lg border-2 px-4 py-2 text-sm font-semibold transition-colors', isReviewMode && isCorrect
+                                        return (_jsxs("button", { type: "button", disabled: !canSelect, onClick: () => emit(itemIndex, {
+                                                isTrue: opt.value,
+                                                correction: opt.value ? '' : (userValue?.correction || ''),
+                                            }), className: cn('flex flex-1 items-center justify-center gap-2 rounded-lg border-2 px-4 py-2 text-sm font-semibold transition-colors', canSelect ? 'cursor-pointer hover:border-blue-300' : 'cursor-default', isReviewMode && isCorrect
                                                 ? 'border-green-500 bg-green-50 text-green-700'
                                                 : isReviewMode && isSelected && !isCorrect
                                                     ? 'border-red-500 bg-red-50 text-red-700'
                                                     : isSelected
                                                         ? 'border-blue-500 bg-blue-50 text-blue-700'
                                                         : 'border-gray-200 bg-white text-gray-700'), children: [opt.value ? _jsx(Check, { className: "h-4 w-4" }) : _jsx(X, { className: "h-4 w-4" }), _jsx("span", { children: opt.label })] }, String(opt.value)));
-                                    }) }), !correctIsTrue && (_jsxs("div", { className: "rounded-lg border border-amber-100 bg-amber-50/70 px-3 py-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-amber-800", children: "C\u00E2u \u0111\u00FAng" }), _jsx("p", { className: "mt-1 text-sm text-amber-900", children: item.correction || 'Chưa nhập câu sửa' }), isReviewMode && userValue && userValue.isTrue === false && (_jsxs("p", { className: "mt-2 text-xs text-slate-600", children: ["H\u1ECDc sinh: ", userValue.correction || '(trống)'] }))] }))] })] }, `${item.questionNumber}-${itemIndex}`));
+                                    }) }), showStudentCorrection && canSelect ? (_jsxs("div", { className: "rounded-lg border border-slate-200 bg-white px-3 py-2", children: [_jsx("label", { className: "mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500", children: "Correct the false sentence" }), _jsx("textarea", { value: userValue?.correction || '', onChange: (event) => emit(itemIndex, {
+                                                isTrue: false,
+                                                correction: event.target.value,
+                                            }), placeholder: "Write the correct sentence...", rows: 2, className: "w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800 outline-none ring-blue-200 focus:border-blue-400 focus:ring-2" })] })) : null, isReviewMode && !correctIsTrue ? (_jsxs("div", { className: "rounded-lg border border-amber-100 bg-amber-50/70 px-3 py-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-amber-800", children: "C\u00E2u \u0111\u00FAng" }), _jsx("p", { className: "mt-1 text-sm text-amber-900", children: item.correction || 'Chưa nhập câu sửa' }), userValue && userValue.isTrue === false ? (_jsxs("p", { className: "mt-2 text-xs text-slate-600", children: ["H\u1ECDc sinh: ", userValue.correction || '(trống)'] })) : null] })) : null] })] }, `${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/true-false-group/TrueFalseGroupClient.d.ts

@@ -1,2 +1,2 @@
 import type { TrueFalseGroupClientProps } from '../../_shared/types/true-false-group.type';
-export declare function TrueFalseGroupClient({ questionData, isReviewMode, userAnswers, }: TrueFalseGroupClientProps): import("react").JSX.Element;
+export declare function TrueFalseGroupClient({ questionData, isReviewMode, userAnswers, onAnswerChange, }: TrueFalseGroupClientProps): import("react").JSX.Element;

package/dist/components/questions/types/true-false-group/TrueFalseGroupClient.js

@@ -2,18 +2,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, CircleHelp, Lightbulb, Star, X } from 'lucide-react';
 import { cn } from '../../../../shared/lib/utils';
-export function TrueFalseGroupClient({ questionData, isReviewMode = false, userAnswers = [], }) {
+export function TrueFalseGroupClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, }) {
     const items = questionData.items || [];
+    const handleSelect = (itemIndex, value) => {
+        const item = items[itemIndex];
+        if (isReviewMode || item?.isExample || !onAnswerChange) {
+            return;
+        }
+        const next = items.map((_, index) => userAnswers[index]);
+        next[itemIndex] = value;
+        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) => {
-                const userValue = userAnswers[itemIndex];
+                const userValue = item.isExample ? item.correctAnswer : userAnswers[itemIndex];
                 const correctAnswer = item.correctAnswer;
+                const canSelect = !isReviewMode && !item.isExample && Boolean(onAnswerChange);
                 return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] }))] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-3", children: [_jsx("p", { className: "text-sm font-semibold leading-relaxed text-gray-800", children: item.question || 'Câu hỏi chưa được nhập' }), _jsx("div", { className: "flex items-center gap-3", children: [
                                         { value: true, label: 'True' },
                                         { value: false, label: 'False' },
                                     ].map((opt) => {
                                         const isCorrect = opt.value === correctAnswer;
                                         const isSelected = opt.value === userValue;
-                                        return (_jsxs("div", { className: cn('flex flex-1 items-center justify-center gap-2 rounded-lg border-2 px-4 py-2 text-sm font-semibold transition-colors', isReviewMode && isCorrect
+                                        return (_jsxs("button", { type: "button", disabled: !canSelect, onClick: () => handleSelect(itemIndex, opt.value), className: cn('flex flex-1 items-center justify-center gap-2 rounded-lg border-2 px-4 py-2 text-sm font-semibold transition-colors', canSelect ? 'cursor-pointer hover:border-blue-300' : 'cursor-default', isReviewMode && isCorrect
                                                 ? 'border-green-500 bg-green-50 text-green-700'
                                                 : isReviewMode && isSelected && !isCorrect
                                                     ? 'border-red-500 bg-red-50 text-red-700'

package/dist/components/questions/viewer/AnswerTheQuestionGroupViewer.d.ts

@@ -2,7 +2,8 @@ import type { Question } from '../../../shared/types/entities/question.types';
 type AnswerTheQuestionGroupViewerProps = {
     question: Question;
     isReviewMode?: boolean;
-    userAnswer?: string[];
+    userAnswer?: unknown;
+    onSubmitAnswer?: (answer: string[]) => void;
 };
-export declare function AnswerTheQuestionGroupViewer({ question, isReviewMode, userAnswer, }: AnswerTheQuestionGroupViewerProps): import("react").JSX.Element;
+export declare function AnswerTheQuestionGroupViewer({ question, isReviewMode, userAnswer, onSubmitAnswer, }: AnswerTheQuestionGroupViewerProps): import("react").JSX.Element;
 export {};

package/dist/components/questions/viewer/AnswerTheQuestionGroupViewer.js

@@ -2,10 +2,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AnswerTheQuestionGroupClient } from '../types/answer-the-question-group/AnswerTheQuestionGroupClient';
 import { mapQuestionToAnswerTheQuestionGroupData } from '../types/answer-the-question-group/map-answer-the-question-group-data';
-export function AnswerTheQuestionGroupViewer({ question, isReviewMode = false, userAnswer, }) {
+function readStringAnswers(value) {
+    if (Array.isArray(value)) {
+        return value.map((item) => String(item ?? ''));
+    }
+    if (value && typeof value === 'object' && Array.isArray(value.answer)) {
+        return value.answer.map((item) => String(item ?? ''));
+    }
+    return undefined;
+}
+export function AnswerTheQuestionGroupViewer({ question, isReviewMode = false, userAnswer, onSubmitAnswer, }) {
     const questionData = mapQuestionToAnswerTheQuestionGroupData(question);
-    const reviewAnswers = isReviewMode && !userAnswer
-        ? questionData.items.map((item) => item.expectedAnswers[0] || '')
-        : userAnswer;
-    return (_jsx(AnswerTheQuestionGroupClient, { questionData: questionData, isReviewMode: isReviewMode, userAnswers: reviewAnswers }));
+    const storedAnswers = readStringAnswers(userAnswer);
+    return (_jsx(AnswerTheQuestionGroupClient, { questionData: questionData, isReviewMode: isReviewMode, userAnswers: storedAnswers, onAnswerChange: isReviewMode ? undefined : onSubmitAnswer }));
 }

package/dist/components/questions/viewer/ChooseThenAnswerGroupViewer.d.ts

@@ -1,9 +1,10 @@
 import type { Question } from '../../../shared/types/entities/question.types';
-import type { ChooseThenAnswerStudentItemAnswer } from '../_shared/types/choose-then-answer-group.type';
-export declare function ChooseThenAnswerGroupViewer({ question, isReviewMode, userAnswer, onSubmitAnswer, }: {
+import type { ChooseThenAnswerGradeDetail, ChooseThenAnswerStudentItemAnswer } from '../_shared/types/choose-then-answer-group.type';
+export declare function ChooseThenAnswerGroupViewer({ question, isReviewMode, userAnswer, gradeDetails, onSubmitAnswer, }: {
     question: Question;
     isReviewMode?: boolean;
     userAnswer?: unknown;
+    gradeDetails?: ChooseThenAnswerGradeDetail[];
     onSubmitAnswer?: (answer: {
         answer: ChooseThenAnswerStudentItemAnswer[];
     }) => void;

package/dist/components/questions/viewer/ChooseThenAnswerGroupViewer.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { ChooseThenAnswerGroupClient } from '../types/choose-then-answer-group/ChooseThenAnswerGroupClient';
-import { mapQuestionToChooseThenAnswerGroupData, parseStudentAnswer, } from '../types/choose-then-answer-group/map-choose-then-answer-group-data';
+import { mapQuestionToChooseThenAnswerGroupData, parseStudentAnswer, toCtaItemResults, } from '../types/choose-then-answer-group/map-choose-then-answer-group-data';
 function readStudentAnswers(value, itemCount) {
     const record = value && typeof value === 'object' && !Array.isArray(value)
         ? value
@@ -16,7 +16,7 @@ function readStudentAnswers(value, itemCount) {
         return undefined;
     return Array.from({ length: itemCount }, (_, index) => parseStudentAnswer(raw[index]));
 }
-export function ChooseThenAnswerGroupViewer({ question, isReviewMode = false, userAnswer, onSubmitAnswer, }) {
+export function ChooseThenAnswerGroupViewer({ question, isReviewMode = false, userAnswer, gradeDetails, onSubmitAnswer, }) {
     const questionData = mapQuestionToChooseThenAnswerGroupData(question);
     const seed = questionData.items.map((item) => ({
         optionId: item.isExample ? item.optionId : '',
@@ -35,5 +35,6 @@ export function ChooseThenAnswerGroupViewer({ question, isReviewMode = false, us
         setLocalAnswers(updated);
         onSubmitAnswer?.({ answer: updated });
     };
-    return (_jsx(ChooseThenAnswerGroupClient, { questionData: questionData, isReviewMode: isReviewMode, userAnswers: isReviewMode && !parsedUser ? undefined : (parsedUser ?? localAnswers), onAnswerChange: isReviewMode ? undefined : handleChange }));
+    const displayedAnswers = isReviewMode && !parsedUser ? [] : (parsedUser ?? localAnswers);
+    return (_jsx(ChooseThenAnswerGroupClient, { questionData: questionData, isReviewMode: isReviewMode, userAnswers: isReviewMode && !parsedUser ? undefined : displayedAnswers, itemResults: toCtaItemResults(gradeDetails, questionData.items, displayedAnswers), onAnswerChange: isReviewMode ? undefined : handleChange }));
 }

package/dist/components/questions/viewer/CrossOutWordGroupViewer.d.ts

@@ -2,6 +2,8 @@ import type { Question } from '../../../shared/types/entities/question.types';
 type CrossOutWordGroupViewerProps = {
     question: Question;
     isReviewMode?: boolean;
+    userAnswer?: unknown;
+    onSubmitAnswer?: (answer: unknown[]) => void;
 };
-export declare function CrossOutWordGroupViewer({ question, isReviewMode, }: CrossOutWordGroupViewerProps): import("react").JSX.Element;
+export declare function CrossOutWordGroupViewer({ question, isReviewMode, userAnswer, onSubmitAnswer, }: CrossOutWordGroupViewerProps): import("react").JSX.Element;
 export {};