@tinyweb_dev/oe-exam-sdk 1.0.8 → 1.0.9

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

@@ -28,6 +28,16 @@ export function createEmptyOption(existingIds) {
         text: '',
     };
 }
+export function normalizeExpectedAnswers(value) {
+    if (!Array.isArray(value)) {
+        return [''];
+    }
+    const filled = value
+        .filter((item) => typeof item === 'string')
+        .map((item) => item.trim())
+        .filter((item) => item !== '');
+    return filled.length > 0 ? filled : [''];
+}
 export function createEmptyItem(questionNumber) {
     const first = createEmptyOption([]);
     const second = createEmptyOption([first.id]);
@@ -35,6 +45,7 @@ export function createEmptyItem(questionNumber) {
         question: '',
         options: [first, second],
         optionId: first.id,
+        expectedAnswers: [''],
         isExample: false,
         points: 1,
         questionNumber,
@@ -42,8 +53,11 @@ export function createEmptyItem(questionNumber) {
 }
 export function parseItemAnswer(raw) {
     if (!isRecord(raw))
-        return { optionId: '' };
-    return { optionId: asString(raw.optionId) };
+        return { optionId: '', expectedAnswers: [''] };
+    return {
+        optionId: asString(raw.optionId),
+        expectedAnswers: normalizeExpectedAnswers(raw.expectedAnswers),
+    };
 }
 export function parseStudentAnswer(raw) {
     if (!isRecord(raw))
@@ -78,6 +92,7 @@ export function mapApiItem(item, index, fallbackAnswer) {
         question: asString(content.question) || asString(record.question),
         options,
         optionId: parsed.optionId || options[0]?.id || '',
+        expectedAnswers: parsed.expectedAnswers,
         isExample,
         points: isExample ? 0 : (typeof record.points === 'number' ? record.points : 1),
         questionNumber: typeof record.questionNumber === 'number' ? record.questionNumber : index + 1,
@@ -125,3 +140,25 @@ export function mapQuestionToChooseThenAnswerGroupData(question) {
         points: 1,
     };
 }
+export function toCtaItemResults(details, items, userAnswers) {
+    if (!details?.length) {
+        return undefined;
+    }
+    const byId = new Map(details.map((detail) => [detail.itemId, detail]));
+    return items.map((item, index) => {
+        const detail = byId.get(`item-${index}`);
+        const mappingCorrect = Boolean(item.optionId) && userAnswers[index]?.optionId === item.optionId;
+        const half = (typeof item.points === 'number' ? item.points : 1) * 0.5;
+        let aiCorrect;
+        if (detail?.partialScore != null) {
+            const mappingHalf = mappingCorrect ? half : 0;
+            aiCorrect = detail.partialScore - mappingHalf > 1e-9;
+        }
+        return {
+            mappingCorrect,
+            aiCorrect,
+            partialScore: detail?.partialScore,
+            feedback: detail?.feedback,
+        };
+    });
+}

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

@@ -1,5 +1,8 @@
 import { CHOOSE_THEN_ANSWER_GROUP_DEFAULT_INSTRUCTION, CHOOSE_THEN_ANSWER_ITEM_TYPE, } from '../../_shared/types/choose-then-answer-group.type';
 import { sumGradablePoints } from './map-choose-then-answer-group-data';
+function filledExpectedAnswers(values) {
+    return (values || []).map((value) => value.trim()).filter((value) => value !== '');
+}
 export const transformChooseThenAnswerGroup = (question) => {
     const answerData = question.answer;
     const items = Array.isArray(answerData?.items) ? answerData.items : [];
@@ -7,25 +10,35 @@ export const transformChooseThenAnswerGroup = (question) => {
         return { apiContent: { items: [] }, apiCorrectAnswer: { answer: [] } };
     }
     const title = typeof answerData?.title === 'string' ? answerData.title.trim() : '';
-    const apiItems = items.map((item, index) => ({
-        questionType: CHOOSE_THEN_ANSWER_ITEM_TYPE,
-        ...(item.isExample ? { isExample: true } : {}),
-        content: {
-            question: item.question || '',
-            options: (item.options || []).map((option) => ({
-                id: option.id || '',
-                text: option.text || '',
-            })),
-        },
-        correctAnswer: { answer: { optionId: item.optionId || '' } },
-        points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
-        questionNumber: item.questionNumber || index + 1,
-    }));
+    const apiItems = items.map((item, index) => {
+        const expectedAnswers = filledExpectedAnswers(item.expectedAnswers);
+        return {
+            questionType: CHOOSE_THEN_ANSWER_ITEM_TYPE,
+            ...(item.isExample ? { isExample: true } : {}),
+            content: {
+                question: item.question || '',
+                options: (item.options || []).map((option) => ({
+                    id: option.id || '',
+                    text: option.text || '',
+                })),
+            },
+            correctAnswer: {
+                answer: {
+                    optionId: item.optionId || '',
+                    ...(expectedAnswers.length > 0 ? { expectedAnswers } : {}),
+                },
+            },
+            points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+            questionNumber: item.questionNumber || index + 1,
+        };
+    });
     return {
         apiContent: {
             meta: {
                 instruction: answerData?.instruction || CHOOSE_THEN_ANSWER_GROUP_DEFAULT_INSTRUCTION,
                 ...(title ? { title } : {}),
+                gradingType: 'AI',
+                isAiGraded: true,
             },
             items: apiItems,
         },

package/dist/components/questions/types/cross-out-word-group/CrossOutWordGroupClient.d.ts

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

package/dist/components/questions/types/cross-out-word-group/CrossOutWordGroupClient.js

@@ -2,6 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CircleHelp, Lightbulb, Star } from 'lucide-react';
 import { cn } from '../../../../shared/lib/utils';
+function tokenize(sentence) {
+    return sentence.trim().split(/\s+/).filter(Boolean);
+}
+function normalizeWord(word) {
+    return word.replace(/[^\p{L}\p{N}'-]/gu, '').toLowerCase();
+}
 function formatAnswer(answer) {
     if (!answer)
         return '—';
@@ -15,13 +21,58 @@ function formatAnswer(answer) {
         return 'câu đúng (không gạch)';
     return `gạch "${answer.crossOut}"${posInfo}`;
 }
-export function CrossOutWordGroupClient({ questionData, isReviewMode = false, userAnswers = [], }) {
+export function CrossOutWordGroupClient({ 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] ?? null);
+        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 isReplace = item.type === 'CROSS_OUT_AND_REPLACE';
+                const userValue = item.isExample ? item.correctAnswer : userAnswers[itemIndex];
+                const canSelect = !isReviewMode && !item.isExample && Boolean(onAnswerChange);
+                const tokens = tokenize(item.question || '');
+                const selectedIndex = userValue?.wordIndex;
+                const selectedWord = userValue?.crossOut || '';
+                const replaceWith = userValue?.replaceWith || '';
+                const correct = item.correctAnswer;
                 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"] })), _jsx("span", { className: cn('rounded-full px-2 py-0.5 text-xs font-semibold', isReplace
                                                 ? 'bg-violet-100 text-violet-700'
-                                                : 'bg-sky-100 text-sky-700'), children: isReplace ? 'Gạch + thay' : 'Chỉ gạch' })] }), _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' }), _jsxs("div", { className: "rounded-lg border border-gray-100 bg-gray-50 px-3 py-2 text-sm text-gray-700", children: [_jsx("span", { className: "font-medium text-gray-500", children: "\u0110\u00E1p \u00E1n: " }), formatAnswer(item.correctAnswer)] }), isReviewMode && (_jsxs("div", { className: "rounded-lg border border-blue-100 bg-blue-50 px-3 py-2 text-sm text-blue-800", children: [_jsx("span", { className: "font-medium", children: "H\u1ECDc sinh: " }), formatAnswer(userValue)] }))] })] }, `${item.questionNumber}-${itemIndex}`));
+                                                : 'bg-sky-100 text-sky-700'), children: isReplace ? 'Gạch + thay' : 'Chỉ gạch' })] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-3", children: [isReplace ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { className: "text-xs font-semibold text-slate-600", children: "T\u1EEB \u0111\u00FAng:" }), _jsx("input", { type: "text", value: replaceWith, disabled: !canSelect, onChange: (event) => emit(itemIndex, {
+                                                type: item.type,
+                                                wordIndex: selectedIndex ?? null,
+                                                crossOut: selectedWord,
+                                                replaceWith: event.target.value,
+                                            }), placeholder: "Nh\u1EADp t\u1EEB thay th\u1EBF...", className: "h-8 min-w-[10rem] rounded-lg border border-slate-200 px-2.5 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 disabled:bg-slate-50" })] })) : null, _jsx("div", { className: "flex flex-wrap items-center gap-1.5 text-sm font-medium leading-relaxed text-slate-800", children: tokens.map((token, tokenIndex) => {
+                                        const plain = normalizeWord(token);
+                                        const isSelected = typeof selectedIndex === 'number'
+                                            ? selectedIndex === tokenIndex
+                                            : Boolean(selectedWord) && normalizeWord(selectedWord) === plain && plain !== '';
+                                        const isCorrectTarget = isReviewMode && !item.isExample && correct?.wordIndex === tokenIndex;
+                                        return (_jsx("button", { type: "button", disabled: !canSelect || plain === '', onClick: () => {
+                                                const already = typeof selectedIndex === 'number'
+                                                    ? selectedIndex === tokenIndex
+                                                    : selectedWord === token;
+                                                emit(itemIndex, {
+                                                    type: item.type,
+                                                    wordIndex: already ? null : tokenIndex,
+                                                    crossOut: already
+                                                        ? ''
+                                                        : token.replace(/[^\p{L}\p{N}'-]/gu, '') || token,
+                                                    ...(isReplace ? { replaceWith } : {}),
+                                                });
+                                            }, className: cn('rounded-lg px-2 py-1 transition-colors', isSelected
+                                                ? 'border border-blue-200 bg-blue-100 font-bold text-blue-700 line-through decoration-blue-600'
+                                                : isCorrectTarget
+                                                    ? 'border-2 border-dashed border-emerald-500 bg-emerald-50 font-bold text-emerald-800'
+                                                    : canSelect
+                                                        ? 'cursor-pointer hover:bg-blue-50 hover:text-blue-700'
+                                                        : 'cursor-default'), children: token }, `${item.questionNumber}-token-${tokenIndex}`));
+                                    }) }), isReviewMode ? (_jsxs("div", { className: "rounded-lg border border-emerald-100 bg-emerald-50 px-3 py-2 text-sm text-emerald-800", children: [_jsx("span", { className: "font-medium", children: "\u0110\u00E1p \u00E1n: " }), formatAnswer(item.correctAnswer)] })) : 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/crossword-puzzle/CrosswordPuzzleClient.d.ts

@@ -7,5 +7,5 @@ interface CrosswordPuzzleClientProps {
     userAnswers?: Record<string, string>;
     onAnswerChange?: (key: string, value: string) => void;
 }
-export declare function CrosswordPuzzleClient({ content, correctAnswer, isReviewMode, userAnswers, }: CrosswordPuzzleClientProps): React.JSX.Element;
+export declare function CrosswordPuzzleClient({ content, correctAnswer, isReviewMode, userAnswers, onAnswerChange, }: CrosswordPuzzleClientProps): React.JSX.Element;
 export {};

package/dist/components/questions/types/crossword-puzzle/CrosswordPuzzleClient.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
-export function CrosswordPuzzleClient({ content, correctAnswer, isReviewMode = false, userAnswers = {}, }) {
+export function CrosswordPuzzleClient({ content, correctAnswer, isReviewMode = false, userAnswers = {}, onAnswerChange, }) {
     const rows = content?.gridSize?.rows || 12;
     const cols = content?.gridSize?.cols || 12;
     const acrossClues = useMemo(() => content?.clues?.across || [], [content?.clues?.across]);
@@ -33,11 +33,11 @@ export function CrosswordPuzzleClient({ content, correctAnswer, isReviewMode = f
     return (_jsxs("div", { className: "flex flex-col gap-3 p-3 bg-white rounded-xl border border-gray-200 shadow-sm", children: [content?.title && (_jsx("h3", { className: "text-lg font-bold text-gray-800 text-center", children: content.title })), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-6 items-start", children: [_jsxs("div", { className: "lg:col-span-5 flex flex-col gap-4", children: [_jsxs("div", { className: "rounded-lg border border-blue-200 bg-blue-50/50 p-4", children: [_jsxs("h4", { className: "font-bold text-blue-900 mb-2.5 flex items-center gap-2", children: [_jsx("span", { className: "px-2 py-0.5 rounded bg-blue-600 text-white text-xs font-semibold", children: "Across" }), _jsx("span", { children: "H\u00E0ng ngang" })] }), _jsx("div", { className: "flex flex-col gap-2 max-h-60 overflow-y-auto pr-1", children: acrossClues.map((c) => {
                                             const answer = correctAnswer?.answers?.[`across-${c.number}`];
                                             const userAns = userAnswers[`across-${c.number}`];
-                                            return (_jsxs("div", { className: "flex items-start gap-2 text-sm bg-white p-2 rounded border border-blue-100", children: [_jsxs("span", { className: "font-bold text-blue-700 min-w-[20px]", children: [c.number, "."] }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-gray-800", children: c.clue }), isReviewMode && answer && (_jsxs("div", { className: "text-xs mt-1", children: [_jsx("span", { className: "text-gray-500", children: "\u0110\u00E1p \u00E1n: " }), _jsx("span", { className: "font-bold text-green-700", children: answer }), userAns && userAns !== answer && (_jsx("span", { className: "ml-2 line-through text-red-500 font-semibold", children: userAns }))] }))] }), _jsxs("span", { className: "text-xs text-gray-400", children: ["(", c.length, " ch\u1EEF)"] })] }, `across-${c.number}`));
+                                            return (_jsxs("div", { className: "flex items-start gap-2 text-sm bg-white p-2 rounded border border-blue-100", children: [_jsxs("span", { className: "font-bold text-blue-700 min-w-[20px]", children: [c.number, "."] }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-gray-800", children: c.clue }), !isReviewMode && onAnswerChange ? (_jsx("input", { type: "text", value: userAns || '', maxLength: c.length, onChange: (event) => onAnswerChange(`across-${c.number}`, event.target.value.toUpperCase()), placeholder: `${c.length} chữ`, className: "mt-1.5 w-full rounded border border-blue-200 px-2 py-1 text-sm font-semibold uppercase tracking-wider outline-none focus:border-blue-500" })) : null, isReviewMode && answer && (_jsxs("div", { className: "text-xs mt-1", children: [_jsx("span", { className: "text-gray-500", children: "\u0110\u00E1p \u00E1n: " }), _jsx("span", { className: "font-bold text-green-700", children: answer }), userAns && userAns !== answer && (_jsx("span", { className: "ml-2 line-through text-red-500 font-semibold", children: userAns }))] }))] }), _jsxs("span", { className: "text-xs text-gray-400", children: ["(", c.length, " ch\u1EEF)"] })] }, `across-${c.number}`));
                                         }) })] }), _jsxs("div", { className: "rounded-lg border border-purple-200 bg-purple-50/50 p-4", children: [_jsxs("h4", { className: "font-bold text-purple-900 mb-2.5 flex items-center gap-2", children: [_jsx("span", { className: "px-2 py-0.5 rounded bg-purple-600 text-white text-xs font-semibold", children: "Down" }), _jsx("span", { children: "H\u00E0ng d\u1ECDc" })] }), _jsx("div", { className: "flex flex-col gap-2 max-h-60 overflow-y-auto pr-1", children: downClues.map((c) => {
                                             const answer = correctAnswer?.answers?.[`down-${c.number}`];
                                             const userAns = userAnswers[`down-${c.number}`];
-                                            return (_jsxs("div", { className: "flex items-start gap-2 text-sm bg-white p-2 rounded border border-purple-100", children: [_jsxs("span", { className: "font-bold text-purple-700 min-w-[20px]", children: [c.number, "."] }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-gray-800", children: c.clue }), isReviewMode && answer && (_jsxs("div", { className: "text-xs mt-1", children: [_jsx("span", { className: "text-gray-500", children: "\u0110\u00E1p \u00E1n: " }), _jsx("span", { className: "font-bold text-green-700", children: answer }), userAns && userAns !== answer && (_jsx("span", { className: "ml-2 line-through text-red-500 font-semibold", children: userAns }))] }))] }), _jsxs("span", { className: "text-xs text-gray-400", children: ["(", c.length, " ch\u1EEF)"] })] }, `down-${c.number}`));
+                                            return (_jsxs("div", { className: "flex items-start gap-2 text-sm bg-white p-2 rounded border border-purple-100", children: [_jsxs("span", { className: "font-bold text-purple-700 min-w-[20px]", children: [c.number, "."] }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-gray-800", children: c.clue }), !isReviewMode && onAnswerChange ? (_jsx("input", { type: "text", value: userAns || '', maxLength: c.length, onChange: (event) => onAnswerChange(`down-${c.number}`, event.target.value.toUpperCase()), placeholder: `${c.length} chữ`, className: "mt-1.5 w-full rounded border border-purple-200 px-2 py-1 text-sm font-semibold uppercase tracking-wider outline-none focus:border-purple-500" })) : null, isReviewMode && answer && (_jsxs("div", { className: "text-xs mt-1", children: [_jsx("span", { className: "text-gray-500", children: "\u0110\u00E1p \u00E1n: " }), _jsx("span", { className: "font-bold text-green-700", children: answer }), userAns && userAns !== answer && (_jsx("span", { className: "ml-2 line-through text-red-500 font-semibold", children: userAns }))] }))] }), _jsxs("span", { className: "text-xs text-gray-400", children: ["(", c.length, " ch\u1EEF)"] })] }, `down-${c.number}`));
                                         }) })] })] }), _jsx("div", { className: "lg:col-span-7 flex justify-center overflow-x-auto p-4 bg-gray-50 rounded-xl border border-gray-200", children: _jsx("div", { className: "inline-grid gap-1", style: {
                                 gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
                             }, children: Array.from({ length: rows }).map((_, rIdx) => {
@@ -66,8 +66,18 @@ export function CrosswordPuzzleClient({ content, correctAnswer, isReviewMode = f
                                             previewLetter = word[offset] || '';
                                         }
                                     }
-                                    else if (userAnswers?.[key]) {
-                                        previewLetter = userAnswers[key];
+                                    else {
+                                        if (cellInfo.across) {
+                                            const word = userAnswers[`across-${cellInfo.across.number}`] || '';
+                                            previewLetter = word[c - cellInfo.across.startCol] || '';
+                                        }
+                                        if (!previewLetter && cellInfo.down) {
+                                            const word = userAnswers[`down-${cellInfo.down.number}`] || '';
+                                            previewLetter = word[r - cellInfo.down.startRow] || '';
+                                        }
+                                        if (!previewLetter) {
+                                            previewLetter = userAnswers[key] || '';
+                                        }
                                     }
                                     const cellBg = isMarked ? 'bg-gray-400 border-gray-400 shadow-sm ring-1 ring-gray-400/50' : 'bg-gray-100 border-gray-300';
                                     let textColor = isExample

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

@@ -1,9 +1,19 @@
 import React from 'react';
-import type { FindWordsInMatrixContent, FindWordsInMatrixCorrectAnswer } from '../../../../shared/types/questions/find-words-in-matrix';
+import type { FindWordsInMatrixContent, FindWordsInMatrixCorrectAnswer, MatrixCellCoord } from '../../../../shared/types/questions/find-words-in-matrix';
+type WordSelection = {
+    wordId?: string;
+    word?: string;
+    categoryId?: string;
+    path: MatrixCellCoord[];
+};
 interface FindWordsInMatrixClientProps {
     content: FindWordsInMatrixContent;
     correctAnswer?: FindWordsInMatrixCorrectAnswer;
     showSolution?: boolean;
+    userAnswer?: unknown;
+    onAnswerChange?: (payload: {
+        words: WordSelection[];
+    }) => void;
 }
-export declare function FindWordsInMatrixClient({ content, correctAnswer, showSolution, }: FindWordsInMatrixClientProps): React.JSX.Element;
+export declare function FindWordsInMatrixClient({ content, correctAnswer, showSolution, userAnswer, onAnswerChange, }: FindWordsInMatrixClientProps): React.JSX.Element;
 export {};

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/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;