@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

package/dist/components/questions/types/match-by-writing-answer/register.js

@@ -1 +1,58 @@
-import{MatchByWritingAnswerCreator as e}from"./MatchByWritingAnswerCreator";export const matchByWritingAnswerRegistration={component:e,transformInitialData:e=>{const t=e?.content,n=e?.answer,a=e?.questionGroup,o=a?.payload||{},i=a?.groupNumber||1,r=o?.options||n?.options||[],s=o?.groupImageUrl||n?.groupImageUrl||"",p=o?.groupTitle||n?.groupTitle||"";return{question:t?.question||n?.question||"",imageUrl:t?.imageUrl||n?.imageUrl||"",correctAnswer:n?.answer||n?.correctAnswer||"",points:e?.points||1,groupNumber:n?.groupNumber||i,isExample:e?.isExample||n?.isExample||!1,askerName:t?.askerName||n?.askerName||"",answererName:t?.answererName||n?.answererName||"",options:r,groupImageUrl:s,groupTitle:p,explanation:e?.explanation||n?.explanation||""}},getExtraProps:e=>({groups:e.groups,groupConfig:e.groupConfig,questionConfig:e.questionConfig,viewMode:e.viewMode,questionIndexInPart:e.questionIndexInPart,partId:e.partId,validationRef:e.validationRef}),wrapOnSave:(e,t)=>({type:t.questionType,content:t.state.content,points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:e,explanation:e?.explanation||""}),wrapOnChange:(e,t)=>({type:t.questionType,content:t.state.content,points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:e,explanation:e?.explanation||""})};
+import { MatchByWritingAnswerCreator } from './MatchByWritingAnswerCreator';
+export const matchByWritingAnswerRegistration = {
+    component: MatchByWritingAnswerCreator,
+    transformInitialData: (initialData) => {
+        const content = initialData?.content;
+        const answer = initialData?.answer;
+        const questionGroup = initialData?.questionGroup;
+        const groupPayload = questionGroup?.payload || {};
+        const groupNumber = questionGroup?.groupNumber || 1;
+        // Extract shared options from group payload
+        const options = groupPayload?.options || answer?.options || [];
+        const groupImageUrl = groupPayload?.groupImageUrl || answer?.groupImageUrl || '';
+        const groupTitle = groupPayload?.groupTitle || answer?.groupTitle || '';
+        return {
+            question: content?.question || answer?.question || '',
+            imageUrl: content?.imageUrl || answer?.imageUrl || '',
+            correctAnswer: answer?.answer || answer?.correctAnswer || '',
+            points: initialData?.points || 1,
+            groupNumber: answer?.groupNumber || groupNumber,
+            isExample: initialData?.isExample || answer?.isExample || false,
+            askerName: content?.askerName || answer?.askerName || '',
+            answererName: content?.answererName || answer?.answererName || '',
+            options,
+            groupImageUrl,
+            groupTitle,
+            explanation: initialData?.explanation || answer?.explanation || '',
+        };
+    },
+    getExtraProps: (ctx) => ({
+        groups: ctx.groups,
+        groupConfig: ctx.groupConfig,
+        questionConfig: ctx.questionConfig,
+        viewMode: ctx.viewMode,
+        questionIndexInPart: ctx.questionIndexInPart,
+        partId: ctx.partId,
+        validationRef: ctx.validationRef,
+    }),
+    wrapOnSave: (data, ctx) => ({
+        type: ctx.questionType,
+        content: ctx.state.content,
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: data,
+        explanation: data?.explanation || '',
+    }),
+    wrapOnChange: (data, ctx) => ({
+        type: ctx.questionType,
+        content: ctx.state.content,
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: data,
+        explanation: data?.explanation || '',
+    }),
+};

package/dist/components/questions/types/match-by-writing-answer/transform.js

@@ -1 +1,61 @@
-export function transformMatchByWritingAnswer(r){const e=r.answer;if(!e)return{apiContent:{},apiCorrectAnswer:{}};const t={question:e.question||""};e.imageUrl&&(t.imageUrl=e.imageUrl),e.askerName&&(t.askerName=e.askerName),e.answererName&&(t.answererName=e.answererName);const a={answer:e.correctAnswer||""},n=(o=e.options,Array.isArray(o)?o.map(r=>({answer:"string"==typeof r?.answer?r.answer:"",content:"string"==typeof r?.content?r.content:"",imageUrl:"string"==typeof r?.imageUrl?r.imageUrl:""})):[]);var o;const s={};return n.length>0&&(s.options=n),e.groupImageUrl&&(s.groupImageUrl=e.groupImageUrl),e.groupTitle&&(s.groupTitle=e.groupTitle),{apiContent:t,apiCorrectAnswer:a,totalPoints:e.points||1,imageData:s,groupNumber:e.groupNumber||1,isExample:e.isExample||!1}}
+function normalizeMatchByWritingAnswerOptions(options) {
+    if (!Array.isArray(options)) {
+        return [];
+    }
+    return options.map((option) => ({
+        answer: typeof option?.answer === 'string' ? option.answer : '',
+        content: typeof option?.content === 'string' ? option.content : '',
+        imageUrl: typeof option?.imageUrl === 'string' ? option.imageUrl : '',
+    }));
+}
+/**
+ * Transform MATCH_BY_WRITING_ANSWER creator data → API format
+ *
+ * API format:
+ *   content: { question, imageUrl }
+ *   correctAnswer: { answer }
+ *   questionGroup.payload: { options: [{ answer, imageUrl }] }
+ */
+export function transformMatchByWritingAnswer(question) {
+    const answerData = question.answer;
+    if (!answerData) {
+        return { apiContent: {}, apiCorrectAnswer: {} };
+    }
+    const apiContent = {
+        question: answerData.question || '',
+    };
+    // Add question image if present
+    if (answerData.imageUrl) {
+        apiContent.imageUrl = answerData.imageUrl;
+    }
+    // Add conversation names if present (viewMode = conversation)
+    if (answerData.askerName) {
+        apiContent.askerName = answerData.askerName;
+    }
+    if (answerData.answererName) {
+        apiContent.answererName = answerData.answererName;
+    }
+    const apiCorrectAnswer = {
+        answer: answerData.correctAnswer || '',
+    };
+    const normalizedOptions = normalizeMatchByWritingAnswerOptions(answerData.options);
+    // Build imageData to store shared options and group metadata in questionGroup.payload
+    const imageData = {};
+    if (normalizedOptions.length > 0) {
+        imageData.options = normalizedOptions;
+    }
+    if (answerData.groupImageUrl) {
+        imageData.groupImageUrl = answerData.groupImageUrl;
+    }
+    if (answerData.groupTitle) {
+        imageData.groupTitle = answerData.groupTitle;
+    }
+    return {
+        apiContent,
+        apiCorrectAnswer,
+        totalPoints: answerData.points || 1,
+        imageData: imageData,
+        groupNumber: answerData.groupNumber || 1,
+        isExample: answerData.isExample || false,
+    };
+}

package/dist/components/questions/types/read-and-color-objects/ReadAndColorObjectsClient.js

@@ -1 +1,16 @@
-"use client";import{jsx as t}from"react/jsx-runtime";import{ColorRegionClient as n}from"../../components/ColorRegionClient";const e={creatorTitle:"Đọc và tô màu",creatorSubtitle:"Tạo câu hỏi tô màu với hình ảnh và vùng màu",instructionsLabel:"Hướng dẫn tô màu",instructionsTips:[],instructionPlaceholder:"",previewTitle:"Read and Color Objects (Preview)",clientTitle:"Read and Color",clientSubtitle:"Đọc hướng dẫn và tô màu các vật thể trong hình"};export function ReadAndColorObjectsClient(i){return t(n,{...i,config:e})}
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ColorRegionClient } from '../../components/ColorRegionClient';
+const readAndColorObjectsConfig = {
+    creatorTitle: 'Đọc và tô màu',
+    creatorSubtitle: 'Tạo câu hỏi tô màu với hình ảnh và vùng màu',
+    instructionsLabel: 'Hướng dẫn tô màu',
+    instructionsTips: [],
+    instructionPlaceholder: '',
+    previewTitle: 'Read and Color Objects (Preview)',
+    clientTitle: 'Read and Color',
+    clientSubtitle: 'Đọc hướng dẫn và tô màu các vật thể trong hình',
+};
+export function ReadAndColorObjectsClient(props) {
+    return _jsx(ColorRegionClient, { ...props, config: readAndColorObjectsConfig });
+}

package/dist/components/questions/types/read-and-color-objects/ReadAndColorObjectsCreator.js

@@ -1 +1,23 @@
-"use client";import{jsx as n}from"react/jsx-runtime";import{ColorRegionCreator as t}from"../../components/ColorRegionCreator";import{ReadAndColorObjectsClient as o}from"./ReadAndColorObjectsClient";const e={creatorTitle:"Đọc và tô màu",creatorSubtitle:"Tạo câu hỏi tô màu với hình ảnh và vùng màu",instructionsLabel:"Hướng dẫn tô màu",instructionsRequired:!1,instructionsTips:["Upload hình ảnh nền cần tô màu","Thêm các màu sắc và tạo vùng tương ứng trên hình ảnh","Kéo thả các vùng để điều chỉnh vị trí",'Thêm hướng dẫn tô màu cho mỗi câu lệnh (ví dụ: "Colour the sun yellow")'],instructionPlaceholder:"Colour the sun yellow",previewTitle:"Read and Color Objects (Preview)",clientTitle:"Read and Color",clientSubtitle:"Đọc hướng dẫn và tô màu các vật thể trong hình"};export function ReadAndColorObjectsCreator(r){return n(t,{...r,config:e,ClientComponent:o})}
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ColorRegionCreator } from '../../components/ColorRegionCreator';
+import { ReadAndColorObjectsClient } from './ReadAndColorObjectsClient';
+const readAndColorObjectsConfig = {
+    creatorTitle: 'Đọc và tô màu',
+    creatorSubtitle: 'Tạo câu hỏi tô màu với hình ảnh và vùng màu',
+    instructionsLabel: 'Hướng dẫn tô màu',
+    instructionsRequired: false,
+    instructionsTips: [
+        'Upload hình ảnh nền cần tô màu',
+        'Thêm các màu sắc và tạo vùng tương ứng trên hình ảnh',
+        'Kéo thả các vùng để điều chỉnh vị trí',
+        'Thêm hướng dẫn tô màu cho mỗi câu lệnh (ví dụ: "Colour the sun yellow")',
+    ],
+    instructionPlaceholder: 'Colour the sun yellow',
+    previewTitle: 'Read and Color Objects (Preview)',
+    clientTitle: 'Read and Color',
+    clientSubtitle: 'Đọc hướng dẫn và tô màu các vật thể trong hình',
+};
+export function ReadAndColorObjectsCreator(props) {
+    return (_jsx(ColorRegionCreator, { ...props, config: readAndColorObjectsConfig, ClientComponent: ReadAndColorObjectsClient }));
+}

package/dist/components/questions/types/read-and-color-objects/index.js

@@ -1 +1,2 @@
-export*from"./ReadAndColorObjectsCreator";export*from"./ReadAndColorObjectsClient";
+export * from './ReadAndColorObjectsCreator';
+export * from './ReadAndColorObjectsClient';

package/dist/components/questions/types/read-and-color-objects/register.js

@@ -1 +1,3 @@
-import{ReadAndColorObjectsCreator as o}from"./ReadAndColorObjectsCreator";import{createColorRegionRegistration as r}from"../../_shared/utils/createColorRegionRegistration";export const readAndColorObjectsRegistration=r(o);
+import { ReadAndColorObjectsCreator } from './ReadAndColorObjectsCreator';
+import { createColorRegionRegistration } from '../../_shared/utils/createColorRegionRegistration';
+export const readAndColorObjectsRegistration = createColorRegionRegistration(ReadAndColorObjectsCreator);

package/dist/components/questions/types/read-and-color-objects/transform.js

@@ -1 +1,36 @@
-export const transformReadAndColorObjects=o=>{const r=o.answer;if(!r?.backgroundImageUrl)return{apiContent:{},apiCorrectAnswer:{}};return{apiContent:{backgroundImageUrl:r.backgroundImageUrl,colorNodes:(r.colorNodes||[]).map(o=>({id:o.id,color:o.color,...o.label?{label:o.label}:{}})),regionNodes:(r.regionNodes||[]).map(o=>({id:o.id,x:o.x,y:o.y,width:o.width,height:o.height,color:o.color,linkedColorNodeId:o.linkedColorNodeId})),instructions:r.instructions||[]},apiCorrectAnswer:{answers:(r.regionNodes||[]).reduce((o,r)=>(r.id&&r.color&&(o[r.id]=r.color),o),{})}}};
+export const transformReadAndColorObjects = (question) => {
+    const answerData = question.answer;
+    if (!answerData?.backgroundImageUrl) {
+        return { apiContent: {}, apiCorrectAnswer: {} };
+    }
+    const apiContent = {
+        backgroundImageUrl: answerData.backgroundImageUrl,
+        colorNodes: (answerData.colorNodes || []).map((node) => ({
+            id: node.id,
+            color: node.color,
+            ...(node.label ? { label: node.label } : {}),
+        })),
+        regionNodes: (answerData.regionNodes || []).map((region) => ({
+            id: region.id,
+            x: region.x,
+            y: region.y,
+            width: region.width,
+            height: region.height,
+            color: region.color,
+            linkedColorNodeId: region.linkedColorNodeId,
+        })),
+        instructions: answerData.instructions || [],
+    };
+    const answers = (answerData.regionNodes || []).reduce((acc, region) => {
+        if (region.id && region.color) {
+            acc[region.id] = region.color;
+        }
+        return acc;
+    }, {});
+    return {
+        apiContent,
+        apiCorrectAnswer: {
+            answers,
+        },
+    };
+};

package/dist/components/questions/types/read-displayed-content/ReadDisplayedContentCreator.js

@@ -1 +1,125 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as t,useEffect as n}from"react";import{Label as i}from"../../../../components/ui/label";import{Textarea as s}from"../../../../components/ui/textarea";import{PointsInput as a}from"../../../../components/ui/points-input";import{Card as c,CardContent as o,CardHeader as l,CardTitle as d}from"../../../../components/ui/card";import{useDebouncedCallback as h}from"../../../../shared/lib/hooks";import{useReactHookForm as m}from"../../../../shared/lib/hooks/useReactHookForm";import{BookOpen as x,FileText as p,Info as f,MessageSquare as g}from"lucide-react";import{CreatorGuide as u}from"../../components/CreatorGuide";import{readDisplayedContentFormSchema as b}from"../../../../shared/lib/validation/read-displayed-content.validation";export function ReadDisplayedContentCreator({initialData:N,onSave:v,onChange:y,externalErrors:w,validationRef:T}){const j=N,S=m({defaultValues:{referenceText:j?.referenceText||j?.content?.referenceText||j?.correctAnswer?.expectedAnswers||"",explanation:j?.explanation||"",points:j?.points??5},zodSchema:b,mode:"onBlur"}),k=t(N),A=t(!1),C=t(y),D=t("");n(()=>{C.current=y},[y]);const E=h(e=>{C.current?.(e)},300),V=S.watch("referenceText"),F=S.watch("explanation"),J=S.watch("points");n(()=>{T&&(T.current={triggerValidation:async()=>await S.trigger(),getFormData:()=>({referenceText:V,explanation:F,points:J})})},[T,S,V,F,J]),n(()=>{const e=N,r={referenceText:e?.referenceText||e?.content?.referenceText||e?.correctAnswer?.expectedAnswers||"",explanation:e?.explanation||"",points:e?.points??5};if(!(JSON.stringify(k.current)!==JSON.stringify(N)))return;k.current=N;const t=J===r.points&&F===r.explanation&&V===r.referenceText;if(t&&!0===N?.isCompleted)return;!t&&(A.current=!0,S.reset(r),setTimeout(()=>{A.current=!1},150))},[N,S,V,F,J]),n(()=>{if(A.current){const e=JSON.stringify({referenceText:V,explanation:F,points:J});return void(D.current=e)}const e={referenceText:V,explanation:F,points:J},r=JSON.stringify(e);D.current!==r&&(D.current=r,E(e))},[V,F,J,E]);S.handleSubmit(e=>{v?.({...e})});return r("div",{className:"space-y-4",children:[e(u,{colorScheme:"blue",steps:[{text:"Nhập đoạn văn bản mà học sinh sẽ đọc to (reference text)",highlight:!0},{text:"Thêm giải thích (tùy chọn)"}],tips:["Học sinh sẽ nhìn thấy đoạn văn trên màn hình và đọc to.","AI sẽ so sánh giọng đọc của học sinh với văn bản gốc (Phonetic Distance)."]}),r(c,{className:"overflow-hidden border-0 bg-white",children:[e(l,{className:"px-4 py-3",children:e("div",{className:"flex items-center justify-between",children:r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-gray-100",children:e(p,{className:"h-4 w-4 text-gray-600"})}),r("div",{children:[e(d,{className:"text-base font-bold text-gray-900",children:"Đoạn văn bản cần đọc"}),e("p",{className:"text-xs text-gray-500",children:"Tạo câu hỏi đọc đoạn văn"})]})]})})}),r(o,{className:"space-y-3 px-4 pb-4",children:[e("div",{className:"flex items-center gap-6",children:e(a,{...S.register("points",{valueAsNumber:!0}),error:S.hasError("points")?S.getFieldError("points"):void 0})}),r("div",{className:"space-y-2",children:[r(i,{htmlFor:"referenceText",className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(g,{className:"h-4 w-4 text-indigo-500"}),e("span",{className:"flex items-center gap-1",children:"Đoạn văn bản"}),e("span",{className:"text-sm font-normal text-red-500",children:"*"})]}),e(s,{id:"referenceText",...S.register("referenceText"),placeholder:"VD: The fat cat sat on a red mat. It has a small bell on its neck. The bell rings when the cat jumps.",rows:4,className:"min-h-[120px] border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 resize-none "+(S.hasError("referenceText")?"border-red-400 focus:border-red-500 focus:ring-red-200":"")}),S.hasError("referenceText")&&e("p",{className:"text-sm text-red-600",children:S.getFieldError("referenceText")}),r("div",{className:"mt-2 flex items-start gap-3 rounded-xl border border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-4 text-sm text-blue-800",children:[e(f,{className:"mt-0.5 h-4 w-4 flex-shrink-0 text-indigo-500"}),e("p",{children:"Đây là đoạn văn sẽ hiển thị trên màn hình cho học sinh đọc to. AI sẽ so sánh phát âm của học sinh với đoạn văn này."})]})]}),w&&w.length>0&&r("div",{className:"flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100",children:e("span",{className:"text-lg",children:"❌"})}),r("div",{className:"text-sm",children:[e("p",{className:"font-semibold text-red-800",children:"Lỗi:"}),e("ul",{className:"mt-1 list-inside list-disc text-red-700",children:w.map((r,t)=>e("li",{children:r},t))})]})]})]})]}),r(c,{className:"overflow-hidden border-0 bg-white",children:[e(l,{className:"px-4 py-3",children:r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm",children:e(x,{className:"h-3.5 w-3.5 text-white"})}),r("div",{children:[r("div",{className:"flex items-center gap-2",children:[e(d,{className:"text-base font-semibold text-gray-800",children:"Giải thích"}),e("span",{className:"inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-600",children:"Không bắt buộc"})]}),e("p",{className:"text-xs text-gray-500 mt-0.5",children:"Giải thích cho đáp án đúng — hiển thị sau khi học sinh hoàn thành câu hỏi"})]})]})}),e(o,{className:"px-4 pb-4",children:e(s,{value:F||"",onChange:e=>S.setValue("explanation",e.target.value,{shouldValidate:!0}),placeholder:"VD: Đoạn văn tập trung vào các âm ngắn /æ/, /e/, /ɪ/...",rows:3,className:"min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none"})})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect } from 'react';
+import { Label } from '../../../../components/ui/label';
+import { Textarea } from '../../../../components/ui/textarea';
+import { PointsInput } from '../../../../components/ui/points-input';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { useDebouncedCallback } from '../../../../shared/lib/hooks';
+import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
+import { BookOpen, FileText, Info, MessageSquare } from 'lucide-react';
+import { CreatorGuide } from '../../components/CreatorGuide';
+import { readDisplayedContentFormSchema, } from '../../../../shared/lib/validation/read-displayed-content.validation';
+export function ReadDisplayedContentCreator({ initialData, onSave, onChange, externalErrors, validationRef, }) {
+    const apiData = initialData;
+    const form = useReactHookForm({
+        defaultValues: {
+            referenceText: apiData?.referenceText || apiData?.content?.referenceText || apiData?.correctAnswer?.expectedAnswers || '',
+            explanation: apiData?.explanation || '',
+            points: apiData?.points ?? 5,
+        },
+        zodSchema: readDisplayedContentFormSchema,
+        mode: 'onBlur',
+    });
+    const previousInitialDataRef = useRef(initialData);
+    const isInitializingRef = useRef(false);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    const debouncedOnChange = useDebouncedCallback((data) => {
+        onChangeRef.current?.(data);
+    }, 300);
+    const watchedReferenceText = form.watch('referenceText');
+    const watchedExplanation = form.watch('explanation');
+    const watchedPoints = form.watch('points');
+    // Expose validation ref for external trigger
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    return await form.trigger();
+                },
+                getFormData: () => ({
+                    referenceText: watchedReferenceText,
+                    explanation: watchedExplanation,
+                    points: watchedPoints,
+                }),
+            };
+        }
+    }, [validationRef, form, watchedReferenceText, watchedExplanation, watchedPoints]);
+    // Reset form when initialData changes externally
+    useEffect(() => {
+        const apiD = initialData;
+        const normalizedInitialData = {
+            referenceText: apiD?.referenceText || apiD?.content?.referenceText || apiD?.correctAnswer?.expectedAnswers || '',
+            explanation: apiD?.explanation || '',
+            points: apiD?.points ?? 5,
+        };
+        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
+        if (!initialDataChanged) {
+            return;
+        }
+        previousInitialDataRef.current = initialData;
+        const currentFormData = {
+            referenceText: watchedReferenceText,
+            explanation: watchedExplanation,
+            points: watchedPoints,
+        };
+        const isEchoFromOnChange = currentFormData.points === normalizedInitialData.points &&
+            currentFormData.explanation === normalizedInitialData.explanation &&
+            currentFormData.referenceText === normalizedInitialData.referenceText;
+        const wasJustSaved = initialData?.isCompleted === true;
+        if (isEchoFromOnChange && wasJustSaved) {
+            return;
+        }
+        const shouldReset = !isEchoFromOnChange;
+        if (shouldReset) {
+            isInitializingRef.current = true;
+            form.reset(normalizedInitialData);
+            setTimeout(() => {
+                isInitializingRef.current = false;
+            }, 150);
+        }
+    }, [initialData, form, watchedReferenceText, watchedExplanation, watchedPoints]);
+    // Debounced onChange
+    useEffect(() => {
+        if (isInitializingRef.current) {
+            const currentPayload = JSON.stringify({
+                referenceText: watchedReferenceText,
+                explanation: watchedExplanation,
+                points: watchedPoints,
+            });
+            previousPayloadRef.current = currentPayload;
+            return;
+        }
+        const payload = {
+            referenceText: watchedReferenceText,
+            explanation: watchedExplanation,
+            points: watchedPoints,
+        };
+        const payloadString = JSON.stringify(payload);
+        if (previousPayloadRef.current !== payloadString) {
+            previousPayloadRef.current = payloadString;
+            debouncedOnChange(payload);
+        }
+    }, [
+        watchedReferenceText,
+        watchedExplanation,
+        watchedPoints,
+        debouncedOnChange,
+    ]);
+    const handleSave = form.handleSubmit((data) => {
+        onSave?.({
+            ...data,
+        });
+    });
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(CreatorGuide, { colorScheme: "blue", steps: [
+                    { text: 'Nhập đoạn văn bản mà học sinh sẽ đọc to (reference text)', highlight: true },
+                    { text: 'Thêm giải thích (tùy chọn)' },
+                ], tips: [
+                    'Học sinh sẽ nhìn thấy đoạn văn trên màn hình và đọc to.',
+                    'AI sẽ so sánh giọng đọc của học sinh với văn bản gốc (Phonetic Distance).',
+                ] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gray-100", children: _jsx(FileText, { className: "h-4 w-4 text-gray-600" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "\u0110o\u1EA1n v\u0103n b\u1EA3n c\u1EA7n \u0111\u1ECDc" }), _jsx("p", { className: "text-xs text-gray-500", children: "T\u1EA1o c\u00E2u h\u1ECFi \u0111\u1ECDc \u0111o\u1EA1n v\u0103n" })] })] }) }) }), _jsxs(CardContent, { className: "space-y-3 px-4 pb-4", children: [_jsx("div", { className: "flex items-center gap-6", children: _jsx(PointsInput, { ...form.register('points', { valueAsNumber: true }), error: form.hasError('points') ? form.getFieldError('points') : undefined }) }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "referenceText", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-indigo-500" }), _jsx("span", { className: "flex items-center gap-1", children: "\u0110o\u1EA1n v\u0103n b\u1EA3n" }), _jsx("span", { className: "text-sm font-normal text-red-500", children: "*" })] }), _jsx(Textarea, { id: "referenceText", ...form.register('referenceText'), placeholder: "VD: The fat cat sat on a red mat. It has a small bell on its neck. The bell rings when the cat jumps.", rows: 4, className: `min-h-[120px] border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 resize-none ${form.hasError('referenceText') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('referenceText') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('referenceText') })), _jsxs("div", { className: "mt-2 flex items-start gap-3 rounded-xl border border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-4 text-sm text-blue-800", children: [_jsx(Info, { className: "mt-0.5 h-4 w-4 flex-shrink-0 text-indigo-500" }), _jsx("p", { children: "\u0110\u00E2y l\u00E0 \u0111o\u1EA1n v\u0103n s\u1EBD hi\u1EC3n th\u1ECB tr\u00EAn m\u00E0n h\u00ECnh cho h\u1ECDc sinh \u0111\u1ECDc to. AI s\u1EBD so s\u00E1nh ph\u00E1t \u00E2m c\u1EE7a h\u1ECDc sinh v\u1EDBi \u0111o\u1EA1n v\u0103n n\u00E0y." })] })] }), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100", children: _jsx("span", { className: "text-lg", children: "\u274C" }) }), _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] })] }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white", children: [_jsx(CardHeader, { className: "px-4 py-3", 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-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-3.5 w-3.5 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-xs text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { className: "px-4 pb-4", children: _jsx(Textarea, { value: watchedExplanation || '', onChange: (e) => form.setValue('explanation', e.target.value, { shouldValidate: true }), placeholder: "VD: \u0110o\u1EA1n v\u0103n t\u1EADp trung v\u00E0o c\u00E1c \u00E2m ng\u1EAFn /\u00E6/, /e/, /\u026A/...", rows: 3, className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none" }) })] })] }));
+}

package/dist/components/questions/types/read-displayed-content/register.js

@@ -1 +1,64 @@
-import{ReadDisplayedContentCreator as e}from"./ReadDisplayedContentCreator";export const readDisplayedContentRegistration={component:e,transformInitialData:e=>{let t=e?.answer;const n=e?.content,a=e?.answer||e?.correctAnswer||e?.correct_answer,o=a?.referenceText||a?.expectedAnswers||n?.referenceText||"",s=e?.total_points?parseFloat(e.total_points):e?.points||n?.points||a?.points||5,r=e?.explanation||n?.explanation||a?.explanation||"";return!n||"object"!=typeof n||void 0===n.referenceText&&void 0===a?.expectedAnswers?a&&"object"==typeof a&&(t={...a,referenceText:o,explanation:r,points:s}):t={referenceText:o,explanation:r,points:s},t},getExtraProps:e=>({onUnsavedChangesChange:e.onUnsavedChangesChange,validationRef:e.validationRef}),wrapOnSave:(e,t)=>({type:t.questionType,content:{..."object"==typeof t.state.content&&null!==t.state.content?t.state.content:{},referenceText:e.referenceText},points:e?.points??t.state.points??5,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:{expectedAnswers:e.referenceText},explanation:e?.explanation||""}),wrapOnChange:(e,t)=>({type:t.questionType,content:{..."object"==typeof t.state.content&&null!==t.state.content?t.state.content:{},referenceText:e.referenceText},points:e?.points??t.state.points??5,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:{expectedAnswers:e.referenceText},explanation:e?.explanation||""})};
+import { ReadDisplayedContentCreator } from './ReadDisplayedContentCreator';
+export const readDisplayedContentRegistration = {
+    component: ReadDisplayedContentCreator,
+    transformInitialData: (initialData) => {
+        let creatorData = initialData?.answer;
+        const content = initialData?.content;
+        const answer = initialData?.answer || initialData?.correctAnswer || initialData?.correct_answer;
+        const referenceTextValue = answer?.referenceText || answer?.expectedAnswers || content?.referenceText || '';
+        const points = initialData?.total_points
+            ? parseFloat(initialData.total_points)
+            : (initialData?.points || content?.points || answer?.points || 5);
+        const explanation = initialData?.explanation || content?.explanation || answer?.explanation || '';
+        if (content && typeof content === 'object' && (content.referenceText !== undefined || answer?.expectedAnswers !== undefined)) {
+            creatorData = {
+                referenceText: referenceTextValue,
+                explanation,
+                points,
+            };
+        }
+        else if (answer && typeof answer === 'object') {
+            creatorData = {
+                ...answer,
+                referenceText: referenceTextValue,
+                explanation,
+                points,
+            };
+        }
+        return creatorData;
+    },
+    getExtraProps: (ctx) => ({
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+    }),
+    wrapOnSave: (data, ctx) => ({
+        type: ctx.questionType,
+        content: {
+            ...(typeof ctx.state.content === 'object' && ctx.state.content !== null ? ctx.state.content : {}),
+            referenceText: data.referenceText,
+        },
+        points: data?.points ?? ctx.state.points ?? 5,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: {
+            expectedAnswers: data.referenceText,
+        },
+        explanation: data?.explanation || '',
+    }),
+    wrapOnChange: (data, ctx) => ({
+        type: ctx.questionType,
+        content: {
+            ...(typeof ctx.state.content === 'object' && ctx.state.content !== null ? ctx.state.content : {}),
+            referenceText: data.referenceText,
+        },
+        points: data?.points ?? ctx.state.points ?? 5,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: {
+            expectedAnswers: data.referenceText,
+        },
+        explanation: data?.explanation || '',
+    }),
+};

package/dist/components/questions/types/read-displayed-content/transform.js

@@ -1 +1,12 @@
-export const transformReadDisplayedContent=e=>{const n=e.content,r=e.answer;return{apiContent:{referenceText:n?.referenceText||r?.referenceText||r?.expectedAnswers||""},apiCorrectAnswer:{}}};
+export const transformReadDisplayedContent = (question) => {
+    const contentData = question.content;
+    const answerData = question.answer;
+    const referenceText = contentData?.referenceText || answerData?.referenceText || answerData?.expectedAnswers || '';
+    const apiContent = {
+        referenceText,
+    };
+    return {
+        apiContent,
+        apiCorrectAnswer: {},
+    };
+};

package/dist/components/questions/types/read-passage-and-answer-questions/ReadPassageAndAnswerQuestionsClient.js

@@ -1 +1,65 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t,useEffect as s,useRef as a}from"react";import{cn as n}from"../../../../shared/lib/utils";import{Check as d,X as i,BookOpen as o,FileText as l,ClipboardList as c,Lightbulb as g}from"lucide-react";export function ReadPassageAndAnswerQuestionsClient({questionData:m,userAnswer:b,isReviewMode:h=!1,onSubmit:x,autoFillCorrectAnswers:f=!1,explanation:u}){const{passage:p,passageTitle:w,instructions:y,singleQuestion:N,explanation:v}=m,j=u||v,[A,C]=t(()=>f&&N?N.correctAnswer:"number"==typeof b?b:-1),S=a(JSON.stringify(b));s(()=>{if(f)return;const e=JSON.stringify(b);S.current!==e&&(S.current=e,C("number"==typeof b?b:-1))},[b,f]);if(!N)return e("div",{className:"text-center text-gray-500 py-8",children:"Không có câu hỏi nào"});const k=h&&A===N.correctAnswer,q=h&&A>=0&&A!==N.correctAnswer,J=A>=0;return r("div",{className:"space-y-5",children:[y&&e("div",{className:"overflow-hidden rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 shadow-sm",children:r("div",{className:"flex items-center gap-3 px-5 py-4",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-sm",children:e(l,{className:"h-4 w-4"})}),e("p",{className:"text-sm font-medium text-blue-900",children:y})]})}),r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:[r("div",{className:"flex items-center gap-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-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(o,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:"Đoạn văn đọc hiểu"})]}),r("div",{className:"p-5 space-y-4",children:[w&&e("h3",{className:"text-center text-lg font-bold text-gray-900 border-b border-gray-100 pb-3",children:w}),e("div",{className:"rounded-lg bg-gradient-to-br from-slate-50 to-gray-50 p-5 border border-gray-100",children:e("p",{className:"whitespace-pre-wrap text-base leading-relaxed text-gray-700",children:p})})]})]}),r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all hover:shadow-md",children:[r("div",{className:n("flex items-center justify-between border-b px-5 py-3",h&&k&&"border-green-200 bg-gradient-to-r from-green-50 to-emerald-50",h&&q&&"border-red-200 bg-gradient-to-r from-red-50 to-rose-50",!h&&"border-gray-100 bg-gradient-to-r from-gray-50 to-white"),children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:n("flex h-8 w-8 items-center justify-center rounded-lg text-sm font-bold text-white shadow-sm",h&&k&&"bg-gradient-to-br from-green-500 to-emerald-600",h&&q&&"bg-gradient-to-br from-red-500 to-rose-600",!h&&"bg-gradient-to-br from-indigo-500 to-purple-600"),children:e(c,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-800",children:N.question})]}),h&&J&&r("div",{className:n("flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold",k?"bg-green-100 text-green-700":"bg-red-100 text-red-700"),children:[e(k?d:i,{className:"h-3.5 w-3.5"}),k?"Đúng":"Sai"]})]}),r("div",{className:"p-5 space-y-2.5",children:[N.options.map((t,s)=>{const a=A===s,o=s===N.correctAnswer,l=String.fromCharCode(65+s);return r("button",{type:"button",onClick:()=>{return e=s,void(h||(C(e),x?.(e)));var e},disabled:h,className:n("group flex w-full items-center gap-3 rounded-lg border-2 p-3.5 text-left transition-all",h?o?"border-green-400 bg-green-50":a?"border-red-400 bg-red-50":"border-gray-200 bg-gray-50":a?"border-indigo-500 bg-indigo-50 shadow-sm ring-2 ring-indigo-100":"border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50 hover:shadow-sm"),children:[e("div",{className:n("flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg text-sm font-bold transition-all",h?o?"bg-green-500 text-white":a?"bg-red-500 text-white":"bg-gray-200 text-gray-600":a?"bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-sm":"bg-gray-100 text-gray-600 group-hover:bg-gray-200"),children:l}),e("span",{className:n("flex-1 text-sm font-medium",h&&o?"text-green-800":h&&a&&!o?"text-red-800":"text-gray-700"),children:t}),h&&(o||a)&&e("div",{className:n("flex h-6 w-6 items-center justify-center rounded-full",o?"bg-green-500":"bg-red-500"),children:e(o?d:i,{className:"h-4 w-4 text-white"})})]},s)}),!h&&!J&&r("div",{className:"rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3 flex items-center gap-2 mt-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 một đáp án"})]}),h&&q&&e("div",{className:"rounded-lg bg-gradient-to-r from-green-50 to-emerald-50 p-4 border border-green-200 mt-3",children:r("div",{className:"flex items-center gap-2",children:[e(d,{className:"h-4 w-4 text-green-600"}),r("span",{className:"text-sm text-green-700",children:["Đáp án đúng: ",r("strong",{children:[String.fromCharCode(65+N.correctAnswer),". ",N.options[N.correctAnswer]]})]})]})})]})]}),h&&j&&r("div",{className:"overflow-hidden rounded-xl border border-blue-200 bg-gradient-to-br from-blue-50 to-indigo-50 shadow-sm",children:[r("div",{className:"flex items-center gap-2 border-b border-blue-100 bg-white/50 px-4 py-3",children:[e("div",{className:"flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 text-white shadow-sm",children:e(g,{className:"h-4 w-4"})}),e("h4",{className:"text-sm font-semibold text-gray-800",children:"Giải thích"})]}),e("div",{className:"p-4",children:e("p",{className:"text-sm text-gray-700 leading-relaxed",children:j})})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { cn } from '../../../../shared/lib/utils';
+import { Check, X, BookOpen, FileText, ClipboardList, Lightbulb } from 'lucide-react';
+export function ReadPassageAndAnswerQuestionsClient({ questionData, userAnswer, isReviewMode = false, onSubmit, autoFillCorrectAnswers = false, explanation: explanationProp, }) {
+    const { passage, passageTitle, instructions, singleQuestion, explanation: dataExplanation } = questionData;
+    const explanation = explanationProp || dataExplanation;
+    // Single answer state
+    const [selectedAnswer, setSelectedAnswer] = useState(() => {
+        if (autoFillCorrectAnswers && singleQuestion) {
+            return singleQuestion.correctAnswer;
+        }
+        return typeof userAnswer === 'number' ? userAnswer : -1;
+    });
+    const previousUserAnswerRef = useRef(JSON.stringify(userAnswer));
+    // Sync userAnswer when it changes
+    useEffect(() => {
+        if (autoFillCorrectAnswers)
+            return;
+        const currentUserAnswerStr = JSON.stringify(userAnswer);
+        if (previousUserAnswerRef.current !== currentUserAnswerStr) {
+            previousUserAnswerRef.current = currentUserAnswerStr;
+            setSelectedAnswer(typeof userAnswer === 'number' ? userAnswer : -1);
+        }
+    }, [userAnswer, autoFillCorrectAnswers]);
+    // Handle answer change
+    const handleAnswerChange = (value) => {
+        if (isReviewMode)
+            return;
+        setSelectedAnswer(value);
+        onSubmit?.(value);
+    };
+    // If no singleQuestion data, show empty state
+    if (!singleQuestion) {
+        return (_jsx("div", { className: "text-center text-gray-500 py-8", children: "Kh\u00F4ng c\u00F3 c\u00E2u h\u1ECFi n\u00E0o" }));
+    }
+    const isCorrect = isReviewMode && selectedAnswer === singleQuestion.correctAnswer;
+    const isWrong = isReviewMode && selectedAnswer >= 0 && selectedAnswer !== singleQuestion.correctAnswer;
+    const hasAnswered = selectedAnswer >= 0;
+    return (_jsxs("div", { className: "space-y-5", children: [instructions && (_jsx("div", { className: "overflow-hidden rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 shadow-sm", children: _jsxs("div", { className: "flex items-center gap-3 px-5 py-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-sm", children: _jsx(FileText, { className: "h-4 w-4" }) }), _jsx("p", { className: "text-sm font-medium text-blue-900", children: instructions })] }) })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-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(BookOpen, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "\u0110o\u1EA1n v\u0103n \u0111\u1ECDc hi\u1EC3u" })] }), _jsxs("div", { className: "p-5 space-y-4", children: [passageTitle && (_jsx("h3", { className: "text-center text-lg font-bold text-gray-900 border-b border-gray-100 pb-3", children: passageTitle })), _jsx("div", { className: "rounded-lg bg-gradient-to-br from-slate-50 to-gray-50 p-5 border border-gray-100", children: _jsx("p", { className: "whitespace-pre-wrap text-base leading-relaxed text-gray-700", children: passage }) })] })] }), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all hover:shadow-md", children: [_jsxs("div", { className: cn('flex items-center justify-between border-b px-5 py-3', isReviewMode && isCorrect && 'border-green-200 bg-gradient-to-r from-green-50 to-emerald-50', isReviewMode && isWrong && 'border-red-200 bg-gradient-to-r from-red-50 to-rose-50', !isReviewMode && 'border-gray-100 bg-gradient-to-r from-gray-50 to-white'), children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: cn('flex h-8 w-8 items-center justify-center rounded-lg text-sm font-bold text-white shadow-sm', isReviewMode && isCorrect && 'bg-gradient-to-br from-green-500 to-emerald-600', isReviewMode && isWrong && 'bg-gradient-to-br from-red-500 to-rose-600', !isReviewMode && 'bg-gradient-to-br from-indigo-500 to-purple-600'), children: _jsx(ClipboardList, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-800", children: singleQuestion.question })] }), isReviewMode && hasAnswered && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isCorrect ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'), children: [isCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), isCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "p-5 space-y-2.5", children: [singleQuestion.options.map((option, optIndex) => {
+                                const isSelected = selectedAnswer === optIndex;
+                                const isCorrectOption = optIndex === singleQuestion.correctAnswer;
+                                const letter = String.fromCharCode(65 + optIndex);
+                                const optText = typeof option === 'string' ? option : option?.text ?? option?.imageUrl ?? option?.content ?? '';
+                                return (_jsxs("button", { type: "button", onClick: () => handleAnswerChange(optIndex), disabled: isReviewMode, className: cn('group flex w-full items-center gap-3 rounded-lg border-2 p-3.5 text-left transition-all', isReviewMode
+                                        ? isCorrectOption
+                                            ? 'border-green-400 bg-green-50'
+                                            : isSelected
+                                                ? 'border-red-400 bg-red-50'
+                                                : 'border-gray-200 bg-gray-50'
+                                        : isSelected
+                                            ? 'border-indigo-500 bg-indigo-50 shadow-sm ring-2 ring-indigo-100'
+                                            : 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50 hover:shadow-sm'), children: [_jsx("div", { className: cn('flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg text-sm font-bold transition-all', isReviewMode
+                                                ? isCorrectOption
+                                                    ? 'bg-green-500 text-white'
+                                                    : isSelected
+                                                        ? 'bg-red-500 text-white'
+                                                        : 'bg-gray-200 text-gray-600'
+                                                : isSelected
+                                                    ? 'bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-sm'
+                                                    : 'bg-gray-100 text-gray-600 group-hover:bg-gray-200'), children: letter }), _jsx("span", { className: cn('flex-1 text-sm font-medium', isReviewMode && isCorrectOption ? 'text-green-800' :
+                                                isReviewMode && isSelected && !isCorrectOption ? 'text-red-800' : 'text-gray-700'), children: optText }), isReviewMode && (isCorrectOption || isSelected) && (_jsx("div", { className: cn('flex h-6 w-6 items-center justify-center rounded-full', isCorrectOption ? 'bg-green-500' : 'bg-red-500'), children: isCorrectOption ? _jsx(Check, { className: "h-4 w-4 text-white" }) : _jsx(X, { className: "h-4 w-4 text-white" }) }))] }, optIndex));
+                            }), !isReviewMode && !hasAnswered && (_jsxs("div", { className: "rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3 flex items-center gap-2 mt-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 m\u1ED9t \u0111\u00E1p \u00E1n" })] })), isReviewMode && isWrong && (_jsx("div", { className: "rounded-lg bg-gradient-to-r from-green-50 to-emerald-50 p-4 border border-green-200 mt-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Check, { className: "h-4 w-4 text-green-600" }), _jsxs("span", { className: "text-sm text-green-700", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", _jsxs("strong", { children: [String.fromCharCode(65 + singleQuestion.correctAnswer), ". ", typeof singleQuestion.options[singleQuestion.correctAnswer] === 'string' ? singleQuestion.options[singleQuestion.correctAnswer] : singleQuestion.options[singleQuestion.correctAnswer]?.text ?? ''] })] })] }) }))] })] }), isReviewMode && explanation && (_jsxs("div", { className: "overflow-hidden rounded-xl border border-blue-200 bg-gradient-to-br from-blue-50 to-indigo-50 shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-blue-100 bg-white/50 px-4 py-3", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 text-white shadow-sm", children: _jsx(Lightbulb, { className: "h-4 w-4" }) }), _jsx("h4", { className: "text-sm font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" })] }), _jsx("div", { className: "p-4", children: _jsx("p", { className: "text-sm text-gray-700 leading-relaxed", children: explanation }) })] }))] }));
+}