@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

package/dist/components/questions/types/word-fill-structured-form/map-wfsf-question-data.js

@@ -0,0 +1,113 @@
+import { detectWfsfBankMode, normalizeOptionsWordBank, normalizeSharedWordBank, } from './wfsf-word-bank.utils';
+function asRecord(value) {
+    return value && typeof value === 'object' && !Array.isArray(value)
+        ? value
+        : {};
+}
+function asStringAnswers(value) {
+    const record = asRecord(value);
+    const answers = {};
+    for (const [key, entry] of Object.entries(record)) {
+        if (typeof entry === 'string')
+            answers[key] = entry;
+    }
+    return answers;
+}
+function asBlankStyle(value) {
+    if (value === 'letter' ||
+        value === 'word' ||
+        value === 'phrase' ||
+        value === 'translate') {
+        return value;
+    }
+    return undefined;
+}
+export function extractWfsfBlankKeys(html) {
+    const keys = new Set();
+    const regex = /\{([\w\d]+)\}/g;
+    let match;
+    while ((match = regex.exec(html)) !== null)
+        keys.add(match[1]);
+    return Array.from(keys).sort((a, b) => {
+        const numA = parseInt(a, 10);
+        const numB = parseInt(b, 10);
+        if (!Number.isNaN(numA) && !Number.isNaN(numB))
+            return numA - numB;
+        return a.localeCompare(b);
+    });
+}
+function resolveHtmlContent(apiContent, answer) {
+    const direct = apiContent.content || answer.content || '';
+    if (typeof direct === 'string' && direct)
+        return direct;
+    const blocks = (apiContent.blocks || answer.blocks);
+    if (!blocks?.length)
+        return typeof direct === 'string' ? direct : '';
+    return blocks
+        .map((block) => {
+        const heading = block.heading ? `<h3>${block.heading}</h3>` : '';
+        return heading + (block.content || '');
+    })
+        .join('');
+}
+/**
+ * Map preview / exam / creator payloads onto WordFillStructuredFormClient data.
+ * School preview puts answers on `answer` + `correctAnswer`; creator uses `answer`.
+ */
+export function mapQuestionToWfsfData(question) {
+    const source = asRecord(question);
+    const apiContent = asRecord(source.content);
+    const answer = asRecord(source.answer);
+    const correctAnswer = asRecord(source.correctAnswer ??
+        source.correct_answer ??
+        answer.correctAnswer ??
+        answer);
+    const pointsRaw = source.total_points
+        ? parseFloat(String(source.total_points))
+        : answer.points ?? source.points ?? 1;
+    const points = Number.isFinite(Number(pointsRaw)) ? Number(pointsRaw) : 1;
+    const instruction = String(apiContent.instruction || answer.instruction || source.instruction || source.explanation || '');
+    const explanation = String(answer.explanation || '');
+    const content = resolveHtmlContent(apiContent, answer);
+    const rawWordBank = apiContent.wordBank ?? answer.wordBank;
+    const rawViewMode = apiContent.viewMode ?? answer.viewMode;
+    const mode = detectWfsfBankMode(rawViewMode, rawWordBank);
+    const blankKeys = extractWfsfBlankKeys(String(content || ''));
+    const viewMode = mode === 'FREE_TYPE' ? undefined : mode;
+    const wordBank = mode === 'WITH_WORD_BANK'
+        ? normalizeSharedWordBank(rawWordBank)
+        : mode === 'WITH_OPTIONS'
+            ? normalizeOptionsWordBank(rawWordBank, blankKeys)
+            : undefined;
+    const groupPayload = asRecord(asRecord(source.questionGroup).payload);
+    const rawImageUrls = apiContent.imageUrls || answer.imageUrls;
+    const imageUrls = Array.isArray(rawImageUrls)
+        ? rawImageUrls.filter(Boolean)
+        : (apiContent.imageUrl || answer.imageUrl ? [String(apiContent.imageUrl || answer.imageUrl)] : []);
+    const rawAudioUrls = apiContent.audioUrls || answer.audioUrls;
+    const audioUrls = Array.isArray(rawAudioUrls)
+        ? rawAudioUrls.filter(Boolean)
+        : (apiContent.audioUrl || answer.audioUrl || source.audio_url
+            ? [String(apiContent.audioUrl || answer.audioUrl || source.audio_url)]
+            : []);
+    return {
+        title: String(apiContent.title || answer.title || ''),
+        imageUrl: imageUrls[0] || String(apiContent.imageUrl || answer.imageUrl || ''),
+        imageUrls,
+        audioUrl: audioUrls[0] || String(apiContent.audioUrl || answer.audioUrl || source.audio_url || ''),
+        audioUrls,
+        content,
+        answers: asStringAnswers(correctAnswer.answers || answer.answers),
+        caseSensitive: Boolean(correctAnswer.caseSensitive ?? answer.caseSensitive ?? false),
+        blankStyle: asBlankStyle(apiContent.blankStyle ?? answer.blankStyle),
+        viewMode,
+        wordBank,
+        instruction,
+        explanation,
+        points,
+        groupTitle: String(groupPayload.title || answer.groupTitle || ''),
+        groupSubtitle: String(groupPayload.subtitle || answer.groupSubtitle || ''),
+        groupContent: String(groupPayload.content || answer.groupContent || ''),
+        groupImageUrl: String(groupPayload.imageUrl || answer.groupImageUrl || ''),
+    };
+}

package/dist/components/questions/types/word-fill-structured-form/register.js

@@ -1 +1,36 @@
-import{WordFillStructuredFormCreator as t}from"./WordFillStructuredFormCreator";import{detectWfsfBankMode as e,normalizeOptionsWordBank as n,normalizeSharedWordBank as o}from"./wfsf-word-bank.utils";export const wordFillStructuredFormRegistration={component:t,transformInitialData:t=>{const i=t?.content||{},a=t?.answer||{},r=t?.correctAnswer||a?.correctAnswer||{},s=t?.total_points?parseFloat(t.total_points):a?.points||t?.points||1,l=String(a?.instruction||t?.instruction||t?.explanation||""),p=String(a?.explanation||"");let u=i?.content||a?.content||"";const c=i?.blocks||a?.blocks;!u&&c?.length&&(u=c.map(t=>(t.heading?`<h3>${t.heading}</h3>`:"")+(t.content||"")).join(""));const g=i?.wordBank??a?.wordBank,d=e(i?.viewMode??a?.viewMode,g),w=function(t){const e=new Set,n=/\{([\w\d]+)\}/g;let o;for(;null!==(o=n.exec(t));)e.add(o[1]);return Array.from(e).sort((t,e)=>{const n=parseInt(t,10),o=parseInt(e,10);return Number.isNaN(n)||Number.isNaN(o)?t.localeCompare(e):n-o})}(String(u||""));let f=g,m="FREE_TYPE"===d?void 0:d;"WITH_WORD_BANK"===d?(f=o(g),m="WITH_WORD_BANK"):"WITH_OPTIONS"===d?(f=n(g,w),m="WITH_OPTIONS"):f=void 0;const v=t?.questionGroup?.payload;return{title:i?.title||a?.title||"",imageUrl:i?.imageUrl||a?.imageUrl||"",content:u,answers:r?.answers||a?.answers||{},caseSensitive:r?.caseSensitive??a?.caseSensitive??!1,blankStyle:i?.blankStyle??a?.blankStyle,viewMode:m,wordBank:f,instruction:l,explanation:p,points:s,groupTitle:v?.title||a?.groupTitle||"",groupSubtitle:v?.subtitle||a?.groupSubtitle||"",groupContent:v?.content||a?.groupContent||"",groupImageUrl:v?.imageUrl||a?.groupImageUrl||""}},getExtraProps:t=>({onUnsavedChangesChange:t.onUnsavedChangesChange,validationRef:t.validationRef,groupConfig:t.groupConfig,groupType:t.groupType,groups:t.groups,questionIndexInPart:t.questionIndexInPart,partId:t.partId,viewMode:t.viewMode}),wrapOnSave:(t,e)=>({type:e.questionType,content:e.state.content,points:t?.points??e.state.points??1,level:e.state.level,difficulty:e.state.difficulty,skill:e.state.skill,answer:t,explanation:t?.explanation||""}),wrapOnChange:(t,e)=>({type:e.questionType,content:e.state.content,points:t?.points??e.state.points??1,level:e.state.level,difficulty:e.state.difficulty,skill:e.state.skill,answer:t,explanation:t?.explanation||""})};
+import { WordFillStructuredFormCreator } from './WordFillStructuredFormCreator';
+import { mapQuestionToWfsfData } from './map-wfsf-question-data';
+export const wordFillStructuredFormRegistration = {
+    component: WordFillStructuredFormCreator,
+    transformInitialData: (initialData) => mapQuestionToWfsfData(initialData),
+    getExtraProps: (ctx) => ({
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+        groupConfig: ctx.groupConfig,
+        groupType: ctx.groupType,
+        groups: ctx.groups,
+        questionIndexInPart: ctx.questionIndexInPart,
+        partId: ctx.partId,
+        viewMode: ctx.viewMode,
+    }),
+    wrapOnSave: (data, ctx) => ({
+        type: ctx.questionType,
+        content: ctx.state.content,
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: data,
+        explanation: data?.explanation || '',
+    }),
+    wrapOnChange: (data, ctx) => ({
+        type: ctx.questionType,
+        content: ctx.state.content,
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: data,
+        explanation: data?.explanation || '',
+    }),
+};

package/dist/components/questions/types/word-fill-structured-form/transform.js

@@ -1 +1,77 @@
-export const transformWordFillStructuredForm=e=>{const t=e.answer;if(!t?.content||!t?.answers)return{apiContent:{},apiCorrectAnswer:{}};const r=!!(t.groupTitle||t.groupSubtitle||t.groupContent||t.groupImageUrl),n={title:t.title||"",imageUrl:t.imageUrl||"",content:t.content};"letter"!==t.blankStyle&&"word"!==t.blankStyle&&"phrase"!==t.blankStyle||(n.blankStyle=t.blankStyle),"WITH_OPTIONS"!==t.viewMode&&"WITH_WORD_BANK"!==t.viewMode||(n.viewMode=t.viewMode),Array.isArray(t.wordBank)&&(n.wordBank=t.wordBank);return{apiContent:n,apiCorrectAnswer:{answers:t.answers,caseSensitive:t.caseSensitive??!1},basicGroupData:r?{title:t.groupTitle||"",subtitle:t.groupSubtitle||"",content:t.groupContent||"",imageUrl:t.groupImageUrl||""}:void 0,groupNumber:t.groupNumber||1}};
+/**
+ * Transform WORD_FILL_STRUCTURED_FORM creator data → API format
+ *
+ * Creator (question.answer): {
+ *   title, imageUrl, content, answers, caseSensitive, points, explanation,
+ *   blankStyle?, viewMode?, wordBank?
+ * }
+ * API:
+ *   content:       { title, imageUrl, content, blankStyle?, viewMode?, wordBank? }
+ *   correctAnswer: { answers, caseSensitive }
+ */
+export const transformWordFillStructuredForm = (question) => {
+    const answerData = question.answer;
+    if (!answerData?.content || !answerData?.answers) {
+        return { apiContent: {}, apiCorrectAnswer: {} };
+    }
+    const hasGroupData = !!(answerData.groupTitle ||
+        answerData.groupSubtitle ||
+        answerData.groupContent ||
+        answerData.groupImageUrl);
+    const rawImageUrls = answerData.imageUrls;
+    const imageUrls = Array.isArray(rawImageUrls)
+        ? rawImageUrls.filter(Boolean)
+        : (answerData.imageUrl ? [answerData.imageUrl] : []);
+    const rawAudioUrls = answerData.audioUrls;
+    const audioUrls = Array.isArray(rawAudioUrls)
+        ? rawAudioUrls.filter(Boolean)
+        : (answerData.audioUrl ? [answerData.audioUrl] : []);
+    const apiContent = {
+        title: answerData.title || '',
+        imageUrl: imageUrls[0] || answerData.imageUrl || '',
+        imageUrls,
+        audioUrl: audioUrls[0] || answerData.audioUrl || '',
+        audioUrls,
+        content: answerData.content,
+    };
+    if (answerData.blankStyle) {
+        apiContent.blankStyle = answerData.blankStyle;
+    }
+    if (answerData.viewMode) {
+        apiContent.viewMode = answerData.viewMode;
+    }
+    if (Array.isArray(answerData.wordBank) && answerData.wordBank.length > 0) {
+        apiContent.wordBank = answerData.wordBank;
+    }
+    if (answerData.blankStyle === 'letter' ||
+        answerData.blankStyle === 'word' ||
+        answerData.blankStyle === 'phrase' ||
+        answerData.blankStyle === 'translate') {
+        apiContent.blankStyle = answerData.blankStyle;
+    }
+    if (answerData.viewMode === 'WITH_OPTIONS' ||
+        answerData.viewMode === 'WITH_WORD_BANK') {
+        apiContent.viewMode = answerData.viewMode;
+    }
+    if (Array.isArray(answerData.wordBank)) {
+        apiContent.wordBank = answerData.wordBank;
+    }
+    const apiCorrectAnswer = {
+        answers: answerData.answers,
+        caseSensitive: answerData.caseSensitive ?? false,
+    };
+    const basicGroupData = hasGroupData
+        ? {
+            title: answerData.groupTitle || '',
+            subtitle: answerData.groupSubtitle || '',
+            content: answerData.groupContent || '',
+            imageUrl: answerData.groupImageUrl || '',
+        }
+        : undefined;
+    return {
+        apiContent,
+        apiCorrectAnswer,
+        basicGroupData,
+        groupNumber: answerData.groupNumber || 1,
+    };
+};

package/dist/components/questions/types/word-fill-structured-form/wfsf-word-bank.utils.js

@@ -1 +1,110 @@
-export function isSharedWordEntry(r){return!!r&&"object"==typeof r&&!Array.isArray(r)&&"word"in r&&!("options"in r)}export function isOptionsWordEntry(r){return!!r&&"object"==typeof r&&!Array.isArray(r)&&Array.isArray(r.options)}export function detectWfsfBankMode(r,n){if("WITH_OPTIONS"===r)return"WITH_OPTIONS";if("WITH_WORD_BANK"===r)return"WITH_WORD_BANK";if(!Array.isArray(n)||0===n.length)return"FREE_TYPE";const t=n.find(r=>null!=r);return isOptionsWordEntry(t)?"WITH_OPTIONS":isSharedWordEntry(t)?"WITH_WORD_BANK":n.some(r=>isOptionsWordEntry(r))?"WITH_OPTIONS":"FREE_TYPE"}export function normalizeSharedWordBank(r){return Array.isArray(r)?r.filter(isSharedWordEntry).map(r=>({word:String(r.word??""),...r.isExample?{isExample:!0}:{}})):[]}export function normalizeOptionsWordBank(r,n){const t=Array.isArray(r)?r:[],o=n.length,e=[];for(let r=0;r<o;r+=1){const o=n[r],i=parseInt(o,10),a=t[Number.isNaN(i)?r:i]??t[r]??null;null!=a?isOptionsWordEntry(a)&&a.options.length>=1?e.push({options:a.options.map(r=>String(r??""))}):e.push(null):e.push(null)}return e}export function emptyOptionsBank(r){return Array.from({length:r},()=>({options:["",""]}))}export function emptySharedBank(){return[{word:""}]}export function bankPayloadForMode(r,n,t){if("WITH_WORD_BANK"===r){return{viewMode:"WITH_WORD_BANK",wordBank:n.map(r=>({word:r.word.trim(),...r.isExample?{isExample:!0}:{}})).filter(r=>r.word.length>0)}}if("WITH_OPTIONS"===r){return{viewMode:"WITH_OPTIONS",wordBank:t.map(r=>{if(null==r)return null;const n=r.options.map(r=>r.trim()).filter(Boolean);return n.length<2?null:{options:n}})}}return{viewMode:null}}
+export function isSharedWordEntry(entry) {
+    return (!!entry &&
+        typeof entry === 'object' &&
+        !Array.isArray(entry) &&
+        'word' in entry &&
+        !('options' in entry));
+}
+export function isOptionsWordEntry(entry) {
+    return (!!entry &&
+        typeof entry === 'object' &&
+        !Array.isArray(entry) &&
+        Array.isArray(entry.options));
+}
+/** Detect mode from explicit viewMode and/or wordBank shape. */
+export function detectWfsfBankMode(viewMode, wordBank) {
+    if (viewMode === 'WITH_OPTIONS')
+        return 'WITH_OPTIONS';
+    if (viewMode === 'WITH_WORD_BANK')
+        return 'WITH_WORD_BANK';
+    if (!Array.isArray(wordBank) || wordBank.length === 0)
+        return 'FREE_TYPE';
+    const firstDefined = wordBank.find((e) => e != null);
+    if (isOptionsWordEntry(firstDefined))
+        return 'WITH_OPTIONS';
+    if (isSharedWordEntry(firstDefined))
+        return 'WITH_WORD_BANK';
+    // Sparse WITH_OPTIONS: only nulls + options further down
+    if (wordBank.some((e) => isOptionsWordEntry(e)))
+        return 'WITH_OPTIONS';
+    return 'FREE_TYPE';
+}
+export function normalizeSharedWordBank(wordBank) {
+    if (!Array.isArray(wordBank))
+        return [];
+    return wordBank
+        .filter(isSharedWordEntry)
+        .map((e) => ({
+        word: String(e.word ?? ''),
+        ...(e.isExample ? { isExample: true } : {}),
+    }));
+}
+/**
+ * Align options bank length to blank count (numeric keys preferred).
+ * Non-numeric blank keys still get sequential slots by sorted order.
+ */
+export function normalizeOptionsWordBank(wordBank, blankKeys) {
+    const src = Array.isArray(wordBank) ? wordBank : [];
+    const n = blankKeys.length;
+    const out = [];
+    for (let i = 0; i < n; i += 1) {
+        const key = blankKeys[i];
+        const num = parseInt(key, 10);
+        const idx = !Number.isNaN(num) ? num : i;
+        const raw = src[idx] ?? src[i] ?? null;
+        if (raw == null) {
+            out.push(null);
+            continue;
+        }
+        if (isOptionsWordEntry(raw) && raw.options.length >= 1) {
+            out.push({
+                options: raw.options.map((o) => String(o ?? '')),
+            });
+        }
+        else {
+            out.push(null);
+        }
+    }
+    return out;
+}
+export function emptyOptionsBank(blankCount) {
+    return Array.from({ length: blankCount }, () => ({ options: ['', ''] }));
+}
+export function emptySharedBank() {
+    return [{ word: '' }];
+}
+/**
+ * Payload slice for save / onChange.
+ * FREE_TYPE sets viewMode: null so host can clear preserved bank fields.
+ */
+export function bankPayloadForMode(mode, sharedBank, optionsBank) {
+    if (mode === 'WITH_WORD_BANK') {
+        const cleaned = sharedBank
+            .map((e) => ({
+            word: e.word.trim(),
+            ...(e.isExample ? { isExample: true } : {}),
+        }))
+            .filter((e) => e.word.length > 0);
+        return {
+            viewMode: 'WITH_WORD_BANK',
+            wordBank: cleaned,
+        };
+    }
+    if (mode === 'WITH_OPTIONS') {
+        const bank = optionsBank.map((e) => {
+            if (e == null)
+                return null;
+            const options = e.options
+                .map((o) => o.trim())
+                .filter(Boolean);
+            if (options.length < 2)
+                return null;
+            return { options };
+        });
+        return {
+            viewMode: 'WITH_OPTIONS',
+            wordBank: bank,
+        };
+    }
+    return { viewMode: null };
+}

package/dist/components/questions/types/word-order-and-match-group/WordOrderAndMatchGroupClient.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { WordOrderAndMatchGroupClientProps } from '../../_shared/types/word-order-and-match-group.type';
+export declare function WordOrderAndMatchGroupClient({ questionData, isReviewMode, userAnswers, onAnswerChange, }: WordOrderAndMatchGroupClientProps): React.JSX.Element;

package/dist/components/questions/types/word-order-and-match-group/WordOrderAndMatchGroupClient.js

@@ -0,0 +1,190 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from 'react';
+import { Check, X, RotateCcw, Sparkles } from 'lucide-react';
+import { cn } from '../../../../shared/lib/utils';
+export function WordOrderAndMatchGroupClient({ questionData, isReviewMode = false, userAnswers, onAnswerChange, }) {
+    const { instruction, matchOptions = ['A', 'B', 'C', 'D', 'E', 'F'], items = [] } = questionData;
+    // Initialize interactive state for each item
+    const [itemStates, setItemStates] = useState(() => {
+        return items.map((item, idx) => {
+            const userAns = userAnswers?.[idx];
+            if (userAns?.orderedPhrase) {
+                // Try to reconstruct placed indices from orderedPhrase
+                const phraseWords = userAns.orderedPhrase.split(' ').filter(Boolean);
+                const placed = [];
+                const used = new Set();
+                phraseWords.forEach((pw) => {
+                    const foundIdx = item.scrambledWords.findIndex((sw, sIdx) => !used.has(sIdx) && sw.toLowerCase() === pw.toLowerCase());
+                    if (foundIdx !== -1) {
+                        placed.push(foundIdx);
+                        used.add(foundIdx);
+                    }
+                });
+                return {
+                    placedIndices: placed.length > 0 ? placed : [],
+                    selectedLabel: userAns.matchLabel || '',
+                };
+            }
+            if (item.isExample && item.orderedPhrase) {
+                return {
+                    placedIndices: item.scrambledWords.map((_, i) => i),
+                    selectedLabel: item.matchLabel || '',
+                };
+            }
+            return {
+                placedIndices: [],
+                selectedLabel: '',
+            };
+        });
+    });
+    // Sync state if items or userAnswers change
+    useEffect(() => {
+        if (userAnswers && userAnswers.length > 0) {
+            setItemStates((prev) => items.map((item, idx) => {
+                const userAns = userAnswers[idx];
+                if (!userAns)
+                    return prev[idx] || { placedIndices: [], selectedLabel: '' };
+                if (item.isExample) {
+                    return {
+                        placedIndices: item.scrambledWords.map((_, i) => i),
+                        selectedLabel: item.matchLabel || '',
+                    };
+                }
+                const phraseWords = (userAns.orderedPhrase || '').split(' ').filter(Boolean);
+                const placed = [];
+                const used = new Set();
+                phraseWords.forEach((pw) => {
+                    const foundIdx = item.scrambledWords.findIndex((sw, sIdx) => !used.has(sIdx) && sw.toLowerCase() === pw.toLowerCase());
+                    if (foundIdx !== -1) {
+                        placed.push(foundIdx);
+                        used.add(foundIdx);
+                    }
+                });
+                return {
+                    placedIndices: placed,
+                    selectedLabel: userAns.matchLabel || '',
+                };
+            }));
+        }
+    }, [userAnswers, items]);
+    const handleWordClick = useCallback((itemIndex, wordIndex) => {
+        if (isReviewMode || items[itemIndex]?.isExample)
+            return;
+        setItemStates((prev) => {
+            const next = [...prev];
+            const current = next[itemIndex] || { placedIndices: [], selectedLabel: '' };
+            const isPlaced = current.placedIndices.includes(wordIndex);
+            let newPlaced;
+            if (isPlaced) {
+                // Remove word from placed
+                newPlaced = current.placedIndices.filter((idx) => idx !== wordIndex);
+            }
+            else {
+                // Add word to placed
+                newPlaced = [...current.placedIndices, wordIndex];
+            }
+            const item = items[itemIndex];
+            const newPhrase = newPlaced.map((idx) => item.scrambledWords[idx]).join(' ');
+            next[itemIndex] = {
+                ...current,
+                placedIndices: newPlaced,
+            };
+            if (onAnswerChange) {
+                onAnswerChange(itemIndex, {
+                    orderedPhrase: newPhrase,
+                    matchLabel: current.selectedLabel,
+                });
+            }
+            return next;
+        });
+    }, [isReviewMode, items, onAnswerChange]);
+    const handleResetItem = useCallback((itemIndex) => {
+        if (isReviewMode || items[itemIndex]?.isExample)
+            return;
+        setItemStates((prev) => {
+            const next = [...prev];
+            const current = next[itemIndex] || { placedIndices: [], selectedLabel: '' };
+            next[itemIndex] = {
+                ...current,
+                placedIndices: [],
+            };
+            if (onAnswerChange) {
+                onAnswerChange(itemIndex, {
+                    orderedPhrase: '',
+                    matchLabel: current.selectedLabel,
+                });
+            }
+            return next;
+        });
+    }, [isReviewMode, items, onAnswerChange]);
+    const handleLabelSelect = useCallback((itemIndex, label) => {
+        if (isReviewMode || items[itemIndex]?.isExample)
+            return;
+        setItemStates((prev) => {
+            const next = [...prev];
+            const current = next[itemIndex] || { placedIndices: [], selectedLabel: '' };
+            const newLabel = current.selectedLabel === label ? '' : label;
+            next[itemIndex] = {
+                ...current,
+                selectedLabel: newLabel,
+            };
+            const item = items[itemIndex];
+            const phrase = current.placedIndices.map((idx) => item.scrambledWords[idx]).join(' ');
+            if (onAnswerChange) {
+                onAnswerChange(itemIndex, {
+                    orderedPhrase: phrase,
+                    matchLabel: newLabel,
+                });
+            }
+            return next;
+        });
+    }, [isReviewMode, items, onAnswerChange]);
+    return (_jsxs("div", { className: "w-full space-y-6", children: [_jsx("div", { className: "rounded-2xl border border-indigo-100 bg-gradient-to-r from-indigo-50/80 via-blue-50/50 to-white p-4 sm:p-5 shadow-sm", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "mt-0.5 rounded-lg bg-indigo-600 p-1.5 text-white shadow-sm", children: _jsx(Sparkles, { className: "h-4 w-4" }) }), _jsxs("div", { className: "flex-1 space-y-3", children: [_jsx("p", { className: "text-sm sm:text-base font-semibold text-gray-900 leading-relaxed", children: instruction || 'Put the useful phrases in order, then match them to parts A–F.' }), matchOptions.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-1.5 pt-1", children: [_jsx("span", { className: "text-xs font-semibold text-gray-500 mr-1", children: "Match Options:" }), matchOptions.map((opt) => (_jsx("span", { className: "inline-flex h-7 min-w-[28px] items-center justify-center rounded-lg border border-indigo-200 bg-white px-2.5 text-xs font-bold text-indigo-700 shadow-xs", children: opt }, opt)))] }))] })] }) }), _jsx("div", { className: "space-y-4", children: items.map((item, itemIdx) => {
+                    const state = itemStates[itemIdx] || { placedIndices: [], selectedLabel: '' };
+                    const userAns = userAnswers?.[itemIdx];
+                    const isExample = item.isExample === true;
+                    // For review mode check correctness
+                    const normalizeStr = (s) => s.replace(/\s+/g, ' ').trim().toLowerCase();
+                    const userPhrase = userAns?.orderedPhrase || state.placedIndices.map((i) => item.scrambledWords[i]).join(' ');
+                    const userLabel = userAns?.matchLabel || state.selectedLabel;
+                    const isPhraseCorrect = normalizeStr(userPhrase) === normalizeStr(item.orderedPhrase || '');
+                    const isLabelCorrect = (userLabel || '').trim().toUpperCase() === (item.matchLabel || '').trim().toUpperCase();
+                    const isItemAllCorrect = isPhraseCorrect && isLabelCorrect;
+                    return (_jsxs("div", { className: cn('rounded-2xl border transition-all p-4 sm:p-5 bg-white shadow-xs', isExample
+                            ? 'border-amber-200 bg-amber-50/30'
+                            : isReviewMode
+                                ? isItemAllCorrect
+                                    ? 'border-emerald-200 bg-emerald-50/20'
+                                    : 'border-rose-200 bg-rose-50/20'
+                                : 'border-gray-200 hover:border-indigo-200'), children: [_jsxs("div", { className: "mb-3 flex items-center justify-between gap-2 border-b border-gray-100 pb-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: cn('inline-flex h-6 items-center rounded-md px-2 text-xs font-bold', isExample
+                                                    ? 'bg-amber-100 text-amber-800'
+                                                    : 'bg-indigo-100 text-indigo-800'), children: isExample ? 'Ví dụ (Example)' : `Câu ${item.questionNumber || itemIdx + 1}` }), !isExample && typeof item.points === 'number' && (_jsxs("span", { className: "text-xs font-medium text-gray-500", children: ["(", item.points, " ", item.points > 1 ? 'điểm' : 'điểm', ")"] }))] }), isReviewMode && !isExample && (_jsx("div", { className: "flex items-center gap-1.5", children: isItemAllCorrect ? (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-bold text-emerald-700", children: [_jsx(Check, { className: "h-3.5 w-3.5" }), " \u0110\u00FAng"] })) : (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-rose-100 px-2.5 py-0.5 text-xs font-bold text-rose-700", children: [_jsx(X, { className: "h-3.5 w-3.5" }), " Sai"] })) }))] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-12", children: [_jsxs("div", { className: "space-y-3 lg:col-span-8 xl:col-span-9", children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider", children: "1. S\u1EAFp x\u1EBFp c\u00E1c t\u1EEB th\u00E0nh c\u00E2u ho\u00E0n ch\u1EC9nh:" }), _jsxs("div", { className: cn('min-h-[52px] rounded-xl border-2 border-dashed p-2.5 transition-colors flex flex-wrap items-center gap-1.5', state.placedIndices.length > 0
+                                                    ? 'border-indigo-300 bg-indigo-50/40'
+                                                    : 'border-gray-300 bg-gray-50/60'), children: [state.placedIndices.length === 0 ? (_jsx("span", { className: "text-xs italic text-gray-400 select-none", children: "Nh\u1EA5n v\u00E0o c\u00E1c t\u1EEB b\u00EAn d\u01B0\u1EDBi \u0111\u1EC3 gh\u00E9p c\u00E2u..." })) : (state.placedIndices.map((wordIdx, orderIdx) => {
+                                                        const word = item.scrambledWords[wordIdx];
+                                                        return (_jsxs("button", { type: "button", disabled: isReviewMode || isExample, onClick: () => handleWordClick(itemIdx, wordIdx), className: cn('group inline-flex items-center gap-1 rounded-lg px-2.5 py-1 text-xs sm:text-sm font-semibold transition-all shadow-xs', isExample
+                                                                ? 'bg-amber-100 text-amber-900 border border-amber-300 cursor-default'
+                                                                : isReviewMode
+                                                                    ? 'bg-indigo-100 text-indigo-900 border border-indigo-200 cursor-default'
+                                                                    : 'bg-indigo-600 text-white hover:bg-rose-500 active:scale-95 cursor-pointer'), children: [_jsx("span", { children: word }), !isReviewMode && !isExample && (_jsx(X, { className: "h-3 w-3 opacity-60 group-hover:opacity-100" }))] }, `placed-${wordIdx}-${orderIdx}`));
+                                                    })), state.placedIndices.length > 0 && !isReviewMode && !isExample && (_jsx("button", { type: "button", onClick: () => handleResetItem(itemIdx), className: "ml-auto inline-flex items-center gap-1 rounded-md p-1 text-xs text-gray-400 hover:bg-white hover:text-gray-700", title: "\u0110\u1EB7t l\u1EA1i", children: _jsx(RotateCcw, { className: "h-3.5 w-3.5" }) }))] }), (!isExample || !isReviewMode) && (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 pt-1", children: item.scrambledWords.map((word, wordIdx) => {
+                                                    const isPlaced = state.placedIndices.includes(wordIdx);
+                                                    return (_jsx("button", { type: "button", disabled: isReviewMode || isExample || isPlaced, onClick: () => handleWordClick(itemIdx, wordIdx), className: cn('rounded-lg border px-3 py-1 text-xs sm:text-sm font-medium transition-all', isPlaced
+                                                            ? 'border-dashed border-gray-200 bg-gray-100 text-gray-300 opacity-50 cursor-not-allowed'
+                                                            : 'border-gray-300 bg-white text-gray-800 shadow-xs hover:border-indigo-400 hover:bg-indigo-50/50 active:scale-95 cursor-pointer'), children: word }, `word-${wordIdx}`));
+                                                }) })), isReviewMode && !isExample && !isPhraseCorrect && (_jsxs("div", { className: "mt-2 rounded-lg bg-emerald-50 border border-emerald-200 p-2.5 text-xs text-emerald-800", children: [_jsx("span", { className: "font-bold", children: "C\u00E2u \u0111\u00FAng:" }), " ", item.orderedPhrase] }))] }), _jsxs("div", { className: "space-y-3 lg:col-span-4 xl:col-span-3 border-t lg:border-t-0 lg:border-l border-gray-100 pt-3 lg:pt-0 lg:pl-4", children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider", children: "2. Ch\u1ECDn nh\u00E3n n\u1ED1i:" }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: matchOptions.map((opt) => {
+                                                    const isSelected = state.selectedLabel === opt;
+                                                    const isCorrectOpt = (item.matchLabel || '').trim().toUpperCase() === opt;
+                                                    return (_jsx("button", { type: "button", disabled: isReviewMode || isExample, onClick: () => handleLabelSelect(itemIdx, opt), className: cn('h-9 w-9 sm:h-10 sm:w-10 rounded-xl font-bold text-sm transition-all flex items-center justify-center', isReviewMode
+                                                            ? isCorrectOpt
+                                                                ? 'bg-emerald-600 text-white ring-2 ring-emerald-300'
+                                                                : isSelected
+                                                                    ? 'bg-rose-500 text-white line-through'
+                                                                    : 'bg-gray-100 text-gray-400 opacity-60'
+                                                            : isSelected
+                                                                ? 'bg-indigo-600 text-white shadow-md scale-105'
+                                                                : 'border border-gray-200 bg-white text-gray-700 hover:border-indigo-300 hover:bg-indigo-50/50 cursor-pointer'), children: opt }, `opt-${opt}`));
+                                                }) }), isReviewMode && !isExample && !isLabelCorrect && (_jsxs("div", { className: "text-xs text-emerald-800", children: [_jsx("span", { className: "font-bold", children: "Nh\u00E3n \u0111\u00FAng:" }), " [", item.matchLabel, "]"] }))] })] })] }, itemIdx));
+                }) })] }));
+}

package/dist/components/questions/types/word-order-and-match-group/WordOrderAndMatchGroupCreator.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { WordOrderAndMatchGroupCreatorProps } from '../../_shared/types/word-order-and-match-group.type';
+export declare function WordOrderAndMatchGroupCreator({ initialData, onSave, onChange, externalErrors, onUnsavedChangesChange, validationRef, }: WordOrderAndMatchGroupCreatorProps): React.JSX.Element;