@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

package/dist/components/questions/types/true-false-group/map-true-false-group-data.js

@@ -0,0 +1,69 @@
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function asRecord(value) {
+    return isRecord(value) ? value : {};
+}
+function asString(value, fallback = '') {
+    return typeof value === 'string' ? value : fallback;
+}
+export function createEmptyTrueFalseGroupItem(questionNumber) {
+    return {
+        question: '',
+        correctAnswer: true,
+        isExample: false,
+        points: 1,
+        questionNumber,
+    };
+}
+export function mapTrueFalseGroupItem(item, index, fallbackAnswer) {
+    const record = asRecord(item);
+    const content = asRecord(record.content);
+    const correctAnswer = asRecord(record.correctAnswer);
+    const isExample = record.isExample === true;
+    const ansVal = typeof correctAnswer.answer === 'boolean'
+        ? correctAnswer.answer
+        : typeof fallbackAnswer === 'boolean'
+            ? fallbackAnswer
+            : true;
+    return {
+        question: asString(content.question) || asString(record.question),
+        correctAnswer: ansVal,
+        isExample,
+        points: isExample ? 0 : typeof record.points === 'number' ? record.points : 1,
+        questionNumber: typeof record.questionNumber === 'number' ? record.questionNumber : index + 1,
+    };
+}
+export function mapQuestionToTrueFalseGroupData(question) {
+    const source = asRecord(question);
+    const content = asRecord(source.content);
+    const answer = asRecord(source.answer);
+    const correctAnswer = asRecord(source.correctAnswer ?? source.correct_answer ?? answer.correctAnswer);
+    const explanation = String(source.explanation || answer.explanation || '');
+    const fallbackAnswers = Array.isArray(correctAnswer.answer)
+        ? correctAnswer.answer.map((value) => typeof value === 'boolean' ? value : undefined)
+        : [];
+    if (Array.isArray(content.items)) {
+        const items = content.items.map((item, index) => mapTrueFalseGroupItem(item, index, fallbackAnswers[index]));
+        return {
+            instruction: asString(asRecord(content.meta).instruction) || 'Tick True or False.',
+            items,
+            explanation,
+            points: items.reduce((total, item) => (item.isExample ? total : total + (item.points || 0)), 0),
+        };
+    }
+    if (Array.isArray(answer.items)) {
+        return {
+            instruction: asString(answer.instruction, 'Tick True or False.'),
+            items: answer.items.map((item, index) => mapTrueFalseGroupItem(item, index, fallbackAnswers[index])),
+            explanation,
+            points: typeof answer.points === 'number' ? answer.points : undefined,
+        };
+    }
+    return {
+        instruction: 'Tick True or False.',
+        items: [createEmptyTrueFalseGroupItem(1)],
+        explanation,
+        points: 1,
+    };
+}

package/dist/components/questions/types/true-false-group/register.js

@@ -1 +1,36 @@
-import{TrueFalseGroupCreator as t}from"./TrueFalseGroupCreator";function e(t){return function(t){return"object"==typeof t&&null!==t&&!Array.isArray(t)}(t)?t:{}}function n(t,e=""){return"string"==typeof t?t:e}export const trueFalseGroupRegistration={component:t,transformInitialData:t=>{const r=t?.content,s=t?.answer,i=t?.correctAnswer||s?.correctAnswer||{},o=t?.explanation||s?.explanation||"",a=Array.isArray(i?.answer)?i.answer:[];if(Array.isArray(r?.items)){const t=r.items.map((t,r)=>function(t,r,s){const i=e(t),o=e(i.content),a=e(i.correctAnswer),p=!0===i.isExample,u="boolean"==typeof a.answer?a.answer:"boolean"!=typeof s||s;return{question:n(o.question)||n(i.question),correctAnswer:u,isExample:p,points:p?0:"number"==typeof i.points?i.points:1,questionNumber:"number"==typeof i.questionNumber?i.questionNumber:r+1}}(t,r,a[r]));return{instruction:r?.meta?.instruction||"Tick True or False.",items:t,explanation:o,points:t.reduce((t,e)=>e.isExample?t:t+(e.points||0),0)}}return Array.isArray(s?.items)?{instruction:s.instruction||"Tick True or False.",items:s.items,explanation:o,points:s.points}:{instruction:"Tick True or False.",items:[(p=1,{question:"",correctAnswer:!0,isExample:!1,points:1,questionNumber:p})],explanation:o,points:1};var p},getExtraProps:t=>({onUnsavedChangesChange:t.onUnsavedChangesChange,validationRef:t.validationRef}),wrapOnSave:(t,e)=>{const n=t;return{type:e.questionType,content:e.state.content,points:n.points??e.state.points??1,level:e.state.level,difficulty:e.state.difficulty,skill:e.state.skill,answer:n,explanation:n.explanation||""}},wrapOnChange:(t,e)=>{const n=t;return{type:e.questionType,content:e.state.content,points:n.points??e.state.points??1,level:e.state.level,difficulty:e.state.difficulty,skill:e.state.skill,answer:n,explanation:n.explanation||""}}};
+import { TrueFalseGroupCreator } from './TrueFalseGroupCreator';
+import { mapQuestionToTrueFalseGroupData } from './map-true-false-group-data';
+export const trueFalseGroupRegistration = {
+    component: TrueFalseGroupCreator,
+    transformInitialData: (initialData) => mapQuestionToTrueFalseGroupData(initialData),
+    getExtraProps: (ctx) => ({
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+    }),
+    wrapOnSave: (data, ctx) => {
+        const payload = data;
+        return {
+            type: ctx.questionType,
+            content: ctx.state.content,
+            points: payload.points ?? ctx.state.points ?? 1,
+            level: ctx.state.level,
+            difficulty: ctx.state.difficulty,
+            skill: ctx.state.skill,
+            answer: payload,
+            explanation: payload.explanation || '',
+        };
+    },
+    wrapOnChange: (data, ctx) => {
+        const payload = data;
+        return {
+            type: ctx.questionType,
+            content: ctx.state.content,
+            points: payload.points ?? ctx.state.points ?? 1,
+            level: ctx.state.level,
+            difficulty: ctx.state.difficulty,
+            skill: ctx.state.skill,
+            answer: payload,
+            explanation: payload.explanation || '',
+        };
+    },
+};

package/dist/components/questions/types/true-false-group/transform.js

@@ -1 +1,43 @@
-function e(e){return e.reduce((e,r)=>{if(r.isExample)return e;return e+("number"==typeof r.points?r.points:1)},0)}export const transformTrueFalseGroup=r=>{const t=r.answer,n=Array.isArray(t?.items)?t.items:[];if(0===n.length)return{apiContent:{items:[]},apiCorrectAnswer:{answer:[]}};const s=n.map((e,r)=>{const t=!("boolean"==typeof e.correctAnswer)||e.correctAnswer;return{questionType:"TRUE_FALSE",...e.isExample?{isExample:!0}:{},content:{question:e.question||""},correctAnswer:{answer:t},points:e.isExample?0:"number"==typeof e.points?e.points:1,questionNumber:e.questionNumber||r+1}});return{apiContent:{meta:{instruction:t?.instruction||"Tick True or False."},items:s},apiCorrectAnswer:{answer:s.map(e=>e.correctAnswer.answer)},totalPoints:e(n)}};
+const CHILD_QUESTION_TYPE = 'TRUE_FALSE';
+function sumGradablePoints(items) {
+    return items.reduce((total, item) => {
+        if (item.isExample) {
+            return total;
+        }
+        const points = typeof item.points === 'number' ? item.points : 1;
+        return total + points;
+    }, 0);
+}
+export const transformTrueFalseGroup = (question) => {
+    const answerData = question.answer;
+    const items = Array.isArray(answerData?.items) ? answerData.items : [];
+    if (items.length === 0) {
+        return { apiContent: { items: [] }, apiCorrectAnswer: { answer: [] } };
+    }
+    const apiItems = items.map((item, index) => {
+        const isBool = typeof item.correctAnswer === 'boolean';
+        const correctAnswer = isBool ? item.correctAnswer : true;
+        return {
+            questionType: CHILD_QUESTION_TYPE,
+            ...(item.isExample ? { isExample: true } : {}),
+            content: {
+                question: item.question || '',
+            },
+            correctAnswer: { answer: correctAnswer },
+            points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+            questionNumber: item.questionNumber || index + 1,
+        };
+    });
+    return {
+        apiContent: {
+            meta: {
+                instruction: answerData?.instruction || 'Tick True or False.',
+            },
+            items: apiItems,
+        },
+        apiCorrectAnswer: {
+            answer: apiItems.map((item) => item.correctAnswer.answer),
+        },
+        totalPoints: sumGradablePoints(items),
+    };
+};

package/dist/components/questions/types/word-fill-paragraph/WordFillParagraphClient.js

@@ -1 +1,233 @@
-"use client";import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{useState as a,useEffect as l,useCallback as n,useMemo as s}from"react";import{Check as d,X as i,FileText as o,Star as m,Mail as c}from"lucide-react";import{usePresignedFileUrl as g}from"../../../../shared/lib/hooks";import{cn as b}from"../../../../shared/lib/utils";function x({imageUrl:r}){const{previewUrl:t,isLoading:a}=g(r);return a?e("div",{className:"flex h-16 w-16 items-center justify-center rounded-lg bg-gray-100",children:e("div",{className:"h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-teal-500"})}):t?e("img",{src:t,alt:"",className:"h-16 w-16 rounded-lg object-cover border border-gray-200"}):null}function p({text:t}){return r("span",{className:"mx-1 inline-flex items-center gap-1 rounded-sm border border-amber-300 bg-amber-100 px-2.5 py-0.5 text-sm font-semibold text-amber-800 align-middle",children:[e(m,{className:"h-3 w-3 fill-amber-400 text-amber-400 shrink-0"}),t]})}export function WordFillParagraphClient({questionData:h,onSubmit:u,isReviewMode:f=!1,userAnswer:y,autoFillCorrectAnswers:w=!1,explanation:N}){const{title:v="",paragraph:k="",wordBank:j=[],answers:E=[],exampleAnswer:S=[],imageUrl:U,emailFrom:A,emailTo:C}=h,F=function(e){return e.length>0&&Array.isArray(e[0]?.options)}(j),I=!F&&0===j.length,$=s(()=>{if(F||I)return new Set;const e=new Set;return j.forEach(r=>{if(r.isExample){const t=E.indexOf(r.word);t>=0&&e.add(t)}}),e},[F,I,j,E]),_=s(()=>{if(!I||!S?.length)return new Set;const e=new Set(S),r=new Set;return E.forEach((t,a)=>{e.has(t)&&r.add(a)}),r},[I,S,E]),B=n(e=>F?!!j[e]?.isExample:I?_.has(e):$.has(e),[F,I,j,$,_]),[L,O]=a(()=>{const e={};return y?y.forEach((r,t)=>{e[t]=r}):w&&E.forEach((r,t)=>{e[t]=r}),e});l(()=>{if(y){const e={};y.forEach((r,t)=>{e[t]=r}),O(e)}},[y]);const{previewUrl:P,isLoading:R}=g(U||""),T=s(()=>function(e){const r=[],t=/\{(\d+)\}/g;let a,l=0;for(;null!==(a=t.exec(e));)a.index>l&&r.push({type:"text",value:e.slice(l,a.index)}),r.push({type:"blank",index:parseInt(a[1],10)}),l=t.lastIndex;return l<e.length&&r.push({type:"text",value:e.slice(l)}),r}(k),[k]),W=s(()=>T.filter(e=>"blank"===e.type).map(e=>e.index),[T]),q=s(()=>W.filter(e=>!B(e)),[W,B]),z=q.every(e=>L[e]),D=f&&q.every(e=>L[e]===E[e]),G=N||h.explanation,[M,H]=a(null),J=n((e,r)=>{if(f)return;const t={...L,[e]:r};O(t);const a=W.map(e=>t[e]||"");u?.(a)},[f,L,W,u]),K=n((e,r)=>{if(f)return;const t={...L,[e]:r};O(t);const a=W.map(e=>t[e]||"");u?.(a)},[f,L,W,u]),Q=s(()=>{const e=new Set;return Object.values(L).forEach(r=>{r&&e.add(r)}),e},[L]),V=s(()=>W.filter(e=>B(e)).map(e=>({blankIdx:e,answer:E[e]||""})).filter(e=>e.answer),[W,B,E]);return e("div",{className:"space-y-4",children:r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:[r("div",{className:"flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3",children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:`flex h-8 w-8 items-center justify-center rounded-lg ${F?"bg-gradient-to-br from-emerald-500 to-teal-600":I?"bg-gradient-to-br from-indigo-500 to-blue-600":"bg-gradient-to-br from-teal-500 to-cyan-600"} text-white shadow-sm`,children:e(o,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:"Điền từ vào đoạn văn"})]}),f&&z&&r("div",{className:b("flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold",D?"bg-green-100 text-green-700":"bg-red-100 text-red-700"),children:[e(D?d:i,{className:"h-3.5 w-3.5"}),D?"Đúng":"Sai"]})]}),r("div",{className:"space-y-5 p-5",children:[v&&e("h2",{className:"text-center text-xl font-bold text-gray-900",children:v}),V.length>0&&r("div",{className:"flex flex-wrap items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 px-4 py-2.5",children:[r("div",{className:"flex items-center gap-1.5 text-xs font-semibold text-amber-700 shrink-0",children:[e(m,{className:"h-3.5 w-3.5 fill-amber-400 text-amber-400"}),"Đã điền sẵn (Example):"]}),V.map(({blankIdx:t,answer:a})=>r("span",{className:"inline-flex items-center gap-1 rounded-md border border-amber-300 bg-white px-2 py-0.5 text-xs font-semibold text-amber-800",children:[e("span",{className:"text-amber-500",children:"{"+t+"}"}),a]},t))]}),(P||U)&&e("div",{className:"flex justify-center",children:e("div",{className:"overflow-hidden rounded-lg border border-gray-200 bg-gray-50",children:R?e("div",{className:"flex h-48 w-48 items-center justify-center",children:e("div",{className:"h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-teal-500"})}):e("img",{src:P||U,alt:v,className:"max-h-56 w-auto object-contain p-2"})})}),r("div",{className:A||C?"overflow-hidden rounded-xl border border-gray-300 bg-white shadow-sm":"rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50",children:[(A||C)&&r(t,{children:[r("div",{className:"flex items-center gap-1.5 border-b border-gray-200 bg-gray-100 px-4 py-2.5",children:[e("span",{className:"h-3 w-3 rounded-full bg-red-400"}),e("span",{className:"h-3 w-3 rounded-full bg-yellow-400"}),e("span",{className:"h-3 w-3 rounded-full bg-green-400"}),r("div",{className:"ml-3 flex items-center gap-1.5 text-xs text-gray-400",children:[e(c,{className:"h-3.5 w-3.5"}),e("span",{children:"Email"})]})]}),r("div",{className:"border-b border-gray-200 bg-gray-50 px-5 py-3 space-y-1.5 text-sm",children:[A&&r("div",{className:"flex items-baseline gap-2",children:[e("span",{className:"w-10 shrink-0 text-xs font-semibold uppercase tracking-wide text-gray-400",children:"From"}),e("span",{className:"font-medium text-gray-800",children:A})]}),C&&r("div",{className:"flex items-baseline gap-2",children:[e("span",{className:"w-10 shrink-0 text-xs font-semibold uppercase tracking-wide text-gray-400",children:"To"}),e("span",{className:"font-medium text-gray-800",children:C})]})]})]}),e("div",{className:"text-base leading-loose text-gray-800 whitespace-pre-wrap "+(A||C?"p-5 bg-white":"p-5 bg-gradient-to-r from-gray-50 to-slate-50"),children:T.map((t,a)=>{if("text"===t.type)return e("span",{children:t.value},a);const l=t.index,n=L[l],s=f&&n===E[l],o=f&&!!n&&n!==E[l];if(B(l))return e(p,{text:E[l]||"___"},a);if(F){const t=M===l,m=j[l]?.options||[];return r("span",{className:"relative mx-1 inline-flex flex-col items-center align-middle",children:[r("button",{type:"button",onClick:()=>!f&&H(t?null:l),disabled:f,className:b("inline-flex min-w-[80px] items-center rounded border-2 border-dashed px-3 py-0.5 text-center text-sm font-semibold transition-all",f?s?"border-green-400 bg-green-50 text-green-800":o?"border-red-400 bg-red-50 text-red-800":"border-gray-300 bg-gray-50 text-gray-400":t?"border-teal-500 bg-teal-50 text-teal-700 ring-2 ring-teal-200":n?"cursor-pointer border-teal-300 bg-teal-50 text-teal-700 hover:bg-teal-100":"cursor-pointer border-gray-300 bg-white text-gray-400 hover:border-teal-300 hover:bg-teal-50"),children:[n||`(${l+1})`,f&&n&&(s?e(d,{className:"ml-1 h-3.5 w-3.5 text-green-600"}):e(i,{className:"ml-1 h-3.5 w-3.5 text-red-600"}))]}),t&&!f&&m.length>0&&e("div",{className:"absolute left-1/2 top-full z-10 mt-1 flex -translate-x-1/2 gap-1 rounded-lg border border-teal-200 bg-white p-1.5 shadow-lg",children:m.map((r,t)=>e("button",{type:"button",onClick:e=>{e.stopPropagation(),J(l,r),H(null)},className:b("whitespace-nowrap rounded-md px-2.5 py-1 text-sm font-medium transition-all",n===r?"bg-teal-500 text-white":"bg-gray-50 text-gray-700 hover:bg-teal-100 hover:text-teal-700"),children:r},t))})]},a)}return r("span",I?{className:b("mx-1 inline-flex min-w-[80px] items-center justify-center rounded border-2 px-3 py-0.5 text-sm font-semibold align-middle",f?s?"border-green-400 bg-green-50 text-green-800":o?"border-red-400 bg-red-50 text-red-800":"border-dashed border-gray-300 bg-gray-50 text-gray-400":n?"border-indigo-300 bg-indigo-50 text-indigo-800":"border-dashed border-gray-300 bg-white text-gray-400"),children:[n||`(${l+1})`,f&&n&&(s?e(d,{className:"ml-1 h-3.5 w-3.5 text-green-600"}):e(i,{className:"ml-1 h-3.5 w-3.5 text-red-600"}))]}:{className:"mx-1 inline-flex items-center align-middle",children:[e("input",{type:"text",value:n||"",onChange:e=>K(l,e.target.value),disabled:f,placeholder:`(${l+1})`,className:b("inline-flex min-w-[80px] max-w-[120px] rounded border-2 border-dashed px-3 py-0.5 text-center text-sm font-semibold transition-all outline-none",f?s?"border-green-400 bg-green-50 text-green-800":o?"border-red-400 bg-red-50 text-red-800":"border-gray-300 bg-gray-50 text-gray-400":n?"border-teal-300 bg-teal-50 text-teal-700":"border-gray-300 bg-white text-gray-400 placeholder:text-gray-300","focus:border-teal-500 focus:bg-teal-50 focus:text-teal-700 focus:ring-2 focus:ring-teal-200",f?"cursor-default":"cursor-text")}),f&&n&&e("span",{className:"ml-1",children:s?e(d,{className:"h-3.5 w-3.5 text-green-600"}):e(i,{className:"h-3.5 w-3.5 text-red-600"})})]},a)})})]}),!F&&!I&&r("div",{className:"space-y-2",children:[e("span",{className:"text-xs font-medium uppercase tracking-wider text-gray-500",children:"Word Bank (Reference)"}),e("div",{className:"grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4",children:j.map((t,a)=>{const l=Q.has(t.word),n=t.isExample,s=t.imageUrl&&""!==t.imageUrl.trim();return r("div",{className:b("flex flex-col items-center gap-2 rounded-xl border-2 p-3",n?"border-amber-300 bg-amber-50":l?"border-emerald-200 bg-emerald-50 opacity-60":"border-gray-200 bg-gray-50"),children:[s&&e(x,{imageUrl:t.imageUrl}),r("div",{className:"flex flex-col items-center gap-1",children:[e("span",{className:b("text-sm font-semibold",n?"text-amber-700":l?"text-emerald-700":"text-gray-700"),children:t.word}),n&&r("span",{className:"flex items-center gap-0.5 rounded-full bg-amber-100 px-1.5 py-0.5 text-[10px] font-semibold text-amber-600",children:[e(m,{className:"h-2.5 w-2.5 fill-amber-400 text-amber-400"}),"example"]}),l&&!n&&e("span",{className:"flex items-center gap-0.5 rounded-full bg-emerald-100 px-1.5 py-0.5 text-[10px] font-semibold text-emerald-600",children:"used"})]})]},a)})})]}),f&&!D&&r("div",{className:"rounded-lg border border-green-200 bg-green-50 p-3",children:[e("span",{className:"text-xs font-medium uppercase tracking-wider text-green-600",children:"Đáp án đúng"}),e("div",{className:"mt-2 flex flex-wrap gap-2",children:E.map((e,t)=>B(t)?null:r("span",{className:"rounded-lg border border-green-300 bg-green-100 px-3 py-1.5 text-sm font-semibold text-green-800",children:["{"+t+"}",": ",e]},t))})]}),f&&G&&r("div",{className:"rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-3",children:[e("span",{className:"text-xs font-medium uppercase tracking-wider text-blue-600",children:"Giải thích"}),e("p",{className:"mt-1 text-sm text-blue-800",children:G})]})]})]})})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { Check, X, FileText, Star, Mail } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { cn } from '../../../../shared/lib/utils';
+function parseParagraph(paragraph) {
+    const segments = [];
+    const regex = /\{(\d+)\}/g;
+    let lastIndex = 0;
+    let match;
+    while ((match = regex.exec(paragraph)) !== null) {
+        if (match.index > lastIndex) {
+            segments.push({ type: 'text', value: paragraph.slice(lastIndex, match.index) });
+        }
+        segments.push({ type: 'blank', index: parseInt(match[1], 10) });
+        lastIndex = regex.lastIndex;
+    }
+    if (lastIndex < paragraph.length) {
+        segments.push({ type: 'text', value: paragraph.slice(lastIndex) });
+    }
+    return segments;
+}
+function isWithOptionsMode(wordBank) {
+    return wordBank.length > 0 && Array.isArray(wordBank[0]?.options);
+}
+// ---------------------------------------------------------------------------
+// Sub-component: presigned image for word-bank card
+// ---------------------------------------------------------------------------
+function WordBankImage({ imageUrl }) {
+    const { previewUrl, isLoading } = usePresignedFileUrl(imageUrl);
+    if (isLoading) {
+        return (_jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-lg bg-gray-100", children: _jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-teal-500" }) }));
+    }
+    if (!previewUrl)
+        return null;
+    return (_jsx("img", { src: previewUrl, alt: "", className: "h-16 w-16 rounded-lg object-cover border border-gray-200" }));
+}
+// ---------------------------------------------------------------------------
+// Example blank badge — shown pre-filled in the paragraph
+// ---------------------------------------------------------------------------
+function ExampleBadge({ text }) {
+    return (_jsxs("span", { className: "mx-1 inline-flex items-center gap-1 rounded-sm border border-amber-300 bg-amber-100 px-2.5 py-0.5 text-sm font-semibold text-amber-800 align-middle", children: [_jsx(Star, { className: "h-3 w-3 fill-amber-400 text-amber-400 shrink-0" }), text] }));
+}
+// ---------------------------------------------------------------------------
+// Unified WordFillParagraphClient
+// ---------------------------------------------------------------------------
+export function WordFillParagraphClient({ questionData, onSubmit, isReviewMode = false, userAnswer, autoFillCorrectAnswers = false, explanation, }) {
+    const { title = '', paragraph = '', wordBank = [], answers = [], exampleAnswer = [], imageUrl, emailFrom, emailTo, } = questionData;
+    const withOptions = isWithOptionsMode(wordBank);
+    const isDefaultMode = !withOptions && wordBank.length === 0;
+    // ── Example sets ──────────────────────────────────────────────────────────
+    // WITH_WORD_BANK: example blank indices derived from wordBank[i].isExample
+    const exampleBlankIndices = useMemo(() => {
+        if (withOptions || isDefaultMode)
+            return new Set();
+        const indices = new Set();
+        wordBank.forEach((item) => {
+            if (item.isExample) {
+                const answerIdx = answers.indexOf(item.word);
+                if (answerIdx >= 0)
+                    indices.add(answerIdx);
+            }
+        });
+        return indices;
+    }, [withOptions, isDefaultMode, wordBank, answers]);
+    // DEFAULT / EMAIL: example blank indices derived from exampleAnswer string list
+    const defaultExampleBlankIndices = useMemo(() => {
+        if (!isDefaultMode || !exampleAnswer?.length)
+            return new Set();
+        const exSet = new Set(exampleAnswer);
+        const indices = new Set();
+        answers.forEach((ans, idx) => {
+            if (exSet.has(ans))
+                indices.add(idx);
+        });
+        return indices;
+    }, [isDefaultMode, exampleAnswer, answers]);
+    // Unified helper: is a given blank index an example?
+    const isExampleBlank = useCallback((blankIdx) => {
+        if (withOptions)
+            return !!(wordBank[blankIdx]?.isExample);
+        if (isDefaultMode)
+            return defaultExampleBlankIndices.has(blankIdx);
+        return exampleBlankIndices.has(blankIdx);
+    }, [withOptions, isDefaultMode, wordBank, exampleBlankIndices, defaultExampleBlankIndices]);
+    // ── Filled answers state ──────────────────────────────────────────────────
+    const [filledAnswers, setFilledAnswers] = useState(() => {
+        const initial = {};
+        if (userAnswer) {
+            userAnswer.forEach((ans, idx) => { initial[idx] = ans; });
+        }
+        else if (autoFillCorrectAnswers) {
+            answers.forEach((ans, idx) => { initial[idx] = ans; });
+        }
+        return initial;
+    });
+    useEffect(() => {
+        if (userAnswer) {
+            const updated = {};
+            userAnswer.forEach((ans, idx) => { updated[idx] = ans; });
+            setFilledAnswers(updated);
+        }
+    }, [userAnswer]);
+    // ── Image ─────────────────────────────────────────────────────────────────
+    const { previewUrl: imagePreviewUrl, isLoading: imageLoading } = usePresignedFileUrl(imageUrl || '');
+    // ── Paragraph parsing ─────────────────────────────────────────────────────
+    const segments = useMemo(() => parseParagraph(paragraph), [paragraph]);
+    const allBlanks = useMemo(() => segments.filter(s => s.type === 'blank').map(s => s.index), [segments]);
+    // ── Correctness (skip example blanks) ────────────────────────────────────
+    const nonExampleBlanks = useMemo(() => allBlanks.filter(idx => !isExampleBlank(idx)), [allBlanks, isExampleBlank]);
+    const allFilled = nonExampleBlanks.every(idx => filledAnswers[idx]);
+    const isAllCorrect = isReviewMode && nonExampleBlanks.every(idx => filledAnswers[idx] === answers[idx]);
+    const displayExplanation = explanation || questionData.explanation;
+    // ── WITH_OPTIONS: expanded blank ──────────────────────────────────────────
+    const [expandedBlank, setExpandedBlank] = useState(null);
+    const handleSelectOption = useCallback((blankIndex, option) => {
+        if (isReviewMode)
+            return;
+        const updated = { ...filledAnswers, [blankIndex]: option };
+        setFilledAnswers(updated);
+        const answerArray = allBlanks.map(idx => updated[idx] || '');
+        onSubmit?.(answerArray);
+    }, [isReviewMode, filledAnswers, allBlanks, onSubmit]);
+    // ── WITH_WORD_BANK: direct input handling ─────────────────────────────────
+    const handleInputChange = useCallback((blankIndex, value) => {
+        if (isReviewMode)
+            return;
+        const updated = { ...filledAnswers, [blankIndex]: value };
+        setFilledAnswers(updated);
+        const answerArray = allBlanks.map(idx => updated[idx] || '');
+        onSubmit?.(answerArray);
+    }, [isReviewMode, filledAnswers, allBlanks, onSubmit]);
+    const usedWords = useMemo(() => {
+        const used = new Set();
+        Object.values(filledAnswers).forEach(w => { if (w)
+            used.add(w); });
+        return used;
+    }, [filledAnswers]);
+    // ── Example summary (blanks pre-filled) ───────────────────────────────────
+    const exampleEntries = useMemo(() => {
+        return allBlanks
+            .filter(idx => isExampleBlank(idx))
+            .map(idx => ({ blankIdx: idx, answer: answers[idx] || '' }))
+            .filter(e => e.answer);
+    }, [allBlanks, isExampleBlank, answers]);
+    // ── Render ────────────────────────────────────────────────────────────────
+    const headerGradient = withOptions
+        ? 'bg-gradient-to-br from-emerald-500 to-teal-600'
+        : isDefaultMode
+            ? 'bg-gradient-to-br from-indigo-500 to-blue-600'
+            : 'bg-gradient-to-br from-teal-500 to-cyan-600';
+    return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `flex h-8 w-8 items-center justify-center rounded-lg ${headerGradient} text-white shadow-sm`, children: _jsx(FileText, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "\u0110i\u1EC1n t\u1EEB v\u00E0o \u0111o\u1EA1n v\u0103n" })] }), isReviewMode && allFilled && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isAllCorrect ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'), children: [isAllCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), isAllCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "space-y-5 p-5", children: [title && (_jsx("h2", { className: "text-center text-xl font-bold text-gray-900", children: title })), exampleEntries.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 px-4 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-xs font-semibold text-amber-700 shrink-0", children: [_jsx(Star, { className: "h-3.5 w-3.5 fill-amber-400 text-amber-400" }), "\u0110\u00E3 \u0111i\u1EC1n s\u1EB5n (Example):"] }), exampleEntries.map(({ blankIdx, answer }) => (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-md border border-amber-300 bg-white px-2 py-0.5 text-xs font-semibold text-amber-800", children: [_jsx("span", { className: "text-amber-500", children: '{' + blankIdx + '}' }), answer] }, blankIdx)))] })), (imagePreviewUrl || imageUrl) && (_jsx("div", { className: "flex justify-center", children: _jsx("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gray-50", children: imageLoading ? (_jsx("div", { className: "flex h-48 w-48 items-center justify-center", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-teal-500" }) })) : (_jsx("img", { src: imagePreviewUrl || imageUrl, alt: title, className: "max-h-56 w-auto object-contain p-2" })) }) })), _jsxs("div", { className: (emailFrom || emailTo)
+                                ? 'overflow-hidden rounded-xl border border-gray-300 bg-white shadow-sm'
+                                : 'rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50', children: [(emailFrom || emailTo) && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-1.5 border-b border-gray-200 bg-gray-100 px-4 py-2.5", children: [_jsx("span", { className: "h-3 w-3 rounded-full bg-red-400" }), _jsx("span", { className: "h-3 w-3 rounded-full bg-yellow-400" }), _jsx("span", { className: "h-3 w-3 rounded-full bg-green-400" }), _jsxs("div", { className: "ml-3 flex items-center gap-1.5 text-xs text-gray-400", children: [_jsx(Mail, { className: "h-3.5 w-3.5" }), _jsx("span", { children: "Email" })] })] }), _jsxs("div", { className: "border-b border-gray-200 bg-gray-50 px-5 py-3 space-y-1.5 text-sm", children: [emailFrom && (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "w-10 shrink-0 text-xs font-semibold uppercase tracking-wide text-gray-400", children: "From" }), _jsx("span", { className: "font-medium text-gray-800", children: emailFrom })] })), emailTo && (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "w-10 shrink-0 text-xs font-semibold uppercase tracking-wide text-gray-400", children: "To" }), _jsx("span", { className: "font-medium text-gray-800", children: emailTo })] }))] })] })), _jsx("div", { className: `text-base leading-loose text-gray-800 whitespace-pre-wrap ${(emailFrom || emailTo) ? 'p-5 bg-white' : 'p-5 bg-gradient-to-r from-gray-50 to-slate-50'}`, children: segments.map((segment, idx) => {
+                                        if (segment.type === 'text') {
+                                            return _jsx("span", { children: segment.value }, idx);
+                                        }
+                                        const blankIdx = segment.index;
+                                        const filled = filledAnswers[blankIdx];
+                                        const isCorrectFill = isReviewMode && filled === answers[blankIdx];
+                                        const isWrongFill = isReviewMode && !!filled && filled !== answers[blankIdx];
+                                        const example = isExampleBlank(blankIdx);
+                                        // ── Example blank: always shown pre-filled ──────────────────
+                                        if (example) {
+                                            return _jsx(ExampleBadge, { text: answers[blankIdx] || '___' }, idx);
+                                        }
+                                        // ── WITH_OPTIONS blank ──────────────────────────────────────
+                                        if (withOptions) {
+                                            const isExpanded = expandedBlank === blankIdx;
+                                            const blankOptions = wordBank[blankIdx]?.options || [];
+                                            return (_jsxs("span", { className: "relative mx-1 inline-flex flex-col items-center align-middle", children: [_jsxs("button", { type: "button", onClick: () => !isReviewMode && setExpandedBlank(isExpanded ? null : blankIdx), disabled: isReviewMode, className: cn('inline-flex min-w-[80px] items-center rounded border-2 border-dashed px-3 py-0.5 text-center text-sm font-semibold transition-all', isReviewMode
+                                                            ? isCorrectFill
+                                                                ? 'border-green-400 bg-green-50 text-green-800'
+                                                                : isWrongFill
+                                                                    ? 'border-red-400 bg-red-50 text-red-800'
+                                                                    : 'border-gray-300 bg-gray-50 text-gray-400'
+                                                            : isExpanded
+                                                                ? 'border-teal-500 bg-teal-50 text-teal-700 ring-2 ring-teal-200'
+                                                                : filled
+                                                                    ? 'cursor-pointer border-teal-300 bg-teal-50 text-teal-700 hover:bg-teal-100'
+                                                                    : 'cursor-pointer border-gray-300 bg-white text-gray-400 hover:border-teal-300 hover:bg-teal-50'), children: [filled || `(${blankIdx + 1})`, isReviewMode && filled && (isCorrectFill
+                                                                ? _jsx(Check, { className: "ml-1 h-3.5 w-3.5 text-green-600" })
+                                                                : _jsx(X, { className: "ml-1 h-3.5 w-3.5 text-red-600" }))] }), isExpanded && !isReviewMode && blankOptions.length > 0 && (_jsx("div", { className: "absolute left-1/2 top-full z-10 mt-1 flex -translate-x-1/2 gap-1 rounded-lg border border-teal-200 bg-white p-1.5 shadow-lg", children: blankOptions.map((opt, optIdx) => (_jsx("button", { type: "button", onClick: (e) => {
+                                                                e.stopPropagation();
+                                                                handleSelectOption(blankIdx, opt);
+                                                                setExpandedBlank(null);
+                                                            }, className: cn('whitespace-nowrap rounded-md px-2.5 py-1 text-sm font-medium transition-all', filled === opt
+                                                                ? 'bg-teal-500 text-white'
+                                                                : 'bg-gray-50 text-gray-700 hover:bg-teal-100 hover:text-teal-700'), children: opt }, optIdx))) }))] }, idx));
+                                        }
+                                        // ── WITH_WORD_BANK or DEFAULT blank ─────────────────────────
+                                        if (isDefaultMode) {
+                                            // DEFAULT: read-only inputs in review, otherwise show filled/empty state
+                                            return (_jsxs("span", { className: cn('mx-1 inline-flex min-w-[80px] items-center justify-center rounded border-2 px-3 py-0.5 text-sm font-semibold align-middle', isReviewMode
+                                                    ? isCorrectFill
+                                                        ? 'border-green-400 bg-green-50 text-green-800'
+                                                        : isWrongFill
+                                                            ? 'border-red-400 bg-red-50 text-red-800'
+                                                            : 'border-dashed border-gray-300 bg-gray-50 text-gray-400'
+                                                    : filled
+                                                        ? 'border-indigo-300 bg-indigo-50 text-indigo-800'
+                                                        : 'border-dashed border-gray-300 bg-white text-gray-400'), children: [filled || `(${blankIdx + 1})`, isReviewMode && filled && (isCorrectFill
+                                                        ? _jsx(Check, { className: "ml-1 h-3.5 w-3.5 text-green-600" })
+                                                        : _jsx(X, { className: "ml-1 h-3.5 w-3.5 text-red-600" }))] }, idx));
+                                        }
+                                        // WITH_WORD_BANK input field
+                                        return (_jsxs("span", { className: "mx-1 inline-flex items-center align-middle", children: [_jsx("input", { type: "text", value: filled || '', onChange: (e) => handleInputChange(blankIdx, e.target.value), disabled: isReviewMode, placeholder: `(${blankIdx + 1})`, className: cn('inline-flex min-w-[80px] max-w-[120px] rounded border-2 border-dashed px-3 py-0.5 text-center text-sm font-semibold transition-all outline-none', isReviewMode
+                                                        ? isCorrectFill
+                                                            ? 'border-green-400 bg-green-50 text-green-800'
+                                                            : isWrongFill
+                                                                ? 'border-red-400 bg-red-50 text-red-800'
+                                                                : 'border-gray-300 bg-gray-50 text-gray-400'
+                                                        : filled
+                                                            ? 'border-teal-300 bg-teal-50 text-teal-700'
+                                                            : 'border-gray-300 bg-white text-gray-400 placeholder:text-gray-300', 'focus:border-teal-500 focus:bg-teal-50 focus:text-teal-700 focus:ring-2 focus:ring-teal-200', isReviewMode ? 'cursor-default' : 'cursor-text') }), isReviewMode && filled && (_jsx("span", { className: "ml-1", children: isCorrectFill
+                                                        ? _jsx(Check, { className: "h-3.5 w-3.5 text-green-600" })
+                                                        : _jsx(X, { className: "h-3.5 w-3.5 text-red-600" }) }))] }, idx));
+                                    }) })] }), !withOptions && !isDefaultMode && (_jsxs("div", { className: "space-y-2", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-gray-500", children: "Word Bank (Reference)" }), _jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", children: wordBank.map((item, index) => {
+                                        const isUsed = usedWords.has(item.word);
+                                        const isExampleWord = item.isExample;
+                                        const hasImage = item.imageUrl && item.imageUrl.trim() !== '';
+                                        return (_jsxs("div", { className: cn('flex flex-col items-center gap-2 rounded-xl border-2 p-3', isExampleWord
+                                                ? 'border-amber-300 bg-amber-50'
+                                                : isUsed
+                                                    ? 'border-emerald-200 bg-emerald-50 opacity-60'
+                                                    : 'border-gray-200 bg-gray-50'), children: [hasImage && _jsx(WordBankImage, { imageUrl: item.imageUrl }), _jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx("span", { className: cn('text-sm font-semibold', isExampleWord ? 'text-amber-700' : isUsed ? 'text-emerald-700' : 'text-gray-700'), children: item.word }), isExampleWord && (_jsxs("span", { className: "flex items-center gap-0.5 rounded-full bg-amber-100 px-1.5 py-0.5 text-[10px] font-semibold text-amber-600", children: [_jsx(Star, { className: "h-2.5 w-2.5 fill-amber-400 text-amber-400" }), "example"] })), isUsed && !isExampleWord && (_jsx("span", { className: "flex items-center gap-0.5 rounded-full bg-emerald-100 px-1.5 py-0.5 text-[10px] font-semibold text-emerald-600", children: "used" }))] })] }, index));
+                                    }) })] })), isReviewMode && !isAllCorrect && (_jsxs("div", { className: "rounded-lg border border-green-200 bg-green-50 p-3", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-green-600", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: answers.map((answer, index) => {
+                                        if (isExampleBlank(index))
+                                            return null;
+                                        return (_jsxs("span", { className: "rounded-lg border border-green-300 bg-green-100 px-3 py-1.5 text-sm font-semibold text-green-800", children: ['{' + index + '}', ": ", answer] }, index));
+                                    }) })] })), isReviewMode && displayExplanation && (_jsxs("div", { className: "rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-3", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-blue-600", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-blue-800", children: displayExplanation })] }))] })] }) }));
+}