@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

package/dist/components/questions/types/listen-and-speak-info-exchange/register.js

@@ -1 +1,87 @@
-import{ListenAndSpeakInfoExchangeCreator as e}from"./ListenAndSpeakInfoExchangeCreator";export const listenAndSpeakInfoExchangeRegistration={component:e,wrapOnSave:(e,t)=>({type:t.questionType,points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,explanation:e?.explanation||"",content:{..."object"==typeof t.state.content&&null!==t.state.content?t.state.content:{},audioUrl:e.audioUrl},answer:{expectedAnswers:e.expectedAnswers||[]},...e.groupNumber&&{questionGroup:{payload:{title:e.title||"",imageUrl:e.imageUrl||"",candidateFields:e.candidateFields||e.fields||[],examinerFields:e.examinerFields||[]},groupNumber:e.groupNumber}}}),wrapOnChange:(e,t)=>({type:t.questionType,points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,explanation:e?.explanation||"",content:{..."object"==typeof t.state.content&&null!==t.state.content?t.state.content:{},audioUrl:e.audioUrl},answer:{expectedAnswers:e.expectedAnswers||[]},...e.groupNumber&&{questionGroup:{payload:{title:e.title||"",imageUrl:e.imageUrl||"",candidateFields:e.candidateFields||e.fields||[],examinerFields:e.examinerFields||[]},groupNumber:e.groupNumber}}}),transformInitialData:e=>{const t=e?.content,n=e?.answer||e?.correctAnswer||e?.correct_answer,a=e?.questionGroup?.payload||{},i=e?.total_points?parseFloat(e.total_points):e?.points||t?.points||n?.points||1,s=e?.explanation||"",o=a.fields||[];return{title:a.title||"",imageUrl:a.imageUrl||"",fields:o,candidateFields:a.candidateFields||o,examinerFields:a.examinerFields||[],audioUrl:t?.audioUrl||"",expectedAnswers:n?.expectedAnswers||[],explanation:s,points:i}},getExtraProps:e=>({onUnsavedChangesChange:e.onUnsavedChangesChange,validationRef:e.validationRef,groups:e.groups,questionIndexInPart:e.questionIndexInPart,partId:e.partId,viewMode:e.viewMode})};
+import { ListenAndSpeakInfoExchangeCreator } from './ListenAndSpeakInfoExchangeCreator';
+export const listenAndSpeakInfoExchangeRegistration = {
+    component: ListenAndSpeakInfoExchangeCreator,
+    wrapOnSave: (data, ctx) => ({
+        type: ctx.questionType,
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        explanation: data?.explanation || '',
+        content: {
+            ...(typeof ctx.state.content === 'object' && ctx.state.content !== null ? ctx.state.content : {}),
+            audioUrl: data.audioUrl,
+        },
+        answer: {
+            expectedAnswers: data.expectedAnswers || [],
+        },
+        ...(data.groupNumber && {
+            questionGroup: {
+                payload: {
+                    title: data.title || '',
+                    imageUrl: data.imageUrl || '',
+                    candidateFields: data.candidateFields || data.fields || [],
+                    examinerFields: data.examinerFields || [],
+                },
+                groupNumber: data.groupNumber,
+            },
+        }),
+    }),
+    wrapOnChange: (data, ctx) => ({
+        type: ctx.questionType,
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        explanation: data?.explanation || '',
+        content: {
+            ...(typeof ctx.state.content === 'object' && ctx.state.content !== null ? ctx.state.content : {}),
+            audioUrl: data.audioUrl,
+        },
+        answer: {
+            expectedAnswers: data.expectedAnswers || [],
+        },
+        ...(data.groupNumber && {
+            questionGroup: {
+                payload: {
+                    title: data.title || '',
+                    imageUrl: data.imageUrl || '',
+                    candidateFields: data.candidateFields || data.fields || [],
+                    examinerFields: data.examinerFields || [],
+                },
+                groupNumber: data.groupNumber,
+            },
+        }),
+    }),
+    transformInitialData: (data) => {
+        const content = data?.content;
+        const answer = data?.answer || data?.correctAnswer || data?.correct_answer;
+        const groupPayload = data?.questionGroup?.payload || {};
+        const points = data?.total_points
+            ? parseFloat(data.total_points)
+            : (data?.points || content?.points || answer?.points || 1);
+        const explanation = data?.explanation || '';
+        const legacyFields = groupPayload.fields || [];
+        return {
+            // Group data
+            title: groupPayload.title || '',
+            imageUrl: groupPayload.imageUrl || '',
+            fields: legacyFields,
+            candidateFields: groupPayload.candidateFields || legacyFields,
+            examinerFields: groupPayload.examinerFields || [],
+            // Per-question
+            audioUrl: content?.audioUrl || '',
+            expectedAnswers: answer?.expectedAnswers || [],
+            explanation,
+            points,
+        };
+    },
+    getExtraProps: (ctx) => ({
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+        groups: ctx.groups,
+        questionIndexInPart: ctx.questionIndexInPart,
+        partId: ctx.partId,
+        viewMode: ctx.viewMode,
+    }),
+};

package/dist/components/questions/types/listen-and-speak-info-exchange/transform.js

@@ -1 +1,32 @@
-export const transformListenAndSpeakInfoExchange=e=>{const i=e.content,r=e.answer,n=e.questionGroup,a=r?.expectedAnswers||[],t={apiContent:{audioUrl:i?.audioUrl||r?.audioUrl||""},apiCorrectAnswer:{expectedAnswers:a}},d=n?.payload||{},l=r?.title||d.title||"",o=r?.imageUrl||d.imageUrl||"",s=r?.fields||d.fields||[],u=r?.candidateFields||d.candidateFields||s,p=r?.examinerFields||d.examinerFields||[];return(l||o||u.length>0||p.length>0)&&(t.infoExchangeGroupData={title:l,imageUrl:o,candidateFields:u,examinerFields:p},t.groupNumber=r?.groupNumber||n?.groupNumber||1),t};
+export const transformListenAndSpeakInfoExchange = (question) => {
+    const contentData = question.content;
+    const answerData = question.answer;
+    const questionGroup = question.questionGroup;
+    const expectedAnswers = answerData?.expectedAnswers || [];
+    const apiContent = {
+        audioUrl: contentData?.audioUrl || answerData?.audioUrl || '',
+    };
+    const result = {
+        apiContent,
+        apiCorrectAnswer: {
+            expectedAnswers: expectedAnswers,
+        },
+    };
+    // Handle group data for info exchange fields
+    const groupPayload = questionGroup?.payload || {};
+    const title = answerData?.title || groupPayload.title || '';
+    const imageUrl = answerData?.imageUrl || groupPayload.imageUrl || '';
+    const legacyFields = answerData?.fields || groupPayload.fields || [];
+    const candidateFields = answerData?.candidateFields || groupPayload.candidateFields || legacyFields;
+    const examinerFields = answerData?.examinerFields || groupPayload.examinerFields || [];
+    if (title || imageUrl || candidateFields.length > 0 || examinerFields.length > 0) {
+        result.infoExchangeGroupData = {
+            title,
+            imageUrl,
+            candidateFields,
+            examinerFields,
+        };
+        result.groupNumber = answerData?.groupNumber || questionGroup?.groupNumber || 1;
+    }
+    return result;
+};

package/dist/components/questions/types/listen-and-speak-odd-one-out/ListenAndSpeakOddOneOutClient.js

@@ -1 +1,26 @@
-"use client";import{jsx as e,jsxs as r,Fragment as d}from"react/jsx-runtime";import{Mic as i,Volume2 as s,CheckCircle2 as l,Play as a,Pause as t,ImageIcon as n,Info as c,CircleOff as o}from"lucide-react";import{Button as m}from"../../../../components/ui/button";import{usePresignedFileUrl as g,useAudioPreview as h}from"../../../../shared/lib/hooks";function x({audioUrl:d}){const{previewUrl:i}=g(d),{isPlaying:l,currentTime:n,duration:c,progressPercentage:o,handlePlayPause:x,handleProgressClick:b,formatTime:u}=h(i);return r("div",{className:"flex items-center gap-3 rounded-lg bg-gradient-to-r from-indigo-50 to-purple-50 border border-indigo-200 px-4 py-2.5",children:[e(m,{variant:"outline",size:"icon",onClick:x,disabled:!i,className:"h-8 w-8 border-indigo-300 text-indigo-600 hover:bg-indigo-100",children:e(l?t:a,{className:"h-3.5 w-3.5"})}),r("div",{className:"text-muted-foreground min-w-[70px] text-xs",children:[u(n)," / ",u(c)]}),e("div",{className:"bg-indigo-200 relative h-1.5 flex-1 cursor-pointer rounded-full",onClick:b,children:e("div",{className:"bg-indigo-500 absolute top-0 left-0 h-full rounded-full transition-all",style:{width:`${o}%`}})}),e(s,{className:"h-4 w-4 text-indigo-400"})]})}function b({imageUrl:r,index:d}){const{previewUrl:i}=g(r);return i?e("img",{src:i,alt:`Image ${d+1}`,className:"w-full h-full object-cover"}):e("div",{className:"w-full h-full flex items-center justify-center bg-gray-100 text-gray-400",children:e(n,{className:"h-8 w-8"})})}export function ListenAndSpeakOddOneOutClient({questionData:a,isReviewMode:t=!1}){const{audioUrl:m,images:g,oddOneOutIndex:h,expectedAnswers:u=[],explanation:f}=a;return r("div",{className:"space-y-4",children:[a.isBackup&&r("div",{className:"inline-flex self-center items-center gap-1.5 px-3 py-1.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 text-xs font-bold shadow-sm",children:[e("span",{children:"🔄"})," Câu hỏi dự phòng"]}),r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:[e("div",{className:"flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-indigo-50 to-blue-50 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-indigo-500 to-blue-600 text-white shadow-sm",children:e(o,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:"Nghe và nói (Tìm hình khác loại)"})]})}),r("div",{className:"p-5 space-y-5",children:[g&&g.length>0&&e("div",{className:"bg-gradient-to-br from-amber-50/80 to-orange-50/60 rounded-2xl p-6 border border-amber-100/80 shadow-sm space-y-4",children:4===g.length?r(d,{children:[e("div",{className:"grid grid-cols-3 gap-4",children:g.slice(0,3).map((d,i)=>r("div",{className:"space-y-1",children:[r("div",{className:"flex items-center gap-1.5 mb-1",children:[e("span",{className:"flex h-6 w-6 items-center justify-center rounded-md text-xs font-bold "+(t&&h===i?"bg-red-200 text-red-800":"bg-amber-200 text-amber-800"),children:i+1}),t&&h===i&&r("span",{className:"inline-flex items-center gap-1 rounded-full bg-red-100 border border-red-200 px-1.5 py-0.5 text-[10px] font-bold text-red-700",children:[e(o,{className:"h-2.5 w-2.5"}),"Khác loại"]})]}),e("div",{className:"relative aspect-square rounded-xl overflow-hidden border-2 bg-white shadow-sm "+(t&&h===i?"border-red-400 ring-2 ring-red-200":"border-gray-200"),children:d?e(b,{imageUrl:d,index:i}):e("div",{className:"w-full h-full flex items-center justify-center text-gray-400 text-sm",children:e(n,{className:"h-6 w-6"})})})]},i))}),e("div",{className:"flex justify-center",children:e("div",{className:"w-1/3",children:r("div",{className:"space-y-1",children:[r("div",{className:"flex items-center gap-1.5 mb-1",children:[e("span",{className:"flex h-6 w-6 items-center justify-center rounded-md text-xs font-bold "+(t&&3===h?"bg-red-200 text-red-800":"bg-amber-200 text-amber-800"),children:"4"}),t&&3===h&&r("span",{className:"inline-flex items-center gap-1 rounded-full bg-red-100 border border-red-200 px-1.5 py-0.5 text-[10px] font-bold text-red-700",children:[e(o,{className:"h-2.5 w-2.5"}),"Khác loại"]})]}),e("div",{className:"relative aspect-square rounded-xl overflow-hidden border-2 bg-white shadow-sm "+(t&&3===h?"border-red-400 ring-2 ring-red-200":"border-gray-200"),children:g[3]?e(b,{imageUrl:g[3],index:3}):e("div",{className:"w-full h-full flex items-center justify-center text-gray-400 text-sm",children:e(n,{className:"h-6 w-6"})})})]})})})]}):e("div",{className:"grid grid-cols-2 gap-4",children:g.map((d,i)=>r("div",{className:"space-y-1",children:[r("div",{className:"flex items-center gap-1.5 mb-1",children:[e("span",{className:"flex h-6 w-6 items-center justify-center rounded-md text-xs font-bold "+(t&&h===i?"bg-red-200 text-red-800":"bg-amber-200 text-amber-800"),children:i+1}),t&&h===i&&r("span",{className:"inline-flex items-center gap-1 rounded-full bg-red-100 border border-red-200 px-1.5 py-0.5 text-[10px] font-bold text-red-700",children:[e(o,{className:"h-2.5 w-2.5"}),"Khác loại"]})]}),e("div",{className:"relative aspect-square rounded-xl overflow-hidden border-2 bg-white shadow-sm "+(t&&h===i?"border-red-400 ring-2 ring-red-200":"border-gray-200"),children:d?e(b,{imageUrl:d,index:i}):e("div",{className:"w-full h-full flex items-center justify-center text-gray-400 text-sm",children:e(n,{className:"h-6 w-6"})})})]},i))})}),m?e(x,{audioUrl:m}):r("div",{className:"flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3",children:[e(s,{className:"h-4 w-4 text-gray-400"}),e("span",{className:"text-xs text-gray-400",children:"Chưa có audio câu hỏi"})]}),r("div",{className:"flex items-center gap-3 rounded-lg border border-dashed border-gray-300 bg-gray-50/80 px-4 py-3",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-indigo-50 ring-2 ring-indigo-100/50",children:e(i,{className:"w-4 h-4 text-indigo-400"})}),e("p",{className:"text-xs text-gray-400",children:"Học sinh sẽ nhấn nút ghi âm và nói câu trả lời tại đây"})]}),t&&u.length>0&&r("div",{className:"rounded-xl border border-green-200 bg-green-50/80 p-4",children:[r("div",{className:"flex items-center gap-2 mb-3",children:[e(l,{className:"h-4 w-4 text-green-600"}),e("h4",{className:"text-sm font-semibold text-green-800",children:"Các đáp án mong muốn"})]}),e("div",{className:"space-y-2",children:u.map((d,i)=>r("div",{className:"flex items-center gap-2.5 rounded-lg bg-white/70 border border-green-100 px-3 py-2",children:[e("span",{className:"flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-green-100 text-green-700 text-xs font-bold",children:i+1}),e("span",{className:"text-sm text-green-800",children:d})]},i))})]}),t&&f&&r("div",{className:"rounded-xl border border-indigo-200 bg-indigo-50 p-4",children:[r("div",{className:"flex items-center gap-2 mb-2",children:[e(c,{className:"h-4 w-4 text-indigo-600"}),e("p",{className:"text-sm font-semibold text-indigo-800",children:"Giải thích"})]}),e("p",{className:"text-sm text-indigo-700 leading-relaxed",children:f})]})]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Mic, Volume2, CheckCircle2, Play, Pause, ImageIcon, Info, CircleOff } from 'lucide-react';
+import { Button } from '../../../../components/ui/button';
+import { usePresignedFileUrl, useAudioPreview } from '../../../../shared/lib/hooks';
+// ─── Sub-component: Custom Audio Player ──────────────────────────────────────
+function QuestionAudioPlayer({ audioUrl }) {
+    const { previewUrl } = usePresignedFileUrl(audioUrl);
+    const { isPlaying, currentTime, duration, progressPercentage, handlePlayPause, handleProgressClick, formatTime, } = useAudioPreview(previewUrl);
+    return (_jsxs("div", { className: "flex items-center gap-3 rounded-lg bg-gradient-to-r from-indigo-50 to-purple-50 border border-indigo-200 px-4 py-2.5", children: [_jsx(Button, { variant: "outline", size: "icon", onClick: handlePlayPause, disabled: !previewUrl, className: "h-8 w-8 border-indigo-300 text-indigo-600 hover:bg-indigo-100", children: isPlaying ? _jsx(Pause, { className: "h-3.5 w-3.5" }) : _jsx(Play, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "text-muted-foreground min-w-[70px] text-xs", children: [formatTime(currentTime), " / ", formatTime(duration)] }), _jsx("div", { className: "bg-indigo-200 relative h-1.5 flex-1 cursor-pointer rounded-full", onClick: handleProgressClick, children: _jsx("div", { className: "bg-indigo-500 absolute top-0 left-0 h-full rounded-full transition-all", style: { width: `${progressPercentage}%` } }) }), _jsx(Volume2, { className: "h-4 w-4 text-indigo-400" })] }));
+}
+// ─── Sub-component: Presigned image preview ──────────────────────────────────
+function OddOneOutImage({ imageUrl, index }) {
+    const { previewUrl } = usePresignedFileUrl(imageUrl);
+    if (!previewUrl) {
+        return (_jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-100 text-gray-400", children: _jsx(ImageIcon, { className: "h-8 w-8" }) }));
+    }
+    return (_jsx("img", { src: previewUrl, alt: `Image ${index + 1}`, className: "w-full h-full object-cover" }));
+}
+// ─── Main Client Component ───────────────────────────────────────────────────
+export function ListenAndSpeakOddOneOutClient({ questionData, isReviewMode = false, }) {
+    const { audioUrl, images, oddOneOutIndex, expectedAnswers = [], explanation } = questionData;
+    return (_jsxs("div", { className: "space-y-4", children: [questionData.isBackup && (_jsxs("div", { className: "inline-flex self-center items-center gap-1.5 px-3 py-1.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 text-xs font-bold shadow-sm", children: [_jsx("span", { children: "\uD83D\uDD04" }), " C\u00E2u h\u1ECFi d\u1EF1 ph\u00F2ng"] })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsx("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-indigo-50 to-blue-50 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-indigo-500 to-blue-600 text-white shadow-sm", children: _jsx(CircleOff, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Nghe v\u00E0 n\u00F3i (T\u00ECm h\u00ECnh kh\u00E1c lo\u1EA1i)" })] }) }), _jsxs("div", { className: "p-5 space-y-5", children: [images && images.length > 0 && (_jsx("div", { className: "bg-gradient-to-br from-amber-50/80 to-orange-50/60 rounded-2xl p-6 border border-amber-100/80 shadow-sm space-y-4", children: images.length === 4 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "grid grid-cols-3 gap-4", children: images.slice(0, 3).map((imgUrl, index) => (_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-1.5 mb-1", children: [_jsx("span", { className: `flex h-6 w-6 items-center justify-center rounded-md text-xs font-bold ${isReviewMode && oddOneOutIndex === index ? 'bg-red-200 text-red-800' : 'bg-amber-200 text-amber-800'}`, children: index + 1 }), isReviewMode && oddOneOutIndex === index && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-red-100 border border-red-200 px-1.5 py-0.5 text-[10px] font-bold text-red-700", children: [_jsx(CircleOff, { className: "h-2.5 w-2.5" }), "Kh\u00E1c lo\u1EA1i"] }))] }), _jsx("div", { className: `relative aspect-square rounded-xl overflow-hidden border-2 bg-white shadow-sm ${isReviewMode && oddOneOutIndex === index ? 'border-red-400 ring-2 ring-red-200' : 'border-gray-200'}`, children: imgUrl ? (_jsx(OddOneOutImage, { imageUrl: imgUrl, index: index })) : (_jsx("div", { className: "w-full h-full flex items-center justify-center text-gray-400 text-sm", children: _jsx(ImageIcon, { className: "h-6 w-6" }) })) })] }, index))) }), _jsx("div", { className: "flex justify-center", children: _jsx("div", { className: "w-1/3", children: _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-1.5 mb-1", children: [_jsx("span", { className: `flex h-6 w-6 items-center justify-center rounded-md text-xs font-bold ${isReviewMode && oddOneOutIndex === 3 ? 'bg-red-200 text-red-800' : 'bg-amber-200 text-amber-800'}`, children: "4" }), isReviewMode && oddOneOutIndex === 3 && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-red-100 border border-red-200 px-1.5 py-0.5 text-[10px] font-bold text-red-700", children: [_jsx(CircleOff, { className: "h-2.5 w-2.5" }), "Kh\u00E1c lo\u1EA1i"] }))] }), _jsx("div", { className: `relative aspect-square rounded-xl overflow-hidden border-2 bg-white shadow-sm ${isReviewMode && oddOneOutIndex === 3 ? 'border-red-400 ring-2 ring-red-200' : 'border-gray-200'}`, children: images[3] ? (_jsx(OddOneOutImage, { imageUrl: images[3], index: 3 })) : (_jsx("div", { className: "w-full h-full flex items-center justify-center text-gray-400 text-sm", children: _jsx(ImageIcon, { className: "h-6 w-6" }) })) })] }) }) })] })) : (
+                                /* Fallback: equal grid for other counts */
+                                _jsx("div", { className: "grid grid-cols-2 gap-4", children: images.map((imgUrl, index) => (_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-1.5 mb-1", children: [_jsx("span", { className: `flex h-6 w-6 items-center justify-center rounded-md text-xs font-bold ${isReviewMode && oddOneOutIndex === index ? 'bg-red-200 text-red-800' : 'bg-amber-200 text-amber-800'}`, children: index + 1 }), isReviewMode && oddOneOutIndex === index && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-red-100 border border-red-200 px-1.5 py-0.5 text-[10px] font-bold text-red-700", children: [_jsx(CircleOff, { className: "h-2.5 w-2.5" }), "Kh\u00E1c lo\u1EA1i"] }))] }), _jsx("div", { className: `relative aspect-square rounded-xl overflow-hidden border-2 bg-white shadow-sm ${isReviewMode && oddOneOutIndex === index ? 'border-red-400 ring-2 ring-red-200' : 'border-gray-200'}`, children: imgUrl ? (_jsx(OddOneOutImage, { imageUrl: imgUrl, index: index })) : (_jsx("div", { className: "w-full h-full flex items-center justify-center text-gray-400 text-sm", children: _jsx(ImageIcon, { className: "h-6 w-6" }) })) })] }, index))) })) })), audioUrl ? (_jsx(QuestionAudioPlayer, { audioUrl: audioUrl })) : (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3", children: [_jsx(Volume2, { className: "h-4 w-4 text-gray-400" }), _jsx("span", { className: "text-xs text-gray-400", children: "Ch\u01B0a c\u00F3 audio c\u00E2u h\u1ECFi" })] })), _jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-dashed border-gray-300 bg-gray-50/80 px-4 py-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-indigo-50 ring-2 ring-indigo-100/50", children: _jsx(Mic, { className: "w-4 h-4 text-indigo-400" }) }), _jsx("p", { className: "text-xs text-gray-400", children: "H\u1ECDc sinh s\u1EBD nh\u1EA5n n\u00FAt ghi \u00E2m v\u00E0 n\u00F3i c\u00E2u tr\u1EA3 l\u1EDDi t\u1EA1i \u0111\u00E2y" })] }), isReviewMode && expectedAnswers.length > 0 && (_jsxs("div", { className: "rounded-xl border border-green-200 bg-green-50/80 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }), _jsx("h4", { className: "text-sm font-semibold text-green-800", children: "C\u00E1c \u0111\u00E1p \u00E1n mong mu\u1ED1n" })] }), _jsx("div", { className: "space-y-2", children: expectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-center gap-2.5 rounded-lg bg-white/70 border border-green-100 px-3 py-2", children: [_jsx("span", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-green-100 text-green-700 text-xs font-bold", children: index + 1 }), _jsx("span", { className: "text-sm text-green-800", children: answer })] }, index))) })] })), isReviewMode && explanation && (_jsxs("div", { className: "rounded-xl border border-indigo-200 bg-indigo-50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Info, { className: "h-4 w-4 text-indigo-600" }), _jsx("p", { className: "text-sm font-semibold text-indigo-800", children: "Gi\u1EA3i th\u00EDch" })] }), _jsx("p", { className: "text-sm text-indigo-700 leading-relaxed", children: explanation })] }))] })] })] }));
+}

package/dist/components/questions/types/listen-and-speak-odd-one-out/ListenAndSpeakOddOneOutCreator.js

@@ -1 +1,247 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useEffect as t,useRef as n,useState as i}from"react";import{Card as s,CardContent as a,CardHeader as o,CardTitle as d}from"../../../../components/ui/card";import{Label as l}from"../../../../components/ui/label";import{Button as c}from"../../../../components/ui/button";import{Input as h}from"../../../../components/ui/input";import{Textarea as m}from"../../../../components/ui/textarea";import{Form as g,FormControl as u,FormField as p,FormItem as x,FormMessage as f}from"../../../../components/ui/form";import{FileUpload as b}from"../../../../components/ui/file-upload";import{PointsInput as N}from"../../../../components/ui/points-input";import{useReactHookForm as w}from"../../../../shared/lib/hooks/useReactHookForm";import{useDebouncedCallback as v,usePresignedFileUrl as y}from"../../../../shared/lib/hooks";import{listenAndSpeakOddOneOutSchema as O}from"../../../../shared/lib/validation/listen-and-speak-odd-one-out.validation";import{Plus as k,Trash2 as A,Volume2 as S,ImageIcon as U,MessageSquareText as C,HelpCircle as I,BookOpen as V,Eye as j,Pencil as J,Info as D,ListChecks as z,CircleOff as B,Check as H}from"lucide-react";import{CreatorGuide as T}from"../../components/CreatorGuide";import{ListenAndSpeakOddOneOutClient as $}from"./ListenAndSpeakOddOneOutClient";function F({imageUrl:t,index:n,isOddOneOut:i}){const{previewUrl:s}=y(t);return s?r("div",{className:"relative rounded-xl border border-gray-200 overflow-hidden bg-white shadow-sm group/img",children:[e("img",{src:s,alt:`Image ${n+1}`,className:"h-36 w-full object-contain bg-gray-50 p-2"}),i&&e("div",{className:"absolute inset-0 bg-red-500/10 ring-2 ring-inset ring-red-400 rounded-xl"})]}):null}export function ListenAndSpeakOddOneOutCreator({initialData:y,onChange:G,onUnsavedChangesChange:q,validationRef:K}){const L=y,P=L?.images&&L.images.length>0?L.images:Array(4).fill(""),R=w({zodSchema:O,defaultValues:{audioUrl:L?.audioUrl||"",images:P.length>=4?P.slice(0,4):[...P,...Array(4-P.length).fill("")],oddOneOutIndex:L?.oddOneOutIndex??-1,expectedAnswers:L?.expectedAnswers?.length>0?L.expectedAnswers:[""],points:L?.points??1,explanation:L?.explanation||"",isBackup:L?.isBackup||!1}}),{control:E,watch:Q,setValue:W,trigger:X,clearErrors:M}=R,Y=Q("audioUrl"),Z=Q("images"),_=Q("oddOneOutIndex"),ee=Q("expectedAnswers"),re=Q("points"),te=Q("explanation"),ne=Q("isBackup"),ie=n(y),se=n(!1),ae=n(G),oe=n("");t(()=>{ae.current=G},[G]);const de=v(e=>{ae.current?.(e)},300);t(()=>{K&&(K.current={triggerValidation:async()=>await X(),getFormData:()=>R.getValues()})},[K,R,X]),t(()=>{const e={audioUrl:L?.audioUrl||"",images:L?.images?.length>=4?L.images.slice(0,4):[...L?.images||[],...Array(4-(L?.images?.length||0)).fill("")],oddOneOutIndex:L?.oddOneOutIndex??-1,expectedAnswers:L?.expectedAnswers?.length>0?L.expectedAnswers:[""],points:L?.points??1,explanation:L?.explanation||"",isBackup:L?.isBackup||!1};if(!(JSON.stringify(ie.current)!==JSON.stringify(y)))return;ie.current=y;const r={audioUrl:Y,images:Z,oddOneOutIndex:_,expectedAnswers:ee,points:re,explanation:te,isBackup:ne},t=r.points===e.points&&r.explanation===e.explanation&&r.audioUrl===e.audioUrl&&r.oddOneOutIndex===e.oddOneOutIndex&&JSON.stringify(r.images)===JSON.stringify(e.images)&&JSON.stringify(r.expectedAnswers)===JSON.stringify(e.expectedAnswers);if(t&&!0===y?.isCompleted)return;!t&&(e.audioUrl!==r.audioUrl||e.oddOneOutIndex!==r.oddOneOutIndex||JSON.stringify(e.images)!==JSON.stringify(r.images)||JSON.stringify(e.expectedAnswers)!==JSON.stringify(r.expectedAnswers))&&(se.current=!0,R.reset(e),setTimeout(()=>{se.current=!1},150))},[y,R,Y,Z,_,ee,te,re,ne]);const le=JSON.stringify(Z),ce=JSON.stringify(ee);t(()=>{if(se.current){const e=JSON.stringify({audioUrl:Y,images:Z,oddOneOutIndex:_,expectedAnswers:ee,points:re,explanation:te,isBackup:ne});return void(oe.current=e)}const e={audioUrl:Y,images:Z,oddOneOutIndex:_,expectedAnswers:ee,points:re,explanation:te,isBackup:ne},r=JSON.stringify(e);oe.current!==r&&(oe.current=r,de(e))},[Y,le,_,ce,re,te,ne,de]),t(()=>{q&&q(R.formState.isDirty)},[R.formState.isDirty,q]);const he=(e,r)=>{const t=[...Z];t[e]=r,R.setValue("images",t,{shouldValidate:!0,shouldDirty:!0})},me=Z.filter(e=>""!==e.trim()).length,[ge,ue]=i(!1);return r("div",ge?{className:"space-y-6",children:[e(s,{children:e(o,{children:r("div",{className:"flex items-center justify-between",children:[e(d,{className:"text-lg font-bold",children:"👁️ Chế độ xem trước (Preview)"}),r(c,{variant:"outline",size:"sm",onClick:()=>ue(!1),children:[e(J,{className:"mr-2 h-4 w-4"}),"Quay lại chỉnh sửa"]})]})})}),e($,{questionData:{audioUrl:Y,images:Z,oddOneOutIndex:_,expectedAnswers:ee,points:re,explanation:te}})]}:{className:"space-y-6",children:[e(T,{colorScheme:"blue",steps:[{text:"Upload đúng 4 hình ảnh — 3 hình cùng loại và 1 hình khác loại"},{text:"Upload audio câu hỏi cho mỗi câu — giám khảo hỏi hình nào khác loại và tại sao"},{text:"Nhập đáp án mong muốn: tên hình khác loại + lý do",highlight:!0},{text:"Thêm giải thích chi tiết vì sao hình đó khác loại"}],tips:["Sự khác biệt nên rõ ràng về chủ đề hoặc danh mục, không phải về hình thức"]}),r(s,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500"}),e(o,{className:"pb-4",children:r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 shadow-sm",children:e(z,{className:"h-4 w-4 text-white"})}),r("div",{children:[e(d,{className:"text-lg font-bold text-gray-900",children:"Odd One Out — Hình nào khác loại?"}),e("p",{className:"text-sm text-gray-500",children:"Học sinh nhìn 4 hình và chỉ ra hình khác loại, giải thích lý do"})]})]}),r(c,{type:"button",variant:"outline",size:"sm",onClick:()=>ue(!0),disabled:!Y,className:"gap-2 border-blue-200 text-blue-600 hover:bg-blue-50 disabled:opacity-50",children:[e(j,{className:"h-4 w-4"}),"Preview"]})]})})]}),r(g,{...R,children:[r(s,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50",children:[e("div",{className:"h-1.5 bg-gradient-to-r from-amber-500 via-orange-500 to-red-500"}),e(o,{className:"pb-4",children:r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-amber-500 to-orange-600 shadow-md",children:e(U,{className:"h-5 w-5 text-white"})}),r("div",{children:[e(d,{className:"text-lg font-bold text-gray-900",children:"4 Hình ảnh"}),e("p",{className:"text-sm text-gray-500",children:"Upload đúng 4 hình — 1 hình sẽ là hình khác loại"})]})]}),r("span",{className:"inline-flex items-center rounded-full px-3 py-1 text-xs font-bold "+(4===me?"bg-green-100 text-green-700 border border-green-200":"bg-orange-100 text-orange-600 border border-orange-200"),children:[me,"/",4," ảnh"]})]})}),e(a,{children:e(p,{control:E,name:"images",render:()=>r(x,{children:[e("div",{className:"grid grid-cols-2 gap-5",children:Array.from({length:4}).map((t,n)=>{const i=Z[n]||"",d=_===n;return r(s,{className:"relative border-2 transition-all duration-300 overflow-hidden "+(d?"border-red-400 bg-gradient-to-b from-red-50/60 to-white shadow-lg shadow-red-100/60 ring-1 ring-red-200":"border-gray-200 hover:border-gray-300 hover:shadow-md"),children:[d&&e("div",{className:"absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-red-400 via-rose-500 to-red-400"}),e(o,{className:"pb-2 pt-3 px-4",children:r("div",{className:"flex items-center justify-between",children:[r("span",{className:"text-sm font-semibold text-gray-600 flex items-center gap-2",children:[e("span",{className:"flex h-6 w-6 items-center justify-center rounded-md text-xs font-bold transition-colors duration-200 "+(d?"bg-red-100 text-red-700":"bg-amber-100 text-amber-700"),children:n+1}),"Ảnh ",n+1,d&&r("span",{className:"inline-flex items-center gap-1 rounded-full bg-red-100 border border-red-200 px-2 py-0.5 text-xs font-bold text-red-700 animate-in fade-in slide-in-from-left-1 duration-200",children:[e(B,{className:"h-3 w-3"}),"Khác loại"]})]}),e("div",{className:"flex items-center gap-1",children:i&&e(c,{type:"button",variant:"ghost",size:"sm",onClick:()=>(e=>he(e,""))(n),className:"h-7 w-7 rounded-full text-red-400 hover:text-red-600 hover:bg-red-50",children:e(A,{className:"h-3.5 w-3.5"})})})]})}),r(a,{className:"space-y-3 px-4 pb-4",children:[i?e(F,{imageUrl:i,index:n,isOddOneOut:d}):e(b,{id:`odd-one-out-img-${n}`,label:"",accept:"image/*",value:"",onChange:e=>he(n,e),placeholder:`Upload ảnh ${n+1}`,maxSize:5,autoUpload:!0,prefix:"questions/odd-one-out"}),R.formState.errors?.images?.[n]&&r("p",{className:"text-sm font-medium text-destructive",children:["Vui lòng tải lên ảnh ",n+1]}),r("button",{type:"button",onClick:()=>{R.setValue("oddOneOutIndex",n,{shouldValidate:!0,shouldDirty:!0}),M("oddOneOutIndex")},className:"group/toggle w-full flex items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-all duration-200 cursor-pointer "+(d?"bg-red-50 border border-red-200":"bg-gray-50 border border-gray-200 hover:bg-red-50/50 hover:border-red-200/60"),children:[e("div",{className:"flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 transition-all duration-200 "+(d?"border-red-500 bg-red-500 shadow-sm shadow-red-200":"border-gray-300 bg-white group-hover/toggle:border-red-300"),children:d&&e(H,{className:"h-3 w-3 text-white",strokeWidth:3})}),e("div",{className:"flex-1 min-w-0",children:e("span",{className:"text-xs font-semibold transition-colors duration-200 "+(d?"text-red-700":"text-gray-500 group-hover/toggle:text-red-600"),children:d?"Đã đánh dấu là hình khác loại":"Đánh dấu là hình khác loại"})}),e(B,{className:"h-3.5 w-3.5 shrink-0 transition-colors duration-200 "+(d?"text-red-400":"text-gray-300 group-hover/toggle:text-red-300")})]})]})]},n)})}),R.formState.errors?.images?.message&&e(f,{}),R.formState.errors?.oddOneOutIndex?.message&&r("p",{className:"mt-3 text-sm font-medium text-destructive flex items-center gap-2",children:[e(B,{className:"h-4 w-4"}),R.formState.errors.oddOneOutIndex.message]})]})})})]}),r(s,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"}),e(o,{className:"pb-4",children:r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 shadow-sm",children:e(I,{className:"h-4 w-4 text-white"})}),r("div",{children:[e(d,{className:"text-lg font-bold text-gray-900",children:"Câu hỏi: Hình nào khác loại?"}),e("p",{className:"text-sm text-gray-500",children:"Học sinh nghe câu hỏi, nhìn 4 hình và nói hình nào khác loại + lý do"})]})]})}),r(a,{className:"space-y-6",children:[e("div",{className:"rounded-xl border border-gray-200 bg-gray-50 p-4",children:r("div",{className:"flex flex-col md:flex-row gap-6",children:[e("div",{className:"flex-1",children:e(N,{...R.register("points",{valueAsNumber:!0}),error:R.formState.errors?.points?.message})}),e("div",{className:"flex-1 flex flex-col justify-center pt-2"})]})}),r("div",{className:"space-y-2",children:[r(l,{className:"flex items-center gap-2 text-sm font-semibold text-gray-800",children:[e(S,{className:"h-4 w-4 text-indigo-500"}),"File Audio câu hỏi ",e("span",{className:"text-red-500",children:"*"})]}),e(p,{control:E,name:"audioUrl",render:({field:t})=>r(x,{children:[e(u,{children:e(b,{id:"audio-odd-one-out",label:"",accept:"audio/*",value:t.value,onChange:e=>{t.onChange(e),M("audioUrl")},maxSize:10,placeholder:"Tải lên file âm thanh (mp3, wav...)",autoUpload:!0,prefix:"listen-and-speak"})}),e(f,{})]})})]})]})]}),r(s,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-green-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-green-400 to-emerald-500"}),e(o,{className:"pb-4",children:r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 shadow-sm",children:e(C,{className:"h-4 w-4 text-white"})}),r("div",{children:[e(d,{className:"text-lg font-bold text-gray-900",children:"Đáp án mong muốn"}),r("p",{className:"text-sm text-gray-500",children:[ee.filter(e=>e.trim()).length," đáp án đã nhập"]})]})]}),r(c,{type:"button",variant:"outline",size:"sm",onClick:()=>{const e=R.getValues("expectedAnswers");R.setValue("expectedAnswers",[...e,""],{shouldValidate:!0,shouldDirty:!0})},className:"gap-2 border-green-200 text-green-600 hover:bg-green-50",children:[e(k,{className:"h-4 w-4"}),"Thêm đáp án"]})]})}),r(a,{className:"space-y-4",children:[r("div",{className:"flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2 text-xs text-blue-700",children:[e(D,{className:"mt-0.5 h-3.5 w-3.5 shrink-0"}),e("span",{children:"Học sinh phải chỉ ra hình khác loại VÀ giải thích lý do tại sao."})]}),e(p,{control:E,name:"expectedAnswers",render:()=>r(x,{children:[e("div",{className:"space-y-3",children:ee.map((t,n)=>r("div",{className:"flex items-start gap-3 group/answer",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-700 text-sm font-bold mt-1",children:n+1}),r("div",{className:"flex-1",children:[e(h,{placeholder:"VD: "+(0===n?"The beach — because the others are classrooms.":"It's the odd one out because..."),value:t||"",onChange:e=>((e,r)=>{const t=[...ee];t[e]=r,R.setValue("expectedAnswers",t,{shouldValidate:!0,shouldDirty:!0})})(n,e.target.value),className:"border-gray-200 focus:border-green-300 focus:ring-green-200"}),R.formState.errors?.expectedAnswers?.[n]?.message&&e("p",{className:"mt-1 text-sm text-red-500",children:R.formState.errors.expectedAnswers[n]?.message})]}),ee.length>1&&e(c,{type:"button",variant:"ghost",size:"sm",onClick:()=>(e=>{if(ee.length>1){const r=ee.filter((r,t)=>t!==e);R.setValue("expectedAnswers",r,{shouldValidate:!0,shouldDirty:!0})}})(n),className:"mt-0.5 h-8 w-8 rounded-full text-gray-400 hover:text-red-600 hover:bg-red-50 opacity-0 group-hover/answer:opacity-100 transition-opacity","aria-label":`Xóa đáp án ${n+1}`,children:e(A,{className:"h-4 w-4"})})]},n))}),R.formState.errors?.expectedAnswers?.message&&e(f,{})]})})]})]}),r(s,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-amber-400 to-orange-400"}),e(o,{className:"pb-4",children:r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm",children:e(V,{className:"h-4 w-4 text-white"})}),r("div",{children:[r("div",{className:"flex items-center gap-2",children:[e(d,{className:"text-lg 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.5 py-0.5 text-xs font-medium text-amber-600",children:"Không bắt buộc"})]}),e("p",{className:"text-sm 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(a,{children:e(m,{...R.register("explanation"),placeholder:"VD: Câu trả lời đúng là... vì...",className:"min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none",rows:3})})]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { Label } from '../../../../components/ui/label';
+import { Button } from '../../../../components/ui/button';
+import { Input } from '../../../../components/ui/input';
+import { Textarea } from '../../../../components/ui/textarea';
+import { Form, FormControl, FormField, FormItem, FormMessage } from '../../../../components/ui/form';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { PointsInput } from '../../../../components/ui/points-input';
+// Hooks
+import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
+import { useDebouncedCallback, usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { listenAndSpeakOddOneOutSchema, } from '../../../../shared/lib/validation/listen-and-speak-odd-one-out.validation';
+// Icons
+import { Plus, Trash2, Volume2, ImageIcon, MessageSquareText, HelpCircle, BookOpen, Eye, Pencil, Info, ListChecks, CircleOff, Check } from 'lucide-react';
+import { CreatorGuide } from '../../components/CreatorGuide';
+import { ListenAndSpeakOddOneOutClient } from './ListenAndSpeakOddOneOutClient';
+const REQUIRED_IMAGE_COUNT = 4;
+// ─── Sub-component: Image preview with presigned URL ─────────────────────────
+function ImagePreview({ imageUrl, index, isOddOneOut }) {
+    const { previewUrl } = usePresignedFileUrl(imageUrl);
+    if (!previewUrl)
+        return null;
+    return (_jsxs("div", { className: "relative rounded-xl border border-gray-200 overflow-hidden bg-white shadow-sm group/img", children: [_jsx("img", { src: previewUrl, alt: `Image ${index + 1}`, className: "h-36 w-full object-contain bg-gray-50 p-2" }), isOddOneOut && (_jsx("div", { className: "absolute inset-0 bg-red-500/10 ring-2 ring-inset ring-red-400 rounded-xl" }))] }));
+}
+// ─── Main Creator Component ──────────────────────────────────────────────────
+export function ListenAndSpeakOddOneOutCreator({ initialData, onChange, onUnsavedChangesChange, validationRef, }) {
+    // ---------------------------------------------------------------
+    // Form setup with Zod validation
+    // ---------------------------------------------------------------
+    const apiData = initialData;
+    const initImages = apiData?.images && apiData.images.length > 0
+        ? apiData.images
+        : Array(REQUIRED_IMAGE_COUNT).fill('');
+    const form = useReactHookForm({
+        zodSchema: listenAndSpeakOddOneOutSchema,
+        defaultValues: {
+            audioUrl: apiData?.audioUrl || '',
+            images: initImages.length >= REQUIRED_IMAGE_COUNT
+                ? initImages.slice(0, REQUIRED_IMAGE_COUNT)
+                : [...initImages, ...Array(REQUIRED_IMAGE_COUNT - initImages.length).fill('')],
+            oddOneOutIndex: apiData?.oddOneOutIndex ?? -1,
+            expectedAnswers: apiData?.expectedAnswers?.length > 0 ? apiData.expectedAnswers : [''],
+            points: apiData?.points ?? 1,
+            explanation: apiData?.explanation || '',
+            isBackup: apiData?.isBackup || false,
+        },
+    });
+    const { control, watch, setValue, trigger, clearErrors } = form;
+    const watchedAudioUrl = watch('audioUrl');
+    const watchedImages = watch('images');
+    const watchedOddOneOutIndex = watch('oddOneOutIndex');
+    const watchedExpectedAnswers = watch('expectedAnswers');
+    const watchedPoints = watch('points');
+    const watchedExplanation = watch('explanation');
+    const watchedIsBackup = watch('isBackup');
+    // ---------------------------------------------------------------
+    // Echo-detection refs
+    // ---------------------------------------------------------------
+    const previousInitialDataRef = useRef(initialData);
+    const isInitializingRef = useRef(false);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    // Debounced onChange
+    const debouncedOnChange = useDebouncedCallback((data) => {
+        onChangeRef.current?.(data);
+    }, 300);
+    // ---------------------------------------------------------------
+    // Connect to external validation trigger
+    // ---------------------------------------------------------------
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    return await trigger();
+                },
+                getFormData: () => form.getValues(),
+            };
+        }
+    }, [validationRef, form, trigger]);
+    // ---------------------------------------------------------------
+    // Sync form when initialData props change (echo-detection)
+    // ---------------------------------------------------------------
+    useEffect(() => {
+        const normalizedInitialData = {
+            audioUrl: apiData?.audioUrl || '',
+            images: apiData?.images?.length >= REQUIRED_IMAGE_COUNT
+                ? apiData.images.slice(0, REQUIRED_IMAGE_COUNT)
+                : [...(apiData?.images || []), ...Array(REQUIRED_IMAGE_COUNT - (apiData?.images?.length || 0)).fill('')],
+            oddOneOutIndex: apiData?.oddOneOutIndex ?? -1,
+            expectedAnswers: apiData?.expectedAnswers?.length > 0 ? apiData.expectedAnswers : [''],
+            points: apiData?.points ?? 1,
+            explanation: apiData?.explanation || '',
+            isBackup: apiData?.isBackup || false,
+        };
+        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
+        if (!initialDataChanged)
+            return;
+        previousInitialDataRef.current = initialData;
+        const currentFormData = {
+            audioUrl: watchedAudioUrl,
+            images: watchedImages,
+            oddOneOutIndex: watchedOddOneOutIndex,
+            expectedAnswers: watchedExpectedAnswers,
+            points: watchedPoints,
+            explanation: watchedExplanation,
+            isBackup: watchedIsBackup,
+        };
+        const isEchoFromOnChange = currentFormData.points === normalizedInitialData.points &&
+            currentFormData.explanation === normalizedInitialData.explanation &&
+            currentFormData.audioUrl === normalizedInitialData.audioUrl &&
+            currentFormData.oddOneOutIndex === normalizedInitialData.oddOneOutIndex &&
+            JSON.stringify(currentFormData.images) === JSON.stringify(normalizedInitialData.images) &&
+            JSON.stringify(currentFormData.expectedAnswers) === JSON.stringify(normalizedInitialData.expectedAnswers);
+        const wasJustSaved = initialData?.isCompleted === true;
+        if (isEchoFromOnChange && wasJustSaved)
+            return;
+        const shouldReset = !isEchoFromOnChange &&
+            (normalizedInitialData.audioUrl !== currentFormData.audioUrl ||
+                normalizedInitialData.oddOneOutIndex !== currentFormData.oddOneOutIndex ||
+                JSON.stringify(normalizedInitialData.images) !== JSON.stringify(currentFormData.images) ||
+                JSON.stringify(normalizedInitialData.expectedAnswers) !== JSON.stringify(currentFormData.expectedAnswers));
+        if (shouldReset) {
+            isInitializingRef.current = true;
+            form.reset(normalizedInitialData);
+            setTimeout(() => {
+                isInitializingRef.current = false;
+            }, 150);
+        }
+    }, [initialData, form, watchedAudioUrl, watchedImages, watchedOddOneOutIndex, watchedExpectedAnswers, watchedExplanation, watchedPoints, watchedIsBackup]);
+    // ---------------------------------------------------------------
+    // Fire onChange when form values change
+    // ---------------------------------------------------------------
+    const watchedImagesString = JSON.stringify(watchedImages);
+    const watchedExpectedAnswersString = JSON.stringify(watchedExpectedAnswers);
+    useEffect(() => {
+        if (isInitializingRef.current) {
+            const currentPayload = JSON.stringify({
+                audioUrl: watchedAudioUrl,
+                images: watchedImages,
+                oddOneOutIndex: watchedOddOneOutIndex,
+                expectedAnswers: watchedExpectedAnswers,
+                points: watchedPoints,
+                explanation: watchedExplanation,
+                isBackup: watchedIsBackup,
+            });
+            previousPayloadRef.current = currentPayload;
+            return;
+        }
+        const payload = {
+            audioUrl: watchedAudioUrl,
+            images: watchedImages,
+            oddOneOutIndex: watchedOddOneOutIndex,
+            expectedAnswers: watchedExpectedAnswers,
+            points: watchedPoints,
+            explanation: watchedExplanation,
+            isBackup: watchedIsBackup,
+        };
+        const payloadString = JSON.stringify(payload);
+        if (previousPayloadRef.current !== payloadString) {
+            previousPayloadRef.current = payloadString;
+            debouncedOnChange(payload);
+        }
+    }, [
+        watchedAudioUrl,
+        watchedImagesString,
+        watchedOddOneOutIndex,
+        watchedExpectedAnswersString,
+        watchedPoints,
+        watchedExplanation,
+        watchedIsBackup,
+        debouncedOnChange,
+    ]);
+    // Track unsaved changes
+    useEffect(() => {
+        if (onUnsavedChangesChange) {
+            onUnsavedChangesChange(form.formState.isDirty);
+        }
+    }, [form.formState.isDirty, onUnsavedChangesChange]);
+    // ---------------------------------------------------------------
+    // Handlers
+    // ---------------------------------------------------------------
+    const handleImageChange = (index, url) => {
+        const newImages = [...watchedImages];
+        newImages[index] = url;
+        form.setValue('images', newImages, { shouldValidate: true, shouldDirty: true });
+    };
+    const clearImage = (index) => handleImageChange(index, '');
+    const addExpectedAnswer = () => {
+        const currentAnswers = form.getValues('expectedAnswers');
+        form.setValue('expectedAnswers', [...currentAnswers, ''], { shouldValidate: true, shouldDirty: true });
+    };
+    const handleExpectedAnswerChange = (index, value) => {
+        const newAnswers = [...watchedExpectedAnswers];
+        newAnswers[index] = value;
+        form.setValue('expectedAnswers', newAnswers, { shouldValidate: true, shouldDirty: true });
+    };
+    const removeExpectedAnswer = (index) => {
+        if (watchedExpectedAnswers.length > 1) {
+            const newAnswers = watchedExpectedAnswers.filter((_, i) => i !== index);
+            form.setValue('expectedAnswers', newAnswers, { shouldValidate: true, shouldDirty: true });
+        }
+    };
+    const uploadedCount = watchedImages.filter(img => img.trim() !== '').length;
+    const [isClientMode, setIsClientMode] = useState(false);
+    // ─── Preview Mode ────────────────────────────────────────────────
+    if (isClientMode) {
+        return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(CardTitle, { className: "text-lg font-bold", children: "\uD83D\uDC41\uFE0F Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc (Preview)" }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i ch\u1EC9nh s\u1EEDa"] })] }) }) }), _jsx(ListenAndSpeakOddOneOutClient, { questionData: {
+                        audioUrl: watchedAudioUrl,
+                        images: watchedImages,
+                        oddOneOutIndex: watchedOddOneOutIndex,
+                        expectedAnswers: watchedExpectedAnswers,
+                        points: watchedPoints,
+                        explanation: watchedExplanation,
+                    } })] }));
+    }
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(CreatorGuide, { colorScheme: "blue", steps: [
+                    { text: 'Upload đúng 4 hình ảnh — 3 hình cùng loại và 1 hình khác loại' },
+                    { text: 'Upload audio câu hỏi cho mỗi câu — giám khảo hỏi hình nào khác loại và tại sao' },
+                    { text: 'Nhập đáp án mong muốn: tên hình khác loại + lý do', highlight: true },
+                    { text: 'Thêm giải thích chi tiết vì sao hình đó khác loại' },
+                ], tips: ['Sự khác biệt nên rõ ràng về chủ đề hoặc danh mục, không phải về hình thức'] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 shadow-sm", children: _jsx(ListChecks, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "Odd One Out \u2014 H\u00ECnh n\u00E0o kh\u00E1c lo\u1EA1i?" }), _jsx("p", { className: "text-sm text-gray-500", children: "H\u1ECDc sinh nh\u00ECn 4 h\u00ECnh v\u00E0 ch\u1EC9 ra h\u00ECnh kh\u00E1c lo\u1EA1i, gi\u1EA3i th\u00EDch l\u00FD do" })] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !watchedAudioUrl, className: "gap-2 border-blue-200 text-blue-600 hover:bg-blue-50 disabled:opacity-50", children: [_jsx(Eye, { className: "h-4 w-4" }), "Preview"] })] }) })] }), _jsxs(Form, { ...form, children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-amber-500 via-orange-500 to-red-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-amber-500 to-orange-600 shadow-md", children: _jsx(ImageIcon, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "4 H\u00ECnh \u1EA3nh" }), _jsx("p", { className: "text-sm text-gray-500", children: "Upload \u0111\u00FAng 4 h\u00ECnh \u2014 1 h\u00ECnh s\u1EBD l\u00E0 h\u00ECnh kh\u00E1c lo\u1EA1i" })] })] }), _jsxs("span", { className: `inline-flex items-center rounded-full px-3 py-1 text-xs font-bold ${uploadedCount === 4
+                                                ? 'bg-green-100 text-green-700 border border-green-200'
+                                                : 'bg-orange-100 text-orange-600 border border-orange-200'}`, children: [uploadedCount, "/", REQUIRED_IMAGE_COUNT, " \u1EA3nh"] })] }) }), _jsx(CardContent, { children: _jsx(FormField, { control: control, name: "images", render: () => (_jsxs(FormItem, { children: [_jsx("div", { className: "grid grid-cols-2 gap-5", children: Array.from({ length: REQUIRED_IMAGE_COUNT }).map((_, index) => {
+                                                    const imgUrl = watchedImages[index] || '';
+                                                    const isSelected = watchedOddOneOutIndex === index;
+                                                    return (_jsxs(Card, { className: `relative border-2 transition-all duration-300 overflow-hidden ${isSelected
+                                                            ? 'border-red-400 bg-gradient-to-b from-red-50/60 to-white shadow-lg shadow-red-100/60 ring-1 ring-red-200'
+                                                            : 'border-gray-200 hover:border-gray-300 hover:shadow-md'}`, children: [isSelected && (_jsx("div", { className: "absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-red-400 via-rose-500 to-red-400" })), _jsx(CardHeader, { className: "pb-2 pt-3 px-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-sm font-semibold text-gray-600 flex items-center gap-2", children: [_jsx("span", { className: `flex h-6 w-6 items-center justify-center rounded-md text-xs font-bold transition-colors duration-200 ${isSelected ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700'}`, children: index + 1 }), "\u1EA2nh ", index + 1, isSelected && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-red-100 border border-red-200 px-2 py-0.5 text-xs font-bold text-red-700 animate-in fade-in slide-in-from-left-1 duration-200", children: [_jsx(CircleOff, { className: "h-3 w-3" }), "Kh\u00E1c lo\u1EA1i"] }))] }), _jsx("div", { className: "flex items-center gap-1", children: imgUrl && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => clearImage(index), className: "h-7 w-7 rounded-full text-red-400 hover:text-red-600 hover:bg-red-50", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })) })] }) }), _jsxs(CardContent, { className: "space-y-3 px-4 pb-4", children: [imgUrl ? (_jsx(ImagePreview, { imageUrl: imgUrl, index: index, isOddOneOut: isSelected })) : (_jsx(FileUpload, { id: `odd-one-out-img-${index}`, label: "", accept: "image/*", value: "", onChange: (url) => handleImageChange(index, url), placeholder: `Upload ảnh ${index + 1}`, maxSize: 5, autoUpload: true, prefix: "questions/odd-one-out" })), form.formState.errors?.images?.[index] && (_jsxs("p", { className: "text-sm font-medium text-destructive", children: ["Vui l\u00F2ng t\u1EA3i l\u00EAn \u1EA3nh ", index + 1] })), _jsxs("button", { type: "button", onClick: () => {
+                                                                            form.setValue('oddOneOutIndex', index, { shouldValidate: true, shouldDirty: true });
+                                                                            clearErrors('oddOneOutIndex');
+                                                                        }, className: `group/toggle w-full flex items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-all duration-200 cursor-pointer ${isSelected
+                                                                            ? 'bg-red-50 border border-red-200'
+                                                                            : 'bg-gray-50 border border-gray-200 hover:bg-red-50/50 hover:border-red-200/60'}`, children: [_jsx("div", { className: `flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 transition-all duration-200 ${isSelected
+                                                                                    ? 'border-red-500 bg-red-500 shadow-sm shadow-red-200'
+                                                                                    : 'border-gray-300 bg-white group-hover/toggle:border-red-300'}`, children: isSelected && (_jsx(Check, { className: "h-3 w-3 text-white", strokeWidth: 3 })) }), _jsx("div", { className: "flex-1 min-w-0", children: _jsx("span", { className: `text-xs font-semibold transition-colors duration-200 ${isSelected
+                                                                                        ? 'text-red-700'
+                                                                                        : 'text-gray-500 group-hover/toggle:text-red-600'}`, children: isSelected ? 'Đã đánh dấu là hình khác loại' : 'Đánh dấu là hình khác loại' }) }), _jsx(CircleOff, { className: `h-3.5 w-3.5 shrink-0 transition-colors duration-200 ${isSelected
+                                                                                    ? 'text-red-400'
+                                                                                    : 'text-gray-300 group-hover/toggle:text-red-300'}` })] })] })] }, index));
+                                                }) }), form.formState.errors?.images?.message && (_jsx(FormMessage, {})), form.formState.errors?.oddOneOutIndex?.message && (_jsxs("p", { className: "mt-3 text-sm font-medium text-destructive flex items-center gap-2", children: [_jsx(CircleOff, { className: "h-4 w-4" }), form.formState.errors.oddOneOutIndex.message] }))] })) }) })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 shadow-sm", children: _jsx(HelpCircle, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "C\u00E2u h\u1ECFi: H\u00ECnh n\u00E0o kh\u00E1c lo\u1EA1i?" }), _jsx("p", { className: "text-sm text-gray-500", children: "H\u1ECDc sinh nghe c\u00E2u h\u1ECFi, nh\u00ECn 4 h\u00ECnh v\u00E0 n\u00F3i h\u00ECnh n\u00E0o kh\u00E1c lo\u1EA1i + l\u00FD do" })] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsx("div", { className: "rounded-xl border border-gray-200 bg-gray-50 p-4", children: _jsxs("div", { className: "flex flex-col md:flex-row gap-6", children: [_jsx("div", { className: "flex-1", children: _jsx(PointsInput, { ...form.register('points', { valueAsNumber: true }), error: form.formState.errors?.points?.message }) }), _jsx("div", { className: "flex-1 flex flex-col justify-center pt-2" })] }) }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(Volume2, { className: "h-4 w-4 text-indigo-500" }), "File Audio c\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FormField, { control: control, name: "audioUrl", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormControl, { children: _jsx(FileUpload, { id: "audio-odd-one-out", label: "", accept: "audio/*", value: field.value, onChange: (url) => { field.onChange(url); clearErrors('audioUrl'); }, maxSize: 10, placeholder: "T\u1EA3i l\u00EAn file \u00E2m thanh (mp3, wav...)", autoUpload: true, prefix: "listen-and-speak" }) }), _jsx(FormMessage, {})] })) })] })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-green-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-green-400 to-emerald-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 shadow-sm", children: _jsx(MessageSquareText, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "\u0110\u00E1p \u00E1n mong mu\u1ED1n" }), _jsxs("p", { className: "text-sm text-gray-500", children: [watchedExpectedAnswers.filter(a => a.trim()).length, " \u0111\u00E1p \u00E1n \u0111\u00E3 nh\u1EADp"] })] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addExpectedAnswer, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2 text-xs text-blue-700", children: [_jsx(Info, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }), _jsx("span", { children: "H\u1ECDc sinh ph\u1EA3i ch\u1EC9 ra h\u00ECnh kh\u00E1c lo\u1EA1i V\u00C0 gi\u1EA3i th\u00EDch l\u00FD do t\u1EA1i sao." })] }), _jsx(FormField, { control: control, name: "expectedAnswers", render: () => (_jsxs(FormItem, { children: [_jsx("div", { className: "space-y-3", children: watchedExpectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-start gap-3 group/answer", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-700 text-sm font-bold mt-1", children: index + 1 }), _jsxs("div", { className: "flex-1", children: [_jsx(Input, { placeholder: `VD: ${index === 0 ? 'The beach — because the others are classrooms.' : 'It\'s the odd one out because...'}`, value: answer || '', onChange: (e) => handleExpectedAnswerChange(index, e.target.value), className: "border-gray-200 focus:border-green-300 focus:ring-green-200" }), form.formState.errors?.expectedAnswers?.[index]?.message && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: form.formState.errors.expectedAnswers[index]?.message }))] }), watchedExpectedAnswers.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeExpectedAnswer(index), className: "mt-0.5 h-8 w-8 rounded-full text-gray-400 hover:text-red-600 hover:bg-red-50 opacity-0 group-hover/answer:opacity-100 transition-opacity", "aria-label": `Xóa đáp án ${index + 1}`, children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }, index))) }), form.formState.errors?.expectedAnswers?.message && (_jsx(FormMessage, {}))] })) })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-amber-400 to-orange-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg 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.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-sm 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, { children: _jsx(Textarea, { ...form.register('explanation'), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none", rows: 3 }) })] })] })] }));
+}

package/dist/components/questions/types/listen-and-speak-odd-one-out/register.js

@@ -1 +1,59 @@
-import{ListenAndSpeakOddOneOutCreator as e}from"./ListenAndSpeakOddOneOutCreator";export const listenAndSpeakOddOneOutRegistration={component:e,wrapOnSave:(e,t)=>({type:t.questionType,content:{audioUrl:e.audioUrl,images:e.images||[],isBackup:e.isBackup||!1},points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:{expectedAnswers:e.expectedAnswers||[],oddOneOutIndex:e.oddOneOutIndex??-1},explanation:e?.explanation||""}),wrapOnChange:(e,t)=>({type:t.questionType,content:{audioUrl:e.audioUrl,images:e.images||[],isBackup:e.isBackup||!1},points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:{expectedAnswers:e.expectedAnswers||[],oddOneOutIndex:e.oddOneOutIndex??-1},explanation:e?.explanation||""}),transformInitialData:e=>{const t=e?.content,n=e?.answer||e?.correctAnswer||e?.correct_answer,a=e?.total_points?parseFloat(e.total_points):e?.points||t?.points||n?.points||1,s=e?.explanation||t?.explanation||n?.explanation||"";return{audioUrl:t?.audioUrl||n?.audioUrl||"",images:t?.images||n?.images||["","","",""],oddOneOutIndex:n?.oddOneOutIndex??t?.oddOneOutIndex??-1,expectedAnswers:n?.expectedAnswers||[],explanation:s,points:a,isBackup:t?.isBackup||!1}},getExtraProps:e=>({onUnsavedChangesChange:e.onUnsavedChangesChange,validationRef:e.validationRef})};
+import { ListenAndSpeakOddOneOutCreator } from './ListenAndSpeakOddOneOutCreator';
+export const listenAndSpeakOddOneOutRegistration = {
+    component: ListenAndSpeakOddOneOutCreator,
+    wrapOnSave: (data, ctx) => ({
+        type: ctx.questionType,
+        content: {
+            audioUrl: data.audioUrl,
+            images: data.images || [],
+            isBackup: data.isBackup || false,
+        },
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: {
+            expectedAnswers: data.expectedAnswers || [],
+            oddOneOutIndex: data.oddOneOutIndex ?? -1,
+        },
+        explanation: data?.explanation || '',
+    }),
+    wrapOnChange: (data, ctx) => ({
+        type: ctx.questionType,
+        content: {
+            audioUrl: data.audioUrl,
+            images: data.images || [],
+            isBackup: data.isBackup || false,
+        },
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: {
+            expectedAnswers: data.expectedAnswers || [],
+            oddOneOutIndex: data.oddOneOutIndex ?? -1,
+        },
+        explanation: data?.explanation || '',
+    }),
+    transformInitialData: (data) => {
+        const content = data?.content;
+        const answer = data?.answer || data?.correctAnswer || data?.correct_answer;
+        const points = data?.total_points
+            ? parseFloat(data.total_points)
+            : (data?.points || content?.points || answer?.points || 1);
+        const explanation = data?.explanation || content?.explanation || answer?.explanation || '';
+        return {
+            audioUrl: content?.audioUrl || answer?.audioUrl || '',
+            images: content?.images || answer?.images || ['', '', '', ''],
+            oddOneOutIndex: answer?.oddOneOutIndex ?? content?.oddOneOutIndex ?? -1,
+            expectedAnswers: answer?.expectedAnswers || [],
+            explanation,
+            points,
+            isBackup: content?.isBackup || false,
+        };
+    },
+    getExtraProps: (ctx) => ({
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+    }),
+};

package/dist/components/questions/types/listen-and-speak-odd-one-out/transform.js

@@ -1 +1,18 @@
-export const transformListenAndSpeakOddOneOut=e=>{const n=e.content,d=e.answer,t=d?.expectedAnswers||[],s=d?.oddOneOutIndex??n?.oddOneOutIndex??-1;return{apiContent:{audioUrl:n?.audioUrl||d?.audioUrl||"",images:n?.images||d?.images||[],isBackup:n?.isBackup||d?.isBackup||!1},apiCorrectAnswer:{expectedAnswers:t,oddOneOutIndex:s}}};
+export const transformListenAndSpeakOddOneOut = (question) => {
+    const contentData = question.content;
+    const answerData = question.answer;
+    const expectedAnswers = answerData?.expectedAnswers || [];
+    const oddOneOutIndex = answerData?.oddOneOutIndex ?? contentData?.oddOneOutIndex ?? -1;
+    const apiContent = {
+        audioUrl: contentData?.audioUrl || answerData?.audioUrl || '',
+        images: contentData?.images || answerData?.images || [],
+        isBackup: contentData?.isBackup || answerData?.isBackup || false,
+    };
+    return {
+        apiContent,
+        apiCorrectAnswer: {
+            expectedAnswers: expectedAnswers,
+            oddOneOutIndex: oddOneOutIndex,
+        },
+    };
+};