@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.29

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

@@ -1 +1,379 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as i,useRef as n,useEffect as r,useCallback as o,useMemo as d}from"react";import{ReactFlow as l,useNodesState as s,useEdgesState as a,ReactFlowProvider as c,useReactFlow as h}from"@xyflow/react";import"@xyflow/react/dist/style.css";import{usePresignedFileUrl as u}from"../../../../../shared/lib/hooks/usePresignedFileUrl";import g from"../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner";import f from"../../../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer";import m from"../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner";const p={coloringHintNode:function({data:t}){const{hintItem:i,isAssigned:n,highlightStyle:r,isHighlighted:o}=t,d=!!i.color,l=n?"flex h-full w-full items-center justify-center overflow-hidden rounded-xl transition-all duration-200":"flex h-full w-full items-center justify-center overflow-hidden rounded-full border-2 transition-all duration-200 cursor-move hover:shadow-lg",s=o?"transparent":d?"rgba(0,0,0,0.2)":"#9ca3af",a=!!i.label?i.label:"";return e("div",{className:l,style:{...r,backgroundColor:d?i.color:"#ffffff",borderColor:n?"transparent":s,padding:n?0:void 0},children:a&&e("span",{className:"px-2 py-5 text-[10px] font-bold uppercase tracking-wide pointer-events-none drop-shadow-md font-[family-name:var(--font-nunito)] md:text-xs",style:{color:(e=>{if(!e)return"#333";if(!e.startsWith("#"))return"#fff";const t=e.replace("#","");return(.299*parseInt(t.substr(0,2),16)+.587*parseInt(t.substr(2,2),16)+.114*parseInt(t.substr(4,2),16))/255>.5?"#000":"#fff"})(i.color),textShadow:d?"0 1px 2px rgba(0,0,0,0.3)":"none"},children:a})})},coloringRegionNode:function({data:t}){const{assignedHint:i,isHighlighted:n,isCorrect:r,isReviewMode:o}=t;return e("div",{className:"flex h-full w-full items-center justify-center rounded-xl transition-all "+(o?i?r?"border-2 border-solid border-green-500":"border-2 border-solid border-red-500":"border-2 border-solid border-blue-500":n?"border-2 border-solid border-blue-500":i?"":"border-2 border-dashed border-red-400"),style:{backgroundColor:i?.color||(n?"rgba(59,130,246,0.1)":"rgba(0,0,0,0.1)"),minWidth:"60px",minHeight:"40px"},children:i?.label&&e("span",{className:"px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide pointer-events-none drop-shadow-md font-[family-name:var(--font-nunito)] md:text-xs",style:{color:(e=>{if(!e)return"#333";const t=e.replace("#","");return(.299*parseInt(t.substr(0,2),16)+.587*parseInt(t.substr(2,2),16)+.114*parseInt(t.substr(4,2),16))/255>.5?"#000":"#fff"})(i.color)},children:i.label})})}};function x({partNumber:c,partName:x,questionCount:b,instruction:w,instructions:y,hasExample:v=!1,imageUrl:N,audioUrl:I,hintItems:M,regions:C,assignments:H,onAssignmentChange:j,isReviewMode:O=!1}){const{previewUrl:$}=u(N),[z,R]=i(!1),[k,S]=i({width:0,height:0}),[E,D]=i({width:0,height:0}),A=n(null),P=n(null),[U,W,L]=s([]),[,,Y]=a([]),[q,B]=i(null),V=n(!1),F=n(null),{getIntersectingNodes:K}=h(),Q=E.width>0&&E.width<640,T=Q?60:100,G=Q?32:40,J=Q?10:16,X=Math.max(E.width-32,T),Z=Math.max(1,Math.floor((X+J)/(T+J))),_=M.filter(e=>!Object.values(H).includes(e.id)).length,ee=20+Math.max(1,Math.ceil(_/Z))*(G+8)+(Q?20:10),te=ee+20;r(()=>{const e=()=>{P.current&&D({width:P.current.clientWidth,height:P.current.clientHeight})};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]);const ie=o(()=>{if(A.current&&E.width>0){const e=E.width-20,t=E.height-te-10,i=A.current.naturalWidth||800,n=A.current.naturalHeight||600,r=e/i,o=t/n,d=Math.min(r,o,2);S({width:i*d,height:n*d}),R(!0)}},[E,te]);r(()=>{E.width>0&&A.current?.complete&&ie()},[E,ie]);const ne=d(()=>!z||k.width<=0||E.width<=0?10:Math.max(10,(E.width-k.width)/2),[z,k.width,E.width]),re=o((e,t)=>{if("coloringHintNode"!==t.type)return;V.current=!0;const i=t.data,n=i.hintItem?.id;if(!n)return;const r=i.regionId||Object.keys(H).find(e=>H[e]===n);F.current=r||null,r&&j(r,null)},[H,j]),oe=o((e,t)=>{if("coloringHintNode"!==t.type)return;const i=K(t,!0).filter(e=>"coloringRegionNode"===e.type),n=t.position.y,r=n>=0&&n<=ee;i.length>0?B(i[0].id):B(r?"hint-area":null)},[K,ee]),de=o((e,t)=>{if("coloringHintNode"!==t.type)return;const i=t.data,n=i.hintItem?.id;if(!n)return B(null),void(V.current=!1);const r=K(t,!0).filter(e=>"coloringRegionNode"===e.type);if(B(null),r.length>0){const e=r[0],t=F.current,i=H[e.id];i&&i!==n?(j(e.id,n),t&&j(t,i)):j(e.id,n)}else{if(M.find(e=>e.id===n)){const e=F.current?Object.fromEntries(Object.entries(H).filter(([e])=>e!==F.current)):H,i=M.filter(t=>!Object.values(e).includes(t.id)||t.id===n).findIndex(e=>e.id===n),r=i%Z,o=Math.floor(i/Z),d={x:16+r*(T+J),y:20+o*(G+8)};W(e=>e.map(e=>e.id===t.id?{...e,position:d}:e))}}F.current=null,V.current=!1},[K,H,j,M,W,Z,T,J,G]),le=d(()=>M.filter(e=>!Object.values(H).includes(e.id)).map((e,t)=>{const i=t%Z,n=Math.floor(t/Z);return{id:`hint-${e.id}`,type:"coloringHintNode",position:{x:16+i*(T+J),y:20+n*(G+8)},data:{hintItem:e,isAssigned:!1},draggable:!O,style:{width:`${T}px`,height:`${G}px`}}}),[M,H,O,Z,16,T,J,20,G,8]),se=d(()=>!z||k.width<=0?[]:C.filter(e=>H[e.id]).map(e=>{const t=H[e.id],i=M.find(e=>e.id===t);if(!i)return null;const n=ne+e.x/100*k.width,r=te+e.y/100*k.height,o=Math.max(e.width/100*k.width,60),d=Math.max(e.height/100*k.height,40);return{id:`hint-in-region-${e.id}`,type:"coloringHintNode",position:{x:n,y:r},data:{hintItem:i,isAssigned:!0,regionId:e.id},draggable:!O,style:{width:`${o}px`,height:`${d}px`}}}).filter(e=>null!==e),[z,k,ne,C,H,M,O,te]),ae=d(()=>!z||k.width<=0?[]:C.map(e=>{const t=H[e.id],i=t?M.find(e=>e.id===t):void 0,n=O&&t===e.correctHintId;return{id:e.id,type:"coloringRegionNode",position:{x:ne+e.x/100*k.width,y:te+e.y/100*k.height},data:{region:e,assignedHint:i,isHighlighted:q===e.id,isCorrect:n,isReviewMode:O},draggable:!1,style:{width:`${Math.max(e.width/100*k.width,60)}px`,height:`${Math.max(e.height/100*k.height,40)}px`,pointerEvents:i?"none":"auto"},zIndex:0}}),[z,k,ne,C,H,M,q,O,te]);return r(()=>{if(V.current)return;const e=[...ae,...le,...se];W(e)},[ae,le,se,W]),t("div",{className:"flex h-full w-full flex-col gap-3",children:[e(m,{partNumber:c,questionCount:b,partName:x,isReviewMode:O}),e("div",{className:"shrink-0",children:e(g,{instruction:w,instructions:y,hasExample:v,isReviewMode:O,children:I&&e("div",{className:"shrink-0",children:e(f,{audioSrc:I,compact:!0})})})}),t("div",{ref:P,className:"relative flex-1 overflow-x-auto overflow-y-hidden rounded-xl bg-gray-100",style:{minHeight:"1000px"},children:[e("div",{className:"pointer-events-none absolute left-0 right-0 z-20 flex items-center justify-center sm:justify-end sm:pr-4",style:{top:Q?ee-40+"px":"20px",height:"40px"},children:e("span",{className:"rounded-full bg-white/80 px-3 py-1 text-xs font-medium text-gray-500 shadow-sm",children:"Kéo màu vào vị trí tương ứng"})}),e("div",{className:"pointer-events-none absolute",style:{left:`${ne}px`,top:`${te}px`,width:k.width?`${k.width}px`:"auto",height:k.height?`${k.height}px`:"auto",zIndex:0},children:e("img",{ref:A,src:$||N,alt:"Question illustration",className:"h-full w-full rounded-lg object-contain shadow-md",onLoad:ie,onError:()=>R(!1)})}),e("div",{className:"absolute inset-0 z-10",children:e(l,{nodes:U,edges:[],onNodesChange:L,onNodeDragStart:re,onNodeDrag:oe,onNodeDragStop:de,onEdgesChange:Y,nodeTypes:p,defaultViewport:{x:0,y:0,zoom:1},fitView:!1,nodesDraggable:!O,nodesConnectable:!1,elementsSelectable:!1,panOnDrag:!1,panOnScroll:!1,zoomOnScroll:!1,zoomOnDoubleClick:!1,zoomOnPinch:!1,preventScrolling:!0,autoPanOnNodeDrag:!1,autoPanOnConnect:!1,proOptions:{hideAttribution:!0}})})]})]})}export function MoversColoringRenderer(t){return e(c,{children:e(x,{...t})})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { ReactFlow, useNodesState, useEdgesState, ReactFlowProvider, useReactFlow, } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { usePresignedFileUrl } from '../../../../../shared/lib/hooks/usePresignedFileUrl';
+import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+import CambridgeYleAudioPlayer from '../../../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer';
+import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+/** Hint node - draggable color/text item */
+function ColoringHintNode({ data }) {
+    const { hintItem, isAssigned, highlightStyle, isHighlighted } = data;
+    const hasColor = !!hintItem.color;
+    const hasLabel = !!hintItem.label;
+    // Determine text color based on background luminance
+    const getTextColor = (bgColor) => {
+        if (!bgColor)
+            return '#333';
+        // Handle named colors by using a fallback
+        if (!bgColor.startsWith('#'))
+            return '#fff';
+        const hex = bgColor.replace('#', '');
+        const r = parseInt(hex.substr(0, 2), 16);
+        const g = parseInt(hex.substr(2, 2), 16);
+        const b = parseInt(hex.substr(4, 2), 16);
+        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+        return luminance > 0.5 ? '#000' : '#fff';
+    };
+    const baseClass = isAssigned
+        ? 'flex h-full w-full items-center justify-center overflow-hidden rounded-xl transition-all duration-200'
+        : 'flex h-full w-full items-center justify-center overflow-hidden rounded-full border-2 transition-all duration-200 cursor-move hover:shadow-lg';
+    const borderColor = isHighlighted ? 'transparent' : hasColor ? 'rgba(0,0,0,0.2)' : '#9ca3af';
+    // Only display label if explicitly provided (don't show hex codes)
+    const displayLabel = hasLabel ? hintItem.label : '';
+    return (_jsx("div", { className: baseClass, style: {
+            ...highlightStyle,
+            backgroundColor: hasColor ? hintItem.color : '#ffffff',
+            borderColor: isAssigned ? 'transparent' : borderColor,
+            padding: isAssigned ? 0 : undefined,
+        }, children: displayLabel && (_jsx("span", { className: "px-2 py-5 text-[10px] font-bold uppercase tracking-wide pointer-events-none drop-shadow-md font-[family-name:var(--font-nunito)] md:text-xs", style: {
+                color: getTextColor(hintItem.color),
+                textShadow: hasColor ? '0 1px 2px rgba(0,0,0,0.3)' : 'none',
+            }, children: displayLabel })) }));
+}
+/** Region node - drop zone on image */
+function ColoringRegionNode({ data }) {
+    const { assignedHint, isHighlighted, isCorrect, isReviewMode } = data;
+    // Determine border color in review mode
+    const getBorderStyle = () => {
+        if (isReviewMode) {
+            if (assignedHint) {
+                // Has answer: green if correct, red if wrong
+                return isCorrect
+                    ? 'border-2 border-solid border-green-500'
+                    : 'border-2 border-solid border-red-500';
+            }
+            else {
+                // No answer: blue border
+                return 'border-2 border-solid border-blue-500';
+            }
+        }
+        if (isHighlighted) {
+            return 'border-2 border-solid border-blue-500';
+        }
+        if (!assignedHint) {
+            return 'border-2 border-dashed border-red-400';
+        }
+        return '';
+    };
+    const getTextColor = (bgColor) => {
+        if (!bgColor)
+            return '#333';
+        const hex = bgColor.replace('#', '');
+        const r = parseInt(hex.substr(0, 2), 16);
+        const g = parseInt(hex.substr(2, 2), 16);
+        const b = parseInt(hex.substr(4, 2), 16);
+        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+        return luminance > 0.5 ? '#000' : '#fff';
+    };
+    return (_jsx("div", { className: `flex h-full w-full items-center justify-center rounded-xl transition-all ${getBorderStyle()}`, style: {
+            backgroundColor: assignedHint?.color || (isHighlighted ? 'rgba(59,130,246,0.1)' : 'rgba(0,0,0,0.1)'),
+            minWidth: '60px',
+            minHeight: '40px',
+        }, children: assignedHint?.label && (_jsx("span", { className: "px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide pointer-events-none drop-shadow-md font-[family-name:var(--font-nunito)] md:text-xs", style: { color: getTextColor(assignedHint.color) }, children: assignedHint.label })) }));
+}
+const nodeTypes = {
+    coloringHintNode: ColoringHintNode,
+    coloringRegionNode: ColoringRegionNode,
+};
+function MoversColoringRendererContent({ partNumber, partName, questionCount, instruction, instructions, hasExample = false, imageUrl, audioUrl, hintItems, regions, assignments, onAssignmentChange, isReviewMode = false, }) {
+    // Resolve S3 key to presigned URL
+    const { previewUrl: resolvedImageUrl } = usePresignedFileUrl(imageUrl);
+    // Image state
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const [imageDimensions, setImageDimensions] = useState({ width: 0, height: 0 });
+    const [flowDimensions, setFlowDimensions] = useState({ width: 0, height: 0 });
+    // Refs
+    const imageRef = useRef(null);
+    const flowRef = useRef(null);
+    // React Flow state
+    const [nodes, setNodes, onNodesChange] = useNodesState([]);
+    const [, , onEdgesChange] = useEdgesState([]);
+    // Drag state
+    const [highlightedRegionId, setHighlightedRegionId] = useState(null);
+    const isDraggingNodeRef = useRef(false);
+    const draggedNodeOldRegionRef = useRef(null);
+    const { getIntersectingNodes } = useReactFlow();
+    // Layout constants - responsive sizing
+    const isMobile = flowDimensions.width > 0 && flowDimensions.width < 640;
+    const hintItemWidth = isMobile ? 60 : 100;
+    const hintItemHeight = isMobile ? 32 : 40;
+    const hintItemGap = isMobile ? 10 : 16;
+    const hintStartX = 16;
+    const hintRowGap = 8;
+    const hintStartY = 20;
+    // Calculate rows needed for hint wrapping
+    const availableWidth = Math.max(flowDimensions.width - hintStartX * 2, hintItemWidth);
+    const itemsPerRow = Math.max(1, Math.floor((availableWidth + hintItemGap) / (hintItemWidth + hintItemGap)));
+    const unassignedHintCount = hintItems.filter((hint) => !Object.values(assignments).includes(hint.id)).length;
+    const hintRowCount = Math.max(1, Math.ceil(unassignedHintCount / itemsPerRow));
+    // Dynamic hint area height based on rows
+    const HINT_AREA_HEIGHT = hintStartY + hintRowCount * (hintItemHeight + hintRowGap) + (isMobile ? 20 : 10);
+    const IMAGE_START_Y = HINT_AREA_HEIGHT + 20;
+    // Track flow container dimensions
+    useEffect(() => {
+        const updateFlowDimensions = () => {
+            if (flowRef.current) {
+                setFlowDimensions({
+                    width: flowRef.current.clientWidth,
+                    height: flowRef.current.clientHeight,
+                });
+            }
+        };
+        updateFlowDimensions();
+        window.addEventListener('resize', updateFlowDimensions);
+        return () => window.removeEventListener('resize', updateFlowDimensions);
+    }, []);
+    // Handle image load
+    const handleImageLoad = useCallback(() => {
+        if (imageRef.current && flowDimensions.width > 0) {
+            // Minimal padding for maximum image display
+            const flowWidth = flowDimensions.width - 20; // 10px padding on each side
+            const flowHeight = flowDimensions.height - IMAGE_START_Y - 10; // 10px bottom margin
+            const naturalWidth = imageRef.current.naturalWidth || 800;
+            const naturalHeight = imageRef.current.naturalHeight || 600;
+            const widthRatio = flowWidth / naturalWidth;
+            const heightRatio = flowHeight / naturalHeight;
+            // Allow scaling up to 2x for much larger visibility
+            const scale = Math.min(widthRatio, heightRatio, 2);
+            setImageDimensions({
+                width: naturalWidth * scale,
+                height: naturalHeight * scale,
+            });
+            setImageLoaded(true);
+        }
+    }, [flowDimensions, IMAGE_START_Y]);
+    // Re-calculate image when flow dimensions change
+    useEffect(() => {
+        if (flowDimensions.width > 0 && imageRef.current?.complete) {
+            handleImageLoad();
+        }
+    }, [flowDimensions, handleImageLoad]);
+    // Calculate image position (centered with minimal padding)
+    const imageStartX = useMemo(() => {
+        if (!imageLoaded || imageDimensions.width <= 0 || flowDimensions.width <= 0)
+            return 10;
+        return Math.max(10, (flowDimensions.width - imageDimensions.width) / 2);
+    }, [imageLoaded, imageDimensions.width, flowDimensions.width]);
+    // =============================================================================
+    // Drag & Drop Handlers
+    // =============================================================================
+    const onNodeDragStart = useCallback((_, node) => {
+        if (node.type !== 'coloringHintNode')
+            return;
+        isDraggingNodeRef.current = true;
+        const nodeData = node.data;
+        const hintId = nodeData.hintItem?.id;
+        if (!hintId)
+            return;
+        // Find if this hint was assigned to a region
+        const regionId = nodeData.regionId ||
+            Object.keys(assignments).find((id) => assignments[id] === hintId);
+        draggedNodeOldRegionRef.current = regionId || null;
+        // Remove from old region
+        if (regionId) {
+            onAssignmentChange(regionId, null);
+        }
+    }, [assignments, onAssignmentChange]);
+    const onNodeDrag = useCallback((_, node) => {
+        if (node.type !== 'coloringHintNode')
+            return;
+        const intersectingNodes = getIntersectingNodes(node, true);
+        const intersectingRegions = intersectingNodes.filter((n) => n.type === 'coloringRegionNode');
+        // Check if in hint area
+        const nodeY = node.position.y;
+        const isInHintArea = nodeY >= 0 && nodeY <= HINT_AREA_HEIGHT;
+        if (intersectingRegions.length > 0) {
+            setHighlightedRegionId(intersectingRegions[0].id);
+        }
+        else if (isInHintArea) {
+            setHighlightedRegionId('hint-area');
+        }
+        else {
+            setHighlightedRegionId(null);
+        }
+    }, [getIntersectingNodes, HINT_AREA_HEIGHT]);
+    const onNodeDragStop = useCallback((_, node) => {
+        if (node.type !== 'coloringHintNode')
+            return;
+        const nodeData = node.data;
+        const hintId = nodeData.hintItem?.id;
+        if (!hintId) {
+            setHighlightedRegionId(null);
+            isDraggingNodeRef.current = false;
+            return;
+        }
+        const intersectingNodes = getIntersectingNodes(node, true);
+        const intersectingRegions = intersectingNodes.filter((n) => n.type === 'coloringRegionNode');
+        setHighlightedRegionId(null);
+        if (intersectingRegions.length > 0) {
+            const targetRegion = intersectingRegions[0];
+            const oldRegionId = draggedNodeOldRegionRef.current;
+            const existingHintInTarget = assignments[targetRegion.id];
+            if (existingHintInTarget && existingHintInTarget !== hintId) {
+                // Swap: assign dragged hint to target, old hint to old region (if exists)
+                onAssignmentChange(targetRegion.id, hintId);
+                if (oldRegionId) {
+                    onAssignmentChange(oldRegionId, existingHintInTarget);
+                }
+            }
+            else {
+                // Simple assignment
+                onAssignmentChange(targetRegion.id, hintId);
+            }
+        }
+        else {
+            // Dropped outside any region - return to original position in hint area
+            const hintItem = hintItems.find((h) => h.id === hintId);
+            if (hintItem) {
+                // Calculate original position based on unassigned hints order
+                const currentAssignments = draggedNodeOldRegionRef.current
+                    ? Object.fromEntries(Object.entries(assignments).filter(([id]) => id !== draggedNodeOldRegionRef.current))
+                    : assignments;
+                const unassignedHints = hintItems.filter((h) => !Object.values(currentAssignments).includes(h.id) || h.id === hintId);
+                const hintIndex = unassignedHints.findIndex((h) => h.id === hintId);
+                // Calculate position with row wrapping
+                const col = hintIndex % itemsPerRow;
+                const row = Math.floor(hintIndex / itemsPerRow);
+                const originalPosition = {
+                    x: hintStartX + col * (hintItemWidth + hintItemGap),
+                    y: hintStartY + row * (hintItemHeight + hintRowGap),
+                };
+                // Reset node position
+                setNodes((prevNodes) => prevNodes.map((n) => n.id === node.id ? { ...n, position: originalPosition } : n));
+            }
+        }
+        draggedNodeOldRegionRef.current = null;
+        isDraggingNodeRef.current = false;
+    }, [getIntersectingNodes, assignments, onAssignmentChange, hintItems, setNodes, itemsPerRow, hintItemWidth, hintItemGap, hintItemHeight]);
+    // =============================================================================
+    // Build Nodes
+    // =============================================================================
+    // Hint nodes in hint area (unassigned only)
+    const hintFlowNodes = useMemo(() => {
+        const unassignedHints = hintItems.filter((hint) => !Object.values(assignments).includes(hint.id));
+        return unassignedHints.map((hint, index) => {
+            const col = index % itemsPerRow;
+            const row = Math.floor(index / itemsPerRow);
+            return {
+                id: `hint-${hint.id}`,
+                type: 'coloringHintNode',
+                position: {
+                    x: hintStartX + col * (hintItemWidth + hintItemGap),
+                    y: hintStartY + row * (hintItemHeight + hintRowGap),
+                },
+                data: {
+                    hintItem: hint,
+                    isAssigned: false,
+                },
+                draggable: !isReviewMode,
+                style: {
+                    width: `${hintItemWidth}px`,
+                    height: `${hintItemHeight}px`,
+                },
+            };
+        });
+    }, [hintItems, assignments, isReviewMode, itemsPerRow, hintStartX, hintItemWidth, hintItemGap, hintStartY, hintItemHeight, hintRowGap]);
+    // Hint nodes inside regions (assigned)
+    const assignedHintNodes = useMemo(() => {
+        if (!imageLoaded || imageDimensions.width <= 0)
+            return [];
+        return regions
+            .filter((region) => assignments[region.id])
+            .map((region) => {
+            const hintId = assignments[region.id];
+            const hint = hintItems.find((h) => h.id === hintId);
+            if (!hint)
+                return null;
+            const regionX = imageStartX + (region.x / 100) * imageDimensions.width;
+            const regionY = IMAGE_START_Y + (region.y / 100) * imageDimensions.height;
+            const regionWidth = Math.max((region.width / 100) * imageDimensions.width, 60);
+            const regionHeight = Math.max((region.height / 100) * imageDimensions.height, 40);
+            return {
+                id: `hint-in-region-${region.id}`,
+                type: 'coloringHintNode',
+                position: { x: regionX, y: regionY },
+                data: {
+                    hintItem: hint,
+                    isAssigned: true,
+                    regionId: region.id,
+                },
+                draggable: !isReviewMode,
+                style: {
+                    width: `${regionWidth}px`,
+                    height: `${regionHeight}px`,
+                },
+            };
+        })
+            .filter((n) => n !== null);
+    }, [imageLoaded, imageDimensions, imageStartX, regions, assignments, hintItems, isReviewMode, IMAGE_START_Y]);
+    // Region nodes (drop zones)
+    const regionFlowNodes = useMemo(() => {
+        if (!imageLoaded || imageDimensions.width <= 0)
+            return [];
+        return regions.map((region) => {
+            const hintId = assignments[region.id];
+            const assignedHint = hintId ? hintItems.find((h) => h.id === hintId) : undefined;
+            const isCorrect = isReviewMode && hintId === region.correctHintId;
+            return {
+                id: region.id,
+                type: 'coloringRegionNode',
+                position: {
+                    x: imageStartX + (region.x / 100) * imageDimensions.width,
+                    y: IMAGE_START_Y + (region.y / 100) * imageDimensions.height,
+                },
+                data: {
+                    region,
+                    assignedHint,
+                    isHighlighted: highlightedRegionId === region.id,
+                    isCorrect,
+                    isReviewMode,
+                },
+                draggable: false,
+                style: {
+                    width: `${Math.max((region.width / 100) * imageDimensions.width, 60)}px`,
+                    height: `${Math.max((region.height / 100) * imageDimensions.height, 40)}px`,
+                    pointerEvents: (assignedHint ? 'none' : 'auto'),
+                },
+                zIndex: 0,
+            };
+        });
+    }, [imageLoaded, imageDimensions, imageStartX, regions, assignments, hintItems, highlightedRegionId, isReviewMode, IMAGE_START_Y]);
+    // Update nodes
+    useEffect(() => {
+        if (isDraggingNodeRef.current)
+            return;
+        const allNodes = [...regionFlowNodes, ...hintFlowNodes, ...assignedHintNodes];
+        setNodes(allNodes);
+    }, [regionFlowNodes, hintFlowNodes, assignedHintNodes, setNodes]);
+    // =============================================================================
+    // Render
+    // =============================================================================
+    return (_jsxs("div", { className: "flex h-full w-full flex-col gap-3", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx("div", { className: "shrink-0", children: _jsx(CambridgeYleInstructionBanner, { instruction: instruction, instructions: instructions, hasExample: hasExample, isReviewMode: isReviewMode, children: audioUrl && (_jsx("div", { className: "shrink-0", children: _jsx(CambridgeYleAudioPlayer, { audioSrc: audioUrl, compact: true }) })) }) }), _jsxs("div", { ref: flowRef, className: "relative flex-1 overflow-x-auto overflow-y-hidden rounded-xl bg-gray-100", style: { minHeight: '1000px' }, children: [_jsx("div", { className: "pointer-events-none absolute left-0 right-0 z-20 flex items-center justify-center sm:justify-end sm:pr-4", style: {
+                            top: isMobile ? `${HINT_AREA_HEIGHT - 40}px` : '20px',
+                            height: '40px'
+                        }, children: _jsx("span", { className: "rounded-full bg-white/80 px-3 py-1 text-xs font-medium text-gray-500 shadow-sm", children: "K\u00E9o m\u00E0u v\u00E0o v\u1ECB tr\u00ED t\u01B0\u01A1ng \u1EE9ng" }) }), _jsx("div", { className: "pointer-events-none absolute", style: {
+                            left: `${imageStartX}px`,
+                            top: `${IMAGE_START_Y}px`,
+                            width: imageDimensions.width ? `${imageDimensions.width}px` : 'auto',
+                            height: imageDimensions.height ? `${imageDimensions.height}px` : 'auto',
+                            zIndex: 0,
+                        }, children: _jsx("img", { ref: imageRef, src: resolvedImageUrl || imageUrl, alt: "Question illustration", className: "h-full w-full rounded-lg object-contain shadow-md", onLoad: handleImageLoad, onError: () => setImageLoaded(false) }) }), _jsx("div", { className: "absolute inset-0 z-10", children: _jsx(ReactFlow, { nodes: nodes, edges: [], onNodesChange: onNodesChange, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onEdgesChange: onEdgesChange, nodeTypes: nodeTypes, defaultViewport: { x: 0, y: 0, zoom: 1 }, fitView: false, nodesDraggable: !isReviewMode, nodesConnectable: false, elementsSelectable: false, panOnDrag: false, panOnScroll: false, zoomOnScroll: false, zoomOnDoubleClick: false, zoomOnPinch: false, preventScrolling: true, autoPanOnNodeDrag: false, autoPanOnConnect: false, proOptions: { hideAttribution: true } }) })] })] }));
+}
+// =============================================================================
+// Exported Component with Provider
+// =============================================================================
+export function MoversColoringRenderer(props) {
+    return (_jsx(ReactFlowProvider, { children: _jsx(MoversColoringRendererContent, { ...props }) }));
+}

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

@@ -0,0 +1,20 @@
+/**
+ * CROSS_OUT_WORD_GROUP Renderer
+ * - Full-width 1-line-per-question layout
+ * - Click a word to cross it out (tracked by wordIndex & crossOut)
+ * - If item type is CROSS_OUT_AND_REPLACE, type the replacement word
+ */
+import type { CrossOutWordGroupItemAnswer, CrossOutWordGroupQuestion } from '../../utils/cross-out-word-group.transformer';
+interface MoversCrossOutWordGroupRendererProps {
+    partNumber: number;
+    partName?: string;
+    questionCount: number;
+    instruction: string;
+    questions: CrossOutWordGroupQuestion[];
+    answers: Record<string, CrossOutWordGroupItemAnswer | undefined>;
+    onAnswerChange: (questionId: string, value: CrossOutWordGroupItemAnswer) => void;
+    isReviewMode?: boolean;
+    correctAnswerMap?: Record<string, CrossOutWordGroupItemAnswer | undefined>;
+}
+export declare function MoversCrossOutWordGroupRenderer({ partNumber, partName, questionCount, instruction, questions, answers, onAnswerChange, isReviewMode, correctAnswerMap, }: MoversCrossOutWordGroupRendererProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,141 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CROSS_OUT_WORD_GROUP Renderer
+ * - Full-width 1-line-per-question layout
+ * - Click a word to cross it out (tracked by wordIndex & crossOut)
+ * - If item type is CROSS_OUT_AND_REPLACE, type the replacement word
+ */
+import { useMemo } from 'react';
+import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+function tokenize(sentence) {
+    return sentence.trim().split(/\s+/).filter(Boolean);
+}
+function normalizeWord(word) {
+    return word.replace(/[^\p{L}\p{N}'-]/gu, '').toLowerCase();
+}
+function formatAnswerLabel(answer) {
+    if (!answer)
+        return '—';
+    const posInfo = typeof answer.wordIndex === 'number' && answer.wordIndex >= 0
+        ? ` [vị trí ${answer.wordIndex + 1}]`
+        : '';
+    if (answer.type === 'CROSS_OUT_AND_REPLACE') {
+        return `gạch "${answer.crossOut}"${posInfo} → "${answer.replaceWith || ''}"`;
+    }
+    if (!answer.crossOut || answer.wordIndex === null)
+        return 'câu đúng (không gạch)';
+    return `gạch "${answer.crossOut}"${posInfo}`;
+}
+function QuestionItem({ question, answer, onAnswerChange, isReviewMode, correctAnswer, id, }) {
+    const isDisabled = isReviewMode || question.isExample;
+    const currentAnswer = question.isExample
+        ? question.exampleCorrectAnswer
+        : answer;
+    const tokens = useMemo(() => tokenize(question.question), [question.question]);
+    const selectedWord = currentAnswer?.crossOut || '';
+    const selectedIndex = currentAnswer?.wordIndex;
+    const replaceWith = currentAnswer?.replaceWith || '';
+    const mode = question.type;
+    const hasCorrectAnswer = isReviewMode && !!correctAnswer && !question.isExample;
+    const isCorrect = useMemo(() => {
+        if (!hasCorrectAnswer)
+            return false;
+        const hasExpIndex = typeof correctAnswer?.wordIndex === 'number' && correctAnswer.wordIndex >= 0;
+        const hasActIndex = typeof selectedIndex === 'number' && selectedIndex >= 0;
+        const isExpBlank = !correctAnswer?.crossOut || correctAnswer?.wordIndex === null;
+        const isActBlank = !selectedWord || selectedIndex === null;
+        if (isExpBlank) {
+            return isActBlank;
+        }
+        const matchCross = hasExpIndex && hasActIndex
+            ? correctAnswer?.wordIndex === selectedIndex
+            : normalizeWord(selectedWord) === normalizeWord(correctAnswer?.crossOut || '');
+        if (!matchCross)
+            return false;
+        if (mode === 'CROSS_OUT_AND_REPLACE') {
+            return (normalizeWord(replaceWith) === normalizeWord(correctAnswer?.replaceWith || ''));
+        }
+        return true;
+    }, [hasCorrectAnswer, correctAnswer, selectedIndex, selectedWord, mode, replaceWith]);
+    const isWrong = hasCorrectAnswer &&
+        !isCorrect &&
+        (!!selectedWord || !!replaceWith || correctAnswer?.crossOut === '' || selectedIndex !== undefined);
+    const setCrossOut = (tokenIndex, rawToken) => {
+        if (isDisabled)
+            return;
+        const isAlreadySelected = selectedIndex !== undefined && selectedIndex !== null
+            ? selectedIndex === tokenIndex
+            : selectedWord === rawToken;
+        if (isAlreadySelected) {
+            onAnswerChange(question.id, {
+                type: mode,
+                wordIndex: null,
+                crossOut: '',
+                ...(mode === 'CROSS_OUT_AND_REPLACE' ? { replaceWith } : {}),
+            });
+        }
+        else {
+            const cleanWord = rawToken.replace(/[^\p{L}\p{N}'-]/gu, '') || rawToken;
+            onAnswerChange(question.id, {
+                type: mode,
+                wordIndex: tokenIndex,
+                crossOut: cleanWord,
+                ...(mode === 'CROSS_OUT_AND_REPLACE' ? { replaceWith } : {}),
+            });
+        }
+    };
+    const setReplaceWith = (value) => {
+        if (isDisabled)
+            return;
+        onAnswerChange(question.id, {
+            type: mode,
+            ...(selectedIndex !== undefined ? { wordIndex: selectedIndex } : {}),
+            crossOut: selectedWord,
+            replaceWith: value,
+        });
+    };
+    return (_jsx("div", { id: id, className: `w-full rounded-2xl border transition-all duration-200 p-4 sm:p-4.5 ${question.isExample
+            ? 'border-amber-200 bg-gradient-to-r from-amber-50/70 via-orange-50/30 to-amber-50/50 shadow-sm'
+            : isCorrect
+                ? 'border-emerald-300 bg-emerald-50/30 shadow-sm'
+                : isWrong
+                    ? 'border-rose-300 bg-rose-50/30 shadow-sm'
+                    : selectedWord || replaceWith || (selectedIndex !== undefined && selectedIndex !== null)
+                        ? 'border-blue-200 bg-blue-50/20 shadow-sm'
+                        : 'border-slate-200/90 bg-white shadow-sm hover:border-blue-200 hover:shadow'}`, children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 border-b border-slate-100 pb-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: `flex h-6 w-6 items-center justify-center rounded-full text-xs font-black text-white shadow-sm ${question.isExample
+                                        ? 'bg-gradient-to-br from-amber-400 to-orange-500'
+                                        : isCorrect
+                                            ? 'bg-emerald-500'
+                                            : isWrong
+                                                ? 'bg-rose-500'
+                                                : 'bg-blue-600'}`, children: question.questionNumber }), question.isExample && (_jsx("span", { className: "rounded-full border border-amber-300 bg-amber-100/90 px-2 py-0.5 text-[10.5px] font-extrabold uppercase tracking-wider text-amber-800", children: "EXAMPLE" })), _jsx("span", { className: `rounded-full px-2.5 py-0.5 text-[11px] font-bold ${mode === 'CROSS_OUT_AND_REPLACE'
+                                        ? 'bg-violet-100/80 text-violet-700 border border-violet-200/60'
+                                        : 'bg-sky-100/80 text-sky-700 border border-sky-200/60'}`, children: mode === 'CROSS_OUT_AND_REPLACE' ? 'Gạch + Thay thế' : 'Chỉ gạch' }), !question.isExample && selectedWord && (_jsxs("span", { className: "flex items-center gap-1 rounded-full bg-emerald-100 px-2 py-0.5 text-[10.5px] font-bold text-emerald-700", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-emerald-500" }), "\u0110\u00E3 g\u1EA1ch: \"", selectedWord, "\"", typeof selectedIndex === 'number' && (_jsxs("span", { className: "text-[10px] text-emerald-600 font-normal", children: ["(t\u1EEB #", selectedIndex + 1, ")"] }))] }))] }), mode === 'CROSS_OUT_AND_REPLACE' && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { className: "text-xs font-bold text-slate-600 whitespace-nowrap", children: "T\u1EEB \u0111\u00FAng:" }), _jsx("input", { type: "text", value: replaceWith, disabled: isDisabled, onChange: (e) => setReplaceWith(e.target.value), placeholder: "Nh\u1EADp t\u1EEB thay th\u1EBF...", className: "h-8 w-40 sm:w-52 rounded-lg border border-slate-200 bg-white px-2.5 text-sm font-semibold text-slate-800 outline-none transition-all focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-100 disabled:cursor-not-allowed disabled:bg-slate-50" })] }))] }), _jsx("div", { className: "flex flex-wrap items-center gap-1.5 sm:gap-2 text-[15.5px] sm:text-[16.5px] font-medium leading-loose text-slate-800 px-1", children: tokens.map((token, tokenIndex) => {
+                        const plain = normalizeWord(token);
+                        const isSelected = selectedIndex !== undefined && selectedIndex !== null
+                            ? selectedIndex === tokenIndex
+                            : !!selectedWord && normalizeWord(selectedWord) === plain && plain !== '';
+                        const isCorrectTargetInReview = isReviewMode &&
+                            !question.isExample &&
+                            correctAnswer?.wordIndex === tokenIndex;
+                        return (_jsx("button", { type: "button", disabled: isDisabled || plain === '', onClick: () => setCrossOut(tokenIndex, token), className: `rounded-lg px-2 py-1 transition-all duration-150 select-none relative ${isSelected
+                                ? question.isExample
+                                    ? 'bg-amber-200/90 text-amber-900 font-bold line-through decoration-amber-700 decoration-2 shadow-sm'
+                                    : isCorrect
+                                        ? 'bg-emerald-100 text-emerald-800 font-bold line-through decoration-emerald-600 decoration-2 shadow-sm border border-emerald-300'
+                                        : isWrong
+                                            ? 'bg-rose-100 text-rose-700 font-bold line-through decoration-rose-600 decoration-2 shadow-sm border border-rose-300 scale-[0.98]'
+                                            : 'bg-blue-100 text-blue-700 font-bold line-through decoration-blue-600 decoration-2 shadow-sm border border-blue-200 scale-[0.98]'
+                                : isCorrectTargetInReview
+                                    ? 'border-2 border-dashed border-emerald-500 bg-emerald-50/60 text-emerald-800 font-bold'
+                                    : isDisabled
+                                        ? 'text-slate-800 cursor-default'
+                                        : 'text-slate-800 hover:bg-blue-50 hover:text-blue-700 hover:shadow-sm cursor-pointer'}`, children: token }, `${question.id}-token-${tokenIndex}`));
+                    }) }), isReviewMode && !question.isExample && (_jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-4 rounded-xl bg-slate-50 px-3 py-2 text-xs font-semibold", children: [_jsxs("p", { className: "text-slate-600", children: ["H\u1ECDc sinh: ", _jsx("span", { className: "font-bold text-slate-800", children: formatAnswerLabel(currentAnswer) })] }), hasCorrectAnswer && (_jsxs("p", { className: "font-bold text-emerald-700", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", formatAnswerLabel(correctAnswer)] }))] }))] }) }));
+}
+export function MoversCrossOutWordGroupRenderer({ partNumber, partName, questionCount, instruction, questions, answers, onAnswerChange, isReviewMode = false, correctAnswerMap = {}, }) {
+    const exampleQuestions = questions.filter((q) => q.isExample);
+    const regularQuestions = questions.filter((q) => !q.isExample);
+    return (_jsxs("div", { className: "custom-scrollbar flex h-full flex-col gap-4 overflow-y-auto sm:gap-5 pb-6", children: [_jsxs("div", { className: "flex flex-col gap-3.5 p-3 sm:px-6 sm:pt-2", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode }), exampleQuestions.length > 0 && (_jsx("div", { className: "mt-1 flex flex-col gap-3", children: exampleQuestions.map((question) => (_jsx(QuestionItem, { id: `question-${question.id}`, question: question, answer: answers[question.id], onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, correctAnswer: correctAnswerMap[question.id] }, question.id))) }))] }), exampleQuestions.length > 0 && regularQuestions.length > 0 && (_jsx("div", { className: "px-3 sm:px-6", children: _jsx("hr", { className: "border-t border-dashed border-slate-200" }) })), _jsx("div", { className: "flex flex-col gap-3 px-3 sm:px-6", children: regularQuestions.map((question) => (_jsx(QuestionItem, { id: `question-${question.id}`, question: question, answer: answers[question.id], onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, correctAnswer: correctAnswerMap[question.id] }, question.id))) })] }));
+}