@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

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

@@ -0,0 +1,5 @@
+import type { SpontaneousQaGroupPartData, SpontaneousQaGroupQuestionData } from '../../_shared/types/spontaneous-qa-group.type';
+export declare function createEmptyQuestion(questionNumber: number): SpontaneousQaGroupQuestionData;
+export declare function createEmptyPart(partNumber: number): SpontaneousQaGroupPartData;
+export declare function normalizeParts(rawParts: SpontaneousQaGroupPartData[] | undefined): SpontaneousQaGroupPartData[];
+export declare function sumPartPoints(parts: SpontaneousQaGroupPartData[]): number;

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

@@ -0,0 +1,43 @@
+export function createEmptyQuestion(questionNumber) {
+    return {
+        questionText: '',
+        inputType: 'TEXT',
+        audioUrl: '',
+        expectedAnswers: [''],
+        points: 1,
+        questionNumber,
+    };
+}
+export function createEmptyPart(partNumber) {
+    return {
+        partNumber,
+        partTitle: `PART ${partNumber}`,
+        topic: '',
+        questions: [createEmptyQuestion(1)],
+    };
+}
+export function normalizeParts(rawParts) {
+    if (!Array.isArray(rawParts) || rawParts.length === 0) {
+        return [createEmptyPart(1)];
+    }
+    return rawParts.map((part, partIndex) => ({
+        partNumber: part.partNumber || partIndex + 1,
+        partTitle: part.partTitle || `PART ${partIndex + 1}`,
+        topic: part.topic || '',
+        questions: Array.isArray(part.questions) && part.questions.length > 0
+            ? part.questions.map((question, questionIndex) => ({
+                questionText: question.questionText || '',
+                inputType: question.inputType === 'AUDIO' ? 'AUDIO' : 'TEXT',
+                audioUrl: question.audioUrl || '',
+                expectedAnswers: Array.isArray(question.expectedAnswers) && question.expectedAnswers.length > 0
+                    ? question.expectedAnswers
+                    : [''],
+                points: typeof question.points === 'number' ? question.points : 1,
+                questionNumber: question.questionNumber || questionIndex + 1,
+            }))
+            : [createEmptyQuestion(1)],
+    }));
+}
+export function sumPartPoints(parts) {
+    return parts.reduce((total, part) => (total + part.questions.reduce((partTotal, question) => (partTotal + (typeof question.points === 'number' ? question.points : 1)), 0)), 0);
+}

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

@@ -0,0 +1,14 @@
+export interface SpontaneousQaGroupFlatChild {
+    flattenIndex: number;
+    partIndex: number;
+    questionIndex: number;
+    partNumber: number;
+    partTitle: string;
+    topic: string;
+    questionText: string;
+    audioUrl: string;
+    inputType: 'TEXT' | 'AUDIO';
+    expectedAnswers: string[];
+    points: number;
+}
+export declare function flattenSpontaneousQaGroupContent(content: unknown): SpontaneousQaGroupFlatChild[];

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

@@ -0,0 +1,69 @@
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function asRecord(value) {
+    return isRecord(value) ? value : {};
+}
+function asString(value, fallback = '') {
+    return typeof value === 'string' ? value : fallback;
+}
+function asNumber(value, fallback) {
+    return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+}
+function normalizeExpectedAnswers(value) {
+    if (!Array.isArray(value)) {
+        return [];
+    }
+    return value
+        .filter((item) => typeof item === 'string')
+        .map((item) => item.trim())
+        .filter((item) => item !== '');
+}
+export function flattenSpontaneousQaGroupContent(content) {
+    const root = asRecord(content);
+    const items = Array.isArray(root.items) ? root.items : [];
+    const flattened = [];
+    const hasNestedParts = items.some((item) => Array.isArray(asRecord(item).questions));
+    if (hasNestedParts) {
+        items.forEach((rawPart, partIndex) => {
+            const part = asRecord(rawPart);
+            const questions = Array.isArray(part.questions) ? part.questions : [];
+            questions.forEach((rawChild, questionIndex) => {
+                const child = asRecord(rawChild);
+                const childContent = asRecord(child.content);
+                flattened.push({
+                    flattenIndex: flattened.length,
+                    partIndex,
+                    questionIndex,
+                    partNumber: asNumber(part.partNumber, partIndex + 1),
+                    partTitle: asString(part.partTitle),
+                    topic: asString(part.topic),
+                    questionText: asString(childContent.questionText),
+                    audioUrl: asString(childContent.audioUrl),
+                    inputType: asString(childContent.inputType) === 'AUDIO' ? 'AUDIO' : 'TEXT',
+                    expectedAnswers: normalizeExpectedAnswers(asRecord(child.correctAnswer).expectedAnswers),
+                    points: asNumber(child.points, 1),
+                });
+            });
+        });
+        return flattened;
+    }
+    items.forEach((rawChild, index) => {
+        const child = asRecord(rawChild);
+        const childContent = asRecord(child.content);
+        flattened.push({
+            flattenIndex: index,
+            partIndex: 0,
+            questionIndex: index,
+            partNumber: 1,
+            partTitle: '',
+            topic: '',
+            questionText: asString(childContent.questionText),
+            audioUrl: asString(childContent.audioUrl),
+            inputType: asString(childContent.inputType) === 'AUDIO' ? 'AUDIO' : 'TEXT',
+            expectedAnswers: normalizeExpectedAnswers(asRecord(child.correctAnswer).expectedAnswers),
+            points: asNumber(child.points, 1),
+        });
+    });
+    return flattened;
+}

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

@@ -0,0 +1,2 @@
+export * from './SpontaneousQaGroupCreator';
+export * from './SpontaneousQaGroupClient';

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

@@ -0,0 +1,2 @@
+export * from './SpontaneousQaGroupCreator';
+export * from './SpontaneousQaGroupClient';

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

@@ -0,0 +1,2 @@
+import type { QuestionTypeRegistration } from '../../creator/question-type-registry';
+export declare const spontaneousQaGroupRegistration: QuestionTypeRegistration;

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

@@ -0,0 +1,139 @@
+import { SpontaneousQaGroupCreator } from './SpontaneousQaGroupCreator';
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function asRecord(value) {
+    return isRecord(value) ? value : {};
+}
+function asString(value, fallback = '') {
+    return typeof value === 'string' ? value : fallback;
+}
+function asNumber(value, fallback) {
+    return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+}
+function normalizeExpectedAnswers(value) {
+    if (!Array.isArray(value)) {
+        return [''];
+    }
+    const answers = value
+        .filter((item) => typeof item === 'string')
+        .map((item) => item);
+    return answers.length > 0 ? answers : [''];
+}
+function createEmptyQuestion(questionNumber) {
+    return {
+        questionText: '',
+        inputType: 'TEXT',
+        audioUrl: '',
+        expectedAnswers: [''],
+        points: 1,
+        questionNumber,
+    };
+}
+function createEmptyPart(partNumber) {
+    return {
+        partNumber,
+        partTitle: `PART ${partNumber}`,
+        topic: '',
+        questions: [createEmptyQuestion(1)],
+    };
+}
+function mapQuestion(item, index, fallbackAnswers) {
+    const record = asRecord(item);
+    const content = asRecord(record.content);
+    const correctAnswer = asRecord(record.correctAnswer);
+    const expected = normalizeExpectedAnswers(correctAnswer.expectedAnswers ?? fallbackAnswers);
+    return {
+        questionText: asString(content.questionText) || asString(record.questionText),
+        inputType: asString(content.inputType) === 'AUDIO' ? 'AUDIO' : 'TEXT',
+        audioUrl: asString(content.audioUrl),
+        expectedAnswers: expected,
+        points: asNumber(record.points, 1),
+        questionNumber: asNumber(record.questionNumber, index + 1),
+    };
+}
+function mapPart(item, index) {
+    const record = asRecord(item);
+    const questions = Array.isArray(record.questions) ? record.questions : [];
+    return {
+        partNumber: asNumber(record.partNumber, index + 1),
+        partTitle: asString(record.partTitle, `PART ${index + 1}`),
+        topic: asString(record.topic),
+        questions: questions.length > 0
+            ? questions.map((question, questionIndex) => mapQuestion(question, questionIndex))
+            : [createEmptyQuestion(1)],
+    };
+}
+function sumPoints(parts) {
+    return parts.reduce((total, part) => (total + part.questions.reduce((partTotal, question) => partTotal + (question.points || 0), 0)), 0);
+}
+export const spontaneousQaGroupRegistration = {
+    component: SpontaneousQaGroupCreator,
+    transformInitialData: (initialData) => {
+        const content = asRecord(initialData?.content);
+        const answer = asRecord(initialData?.answer);
+        const correctAnswer = asRecord(initialData?.correctAnswer || answer.correctAnswer);
+        const explanation = asString(initialData?.explanation || answer.explanation);
+        if (Array.isArray(content.items) && content.items.length > 0) {
+            const hasNestedParts = content.items.some((item) => Array.isArray(asRecord(item).questions));
+            const parts = hasNestedParts
+                ? content.items.map((item, index) => mapPart(item, index))
+                : [mapPart({
+                        partNumber: 1,
+                        partTitle: 'PART 1',
+                        topic: '',
+                        questions: content.items,
+                    }, 0)];
+            return {
+                instruction: asString(asRecord(content.meta).instruction, 'In pairs, ask and answer the questions.'),
+                parts,
+                explanation,
+                points: sumPoints(parts),
+            };
+        }
+        if (Array.isArray(answer.parts) && answer.parts.length > 0) {
+            return {
+                instruction: asString(answer.instruction, 'In pairs, ask and answer the questions.'),
+                parts: answer.parts,
+                explanation,
+                points: asNumber(answer.points, 1),
+            };
+        }
+        return {
+            instruction: 'In pairs, ask and answer the questions.',
+            parts: [createEmptyPart(1)],
+            explanation,
+            points: 1,
+        };
+    },
+    getExtraProps: (ctx) => ({
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+    }),
+    wrapOnSave: (data, ctx) => {
+        const payload = data;
+        return {
+            type: ctx.questionType,
+            content: ctx.state.content,
+            points: payload.points ?? ctx.state.points ?? 1,
+            level: ctx.state.level,
+            difficulty: ctx.state.difficulty,
+            skill: ctx.state.skill,
+            answer: payload,
+            explanation: payload.explanation || '',
+        };
+    },
+    wrapOnChange: (data, ctx) => {
+        const payload = data;
+        return {
+            type: ctx.questionType,
+            content: ctx.state.content,
+            points: payload.points ?? ctx.state.points ?? 1,
+            level: ctx.state.level,
+            difficulty: ctx.state.difficulty,
+            skill: ctx.state.skill,
+            answer: payload,
+            explanation: payload.explanation || '',
+        };
+    },
+};

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

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

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

@@ -0,0 +1,52 @@
+const CHILD_QUESTION_TYPE = 'SPONTANEOUS_QA';
+function normalizeExpectedAnswers(value) {
+    if (!Array.isArray(value)) {
+        return [];
+    }
+    return value
+        .filter((item) => typeof item === 'string')
+        .map((item) => item.trim())
+        .filter((item) => item !== '');
+}
+function sumPoints(parts) {
+    return parts.reduce((total, part) => (total + part.questions.reduce((partTotal, question) => (partTotal + (typeof question.points === 'number' ? question.points : 1)), 0)), 0);
+}
+function toApiQuestion(question, index) {
+    const inputType = question.inputType === 'AUDIO' ? 'AUDIO' : 'TEXT';
+    return {
+        questionType: CHILD_QUESTION_TYPE,
+        questionNumber: question.questionNumber || index + 1,
+        points: typeof question.points === 'number' ? question.points : 1,
+        content: {
+            inputType,
+            questionText: question.questionText || '',
+            audioUrl: question.audioUrl || '',
+        },
+        correctAnswer: {
+            expectedAnswers: normalizeExpectedAnswers(question.expectedAnswers),
+        },
+    };
+}
+export const transformSpontaneousQaGroup = (question) => {
+    const answerData = question.answer;
+    const parts = Array.isArray(answerData?.parts) ? answerData.parts : [];
+    const apiItems = parts.map((part, partIndex) => ({
+        partNumber: part.partNumber || partIndex + 1,
+        partTitle: part.partTitle || '',
+        topic: part.topic || '',
+        questions: (part.questions || []).map((child, questionIndex) => (toApiQuestion(child, questionIndex))),
+    }));
+    const flattenedAnswers = apiItems.flatMap((part) => (part.questions.map((child) => child.correctAnswer)));
+    return {
+        apiContent: {
+            meta: {
+                instruction: answerData?.instruction || 'In pairs, ask and answer the questions.',
+            },
+            items: apiItems,
+        },
+        apiCorrectAnswer: {
+            answer: flattenedAnswers,
+        },
+        totalPoints: sumPoints(parts),
+    };
+};

package/dist/components/questions/types/true-false/TrueFalseClient.js

@@ -1 +1,75 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t,useEffect as a}from"react";import{Check as s,X as d,CircleHelp as l}from"lucide-react";import{usePresignedFileUrl as n}from"../../../../shared/lib/hooks";import{cn as i}from"../../../../shared/lib/utils";export function TrueFalseClient({questionData:o,onSubmit:c,isReviewMode:m=!1,userAnswer:g}){const[b,h]=t(void 0!==g?g:void 0),{previewUrl:x,isLoading:u}=n(o.imageUrl||"");a(()=>{void 0!==g&&h(g)},[g]);const w=e=>{m||(h(e),c?.(e))},f=void 0!==b,p=m&&b===o.answer;return e("div",{className:"space-y-4",children:r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:[r("div",{className:"flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3",children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-emerald-500 to-teal-600 text-white shadow-sm",children:e(l,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:"Đúng / Sai"})]}),m&&f&&r("div",{className:i("flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold",p?"bg-green-100 text-green-700":"bg-red-100 text-red-700"),children:[e(p?s:d,{className:"h-3.5 w-3.5"}),p?"Đúng":"Sai"]})]}),r("div",{className:"space-y-5 p-5",children:[e("div",{className:"rounded-lg border border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-4",children:e("h3",{className:"text-base font-semibold leading-relaxed text-gray-800",children:o.question||"Chưa nhập câu hỏi"})}),(x||o.imageUrl)&&r("div",{className:"overflow-hidden rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100",children:[e("div",{className:"border-b border-gray-100 px-3 py-1.5",children:r("div",{className:"flex items-center gap-1.5",children:[e("div",{className:"h-2 w-2 rounded-full bg-red-400"}),e("div",{className:"h-2 w-2 rounded-full bg-yellow-400"}),e("div",{className:"h-2 w-2 rounded-full bg-green-400"}),e("span",{className:"ml-2 text-xs font-medium text-gray-500",children:"Hình ảnh"})]})}),e("div",{className:"flex items-center justify-center p-4",children:u?e("div",{className:"flex h-48 items-center justify-center",children:e("div",{className:"h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-blue-500"})}):e("img",{src:x||o.imageUrl,alt:"Question illustration",className:"max-h-56 w-auto rounded-md object-contain"})})]}),r("div",{className:"space-y-2.5",children:[e("span",{className:"text-xs font-medium uppercase tracking-wider text-gray-500",children:"Chọn đáp án"}),r("div",{className:"grid grid-cols-2 gap-4",children:[r("button",{type:"button",onClick:()=>w(!0),disabled:m,className:i("group flex items-center justify-center gap-3 rounded-xl border-2 p-4 transition-all",m?!0===o.answer?"border-green-400 bg-green-50":!0===b?"border-red-400 bg-red-50":"border-gray-200 bg-gray-50":!0===b?"border-emerald-500 bg-emerald-50 shadow-sm ring-2 ring-emerald-100":"border-gray-200 bg-white hover:border-emerald-300 hover:bg-emerald-50/50 hover:shadow-sm"),children:[e("div",{className:i("flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold transition-all",m?!0===o.answer?"bg-green-500 text-white":!0===b?"bg-red-500 text-white":"bg-gray-200 text-gray-600":!0===b?"bg-emerald-500 text-white shadow-sm":"bg-gray-100 text-gray-500 group-hover:bg-emerald-100 group-hover:text-emerald-600"),children:e(s,{className:"h-4 w-4"})}),e("span",{className:i("text-base font-semibold",m&&!0===o.answer?"text-green-800":m&&!0===b?"text-red-800":!0===b?"text-emerald-700":"text-gray-600"),children:"Đúng (True)"}),m&&(!0===o.answer||!0===b)&&e("div",{className:i("flex h-6 w-6 items-center justify-center rounded-full",!0===o.answer?"bg-green-500":"bg-red-500"),children:!0===o.answer?e(s,{className:"h-4 w-4 text-white"}):e(d,{className:"h-4 w-4 text-white"})})]}),r("button",{type:"button",onClick:()=>w(!1),disabled:m,className:i("group flex items-center justify-center gap-3 rounded-xl border-2 p-4 transition-all",m?!1===o.answer?"border-green-400 bg-green-50":!1===b?"border-red-400 bg-red-50":"border-gray-200 bg-gray-50":!1===b?"border-red-500 bg-red-50 shadow-sm ring-2 ring-red-100":"border-gray-200 bg-white hover:border-red-300 hover:bg-red-50/50 hover:shadow-sm"),children:[e("div",{className:i("flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold transition-all",m?!1===o.answer?"bg-green-500 text-white":!1===b?"bg-red-500 text-white":"bg-gray-200 text-gray-600":!1===b?"bg-red-500 text-white shadow-sm":"bg-gray-100 text-gray-500 group-hover:bg-red-100 group-hover:text-red-600"),children:e(d,{className:"h-4 w-4"})}),e("span",{className:i("text-base font-semibold",m&&!1===o.answer?"text-green-800":m&&!1===b?"text-red-800":!1===b?"text-red-700":"text-gray-600"),children:"Sai (False)"}),m&&(!1===o.answer||!1===b)&&e("div",{className:i("flex h-6 w-6 items-center justify-center rounded-full",!1===o.answer?"bg-green-500":"bg-red-500"),children:!1===o.answer?e(s,{className:"h-4 w-4 text-white"}):e(d,{className:"h-4 w-4 text-white"})})]})]})]}),!m&&!f&&r("div",{className:"flex items-center gap-2 rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3",children:[e("div",{className:"flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white",children:e("span",{className:"text-xs font-bold",children:"!"})}),e("span",{className:"text-sm text-amber-800",children:"Vui lòng chọn đáp án"})]}),m&&o.explanation&&r("div",{className:"rounded-lg border border-blue-200 bg-blue-50 p-4",children:[e("p",{className:"text-sm font-semibold text-blue-800",children:"Giải thích:"}),e("p",{className:"mt-1 text-sm text-blue-700",children:o.explanation})]})]})]})})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Check, X, CircleHelp } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { cn } from '../../../../shared/lib/utils';
+export function TrueFalseClient({ questionData, onSubmit, isReviewMode = false, userAnswer, }) {
+    const [selectedAnswer, setSelectedAnswer] = useState(userAnswer !== undefined ? userAnswer : undefined);
+    // Presigned URL for image
+    const { previewUrl: imagePreviewUrl, isLoading } = usePresignedFileUrl(questionData.imageUrl || '');
+    // Sync userAnswer
+    useEffect(() => {
+        if (userAnswer !== undefined) {
+            setSelectedAnswer(userAnswer);
+        }
+    }, [userAnswer]);
+    // Handle answer change
+    const handleAnswerChange = (value) => {
+        if (isReviewMode)
+            return;
+        setSelectedAnswer(value);
+        onSubmit?.(value);
+    };
+    const hasAnswered = selectedAnswer !== undefined;
+    const isAnswerCorrect = isReviewMode && selectedAnswer === questionData.answer;
+    return (_jsx("div", { className: "space-y-4", children: _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-5 py-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-emerald-500 to-teal-600 text-white shadow-sm", children: _jsx(CircleHelp, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "\u0110\u00FAng / Sai" })] }), isReviewMode && hasAnswered && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isAnswerCorrect
+                                ? 'bg-green-100 text-green-700'
+                                : 'bg-red-100 text-red-700'), children: [isAnswerCorrect ? (_jsx(Check, { className: "h-3.5 w-3.5" })) : (_jsx(X, { className: "h-3.5 w-3.5" })), isAnswerCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "space-y-5 p-5", children: [_jsx("div", { className: "rounded-lg border border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-4", children: _jsx("h3", { className: "text-base font-semibold leading-relaxed text-gray-800", children: questionData.question || 'Chưa nhập câu hỏi' }) }), (imagePreviewUrl || questionData.imageUrl) && (_jsxs("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100", children: [_jsx("div", { className: "border-b border-gray-100 px-3 py-1.5", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-red-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-yellow-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-green-400" }), _jsx("span", { className: "ml-2 text-xs font-medium text-gray-500", children: "H\u00ECnh \u1EA3nh" })] }) }), _jsx("div", { className: "flex items-center justify-center p-4", children: isLoading ? (_jsx("div", { className: "flex h-48 items-center justify-center", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-blue-500" }) })) : (
+                                    /* eslint-disable-next-line @next/next/no-img-element */
+                                    _jsx("img", { src: imagePreviewUrl || questionData.imageUrl, alt: "Question illustration", className: "max-h-56 w-auto rounded-md object-contain" })) })] })), _jsxs("div", { className: "space-y-2.5", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-gray-500", children: "Ch\u1ECDn \u0111\u00E1p \u00E1n" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("button", { type: "button", onClick: () => handleAnswerChange(true), disabled: isReviewMode, className: cn('group flex items-center justify-center gap-3 rounded-xl border-2 p-4 transition-all', isReviewMode
+                                                ? questionData.answer === true
+                                                    ? 'border-green-400 bg-green-50'
+                                                    : selectedAnswer === true
+                                                        ? 'border-red-400 bg-red-50'
+                                                        : 'border-gray-200 bg-gray-50'
+                                                : selectedAnswer === true
+                                                    ? 'border-emerald-500 bg-emerald-50 shadow-sm ring-2 ring-emerald-100'
+                                                    : 'border-gray-200 bg-white hover:border-emerald-300 hover:bg-emerald-50/50 hover:shadow-sm'), children: [_jsx("div", { className: cn('flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold transition-all', isReviewMode
+                                                        ? questionData.answer === true
+                                                            ? 'bg-green-500 text-white'
+                                                            : selectedAnswer === true
+                                                                ? 'bg-red-500 text-white'
+                                                                : 'bg-gray-200 text-gray-600'
+                                                        : selectedAnswer === true
+                                                            ? 'bg-emerald-500 text-white shadow-sm'
+                                                            : 'bg-gray-100 text-gray-500 group-hover:bg-emerald-100 group-hover:text-emerald-600'), children: _jsx(Check, { className: "h-4 w-4" }) }), _jsx("span", { className: cn('text-base font-semibold', isReviewMode && questionData.answer === true
+                                                        ? 'text-green-800'
+                                                        : isReviewMode && selectedAnswer === true
+                                                            ? 'text-red-800'
+                                                            : selectedAnswer === true
+                                                                ? 'text-emerald-700'
+                                                                : 'text-gray-600'), children: "\u0110\u00FAng (True)" }), isReviewMode && (questionData.answer === true || selectedAnswer === true) && (_jsx("div", { className: cn('flex h-6 w-6 items-center justify-center rounded-full', questionData.answer === true ? 'bg-green-500' : 'bg-red-500'), children: questionData.answer === true ? (_jsx(Check, { className: "h-4 w-4 text-white" })) : (_jsx(X, { className: "h-4 w-4 text-white" })) }))] }), _jsxs("button", { type: "button", onClick: () => handleAnswerChange(false), disabled: isReviewMode, className: cn('group flex items-center justify-center gap-3 rounded-xl border-2 p-4 transition-all', isReviewMode
+                                                ? questionData.answer === false
+                                                    ? 'border-green-400 bg-green-50'
+                                                    : selectedAnswer === false
+                                                        ? 'border-red-400 bg-red-50'
+                                                        : 'border-gray-200 bg-gray-50'
+                                                : selectedAnswer === false
+                                                    ? 'border-red-500 bg-red-50 shadow-sm ring-2 ring-red-100'
+                                                    : 'border-gray-200 bg-white hover:border-red-300 hover:bg-red-50/50 hover:shadow-sm'), children: [_jsx("div", { className: cn('flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold transition-all', isReviewMode
+                                                        ? questionData.answer === false
+                                                            ? 'bg-green-500 text-white'
+                                                            : selectedAnswer === false
+                                                                ? 'bg-red-500 text-white'
+                                                                : 'bg-gray-200 text-gray-600'
+                                                        : selectedAnswer === false
+                                                            ? 'bg-red-500 text-white shadow-sm'
+                                                            : 'bg-gray-100 text-gray-500 group-hover:bg-red-100 group-hover:text-red-600'), children: _jsx(X, { className: "h-4 w-4" }) }), _jsx("span", { className: cn('text-base font-semibold', isReviewMode && questionData.answer === false
+                                                        ? 'text-green-800'
+                                                        : isReviewMode && selectedAnswer === false
+                                                            ? 'text-red-800'
+                                                            : selectedAnswer === false
+                                                                ? 'text-red-700'
+                                                                : 'text-gray-600'), children: "Sai (False)" }), isReviewMode && (questionData.answer === false || selectedAnswer === false) && (_jsx("div", { className: cn('flex h-6 w-6 items-center justify-center rounded-full', questionData.answer === false ? 'bg-green-500' : 'bg-red-500'), children: questionData.answer === false ? (_jsx(Check, { className: "h-4 w-4 text-white" })) : (_jsx(X, { className: "h-4 w-4 text-white" })) }))] })] })] }), !isReviewMode && !hasAnswered && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3", children: [_jsx("div", { className: "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white", children: _jsx("span", { className: "text-xs font-bold", children: "!" }) }), _jsx("span", { className: "text-sm text-amber-800", children: "Vui l\u00F2ng ch\u1ECDn \u0111\u00E1p \u00E1n" })] })), isReviewMode && questionData.explanation && (_jsxs("div", { className: "rounded-lg border border-blue-200 bg-blue-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold text-blue-800", children: "Gi\u1EA3i th\u00EDch:" }), _jsx("p", { className: "mt-1 text-sm text-blue-700", children: questionData.explanation })] }))] })] }) }));
+}