@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

package/dist/components/questions/types/fill-in-blank/register.js

@@ -1 +1,148 @@
-import{FillInBlankCreator as e}from"./FillInBlankCreator";export const fillInBlankRegistration={component:e,transformInitialData:e=>{let s=null;const t=e?.content,n=e?.answer,i=e?.explanation||n?.explanation||"",a=e?.questionGroup||{},r=a?.payload||{},o=r?.imageUrl||"",l=t?.imageUrl||n?.imageUrl||o,p=r?.title||n?.title||"",u=r?.content||r?.passage||n?.groupContent||"",g=a?.groupNumber||n?.groupNumber||1;if(n?.question&&Array.isArray(n?.answers))s={question:n.question,answers:n.answers,caseSensitive:n?.caseSensitive??!1,imageUrl:l,groupImageUrl:o,showHints:n?.showHints||!1,hints:n?.hints||[],explanation:i,isExample:e?.isExample||n?.isExample||!1,points:n?.points||1,title:p,groupContent:u,groupNumber:g,groups:n?.groups||e?.groups};else if(t?.question&&Array.isArray(n?.answers))s={question:t.question,answers:n.answers,caseSensitive:n?.caseSensitive??!1,imageUrl:l,groupImageUrl:o,showHints:t?.showHints||!1,hints:t?.hints||[],explanation:i,isExample:e?.isExample||n?.isExample||!1,points:n?.points||t?.points||1,title:p,groupContent:u,groupNumber:g,groups:n?.groups||e?.groups};else if(n?.blanks&&Array.isArray(n.blanks)){const t=n.blanks[0];s={question:t?.text||"",answers:n.blanks.map(e=>e.correctAnswer||""),caseSensitive:n?.caseSensitive??!1,showHints:n?.showHints||!1,hints:n?.hints||[],explanation:i,isExample:e?.isExample||n?.isExample||!1,blanks:n.blanks,imageUrl:l,groupImageUrl:o,title:p,groupContent:u,groupNumber:g,groups:n?.groups||e?.groups}}else if(t&&void 0!==t.text&&!t.blanks)s={question:t.text||"",answers:[n?.correctAnswer||""],caseSensitive:n?.caseSensitive??!1,showHints:t?.showHints||!1,hints:t?.hints||[],explanation:i,isExample:e?.isExample||n?.isExample||!1,imageUrl:l,groupImageUrl:o,title:p,groupContent:u,groupNumber:g,groups:n?.groups||e?.groups};else if(t?.blanks){const a=n?.answers||{},r=t.blanks.map(e=>({...e,correctAnswer:a[e.id]||e.correctAnswer||""})),m=r[0];s={question:m?.text||"",answers:r.map(e=>e.correctAnswer||""),caseSensitive:n?.caseSensitive??!1,showHints:t?.showHints||!1,hints:t?.hints||[],explanation:i,isExample:e?.isExample||n?.isExample||!1,blanks:r,imageUrl:l,groupImageUrl:o,title:p,groupContent:u,groupNumber:g,groups:n?.groups||e?.groups}}return s},getExtraProps:e=>({validationRef:e.validationRef,onUnsavedChangesChange:e.onUnsavedChangesChange,groups:e.groups,questionIndexInPart:e.questionIndexInPart,partId:e.partId}),wrapOnSave:(e,s)=>({type:s.questionType,content:s.state.content,points:e?.points||1,level:s.state.level,difficulty:s.state.difficulty,skill:s.state.skill,answer:e}),wrapOnChange:(e,s)=>({type:s.questionType,content:s.state.content,points:e?.points||1,level:s.state.level,difficulty:s.state.difficulty,skill:s.state.skill,answer:e})};
+import { FillInBlankCreator } from './FillInBlankCreator';
+export const fillInBlankRegistration = {
+    component: FillInBlankCreator,
+    transformInitialData: (initialData) => {
+        let creatorData = null;
+        const content = initialData?.content;
+        const answer = initialData?.answer;
+        const explanation = initialData?.explanation || answer?.explanation || '';
+        // Extract group-level shared data from questionGroup.payload (API format)
+        const questionGroup = initialData?.questionGroup || {};
+        const groupPayload = questionGroup?.payload || {};
+        // Group card image — only from the group payload
+        const groupImageUrl = groupPayload?.imageUrl || '';
+        // Per-question image — lives in content.imageUrl. Legacy data wrongly stored it in
+        // questionGroup.payload, so fall back to it: the creator loads it into the question
+        // image field and the next save migrates it to content.imageUrl.
+        const questionImageUrl = content?.imageUrl || answer?.imageUrl || groupImageUrl;
+        const groupTitle = groupPayload?.title || answer?.title || '';
+        const groupContent = groupPayload?.content || groupPayload?.passage || answer?.groupContent || '';
+        const groupNumber = questionGroup?.groupNumber || answer?.groupNumber || 1;
+        // NEW FORMAT: question with {0}, {1}, {2}... placeholders and answers array
+        if (answer?.question && Array.isArray(answer?.answers)) {
+            creatorData = {
+                question: answer.question,
+                answers: answer.answers,
+                caseSensitive: answer?.caseSensitive ?? false,
+                imageUrl: questionImageUrl,
+                groupImageUrl,
+                showHints: answer?.showHints || false,
+                hints: answer?.hints || [],
+                explanation,
+                isExample: initialData?.isExample || answer?.isExample || false,
+                points: answer?.points || 1,
+                title: groupTitle,
+                groupContent,
+                groupNumber,
+                groups: answer?.groups || initialData?.groups,
+            };
+        }
+        else if (content?.question && Array.isArray(answer?.answers)) {
+            creatorData = {
+                question: content.question,
+                answers: answer.answers,
+                caseSensitive: answer?.caseSensitive ?? false,
+                imageUrl: questionImageUrl,
+                groupImageUrl,
+                showHints: content?.showHints || false,
+                hints: content?.hints || [],
+                explanation,
+                isExample: initialData?.isExample || answer?.isExample || false,
+                points: answer?.points || content?.points || 1,
+                title: groupTitle,
+                groupContent,
+                groupNumber,
+                groups: answer?.groups || initialData?.groups,
+            };
+        }
+        // LEGACY: Pre-transformed format with blanks array
+        else if (answer?.blanks && Array.isArray(answer.blanks)) {
+            const firstBlank = answer.blanks[0];
+            creatorData = {
+                question: firstBlank?.text || '',
+                answers: answer.blanks.map((b) => b.correctAnswer || ''),
+                caseSensitive: answer?.caseSensitive ?? false,
+                showHints: answer?.showHints || false,
+                hints: answer?.hints || [],
+                explanation,
+                isExample: initialData?.isExample || answer?.isExample || false,
+                blanks: answer.blanks,
+                imageUrl: questionImageUrl,
+                groupImageUrl,
+                title: groupTitle,
+                groupContent,
+                groupNumber,
+                groups: answer?.groups || initialData?.groups,
+            };
+        }
+        else if (content && content.text !== undefined && !content.blanks) {
+            // LEGACY Format 1: Single blank
+            creatorData = {
+                question: content.text || '',
+                answers: [answer?.correctAnswer || ''],
+                caseSensitive: answer?.caseSensitive ?? false,
+                showHints: content?.showHints || false,
+                hints: content?.hints || [],
+                explanation,
+                isExample: initialData?.isExample || answer?.isExample || false,
+                imageUrl: questionImageUrl,
+                groupImageUrl,
+                title: groupTitle,
+                groupContent,
+                groupNumber,
+                groups: answer?.groups || initialData?.groups,
+            };
+        }
+        else if (content?.blanks) {
+            // LEGACY Format 2: Multiple blanks
+            const answersMap = answer?.answers || {};
+            const mergedBlanks = content.blanks.map((blank) => ({
+                ...blank,
+                correctAnswer: answersMap[blank.id] || blank.correctAnswer || '',
+            }));
+            const firstBlank = mergedBlanks[0];
+            creatorData = {
+                question: firstBlank?.text || '',
+                answers: mergedBlanks.map((b) => b.correctAnswer || ''),
+                caseSensitive: answer?.caseSensitive ?? false,
+                showHints: content?.showHints || false,
+                hints: content?.hints || [],
+                explanation,
+                isExample: initialData?.isExample || answer?.isExample || false,
+                blanks: mergedBlanks,
+                imageUrl: questionImageUrl,
+                groupImageUrl,
+                title: groupTitle,
+                groupContent,
+                groupNumber,
+                groups: answer?.groups || initialData?.groups,
+            };
+        }
+        return creatorData;
+    },
+    getExtraProps: (ctx) => ({
+        validationRef: ctx.validationRef,
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        groups: ctx.groups,
+        questionIndexInPart: ctx.questionIndexInPart,
+        partId: ctx.partId,
+    }),
+    wrapOnSave: (data, ctx) => ({
+        type: ctx.questionType,
+        content: ctx.state.content,
+        points: data?.points || 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: data,
+    }),
+    wrapOnChange: (data, ctx) => ({
+        type: ctx.questionType,
+        content: ctx.state.content,
+        points: data?.points || 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: data,
+    }),
+};

package/dist/components/questions/types/fill-in-blank/transform.js

@@ -1 +1,88 @@
-function e(e){const t=function(e){if(!e)return[];const t=/\{(\d+)\}/g,n=[];let r;for(;null!==(r=t.exec(e));){const e=parseInt(r[1],10);n.includes(e)||n.push(e)}return n.sort((e,t)=>e-t)}(e);return t.length>0?Math.max(...t):-1}export const transformFillInBlank=t=>{const n=t.answer,r=!!(n?.title||n?.subtitle||n?.groupContent||n?.groupImageUrl)?{title:n.title||"",subtitle:n.subtitle||"",content:n.groupContent||"",imageUrl:n.groupImageUrl||""}:void 0,s=n?.groupNumber||1;if(n?.question&&Array.isArray(n?.answers)){const t=e(n.question||""),i=t>=0?t+1:1,a=n.answers.length>i?n.answers.slice(0,i):n.answers,o={question:n.question,showHints:n.showHints||!1,hints:n.showHints&&n.hints||[]};return n.imageUrl&&(o.imageUrl=n.imageUrl),{apiContent:o,apiCorrectAnswer:{answers:a,caseSensitive:n.caseSensitive||!1},isExample:n.isExample||!1,basicGroupData:r,groupNumber:s}}if(!n?.blanks||0===n.blanks.length)return{apiContent:{},apiCorrectAnswer:{}};const i=(n.blanks||[]).map(e=>({id:e.id,text:e.text})),a=(n.blanks||[]).reduce((e,t)=>(t.id&&t.correctAnswer&&(e[t.id]=t.correctAnswer),e),{}),o={blanks:i};return n.imageUrl&&(o.imageUrl=n.imageUrl),{apiContent:o,apiCorrectAnswer:{answers:a,caseSensitive:n.caseSensitive||!1},basicGroupData:r,groupNumber:s}};
+function extractPlaceholderIndices(question) {
+    if (!question)
+        return [];
+    const regex = /\{(\d+)\}/g;
+    const indices = [];
+    let match;
+    while ((match = regex.exec(question)) !== null) {
+        const index = parseInt(match[1], 10);
+        if (!indices.includes(index)) {
+            indices.push(index);
+        }
+    }
+    return indices.sort((a, b) => a - b);
+}
+function getMaxPlaceholderIndex(question) {
+    const indices = extractPlaceholderIndices(question);
+    return indices.length > 0 ? Math.max(...indices) : -1;
+}
+export const transformFillInBlank = (question) => {
+    const answerData = question.answer;
+    // Helper: build basicGroupData if any group field is present.
+    // NOTE: only `groupImageUrl` belongs to the group card — the per-question `imageUrl`
+    // goes into content (same split as CHOOSE_THE_CORRECT_ANSWER).
+    const hasGroupData = !!(answerData?.title || answerData?.subtitle || answerData?.groupContent || answerData?.groupImageUrl);
+    const basicGroupData = hasGroupData
+        ? {
+            title: answerData.title || '',
+            subtitle: answerData.subtitle || '',
+            content: answerData.groupContent || '',
+            imageUrl: answerData.groupImageUrl || '',
+        }
+        : undefined;
+    const groupNumber = answerData?.groupNumber || 1;
+    // NEW FORMAT: question with {0}, {1}, {2}... placeholders and answers array
+    if (answerData?.question && Array.isArray(answerData?.answers)) {
+        const maxIndex = getMaxPlaceholderIndex(answerData.question || '');
+        const requiredLength = maxIndex >= 0 ? maxIndex + 1 : 1;
+        const validAnswers = answerData.answers.length > requiredLength
+            ? answerData.answers.slice(0, requiredLength)
+            : answerData.answers;
+        const apiContent = {
+            question: answerData.question,
+            showHints: answerData.showHints || false,
+            hints: answerData.showHints ? (answerData.hints || []) : [],
+        };
+        // Per-question image goes into content (group image is emitted via groupImageUrl)
+        if (answerData.imageUrl) {
+            apiContent.imageUrl = answerData.imageUrl;
+        }
+        return {
+            apiContent,
+            apiCorrectAnswer: {
+                answers: validAnswers,
+                caseSensitive: answerData.caseSensitive || false,
+            },
+            isExample: answerData.isExample || false,
+            basicGroupData,
+            groupNumber,
+        };
+    }
+    // LEGACY FORMAT: blanks array
+    if (!answerData?.blanks || answerData.blanks.length === 0) {
+        return { apiContent: {}, apiCorrectAnswer: {} };
+    }
+    const blanks = (answerData.blanks || []).map((blank) => ({
+        id: blank.id,
+        text: blank.text,
+    }));
+    const answers = (answerData.blanks || []).reduce((acc, blank) => {
+        if (blank.id && blank.correctAnswer) {
+            acc[blank.id] = blank.correctAnswer;
+        }
+        return acc;
+    }, {});
+    const legacyContent = { blanks };
+    if (answerData.imageUrl) {
+        legacyContent.imageUrl = answerData.imageUrl;
+    }
+    return {
+        apiContent: legacyContent,
+        apiCorrectAnswer: {
+            answers,
+            caseSensitive: answerData.caseSensitive || false,
+        },
+        basicGroupData,
+        groupNumber,
+    };
+};

package/dist/components/questions/types/fill-missing-words-in-grid/FillMissingWordsInGridClient.js

@@ -1 +1,117 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t,useCallback as a}from"react";import{Button as s}from"../../../../components/ui/button";import{Input as l}from"../../../../components/ui/input";import{Check as n,X as i,Grid3X3 as d,Trophy as o,AlertCircle as c,Lightbulb as m}from"lucide-react";import{toast as g}from"sonner";import{cn as h}from"../../../../shared/lib/utils";function x({questionData:x,onSubmit:b,isReviewMode:f=!1,userAnswer:u={},explanation:p}){const{content:N,answer:y}=x,{grid:w,rows:v,columns:j,disabledCells:$=[]}=N,{answers:C={},caseSensitive:L=!1}=y,[k,M]=t(u),A=Object.keys(C),G=a((e,r)=>{const t=`${e+1}-${r+1}`;return A.includes(t)},[A]),W=a((e,r)=>{const t=`${e+1}-${r+1}`;return $.includes(t)},[$]),F=a((e,r,t)=>{const a=`${e+1}-${r+1}`;M(e=>({...e,[a]:t}))},[]),I=a((e,r)=>{const t=`${e+1}-${r+1}`,a=k[t],s=C[t];return a&&""!==a.trim()&&s?L?a.trim()===s.trim():a.trim().toLowerCase()===s.trim().toLowerCase():null},[k,C,L]),O=a(()=>{const e=A.every(e=>{const r=k[e];return r&&""!==r.trim()});e?b?.(k):g.error("Vui lòng điền tất cả các ô còn thiếu!")},[A,k,b]),S=a(()=>{let e=0;const r=A.length;return A.forEach(r=>{const t=k[r],a=C[r];if(t&&a){(L?t.trim()===a.trim():t.trim().toLowerCase()===a.trim().toLowerCase())&&e++}}),{correct:e,total:r}},[A,k,C,L]),T=f?S():null,q=T?Math.round(T.correct/T.total*100):0;return 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-4",children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-teal-500 to-cyan-600 text-white shadow-sm",children:e(d,{className:"h-5 w-5"})}),r("div",{children:[e("h3",{className:"text-base font-semibold text-gray-900",children:"Điền từ còn thiếu vào bảng"}),e("p",{className:"text-xs text-gray-500",children:"Điền các từ còn thiếu vào các ô được đánh dấu màu xanh"})]})]}),f&&T&&r("div",{className:h("flex items-center gap-3 rounded-xl px-4 py-2",q>=80?"bg-green-50 border border-green-200":q>=50?"bg-yellow-50 border border-yellow-200":"bg-red-50 border border-red-200"),children:[e(o,{className:h("h-5 w-5",q>=80?"text-green-500":q>=50?"text-yellow-500":"text-red-500")}),r("div",{className:"text-right",children:[r("div",{className:h("text-lg font-bold",q>=80?"text-green-600":q>=50?"text-yellow-600":"text-red-600"),children:[T.correct,"/",T.total]}),r("div",{className:"text-xs text-gray-500",children:[q,"% chính xác"]})]})]})]}),r("div",{className:"p-5 space-y-5",children:[e("div",{className:"overflow-x-auto rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100 p-4",children:r("div",{className:"inline-block min-w-full",children:[r("div",{className:"grid gap-1.5 mb-2",style:{gridTemplateColumns:`48px repeat(${j}, minmax(80px, 1fr))`},children:[e("div",{className:"h-8"}),Array.from({length:j},(r,t)=>e("div",{className:"flex h-8 items-center justify-center rounded-lg bg-gradient-to-br from-gray-100 to-gray-200 text-xs font-bold text-gray-600 shadow-sm",children:t+1},`col-header-${t}`))]}),e("div",{className:"grid gap-1.5",children:Array.from({length:v},(t,a)=>r("div",{className:"grid gap-1.5",style:{gridTemplateColumns:`48px repeat(${j}, minmax(80px, 1fr))`},children:[e("div",{className:"flex h-14 items-center justify-center rounded-lg bg-gradient-to-br from-gray-100 to-gray-200 text-xs font-bold text-gray-600 shadow-sm",children:a+1}),Array.from({length:j},(t,s)=>{const d=G(a,s),o=W(a,s),c=w[a]?.[s]||"",m=k[`${a+1}-${s+1}`]||"",g=f?I(a,s):null;return e("div",{className:h("relative flex h-14 items-center justify-center rounded-lg border-2 transition-all",o&&"border-gray-300 bg-gray-200",d&&!f&&"border-teal-400 bg-gradient-to-br from-teal-50 to-cyan-50 shadow-sm",d&&f&&!0===g&&"border-green-400 bg-gradient-to-br from-green-50 to-emerald-50",d&&f&&!1===g&&"border-red-400 bg-gradient-to-br from-red-50 to-rose-50",d&&f&&null===g&&"border-yellow-400 bg-gradient-to-br from-yellow-50 to-amber-50",!d&&!o&&"border-gray-200 bg-white"),children:o?e("span",{className:"text-lg font-semibold text-gray-400"}):d?r("div",{className:"relative w-full h-full flex items-center justify-center px-1",children:[e(l,{value:m,onChange:e=>F(a,s,e.target.value),disabled:f,className:h("h-10 w-full text-center text-base font-semibold border-0 bg-transparent rounded-md","focus:ring-2 focus:ring-offset-0",!f&&"focus:ring-teal-400",f&&!0===g&&"text-green-700",f&&!1===g&&"text-red-700",f&&null===g&&"text-yellow-700"),maxLength:20,placeholder:"?"}),f&&null!==g&&e("div",{className:h("absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full shadow-sm",!0===g?"bg-green-500":"bg-red-500"),children:e(!0===g?n:i,{className:"h-3 w-3 text-white"})})]}):e("span",{className:"text-base font-semibold text-gray-700",children:c})},`cell-${a}-${s}`)})]},`row-${a}`))})]})}),r("div",{className:"flex flex-wrap items-center gap-4 text-xs",children:[r("div",{className:"flex items-center gap-2",children:[e("div",{className:"h-4 w-4 rounded border-2 border-teal-400 bg-teal-50"}),e("span",{className:"text-gray-600",children:"Ô cần điền"})]}),r("div",{className:"flex items-center gap-2",children:[e("div",{className:"h-4 w-4 rounded border-2 border-gray-200 bg-white"}),e("span",{className:"text-gray-600",children:"Ô có sẵn"})]}),$.length>0&&r("div",{className:"flex items-center gap-2",children:[e("div",{className:"h-4 w-4 rounded border-2 border-gray-300 bg-gray-200"}),e("span",{className:"text-gray-600",children:"Ô bị vô hiệu"})]})]}),f&&r("div",{className:"rounded-xl border border-gray-200 bg-gradient-to-br from-gray-50 to-slate-50 overflow-hidden",children:[r("div",{className:"flex items-center gap-2 border-b border-gray-100 bg-white px-4 py-3",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-full bg-teal-500 text-white",children:e(n,{className:"h-3.5 w-3.5"})}),e("h4",{className:"text-sm font-semibold text-gray-800",children:"Đáp án đúng"})]}),e("div",{className:"p-4",children:e("div",{className:"grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5",children:A.map(t=>{const a=k[t]||"",s=C[t]||"",l=L?a.trim()===s.trim():a.trim().toLowerCase()===s.trim().toLowerCase();return r("div",{className:h("rounded-lg border-2 p-3 transition-all",l?"border-green-300 bg-gradient-to-br from-green-50 to-emerald-50":"border-red-300 bg-gradient-to-br from-red-50 to-rose-50"),children:[r("div",{className:"flex items-center justify-between mb-2",children:[r("span",{className:h("inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",l?"bg-green-100 text-green-700":"bg-red-100 text-red-700"),children:["Ô ",t]}),l?e(n,{className:"h-4 w-4 text-green-500"}):e(i,{className:"h-4 w-4 text-red-500"})]}),r("div",{className:"space-y-1",children:[r("div",{className:"flex items-center gap-2",children:[e("span",{className:"text-xs text-gray-500",children:"Đúng:"}),e("span",{className:h("font-semibold",l?"text-green-700":"text-gray-800"),children:s})]}),!l&&r("div",{className:"flex items-center gap-2",children:[e("span",{className:"text-xs text-gray-500",children:"Bạn:"}),e("span",{className:"font-medium text-red-600",children:a||"(trống)"})]})]})]},t)})})})]}),!f&&r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-2 text-sm text-gray-500",children:[e(c,{className:"h-4 w-4"}),r("span",{children:["Đã điền: ",Object.values(k).filter(e=>""!==e.trim()).length,"/",A.length," ô"]})]}),b&&r(s,{onClick:O,className:"bg-gradient-to-r from-teal-500 to-cyan-600 hover:from-teal-600 hover:to-cyan-700 text-white shadow-sm",children:[e(n,{className:"h-4 w-4 mr-2"}),"Nộp đáp án"]})]})]}),f&&p&&e("div",{className:"mx-5 mb-5 rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border border-blue-200",children:r("div",{className:"flex items-start gap-3",children:[e("div",{className:"flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white",children:e(m,{className:"h-3.5 w-3.5"})}),r("div",{className:"flex-1",children:[e("span",{className:"text-xs font-semibold text-blue-700 uppercase tracking-wider",children:"Giải thích"}),e("p",{className:"mt-1 text-sm text-gray-700 leading-relaxed",children:p})]})]})})]})}export function FillMissingWordsInGridClient(r){return e(x,{...r})}export const WriteMissingLettersClient=FillMissingWordsInGridClient;
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { Button } from '../../../../components/ui/button';
+import { Input } from '../../../../components/ui/input';
+import { Check, X, Grid3X3, Trophy, AlertCircle, Lightbulb } from 'lucide-react';
+import { toast } from 'sonner';
+import { cn } from '../../../../shared/lib/utils';
+function FillMissingWordsInGridClientContent({ questionData, onSubmit, isReviewMode = false, userAnswer = {}, explanation, }) {
+    const { content, answer } = questionData;
+    const { grid, rows, columns, disabledCells = [] } = content;
+    const { answers: correctAnswers = {}, caseSensitive = false } = answer;
+    // State for user answers: { "row-column": "answer" }
+    const [userAnswers, setUserAnswers] = useState(userAnswer);
+    // Get missing positions from correctAnswers
+    const missingPositions = Object.keys(correctAnswers);
+    // Check if a position is a missing cell
+    const isMissingCell = useCallback((row, col) => {
+        const position = `${row + 1}-${col + 1}`;
+        return missingPositions.includes(position);
+    }, [missingPositions]);
+    // Check if a position is a disabled cell
+    const isDisabledCell = useCallback((row, col) => {
+        const position = `${row + 1}-${col + 1}`;
+        return disabledCells.includes(position);
+    }, [disabledCells]);
+    // Handle user input for missing cells
+    const handleInputChange = useCallback((row, col, value) => {
+        const position = `${row + 1}-${col + 1}`;
+        setUserAnswers(prev => ({
+            ...prev,
+            [position]: value,
+        }));
+    }, []);
+    // Check if user answer is correct
+    const isAnswerCorrect = useCallback((row, col) => {
+        const position = `${row + 1}-${col + 1}`;
+        const userAns = userAnswers[position];
+        const correctAns = correctAnswers[position];
+        if (!userAns || userAns.trim() === '')
+            return null;
+        if (!correctAns)
+            return null;
+        if (caseSensitive) {
+            return userAns.trim() === correctAns.trim();
+        }
+        return userAns.trim().toLowerCase() === correctAns.trim().toLowerCase();
+    }, [userAnswers, correctAnswers, caseSensitive]);
+    // Handle submit
+    const handleSubmit = useCallback(() => {
+        // Check if all missing cells are filled
+        const allFilled = missingPositions.every(pos => {
+            const answer = userAnswers[pos];
+            return answer && answer.trim() !== '';
+        });
+        if (!allFilled) {
+            toast.error('Vui lòng điền tất cả các ô còn thiếu!');
+            return;
+        }
+        onSubmit?.(userAnswers);
+    }, [missingPositions, userAnswers, onSubmit]);
+    // Calculate score for review mode
+    const calculateScore = useCallback(() => {
+        let correct = 0;
+        const total = missingPositions.length;
+        missingPositions.forEach(position => {
+            const userAns = userAnswers[position];
+            const correctAns = correctAnswers[position];
+            if (userAns && correctAns) {
+                const isCorrect = caseSensitive
+                    ? userAns.trim() === correctAns.trim()
+                    : userAns.trim().toLowerCase() === correctAns.trim().toLowerCase();
+                if (isCorrect)
+                    correct++;
+            }
+        });
+        return { correct, total };
+    }, [missingPositions, userAnswers, correctAnswers, caseSensitive]);
+    const score = isReviewMode ? calculateScore() : null;
+    const scorePercentage = score ? Math.round((score.correct / score.total) * 100) : 0;
+    return (_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-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-teal-500 to-cyan-600 text-white shadow-sm", children: _jsx(Grid3X3, { className: "h-5 w-5" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-base font-semibold text-gray-900", children: "\u0110i\u1EC1n t\u1EEB c\u00F2n thi\u1EBFu v\u00E0o b\u1EA3ng" }), _jsx("p", { className: "text-xs text-gray-500", children: "\u0110i\u1EC1n c\u00E1c t\u1EEB c\u00F2n thi\u1EBFu v\u00E0o c\u00E1c \u00F4 \u0111\u01B0\u1EE3c \u0111\u00E1nh d\u1EA5u m\u00E0u xanh" })] })] }), isReviewMode && score && (_jsxs("div", { className: cn('flex items-center gap-3 rounded-xl px-4 py-2', scorePercentage >= 80 ? 'bg-green-50 border border-green-200' :
+                            scorePercentage >= 50 ? 'bg-yellow-50 border border-yellow-200' :
+                                'bg-red-50 border border-red-200'), children: [_jsx(Trophy, { className: cn('h-5 w-5', scorePercentage >= 80 ? 'text-green-500' :
+                                    scorePercentage >= 50 ? 'text-yellow-500' :
+                                        'text-red-500') }), _jsxs("div", { className: "text-right", children: [_jsxs("div", { className: cn('text-lg font-bold', scorePercentage >= 80 ? 'text-green-600' :
+                                            scorePercentage >= 50 ? 'text-yellow-600' :
+                                                'text-red-600'), children: [score.correct, "/", score.total] }), _jsxs("div", { className: "text-xs text-gray-500", children: [scorePercentage, "% ch\u00EDnh x\u00E1c"] })] })] }))] }), _jsxs("div", { className: "p-5 space-y-5", children: [_jsx("div", { className: "overflow-x-auto rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100 p-4", children: _jsxs("div", { className: "inline-block min-w-full", children: [_jsxs("div", { className: "grid gap-1.5 mb-2", style: { gridTemplateColumns: `48px repeat(${columns}, minmax(80px, 1fr))` }, children: [_jsx("div", { className: "h-8" }), Array.from({ length: columns }, (_, i) => (_jsx("div", { className: "flex h-8 items-center justify-center rounded-lg bg-gradient-to-br from-gray-100 to-gray-200 text-xs font-bold text-gray-600 shadow-sm", children: i + 1 }, `col-header-${i}`)))] }), _jsx("div", { className: "grid gap-1.5", children: Array.from({ length: rows }, (_, rowIndex) => (_jsxs("div", { className: "grid gap-1.5", style: { gridTemplateColumns: `48px repeat(${columns}, minmax(80px, 1fr))` }, children: [_jsx("div", { className: "flex h-14 items-center justify-center rounded-lg bg-gradient-to-br from-gray-100 to-gray-200 text-xs font-bold text-gray-600 shadow-sm", children: rowIndex + 1 }), Array.from({ length: columns }, (_, colIndex) => {
+                                                const isMissing = isMissingCell(rowIndex, colIndex);
+                                                const isDisabled = isDisabledCell(rowIndex, colIndex);
+                                                const cellValue = grid[rowIndex]?.[colIndex] || '';
+                                                const position = `${rowIndex + 1}-${colIndex + 1}`;
+                                                const userValue = userAnswers[position] || '';
+                                                // Determine if answer is correct in review mode
+                                                const answerStatus = isReviewMode ? isAnswerCorrect(rowIndex, colIndex) : null;
+                                                return (_jsx("div", { className: cn('relative flex h-14 items-center justify-center rounded-lg border-2 transition-all', isDisabled && 'border-gray-300 bg-gray-200', isMissing && !isReviewMode && 'border-teal-400 bg-gradient-to-br from-teal-50 to-cyan-50 shadow-sm', isMissing && isReviewMode && answerStatus === true && 'border-green-400 bg-gradient-to-br from-green-50 to-emerald-50', isMissing && isReviewMode && answerStatus === false && 'border-red-400 bg-gradient-to-br from-red-50 to-rose-50', isMissing && isReviewMode && answerStatus === null && 'border-yellow-400 bg-gradient-to-br from-yellow-50 to-amber-50', !isMissing && !isDisabled && 'border-gray-200 bg-white'), children: isDisabled ? (
+                                                    // Disabled cell - empty
+                                                    _jsx("span", { className: "text-lg font-semibold text-gray-400" })) : isMissing ? (
+                                                    // Missing cell - input field
+                                                    _jsxs("div", { className: "relative w-full h-full flex items-center justify-center px-1", children: [_jsx(Input, { value: userValue, onChange: (e) => handleInputChange(rowIndex, colIndex, e.target.value), disabled: isReviewMode, className: cn('h-10 w-full text-center text-base font-semibold border-0 bg-transparent rounded-md', 'focus:ring-2 focus:ring-offset-0', !isReviewMode && 'focus:ring-teal-400', isReviewMode && answerStatus === true && 'text-green-700', isReviewMode && answerStatus === false && 'text-red-700', isReviewMode && answerStatus === null && 'text-yellow-700'), maxLength: 20, placeholder: "?" }), isReviewMode && answerStatus !== null && (_jsx("div", { className: cn('absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full shadow-sm', answerStatus === true ? 'bg-green-500' : 'bg-red-500'), children: answerStatus === true ? (_jsx(Check, { className: "h-3 w-3 text-white" })) : (_jsx(X, { className: "h-3 w-3 text-white" })) }))] })) : (
+                                                    // Regular cell - display value
+                                                    _jsx("span", { className: "text-base font-semibold text-gray-700", children: cellValue })) }, `cell-${rowIndex}-${colIndex}`));
+                                            })] }, `row-${rowIndex}`))) })] }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-4 text-xs", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-4 w-4 rounded border-2 border-teal-400 bg-teal-50" }), _jsx("span", { className: "text-gray-600", children: "\u00D4 c\u1EA7n \u0111i\u1EC1n" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-4 w-4 rounded border-2 border-gray-200 bg-white" }), _jsx("span", { className: "text-gray-600", children: "\u00D4 c\u00F3 s\u1EB5n" })] }), disabledCells.length > 0 && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-4 w-4 rounded border-2 border-gray-300 bg-gray-200" }), _jsx("span", { className: "text-gray-600", children: "\u00D4 b\u1ECB v\u00F4 hi\u1EC7u" })] }))] }), isReviewMode && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-br from-gray-50 to-slate-50 overflow-hidden", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-gray-100 bg-white px-4 py-3", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-teal-500 text-white", children: _jsx(Check, { className: "h-3.5 w-3.5" }) }), _jsx("h4", { className: "text-sm font-semibold text-gray-800", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" })] }), _jsx("div", { className: "p-4", children: _jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5", children: missingPositions.map((position) => {
+                                        const userAns = userAnswers[position] || '';
+                                        const correctAns = correctAnswers[position] || '';
+                                        const isCorrect = caseSensitive
+                                            ? userAns.trim() === correctAns.trim()
+                                            : userAns.trim().toLowerCase() === correctAns.trim().toLowerCase();
+                                        return (_jsxs("div", { className: cn('rounded-lg border-2 p-3 transition-all', isCorrect
+                                                ? 'border-green-300 bg-gradient-to-br from-green-50 to-emerald-50'
+                                                : 'border-red-300 bg-gradient-to-br from-red-50 to-rose-50'), children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsxs("span", { className: cn('inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium', isCorrect ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'), children: ["\u00D4 ", position] }), isCorrect ? (_jsx(Check, { className: "h-4 w-4 text-green-500" })) : (_jsx(X, { className: "h-4 w-4 text-red-500" }))] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs text-gray-500", children: "\u0110\u00FAng:" }), _jsx("span", { className: cn('font-semibold', isCorrect ? 'text-green-700' : 'text-gray-800'), children: correctAns })] }), !isCorrect && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs text-gray-500", children: "B\u1EA1n:" }), _jsx("span", { className: "font-medium text-red-600", children: userAns || '(trống)' })] }))] })] }, position));
+                                    }) }) })] })), !isReviewMode && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [_jsx(AlertCircle, { className: "h-4 w-4" }), _jsxs("span", { children: ["\u0110\u00E3 \u0111i\u1EC1n: ", Object.values(userAnswers).filter(v => v.trim() !== '').length, "/", missingPositions.length, " \u00F4"] })] }), onSubmit && (_jsxs(Button, { onClick: handleSubmit, className: "bg-gradient-to-r from-teal-500 to-cyan-600 hover:from-teal-600 hover:to-cyan-700 text-white shadow-sm", children: [_jsx(Check, { className: "h-4 w-4 mr-2" }), "N\u1ED9p \u0111\u00E1p \u00E1n"] }))] }))] }), isReviewMode && explanation && (_jsx("div", { className: "mx-5 mb-5 rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border border-blue-200", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-xs font-semibold text-blue-700 uppercase tracking-wider", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-gray-700 leading-relaxed", children: explanation })] })] }) }))] }));
+}
+export function FillMissingWordsInGridClient(props) {
+    return _jsx(FillMissingWordsInGridClientContent, { ...props });
+}
+// Legacy export for backward compatibility
+export const WriteMissingLettersClient = FillMissingWordsInGridClient;