@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.29

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

@@ -1 +1,171 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{X as t}from"lucide-react";import{useMemo as a}from"react";import{ResolvedImage as l}from"../../../../../components/common/ResolvedImage";import n from"../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import s from"../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner";import{cn as i}from"../../../../../shared/lib/utils";function o({item:t,isUsed:a,isExample:n}){return r("div",{className:i("flex flex-col items-center justify-between overflow-hidden rounded-2xl border-2 bg-white p-3 shadow-sm transition-all duration-300",n?"border-amber-200 bg-amber-50/50":a?"border-emerald-200 bg-emerald-50/50 opacity-60":"border-slate-200"),children:[t.imageUrl&&e("div",{className:"flex h-24 sm:h-28 w-full items-center justify-center overflow-hidden rounded-xl bg-slate-50/50 p-2 mb-3",children:e(l,{src:t.imageUrl,alt:t.word,className:"h-full w-full object-contain drop-shadow-sm"})}),r("div",{className:i("flex w-full flex-col items-center",!t.imageUrl&&"mt-0"),children:[e("span",{className:"text-base font-extrabold tracking-wide text-slate-800",children:t.word}),n&&e("span",{className:"mt-1 rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider text-amber-700",children:"Example"}),a&&!n&&e("span",{className:"mt-1 rounded-full bg-emerald-100 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider text-emerald-700",children:"Used"})]})]})}function d({blankIndex:a,value:l,isExampleBlank:n,isReviewMode:s,onInputChange:o,onClear:d}){const c=!!l;return n?e("span",{className:"mx-1 inline-flex min-w-[110px] items-center justify-center border-0 border-b-2 border-amber-400 bg-transparent px-2 py-0.5 align-baseline text-sm font-bold text-amber-700",children:l}):r("span",{className:"mx-1 inline-flex items-end gap-1.5 align-baseline",children:[e("input",{type:"text","aria-label":`Blank ${a+1}`,value:l,onChange:e=>o(e.target.value),disabled:s,placeholder:"_____",className:i("h-8 min-w-[90px] max-w-[150px] rounded-none border-0 border-b-2 bg-transparent px-1 pb-0.5 text-center text-sm font-semibold shadow-none outline-none transition-all",c?"border-emerald-500 text-emerald-700":"border-slate-400 text-slate-500 placeholder:text-slate-300","focus:border-blue-500 focus:text-blue-700",s?"cursor-default":"cursor-text")}),!s&&c&&e("button",{type:"button",onClick:d,className:"inline-flex h-6 w-6 items-center justify-center rounded-full text-slate-400 transition-colors hover:bg-red-50 hover:text-red-500","aria-label":`Clear blank ${a+1}`,children:e(t,{className:"h-3.5 w-3.5"})})]})}export function MoversWordFillParagraphRenderer({partNumber:t,partName:c,questionCount:m,instruction:p,questionId:x,paragraph:b,title:u,imageUrl:h,wordBank:g,viewMode:f,answers:w,onAnswerChange:N,exampleAnswer:v,isReviewMode:y=!1,emailFrom:_,emailTo:k,correctAnswerTextMap:C}){const I=w[x],j=Array.isArray(I)?I:I&&"object"==typeof I?Object.keys(I).filter(e=>/^\d+$/.test(e)).sort((e,r)=>Number(e)-Number(r)).map(e=>I[e]):"string"==typeof I?[I]:[],$=a(()=>Array.isArray(g)?g:[],[g]),M=a(()=>{if(v&&v.length>0)return v;const e=[];let r=!1;for(let t=0;t<$.length;t++)$[t]?.isExample?(r=!0,y&&C?e.push(C[`${x}-blank-${t}`]||$[t]?.word||""):e.push($[t]?.word||"")):e.push(void 0);return r?e:void 0},[v,$,y,C,x]),R=b.split(/(\{\d+\})/),A=e=>Boolean(M?.[e]),B=(e,r)=>{if(y||A(e))return;const t=[...j];t[e]=r,N(x,t)},E=e=>{if(y||A(e))return;const r=[...j];r[e]="",N(x,r)},T=new Set(j.filter(Boolean));return r("div","EMAIL"===f?{className:"grid h-full min-h-0 grid-cols-1 gap-4 sm:gap-6 "+(y?"":"lg:grid-cols-2"),children:[r("div",{className:"flex min-h-0 flex-col gap-4 overflow-y-auto p-3 sm:pb-6 sm:pr-6 sm:pt-6",children:[e(n,{partNumber:t,questionCount:m,partName:c,isReviewMode:y}),e(s,{instruction:p,isReviewMode:y}),h&&e("div",{className:"flex items-center justify-center",children:e(l,{src:h,alt:"Illustration",className:"max-h-[300px] rounded-lg object-contain shadow-md"})})]}),r("div",{className:"flex min-h-0 flex-col gap-4 p-3 sm:gap-5 sm:pb-6 sm:pl-6 sm:pt-6",children:[r("div",{className:"shrink-0 overflow-hidden rounded-2xl border border-sky-100 bg-white shadow-[0_10px_30px_rgba(15,23,42,0.06)]",children:[e("div",{className:"bg-gradient-to-r from-sky-100 via-blue-50 to-sky-100 px-5 py-3",children:e("span",{className:"text-[15px] font-extrabold uppercase tracking-[0.14em] text-sky-900",children:"Email"})}),r("div",{className:"space-y-3 bg-gradient-to-b from-white to-slate-50/80 px-5 py-4",children:[r("div",{className:"grid grid-cols-[64px_1fr] items-center gap-4",children:[e("span",{className:"text-[15px] font-semibold text-slate-700",children:"From:"}),e("div",{className:"rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-base font-medium leading-6 text-slate-800 shadow-[inset_0_1px_2px_rgba(15,23,42,0.04)]",children:_||"—"})]}),r("div",{className:"grid grid-cols-[64px_1fr] items-center gap-4",children:[e("span",{className:"text-[15px] font-semibold text-slate-700",children:"To:"}),e("div",{className:"rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-base font-medium leading-6 text-slate-800 shadow-[inset_0_1px_2px_rgba(15,23,42,0.04)]",children:k||"—"})]})]})]}),e("div",{className:i("custom-scrollbar flex-1 min-h-0 overflow-y-auto rounded-2xl border border-slate-200 bg-white p-5 pr-3 text-base leading-loose text-gray-800 shadow-[0_8px_24px_rgba(15,23,42,0.04)]",!y&&"whitespace-pre-line"),children:R.map((t,a)=>{const l=t.match(/^\{(\d+)\}$/);if(!l)return e("span",{children:t},a);const n=parseInt(l[1],10),s=j[n]||"";if(y&&C){const t=C[`${x}-blank-${n}`]||"",l=!s,i=!l&&s.trim().toLowerCase()===t.trim().toLowerCase();return l?e("span",{className:"mx-1 inline-block min-w-[80px] border-b-2 border-blue-400 px-1 py-0.5 text-center text-blue-600",children:t||"___"},a):i?e("span",{className:"mx-1 inline-block min-w-[80px] border-b-2 border-green-500 px-1 py-0.5 text-center text-green-700",children:s},a):r("span",{className:"mx-1 inline-block min-w-[80px] border-b-2 border-red-400 px-1 py-0.5 text-center",children:[e("span",{className:"text-red-500 line-through",children:s}),t&&r("span",{className:"ml-1 text-green-600",children:["→ ",t]})]},a)}return r("span",{className:"mx-0.5 inline-flex items-baseline gap-0.5 align-baseline",children:[r("span",{className:"text-[11px] font-bold text-blue-400",children:["(",n+1,")"]}),e("input",{type:"text",value:s,onChange:e=>{const r=[...j];r[n]=e.target.value,N(x,r)},disabled:y,placeholder:"···",style:{width:`${Math.max(3,(s||"").length+1)}ch`},className:i("inline-block min-w-[3ch] max-w-[12ch] border-b-2 bg-transparent px-0.5 py-0 text-center text-sm font-medium outline-none transition-colors",s?"border-emerald-400 text-emerald-700":"border-slate-300 text-slate-500","focus:border-blue-500 focus:text-blue-700","disabled:opacity-60")})]},a)})})]})]}:{className:"grid h-full min-h-0 grid-cols-1 gap-4 sm:gap-6 "+(y?"":"lg:grid-cols-2"),children:[r("div",{className:"flex min-h-0 flex-col gap-4 overflow-y-auto p-3 sm:pb-6 sm:pr-6 sm:pt-6",children:[e(n,{partNumber:t,questionCount:m,partName:c,isReviewMode:y}),e(s,{instruction:p,isReviewMode:y}),u&&e("h2",{className:"shrink-0 text-center text-2xl font-bold uppercase text-coral-500",children:u}),h&&e("div",{className:"flex items-center justify-center",children:e(l,{src:h,alt:"Illustration",className:"max-h-[400px] w-full max-w-xl rounded-lg object-contain shadow-md"})}),"WITH_WORD_BANK"===f&&r("div",{className:"shrink-0 rounded-2xl border border-sky-100 bg-slate-50/50 p-4 sm:p-5 shadow-sm",children:[r("div",{className:"mb-4 flex items-center justify-center gap-2",children:[e("div",{className:"h-px flex-1 bg-gradient-to-r from-transparent to-sky-200"}),e("h3",{className:"text-sm font-extrabold uppercase tracking-widest text-sky-800",children:"WORD BANK (Reference)"}),e("div",{className:"h-px flex-1 bg-gradient-to-l from-transparent to-sky-200"})]}),e("div",{className:"grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-2 xl:grid-cols-3",children:$.map((r,t)=>{const a=T.has(r.word),l=r.isExample||M?.includes(r.word)||!1;return e(o,{item:r,isUsed:a,isExample:l},`${r.word}-${t}`)})})]})]}),e("div",{className:"custom-scrollbar flex min-h-0 flex-col gap-4 overflow-y-auto p-3 sm:gap-5 sm:pb-6 sm:pl-6 sm:pt-6",children:e("div",{className:i("shrink-0 rounded-2xl border border-slate-200 bg-white p-5 pr-3 text-base leading-loose text-gray-800 shadow-[0_8px_24px_rgba(15,23,42,0.04)]",!y&&"whitespace-pre-line"),children:R.map((t,a)=>{const l=t.match(/^\{(\d+)\}$/);if(!l)return e("span",{children:t},a);const n=parseInt(l[1],10),s=j[n]||"",o=M?.[n],c=Boolean(o),m=o||s;if(y&&!c&&C){const t=C[`${x}-blank-${n}`]||"",l=!s,i=!l&&s.trim().toLowerCase()===t.trim().toLowerCase();return l?e("span",{className:"mx-1 inline-block min-w-[80px] border-b-2 border-blue-400 px-1 py-0.5 text-center text-blue-600",children:t||"___"},a):i?e("span",{className:"mx-1 inline-block min-w-[80px] border-b-2 border-green-500 px-1 py-0.5 text-center text-green-700",children:s},a):r("span",{className:"mx-1 inline-block min-w-[80px] border-b-2 border-red-400 px-1 py-0.5 text-center",children:[e("span",{className:"text-red-500 line-through",children:s}),t&&r("span",{className:"ml-1 text-green-600",children:["→ ",t]})]},a)}if("WITH_OPTIONS"===f){if(c)return e("span",{className:"mx-1 inline-block min-w-[60px] border-b-2 border-amber-400 bg-amber-50 px-2 py-0.5 text-center text-sm font-bold text-amber-700 align-baseline",children:o||"___"},a);const t=$[n]?.options||[];return r("select",{value:s,onChange:e=>((e,r)=>{r?B(e,r):E(e)})(n,e.target.value),disabled:y,className:"mx-1 inline-block min-w-[100px] rounded border-2 border-blue-300 bg-blue-50 px-2 py-0.5 text-center text-sm font-medium outline-none focus:border-blue-500",children:[e("option",{value:"",children:"___"}),t.map(r=>e("option",{value:r,children:r},r))]},a)}if("DEFAULT"===f){const t=c?String(o||""):j[n]||"";return r("span",{className:"mx-0.5 inline-flex items-baseline gap-0.5 align-baseline",children:[r("span",{className:"text-[11px] font-bold text-blue-400",children:["(",n+1,")"]}),e("input",{type:"text",value:t,onChange:e=>{if(c)return;const r=[...j];r[n]=e.target.value,N(x,r)},disabled:y||!!c,placeholder:"·········",style:{width:`${Math.max(10,t.length+1)}ch`},className:i("inline-block min-w-[10ch] max-w-[12ch] border-b-2 bg-transparent px-0.5 py-0 text-center text-sm font-medium outline-none transition-colors",t?"border-emerald-400 text-emerald-700":"border-slate-300 text-slate-500","focus:border-blue-500 focus:text-blue-700","disabled:opacity-60")})]},a)}return"WITH_WORD_BANK"===f?e(d,{blankIndex:n,value:m||"",isExampleBlank:c,isReviewMode:y,onInputChange:e=>B(n,e),onClear:()=>E(n)},a):e("span",{children:t},a)})})})]})}
+/**
+ * WORD_FILL_PARAGRAPH Renderer - Paragraph with blanks filled from word bank
+ * Supports WITH_WORD_BANK (input per blank) and WITH_OPTIONS (per-blank dropdown)
+ * Used in Starters P8, Movers P8/P9
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from 'lucide-react';
+import { useMemo } from 'react';
+import { ResolvedImage } from '../../../../../components/common/ResolvedImage';
+import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+import { cn } from '../../../../../shared/lib/utils';
+function WordReferenceTile({ item, isUsed, isExample }) {
+    return (_jsxs("div", { className: cn('flex flex-col items-center justify-between overflow-hidden rounded-2xl border-2 bg-white p-3 shadow-sm transition-all duration-300', isExample
+            ? 'border-amber-200 bg-amber-50/50'
+            : isUsed
+                ? 'border-emerald-200 bg-emerald-50/50 opacity-60'
+                : 'border-slate-200'), children: [item.imageUrl && (_jsx("div", { className: "flex h-24 sm:h-28 w-full items-center justify-center overflow-hidden rounded-xl bg-slate-50/50 p-2 mb-3", children: _jsx(ResolvedImage, { src: item.imageUrl, alt: item.word, className: "h-full w-full object-contain drop-shadow-sm" }) })), _jsxs("div", { className: cn("flex w-full flex-col items-center", !item.imageUrl && "mt-0"), children: [_jsx("span", { className: "text-base font-extrabold tracking-wide text-slate-800", children: item.word }), isExample && (_jsx("span", { className: "mt-1 rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider text-amber-700", children: "Example" })), isUsed && !isExample && (_jsx("span", { className: "mt-1 rounded-full bg-emerald-100 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider text-emerald-700", children: "Used" }))] })] }));
+}
+function InputBlank({ blankIndex, value, isExampleBlank, isReviewMode, onInputChange, onClear, }) {
+    const hasValue = !!value;
+    if (isExampleBlank) {
+        return (_jsx("span", { className: "mx-1 inline-flex min-w-[110px] items-center justify-center border-0 border-b-2 border-amber-400 bg-transparent px-2 py-0.5 align-baseline text-sm font-bold text-amber-700", children: value }));
+    }
+    return (_jsxs("span", { className: "mx-1 inline-flex items-end gap-1.5 align-baseline", children: [_jsx("input", { type: "text", "aria-label": `Blank ${blankIndex + 1}`, value: value, onChange: (e) => onInputChange(e.target.value), disabled: isReviewMode, placeholder: "_____", className: cn('h-8 min-w-[90px] max-w-[150px] rounded-none border-0 border-b-2 bg-transparent px-1 pb-0.5 text-center text-sm font-semibold shadow-none outline-none transition-all', hasValue
+                    ? 'border-emerald-500 text-emerald-700'
+                    : 'border-slate-400 text-slate-500 placeholder:text-slate-300', 'focus:border-blue-500 focus:text-blue-700', isReviewMode ? 'cursor-default' : 'cursor-text') }), !isReviewMode && hasValue && (_jsx("button", { type: "button", onClick: onClear, className: "inline-flex h-6 w-6 items-center justify-center rounded-full text-slate-400 transition-colors hover:bg-red-50 hover:text-red-500", "aria-label": `Clear blank ${blankIndex + 1}`, children: _jsx(X, { className: "h-3.5 w-3.5" }) }))] }));
+}
+export function MoversWordFillParagraphRenderer({ partNumber, partName, questionCount, instruction, questionId, paragraph, title, imageUrl, wordBank, viewMode, answers, onAnswerChange, exampleAnswer, isReviewMode = false, emailFrom, emailTo, correctAnswerTextMap, }) {
+    // Defensive: answers[questionId] may be a non-array (legacy object / string)
+    // for old data. Coerce to array so `.filter` and spread never crash.
+    const rawCurrentAnswer = answers[questionId];
+    const currentAnswers = Array.isArray(rawCurrentAnswer)
+        ? rawCurrentAnswer
+        : rawCurrentAnswer && typeof rawCurrentAnswer === 'object'
+            ? Object.keys(rawCurrentAnswer)
+                .filter((key) => /^\d+$/.test(key))
+                .sort((a, b) => Number(a) - Number(b))
+                .map((key) => rawCurrentAnswer[key])
+            : typeof rawCurrentAnswer === 'string'
+                ? [rawCurrentAnswer]
+                : [];
+    // Defensive: wordBank should always be an array; guard against undefined.
+    const safeWordBank = useMemo(() => Array.isArray(wordBank) ? wordBank : [], [wordBank]);
+    // Derive exampleAnswer from wordBank.isExample flags as fallback for existing questions
+    const effectiveExampleAnswer = useMemo(() => {
+        if (exampleAnswer && exampleAnswer.length > 0)
+            return exampleAnswer;
+        const arr = [];
+        let hasExample = false;
+        for (let i = 0; i < safeWordBank.length; i++) {
+            if (safeWordBank[i]?.isExample) {
+                hasExample = true;
+                if (isReviewMode && correctAnswerTextMap) {
+                    arr.push(correctAnswerTextMap[`${questionId}-blank-${i}`] || safeWordBank[i]?.word || '');
+                }
+                else {
+                    arr.push(safeWordBank[i]?.word || '');
+                }
+            }
+            else {
+                arr.push(undefined);
+            }
+        }
+        return hasExample ? arr : undefined;
+    }, [exampleAnswer, safeWordBank, isReviewMode, correctAnswerTextMap, questionId]);
+    // Parse paragraph: split by {0}, {1}, etc.
+    const segments = paragraph.split(/(\{\d+\})/);
+    const isExampleBlank = (blankIndex) => Boolean(effectiveExampleAnswer?.[blankIndex]);
+    const assignWordToBlank = (blankIndex, word) => {
+        if (isReviewMode || isExampleBlank(blankIndex))
+            return;
+        const newAnswers = [...currentAnswers];
+        newAnswers[blankIndex] = word;
+        onAnswerChange(questionId, newAnswers);
+    };
+    const clearBlank = (blankIndex) => {
+        if (isReviewMode || isExampleBlank(blankIndex))
+            return;
+        const newAnswers = [...currentAnswers];
+        newAnswers[blankIndex] = '';
+        onAnswerChange(questionId, newAnswers);
+    };
+    const handleOptionSelect = (blankIndex, option) => {
+        if (!option) {
+            clearBlank(blankIndex);
+            return;
+        }
+        assignWordToBlank(blankIndex, option);
+    };
+    const usedWords = new Set(currentAnswers.filter(Boolean));
+    if (viewMode === 'EMAIL') {
+        return (_jsxs("div", { className: `grid h-full min-h-0 grid-cols-1 gap-4 sm:gap-6 ${!isReviewMode ? 'lg:grid-cols-2' : ''}`, children: [_jsxs("div", { className: "flex min-h-0 flex-col gap-4 overflow-y-auto p-3 sm:pb-6 sm:pr-6 sm:pt-6", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode }), imageUrl && (_jsx("div", { className: "flex items-center justify-center", children: _jsx(ResolvedImage, { src: imageUrl, alt: "Illustration", className: "max-h-[300px] rounded-lg object-contain shadow-md" }) }))] }), _jsxs("div", { className: "flex min-h-0 flex-col gap-4 p-3 sm:gap-5 sm:pb-6 sm:pl-6 sm:pt-6", children: [_jsxs("div", { className: "shrink-0 overflow-hidden rounded-2xl border border-sky-100 bg-white shadow-[0_10px_30px_rgba(15,23,42,0.06)]", children: [_jsx("div", { className: "bg-gradient-to-r from-sky-100 via-blue-50 to-sky-100 px-5 py-3", children: _jsx("span", { className: "text-[15px] font-extrabold uppercase tracking-[0.14em] text-sky-900", children: "Email" }) }), _jsxs("div", { className: "space-y-3 bg-gradient-to-b from-white to-slate-50/80 px-5 py-4", children: [_jsxs("div", { className: "grid grid-cols-[64px_1fr] items-center gap-4", children: [_jsx("span", { className: "text-[15px] font-semibold text-slate-700", children: "From:" }), _jsx("div", { className: "rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-base font-medium leading-6 text-slate-800 shadow-[inset_0_1px_2px_rgba(15,23,42,0.04)]", children: emailFrom || '—' })] }), _jsxs("div", { className: "grid grid-cols-[64px_1fr] items-center gap-4", children: [_jsx("span", { className: "text-[15px] font-semibold text-slate-700", children: "To:" }), _jsx("div", { className: "rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-base font-medium leading-6 text-slate-800 shadow-[inset_0_1px_2px_rgba(15,23,42,0.04)]", children: emailTo || '—' })] })] })] }), _jsx("div", { className: cn('custom-scrollbar flex-1 min-h-0 overflow-y-auto rounded-2xl border border-slate-200 bg-white p-5 pr-3 text-base leading-loose text-gray-800 shadow-[0_8px_24px_rgba(15,23,42,0.04)]', !isReviewMode && 'whitespace-pre-line'), children: segments.map((segment, idx) => {
+                                const blankMatch = segment.match(/^\{(\d+)\}$/);
+                                if (!blankMatch)
+                                    return _jsx("span", { children: segment }, idx);
+                                const blankIndex = parseInt(blankMatch[1], 10);
+                                const studentAnswer = currentAnswers[blankIndex] || '';
+                                if (isReviewMode && correctAnswerTextMap) {
+                                    const correctAnswer = correctAnswerTextMap[`${questionId}-blank-${blankIndex}`] || '';
+                                    const isEmpty = !studentAnswer;
+                                    const isCorrect = !isEmpty && studentAnswer.trim().toLowerCase() === correctAnswer.trim().toLowerCase();
+                                    if (isEmpty) {
+                                        return (_jsx("span", { className: "mx-1 inline-block min-w-[80px] border-b-2 border-blue-400 px-1 py-0.5 text-center text-blue-600", children: correctAnswer || '___' }, idx));
+                                    }
+                                    if (isCorrect) {
+                                        return (_jsx("span", { className: "mx-1 inline-block min-w-[80px] border-b-2 border-green-500 px-1 py-0.5 text-center text-green-700", children: studentAnswer }, idx));
+                                    }
+                                    return (_jsxs("span", { className: "mx-1 inline-block min-w-[80px] border-b-2 border-red-400 px-1 py-0.5 text-center", children: [_jsx("span", { className: "text-red-500 line-through", children: studentAnswer }), correctAnswer && _jsxs("span", { className: "ml-1 text-green-600", children: ["\u2192 ", correctAnswer] })] }, idx));
+                                }
+                                return (_jsxs("span", { className: "mx-0.5 inline-flex items-baseline gap-0.5 align-baseline", children: [_jsxs("span", { className: "text-[11px] font-bold text-blue-400", children: ["(", blankIndex + 1, ")"] }), _jsx("input", { type: "text", value: studentAnswer, onChange: (e) => {
+                                                const newAnswers = [...currentAnswers];
+                                                newAnswers[blankIndex] = e.target.value;
+                                                onAnswerChange(questionId, newAnswers);
+                                            }, disabled: isReviewMode, placeholder: "\u00B7\u00B7\u00B7", style: { width: `${Math.max(3, (studentAnswer || '').length + 1)}ch` }, className: cn('inline-block min-w-[3ch] max-w-[12ch] border-b-2 bg-transparent px-0.5 py-0 text-center text-sm font-medium outline-none transition-colors', studentAnswer
+                                                ? 'border-emerald-400 text-emerald-700'
+                                                : 'border-slate-300 text-slate-500', 'focus:border-blue-500 focus:text-blue-700', 'disabled:opacity-60') })] }, idx));
+                            }) })] })] }));
+    }
+    return (_jsxs("div", { className: `grid h-full min-h-0 grid-cols-1 gap-4 sm:gap-6 ${!isReviewMode ? 'lg:grid-cols-2' : ''}`, children: [_jsxs("div", { className: "flex min-h-0 flex-col gap-4 overflow-y-auto p-3 sm:pb-6 sm:pr-6 sm:pt-6", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode }), title && _jsx("h2", { className: "shrink-0 text-center text-2xl font-bold uppercase text-coral-500", children: title }), imageUrl && (_jsx("div", { className: "flex items-center justify-center", children: _jsx(ResolvedImage, { src: imageUrl, alt: "Illustration", className: "max-h-[400px] w-full max-w-xl rounded-lg object-contain shadow-md" }) })), viewMode === 'WITH_WORD_BANK' && (_jsxs("div", { className: "shrink-0 rounded-2xl border border-sky-100 bg-slate-50/50 p-4 sm:p-5 shadow-sm", children: [_jsxs("div", { className: "mb-4 flex items-center justify-center gap-2", children: [_jsx("div", { className: "h-px flex-1 bg-gradient-to-r from-transparent to-sky-200" }), _jsx("h3", { className: "text-sm font-extrabold uppercase tracking-widest text-sky-800", children: "WORD BANK (Reference)" }), _jsx("div", { className: "h-px flex-1 bg-gradient-to-l from-transparent to-sky-200" })] }), _jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-2 xl:grid-cols-3", children: safeWordBank.map((item, idx) => {
+                                    const isUsed = usedWords.has(item.word);
+                                    const isExample = item.isExample || effectiveExampleAnswer?.includes(item.word) || false;
+                                    return (_jsx(WordReferenceTile, { item: item, isUsed: isUsed, isExample: isExample }, `${item.word}-${idx}`));
+                                }) })] }))] }), _jsx("div", { className: "custom-scrollbar flex min-h-0 flex-col gap-4 overflow-y-auto p-3 sm:gap-5 sm:pb-6 sm:pl-6 sm:pt-6", children: _jsx("div", { className: cn('shrink-0 rounded-2xl border border-slate-200 bg-white p-5 pr-3 text-base leading-loose text-gray-800 shadow-[0_8px_24px_rgba(15,23,42,0.04)]', !isReviewMode && 'whitespace-pre-line'), children: segments.map((segment, idx) => {
+                        const blankMatch = segment.match(/^\{(\d+)\}$/);
+                        if (!blankMatch)
+                            return _jsx("span", { children: segment }, idx);
+                        const blankIndex = parseInt(blankMatch[1], 10);
+                        const answer = currentAnswers[blankIndex] || '';
+                        const exampleBlankValue = effectiveExampleAnswer?.[blankIndex];
+                        const isExampleSlot = Boolean(exampleBlankValue);
+                        const displayValue = exampleBlankValue || answer;
+                        // Review mode: show correct/incorrect feedback for non-example blanks
+                        if (isReviewMode && !isExampleSlot && correctAnswerTextMap) {
+                            const correctAnswer = correctAnswerTextMap[`${questionId}-blank-${blankIndex}`] || '';
+                            const isEmpty = !answer;
+                            const isCorrect = !isEmpty && answer.trim().toLowerCase() === correctAnswer.trim().toLowerCase();
+                            if (isEmpty) {
+                                return (_jsx("span", { className: "mx-1 inline-block min-w-[80px] border-b-2 border-blue-400 px-1 py-0.5 text-center text-blue-600", children: correctAnswer || '___' }, idx));
+                            }
+                            if (isCorrect) {
+                                return (_jsx("span", { className: "mx-1 inline-block min-w-[80px] border-b-2 border-green-500 px-1 py-0.5 text-center text-green-700", children: answer }, idx));
+                            }
+                            return (_jsxs("span", { className: "mx-1 inline-block min-w-[80px] border-b-2 border-red-400 px-1 py-0.5 text-center", children: [_jsx("span", { className: "text-red-500 line-through", children: answer }), correctAnswer && _jsxs("span", { className: "ml-1 text-green-600", children: ["\u2192 ", correctAnswer] })] }, idx));
+                        }
+                        if (viewMode === 'WITH_OPTIONS') {
+                            if (isExampleSlot) {
+                                return (_jsx("span", { className: "mx-1 inline-block min-w-[60px] border-b-2 border-amber-400 bg-amber-50 px-2 py-0.5 text-center text-sm font-bold text-amber-700 align-baseline", children: exampleBlankValue || '___' }, idx));
+                            }
+                            const blankOptions = safeWordBank[blankIndex]?.options || [];
+                            return (_jsxs("select", { value: answer, onChange: (e) => handleOptionSelect(blankIndex, e.target.value), disabled: isReviewMode, className: "mx-1 inline-block min-w-[100px] rounded border-2 border-blue-300 bg-blue-50 px-2 py-0.5 text-center text-sm font-medium outline-none focus:border-blue-500", children: [_jsx("option", { value: "", children: "___" }), blankOptions.map((opt) => (_jsx("option", { value: opt, children: opt }, opt)))] }, idx));
+                        }
+                        if (viewMode === 'DEFAULT') {
+                            const inputValue = isExampleSlot ? String(exampleBlankValue || '') : (currentAnswers[blankIndex] || '');
+                            return (_jsxs("span", { className: "mx-0.5 inline-flex items-baseline gap-0.5 align-baseline", children: [_jsxs("span", { className: "text-[11px] font-bold text-blue-400", children: ["(", blankIndex + 1, ")"] }), _jsx("input", { type: "text", value: inputValue, onChange: (e) => {
+                                            if (isExampleSlot)
+                                                return;
+                                            const newAnswers = [...currentAnswers];
+                                            newAnswers[blankIndex] = e.target.value;
+                                            onAnswerChange(questionId, newAnswers);
+                                        }, disabled: isReviewMode || !!isExampleSlot, placeholder: "\u00B7\u00B7\u00B7\u00B7\u00B7\u00B7\u00B7\u00B7\u00B7", style: { width: `${Math.max(10, inputValue.length + 1)}ch` }, className: cn('inline-block min-w-[10ch] max-w-[12ch] border-b-2 bg-transparent px-0.5 py-0 text-center text-sm font-medium outline-none transition-colors', inputValue
+                                            ? 'border-emerald-400 text-emerald-700'
+                                            : 'border-slate-300 text-slate-500', 'focus:border-blue-500 focus:text-blue-700', 'disabled:opacity-60') })] }, idx));
+                        }
+                        if (viewMode === 'WITH_WORD_BANK') {
+                            return (_jsx(InputBlank, { blankIndex: blankIndex, value: displayValue || '', isExampleBlank: isExampleSlot, isReviewMode: isReviewMode, onInputChange: (value) => assignWordToBlank(blankIndex, value), onClear: () => clearBlank(blankIndex) }, idx));
+                        }
+                        return _jsx("span", { children: segment }, idx);
+                    }) }) })] }));
+}

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

@@ -1 +1,198 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as t,useEffect as n,useMemo as a,useCallback as s,memo as l}from"react";import{ResolvedImage as i}from"../../../../../components/common/ResolvedImage";import o from"../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import d from"../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner";import c from"../../../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer";import{cn as m}from"../../../../../shared/lib/utils";function u(e,r){const t=e.trim();return r?t:t.toLowerCase()}const p={},b=l(function({question:s,initialAnswers:l,onBlankChange:o,isReviewMode:d}){const c=t(null),p=t(o);p.current=o;const b=t(!1),g=t(l),x=a(()=>s.content.replace(/\{([\w\d]+)\}/g,(e,r)=>`\n      <span class="structured-blank-wrapper" data-blank-wrapper="${r}">\n        <input type="text" data-blank-key="${r}" placeholder="" class="structured-blank-input" />\n        <span class="structured-blank-hint" data-blank-hint="${r}"></span>\n      </span>\n    `),[s.content]);return n(()=>{const e=c.current;if(!e)return;b.current||(e.innerHTML=x,b.current=!0);const r=e.querySelectorAll("input.structured-blank-input"),t=[];return r.forEach(r=>{const n=r.getAttribute("data-blank-key")||"",a=e.querySelector(`[data-blank-wrapper="${n}"]`),l=e.querySelector(`[data-blank-hint="${n}"]`),i=g.current[n]||"",o=s.answers[n]||"",c=i.trim().length>0,b=c&&u(i,s.caseSensitive)===u(o,s.caseSensitive),x=d&&!b&&o.trim().length>0;r.value=x?`${c?i:"(trống)"} → ${o}`:i,r.disabled=d,r.className=m("structured-blank-input inline-block min-w-[90px] max-w-[200px] rounded-t border-b-2 bg-slate-50/40 px-2 py-0.5 text-sm font-semibold outline-none transition-all align-baseline hover:bg-slate-100/60 focus:bg-teal-50/60 focus:ring-0",d?b?"border-emerald-500 bg-emerald-50 text-emerald-800 font-bold":c?"border-rose-500 bg-rose-50 text-rose-800 font-bold":"border-amber-500 bg-amber-50 text-amber-800 font-bold":"border-slate-400 text-slate-800 focus:border-teal-600"),a&&(a.className=m("structured-blank-wrapper inline-flex items-baseline align-baseline mx-1 my-0.5",d&&"mx-1 my-0.5")),l&&(l.textContent="",l.className="structured-blank-hint hidden");const h=e=>{const r=e.target;p.current(n,r.value)};r.addEventListener("input",h),t.push({el:r,handler:h})}),()=>{t.forEach(({el:e,handler:r})=>{e.removeEventListener("input",r)})}},[x,d]),r("div",{className:"space-y-3",children:[s.title&&e("h3",{className:"text-base font-semibold text-gray-800",children:s.title}),s.imageUrl&&e("div",{className:"flex justify-center",children:e("div",{className:"overflow-hidden rounded-lg border border-gray-200",children:e(i,{src:s.imageUrl,alt:s.title||"Question image",className:"max-h-48 w-auto object-contain"})})}),e("div",{ref:c,className:"structured-form-content rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4 text-sm leading-relaxed text-gray-800 [&_.structured-blank-wrapper]:inline-flex [&_.structured-blank-wrapper]:align-baseline [&_.structured-blank-wrapper]:items-baseline [&_.structured-blank-hint]:max-w-[180px]"}),d&&r("div",{className:"space-y-2 rounded-lg border border-slate-200 bg-slate-50 p-3",children:[r("div",{className:"flex flex-wrap gap-2 text-[11px] font-medium",children:[r("span",{className:"inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-1 text-green-700",children:[e("span",{className:"h-2 w-2 rounded-full bg-green-500"}),"Đúng"]}),r("span",{className:"inline-flex items-center gap-1 rounded-full bg-red-100 px-2 py-1 text-red-700",children:[e("span",{className:"h-2 w-2 rounded-full bg-red-500"}),"Sai"]}),r("span",{className:"inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-1 text-amber-700",children:[e("span",{className:"h-2 w-2 rounded-full bg-amber-500"}),"Chưa trả lời"]})]}),r("div",{children:[e("span",{className:"text-[10px] font-medium uppercase tracking-wider text-slate-500",children:"Đáp án đúng"}),e("div",{className:"mt-1 flex flex-wrap gap-1.5",children:Object.entries(s.answers).map(([e,t])=>r("span",{className:"rounded border border-green-300 bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800",children:[e,": ",t]},e))})]})]})]})});export function MoversWordFillStructuredFormRenderer({partNumber:n,partName:l,questionCount:m,instruction:u,audioUrl:g,groupTitle:x,groupContent:h,groupImageUrl:f,questions:w,answers:v,onAnswerChange:N,isReviewMode:y=!1}){const k=t(v);k.current=v;const C=t(N);C.current=N;const q=s((e,r,t)=>{const n=k.current[e]||{};C.current(e,{...n,[r]:t})},[]),j=a(()=>{const e={};return w.forEach(r=>{e[r.id]=(e,t)=>q(r.id,e,t)}),e},[w,q]);return r("div",{className:"flex flex-col h-full gap-4 sm:gap-6 overflow-y-auto custom-scrollbar",children:[r("div",{className:"flex flex-col gap-4 p-3 sm:px-6 sm:pt-2",children:[e(o,{partNumber:n,questionCount:m,partName:l,isReviewMode:y}),e(d,{instruction:u,isReviewMode:y}),x&&e("h2",{className:"text-center text-xl font-bold uppercase text-coral-500",children:x}),g&&e(c,{audioSrc:g,compact:!0}),f&&e("div",{className:"flex items-center justify-center",children:e(i,{src:f,alt:x||"Group image",className:"max-h-[300px] rounded-lg object-contain shadow-md"})}),h&&e("div",{className:"article-content rounded-lg bg-amber-50 p-4 text-sm leading-relaxed text-gray-700 max-h-[500px] overflow-y-auto pr-2 custom-scrollbar",dangerouslySetInnerHTML:{__html:h}})]}),w.length>0&&e("div",{className:"px-3 sm:px-6",children:e("hr",{className:"border-t border-slate-200/60 my-1"})}),e("div",{className:"grid grid-cols-1 gap-4 sm:gap-5 p-3 sm:px-6 sm:pb-6",children:w.map(t=>r("div",{id:`question-${t.id}`,className:"rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition-all hover:border-indigo-200 hover:shadow-md",children:[e("div",{className:"mb-2 flex items-center gap-2",children:e("span",{className:"flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 text-xs font-bold text-white shadow-sm",children:t.questionNumber})}),e(b,{question:t,initialAnswers:v[t.id]||p,onBlankChange:j[t.id],isReviewMode:y})]},t.id))})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useMemo, useCallback, memo } from 'react';
+import { ResolvedImage } from '../../../../../components/common/ResolvedImage';
+import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+import CambridgeYleAudioPlayer from '../../../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer';
+import { cn } from '../../../../../shared/lib/utils';
+/**
+ * Replace `{key}` placeholders with inline blank controls.
+ * WITH_OPTIONS blanks become <select>; free-type stay <input>.
+ */
+function optionsForBlankKey(wordBank, key) {
+    if (!wordBank?.length)
+        return null;
+    const asNum = Number(key);
+    const entry = Number.isFinite(asNum) && asNum >= 0 && asNum < wordBank.length
+        ? wordBank[asNum]
+        : null;
+    if (entry == null || !('options' in entry) || !entry.options?.length)
+        return null;
+    return entry.options.length >= 2 ? entry.options : null;
+}
+function escapeHtmlAttr(value) {
+    return value
+        .replace(/&/g, '&' + 'amp;')
+        .replace(/"/g, '&' + 'quot;')
+        .replace(/</g, '&' + 'lt;')
+        .replace(/>/g, '&' + 'gt;');
+}
+function buildHtmlWithInputPlaceholders(html, wordBank) {
+    return html.replace(/\{([\w\d]+)\}/g, (_match, key) => {
+        const options = optionsForBlankKey(wordBank, key);
+        if (options) {
+            const optsHtml = [
+                '<option value="">—</option>',
+                ...options.map((opt) => `<option value="${escapeHtmlAttr(opt)}">${escapeHtmlAttr(opt)}</option>`),
+            ].join('');
+            return `
+      <span class="structured-blank-wrapper" data-blank-wrapper="${key}">
+        <select data-blank-key="${key}" class="structured-blank-input structured-blank-select">${optsHtml}</select>
+        <span class="structured-blank-hint" data-blank-hint="${key}"></span>
+      </span>
+    `;
+        }
+        return `
+      <span class="structured-blank-wrapper" data-blank-wrapper="${key}">
+        <input type="text" data-blank-key="${key}" placeholder="" class="structured-blank-input" />
+        <span class="structured-blank-hint" data-blank-hint="${key}"></span>
+      </span>
+    `;
+    });
+}
+function normalizeStructuredAnswer(value, caseSensitive) {
+    const normalized = value
+        .trim()
+        .replace(/[\p{P}]/gu, '')
+        .replace(/\s+/g, ' ')
+        .trim();
+    return caseSensitive ? normalized : normalized.toLowerCase();
+}
+// Stable empty object to avoid new {} on every render (breaks React.memo)
+const emptyObj = {};
+/**
+ * StructuredFormQuestion renders HTML content with inline input fields.
+ *
+ * CRITICAL FIX: We do NOT use dangerouslySetInnerHTML (which gets re-applied
+ * on every React re-render, destroying DOM inputs and losing focus).
+ * Instead, we set innerHTML imperatively via a ref exactly ONCE on mount,
+ * completely bypassing React's reconciliation for the form content.
+ */
+const StructuredFormQuestion = memo(function StructuredFormQuestion({ question, initialAnswers, onBlankChange, isReviewMode, }) {
+    const containerRef = useRef(null);
+    const onBlankChangeRef = useRef(onBlankChange);
+    onBlankChangeRef.current = onBlankChange;
+    const mountedRef = useRef(false);
+    // Store initial answers in a ref so they're available on mount but don't trigger re-renders
+    const initialAnswersRef = useRef(initialAnswers);
+    const processedHtml = useMemo(() => buildHtmlWithInputPlaceholders(question.content, question.wordBank), [question.content, question.wordBank]);
+    // Set innerHTML ONCE via ref and attach event listeners.
+    // This completely bypasses React's reconciliation so inputs are never
+    // destroyed by re-renders.
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        // Only set innerHTML on first mount or if HTML content actually changed
+        if (!mountedRef.current) {
+            container.innerHTML = processedHtml;
+            mountedRef.current = true;
+        }
+        const inputs = container.querySelectorAll('input.structured-blank-input, select.structured-blank-input');
+        const handlers = [];
+        inputs.forEach((input) => {
+            const key = input.getAttribute('data-blank-key') || '';
+            const wrapper = container.querySelector(`[data-blank-wrapper="${key}"]`);
+            const hint = container.querySelector(`[data-blank-hint="${key}"]`);
+            const userAnswer = initialAnswersRef.current[key] || '';
+            const correctAnswer = question.answers[key] || '';
+            const hasUserAnswer = userAnswer.trim().length > 0;
+            const isCorrect = hasUserAnswer
+                && normalizeStructuredAnswer(userAnswer, question.caseSensitive)
+                    === normalizeStructuredAnswer(correctAnswer, question.caseSensitive);
+            // Restore saved answer value on mount
+            const shouldReplaceInputWithReviewText = isReviewMode && !isCorrect && correctAnswer.trim().length > 0;
+            input.value = shouldReplaceInputWithReviewText
+                ? `${hasUserAnswer ? userAnswer : '(trống)'} → ${correctAnswer}`
+                : userAnswer;
+            input.disabled = isReviewMode;
+            const isSelect = input.tagName === 'SELECT';
+            // Set classes from blankStyle (letter = square box)
+            const blankStyle = question.blankStyle || 'word';
+            const isLetter = blankStyle === 'letter';
+            const isPhrase = blankStyle === 'phrase';
+            if (isLetter && !isSelect && 'maxLength' in input) {
+                input.maxLength = Math.max(1, (correctAnswer || ' ').trim().length || 1);
+            }
+            input.className = cn('structured-blank-input inline-block bg-slate-50/40 text-sm font-semibold outline-none transition-all align-baseline hover:bg-slate-100/60 focus:bg-teal-50/60 focus:ring-0', isSelect
+                ? 'min-w-[5.5rem] max-w-[10rem] rounded border px-2 py-1 text-center'
+                : isLetter
+                    ? 'h-7 w-7 rounded border-2 px-0 text-center uppercase'
+                    : isPhrase
+                        ? 'min-w-[9rem] max-w-[18rem] w-[14ch] rounded-t border-b-2 px-2 py-0.5 text-center'
+                        : // blankStyle=word — short single-token field
+                            'min-w-[4.5rem] max-w-[7.5rem] w-[8ch] rounded-t border-b-2 px-1 py-0.5 text-center', isReviewMode
+                ? isCorrect
+                    ? 'border-emerald-500 bg-emerald-50 text-emerald-800 font-bold'
+                    : hasUserAnswer
+                        ? 'border-rose-500 bg-rose-50 text-rose-800 font-bold'
+                        : 'border-amber-500 bg-amber-50 text-amber-800 font-bold'
+                : 'border-slate-400 text-slate-800 focus:border-teal-600');
+            if (!isSelect && !isLetter && 'size' in input) {
+                input.size = isPhrase ? 18 : 10;
+            }
+            // letter inline box — host FE may not scan Tailwind h-7/w-7
+            if (isLetter) {
+                input.style.display = 'inline-block';
+                input.style.width = '1.75rem';
+                input.style.height = '1.75rem';
+                input.style.minWidth = '1.75rem';
+                input.style.maxWidth = '1.75rem';
+                input.style.padding = '0';
+                input.style.margin = '0 2px';
+                input.style.borderWidth = '2px';
+                input.style.borderStyle = 'solid';
+                input.style.borderRadius = '4px';
+                input.style.textAlign = 'center';
+                input.style.fontWeight = '700';
+                input.style.textTransform = 'uppercase';
+                input.style.boxSizing = 'border-box';
+                input.style.verticalAlign = 'baseline';
+            }
+            if (wrapper) {
+                wrapper.className = cn('structured-blank-wrapper inline-flex items-baseline align-baseline mx-1 my-0.5', isReviewMode && 'mx-1 my-0.5');
+            }
+            if (hint) {
+                hint.textContent = '';
+                hint.className = 'structured-blank-hint hidden';
+            }
+            const handler = (e) => {
+                const target = e.target;
+                onBlankChangeRef.current(key, target.value);
+            };
+            const eventName = isSelect ? 'change' : 'input';
+            input.addEventListener(eventName, handler);
+            handlers.push({ el: input, handler, eventName });
+        });
+        return () => {
+            handlers.forEach(({ el, handler, eventName }) => {
+                el.removeEventListener(eventName, handler);
+            });
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [processedHtml, isReviewMode]);
+    return (_jsxs("div", { className: "space-y-3", children: [question.title && (_jsx("h3", { className: "text-base font-semibold text-gray-800", children: question.title })), question.imageUrl && (_jsx("div", { className: "flex justify-center", children: _jsx("div", { className: "overflow-hidden rounded-lg border border-gray-200", children: _jsx(ResolvedImage, { src: question.imageUrl, alt: question.title || 'Question image', className: "max-h-48 w-auto object-contain" }) }) })), _jsx("div", { ref: containerRef, className: cn('structured-form-content rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4 text-sm leading-relaxed text-gray-800', '[&_.structured-blank-wrapper]:inline-flex [&_.structured-blank-wrapper]:align-baseline [&_.structured-blank-wrapper]:items-baseline [&_.structured-blank-hint]:max-w-[180px]', 
+                // Conversation: speaker column hug name (not equal 50/50 split)
+                '[&_table.dialogue]:w-full [&_table.dialogue]:border-collapse [&_table.dialogue]:table-fixed', '[&_table.dialogue_td.speaker]:w-[1%] [&_table.dialogue_td.speaker]:whitespace-nowrap', '[&_table.dialogue_td.speaker]:align-top [&_table.dialogue_td.speaker]:pr-3', '[&_table.dialogue_td.speaker]:font-semibold [&_table.dialogue_td.speaker]:text-slate-900', '[&_table.dialogue_td]:align-top [&_table.dialogue_td]:py-1.5') }), isReviewMode && (_jsxs("div", { className: "space-y-2 rounded-lg border border-slate-200 bg-slate-50 p-3", children: [_jsxs("div", { className: "flex flex-wrap gap-2 text-[11px] font-medium", children: [_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-1 text-green-700", children: [_jsx("span", { className: "h-2 w-2 rounded-full bg-green-500" }), "\u0110\u00FAng"] }), _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-red-100 px-2 py-1 text-red-700", children: [_jsx("span", { className: "h-2 w-2 rounded-full bg-red-500" }), "Sai"] }), _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-1 text-amber-700", children: [_jsx("span", { className: "h-2 w-2 rounded-full bg-amber-500" }), "Ch\u01B0a tr\u1EA3 l\u1EDDi"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider text-slate-500", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("div", { className: "mt-1 flex flex-wrap gap-1.5", children: Object.entries(question.answers).map(([key, val]) => (_jsxs("span", { className: "rounded border border-green-300 bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800", children: [key, ": ", val] }, key))) })] })] }))] }));
+});
+export function MoversWordFillStructuredFormRenderer({ partNumber, partName, questionCount, instruction, audioUrl, groupTitle, groupContent, groupImageUrl, questions, answers, onAnswerChange, isReviewMode = false, }) {
+    const answersRef = useRef(answers);
+    answersRef.current = answers;
+    const onAnswerChangeRef = useRef(onAnswerChange);
+    onAnswerChangeRef.current = onAnswerChange;
+    // Stable callback — never changes identity, so child memo is never broken
+    const handleBlankChange = useCallback((questionId, key, value) => {
+        const currentAnswer = answersRef.current[questionId] || {};
+        onAnswerChangeRef.current(questionId, { ...currentAnswer, [key]: value });
+    }, []);
+    // Stable per-question callbacks — memoized so React.memo children won't re-render
+    const blankChangeCallbacks = useMemo(() => {
+        const map = {};
+        questions.forEach((q) => {
+            map[q.id] = (key, value) => handleBlankChange(q.id, key, value);
+        });
+        return map;
+    }, [questions, handleBlankChange]);
+    return (_jsxs("div", { className: "flex flex-col h-full gap-4 sm:gap-6 overflow-y-auto custom-scrollbar", children: [_jsxs("div", { className: "flex flex-col gap-4 p-3 sm:px-6 sm:pt-2", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode }), groupTitle && (_jsx("h2", { className: "text-center text-xl font-bold uppercase text-coral-500", children: groupTitle })), audioUrl && _jsx(CambridgeYleAudioPlayer, { audioSrc: audioUrl, compact: true }), groupImageUrl && (_jsx("div", { className: "flex items-center justify-center", children: _jsx(ResolvedImage, { src: groupImageUrl, alt: groupTitle || 'Group image', className: "max-h-[300px] rounded-lg object-contain shadow-md" }) })), groupContent && (_jsx("div", { className: "article-content rounded-lg bg-amber-50 p-4 text-sm leading-relaxed text-gray-700 max-h-[500px] overflow-y-auto pr-2 custom-scrollbar", dangerouslySetInnerHTML: { __html: groupContent } }))] }), questions.length > 0 && (_jsx("div", { className: "px-3 sm:px-6", children: _jsx("hr", { className: "border-t border-slate-200/60 my-1" }) })), _jsx("div", { className: "grid grid-cols-1 gap-4 sm:gap-5 p-3 sm:px-6 sm:pb-6", children: questions.map((q) => (_jsxs("div", { id: `question-${q.id}`, className: "rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition-all hover:border-indigo-200 hover:shadow-md", children: [_jsx("div", { className: "mb-2 flex items-center gap-2", children: _jsx("span", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 text-xs font-bold text-white shadow-sm", children: q.questionNumber }) }), _jsx(StructuredFormQuestion, { question: q, initialAnswers: answers[q.id] || emptyObj, onBlankChange: blankChangeCallbacks[q.id], isReviewMode: isReviewMode })] }, q.id))) })] }));
+}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { WordOrderAndMatchGroupQuestionItem } from '../../utils/question-transformers';
+interface MoversWordOrderAndMatchGroupRendererProps {
+    partNumber: number;
+    partName?: string;
+    questionCount: number;
+    instruction: string;
+    matchOptions: string[];
+    questions: WordOrderAndMatchGroupQuestionItem[];
+    answers: Record<string, any>;
+    onAnswerChange: (questionId: string, value: any) => void;
+    isReviewMode?: boolean;
+}
+export declare function MoversWordOrderAndMatchGroupRenderer({ partNumber, partName, questionCount, instruction, matchOptions, questions, answers, onAnswerChange, isReviewMode, }: MoversWordOrderAndMatchGroupRendererProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+import { WordOrderAndMatchGroupClient } from '../../../../questions/types/word-order-and-match-group/WordOrderAndMatchGroupClient';
+export function MoversWordOrderAndMatchGroupRenderer({ partNumber, partName, questionCount, instruction, matchOptions, questions, answers, onAnswerChange, isReviewMode = false, }) {
+    const userAnswers = questions.map((q) => {
+        const raw = answers[q.id];
+        if (raw && typeof raw === 'object') {
+            return {
+                orderedPhrase: typeof raw.orderedPhrase === 'string' ? raw.orderedPhrase : '',
+                matchLabel: typeof raw.matchLabel === 'string' ? raw.matchLabel : '',
+            };
+        }
+        return undefined;
+    });
+    const handleItemAnswerChange = (index, answer) => {
+        const targetQuestion = questions[index];
+        if (targetQuestion) {
+            onAnswerChange(targetQuestion.id, answer);
+        }
+    };
+    const questionData = {
+        instruction,
+        matchOptions,
+        items: questions.map((q) => ({
+            scrambledWords: q.scrambledWords,
+            orderedPhrase: q.orderedPhrase,
+            matchLabel: q.matchLabel,
+            isExample: q.isExample,
+            points: q.points,
+            questionNumber: q.questionNumber,
+        })),
+    };
+    return (_jsxs("div", { className: "w-full space-y-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, partName: partName, questionCount: questionCount }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction }), _jsx("div", { className: "mt-4", children: _jsx(WordOrderAndMatchGroupClient, { questionData: questionData, isReviewMode: isReviewMode, userAnswers: userAnswers, onAnswerChange: handleItemAnswerChange }) })] }));
+}

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

@@ -1 +1,92 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{ResolvedImage as t}from"../../../../../components/common/ResolvedImage";import a from"../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import s from"../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner";import{CheckCircle2 as l,XCircle as o}from"lucide-react";export function MoversWordOrderingRenderer({partNumber:d,partName:i,questionCount:n,instruction:m,questions:c,answers:b,onAnswerChange:p,isReviewMode:x=!1,rawCorrectAnswerMap:g={},isCorrectMap:u={}}){return r("div",{className:"flex flex-col h-full gap-4 sm:gap-6 overflow-y-auto custom-scrollbar",children:[r("div",{className:"flex flex-col gap-2 sm:gap-3 p-3 sm:px-6 sm:pt-2",children:[e(a,{partNumber:d,questionCount:n,partName:i,isReviewMode:x}),e(s,{instruction:m,isReviewMode:x})]}),e("div",{className:"p-3 sm:pb-6 sm:px-6 grid grid-cols-1 gap-6 sm:grid-cols-2",children:c.map(a=>{const s=a.isExample?a.exampleAnswer:b[a.id],d=Array.isArray(s)?s:[],i=x||a.isExample,n=e=>e.trim().replace(/[.,?!]+$/,"").toLowerCase(),m=new Set;d.forEach(e=>{const r=a.words.findIndex((r,t)=>n(r)===n(e)&&!m.has(t));-1!==r&&m.add(r)});const c=x&&!a.isExample&&!0===u[a.id],f=x&&!a.isExample&&!1===u[a.id],h=a.isExample?"border-amber-200 bg-white/90 shadow-inner shadow-amber-100/60":c?"border-emerald-300 bg-emerald-50/80":f?"border-red-300 bg-red-50/80":"border-slate-100 bg-slate-50",w=a.isExample?"text-amber-600":c?"text-emerald-600":f?"text-red-500":"text-slate-400",v=a.isExample?"border-amber-400 bg-amber-100 text-amber-800":c?"border-emerald-400 bg-emerald-100 text-emerald-700":f?"border-red-400 bg-red-100 text-red-700":"border-emerald-400 bg-emerald-50 text-emerald-700 hover:bg-emerald-100";return r("div",{id:`question-${a.id}`,className:"relative flex flex-col items-center gap-4 rounded-2xl border-2 p-5 shadow-sm transition-all "+(a.isExample?"border-amber-300 bg-gradient-to-br from-amber-50 via-orange-50 to-white shadow-amber-100/70":c?"border-emerald-300 bg-gradient-to-br from-emerald-50/60 via-white to-white shadow-emerald-100/50":f?"border-red-200 bg-gradient-to-br from-red-50/40 via-white to-white shadow-red-100/40":"border-slate-200 bg-white hover:border-blue-200 hover:shadow-md"),children:[r("div",{className:"mb-2 flex w-full items-center justify-between",children:[e("span",{className:"flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold text-white shadow-sm "+(a.isExample?"bg-gradient-to-br from-amber-400 to-orange-500":c?"bg-gradient-to-br from-emerald-400 to-green-500":f?"bg-gradient-to-br from-red-400 to-rose-500":"bg-blue-500"),children:a.questionNumber}),a.isExample&&e("span",{className:"inline-flex items-center rounded-full border border-amber-300 bg-gradient-to-r from-amber-100 to-orange-100 px-3 py-1 text-xs font-extrabold uppercase tracking-[0.16em] text-amber-700 shadow-sm",children:"Example"}),c&&r("span",{className:"inline-flex items-center gap-1 rounded-full border border-emerald-300 bg-gradient-to-r from-emerald-100 to-green-100 px-3 py-1 text-xs font-extrabold uppercase tracking-[0.16em] text-emerald-700 shadow-sm",children:[e(l,{className:"h-3.5 w-3.5"}),"Đúng"]}),f&&r("span",{className:"inline-flex items-center gap-1 rounded-full border border-red-300 bg-gradient-to-r from-red-100 to-rose-100 px-3 py-1 text-xs font-extrabold uppercase tracking-[0.16em] text-red-600 shadow-sm",children:[e(o,{className:"h-3.5 w-3.5"}),"Sai"]})]}),a.imageUrl&&e("div",{className:"mb-2 flex h-40 w-full justify-center sm:h-48",children:e(t,{src:a.imageUrl,alt:`Q${a.questionNumber}`,className:"h-full w-auto rounded-xl object-contain drop-shadow-sm"})}),e("div",{className:"flex flex-wrap justify-center gap-2",children:a.words.map((r,t)=>{const s=m.has(t);let l=r;if(a.isExample&&a.exampleAnswer){const e=a.exampleAnswer.find(e=>n(e)===n(r));e&&(l=e)}return e("button",{type:"button",disabled:i||s,onClick:()=>((e,r,t)=>{p(e,[...t,r])})(a.id,l,d),className:`flex min-w-[2.5rem] items-center justify-center rounded-lg border-2 px-3 py-2 text-lg font-bold transition-all ${s?"border-slate-200 bg-slate-100 text-slate-300":"border-blue-400 bg-blue-50 text-blue-700 shadow-sm hover:-translate-y-0.5 hover:bg-blue-100 hover:shadow"} ${i?"cursor-not-allowed":"cursor-pointer"}`,children:l},t)})}),r("div",{className:`mt-2 w-full rounded-xl border p-4 ${h}`,children:[e("div",{className:`mb-2 text-center text-xs font-medium uppercase tracking-wider ${w}`,children:"Your Answer"}),e("div",{className:"flex min-h-[3rem] flex-wrap items-center justify-center gap-2",children:d.length>0?d.map((r,t)=>e("button",{type:"button",disabled:i,onClick:()=>((e,r,t)=>{const a=[...t];a.splice(r,1),p(e,a)})(a.id,t,d),className:`flex min-w-[2.5rem] items-center justify-center rounded-lg border-2 px-3 py-2 text-lg font-bold shadow-sm transition-all disabled:cursor-not-allowed ${v}`,title:i?"":"Click to remove",children:r},t)):e("span",{className:"text-sm italic "+(a.isExample?"text-amber-500":"text-slate-400"),children:a.isExample?"Example answer is shown here":"Click letters above to answer"})})]}),f&&(()=>{const t=g[a.id]?.answer;return Array.isArray(t)&&0!==t.length?r("div",{className:"mt-3 w-full rounded-xl border-2 border-emerald-300 bg-gradient-to-br from-emerald-50 to-green-50 p-4",children:[r("div",{className:"mb-2 flex items-center justify-center gap-1.5 text-xs font-medium uppercase tracking-wider text-emerald-600",children:[e(l,{className:"h-3.5 w-3.5"}),"Đáp án đúng"]}),e("div",{className:"flex min-h-[3rem] flex-wrap items-center justify-center gap-2",children:t.map((r,t)=>e("div",{className:"flex min-w-[2.5rem] items-center justify-center rounded-lg border-2 border-emerald-400 bg-emerald-100 px-3 py-2 text-lg font-bold text-emerald-800 shadow-sm",children:r},t))})]}):null})()]},a.id)})})]})}
+/**
+ * WORD_ORDERING Renderer - Click letters/words in order to form a word
+ * Used in Starters P7
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ResolvedImage } from '../../../../../components/common/ResolvedImage';
+import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+import { CheckCircle2, XCircle } from 'lucide-react';
+export function MoversWordOrderingRenderer({ partNumber, partName, questionCount, instruction, questions, answers, onAnswerChange, isReviewMode = false, rawCorrectAnswerMap = {}, isCorrectMap = {}, }) {
+    const handleWordClick = (questionId, word, currentAnswer) => {
+        // Add word to answer
+        onAnswerChange(questionId, [...currentAnswer, word]);
+    };
+    const handleRemoveWord = (questionId, index, currentAnswer) => {
+        // Remove word at index
+        const newAnswer = [...currentAnswer];
+        newAnswer.splice(index, 1);
+        onAnswerChange(questionId, newAnswer);
+    };
+    return (_jsxs("div", { className: "flex flex-col h-full gap-4 sm:gap-6 overflow-y-auto custom-scrollbar", children: [_jsxs("div", { className: "flex flex-col gap-2 sm:gap-3 p-3 sm:px-6 sm:pt-2", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode })] }), _jsx("div", { className: "p-3 sm:pb-6 sm:px-6 grid grid-cols-1 gap-6 sm:grid-cols-2", children: questions.map((question) => {
+                    // Defensive: answers[question.id] may be a non-array for legacy data.
+                    // Coerce to array so `.forEach`/spread never crash.
+                    const rawAnswer = question.isExample ? question.exampleAnswer : answers[question.id];
+                    const currentAnswer = Array.isArray(rawAnswer) ? rawAnswer : [];
+                    const isDisabled = isReviewMode || question.isExample;
+                    const normalize = (str) => str.trim().replace(/[.,?!]+$/, '').toLowerCase();
+                    const usedIndices = new Set();
+                    currentAnswer.forEach((word) => {
+                        const idx = question.words.findIndex((w, i) => normalize(w) === normalize(word) && !usedIndices.has(i));
+                        if (idx !== -1)
+                            usedIndices.add(idx);
+                    });
+                    // Determine answer status for review mode
+                    const answerIsCorrect = isReviewMode && !question.isExample && isCorrectMap[question.id] === true;
+                    const answerIsWrong = isReviewMode && !question.isExample && isCorrectMap[question.id] === false;
+                    // Styling based on answer status
+                    const answerSectionClasses = question.isExample
+                        ? 'border-amber-200 bg-white/90 shadow-inner shadow-amber-100/60'
+                        : answerIsCorrect
+                            ? 'border-emerald-300 bg-emerald-50/80'
+                            : answerIsWrong
+                                ? 'border-red-300 bg-red-50/80'
+                                : 'border-slate-100 bg-slate-50';
+                    const answerLabelClasses = question.isExample
+                        ? 'text-amber-600'
+                        : answerIsCorrect
+                            ? 'text-emerald-600'
+                            : answerIsWrong
+                                ? 'text-red-500'
+                                : 'text-slate-400';
+                    const answerChipClasses = question.isExample
+                        ? 'border-amber-400 bg-amber-100 text-amber-800'
+                        : answerIsCorrect
+                            ? 'border-emerald-400 bg-emerald-100 text-emerald-700'
+                            : answerIsWrong
+                                ? 'border-red-400 bg-red-100 text-red-700'
+                                : 'border-emerald-400 bg-emerald-50 text-emerald-700 hover:bg-emerald-100';
+                    return (_jsxs("div", { id: `question-${question.id}`, className: `relative flex flex-col items-center gap-4 rounded-2xl border-2 p-5 shadow-sm transition-all ${question.isExample
+                            ? 'border-amber-300 bg-gradient-to-br from-amber-50 via-orange-50 to-white shadow-amber-100/70'
+                            : answerIsCorrect
+                                ? 'border-emerald-300 bg-gradient-to-br from-emerald-50/60 via-white to-white shadow-emerald-100/50'
+                                : answerIsWrong
+                                    ? 'border-red-200 bg-gradient-to-br from-red-50/40 via-white to-white shadow-red-100/40'
+                                    : 'border-slate-200 bg-white hover:border-blue-200 hover:shadow-md'}`, children: [_jsxs("div", { className: "mb-2 flex w-full items-center justify-between", children: [_jsx("span", { className: `flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold text-white shadow-sm ${question.isExample
+                                            ? 'bg-gradient-to-br from-amber-400 to-orange-500'
+                                            : answerIsCorrect
+                                                ? 'bg-gradient-to-br from-emerald-400 to-green-500'
+                                                : answerIsWrong
+                                                    ? 'bg-gradient-to-br from-red-400 to-rose-500'
+                                                    : 'bg-blue-500'}`, children: question.questionNumber }), question.isExample && (_jsx("span", { className: "inline-flex items-center rounded-full border border-amber-300 bg-gradient-to-r from-amber-100 to-orange-100 px-3 py-1 text-xs font-extrabold uppercase tracking-[0.16em] text-amber-700 shadow-sm", children: "Example" })), answerIsCorrect && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-emerald-300 bg-gradient-to-r from-emerald-100 to-green-100 px-3 py-1 text-xs font-extrabold uppercase tracking-[0.16em] text-emerald-700 shadow-sm", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5" }), "\u0110\u00FAng"] })), answerIsWrong && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-red-300 bg-gradient-to-r from-red-100 to-rose-100 px-3 py-1 text-xs font-extrabold uppercase tracking-[0.16em] text-red-600 shadow-sm", children: [_jsx(XCircle, { className: "h-3.5 w-3.5" }), "Sai"] }))] }), question.imageUrl && (_jsx("div", { className: "mb-2 flex h-40 w-full justify-center sm:h-48", children: _jsx(ResolvedImage, { src: question.imageUrl, alt: `Q${question.questionNumber}`, className: "h-full w-auto rounded-xl object-contain drop-shadow-sm" }) })), _jsx("div", { className: "flex flex-wrap justify-center gap-2", children: question.words.map((word, idx) => {
+                                    const isUsed = usedIndices.has(idx);
+                                    // Use example answer punctuation if available for display
+                                    let displayWord = word;
+                                    if (question.isExample && question.exampleAnswer) {
+                                        const matchedAns = question.exampleAnswer.find(a => normalize(a) === normalize(word));
+                                        if (matchedAns)
+                                            displayWord = matchedAns;
+                                    }
+                                    return (_jsx("button", { type: "button", disabled: isDisabled || isUsed, onClick: () => handleWordClick(question.id, displayWord, currentAnswer), className: `flex min-w-[2.5rem] items-center justify-center rounded-lg border-2 px-3 py-2 text-lg font-bold transition-all ${isUsed
+                                            ? 'border-slate-200 bg-slate-100 text-slate-300'
+                                            : 'border-blue-400 bg-blue-50 text-blue-700 shadow-sm hover:-translate-y-0.5 hover:bg-blue-100 hover:shadow'} ${isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, children: displayWord }, idx));
+                                }) }), _jsxs("div", { className: `mt-2 w-full rounded-xl border p-4 ${answerSectionClasses}`, children: [_jsx("div", { className: `mb-2 text-center text-xs font-medium uppercase tracking-wider ${answerLabelClasses}`, children: "Your Answer" }), _jsx("div", { className: "flex min-h-[3rem] flex-wrap items-center justify-center gap-2", children: currentAnswer.length > 0 ? (currentAnswer.map((word, idx) => (_jsx("button", { type: "button", disabled: isDisabled, onClick: () => handleRemoveWord(question.id, idx, currentAnswer), className: `flex min-w-[2.5rem] items-center justify-center rounded-lg border-2 px-3 py-2 text-lg font-bold shadow-sm transition-all disabled:cursor-not-allowed ${answerChipClasses}`, title: !isDisabled ? "Click to remove" : "", children: word }, idx)))) : (_jsx("span", { className: `text-sm italic ${question.isExample ? 'text-amber-500' : 'text-slate-400'}`, children: question.isExample ? 'Example answer is shown here' : 'Click letters above to answer' })) })] }), answerIsWrong && ((() => {
+                                const correctAnswerArray = rawCorrectAnswerMap[question.id]?.answer;
+                                if (!Array.isArray(correctAnswerArray) || correctAnswerArray.length === 0) {
+                                    return null;
+                                }
+                                return (_jsxs("div", { className: "mt-3 w-full rounded-xl border-2 border-emerald-300 bg-gradient-to-br from-emerald-50 to-green-50 p-4", children: [_jsxs("div", { className: "mb-2 flex items-center justify-center gap-1.5 text-xs font-medium uppercase tracking-wider text-emerald-600", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5" }), "\u0110\u00E1p \u00E1n \u0111\u00FAng"] }), _jsx("div", { className: "flex min-h-[3rem] flex-wrap items-center justify-center gap-2", children: correctAnswerArray.map((word, idx) => (_jsx("div", { className: "flex min-w-[2.5rem] items-center justify-center rounded-lg border-2 border-emerald-400 bg-emerald-100 px-3 py-2 text-lg font-bold text-emerald-800 shadow-sm", children: word }, idx))) })] }));
+                            })())] }, question.id));
+                }) })] }));
+}