@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.30

package/dist/components/questions/viewer/QuestionViewer.js

@@ -1 +1,692 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Button as s}from"../../../components/ui/button";import{Card as t,CardContent as n,CardHeader as o,CardTitle as i}from"../../../components/ui/card";import{Input as a}from"../../../components/ui/input";import{Check as c,Volume2 as l,X as u}from"lucide-react";import{useRef as d,useState as m}from"react";import{toast as p}from"sonner";import{t as g}from"../../../shared/lib/i18n";import{ReadAndColorObjectsClient as b}from"../types/read-and-color-objects/ReadAndColorObjectsClient";import{ArrangeLettersIntoWordsClient as w}from"../types/arrange-letters-into-words/ArrangeLettersIntoWordsClient";import{WriteShortParagraphClient as h}from"../types/write-short-paragraph/WriteShortParagraphClient";import{LabelThePictureClient as N}from"../types/label-the-picture/LabelThePictureClient";import{LookPictureFillWordHintClient as _}from"../types/look-picture-fill-word-hint/LookPictureFillWordHintClient";import{ReadPassageAndAnswerQuestionsClient as C}from"../types/read-passage-and-answer-questions/ReadPassageAndAnswerQuestionsClient";import{ChooseTheCorrectAnswerClient as A}from"../types/choose-the-correct-answer/ChooseTheCorrectAnswerClient";import{WriteAShortLetterClient as R}from"../types/write-a-short-letter/WriteAShortLetterClient";import{LookPictureChooseCorrectAnswerClient as f}from"../types/look-picture-choose-correct-answer/LookPictureChooseCorrectAnswerClient";import{LookPictureFillBlankChooseAnswerClient as v}from"../types/look-picture-fill-blank-choose-answer/LookPictureFillBlankChooseAnswerClient";import{FillMissingWordsInGridClient as x}from"../types/fill-missing-words-in-grid/FillMissingWordsInGridClient";import{WordFillStructuredFormViewer as S}from"./WordFillStructuredFormViewer";import{ChooseTheCorrectAnswerGroupViewer as y}from"./ChooseTheCorrectAnswerGroupViewer";import{TrueFalseGroupViewer as E}from"./TrueFalseGroupViewer";import{CrossOutWordGroupViewer as O}from"./CrossOutWordGroupViewer";import{SpontaneousQaGroupViewer as T}from"./SpontaneousQaGroupViewer";import{WordOrderAndMatchGroupViewer as L}from"./WordOrderAndMatchGroupViewer";export function QuestionViewer({question:W,onSubmitAnswer:I,isReviewMode:D=!1,userAnswer:q}){const[U,P]=m(q||null),[k,G]=m(0),M=d(null),[Q,F]=m(q||{}),H=W.answer,[$,j]=m(q||Array(H?.blanks?.length||0).fill("")),[B,K]=m(q||{}),[V,Y]=m(q||{}),[z,J]=m(q||{}),X=()=>{const e=W.answer.maxPlayCount||3;k>=e?p.warning(g("common.audio.maxPlayReached",{maxPlay:String(e)})):(M.current?.play(),G(k+1))},Z=()=>{const t=W.answer,{blanks:n,caseSensitive:o=!1}=t;return r("div",{className:"space-y-4",children:[n.map((s,t)=>{const i=$[t]||"",l=D&&((e,r)=>{const s=n[e];return o?r===s:r.toLowerCase()===s.toLowerCase()})(t,i);return r("div",{className:"flex items-center space-x-2",children:[r("span",{className:"text-sm font-medium",children:["Chỗ trống ",t+1,":"]}),e(a,{value:i,onChange:e=>((e,r)=>{const s=[...$];s[e]=r,j(s)})(t,e.target.value),placeholder:"Nhập đáp án...",className:"flex-1 "+(D?l?"border-green-500 bg-green-50":"border-red-500 bg-red-50":""),disabled:D}),D&&l&&e(c,{className:"h-4 w-4 text-green-600"}),D&&!l&&i&&e(u,{className:"h-4 w-4 text-red-600"})]},t)}),!D&&e(s,{onClick:()=>{I&&I($)},disabled:$.some(e=>""===e.trim()),children:"Nộp đáp án"})]})};return r(t,{children:[e(o,{children:r(i,{className:"flex items-center justify-between",children:[e("span",{children:"string"==typeof W.content?W.content:W.content?.question||W.content?.title||"Câu hỏi"}),r("span",{className:"text-sm font-normal text-gray-500",children:[W.points," điểm"]})]})}),r(n,{className:"space-y-4",children:[(()=>{switch(W.type){case"CHOOSE_THE_CORRECT_ANSWER":return(()=>{const r=W.answer,{isGroup:s,questionGroup:t}=W;let n={};return n=W.content&&"object"==typeof W.content?{...W.content,correctAnswer:W.correctAnswer?.answer??-1,id:W.id,isGroup:s,groupTitle:t?.payload?.title,groupContent:t?.payload?.content,groupImageUrl:t?.payload?.imageUrl,groupNumber:t?.groupNumber}:{...r,question:W.content||r?.question,id:W.id,isGroup:s,groupTitle:t?.payload?.title,groupContent:t?.payload?.content,groupImageUrl:t?.payload?.imageUrl,groupNumber:t?.groupNumber},e(A,{questionData:n,questionConfig:W.questionConfig,onSubmit:e=>{P(e),I?.(e)},isReviewMode:D,userAnswer:q})})();case"CHOOSE_THE_CORRECT_ANSWER_GROUP":return e(y,{question:W,isReviewMode:D,userAnswer:q});case"TRUE_FALSE_GROUP":return e(E,{question:W,isReviewMode:D,userAnswer:q});case"CROSS_OUT_WORD_GROUP":return e(O,{question:W,isReviewMode:D});case"SPONTANEOUS_QA_GROUP":return e(T,{question:W});case"WORD_ORDER_AND_MATCH_GROUP":return e(L,{question:W});case"FILL_IN_BLANK":return Z();case"TRUE_FALSE":return(()=>{const t=W.answer,{correctAnswer:n}=t;return r("div",{className:"space-y-3",children:[[{value:!0,label:"Đúng"},{value:!1,label:"Sai"}].map(s=>{const t=U===s.value;return e("div",{className:`flex cursor-pointer items-center rounded-lg border p-3 transition-colors ${t?"border-blue-500 bg-blue-50":"border-gray-200 hover:border-gray-300"} ${D&&s.value===n?"border-green-500 bg-green-50":D&&t&&s.value!==n?"border-red-500 bg-red-50":""}`,onClick:()=>!D&&P(s.value),children:r("div",{className:"flex w-full items-center",children:[e("div",{className:`mr-3 h-4 w-4 rounded-full border-2 ${t?"border-blue-500 bg-blue-500":"border-gray-300"} ${D&&s.value===n?"border-green-500 bg-green-500":""}`,children:t&&e("div",{className:"m-auto h-2 w-2 rounded-full bg-white"})}),e("span",{className:"flex-1",children:s.label}),D&&s.value===n&&e(c,{className:"ml-2 h-4 w-4 text-green-600"}),D&&t&&s.value!==n&&e(u,{className:"ml-2 h-4 w-4 text-red-600"})]})},s.value.toString())}),!D&&e(s,{onClick:()=>{I&&I(U)},disabled:null===U,children:"Nộp đáp án"})]})})();case"ESSAY":return(()=>{const t=W.answer,{minWords:n,maxWords:o}=t,i=U?U.trim().split(/\s+/).length:0;return r("div",{className:"space-y-4",children:[r("div",{className:"text-sm text-gray-600",children:[n&&o?`Số từ: ${n} - ${o} từ`:n?`Tối thiểu: ${n} từ`:o?`Tối đa: ${o} từ`:"",U&&r("span",{className:"ml-2 "+(i>=(n||0)&&i<=(o||1/0)?"text-green-600":"text-red-600"),children:["(",i," từ)"]})]}),e("textarea",{value:U||"",onChange:e=>P(e.target.value),placeholder:"Viết câu trả lời của bạn ở đây...",className:"h-32 w-full resize-none rounded-lg border border-gray-300 p-3 focus:border-blue-500 focus:ring-1 focus:ring-blue-500",disabled:D}),!D&&e(s,{onClick:()=>{I&&I(U)},disabled:!U||U.trim().length<(n||0),children:"Nộp đáp án"})]})})();case"LISTEN_AND_FILL_IN_THE_BLANK_WITH_IMAGE":return(()=>{const t=W.answer,{audioUrl:n,blanks:o}=t;return r("div",{className:"space-y-4",children:[r("div",{className:"flex items-center gap-4 rounded-lg bg-blue-50 p-4",children:[r(s,{onClick:X,variant:"outline",className:"gap-2",children:[e(l,{className:"h-5 w-5"}),"Phát âm thanh (",k,"/",t.maxPlayCount||3,")"]}),e("audio",{ref:M,src:n})]}),e("div",{className:"space-y-3",children:o.map((s,t)=>r("div",{className:"flex items-center gap-3",children:[r("span",{className:"w-20 font-medium",children:["Blank ",t+1,":"]}),e(a,{value:$[t],onChange:e=>{const r=[...$];r[t]=e.target.value,j(r),P(r)},placeholder:"Nhập câu trả lời...",disabled:D,className:D?$[t]?.toLowerCase()===o[t]?.toLowerCase()?"border-green-500 bg-green-50":"border-red-500 bg-red-50":""}),D&&r("span",{className:"text-sm text-gray-600",children:["Đáp án: ",e("strong",{children:o[t]})]})]},t))})]})})();case"TICK_TRUE_OR_FALSE":case"TICK_YES_OR_NO":return(()=>{const s=W.answer,{statements:t}=s;return e("div",{className:"space-y-3",children:t.map(s=>e("div",{className:`rounded-lg border-2 p-4 ${D&&Q[s.id]===s.isCorrect?"border-green-500 bg-green-50":""} ${D&&Q[s.id]!==s.isCorrect?"border-red-500 bg-red-50":"border-gray-200"} `,children:r("div",{className:"flex items-start gap-4",children:[r("div",{className:"mt-1 flex gap-2",children:[e("button",{onClick:()=>{const e={...Q,[s.id]:!0};F(e),P(e)},disabled:D,className:`flex h-8 w-8 items-center justify-center rounded border-2 ${!0===Q[s.id]?"border-green-500 bg-green-500 text-white":"border-gray-300"} `,children:e(c,{className:"h-5 w-5"})}),e("button",{onClick:()=>{const e={...Q,[s.id]:!1};F(e),P(e)},disabled:D,className:`flex h-8 w-8 items-center justify-center rounded border-2 ${!1===Q[s.id]?"border-red-500 bg-red-500 text-white":"border-gray-300"} `,children:e(u,{className:"h-5 w-5"})})]}),e("p",{className:"flex-1",children:s.text}),D&&e("span",{className:"text-sm font-medium",children:s.isCorrect?"✓ Đúng":"✗ Sai"})]})},s.id))})})();case"ARRANGE_LETTERS_INTO_WORDS":return(()=>{const r=W.answer,s=W.correctAnswer||W.correct_answer,t=(r?.subQuestions||[]).map(e=>{const r=s?.answers?.[e.id]||e.correctWord||"";return{...e,correctWord:r}});return e(w,{questionData:{subQuestions:t},onSubmit:e=>{P(e),I?.(e)},isReviewMode:D,userAnswer:q})})();case"READ_PASSAGE_AND_COMPLETE_STORY":return(()=>{const s=W.answer,{passage:t,blanks:n}=s,o=t.split(/\{(\d+)\}/);return e("div",{className:"space-y-4",children:e("div",{className:"prose max-w-none",children:e("div",{className:"text-lg leading-relaxed",children:o.map((s,t)=>{const o=parseInt(s);if(!isNaN(o)){const s=n.find(e=>e.index===o);return r("span",{className:"mx-1 inline-flex items-center",children:[e(a,{value:V[o]||"",onChange:e=>{const r={...V,[o]:e.target.value};Y(r),P(r)},className:`inline-block h-8 w-32 text-center ${D&&V[o]===s?.correctAnswer?"border-green-500 bg-green-50":""} ${D&&V[o]!==s?.correctAnswer?"border-red-500 bg-red-50":""} `,disabled:D}),D&&r("span",{className:"ml-2 text-sm text-green-600",children:["(",s?.correctAnswer,")"]})]},t)}return e("span",{children:s},t)})})})})})();case"WRITE_SHORT_PARAGRAPH":return(()=>{const r=W.answer;return e(h,{questionData:{contexts:r?.contexts||[],minWords:r?.minWords||20,maxWords:r?.maxWords,instruction:r?.instruction||""},onSubmit:e=>{P(e),I?.(e)},isReviewMode:D,userAnswer:q})})();case"WRITE_A_SHORT_LETTER":return(()=>{const r=W.answer;return e(R,{questionData:{contexts:r?.contexts||[],informations:r?.informations||[],minWords:r?.minWords||20,maxWords:r?.maxWords,instruction:r?.instruction||""},onSubmit:e=>{P(e),I?.(e)},isReviewMode:D,userAnswer:q})})();case"LOOK_PICTURE_FILL_WORD_HINT":return(()=>{const r=W.answer,s=W.content,t=W.questionGroup;let n=[];r?.subQuestions&&r.subQuestions.length>0?n=r.subQuestions:s?.imageUrl&&s?.word&&(n=[{id:W.id,imageUrl:s.imageUrl,word:s.word,correctAnswer:r?.correctAnswer||"",groupNumber:t?.groupNumber||1}]);const o=t?.payload?.hintLetters||r?.hintLetters||s?.hintLetters||[],i=t?.groupNumber||1,a={};o.length>0&&(a[i]=o);const c={subQuestions:n,hintLetters:o,hintLettersByGroup:a,groups:[{number:i,questionCount:n.length}]};return e(_,{questionData:c,userAnswer:q,isReviewMode:D,explanation:W.explanation,onSubmit:e=>{P(e),I?.(e)}})})();case"LABEL_THE_PICTURE":return(()=>{const r=W.answer;return e(N,{questionData:r,userAnswer:q,isReviewMode:D,onSubmit:e=>{P(e),I?.(e)}})})();case"READ_AND_COLOR_OBJECTS":return(()=>{const r=W.answer;return e(b,{questionData:{backgroundImageUrl:r?.backgroundImageUrl||"",colorNodes:r?.colorNodes||[],regionNodes:r?.regionNodes||[],instructions:r?.instructions||[]},onSubmit:e=>{P(e),I?.(e)}})})();case"READ_PASSAGE_AND_ANSWER_QUESTIONS":return(()=>{const r=W.answer;return e(C,{questionData:{passage:r?.passage||"",passageTitle:r?.passageTitle||"",instructions:r?.instructions||"",subQuestions:r?.subQuestions||[]},userAnswer:q,isReviewMode:D,onSubmit:e=>{P(e),I?.(e)}})})();case"LOOK_PICTURE_CHOOSE_CORRECT_ANSWER":return(()=>{const r=W.content,s=W.answer,t=(r?.subQuestions||s?.subQuestions||[]).map(e=>{const r=s?.answers?.[e.id]||e.correctAnswer;return{...e,options:(e.options||[]).map(e=>({...e,isCorrect:e.id===r}))}});return e(f,{questionData:{subQuestions:t},userAnswer:q,isReviewMode:D,onSubmit:e=>{P(e),I?.(e)}})})();case"LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER":return(()=>{const r=W.content,s=W.answer,t=(r?.subQuestions||s?.subQuestions||[]).map(e=>{const r=s?.answers?.[e.id]||e.correctAnswer;return{...e,options:(e.options||[]).map(e=>({...e,isCorrect:e.id===r}))}});return e(v,{questionData:{subQuestions:t},userAnswer:q,isReviewMode:D,onSubmit:e=>{P(e),I?.(e)}})})();case"FILL_MISSING_WORDS_IN_GRID":return(()=>{const r=W.content,s=W.answer;return e(x,{questionData:{content:{grid:r?.grid||[],rows:r?.rows||3,columns:r?.columns||3,disabledCells:r?.disabledCells||[]},answer:{answers:s?.answers||{},missingLetters:s?.missingLetters||[],caseSensitive:s?.caseSensitive||!1}},userAnswer:q,isReviewMode:D,onSubmit:e=>{P(e),I?.(e)}})})();case"WORD_FILL_STRUCTURED_FORM":return e(S,{question:W,isReviewMode:D,userAnswer:q,onSubmitAnswer:I});default:return r("div",{children:["Loại câu hỏi không được hỗ trợ: ",W.type]})}})(),!D&&e("div",{className:"flex justify-end border-t pt-4",children:e(s,{onClick:()=>{I?.(U)},className:"bg-blue-500 hover:bg-blue-600",children:"Xác nhận đáp án"})})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../components/ui/card';
+import { Input } from '../../../components/ui/input';
+import { Check, Volume2, X } from 'lucide-react';
+import { useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { t } from '../../../shared/lib/i18n';
+import { ReadAndColorObjectsClient } from '../types/read-and-color-objects/ReadAndColorObjectsClient';
+import { ArrangeLettersIntoWordsClient } from '../types/arrange-letters-into-words/ArrangeLettersIntoWordsClient';
+import { WriteShortParagraphClient } from '../types/write-short-paragraph/WriteShortParagraphClient';
+import { LabelThePictureClient } from '../types/label-the-picture/LabelThePictureClient';
+import { LookPictureFillWordHintClient } from '../types/look-picture-fill-word-hint/LookPictureFillWordHintClient';
+import { ReadPassageAndAnswerQuestionsClient } from '../types/read-passage-and-answer-questions/ReadPassageAndAnswerQuestionsClient';
+import { ChooseTheCorrectAnswerClient } from '../types/choose-the-correct-answer/ChooseTheCorrectAnswerClient';
+import { WriteAShortLetterClient } from '../types/write-a-short-letter/WriteAShortLetterClient';
+import { LookPictureChooseCorrectAnswerClient } from '../types/look-picture-choose-correct-answer/LookPictureChooseCorrectAnswerClient';
+import { LookPictureFillBlankChooseAnswerClient } from '../types/look-picture-fill-blank-choose-answer/LookPictureFillBlankChooseAnswerClient';
+import { FillMissingWordsInGridClient } from '../types/fill-missing-words-in-grid/FillMissingWordsInGridClient';
+import { WordFillStructuredFormClient } from '../types/word-fill-structured-form/WordFillStructuredFormClient';
+import { parseFillBlankStemLine } from '../_shared/utils/parseFillBlankStem';
+import { WordFillStructuredFormViewer } from './WordFillStructuredFormViewer';
+import { ChooseTheCorrectAnswerGroupViewer } from './ChooseTheCorrectAnswerGroupViewer';
+import { TrueFalseGroupViewer } from './TrueFalseGroupViewer';
+import { CrossOutWordGroupViewer } from './CrossOutWordGroupViewer';
+import { SpontaneousQaGroupViewer } from './SpontaneousQaGroupViewer';
+import { WordOrderAndMatchGroupViewer } from './WordOrderAndMatchGroupViewer';
+export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false, userAnswer, }) {
+    const [selectedAnswer, setSelectedAnswer] = useState(userAnswer || null);
+    const [playCount, setPlayCount] = useState(0);
+    const audioRef = useRef(null);
+    // State for TICK_TRUE_OR_FALSE / TICK_YES_OR_NO
+    const [tickCrossAnswers, setTickCrossAnswers] = useState(userAnswer || {});
+    // State for LISTEN_AND_FILL_IN_THE_BLANK_WITH_IMAGE
+    const answer = question.answer;
+    const [fillBlankAnswers, setFillBlankAnswers] = useState(userAnswer || Array(answer?.blanks?.length || 0).fill(''));
+    // State for LISTEN_AND_COLOR_OBJECTS (legacy - kept for compatibility but not used in new implementation)
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [colorAnswers, setColorAnswers] = useState(userAnswer || {});
+    // State for READ_PASSAGE_AND_COMPLETE_STORY
+    const [passageFillAnswers, setPassageFillAnswers] = useState(userAnswer || {});
+    // State for VIEW_IMAGE_AND_FILL_IN_THE_BLANK
+    const [viewImageFillAnswers, setViewImageFillAnswers] = useState(userAnswer || {});
+    const handleAudioPlay = () => {
+        const answer = question.answer;
+        const maxPlay = answer.maxPlayCount || 3;
+        if (playCount >= maxPlay) {
+            toast.warning(t('common.audio.maxPlayReached', { maxPlay: String(maxPlay) }));
+            return;
+        }
+        audioRef.current?.play();
+        setPlayCount(playCount + 1);
+    };
+    const renderListeningFillBlank = () => {
+        const answer = question.answer;
+        const { audioUrl, blanks } = answer;
+        return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center gap-4 rounded-lg bg-blue-50 p-4", children: [_jsxs(Button, { onClick: handleAudioPlay, variant: "outline", className: "gap-2", children: [_jsx(Volume2, { className: "h-5 w-5" }), "Ph\u00E1t \u00E2m thanh (", playCount, "/", answer.maxPlayCount || 3, ")"] }), _jsx("audio", { ref: audioRef, src: audioUrl })] }), _jsx("div", { className: "space-y-3", children: blanks.map((_, idx) => (_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { className: "w-20 font-medium", children: ["Blank ", idx + 1, ":"] }), _jsx(Input, { value: fillBlankAnswers[idx], onChange: (e) => {
+                                    const newAnswers = [...fillBlankAnswers];
+                                    newAnswers[idx] = e.target.value;
+                                    setFillBlankAnswers(newAnswers);
+                                    setSelectedAnswer(newAnswers);
+                                }, placeholder: "Nh\u1EADp c\u00E2u tr\u1EA3 l\u1EDDi...", disabled: isReviewMode, className: isReviewMode
+                                    ? fillBlankAnswers[idx]?.toLowerCase() === blanks[idx]?.toLowerCase()
+                                        ? 'border-green-500 bg-green-50'
+                                        : 'border-red-500 bg-red-50'
+                                    : '' }), isReviewMode && (_jsxs("span", { className: "text-sm text-gray-600", children: ["\u0110\u00E1p \u00E1n: ", _jsx("strong", { children: blanks[idx] })] }))] }, idx))) })] }));
+    };
+    ;
+    ;
+    const renderReadingTickCross = () => {
+        const answer = question.answer;
+        const { statements } = answer;
+        return (_jsx("div", { className: "space-y-3", children: statements.map((statement) => (_jsx("div", { className: `rounded-lg border-2 p-4 ${isReviewMode && tickCrossAnswers[statement.id] === statement.isCorrect ? 'border-green-500 bg-green-50' : ''} ${isReviewMode && tickCrossAnswers[statement.id] !== statement.isCorrect ? 'border-red-500 bg-red-50' : 'border-gray-200'} `, children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsxs("div", { className: "mt-1 flex gap-2", children: [_jsx("button", { onClick: () => {
+                                        const newAnswers = { ...tickCrossAnswers, [statement.id]: true };
+                                        setTickCrossAnswers(newAnswers);
+                                        setSelectedAnswer(newAnswers);
+                                    }, disabled: isReviewMode, className: `flex h-8 w-8 items-center justify-center rounded border-2 ${tickCrossAnswers[statement.id] === true ? 'border-green-500 bg-green-500 text-white' : 'border-gray-300'} `, children: _jsx(Check, { className: "h-5 w-5" }) }), _jsx("button", { onClick: () => {
+                                        const newAnswers = { ...tickCrossAnswers, [statement.id]: false };
+                                        setTickCrossAnswers(newAnswers);
+                                        setSelectedAnswer(newAnswers);
+                                    }, disabled: isReviewMode, className: `flex h-8 w-8 items-center justify-center rounded border-2 ${tickCrossAnswers[statement.id] === false ? 'border-red-500 bg-red-500 text-white' : 'border-gray-300'} `, children: _jsx(X, { className: "h-5 w-5" }) })] }), _jsx("p", { className: "flex-1", children: statement.text }), isReviewMode && (_jsx("span", { className: "text-sm font-medium", children: statement.isCorrect ? '✓ Đúng' : '✗ Sai' }))] }) }, statement.id))) }));
+    };
+    const renderReadingLetterArrange = () => {
+        const answer = question.answer;
+        const correctAnswer = question.correctAnswer || question.correct_answer;
+        // Merge correctWord from correct_answer into subQuestions
+        const subQuestions = (answer?.subQuestions || []).map((sq) => {
+            const correctWord = correctAnswer?.answers?.[sq.id] || sq.correctWord || '';
+            return {
+                ...sq,
+                correctWord,
+            };
+        });
+        const questionData = {
+            subQuestions,
+        };
+        return (_jsx(ArrangeLettersIntoWordsClient, { questionData: questionData, onSubmit: (answers) => {
+                setSelectedAnswer(answers);
+                onSubmitAnswer?.(answers);
+            }, isReviewMode: isReviewMode, userAnswer: userAnswer }));
+    };
+    const renderReadingPassageFill = () => {
+        const answer = question.answer;
+        const { passage, blanks } = answer;
+        // Split passage by placeholders
+        const parts = passage.split(/\{(\d+)\}/);
+        return (_jsx("div", { className: "space-y-4", children: _jsx("div", { className: "prose max-w-none", children: _jsx("div", { className: "text-lg leading-relaxed", children: parts.map((part, idx) => {
+                        const blankIndex = parseInt(part);
+                        if (!isNaN(blankIndex)) {
+                            const blank = blanks.find((b) => b.index === blankIndex);
+                            return (_jsxs("span", { className: "mx-1 inline-flex items-center", children: [_jsx(Input, { value: passageFillAnswers[blankIndex] || '', onChange: (e) => {
+                                            const newAnswers = { ...passageFillAnswers, [blankIndex]: e.target.value };
+                                            setPassageFillAnswers(newAnswers);
+                                            setSelectedAnswer(newAnswers);
+                                        }, className: `inline-block h-8 w-32 text-center ${isReviewMode && passageFillAnswers[blankIndex] === blank?.correctAnswer
+                                            ? 'border-green-500 bg-green-50'
+                                            : ''} ${isReviewMode && passageFillAnswers[blankIndex] !== blank?.correctAnswer
+                                            ? 'border-red-500 bg-red-50'
+                                            : ''} `, disabled: isReviewMode }), isReviewMode && (_jsxs("span", { className: "ml-2 text-sm text-green-600", children: ["(", blank?.correctAnswer, ")"] }))] }, idx));
+                        }
+                        return _jsx("span", { children: part }, idx);
+                    }) }) }) }));
+    };
+    // Basic question type renderers
+    ;
+    const renderChooseTheCorrectAnswer = () => {
+        const rawCorrectAnswer = question.correctAnswer ?? question.correct_answer;
+        const answer = question.answer;
+        const { isGroup, questionGroup } = question;
+        let questionData = {};
+        if (question.content && typeof question.content === 'object') {
+            questionData = {
+                ...question.content,
+                correctAnswer: rawCorrectAnswer?.answer ?? rawCorrectAnswer ?? -1,
+                multipleAnswers: rawCorrectAnswer?.multipleAnswers ?? question.content?.multipleAnswers,
+                id: question.id,
+                isGroup,
+                groupTitle: questionGroup?.payload?.title,
+                groupContent: questionGroup?.payload?.content,
+                groupImageUrl: questionGroup?.payload?.imageUrl,
+                groupNumber: questionGroup?.groupNumber,
+            };
+        }
+        else {
+            questionData = {
+                ...answer,
+                question: question.content || answer?.question,
+                correctAnswer: rawCorrectAnswer?.answer ?? answer?.correctAnswer ?? -1,
+                id: question.id,
+                isGroup,
+                groupTitle: questionGroup?.payload?.title,
+                groupContent: questionGroup?.payload?.content,
+                groupImageUrl: questionGroup?.payload?.imageUrl,
+                groupNumber: questionGroup?.groupNumber,
+            };
+        }
+        return (_jsx(ChooseTheCorrectAnswerClient, { questionData: questionData, questionConfig: question.questionConfig, onSubmit: (ans) => {
+                setSelectedAnswer(ans);
+                onSubmitAnswer?.(ans);
+            }, isReviewMode: isReviewMode, userAnswer: userAnswer }));
+    };
+    const renderFillInBlank = () => {
+        const content = (question.content && typeof question.content === 'object'
+            ? question.content
+            : {});
+        const answer = (question.answer ?? {});
+        const caseSensitive = Boolean(answer.caseSensitive);
+        const stem = typeof content.question === 'string'
+            ? content.question
+            : typeof question.content === 'string'
+                ? question.content
+                : '';
+        const blankStyle = String(content.blankStyle || '').toLowerCase() === 'box' ? 'box' : 'underline';
+        const resolveBlankAnswers = () => {
+            if (Array.isArray(answer.answers) && answer.answers.length > 0) {
+                return answer.answers.map((row) => {
+                    if (Array.isArray(row))
+                        return String(row[0] ?? '');
+                    return String(row ?? '');
+                });
+            }
+            if (Array.isArray(answer.blanks) && answer.blanks.length > 0) {
+                if (typeof answer.blanks[0] === 'string') {
+                    return answer.blanks.map((b) => String(b ?? ''));
+                }
+                return answer.blanks.map((b) => String(b?.correctAnswer ?? ''));
+            }
+            const fromStem = [...stem.matchAll(/\{(\d+)\}/g)].map((m) => Number(m[1]));
+            if (fromStem.length > 0) {
+                const max = Math.max(...fromStem);
+                return Array.from({ length: max + 1 }, () => '');
+            }
+            return [''];
+        };
+        const blanks = resolveBlankAnswers();
+        const values = Array.isArray(fillBlankAnswers) && fillBlankAnswers.length > 0
+            ? fillBlankAnswers
+            : Array.from({ length: blanks.length }, () => '');
+        const handleBlankChange = (index, value) => {
+            const next = Array.from({ length: Math.max(blanks.length, values.length, index + 1) }, (_, i) => values[i] ?? '');
+            next[index] = value;
+            setFillBlankAnswers(next);
+            setSelectedAnswer(next);
+        };
+        const isCorrect = (index, value) => {
+            const correctAnswer = blanks[index] ?? '';
+            if (!value)
+                return false;
+            return caseSensitive
+                ? value === correctAnswer
+                : value.toLowerCase() === correctAnswer.toLowerCase();
+        };
+        const renderStemLine = (line, lineKey) => {
+            // Token parse: bold `**` + blanks `{n}` in one pass (blank may sit inside bold).
+            const tokens = parseFillBlankStemLine(line);
+            return tokens.map((tok, ti) => {
+                if (tok.kind === 'text') {
+                    if (!tok.text)
+                        return null;
+                    return (_jsx("span", { className: tok.bold ? 'font-semibold' : undefined, children: tok.text }, `${lineKey}-t${ti}`));
+                }
+                const userValue = values[tok.index] || '';
+                const ok = isReviewMode && isCorrect(tok.index, userValue);
+                const isBox = blankStyle === 'box';
+                // Input weight stays normal even when blank is inside a bold span.
+                return (_jsx("input", { type: "text", value: userValue, disabled: isReviewMode, maxLength: isBox ? Math.max(1, (blanks[tok.index] || ' ').length) : undefined, "aria-label": `Blank ${tok.index + 1}`, onChange: (e) => handleBlankChange(tok.index, e.target.value), className: `mx-0.5 inline-block bg-transparent text-center outline-none ${isBox
+                        ? 'h-7 w-7 rounded border-2 px-0 text-sm font-semibold uppercase'
+                        : 'min-w-[4.5rem] border-0 border-b-2 px-1 text-base'} ${isReviewMode
+                        ? ok
+                            ? 'border-green-500 bg-green-50 text-green-800'
+                            : 'border-red-500 bg-red-50 text-red-800'
+                        : isBox
+                            ? 'border-slate-400'
+                            : 'border-slate-400'}` }, `${lineKey}-b${tok.index}`));
+            });
+        };
+        // Workbook / modern shape: content.question with {0}/{1} placeholders
+        if (stem && /\{\d+\}/.test(stem)) {
+            const lines = stem.includes('\n') ? stem.split('\n') : [stem];
+            return (_jsxs("div", { className: "space-y-3", children: [content.imageUrl ? (_jsx("div", { className: "flex justify-center", children: _jsx("img", { src: String(content.imageUrl), alt: "", className: "max-h-[200px] rounded-lg object-contain" }) })) : null, _jsx("div", { className: "space-y-2 text-base leading-relaxed text-slate-800", children: lines.map((line, li) => (_jsx("div", { className: "flex flex-wrap items-baseline", children: renderStemLine(line, `fill-l${li}`) }, `fill-line-${li}`))) }), isReviewMode ? (_jsxs("div", { className: "rounded-lg border border-emerald-200 bg-emerald-50/80 p-2.5 text-sm text-emerald-800", children: [_jsx("span", { className: "font-semibold", children: "\u0110\u00E1p \u00E1n: " }), blanks.map((b, i) => (_jsxs("span", { className: "mr-2", children: ["(", i + 1, ") ", _jsx("span", { className: "font-bold underline", children: b || '—' })] }, `ans-${i}`)))] })) : null, !isReviewMode && (_jsx(Button, { onClick: () => onSubmitAnswer?.(values), disabled: values.some((v) => !String(v ?? '').trim()), children: "N\u1ED9p \u0111\u00E1p \u00E1n" }))] }));
+        }
+        // Legacy shape: answer.blanks list of correct strings
+        return (_jsxs("div", { className: "space-y-4", children: [blanks.map((_correctAnswer, index) => {
+                    const userValue = values[index] || '';
+                    const isCorrectAnswer = isReviewMode && isCorrect(index, userValue);
+                    return (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsxs("span", { className: "text-sm font-medium", children: ["Ch\u1ED7 tr\u1ED1ng ", index + 1, ":"] }), _jsx(Input, { value: userValue, onChange: (e) => handleBlankChange(index, e.target.value), placeholder: "Nh\u1EADp \u0111\u00E1p \u00E1n...", className: `flex-1 ${isReviewMode
+                                    ? isCorrectAnswer
+                                        ? 'border-green-500 bg-green-50'
+                                        : 'border-red-500 bg-red-50'
+                                    : ''}`, disabled: isReviewMode }), isReviewMode && isCorrectAnswer && _jsx(Check, { className: "h-4 w-4 text-green-600" }), isReviewMode && !isCorrectAnswer && userValue && (_jsx(X, { className: "h-4 w-4 text-red-600" }))] }, index));
+                }), !isReviewMode && (_jsx(Button, { onClick: () => {
+                        if (onSubmitAnswer) {
+                            onSubmitAnswer(values);
+                        }
+                    }, disabled: values.some((v) => String(v ?? '').trim() === ''), children: "N\u1ED9p \u0111\u00E1p \u00E1n" }))] }));
+    };
+    const renderTrueFalse = () => {
+        const answer = question.answer;
+        const { correctAnswer } = answer;
+        const options = [
+            { value: true, label: 'Đúng' },
+            { value: false, label: 'Sai' },
+        ];
+        return (_jsxs("div", { className: "space-y-3", children: [options.map((option) => {
+                    const isSelected = selectedAnswer === option.value;
+                    return (_jsx("div", { className: `flex cursor-pointer items-center rounded-lg border p-3 transition-colors ${isSelected ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-gray-300'} ${isReviewMode && option.value === correctAnswer
+                            ? 'border-green-500 bg-green-50'
+                            : isReviewMode && isSelected && option.value !== correctAnswer
+                                ? 'border-red-500 bg-red-50'
+                                : ''}`, onClick: () => !isReviewMode && setSelectedAnswer(option.value), children: _jsxs("div", { className: "flex w-full items-center", children: [_jsx("div", { className: `mr-3 h-4 w-4 rounded-full border-2 ${isSelected ? 'border-blue-500 bg-blue-500' : 'border-gray-300'} ${isReviewMode && option.value === correctAnswer
+                                        ? 'border-green-500 bg-green-500'
+                                        : ''}`, children: isSelected && _jsx("div", { className: "m-auto h-2 w-2 rounded-full bg-white" }) }), _jsx("span", { className: "flex-1", children: option.label }), isReviewMode && option.value === correctAnswer && (_jsx(Check, { className: "ml-2 h-4 w-4 text-green-600" })), isReviewMode && isSelected && option.value !== correctAnswer && (_jsx(X, { className: "ml-2 h-4 w-4 text-red-600" }))] }) }, option.value.toString()));
+                }), !isReviewMode && (_jsx(Button, { onClick: () => {
+                        if (onSubmitAnswer) {
+                            onSubmitAnswer(selectedAnswer);
+                        }
+                    }, disabled: selectedAnswer === null, children: "N\u1ED9p \u0111\u00E1p \u00E1n" }))] }));
+    };
+    const renderEssay = () => {
+        const answer = question.answer;
+        const { minWords, maxWords } = answer;
+        const wordCount = selectedAnswer ? selectedAnswer.trim().split(/\s+/).length : 0;
+        const isWithinLimit = wordCount >= (minWords || 0) && wordCount <= (maxWords || Infinity);
+        return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "text-sm text-gray-600", children: [minWords && maxWords
+                            ? `Số từ: ${minWords} - ${maxWords} từ`
+                            : minWords
+                                ? `Tối thiểu: ${minWords} từ`
+                                : maxWords
+                                    ? `Tối đa: ${maxWords} từ`
+                                    : '', selectedAnswer && (_jsxs("span", { className: `ml-2 ${isWithinLimit ? 'text-green-600' : 'text-red-600'}`, children: ["(", wordCount, " t\u1EEB)"] }))] }), _jsx("textarea", { value: selectedAnswer || '', onChange: (e) => setSelectedAnswer(e.target.value), placeholder: "Vi\u1EBFt c\u00E2u tr\u1EA3 l\u1EDDi c\u1EE7a b\u1EA1n \u1EDF \u0111\u00E2y...", className: "h-32 w-full resize-none rounded-lg border border-gray-300 p-3 focus:border-blue-500 focus:ring-1 focus:ring-blue-500", disabled: isReviewMode }), !isReviewMode && (_jsx(Button, { onClick: () => {
+                        if (onSubmitAnswer) {
+                            onSubmitAnswer(selectedAnswer);
+                        }
+                    }, disabled: !selectedAnswer || selectedAnswer.trim().length < (minWords || 0), children: "N\u1ED9p \u0111\u00E1p \u00E1n" }))] }));
+    };
+    ;
+    ;
+    ;
+    ;
+    ;
+    const renderWriteShortParagraph = () => {
+        const answer = question.answer;
+        const questionData = {
+            contexts: answer?.contexts || [],
+            minWords: answer?.minWords || 20,
+            maxWords: answer?.maxWords,
+            instruction: answer?.instruction || '',
+        };
+        return (_jsx(WriteShortParagraphClient, { questionData: questionData, onSubmit: (answerText) => {
+                setSelectedAnswer(answerText);
+                onSubmitAnswer?.(answerText);
+            }, isReviewMode: isReviewMode, userAnswer: userAnswer }));
+    };
+    const renderWriteAShortLetter = () => {
+        const answer = question.answer;
+        const questionData = {
+            contexts: answer?.contexts || [],
+            informations: answer?.informations || [],
+            minWords: answer?.minWords || 20,
+            maxWords: answer?.maxWords,
+            instruction: answer?.instruction || '',
+        };
+        return (_jsx(WriteAShortLetterClient, { questionData: questionData, onSubmit: (answerText) => {
+                setSelectedAnswer(answerText);
+                onSubmitAnswer?.(answerText);
+            }, isReviewMode: isReviewMode, userAnswer: userAnswer }));
+    };
+    ;
+    ;
+    const renderLabelThePicture = () => {
+        const questionData = question.answer; // answer contains the full data structure
+        return (_jsx(LabelThePictureClient, { questionData: questionData, userAnswer: userAnswer, isReviewMode: isReviewMode, onSubmit: (answers) => {
+                setSelectedAnswer(answers);
+                onSubmitAnswer?.(answers);
+            } }));
+    };
+    const renderReadAndColorObjects = () => {
+        const answer = question.answer;
+        const questionData = {
+            backgroundImageUrl: answer?.backgroundImageUrl || '',
+            colorNodes: answer?.colorNodes || [],
+            regionNodes: answer?.regionNodes || [],
+            instructions: answer?.instructions || [],
+        };
+        return (_jsx(ReadAndColorObjectsClient, { questionData: questionData, onSubmit: (userConnections) => {
+                setSelectedAnswer(userConnections);
+                onSubmitAnswer?.(userConnections);
+            } }));
+    };
+    const renderLookPictureFillWordHint = () => {
+        const answer = question.answer;
+        const content = question.content;
+        // Check if question has group info (from API)
+        const questionGroup = question.questionGroup;
+        let subQuestions = [];
+        if (answer?.subQuestions && answer.subQuestions.length > 0) {
+            subQuestions = answer.subQuestions;
+        }
+        else if (content?.imageUrl && content?.word) {
+            // Single question format - transform to subQuestions
+            subQuestions = [{
+                    id: question.id,
+                    imageUrl: content.imageUrl,
+                    word: content.word,
+                    correctAnswer: answer?.correctAnswer || '',
+                    groupNumber: questionGroup?.groupNumber || 1,
+                }];
+        }
+        // Get hintLetters from multiple sources (priority order):
+        // 1. questionGroup.payload.hintLetters (from API group payload)
+        // 2. answer.hintLetters
+        // 3. content.hintLetters
+        const hintLetters = questionGroup?.payload?.hintLetters ||
+            answer?.hintLetters ||
+            content?.hintLetters ||
+            [];
+        // Build hintLettersByGroup if we have a groupNumber
+        const groupNumber = questionGroup?.groupNumber || 1;
+        const hintLettersByGroup = {};
+        if (hintLetters.length > 0) {
+            hintLettersByGroup[groupNumber] = hintLetters;
+        }
+        const questionData = {
+            subQuestions,
+            hintLetters,
+            hintLettersByGroup,
+            groups: [{ number: groupNumber, questionCount: subQuestions.length }],
+        };
+        return (_jsx(LookPictureFillWordHintClient, { questionData: questionData, userAnswer: userAnswer, isReviewMode: isReviewMode, explanation: question.explanation, onSubmit: (answers) => {
+                setSelectedAnswer(answers);
+                onSubmitAnswer?.(answers);
+            } }));
+    };
+    const renderReadPassageAndAnswerQuestions = () => {
+        const answer = question.answer;
+        const questionData = {
+            passage: answer?.passage || '',
+            passageTitle: answer?.passageTitle || '',
+            instructions: answer?.instructions || '',
+            subQuestions: answer?.subQuestions || [],
+        };
+        return (_jsx(ReadPassageAndAnswerQuestionsClient, { questionData: questionData, userAnswer: userAnswer, isReviewMode: isReviewMode, onSubmit: (answers) => {
+                setSelectedAnswer(answers);
+                onSubmitAnswer?.(answers);
+            } }));
+    };
+    const renderLookPictureChooseCorrectAnswer = () => {
+        const content = question.content;
+        const answer = question.answer;
+        // Merge correct answers into subQuestions
+        const subQuestions = (content?.subQuestions || answer?.subQuestions || []).map((sq) => {
+            const correctAnswerId = answer?.answers?.[sq.id] || sq.correctAnswer;
+            return {
+                ...sq,
+                options: (sq.options || []).map((opt) => ({
+                    ...opt,
+                    isCorrect: opt.id === correctAnswerId,
+                })),
+            };
+        });
+        const questionData = {
+            subQuestions,
+        };
+        return (_jsx(LookPictureChooseCorrectAnswerClient, { questionData: questionData, userAnswer: userAnswer, isReviewMode: isReviewMode, onSubmit: (answers) => {
+                setSelectedAnswer(answers);
+                onSubmitAnswer?.(answers);
+            } }));
+    };
+    const renderLookPictureFillBlankChooseAnswer = () => {
+        const content = question.content;
+        const answer = question.answer;
+        // Merge correct answers into subQuestions
+        const subQuestions = (content?.subQuestions || answer?.subQuestions || []).map((sq) => {
+            const correctAnswerId = answer?.answers?.[sq.id] || sq.correctAnswer;
+            return {
+                ...sq,
+                options: (sq.options || []).map((opt) => ({
+                    ...opt,
+                    isCorrect: opt.id === correctAnswerId,
+                })),
+            };
+        });
+        const questionData = {
+            subQuestions,
+        };
+        return (_jsx(LookPictureFillBlankChooseAnswerClient, { questionData: questionData, userAnswer: userAnswer, isReviewMode: isReviewMode, onSubmit: (answers) => {
+                setSelectedAnswer(answers);
+                onSubmitAnswer?.(answers);
+            } }));
+    };
+    const renderFillMissingWordsInGrid = () => {
+        const content = question.content;
+        const answer = question.answer;
+        // Build questionData in the expected format: { content: {...}, answer: {...} }
+        const questionData = {
+            content: {
+                grid: content?.grid || [],
+                rows: content?.rows || 3,
+                columns: content?.columns || 3,
+                disabledCells: content?.disabledCells || [],
+            },
+            answer: {
+                answers: answer?.answers || {},
+                missingLetters: answer?.missingLetters || [],
+                caseSensitive: answer?.caseSensitive || false,
+            },
+        };
+        return (_jsx(FillMissingWordsInGridClient, { questionData: questionData, userAnswer: userAnswer, isReviewMode: isReviewMode, onSubmit: (answers) => {
+                setSelectedAnswer(answers);
+                onSubmitAnswer?.(answers);
+            } }));
+    };
+    const renderWordFillStructuredForm = () => {
+        const content = (question.content && typeof question.content === 'object'
+            ? question.content
+            : {});
+        // Pearson preview maps correctAnswer → answer; bank may use either shape.
+        const answer = (question.answer ??
+            question.correctAnswer ??
+            {});
+        const answers = answer?.answers && typeof answer.answers === 'object' && !Array.isArray(answer.answers)
+            ? answer.answers
+            : {};
+        const html = String(content.content || '');
+        const blankRaw = String(content.blankStyle || '').toLowerCase();
+        const blankStyle = blankRaw === 'letter' || blankRaw === 'box'
+            ? 'letter'
+            : blankRaw === 'phrase' || blankRaw === 'sentence'
+                ? 'phrase'
+                : 'word';
+        const userMap = userAnswer && typeof userAnswer === 'object' && !Array.isArray(userAnswer)
+            ? userAnswer
+            : selectedAnswer && typeof selectedAnswer === 'object' && !Array.isArray(selectedAnswer)
+                ? selectedAnswer
+                : isReviewMode
+                    ? answers
+                    : {};
+        const qNum = typeof question.questionNumber === 'number' && question.questionNumber > 0
+            ? question.questionNumber
+            : undefined;
+        const rawWordBank = Array.isArray(content.wordBank) ? content.wordBank : undefined;
+        const wordBank = rawWordBank?.map((entry) => {
+            if (entry == null || typeof entry !== 'object')
+                return null;
+            const rec = entry;
+            if (Array.isArray(rec.options)) {
+                const options = rec.options.map((o) => String(o ?? '').trim()).filter(Boolean);
+                return options.length >= 2 ? { options } : null;
+            }
+            const word = String(rec.word ?? '').trim();
+            if (word)
+                return rec.isExample ? { word, isExample: true } : { word };
+            return null;
+        });
+        const hasWordOptions = Boolean(wordBank?.some((e) => e != null &&
+            'options' in e &&
+            Array.isArray(e.options) &&
+            (e.options?.length ?? 0) >= 2));
+        const hasSharedWords = Boolean(wordBank?.some((e) => e != null && 'word' in e && e.word));
+        const viewMode = String(content.viewMode || '').trim() ||
+            (hasWordOptions ? 'WITH_OPTIONS' : hasSharedWords ? 'WITH_WORD_BANK' : undefined);
+        return (_jsx(WordFillStructuredFormClient, { questionData: {
+                title: String(content.title || ''),
+                imageUrl: content.imageUrl ? String(content.imageUrl) : undefined,
+                content: html,
+                blankStyle,
+                answers,
+                caseSensitive: Boolean(answer?.caseSensitive),
+                explanation: question.explanation,
+                ...(viewMode ? { viewMode } : {}),
+                ...((hasWordOptions || hasSharedWords) && wordBank ? { wordBank } : {}),
+            }, userAnswer: userMap, isReviewMode: isReviewMode, autoFillCorrectAnswers: isReviewMode && Object.keys(userMap).length === 0, explanation: question.explanation, questionNumber: qNum, onAnswerChange: (key, value) => {
+                const prev = selectedAnswer && typeof selectedAnswer === 'object' && !Array.isArray(selectedAnswer)
+                    ? selectedAnswer
+                    : {};
+                setSelectedAnswer({ ...prev, [key]: value });
+            } }));
+    };
+    const renderWordFillParagraph = () => {
+        const content = (question.content && typeof question.content === 'object'
+            ? question.content
+            : {});
+        const answer = (question.answer ?? {});
+        const paragraph = String(content.paragraph || '');
+        const correctAnswers = Array.isArray(answer.answers)
+            ? answer.answers.map((a) => String(a ?? ''))
+            : [];
+        const rawBank = Array.isArray(content.wordBank) ? content.wordBank : [];
+        const wordBank = rawBank.map((item) => {
+            if (typeof item === 'string')
+                return { word: item, options: [] };
+            const options = Array.isArray(item?.options) ? item.options.map(String) : [];
+            return { word: String(item?.word ?? options[0] ?? ''), options, isExample: Boolean(item?.isExample) };
+        });
+        const viewMode = String(content.viewMode || (wordBank.some((w) => w.options.length) ? 'WITH_OPTIONS' : 'DEFAULT')).toUpperCase();
+        const blankIndexes = [...paragraph.matchAll(/\{(\d+)\}/g)].map((m) => Number(m[1]));
+        const blankCount = blankIndexes.length > 0 ? Math.max(...blankIndexes) + 1 : Math.max(correctAnswers.length, wordBank.length, 1);
+        const values = Array.isArray(userAnswer)
+            ? userAnswer
+            : Array.isArray(selectedAnswer)
+                ? selectedAnswer
+                : Array.from({ length: blankCount }, () => '');
+        const setBlank = (index, value) => {
+            const next = Array.from({ length: blankCount }, (_, i) => values[i] ?? '');
+            next[index] = value;
+            setSelectedAnswer(next);
+        };
+        const renderLine = (line, lineKey) => {
+            const parts = line.split(/(\{\d+\})/g);
+            return parts.map((part, i) => {
+                const m = /^\{(\d+)\}$/.exec(part);
+                if (!m)
+                    return _jsx("span", { children: part }, `${lineKey}-t${i}`);
+                const idx = Number(m[1]);
+                const bank = wordBank[idx];
+                const options = bank?.options?.length ? bank.options : wordBank.flatMap((w) => w.options).filter(Boolean);
+                const value = values[idx] ?? '';
+                const correct = correctAnswers[idx] ?? '';
+                const ok = isReviewMode && value && correct && value.toLowerCase() === correct.toLowerCase();
+                if (viewMode === 'WITH_OPTIONS' && options.length > 0) {
+                    return (_jsxs("select", { value: value, disabled: isReviewMode, onChange: (e) => setBlank(idx, e.target.value), className: `mx-1 inline-block min-w-[7rem] rounded border px-2 py-1 text-sm ${isReviewMode ? (ok ? 'border-green-500 bg-green-50' : 'border-red-500 bg-red-50') : 'border-slate-300'}`, children: [_jsx("option", { value: "", children: "\u2014" }), options.map((opt) => (_jsx("option", { value: opt, children: opt }, opt)))] }, `${lineKey}-b${idx}`));
+                }
+                return (_jsx("input", { type: "text", value: value, disabled: isReviewMode, onChange: (e) => setBlank(idx, e.target.value), className: `mx-1 inline-block min-w-[5rem] border-0 border-b-2 px-1 text-center outline-none ${isReviewMode ? (ok ? 'border-green-500 bg-green-50' : 'border-red-500 bg-red-50') : 'border-slate-400'}` }, `${lineKey}-b${idx}`));
+            });
+        };
+        if (!paragraph.trim()) {
+            return _jsx("div", { className: "text-sm text-gray-500", children: "Kh\u00F4ng c\u00F3 n\u1ED9i dung \u0111o\u1EA1n v\u0103n." });
+        }
+        return (_jsxs("div", { className: "space-y-3", children: [content.title ? _jsx("h3", { className: "text-center text-lg font-bold uppercase text-slate-800", children: content.title }) : null, content.imageUrl ? (_jsx("div", { className: "flex justify-center", children: _jsx("img", { src: String(content.imageUrl), alt: "", className: "max-h-[180px] rounded-lg object-contain" }) })) : null, _jsx("div", { className: "space-y-2 text-base leading-relaxed text-slate-800", children: paragraph.split('\n').map((line, li) => (_jsx("div", { className: "flex flex-wrap items-baseline", children: renderLine(line, `wfp-${li}`) }, `wfp-l${li}`))) }), isReviewMode && correctAnswers.length > 0 ? (_jsxs("div", { className: "rounded-lg border border-emerald-200 bg-emerald-50/80 p-2.5 text-sm text-emerald-800", children: [_jsx("span", { className: "font-semibold", children: "\u0110\u00E1p \u00E1n: " }), correctAnswers.map((a, i) => (_jsxs("span", { className: "mr-2", children: ["(", i + 1, ") ", _jsx("span", { className: "font-bold underline", children: a || '—' })] }, `wfp-a${i}`)))] })) : null] }));
+    };
+    const renderQuestion = () => {
+        switch (question.type) {
+            case 'CHOOSE_THE_CORRECT_ANSWER':
+                return renderChooseTheCorrectAnswer();
+            case 'CHOOSE_THE_CORRECT_ANSWER_GROUP':
+                return (_jsx(ChooseTheCorrectAnswerGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer }));
+            case 'TRUE_FALSE_GROUP':
+                return (_jsx(TrueFalseGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer }));
+            case 'CROSS_OUT_WORD_GROUP':
+                return (_jsx(CrossOutWordGroupViewer, { question: question, isReviewMode: isReviewMode }));
+            case 'SPONTANEOUS_QA_GROUP':
+                return _jsx(SpontaneousQaGroupViewer, { question: question });
+            case 'WORD_ORDER_AND_MATCH_GROUP':
+            case 'WORD_ORDER_AND_MATCH':
+                return (_jsx(WordOrderAndMatchGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer }));
+            case 'FILL_IN_BLANK':
+                return renderFillInBlank();
+            case 'TRUE_FALSE':
+                return renderTrueFalse();
+            case 'ESSAY':
+                return renderEssay();
+            case 'LISTEN_AND_FILL_IN_THE_BLANK_WITH_IMAGE':
+                return renderListeningFillBlank();
+            case 'TICK_TRUE_OR_FALSE':
+            case 'TICK_YES_OR_NO':
+                return renderReadingTickCross();
+            case 'ARRANGE_LETTERS_INTO_WORDS':
+                return renderReadingLetterArrange();
+            case 'READ_PASSAGE_AND_COMPLETE_STORY':
+                return renderReadingPassageFill();
+            case 'WRITE_SHORT_PARAGRAPH':
+                return renderWriteShortParagraph();
+            case 'WRITE_A_SHORT_LETTER':
+                return renderWriteAShortLetter();
+            // Marketing exam questions grade 1-2
+            case 'LOOK_PICTURE_FILL_WORD_HINT':
+                return renderLookPictureFillWordHint();
+            case 'LABEL_THE_PICTURE':
+                return renderLabelThePicture();
+            case 'READ_AND_COLOR_OBJECTS':
+                return renderReadAndColorObjects();
+            case 'READ_PASSAGE_AND_ANSWER_QUESTIONS':
+                return renderReadPassageAndAnswerQuestions();
+            // Additional marketing exam questions
+            case 'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER':
+                return renderLookPictureChooseCorrectAnswer();
+            case 'LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER':
+                return renderLookPictureFillBlankChooseAnswer();
+            case 'FILL_MISSING_WORDS_IN_GRID':
+                return renderFillMissingWordsInGrid();
+            case 'WORD_FILL_PARAGRAPH':
+                return renderWordFillParagraph();
+            case 'WORD_FILL_STRUCTURED_FORM':
+                return (_jsx(WordFillStructuredFormViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer, onSubmitAnswer: onSubmitAnswer }));
+            default:
+                return _jsxs("div", { children: ["Lo\u1EA1i c\u00E2u h\u1ECFi kh\u00F4ng \u0111\u01B0\u1EE3c h\u1ED7 tr\u1EE3: ", question.type] });
+        }
+    };
+    /**
+     * Card header label only — never dump FILL_IN_BLANK / WORD_FILL stems here.
+     * Those stems contain `**bold**` + `{n}` and are rendered in the body via
+     * parseFillBlankStemLine (or paragraph renderer). Dumping raw text shows markdown.
+     */
+    const resolveCardTitle = () => {
+        // WFSF shows Bài N + instruction inside the client — no outer card label.
+        if (question.type === 'WORD_FILL_STRUCTURED_FORM') {
+            return null;
+        }
+        // Modern fill stems live entirely in the body; title is a short label.
+        if (question.type === 'FILL_IN_BLANK' ||
+            question.type === 'WORD_FILL_PARAGRAPH') {
+            return 'Câu hỏi';
+        }
+        if (typeof question.content === 'string') {
+            return stripLightweightMarkdown(question.content) || 'Câu hỏi';
+        }
+        const c = question.content;
+        const raw = c?.title || c?.question || c?.paragraph || '';
+        // Prefer explicit title; if question/paragraph is stem-like, avoid raw dump.
+        if (c?.title)
+            return stripLightweightMarkdown(c.title) || 'Câu hỏi';
+        if (typeof raw === 'string' && (/\{\d+\}/.test(raw) || /\*\*/.test(raw))) {
+            return 'Câu hỏi';
+        }
+        return stripLightweightMarkdown(raw) || 'Câu hỏi';
+    };
+    const cardTitle = resolveCardTitle();
+    // WFSF already has its own bordered shell — avoid double Card border.
+    if (question.type === 'WORD_FILL_STRUCTURED_FORM') {
+        return (_jsx("div", { className: "space-y-4", children: renderQuestion() }));
+    }
+    return (_jsxs(Card, { children: [cardTitle ? (_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "flex items-center justify-between", children: [_jsx("span", { className: "min-w-0 pr-2 text-base font-semibold leading-snug", children: cardTitle }), _jsxs("span", { className: "shrink-0 text-sm font-normal text-gray-500", children: [question.points, " \u0111i\u1EC3m"] })] }) })) : null, _jsx(CardContent, { className: cardTitle ? 'space-y-4' : 'space-y-4 pt-4', children: renderQuestion() })] }));
+}
+/** Drop lightweight markdown markers for plain header labels (not full token parse). */
+function stripLightweightMarkdown(text) {
+    return String(text || '')
+        .replace(/\*\*/g, '')
+        .replace(/\{(\d+)\}/g, '___')
+        .replace(/\s+/g, ' ')
+        .trim();
+}