@tinyweb_dev/oe-exam-sdk 0.1.30 → 0.1.32

package/dist/components/exams/take/utils/answer-transformers.js

@@ -88,7 +88,8 @@ function findParentQuestion(subQuestionId, parts) {
             part.questionType === 'CROSS_OUT_WORD_GROUP' ||
             part.questionType === 'TRUE_FALSE_GROUP' ||
             part.questionType === 'WORD_ORDER_AND_MATCH_GROUP' ||
-            part.questionType === 'SPONTANEOUS_QA_GROUP') {
+            part.questionType === 'SPONTANEOUS_QA_GROUP' ||
+            part.questionType === 'ANSWER_THE_QUESTION_GROUP') {
             const parent = part.questions.find((question) => subQuestionId.startsWith(`${question.id}-item-`));
             if (parent) {
                 return {
@@ -105,7 +106,7 @@ function findParentQuestion(subQuestionId, parts) {
  */
 function findGridParentQuestion(parts) {
     for (const part of parts) {
-        if (part.questionType === 'FILL_MISSING_WORDS_IN_GRID') {
+        if (part.questionType === 'FILL_MISSING_WORDS_IN_GRID' || part.questionType === 'CROSSWORD_PUZZLE') {
             if (part.questions.length > 0) {
                 return {
                     parentId: part.questions[0].id,
@@ -416,10 +417,40 @@ export function transformAnswersForSubmission(answers, parts) {
     }
     // Add grid cell answers (grouped under parent question)
     for (const [parentId, cellAnswers] of gridCellAnswers) {
-        result.push({
-            questionId: parentId,
-            answer: { answers: cellAnswers },
-        });
+        const parentPart = parts.find((p) => p.questions.some((q) => q.id === parentId));
+        if (parentPart?.questionType === 'CROSSWORD_PUZZLE') {
+            const q = parentPart.questions.find((x) => x.id === parentId);
+            const content = q?.content;
+            const words = {};
+            if (content?.clues) {
+                const across = content.clues.across || [];
+                const down = content.clues.down || [];
+                for (const c of across) {
+                    let word = '';
+                    for (let i = 0; i < (c.length || 1); i++) {
+                        word += (cellAnswers[`${c.startRow}-${c.startCol + i}`] || '').trim();
+                    }
+                    words[`across-${c.number}`] = word;
+                }
+                for (const c of down) {
+                    let word = '';
+                    for (let i = 0; i < (c.length || 1); i++) {
+                        word += (cellAnswers[`${c.startRow + i}-${c.startCol}`] || '').trim();
+                    }
+                    words[`down-${c.number}`] = word;
+                }
+            }
+            result.push({
+                questionId: parentId,
+                answer: { answers: words, cells: cellAnswers },
+            });
+        }
+        else {
+            result.push({
+                questionId: parentId,
+                answer: { answers: cellAnswers },
+            });
+        }
     }
     // Add label answers (grouped under parent question)
     for (const [parentId, labels] of labelAnswers) {

package/dist/components/exams/take/utils/question-transformers.d.ts

@@ -5,7 +5,7 @@
  * Each transformer handles specific question type data structure.
  */
 import type { FillBlankQuestion, ChooseBestAnswerQuestion, PictureChooseSubQuestion, PictureFillBlankSubQuestion, ReadingPassageQuestion, LabelThePictureLabel, FillWordHintSubQuestion, ColoringHintItem, ColoringRegion } from '../types';
-export type QuestionType = 'FILL_IN_BLANK' | 'WRITE_CORRECT_VERB_FORM' | 'CHOOSE_THE_CORRECT_ANSWER' | 'CHOOSE_THE_CORRECT_ANSWER_GROUP' | 'CHOOSE_CORRECT_ADJECTIVE' | 'WRITE_A_SHORT_LETTER' | 'READ_AND_COLOR_OBJECTS' | 'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER' | 'LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER' | 'READ_PASSAGE_AND_ANSWER_QUESTIONS' | 'LABEL_THE_PICTURE' | 'LOOK_PICTURE_FILL_WORD_HINT' | 'FILL_MISSING_WORDS_IN_GRID' | 'IMAGE_OBJECT_MATCHING' | 'ANSWER_THE_QUESTION' | 'TRUE_FALSE' | 'TRUE_FALSE_GROUP' | 'CROSS_OUT_WORD_GROUP' | 'WORD_ORDERING' | 'WORD_FILL_PARAGRAPH' | 'MATCH_BY_WRITING_ANSWER' | 'WRITE_SENTENCES' | 'WORD_FILL_STRUCTURED_FORM' | 'WORD_ORDER_AND_MATCH_GROUP' | 'LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE' | 'LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP' | 'LISTEN_AND_DRAG_OBJECTS_INTO_SCENE' | 'LISTEN_AND_SPEAK_ANSWER' | 'LISTEN_AND_SPEAK_COMPARE_IMAGES' | 'LISTEN_AND_SPEAK_WITH_STORY_IMAGES' | 'LISTEN_AND_SPEAK_IMAGE_GROUP' | 'LISTEN_AND_SPEAK_ODD_ONE_OUT' | 'LISTEN_AND_SPEAK_QUESTION_LIST' | 'LISTEN_AND_SPEAK_INFO_EXCHANGE' | 'READ_DISPLAYED_CONTENT' | 'SPEAKING_DESCRIBE_IMAGE' | 'SPONTANEOUS_QA' | 'SPONTANEOUS_QA_GROUP' | 'SPEAKING_CONVERSATION' | 'GN_SPEAKING_INTERVIEW' | 'SPEAKING_CUE_CARD';
+export type QuestionType = 'FILL_IN_BLANK' | 'WRITE_CORRECT_VERB_FORM' | 'CHOOSE_THE_CORRECT_ANSWER' | 'CHOOSE_THE_CORRECT_ANSWER_GROUP' | 'CHOOSE_CORRECT_ADJECTIVE' | 'WRITE_A_SHORT_LETTER' | 'READ_AND_COLOR_OBJECTS' | 'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER' | 'LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER' | 'READ_PASSAGE_AND_ANSWER_QUESTIONS' | 'LABEL_THE_PICTURE' | 'LOOK_PICTURE_FILL_WORD_HINT' | 'FILL_MISSING_WORDS_IN_GRID' | 'IMAGE_OBJECT_MATCHING' | 'ANSWER_THE_QUESTION' | 'ANSWER_THE_QUESTION_GROUP' | 'TRUE_FALSE' | 'TRUE_FALSE_GROUP' | 'CROSS_OUT_WORD_GROUP' | 'WORD_ORDERING' | 'WORD_FILL_PARAGRAPH' | 'MATCH_BY_WRITING_ANSWER' | 'WRITE_SENTENCES' | 'WORD_FILL_STRUCTURED_FORM' | 'CROSSWORD_PUZZLE' | 'WORD_ORDER_AND_MATCH_GROUP' | 'LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE' | 'LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP' | 'LISTEN_AND_DRAG_OBJECTS_INTO_SCENE' | 'LISTEN_AND_SPEAK_ANSWER' | 'LISTEN_AND_SPEAK_COMPARE_IMAGES' | 'LISTEN_AND_SPEAK_WITH_STORY_IMAGES' | 'LISTEN_AND_SPEAK_IMAGE_GROUP' | 'LISTEN_AND_SPEAK_ODD_ONE_OUT' | 'LISTEN_AND_SPEAK_QUESTION_LIST' | 'LISTEN_AND_SPEAK_INFO_EXCHANGE' | 'READ_DISPLAYED_CONTENT' | 'SPEAKING_DESCRIBE_IMAGE' | 'SPONTANEOUS_QA' | 'SPONTANEOUS_QA_GROUP' | 'SPEAKING_CONVERSATION' | 'GN_SPEAKING_INTERVIEW' | 'SPEAKING_CUE_CARD';
 export interface ApiQuestion {
     id: string;
     content: any;
@@ -244,6 +244,11 @@ export declare function transformAnswerTheQuestion(questions: ApiQuestion[]): {
     title?: string;
     groupContent?: string;
 };
+export declare function transformAnswerTheQuestionGroup(questions: ApiQuestion[]): {
+    questions: AnswerTheQuestionQuestion[];
+    instruction: string;
+    groupContent?: string;
+};
 export interface TrueFalseQuestion {
     id: string;
     questionNumber: number;
@@ -410,3 +415,25 @@ export interface WordOrderAndMatchGroupPartData {
     explanation?: string;
 }
 export declare function transformWordOrderAndMatchGroup(questions: ApiQuestion[]): WordOrderAndMatchGroupPartData;
+export interface CrosswordClueItem {
+    number: number;
+    clue: string;
+    startRow: number;
+    startCol: number;
+    length: number;
+}
+export interface CrosswordPuzzlePartData {
+    title?: string;
+    instruction: string;
+    gridSize: {
+        rows: number;
+        cols: number;
+    };
+    clues: {
+        across: CrosswordClueItem[];
+        down: CrosswordClueItem[];
+    };
+    correctAnswers: Record<string, string>;
+    explanation?: string;
+}
+export declare function transformCrosswordPuzzle(questions: ApiQuestion[]): CrosswordPuzzlePartData;

package/dist/components/exams/take/utils/question-transformers.js

@@ -804,6 +804,39 @@ export function transformAnswerTheQuestion(questions) {
         groupContent: groupPayload?.groupContent || firstContent?.groupContent,
     };
 }
+// ============================================
+// ANSWER_THE_QUESTION_GROUP Transformer
+// ============================================
+export function transformAnswerTheQuestionGroup(questions) {
+    const parent = questions[0];
+    const content = parent?.content;
+    const items = Array.isArray(content?.items) ? content.items : [];
+    const parentCorrect = Array.isArray(parent?.correct_answer?.answer)
+        ? parent.correct_answer.answer
+        : [];
+    const transformed = items.map((item, itemIndex) => {
+        const isExample = item.isExample === true;
+        const fallbackAnswers = Array.isArray(parentCorrect[itemIndex]?.expectedAnswers)
+            ? parentCorrect[itemIndex].expectedAnswers
+            : [];
+        const nestedAnswers = Array.isArray(item.correctAnswer?.expectedAnswers)
+            ? item.correctAnswer.expectedAnswers
+            : [];
+        const exampleAnswer = (nestedAnswers[0] || fallbackAnswers[0] || '');
+        return {
+            id: `${parent.id}-item-${itemIndex}`,
+            questionNumber: item.questionNumber || itemIndex + 1,
+            question: item.content?.question || '',
+            isExample,
+            exampleAnswer: isExample ? exampleAnswer : undefined,
+        };
+    });
+    return {
+        questions: transformed,
+        instruction: content?.meta?.instruction || 'Read the text again and answer the questions.',
+        groupContent: content?.meta?.passage,
+    };
+}
 export function transformTrueFalse(questions) {
     const groupPayload = questions[0]?.questionGroup?.payload;
     const transformed = questions.map((q) => {
@@ -1135,3 +1168,39 @@ export function transformWordOrderAndMatchGroup(questions) {
         explanation: parent?.explanation,
     };
 }
+export function transformCrosswordPuzzle(questions) {
+    const question = questions[0];
+    const content = (question?.content || {});
+    const correctAnswer = (question?.correct_answer || question?.correctAnswer || {});
+    const rows = content?.gridSize?.rows || content?.rows || 12;
+    const cols = content?.gridSize?.cols || content?.cols || 12;
+    const across = Array.isArray(content?.clues?.across)
+        ? content.clues.across.map((c) => ({
+            number: Number(c.number),
+            clue: String(c.clue || '').trim(),
+            startRow: Number(c.startRow) || 1,
+            startCol: Number(c.startCol) || 1,
+            length: Number(c.length) || 1,
+        }))
+        : [];
+    const down = Array.isArray(content?.clues?.down)
+        ? content.clues.down.map((c) => ({
+            number: Number(c.number),
+            clue: String(c.clue || '').trim(),
+            startRow: Number(c.startRow) || 1,
+            startCol: Number(c.startCol) || 1,
+            length: Number(c.length) || 1,
+        }))
+        : [];
+    const correctAnswers = correctAnswer?.answers && typeof correctAnswer.answers === 'object'
+        ? correctAnswer.answers
+        : {};
+    return {
+        title: content?.title || '',
+        instruction: question?.instruction || content?.instruction || 'Complete the crossword.',
+        gridSize: { rows, cols },
+        clues: { across, down },
+        correctAnswers,
+        explanation: question?.explanation,
+    };
+}

package/dist/components/questions/_shared/config/question-types.config.js

@@ -207,6 +207,11 @@ export const QUESTION_TYPE_CONFIG = {
         requiresContent: true,
         hasDedicatedComponent: true,
     },
+    ANSWER_THE_QUESTION_GROUP: {
+        label: 'Đọc và trả lời câu hỏi (AI)',
+        requiresContent: true,
+        hasDedicatedComponent: true,
+    },
     WORD_ORDERING: {
         label: 'Sắp xếp từ',
         requiresContent: true,
@@ -312,6 +317,11 @@ export const QUESTION_TYPE_CONFIG = {
         requiresContent: true,
         hasDedicatedComponent: true,
     },
+    CROSSWORD_PUZZLE: {
+        label: 'Giải ô chữ (Crossword)',
+        requiresContent: true,
+        hasDedicatedComponent: true,
+    },
 };
 export const QUESTION_TYPES_WITH_DEDICATED_COMPONENTS = [
     'FILL_IN_BLANK',
@@ -333,6 +343,7 @@ export const QUESTION_TYPES_WITH_DEDICATED_COMPONENTS = [
     'WRITE_CORRECT_VERB_FORM',
     'CHOOSE_CORRECT_ADJECTIVE',
     'ANSWER_THE_QUESTION',
+    'ANSWER_THE_QUESTION_GROUP',
     'TRUE_FALSE',
     'WORD_ORDERING',
     'WORD_FILL_PARAGRAPH',
@@ -356,6 +367,7 @@ export const QUESTION_TYPES_WITH_DEDICATED_COMPONENTS = [
     'GN_SPEAKING_INTERVIEW',
     'SPEAKING_CUE_CARD',
     'WORD_FILL_STRUCTURED_FORM',
+    'CROSSWORD_PUZZLE',
 ];
 export function getQuestionTypeLabel(type) {
     return QUESTION_TYPE_CONFIG[type]?.label || type;

package/dist/components/questions/_shared/types/answer-the-question-group.type.d.ts

@@ -0,0 +1,32 @@
+import type { MutableRefObject } from 'react';
+export interface AnswerTheQuestionGroupItemData {
+    question: string;
+    expectedAnswers: string[];
+    isExample?: boolean;
+    points: number;
+    questionNumber: number;
+}
+export interface AnswerTheQuestionGroupData {
+    instruction: string;
+    passage?: string;
+    items: AnswerTheQuestionGroupItemData[];
+    explanation?: string;
+    points?: number;
+}
+export interface AnswerTheQuestionGroupCreatorProps {
+    initialData?: AnswerTheQuestionGroupData;
+    onSave?: (data: AnswerTheQuestionGroupData) => void;
+    onCancel?: () => void;
+    onChange?: (data: AnswerTheQuestionGroupData) => void;
+    externalErrors?: string[];
+    onUnsavedChangesChange?: (hasUnsavedChanges: boolean) => void;
+    validationRef?: MutableRefObject<{
+        triggerValidation: () => Promise<boolean>;
+        getFormData?: () => AnswerTheQuestionGroupData;
+    } | null>;
+}
+export interface AnswerTheQuestionGroupClientProps {
+    questionData: AnswerTheQuestionGroupData;
+    isReviewMode?: boolean;
+    userAnswers?: string[];
+}

package/dist/components/questions/_shared/types/answer-the-question-group.type.js

@@ -0,0 +1 @@
+export {};

package/dist/components/questions/_shared/types/crossword-puzzle.type.d.ts

@@ -0,0 +1,16 @@
+import type { CrosswordClue, CrosswordPuzzleContent, CrosswordPuzzleCorrectAnswer } from '../../../../shared/types/questions/crossword-puzzle';
+export interface CrosswordClueFormItem extends CrosswordClue {
+    id: string;
+    answer: string;
+    direction: 'across' | 'down';
+}
+export interface CrosswordPuzzleFormState {
+    title?: string;
+    rows: number;
+    cols: number;
+    clues: CrosswordClueFormItem[];
+    caseSensitive: boolean;
+    points: number;
+    explanation?: string;
+}
+export type { CrosswordClue, CrosswordPuzzleContent, CrosswordPuzzleCorrectAnswer };

package/dist/components/questions/_shared/types/crossword-puzzle.type.js

@@ -0,0 +1 @@
+export {};

package/dist/components/questions/components/QuestionSearchDropdown.js

@@ -34,7 +34,7 @@ const PASSAGE_BASED_TYPES = [
     'READ_PASSAGE_AND_COMPLETE_STORY',
 ];
 // Grid-based question types
-const GRID_BASED_TYPES = ['FILL_MISSING_WORDS_IN_GRID'];
+const GRID_BASED_TYPES = ['FILL_MISSING_WORDS_IN_GRID', 'CROSSWORD_PUZZLE'];
 // Get display icon for question type
 const getQuestionTypeIcon = (type) => {
     if (IMAGE_BASED_TYPES.includes(type)) {

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

@@ -18,6 +18,7 @@ import { writeAShortLetterRegistration } from '../types/write-a-short-letter/reg
 import { writeCorrectVerbFormRegistration } from '../types/write-correct-verb-form/register';
 import { chooseCorrectAdjectiveRegistration } from '../types/choose-correct-adjective/register';
 import { answerTheQuestionRegistration } from '../types/answer-the-question/register';
+import { answerTheQuestionGroupRegistration } from '../types/answer-the-question-group/register';
 import { trueFalseRegistration } from '../types/true-false/register';
 import { wordOrderingRegistration } from '../types/word-ordering/register';
 import { wordFillParagraphRegistration } from '../types/word-fill-paragraph/register';
@@ -42,6 +43,7 @@ import { gnSpeakingInterviewRegistration } from '../types/gn-speaking-interview/
 import { speakingCueCardRegistration } from '../types/speaking-cue-card/register';
 import { wordFillStructuredFormRegistration } from '../types/word-fill-structured-form/register';
 import { wordOrderAndMatchGroupRegistration } from '../types/word-order-and-match-group/register';
+import { crosswordPuzzleRegistration } from '../types/crossword-puzzle/register';
 // ─── Registry map ───────────────────────────────────────────────────────────
 export const questionTypeRegistry = {
     CHOOSE_THE_CORRECT_ANSWER: chooseTheCorrectAnswerRegistration,
@@ -64,6 +66,7 @@ export const questionTypeRegistry = {
     WRITE_CORRECT_VERB_FORM: writeCorrectVerbFormRegistration,
     CHOOSE_CORRECT_ADJECTIVE: chooseCorrectAdjectiveRegistration,
     ANSWER_THE_QUESTION: answerTheQuestionRegistration,
+    ANSWER_THE_QUESTION_GROUP: answerTheQuestionGroupRegistration,
     TRUE_FALSE: trueFalseRegistration,
     WORD_ORDERING: wordOrderingRegistration,
     WORD_FILL_PARAGRAPH: wordFillParagraphRegistration, // Will need to handle viewMode mapping either here or in wrapper
@@ -87,4 +90,5 @@ export const questionTypeRegistry = {
     GN_SPEAKING_INTERVIEW: gnSpeakingInterviewRegistration,
     SPEAKING_CUE_CARD: speakingCueCardRegistration,
     WORD_FILL_STRUCTURED_FORM: wordFillStructuredFormRegistration,
+    CROSSWORD_PUZZLE: crosswordPuzzleRegistration,
 };

package/dist/components/questions/question-bank/QuestionEditorRenderer.d.ts

@@ -14,7 +14,8 @@ export declare enum QuestionBankEditorType {
     WRITE_A_SHORT_LETTER = "WRITE_A_SHORT_LETTER",
     WRITE_CORRECT_VERB_FORM = "WRITE_CORRECT_VERB_FORM",
     FILL_IN_BLANK = "FILL_IN_BLANK",
-    CHOOSE_CORRECT_ADJECTIVE = "CHOOSE_CORRECT_ADJECTIVE"
+    CHOOSE_CORRECT_ADJECTIVE = "CHOOSE_CORRECT_ADJECTIVE",
+    CROSSWORD_PUZZLE = "CROSSWORD_PUZZLE"
 }
 /**
  * Renders the appropriate Creator for a question-bank item.

package/dist/components/questions/question-bank/QuestionEditorRenderer.js

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { t } from '../../../shared/lib/i18n';
 import { renderChooseCorrectAdjectiveEditor, renderChooseTheCorrectAnswerEditor, renderFillInBlankEditor, renderFillMissingWordsInGridEditor, renderImageObjectMatchingEditor, renderLabelThePictureEditor, renderLookPictureChooseCorrectAnswerEditor, renderLookPictureFillBlankChooseAnswerEditor, renderLookPictureFillWordHintEditor, renderReadAndColorObjectsEditor, renderReadPassageAndAnswerQuestionsEditor, renderWriteAShortLetterEditor, renderWriteCorrectVerbFormEditor, UnsupportedEditorFallback, } from './editor-adapters';
+import { CrosswordPuzzleCreator } from '../types/crossword-puzzle/CrosswordPuzzleCreator';
 /** Marketing question types supported by the question-bank editor. */
 export var QuestionBankEditorType;
 (function (QuestionBankEditorType) {
@@ -19,6 +20,7 @@ export var QuestionBankEditorType;
     QuestionBankEditorType["WRITE_CORRECT_VERB_FORM"] = "WRITE_CORRECT_VERB_FORM";
     QuestionBankEditorType["FILL_IN_BLANK"] = "FILL_IN_BLANK";
     QuestionBankEditorType["CHOOSE_CORRECT_ADJECTIVE"] = "CHOOSE_CORRECT_ADJECTIVE";
+    QuestionBankEditorType["CROSSWORD_PUZZLE"] = "CROSSWORD_PUZZLE";
 })(QuestionBankEditorType || (QuestionBankEditorType = {}));
 /**
  * Renders the appropriate Creator for a question-bank item.
@@ -69,6 +71,20 @@ export function QuestionEditorRenderer({ questionType, content, correctAnswer, e
             return renderFillInBlankEditor(adapterProps);
         case QuestionBankEditorType.CHOOSE_CORRECT_ADJECTIVE:
             return renderChooseCorrectAdjectiveEditor(adapterProps);
+        case QuestionBankEditorType.CROSSWORD_PUZZLE:
+            return (_jsx(CrosswordPuzzleCreator, { initialData: {
+                    content,
+                    answer: correctAnswer,
+                    explanation,
+                    points,
+                }, onChange: (data) => {
+                    onChange?.({
+                        content: data.content,
+                        answer: data.answer,
+                        explanation: data.explanation || (explanation ?? undefined),
+                        points: data.points ?? points,
+                    });
+                } }));
         default:
             return (_jsx(UnsupportedEditorFallback, { questionType: questionType, content: content, correctAnswer: correctAnswer, explanation: explanation }));
     }

package/dist/components/questions/types/answer-the-question-group/AnswerTheQuestionGroupClient.d.ts

@@ -0,0 +1,2 @@
+import type { AnswerTheQuestionGroupClientProps } from '../../_shared/types/answer-the-question-group.type';
+export declare function AnswerTheQuestionGroupClient({ questionData, isReviewMode, userAnswers, }: AnswerTheQuestionGroupClientProps): import("react").JSX.Element;

package/dist/components/questions/types/answer-the-question-group/AnswerTheQuestionGroupClient.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BookOpen, CircleHelp, Lightbulb, Sparkles, Star } from 'lucide-react';
+export function AnswerTheQuestionGroupClient({ questionData, isReviewMode = false, userAnswers = [], }) {
+    const items = questionData.items || [];
+    return (_jsxs("div", { className: "space-y-4", children: [questionData.instruction && (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800", children: questionData.instruction })), questionData.passage && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-white p-5 shadow-xs", children: [_jsxs("div", { className: "mb-2.5 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-indigo-700", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: "B\u00E0i \u0111\u1ECDc (Reading Passage)" })] }), _jsx("div", { className: "prose prose-sm max-w-none leading-relaxed text-gray-800", dangerouslySetInnerHTML: { __html: questionData.passage } })] })), items.map((item, itemIndex) => {
+                const userValue = userAnswers[itemIndex] || '';
+                const expectedAnswers = Array.isArray(item.expectedAnswers)
+                    ? item.expectedAnswers.filter((answer) => answer.trim() !== '')
+                    : [];
+                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-4 py-2.5", 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: "inline-flex items-center gap-1 rounded-full bg-violet-100 px-2 py-0.5 text-xs font-semibold text-violet-700", children: [_jsx(Sparkles, { className: "h-3 w-3" }), "AI"] })] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-4", 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: "rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-700", children: userValue || (isReviewMode ? '(Chưa trả lời)' : 'Học sinh sẽ nhập câu trả lời tại đây') }), isReviewMode && expectedAnswers.length > 0 && (_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs font-medium text-gray-500", children: "\u0110\u00E1p \u00E1n m\u1EABu (AI)" }), _jsx("ul", { className: "list-disc space-y-1 pl-5 text-sm text-gray-700", children: expectedAnswers.map((answer) => (_jsx("li", { children: answer }, answer))) })] }))] })] }, `${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/answer-the-question-group/AnswerTheQuestionGroupCreator.d.ts

@@ -0,0 +1,2 @@
+import type { AnswerTheQuestionGroupCreatorProps } from '../../_shared/types/answer-the-question-group.type';
+export declare function AnswerTheQuestionGroupCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }: AnswerTheQuestionGroupCreatorProps): import("react").JSX.Element;

package/dist/components/questions/types/answer-the-question-group/AnswerTheQuestionGroupCreator.js

@@ -0,0 +1,183 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '../../../../components/ui/button';
+import { Label } from '../../../../components/ui/label';
+import { Input } from '../../../../components/ui/input';
+import { Textarea } from '../../../../components/ui/textarea';
+import { PointsInput } from '../../../../components/ui/points-input';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { Switch } from '../../../../components/ui/switch';
+import { RichTextEditor } from '../../../../components/shared/RichTextEditor';
+import { useDebouncedCallback } from '../../../../shared/lib/hooks';
+import { Eye, Pencil, Plus, Sparkles, Star, Trash2 } from 'lucide-react';
+import { AnswerTheQuestionGroupClient } from './AnswerTheQuestionGroupClient';
+const DEFAULT_INSTRUCTION = 'Read the text again and answer the questions.';
+function createEmptyItem(questionNumber) {
+    return {
+        question: '',
+        expectedAnswers: [''],
+        isExample: false,
+        points: 1,
+        questionNumber,
+    };
+}
+function normalizeExpectedAnswers(value) {
+    if (!Array.isArray(value) || value.length === 0) {
+        return [''];
+    }
+    return value.map((item) => (typeof item === 'string' ? item : ''));
+}
+function normalizeItems(rawItems) {
+    if (!Array.isArray(rawItems) || rawItems.length === 0) {
+        return [createEmptyItem(1)];
+    }
+    return rawItems.map((item, index) => ({
+        question: item.question || '',
+        expectedAnswers: normalizeExpectedAnswers(item.expectedAnswers),
+        isExample: item.isExample === true,
+        points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+        questionNumber: item.questionNumber || index + 1,
+    }));
+}
+function sumPoints(items) {
+    return items.reduce((total, item) => (item.isExample ? total : total + (typeof item.points === 'number' ? item.points : 1)), 0);
+}
+function isContentEmpty(html) {
+    return !html || html === '<p></p>' || html === '<p><br></p>' || html.trim() === '';
+}
+export function AnswerTheQuestionGroupCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }) {
+    const [instruction, setInstruction] = useState(initialData?.instruction || DEFAULT_INSTRUCTION);
+    const [passage, setPassage] = useState(initialData?.passage || '');
+    const [items, setItems] = useState(() => normalizeItems(initialData?.items));
+    const [explanation, setExplanation] = useState(initialData?.explanation || '');
+    const [isClientMode, setIsClientMode] = useState(false);
+    const [errors, setErrors] = useState([]);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    const buildPayload = (nextInstruction = instruction, nextPassage = passage, nextItems = items, nextExplanation = explanation) => ({
+        instruction: nextInstruction,
+        ...(!isContentEmpty(nextPassage) ? { passage: nextPassage.trim() } : {}),
+        items: nextItems,
+        explanation: nextExplanation,
+        points: sumPoints(nextItems),
+    });
+    const debouncedOnChange = useDebouncedCallback((payload) => {
+        onChangeRef.current?.(payload);
+    }, 300);
+    useEffect(() => {
+        const payload = buildPayload();
+        const serialized = JSON.stringify(payload);
+        if (serialized === previousPayloadRef.current) {
+            return;
+        }
+        previousPayloadRef.current = serialized;
+        onUnsavedChangesChange?.(true);
+        debouncedOnChange(payload);
+    }, [instruction, passage, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
+    const validate = () => {
+        const nextErrors = [];
+        if (!instruction.trim()) {
+            nextErrors.push('Vui lòng nhập hướng dẫn.');
+        }
+        if (items.length < 1) {
+            nextErrors.push('Cần ít nhất một câu hỏi.');
+        }
+        items.forEach((item, index) => {
+            if (!item.question.trim()) {
+                nextErrors.push(`Câu ${index + 1}: nội dung câu hỏi là bắt buộc.`);
+            }
+            const filledAnswers = item.expectedAnswers
+                .map((answer) => answer.trim())
+                .filter((answer) => answer !== '');
+            if (!item.isExample && filledAnswers.length === 0) {
+                nextErrors.push(`Câu ${index + 1}: cần ít nhất một đáp án mẫu.`);
+            }
+        });
+        return nextErrors;
+    };
+    useEffect(() => {
+        if (!validationRef) {
+            return;
+        }
+        validationRef.current = {
+            triggerValidation: async () => {
+                const nextErrors = validate();
+                setErrors(nextErrors);
+                return nextErrors.length === 0;
+            },
+            getFormData: () => buildPayload(),
+        };
+    }, [validationRef, instruction, passage, items, explanation]);
+    const updateItem = (index, patch) => {
+        setItems((prev) => {
+            const next = [...prev];
+            const current = next[index];
+            if (!current)
+                return prev;
+            next[index] = { ...current, ...patch };
+            return next;
+        });
+    };
+    const updateExpectedAnswer = (itemIndex, answerIndex, value) => {
+        setItems((prev) => {
+            const next = [...prev];
+            const current = next[itemIndex];
+            if (!current)
+                return prev;
+            const expectedAnswers = [...current.expectedAnswers];
+            expectedAnswers[answerIndex] = value;
+            next[itemIndex] = { ...current, expectedAnswers };
+            return next;
+        });
+    };
+    const addExpectedAnswer = (itemIndex) => {
+        setItems((prev) => {
+            const next = [...prev];
+            const current = next[itemIndex];
+            if (!current)
+                return prev;
+            next[itemIndex] = {
+                ...current,
+                expectedAnswers: [...current.expectedAnswers, ''],
+            };
+            return next;
+        });
+    };
+    const removeExpectedAnswer = (itemIndex, answerIndex) => {
+        setItems((prev) => {
+            const next = [...prev];
+            const current = next[itemIndex];
+            if (!current || current.expectedAnswers.length <= 1)
+                return prev;
+            next[itemIndex] = {
+                ...current,
+                expectedAnswers: current.expectedAnswers.filter((_, index) => index !== answerIndex),
+            };
+            return next;
+        });
+    };
+    const addItem = () => {
+        setItems((prev) => [...prev, createEmptyItem(prev.length + 1)]);
+    };
+    const removeItem = (index) => {
+        setItems((prev) => {
+            if (prev.length <= 1)
+                return prev;
+            return prev
+                .filter((_, itemIndex) => itemIndex !== index)
+                .map((item, itemIndex) => ({ ...item, questionNumber: itemIndex + 1 }));
+        });
+    };
+    const displayErrors = externalErrors && externalErrors.length > 0 ? externalErrors : errors;
+    if (isClientMode) {
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", variant: "outline", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Ch\u1EBF \u0111\u1ED9 ch\u1EC9nh s\u1EEDa"] }) }), _jsx(AnswerTheQuestionGroupClient, { questionData: buildPayload(), isReviewMode: true })] }));
+    }
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-medium text-gray-900", children: "\u0110\u1ECDc v\u00E0 tr\u1EA3 l\u1EDDi c\u00E2u h\u1ECFi (AI)" }), _jsx("p", { className: "text-sm text-gray-500", children: "Nh\u00F3m c\u00E2u \u0111\u1ECDc hi\u1EC3u l\u01B0u 1 row. AI ch\u1EA5m theo question + expectedAnswers." })] }), _jsxs(Button, { type: "button", variant: "outline", onClick: () => setIsClientMode(true), children: [_jsx(Eye, { className: "mr-2 h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Nh\u00F3m \u0111\u1ECDc hi\u1EC3u" }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "group-instruction", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "group-instruction", value: instruction, onChange: (event) => setInstruction(event.target.value), placeholder: DEFAULT_INSTRUCTION })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "N\u1ED9i dung b\u00E0i \u0111\u1ECDc (Passage)" }), _jsx(RichTextEditor, { value: passage, onChange: setPassage, minHeightClassName: "min-h-[160px]" })] }), _jsxs("div", { className: "rounded-xl border border-violet-100 bg-violet-50 p-4 text-sm text-violet-800", children: [_jsxs("div", { className: "flex items-center gap-2 font-medium", children: [_jsx(Sparkles, { className: "h-4 w-4" }), "Ch\u1EA5m \u0111i\u1EC3m b\u1EB1ng AI"] }), _jsx("p", { className: "mt-1 text-xs text-violet-700", children: "H\u1ECDc sinh vi\u1EBFt c\u00E2u tr\u1EA3 l\u1EDDi. AI so v\u1EDBi b\u1EA5t k\u1EF3 \u0111\u00E1p \u00E1n m\u1EABu n\u00E0o c\u1EE7a t\u1EEBng c\u00E2u (binary 0/1)." })] }), _jsxs("div", { className: "rounded-xl border border-gray-200 bg-gray-50 p-4", children: [_jsx(PointsInput, { value: sumPoints(items), allowZero: true, readOnly: true }), _jsx("p", { className: "mt-2 text-xs text-gray-500", children: "T\u1ED5ng \u0111i\u1EC3m \u0111\u01B0\u1EE3c c\u1ED9ng t\u1EEB c\u00E1c c\u00E2u kh\u00F4ng ph\u1EA3i example." })] })] })] }), items.map((item, itemIndex) => (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0", children: [_jsxs(CardTitle, { className: "text-base", children: ["C\u00E2u ", itemIndex + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeItem(itemIndex), disabled: items.length <= 1, children: _jsx(Trash2, { className: "h-4 w-4" }) })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between rounded-lg border border-amber-100 bg-amber-50 px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-amber-800", children: [_jsx(Star, { className: "h-4 w-4" }), "C\u00E2u v\u00ED d\u1EE5"] }), _jsx(Switch, { checked: item.isExample === true, onCheckedChange: (checked) => updateItem(itemIndex, {
+                                            isExample: checked,
+                                            points: checked ? 0 : (item.points || 1),
+                                        }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "C\u00E2u h\u1ECFi" }), _jsx(Textarea, { value: item.question, onChange: (event) => updateItem(itemIndex, { question: event.target.value }), rows: 2, placeholder: "What is autism?" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "\u0110\u00E1p \u00E1n m\u1EABu cho AI" }), item.expectedAnswers.map((answer, answerIndex) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { value: answer, onChange: (event) => updateExpectedAnswer(itemIndex, answerIndex, event.target.value), placeholder: `Đáp án mẫu ${answerIndex + 1}` }), item.expectedAnswers.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeExpectedAnswer(itemIndex, answerIndex), children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }, `expected-${itemIndex}-${answerIndex}`))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => addExpectedAnswer(itemIndex), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n m\u1EABu"] })] }), !item.isExample && (_jsx(PointsInput, { value: item.points, allowZero: true, onChange: (e) => updateItem(itemIndex, { points: Number(e.target.value) || 0 }) }))] })] }, `item-${itemIndex}`))), _jsxs(Button, { type: "button", variant: "outline", onClick: addItem, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Th\u00EAm c\u00E2u h\u1ECFi"] }), displayErrors.length > 0 && (_jsx("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700", children: displayErrors.map((error) => (_jsx("p", { children: error }, error))) }))] }));
+}

package/dist/components/questions/types/answer-the-question-group/index.d.ts

@@ -0,0 +1,5 @@
+export * from './AnswerTheQuestionGroupCreator';
+export * from './AnswerTheQuestionGroupClient';
+export * from './transform';
+export * from './register';
+export * from './map-answer-the-question-group-data';

package/dist/components/questions/types/answer-the-question-group/index.js

@@ -0,0 +1,5 @@
+export * from './AnswerTheQuestionGroupCreator';
+export * from './AnswerTheQuestionGroupClient';
+export * from './transform';
+export * from './register';
+export * from './map-answer-the-question-group-data';

package/dist/components/questions/types/answer-the-question-group/map-answer-the-question-group-data.d.ts

@@ -0,0 +1,4 @@
+import type { AnswerTheQuestionGroupData, AnswerTheQuestionGroupItemData } from '../../_shared/types/answer-the-question-group.type';
+export declare function createEmptyAnswerTheQuestionGroupItem(questionNumber: number): AnswerTheQuestionGroupItemData;
+export declare function mapAnswerTheQuestionGroupItem(item: unknown, index: number, fallbackAnswers?: string[]): AnswerTheQuestionGroupItemData;
+export declare function mapQuestionToAnswerTheQuestionGroupData(question: Record<string, unknown> | null | undefined): AnswerTheQuestionGroupData;