@tinyweb_dev/oe-exam-sdk 0.2.9 → 0.2.10

package/dist/components/exams/take/ExamTakingPageContainer.js

@@ -637,6 +637,12 @@ function ExamTakingPageContainerInner({ roomId, api, onNavigate, resultPath = (a
                         map.set(`${question.id}-item-${index}`, question.id);
                     });
                 }
+                if (part.questionType === 'WORD_ORDERING_GROUP' &&
+                    Array.isArray(content?.items)) {
+                    content.items.forEach((_, index) => {
+                        map.set(`${question.id}-item-${index}`, question.id);
+                    });
+                }
             });
         });
         return map;

package/dist/components/exams/take/components/QuestionRenderer.js

@@ -8,9 +8,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * 2. Transforms data to renderer-specific props
  * 3. Renders the correct component for each question type
  */
-import { MoversListenAndWriteRenderer, MoversChooseBestAnswerRenderer, MoversChooseAdjectiveRenderer, MoversWritingRenderer, MoversColoringRenderer, MoversPictureChooseRenderer, MoversPictureFillBlankChooseRenderer, MoversReadingPassageRenderer, MoversLabelThePictureRenderer, MoversFillWordHintRenderer, MoversGridFillRenderer, MoversTrueFalseRenderer, MoversTrueFalseCorrectGroupRenderer, MoversFillInBlankGroupRenderer, MoversCrossOutWordGroupRenderer, MoversAnswerTheQuestionRenderer, MoversWriteSentencesRenderer, MoversWordOrderingRenderer, MoversWordFillParagraphRenderer, MoversMatchByWritingAnswerRenderer, MoversMatchWordToPictureRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderAndMatchGroupRenderer, MoversMatchingWithLinesGroupRenderer, MoversCrosswordPuzzleRenderer, FindWordsInMatrixRenderer, } from './question-renderers';
+import { MoversListenAndWriteRenderer, MoversChooseBestAnswerRenderer, MoversChooseAdjectiveRenderer, MoversWritingRenderer, MoversColoringRenderer, MoversPictureChooseRenderer, MoversPictureFillBlankChooseRenderer, MoversReadingPassageRenderer, MoversLabelThePictureRenderer, MoversFillWordHintRenderer, MoversGridFillRenderer, MoversTrueFalseRenderer, MoversTrueFalseCorrectGroupRenderer, MoversFillInBlankGroupRenderer, MoversCrossOutWordGroupRenderer, MoversAnswerTheQuestionRenderer, MoversWriteSentencesRenderer, MoversWordOrderingRenderer, MoversWordOrderingGroupRenderer, MoversWordFillParagraphRenderer, MoversMatchByWritingAnswerRenderer, MoversMatchWordToPictureRenderer, MoversWordFillStructuredFormRenderer, MoversWordOrderAndMatchGroupRenderer, MoversMatchingWithLinesGroupRenderer, MoversCrosswordPuzzleRenderer, FindWordsInMatrixRenderer, } from './question-renderers';
 import { SpeakingQuestionRenderer } from './speaking/renderers';
-import { transformFillInBlank, transformWriteCorrectVerbForm, transformChooseCorrectAnswer, transformChooseTheCorrectAnswerGroup, transformChooseCorrectAdjective, transformWriteShortLetter, transformColorObjects, transformPictureChoose, transformPictureFillBlankChoose, transformReadingPassage, transformLabelPicture, transformFillWordHint, transformGridFill, transformAnswerTheQuestion, transformAnswerTheQuestionGroup, transformTrueFalse, transformTrueFalseGroup, transformTrueFalseCorrectGroup, transformFillInBlankGroup, transformWordOrdering, transformWordFillParagraph, transformMatchByWritingAnswer, transformMatchWordToPicture, transformWriteSentences, transformWordFillStructuredForm, transformWordOrderAndMatchGroup, transformMatchingWithLinesGroup, transformCrosswordPuzzle, transformFindWordsInMatrix, } from '../utils/question-transformers';
+import { transformFillInBlank, transformWriteCorrectVerbForm, transformChooseCorrectAnswer, transformChooseTheCorrectAnswerGroup, transformChooseCorrectAdjective, transformWriteShortLetter, transformColorObjects, transformPictureChoose, transformPictureFillBlankChoose, transformReadingPassage, transformLabelPicture, transformFillWordHint, transformGridFill, transformAnswerTheQuestion, transformAnswerTheQuestionGroup, transformTrueFalse, transformTrueFalseGroup, transformTrueFalseCorrectGroup, transformFillInBlankGroup, transformWordOrdering, transformWordOrderingGroupTake, transformWordFillParagraph, transformMatchByWritingAnswer, transformMatchWordToPicture, transformWriteSentences, transformWordFillStructuredForm, transformWordOrderAndMatchGroup, transformMatchingWithLinesGroup, transformCrosswordPuzzle, transformFindWordsInMatrix, } from '../utils/question-transformers';
 import { transformCrossOutWordGroup } from '../utils/cross-out-word-group.transformer';
 import { normalizeColoringAssignments } from '../utils/coloring-assignments';
 export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode = false, onExit, onPartComplete, onPartBack, speakingTheme, initialQuestionIndex, skipTeacherVideo, onTeacherIntroPlayed, currentQuestionIndex, }) {
@@ -55,7 +55,7 @@ export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode =
         }
         case 'CHOOSE_THE_CORRECT_ANSWER_GROUP': {
             const data = transformChooseTheCorrectAnswerGroup(questions);
-            return (_jsx(MoversChooseBestAnswerRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, audioUrl: data.audioUrl || part.audioUrl, example: data.example, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+            return (_jsx(MoversChooseBestAnswerRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, audioUrl: data.audioUrl || part.audioUrl, imageUrl: data.imageUrl, example: data.example, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
         }
         case 'CHOOSE_CORRECT_ADJECTIVE': {
             const data = transformChooseCorrectAdjective(questions);
@@ -181,6 +181,10 @@ export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode =
             const data = transformTrueFalse(questions);
             return (_jsx(MoversTrueFalseRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, imageUrl: data.imageUrl, groupContent: data.groupContent, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
         }
+        case 'WORD_ORDERING_GROUP': {
+            const data = transformWordOrderingGroupTake(questions);
+            return (_jsx(MoversWordOrderingGroupRenderer, { partNumber: partNo, partName: part.name, questionCount: data.questions.filter((q) => !q.isExample).length, instruction: part.instructions || data.instruction, data: data, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+        }
         case 'WORD_ORDERING': {
             const data = transformWordOrdering(questions);
             return (_jsx(MoversWordOrderingRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));

package/dist/components/exams/take/components/question-renderers/MoversWordOrderingGroupRenderer.d.ts

@@ -0,0 +1,13 @@
+import type { WordOrderingGroupPartData } from '../../utils/question-transformers';
+interface MoversWordOrderingGroupRendererProps {
+    partNumber: number;
+    partName?: string;
+    questionCount: number;
+    instruction: string;
+    data: WordOrderingGroupPartData;
+    answers: Record<string, string[] | undefined>;
+    onAnswerChange: (questionId: string, value: string[]) => void;
+    isReviewMode?: boolean;
+}
+export declare function MoversWordOrderingGroupRenderer({ partNumber, partName, questionCount, instruction, data, answers, onAnswerChange, isReviewMode, }: MoversWordOrderingGroupRendererProps): import("react").JSX.Element;
+export {};

package/dist/components/exams/take/components/question-renderers/MoversWordOrderingGroupRenderer.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+import { WordOrderingGroupClient } from '../../../../questions/types/word-ordering-group/WordOrderingGroupClient';
+export function MoversWordOrderingGroupRenderer({ partNumber, partName, questionCount, instruction, data, answers, onAnswerChange, isReviewMode = false, }) {
+    const userAnswers = data.questions.map((question) => {
+        if (question.isExample)
+            return question.answer;
+        return Array.isArray(answers[question.id]) ? answers[question.id] || [] : [];
+    });
+    return (_jsxs("div", { className: "w-full space-y-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, partName: partName, questionCount: questionCount }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction }), _jsx("div", { className: "mt-4", children: _jsx(WordOrderingGroupClient, { questionData: {
+                        instruction: data.instruction,
+                        items: data.questions.map((question) => ({
+                            words: question.words,
+                            answer: question.answer,
+                            isExample: question.isExample,
+                            points: question.points,
+                            questionNumber: question.questionNumber,
+                        })),
+                        explanation: data.explanation,
+                    }, isReviewMode: isReviewMode, userAnswers: userAnswers, onAnswerChange: (next) => {
+                        next.forEach((value, index) => {
+                            const target = data.questions[index];
+                            if (target && !target.isExample) {
+                                onAnswerChange(target.id, value);
+                            }
+                        });
+                    } }) })] }));
+}

package/dist/components/exams/take/components/question-renderers/index.d.ts

@@ -16,6 +16,7 @@ export { MoversCrossOutWordGroupRenderer } from './MoversCrossOutWordGroupRender
 export { MoversAnswerTheQuestionRenderer } from './MoversAnswerTheQuestionRenderer';
 export { MoversWriteSentencesRenderer } from './MoversWriteSentencesRenderer';
 export { MoversWordOrderingRenderer } from './MoversWordOrderingRenderer';
+export { MoversWordOrderingGroupRenderer } from './MoversWordOrderingGroupRenderer';
 export { MoversWordFillParagraphRenderer } from './MoversWordFillParagraphRenderer';
 export { MoversMatchByWritingAnswerRenderer } from './MoversMatchByWritingAnswerRenderer';
 export { MoversMatchWordToPictureRenderer } from './MoversMatchWordToPictureRenderer';

package/dist/components/exams/take/components/question-renderers/index.js

@@ -20,6 +20,7 @@ export { MoversCrossOutWordGroupRenderer } from './MoversCrossOutWordGroupRender
 export { MoversAnswerTheQuestionRenderer } from './MoversAnswerTheQuestionRenderer';
 export { MoversWriteSentencesRenderer } from './MoversWriteSentencesRenderer';
 export { MoversWordOrderingRenderer } from './MoversWordOrderingRenderer';
+export { MoversWordOrderingGroupRenderer } from './MoversWordOrderingGroupRenderer';
 export { MoversWordFillParagraphRenderer } from './MoversWordFillParagraphRenderer';
 export { MoversMatchByWritingAnswerRenderer } from './MoversMatchByWritingAnswerRenderer';
 export { MoversMatchWordToPictureRenderer } from './MoversMatchWordToPictureRenderer';

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

@@ -92,7 +92,8 @@ function findParentQuestion(subQuestionId, parts) {
             part.questionType === 'MATCHING_WITH_LINES_GROUP' ||
             part.questionType === 'WORD_ORDER_AND_MATCH_GROUP' ||
             part.questionType === 'SPONTANEOUS_QA_GROUP' ||
-            part.questionType === 'ANSWER_THE_QUESTION_GROUP') {
+            part.questionType === 'ANSWER_THE_QUESTION_GROUP' ||
+            part.questionType === 'WORD_ORDERING_GROUP') {
             const parent = part.questions.find((question) => subQuestionId.startsWith(`${question.id}-item-`));
             if (parent) {
                 return {
@@ -397,6 +398,12 @@ export function transformAnswersForSubmission(answers, parts) {
                     }
                     return { answers: [] };
                 }
+                if (parentType === 'WORD_ORDERING_GROUP') {
+                    if (Array.isArray(raw)) {
+                        return raw.filter((token) => typeof token === 'string');
+                    }
+                    return [];
+                }
                 if (parentType === 'WORD_ORDER_AND_MATCH_GROUP') {
                     if (raw && typeof raw === 'object' && !Array.isArray(raw)) {
                         const obj = raw;

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' | 'ANSWER_THE_QUESTION_GROUP' | 'TRUE_FALSE' | 'TRUE_FALSE_GROUP' | 'TRUE_FALSE_CORRECT_GROUP' | 'FILL_IN_BLANK_GROUP' | 'MATCHING_WITH_LINES_GROUP' | 'CROSS_OUT_WORD_GROUP' | 'WORD_ORDERING' | 'WORD_FILL_PARAGRAPH' | 'MATCH_BY_WRITING_ANSWER' | 'MATCH_WORD_TO_PICTURE' | 'WRITE_SENTENCES' | 'WORD_FILL_STRUCTURED_FORM' | 'CROSSWORD_PUZZLE' | 'FIND_WORDS_IN_MATRIX' | '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' | 'TRUE_FALSE_CORRECT_GROUP' | 'FILL_IN_BLANK_GROUP' | 'MATCHING_WITH_LINES_GROUP' | 'CROSS_OUT_WORD_GROUP' | 'WORD_ORDERING' | 'WORD_ORDERING_GROUP' | 'WORD_FILL_PARAGRAPH' | 'MATCH_BY_WRITING_ANSWER' | 'MATCH_WORD_TO_PICTURE' | 'WRITE_SENTENCES' | 'WORD_FILL_STRUCTURED_FORM' | 'CROSSWORD_PUZZLE' | 'FIND_WORDS_IN_MATRIX' | '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;
@@ -162,6 +162,7 @@ export declare function transformChooseTheCorrectAnswerGroup(questions: ApiQuest
     example?: import('../types').ChooseBestAnswerExample;
     instruction: string;
     audioUrl?: string;
+    imageUrl?: string;
 };
 export interface ChooseAdjectiveOption {
     id: string;
@@ -550,3 +551,17 @@ export interface MatchingWithLinesGroupPartData {
     explanation?: string;
 }
 export declare function transformMatchingWithLinesGroup(questions: ApiQuestion[]): MatchingWithLinesGroupPartData;
+export interface WordOrderingGroupQuestionItem {
+    id: string;
+    questionNumber: number;
+    words: string[];
+    answer: string[];
+    isExample: boolean;
+    points: number;
+}
+export interface WordOrderingGroupPartData {
+    questions: WordOrderingGroupQuestionItem[];
+    instruction: string;
+    explanation?: string;
+}
+export declare function transformWordOrderingGroupTake(questions: ApiQuestion[]): WordOrderingGroupPartData;

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

@@ -376,6 +376,16 @@ export function transformChooseCorrectAnswer(questions, optionsConfig) {
         instruction: firstContent?.instruction || 'CHOOSE THE CORRECT ANSWER',
     };
 }
+function asChooseAnswerOptionId(value) {
+    if (typeof value === 'string') {
+        return value.trim();
+    }
+    if (Array.isArray(value)) {
+        const first = value.find((item) => typeof item === 'string' && item.trim() !== '');
+        return typeof first === 'string' ? first.trim() : '';
+    }
+    return '';
+}
 export function transformChooseTheCorrectAnswerGroup(questions) {
     const parent = questions[0];
     const content = parent?.content;
@@ -416,11 +426,18 @@ export function transformChooseTheCorrectAnswerGroup(questions) {
         return trimmed !== '' ? trimmed : undefined;
     };
     const groupAudioUrl = toAudioUrl(content?.meta?.audioUrl);
+    const groupImageUrlRaw = toQuestionImageUrl(content?.meta?.imageUrl);
+    const groupImageUrl = Array.isArray(groupImageUrlRaw)
+        ? groupImageUrlRaw[0]
+        : groupImageUrlRaw;
     let example;
     if (exampleItem) {
         const exampleIndex = items.indexOf(exampleItem);
         const exOptions = mapOptions(exampleItem.content?.options, `${parent.id}-ex`);
-        const exCorrect = exampleItem.correctAnswer?.answer || parentCorrect[exampleIndex] || exOptions[0]?.id || '';
+        const exCorrect = asChooseAnswerOptionId(exampleItem.correctAnswer?.answer)
+            || asChooseAnswerOptionId(parentCorrect[exampleIndex])
+            || exOptions[0]?.id
+            || '';
         const exampleImageUrl = toQuestionImageUrl(exampleItem.content?.imageUrl);
         const exampleAudioUrl = toAudioUrl(exampleItem.content?.audioUrl);
         example = {
@@ -436,7 +453,9 @@ export function transformChooseTheCorrectAnswerGroup(questions) {
     const transformed = regularItems.map((item) => {
         const itemIndex = items.indexOf(item);
         const options = mapOptions(item.content?.options, `${parent.id}-item-${itemIndex}`);
-        const correctId = item.correctAnswer?.answer || parentCorrect[itemIndex] || '';
+        const correctId = asChooseAnswerOptionId(item.correctAnswer?.answer)
+            || asChooseAnswerOptionId(parentCorrect[itemIndex])
+            || '';
         const itemImageUrl = toQuestionImageUrl(item.content?.imageUrl);
         const itemAudioUrl = toAudioUrl(item.content?.audioUrl);
         return {
@@ -456,6 +475,7 @@ export function transformChooseTheCorrectAnswerGroup(questions) {
         example,
         instruction: content?.meta?.instruction || 'Choose the correct answer.',
         ...(groupAudioUrl ? { audioUrl: groupAudioUrl } : {}),
+        ...(groupImageUrl ? { imageUrl: groupImageUrl } : {}),
     };
 }
 export function transformChooseCorrectAdjective(questions) {
@@ -1392,3 +1412,28 @@ export function transformMatchingWithLinesGroup(questions) {
         explanation: parent?.explanation,
     };
 }
+export function transformWordOrderingGroupTake(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
+        : [];
+    return {
+        questions: items.map((item, index) => {
+            const isExample = item.isExample === true;
+            const fromItem = Array.isArray(item.correctAnswer?.answer) ? item.correctAnswer.answer : [];
+            const fromParent = Array.isArray(parentCorrect[index]) ? parentCorrect[index] : [];
+            return {
+                id: `${parent?.id || 'q'}-item-${index}`,
+                questionNumber: item.questionNumber || index + 1,
+                words: Array.isArray(item.content?.words) ? item.content.words : [],
+                answer: fromItem.length ? fromItem : fromParent,
+                isExample,
+                points: isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+            };
+        }),
+        instruction: content.meta?.instruction || 'Order the words.',
+        explanation: parent?.explanation,
+    };
+}

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

@@ -347,6 +347,21 @@ export const QUESTION_TYPE_CONFIG = {
         requiresContent: true,
         hasDedicatedComponent: true,
     },
+    MATCH_COLUMNS_TO_MAKE_SENTENCES: {
+        label: 'Ghép cột thành câu',
+        requiresContent: true,
+        hasDedicatedComponent: true,
+    },
+    MATCH_WORD_TO_PICTURE_GROUP: {
+        label: 'Nối từ với tranh (nhóm)',
+        requiresContent: true,
+        hasDedicatedComponent: true,
+    },
+    WORD_ORDERING_GROUP: {
+        label: 'Sắp xếp từ (nhóm)',
+        requiresContent: true,
+        hasDedicatedComponent: true,
+    },
 };
 export const QUESTION_TYPES_WITH_DEDICATED_COMPONENTS = [
     'FILL_IN_BLANK',
@@ -398,6 +413,9 @@ export const QUESTION_TYPES_WITH_DEDICATED_COMPONENTS = [
     'WORD_FILL_STRUCTURED_FORM',
     'CROSSWORD_PUZZLE',
     'FIND_WORDS_IN_MATRIX',
+    'MATCH_COLUMNS_TO_MAKE_SENTENCES',
+    'MATCH_WORD_TO_PICTURE_GROUP',
+    'WORD_ORDERING_GROUP',
 ];
 export function getQuestionTypeLabel(type) {
     return QUESTION_TYPE_CONFIG[type]?.label || type;

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

@@ -24,6 +24,7 @@ export interface ChooseTheCorrectAnswerGroupData {
     instruction: string;
     passage?: string;
     audioUrl?: string;
+    imageUrl?: ChooseTheCorrectAnswerGroupImageUrl;
     items: ChooseTheCorrectAnswerGroupItemData[];
     explanation?: string;
     points?: number;

package/dist/components/questions/_shared/types/index.d.ts

@@ -15,4 +15,5 @@ export * from './true-false-correct-group.type';
 export * from './fill-in-blank-group.type';
 export * from './match-word-to-picture.type';
 export * from './matching-with-lines-group.type';
+export * from './match-columns-to-make-sentences.type';
 export * from './spontaneous-qa-group.type';

package/dist/components/questions/_shared/types/index.js

@@ -15,4 +15,5 @@ export * from './true-false-correct-group.type';
 export * from './fill-in-blank-group.type';
 export * from './match-word-to-picture.type';
 export * from './matching-with-lines-group.type';
+export * from './match-columns-to-make-sentences.type';
 export * from './spontaneous-qa-group.type';

package/dist/components/questions/_shared/types/match-columns-to-make-sentences.type.d.ts

@@ -0,0 +1,56 @@
+import type { MutableRefObject } from 'react';
+export declare const MATCH_COLUMNS_TO_MAKE_SENTENCE_ITEM_TYPE: "MATCH_COLUMNS_TO_MAKE_SENTENCE";
+export declare const MATCH_COLUMNS_DEFAULT_INSTRUCTION = "Match the information to make sentences. You can use the same words more than once.";
+export type MatchColumnsColumnRole = 'stem' | 'choice';
+export interface MatchColumnsFragment {
+    id: string;
+    text: string;
+}
+export interface MatchColumnsColumn {
+    id: string;
+    label?: string;
+    role: MatchColumnsColumnRole;
+    fragments: MatchColumnsFragment[];
+}
+export interface MatchColumnsItemAnswer {
+    fragmentIds: string[];
+    sentence: string;
+}
+export interface MatchColumnsStudentItemAnswer {
+    fragmentIds: string[];
+    sentence: string;
+}
+export interface MatchColumnsGroupItemData {
+    stemFragmentId: string;
+    fragmentIds: string[];
+    sentence: string;
+    isExample?: boolean;
+    points: number;
+    questionNumber: number;
+}
+export interface MatchColumnsGroupData {
+    title?: string;
+    instruction: string;
+    columns: MatchColumnsColumn[];
+    items: MatchColumnsGroupItemData[];
+    explanation?: string;
+    points?: number;
+}
+export interface MatchColumnsGroupCreatorProps {
+    initialData?: MatchColumnsGroupData;
+    onSave?: (data: MatchColumnsGroupData) => void;
+    onCancel?: () => void;
+    onChange?: (data: MatchColumnsGroupData) => void;
+    externalErrors?: string[];
+    onUnsavedChangesChange?: (hasUnsavedChanges: boolean) => void;
+    validationRef?: MutableRefObject<{
+        triggerValidation: () => Promise<boolean>;
+        getFormData?: () => MatchColumnsGroupData;
+    } | null>;
+}
+export interface MatchColumnsGroupClientProps {
+    questionData: MatchColumnsGroupData;
+    isReviewMode?: boolean;
+    userAnswers?: MatchColumnsStudentItemAnswer[];
+    onAnswerChange?: (answers: MatchColumnsStudentItemAnswer[]) => void;
+}

package/dist/components/questions/_shared/types/match-columns-to-make-sentences.type.js

@@ -0,0 +1,2 @@
+export const MATCH_COLUMNS_TO_MAKE_SENTENCE_ITEM_TYPE = 'MATCH_COLUMNS_TO_MAKE_SENTENCE';
+export const MATCH_COLUMNS_DEFAULT_INSTRUCTION = 'Match the information to make sentences. You can use the same words more than once.';

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

@@ -0,0 +1,35 @@
+import type { MutableRefObject } from 'react';
+export declare const MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION = "Look and complete.";
+export declare const MATCH_WORD_TO_PICTURE_ITEM_TYPE: "MATCH_WORD_TO_PICTURE";
+export interface MatchWordToPictureGroupItemData {
+    imageUrl: string;
+    correctAnswer: string;
+    isExample?: boolean;
+    points: number;
+    questionNumber: number;
+}
+export interface MatchWordToPictureGroupData {
+    instruction: string;
+    wordBank: string[];
+    items: MatchWordToPictureGroupItemData[];
+    explanation?: string;
+    points?: number;
+}
+export interface MatchWordToPictureGroupCreatorProps {
+    initialData?: MatchWordToPictureGroupData;
+    onSave?: (data: MatchWordToPictureGroupData) => void;
+    onCancel?: () => void;
+    onChange?: (data: MatchWordToPictureGroupData) => void;
+    externalErrors?: string[];
+    onUnsavedChangesChange?: (hasUnsavedChanges: boolean) => void;
+    validationRef?: MutableRefObject<{
+        triggerValidation: () => Promise<boolean>;
+        getFormData?: () => MatchWordToPictureGroupData;
+    } | null>;
+}
+export interface MatchWordToPictureGroupClientProps {
+    questionData: MatchWordToPictureGroupData;
+    isReviewMode?: boolean;
+    userAnswers?: string[];
+    onAnswerChange?: (answers: string[]) => void;
+}

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

@@ -0,0 +1,2 @@
+export const MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION = 'Look and complete.';
+export const MATCH_WORD_TO_PICTURE_ITEM_TYPE = 'MATCH_WORD_TO_PICTURE';

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

@@ -0,0 +1,34 @@
+import type { MutableRefObject } from 'react';
+export declare const WORD_ORDERING_GROUP_DEFAULT_INSTRUCTION = "Order the words.";
+export declare const WORD_ORDERING_ITEM_TYPE: "WORD_ORDERING";
+export interface WordOrderingGroupItemData {
+    words: string[];
+    answer: string[];
+    isExample?: boolean;
+    points: number;
+    questionNumber: number;
+}
+export interface WordOrderingGroupData {
+    instruction: string;
+    items: WordOrderingGroupItemData[];
+    explanation?: string;
+    points?: number;
+}
+export interface WordOrderingGroupCreatorProps {
+    initialData?: WordOrderingGroupData;
+    onSave?: (data: WordOrderingGroupData) => void;
+    onCancel?: () => void;
+    onChange?: (data: WordOrderingGroupData) => void;
+    externalErrors?: string[];
+    onUnsavedChangesChange?: (hasUnsavedChanges: boolean) => void;
+    validationRef?: MutableRefObject<{
+        triggerValidation: () => Promise<boolean>;
+        getFormData?: () => WordOrderingGroupData;
+    } | null>;
+}
+export interface WordOrderingGroupClientProps {
+    questionData: WordOrderingGroupData;
+    isReviewMode?: boolean;
+    userAnswers?: string[][];
+    onAnswerChange?: (answers: string[][]) => void;
+}

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

@@ -0,0 +1,2 @@
+export const WORD_ORDERING_GROUP_DEFAULT_INSTRUCTION = 'Order the words.';
+export const WORD_ORDERING_ITEM_TYPE = 'WORD_ORDERING';

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

@@ -68,6 +68,9 @@ const getQuestionTypeName = (type) => {
         'READ_PASSAGE_AND_ANSWER_QUESTIONS': 'Đọc hiểu',
         'MATCH_WORD_TO_PICTURE': 'Nối từ với tranh',
         'MATCHING_WITH_LINES_GROUP': 'Nối bằng đường kẻ (nhóm)',
+        'MATCH_COLUMNS_TO_MAKE_SENTENCES': 'Ghép cột thành câu',
+        'MATCH_WORD_TO_PICTURE_GROUP': 'Nối từ với tranh (nhóm)',
+        'WORD_ORDERING_GROUP': 'Sắp xếp từ (nhóm)',
     };
     return type ? typeMap[type] || type.replace(/_/g, ' ').toLowerCase() : 'Chưa xác định';
 };

package/dist/components/questions/components/QuestionTypeSelector.js

@@ -28,6 +28,9 @@ export function QuestionTypeSelector({ value, onValueChange, disabled, }) {
         'MATCH_BY_WRITING_ANSWER',
         'MATCH_WORD_TO_PICTURE',
         'MATCHING_WITH_LINES_GROUP',
+        'MATCH_COLUMNS_TO_MAKE_SENTENCES',
+        'MATCH_WORD_TO_PICTURE_GROUP',
+        'WORD_ORDERING_GROUP',
         'WRITE_SENTENCES',
         'FILL_IN_BLANK_GROUP',
     ];

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

@@ -49,6 +49,9 @@ import { wordFillStructuredFormRegistration } from '../types/word-fill-structure
 import { wordOrderAndMatchGroupRegistration } from '../types/word-order-and-match-group/register';
 import { crosswordPuzzleRegistration } from '../types/crossword-puzzle/register';
 import { findWordsInMatrixRegistration } from '../types/find-words-in-matrix/register';
+import { matchColumnsToMakeSentencesRegistration } from '../types/match-columns-to-make-sentences/register';
+import { matchWordToPictureGroupRegistration } from '../types/match-word-to-picture-group/register';
+import { wordOrderingGroupRegistration } from '../types/word-ordering-group/register';
 // ─── Registry map ───────────────────────────────────────────────────────────
 export const questionTypeRegistry = {
     CHOOSE_THE_CORRECT_ANSWER: chooseTheCorrectAnswerRegistration,
@@ -101,4 +104,7 @@ export const questionTypeRegistry = {
     WORD_FILL_STRUCTURED_FORM: wordFillStructuredFormRegistration,
     CROSSWORD_PUZZLE: crosswordPuzzleRegistration,
     FIND_WORDS_IN_MATRIX: findWordsInMatrixRegistration,
+    MATCH_COLUMNS_TO_MAKE_SENTENCES: matchColumnsToMakeSentencesRegistration,
+    MATCH_WORD_TO_PICTURE_GROUP: matchWordToPictureGroupRegistration,
+    WORD_ORDERING_GROUP: wordOrderingGroupRegistration,
 };

package/dist/components/questions/types/choose-the-correct-answer-group/ChooseTheCorrectAnswerGroupClient.js

@@ -34,7 +34,7 @@ export function ChooseTheCorrectAnswerGroupClient({ questionData, isReviewMode =
         next[itemIndex] = optionId;
         onAnswerChange(next);
     };
-    return (_jsxs("div", { className: "space-y-4", children: [questionData.instruction && (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800", children: questionData.instruction })), questionData.audioUrl && _jsx(ClientAudio, { url: questionData.audioUrl }), 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 text-gray-800 leading-relaxed", dangerouslySetInnerHTML: { __html: questionData.passage } })] })), items.map((item, itemIndex) => {
+    return (_jsxs("div", { className: "space-y-4", children: [questionData.instruction && (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800", children: questionData.instruction })), questionData.audioUrl && _jsx(ClientAudio, { url: questionData.audioUrl }), toChooseAnswerGroupImageUrls(questionData.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toChooseAnswerGroupImageUrls(questionData.imageUrl).map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh nhóm (${imageIndex + 1})` }, `group-image-${imageIndex}`))) })), 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 text-gray-800 leading-relaxed", dangerouslySetInnerHTML: { __html: questionData.passage } })] })), items.map((item, itemIndex) => {
                 const selectedId = userAnswers[itemIndex];
                 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-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: "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' }), item.audioUrl && _jsx(ClientAudio, { url: item.audioUrl }), toChooseAnswerGroupImageUrls(item.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toChooseAnswerGroupImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1} (${imageIndex + 1})` }, `${item.questionNumber}-${imageIndex}`))) })), item.optionType === 'image' ? (_jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: item.options.map((option, optionIndex) => {

package/dist/components/questions/types/choose-the-correct-answer-group/ChooseTheCorrectAnswerGroupCreator.js

@@ -70,6 +70,7 @@ export function ChooseTheCorrectAnswerGroupCreator({ initialData, onChange, exte
     const [instruction, setInstruction] = useState(initialData?.instruction || 'Choose the correct answer.');
     const [passage, setPassage] = useState(initialData?.passage || '');
     const [audioUrl, setAudioUrl] = useState(initialData?.audioUrl || '');
+    const [imageUrl, setImageUrl] = useState(toChooseAnswerGroupImageUrls(initialData?.imageUrl)[0] || '');
     const [items, setItems] = useState(() => normalizeItems(initialData?.items));
     const [explanation, setExplanation] = useState(initialData?.explanation || '');
     const [isClientMode, setIsClientMode] = useState(false);
@@ -80,10 +81,11 @@ export function ChooseTheCorrectAnswerGroupCreator({ initialData, onChange, exte
         onChangeRef.current = onChange;
     }, [onChange]);
     const isContentEmpty = (html) => !html || html === '<p></p>' || html === '<p><br></p>' || html.trim() === '';
-    const buildPayload = (nextInstruction = instruction, nextPassage = passage, nextItems = items, nextExplanation = explanation, nextAudioUrl = audioUrl) => ({
+    const buildPayload = (nextInstruction = instruction, nextPassage = passage, nextItems = items, nextExplanation = explanation, nextAudioUrl = audioUrl, nextImageUrl = imageUrl) => ({
         instruction: nextInstruction,
         ...(!isContentEmpty(nextPassage) ? { passage: nextPassage.trim() } : {}),
         ...(nextAudioUrl.trim() ? { audioUrl: nextAudioUrl.trim() } : {}),
+        ...(nextImageUrl.trim() ? { imageUrl: nextImageUrl.trim() } : {}),
         items: nextItems,
         explanation: nextExplanation,
         points: sumPoints(nextItems),
@@ -100,7 +102,7 @@ export function ChooseTheCorrectAnswerGroupCreator({ initialData, onChange, exte
         previousPayloadRef.current = serialized;
         onUnsavedChangesChange?.(true);
         debouncedOnChange(payload);
-    }, [instruction, passage, audioUrl, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
+    }, [instruction, passage, audioUrl, imageUrl, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
     const validate = () => {
         const nextErrors = [];
         if (!instruction.trim()) {
@@ -165,7 +167,7 @@ export function ChooseTheCorrectAnswerGroupCreator({ initialData, onChange, exte
         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\u1EC9nh s\u1EEDa"] }) }), _jsx(ChooseTheCorrectAnswerGroupClient, { questionData: buildPayload(), isReviewMode: true })] }));
     }
     const allErrors = [...errors, ...(externalErrors || [])];
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex justify-end", children: _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 ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }) }), _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: "Choose the correct answer." })] }), _jsx("div", { className: "space-y-2", children: _jsx(FileUpload, { id: "choose-answer-group-audio", label: "Audio chung (tu\u1EF3 ch\u1ECDn)", accept: "audio/*", value: audioUrl, onChange: setAudioUrl, maxSize: 20, placeholder: "Upload file audio ho\u1EB7c paste URL", autoUpload: true, prefix: "questions", showPlayButton: true }) }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "N\u1ED9i dung b\u00E0i \u0111\u1ECDc (Passage - Tu\u1EF3 ch\u1ECDn)" }), _jsx(RichTextEditor, { value: passage, onChange: setPassage, minHeightClassName: "min-h-[160px]" })] }), _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, {
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex justify-end", children: _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 ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }) }), _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: "Choose the correct answer." })] }), _jsx("div", { className: "space-y-2", children: _jsx(FileUpload, { id: "choose-answer-group-audio", label: "Audio chung (tu\u1EF3 ch\u1ECDn)", accept: "audio/*", value: audioUrl, onChange: setAudioUrl, maxSize: 20, placeholder: "Upload file audio ho\u1EB7c paste URL", autoUpload: true, prefix: "questions", showPlayButton: true }) }), _jsx("div", { className: "space-y-2", children: _jsx(FileUpload, { id: "choose-answer-group-image", label: "H\u00ECnh \u1EA3nh chung (tu\u1EF3 ch\u1ECDn)", accept: "image/*", value: imageUrl, onChange: setImageUrl, maxSize: 5, placeholder: "Upload \u1EA3nh nh\u00F3m ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }) }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "N\u1ED9i dung b\u00E0i \u0111\u1ECDc (Passage - Tu\u1EF3 ch\u1ECDn)" }), _jsx(RichTextEditor, { value: passage, onChange: setPassage, minHeightClassName: "min-h-[160px]" })] }), _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: "A place for someone to stay or live is called" })] }), _jsx("div", { className: "space-y-2", children: _jsx(FileUpload, { id: `choose-answer-item-audio-${itemIndex}`, label: "Audio c\u00E2u h\u1ECFi (tu\u1EF3 ch\u1ECDn)", accept: "audio/*", value: item.audioUrl || '', onChange: (url) => updateItem(itemIndex, { audioUrl: url }), maxSize: 20, placeholder: "Upload file audio ho\u1EB7c paste URL", autoUpload: true, prefix: "questions", showPlayButton: true }) }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "flex items-center gap-2", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-teal-500" }), "H\u00ECnh \u1EA3nh (tu\u1EF3 ch\u1ECDn)"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => {