@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.30

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

@@ -1 +1,131 @@
-"use client";import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{useState as s}from"react";import{ZoomIn as o,Check as n}from"lucide-react";import{ResolvedImage as a}from"../../../../../components/common/ResolvedImage";import i from"../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import l from"../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner";function c({imageUrl:n,alt:i}){const[l,c]=s(!1);return n?r(t,{children:[r("div",{className:"relative flex items-center justify-center",children:[e(a,{src:n,alt:i,className:"h-24 w-24 cursor-pointer rounded-lg object-cover shadow-md",onClick:()=>c(!0)}),e("button",{type:"button",onClick:()=>c(!0),className:"absolute -right-1 -top-1 rounded-full bg-white/80 p-1 shadow-md hover:bg-white","aria-label":"Zoom image",children:e(o,{className:"h-3 w-3 text-gray-600"})})]}),l&&e("div",{className:"fixed inset-0 z-50 flex items-center justify-center bg-black/70",onClick:()=>c(!1),children:e(a,{src:n,alt:`${i} (zoomed)`,className:"max-h-[90vh] max-w-[90vw] rounded-lg object-contain",showLoadingState:!1})})]}):null}function d({letters:t}){return r("div",{className:"rounded-lg border-2 border-amber-200 bg-amber-50 p-4",children:[e("p",{className:"mb-3 text-sm font-semibold text-amber-800",children:"Available Letters:"}),e("div",{className:"flex flex-wrap gap-2",children:t.map((r,t)=>e("span",{className:"flex h-10 w-10 items-center justify-center rounded-lg bg-white text-lg font-bold text-amber-700 shadow-sm",children:r},t))})]})}function m({word:t,answer:s,isReviewMode:o,correctAnswer:n}){const a=t.indexOf("_"),i=t.slice(0,a),l=t.slice(a+1),c=o&&s.toLowerCase()===n?.toLowerCase(),d=o&&s&&s.toLowerCase()!==n?.toLowerCase(),m=o&&!s,u=m?n:s||"_";return r("div",{className:"flex items-center justify-center text-2xl font-bold tracking-wider text-gray-700",children:[e("span",{children:i}),e("span",{className:"mx-0.5 inline-flex h-8 w-8 items-center justify-center rounded border-2 "+(o?c?"border-green-500 bg-green-100 text-green-600":d?"border-red-500 bg-red-100 text-red-600":m?"border-blue-500 bg-blue-50 text-blue-600":"border-gray-300 bg-gray-50 text-gray-400":"border-blue-400 bg-blue-50 text-blue-600"),children:u}),e("span",{children:l})]})}function u({subQuestion:t,answer:s,onChange:o,isReviewMode:a,hintLetters:i,id:l}){const d=a&&s.toLowerCase()===t.correctAnswer?.toLowerCase(),u=a&&s&&s.toLowerCase()!==t.correctAnswer?.toLowerCase(),b=a&&!s;return r("div",{id:l,className:"rounded-lg border border-gray-200 bg-white p-4 shadow-sm",children:[r("div",{className:"mb-3 flex items-start gap-3",children:[e("span",{className:"flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-sm font-bold text-white",children:t.questionNumber}),e(c,{imageUrl:t.imageUrl,alt:`Question ${t.questionNumber}`})]}),e("div",{className:"mb-3",children:e(m,{word:t.word,answer:s,isReviewMode:a,correctAnswer:t.correctAnswer})}),e("div",{className:"flex flex-wrap justify-center gap-2",children:i.map((r,n)=>{const i=s.toLowerCase()===r.toLowerCase(),l=t.correctAnswer?.toLowerCase()===r.toLowerCase(),c=!s,d=s&&s.toLowerCase()!==t.correctAnswer?.toLowerCase();let m="border-gray-300 bg-white hover:border-blue-300",u="text-gray-700";return a?l?(m=c||d?"border-blue-500 bg-blue-50":"border-green-500 bg-green-100",u="text-gray-800 font-bold"):i&&!l?(m="border-red-500 bg-red-100",u="text-gray-800 font-bold"):u="text-gray-600":i&&(m="border-blue-500 bg-blue-100"),e("button",{type:"button",onClick:()=>!a&&o(r),disabled:a,className:`flex h-10 w-10 items-center justify-center rounded-lg border-2 text-lg transition-colors ${m} ${u} ${a?"cursor-default":"cursor-pointer"}`,children:r},n)})}),a&&r("div",{className:"mt-2 flex items-center justify-center gap-2",children:[d&&r("span",{className:"flex items-center gap-1 text-sm font-medium text-green-600",children:[e(n,{className:"h-4 w-4"})," Correct"]}),u&&r("span",{className:"text-sm font-medium text-blue-600",children:["Correct answer: ",t.correctAnswer]}),b&&r("span",{className:"flex items-center gap-1 text-sm font-medium text-blue-600",children:["Correct answer: ",t.correctAnswer]})]})]})}function b({subQuestion:t,answer:s,onChange:o,isReviewMode:a,hintLetters:i,id:l}){const c=a&&s.toLowerCase()===t.correctAnswer?.toLowerCase(),d=a&&s&&s.toLowerCase()!==t.correctAnswer?.toLowerCase(),u=a&&!s;return r("div",{id:l,className:"flex flex-col items-center gap-2 rounded-lg border border-gray-200 bg-white p-4",children:[e(m,{word:t.word,answer:s,isReviewMode:a,correctAnswer:t.correctAnswer}),e("div",{className:"flex flex-wrap justify-center gap-1",children:i.map((r,n)=>{const i=s.toLowerCase()===r.toLowerCase(),l=t.correctAnswer?.toLowerCase()===r.toLowerCase(),c=!s,d=s&&s.toLowerCase()!==t.correctAnswer?.toLowerCase();let m="border-gray-300 bg-white hover:border-blue-300",u="text-gray-700";return a?l?(m=c||d?"border-blue-500 bg-blue-50":"border-green-500 bg-green-100",u="text-gray-800 font-bold"):i&&!l?(m="border-red-500 bg-red-100",u="text-gray-800 font-bold"):u="text-gray-600":i&&(m="border-blue-500 bg-blue-100"),e("button",{type:"button",onClick:()=>!a&&o(r),disabled:a,className:`flex h-8 w-8 items-center justify-center rounded-lg border-2 text-base transition-colors ${m} ${u} ${a?"cursor-default":"cursor-pointer"}`,children:r},n)})}),a&&r("div",{className:"flex items-center justify-center gap-2",children:[c&&r("span",{className:"flex items-center gap-1 text-xs font-medium text-green-600",children:[e(n,{className:"h-3 w-3"})," Correct"]}),(d||u)&&r("span",{className:"text-xs font-medium text-blue-600",children:["Correct answer: ",t.correctAnswer]})]})]})}export function MoversFillWordHintRenderer({partNumber:t,partName:s,questionCount:o,instruction:n,hintLetters:a,subQuestions:m,answers:g,onAnswerChange:w,isReviewMode:f=!1}){const h=m.length>0&&void 0!==m[0].blankIndex&&m.every(e=>e.imageUrl===m[0].imageUrl);return r("div",h?{className:"flex h-full flex-col gap-4 overflow-y-auto p-6",children:[r("div",{className:"flex flex-col gap-4",children:[e(i,{partNumber:t,questionCount:o,partName:s,isReviewMode:f}),e(l,{instruction:n,isReviewMode:f}),e(d,{letters:a})]}),r("div",{className:"rounded-lg border border-gray-200 bg-white p-6 shadow-sm",children:[e("div",{className:"mb-6 flex justify-center",children:e(c,{imageUrl:m[0].imageUrl,alt:"Question image"})}),e("div",{className:"flex flex-wrap justify-center gap-4",children:m.map(r=>e(b,{id:`question-${r.id}`,subQuestion:r,answer:g[r.id]||"",onChange:e=>w(r.id,e),isReviewMode:f,hintLetters:a},r.id))})]})]}:{className:"flex h-full flex-col gap-4 overflow-y-auto p-6",children:[r("div",{className:"flex flex-col gap-4",children:[e(i,{partNumber:t,questionCount:o,partName:s,isReviewMode:f}),e(l,{instruction:n,isReviewMode:f}),e(d,{letters:a})]}),e("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",children:m.map(r=>e(u,{id:`question-${r.id}`,subQuestion:r,answer:g[r.id]||"",onChange:e=>w(r.id,e),isReviewMode:f,hintLetters:a},r.id))})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ZoomIn, Check } from 'lucide-react';
+import { ResolvedImage } from '../../../../../components/common/ResolvedImage';
+import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+// Image with zoom functionality
+function QuestionImage({ imageUrl, alt }) {
+    const [isZoomed, setIsZoomed] = useState(false);
+    // Don't render if no imageUrl
+    if (!imageUrl) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative flex items-center justify-center", children: [_jsx(ResolvedImage, { src: imageUrl, alt: alt, className: "h-24 w-24 cursor-pointer rounded-lg object-cover shadow-md", onClick: () => setIsZoomed(true) }), _jsx("button", { type: "button", onClick: () => setIsZoomed(true), className: "absolute -right-1 -top-1 rounded-full bg-white/80 p-1 shadow-md hover:bg-white", "aria-label": "Zoom image", children: _jsx(ZoomIn, { className: "h-3 w-3 text-gray-600" }) })] }), isZoomed && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/70", onClick: () => setIsZoomed(false), children: _jsx(ResolvedImage, { src: imageUrl, alt: `${alt} (zoomed)`, className: "max-h-[90vh] max-w-[90vw] rounded-lg object-contain", showLoadingState: false }) }))] }));
+}
+// Hint Letters Component
+function HintLetters({ letters }) {
+    return (_jsxs("div", { className: "rounded-lg border-2 border-amber-200 bg-amber-50 p-4", children: [_jsx("p", { className: "mb-3 text-sm font-semibold text-amber-800", children: "Available Letters:" }), _jsx("div", { className: "flex flex-wrap gap-2", children: letters.map((letter, index) => (_jsx("span", { className: "flex h-10 w-10 items-center justify-center rounded-lg bg-white text-lg font-bold text-amber-700 shadow-sm", children: letter }, index))) })] }));
+}
+// Word with blank display
+function WordWithBlank({ word, answer, isReviewMode, correctAnswer, }) {
+    // Find the position of the underscore
+    const blankIndex = word.indexOf('_');
+    const before = word.slice(0, blankIndex);
+    const after = word.slice(blankIndex + 1);
+    const isCorrect = isReviewMode && answer.toLowerCase() === correctAnswer?.toLowerCase();
+    const isWrong = isReviewMode && answer && answer.toLowerCase() !== correctAnswer?.toLowerCase();
+    const didNotAnswer = isReviewMode && !answer;
+    const getBlankStyle = () => {
+        if (!isReviewMode)
+            return 'border-blue-400 bg-blue-50 text-blue-600';
+        if (isCorrect)
+            return 'border-green-500 bg-green-100 text-green-600';
+        if (isWrong)
+            return 'border-red-500 bg-red-100 text-red-600';
+        if (didNotAnswer)
+            return 'border-blue-500 bg-blue-50 text-blue-600';
+        return 'border-gray-300 bg-gray-50 text-gray-400';
+    };
+    // Show correct answer when user didn't answer or was wrong
+    const displayValue = didNotAnswer ? correctAnswer : (answer || '_');
+    return (_jsxs("div", { className: "flex items-center justify-center text-2xl font-bold tracking-wider text-gray-700", children: [_jsx("span", { children: before }), _jsx("span", { className: `mx-0.5 inline-flex h-8 w-8 items-center justify-center rounded border-2 ${getBlankStyle()}`, children: displayValue }), _jsx("span", { children: after })] }));
+}
+// Single Sub-Question Component
+function SubQuestionItem({ subQuestion, answer, onChange, isReviewMode, hintLetters, id, }) {
+    const isCorrect = isReviewMode &&
+        answer.toLowerCase() === subQuestion.correctAnswer?.toLowerCase();
+    const isWrong = isReviewMode &&
+        answer &&
+        answer.toLowerCase() !== subQuestion.correctAnswer?.toLowerCase();
+    const didNotAnswer = isReviewMode && !answer;
+    return (_jsxs("div", { id: id, className: "rounded-lg border border-gray-200 bg-white p-4 shadow-sm", children: [_jsxs("div", { className: "mb-3 flex items-start gap-3", children: [_jsx("span", { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-sm font-bold text-white", children: subQuestion.questionNumber }), _jsx(QuestionImage, { imageUrl: subQuestion.imageUrl, alt: `Question ${subQuestion.questionNumber}` })] }), _jsx("div", { className: "mb-3", children: _jsx(WordWithBlank, { word: subQuestion.word, answer: answer, isReviewMode: isReviewMode, correctAnswer: subQuestion.correctAnswer }) }), _jsx("div", { className: "flex flex-wrap justify-center gap-2", children: hintLetters.map((letter, index) => {
+                    const isSelected = answer.toLowerCase() === letter.toLowerCase();
+                    const isCorrectLetter = subQuestion.correctAnswer?.toLowerCase() === letter.toLowerCase();
+                    const userDidNotAnswer = !answer;
+                    const userWasWrong = answer && answer.toLowerCase() !== subQuestion.correctAnswer?.toLowerCase();
+                    let buttonStyle = 'border-gray-300 bg-white hover:border-blue-300';
+                    let textStyle = 'text-gray-700';
+                    if (isReviewMode) {
+                        if (isCorrectLetter) {
+                            // Blue if user didn't answer or was wrong, green if correct
+                            buttonStyle = (userDidNotAnswer || userWasWrong)
+                                ? 'border-blue-500 bg-blue-50'
+                                : 'border-green-500 bg-green-100';
+                            textStyle = 'text-gray-800 font-bold';
+                        }
+                        else if (isSelected && !isCorrectLetter) {
+                            buttonStyle = 'border-red-500 bg-red-100';
+                            textStyle = 'text-gray-800 font-bold';
+                        }
+                        else {
+                            textStyle = 'text-gray-600';
+                        }
+                    }
+                    else if (isSelected) {
+                        buttonStyle = 'border-blue-500 bg-blue-100';
+                    }
+                    return (_jsx("button", { type: "button", onClick: () => !isReviewMode && onChange(letter), disabled: isReviewMode, className: `flex h-10 w-10 items-center justify-center rounded-lg border-2 text-lg transition-colors ${buttonStyle} ${textStyle} ${isReviewMode ? 'cursor-default' : 'cursor-pointer'}`, children: letter }, index));
+                }) }), isReviewMode && (_jsxs("div", { className: "mt-2 flex items-center justify-center gap-2", children: [isCorrect && (_jsxs("span", { className: "flex items-center gap-1 text-sm font-medium text-green-600", children: [_jsx(Check, { className: "h-4 w-4" }), " Correct"] })), isWrong && (_jsxs("span", { className: "text-sm font-medium text-blue-600", children: ["Correct answer: ", subQuestion.correctAnswer] })), didNotAnswer && (_jsxs("span", { className: "flex items-center gap-1 text-sm font-medium text-blue-600", children: ["Correct answer: ", subQuestion.correctAnswer] }))] }))] }));
+}
+// New format sub-question item (single image shared, inline display)
+function NewFormatSubQuestionItem({ subQuestion, answer, onChange, isReviewMode, hintLetters, id, }) {
+    const isCorrect = isReviewMode &&
+        answer.toLowerCase() === subQuestion.correctAnswer?.toLowerCase();
+    const isWrong = isReviewMode &&
+        answer &&
+        answer.toLowerCase() !== subQuestion.correctAnswer?.toLowerCase();
+    const didNotAnswer = isReviewMode && !answer;
+    return (_jsxs("div", { id: id, className: "flex flex-col items-center gap-2 rounded-lg border border-gray-200 bg-white p-4", children: [_jsx(WordWithBlank, { word: subQuestion.word, answer: answer, isReviewMode: isReviewMode, correctAnswer: subQuestion.correctAnswer }), _jsx("div", { className: "flex flex-wrap justify-center gap-1", children: hintLetters.map((letter, index) => {
+                    const isSelected = answer.toLowerCase() === letter.toLowerCase();
+                    const isCorrectLetter = subQuestion.correctAnswer?.toLowerCase() === letter.toLowerCase();
+                    const userDidNotAnswer = !answer;
+                    const userWasWrong = answer &&
+                        answer.toLowerCase() !== subQuestion.correctAnswer?.toLowerCase();
+                    let buttonStyle = 'border-gray-300 bg-white hover:border-blue-300';
+                    let textStyle = 'text-gray-700';
+                    if (isReviewMode) {
+                        if (isCorrectLetter) {
+                            buttonStyle =
+                                userDidNotAnswer || userWasWrong
+                                    ? 'border-blue-500 bg-blue-50'
+                                    : 'border-green-500 bg-green-100';
+                            textStyle = 'text-gray-800 font-bold';
+                        }
+                        else if (isSelected && !isCorrectLetter) {
+                            buttonStyle = 'border-red-500 bg-red-100';
+                            textStyle = 'text-gray-800 font-bold';
+                        }
+                        else {
+                            textStyle = 'text-gray-600';
+                        }
+                    }
+                    else if (isSelected) {
+                        buttonStyle = 'border-blue-500 bg-blue-100';
+                    }
+                    return (_jsx("button", { type: "button", onClick: () => !isReviewMode && onChange(letter), disabled: isReviewMode, className: `flex h-8 w-8 items-center justify-center rounded-lg border-2 text-base transition-colors ${buttonStyle} ${textStyle} ${isReviewMode ? 'cursor-default' : 'cursor-pointer'}`, children: letter }, index));
+                }) }), isReviewMode && (_jsxs("div", { className: "flex items-center justify-center gap-2", children: [isCorrect && (_jsxs("span", { className: "flex items-center gap-1 text-xs font-medium text-green-600", children: [_jsx(Check, { className: "h-3 w-3" }), " Correct"] })), (isWrong || didNotAnswer) && (_jsxs("span", { className: "text-xs font-medium text-blue-600", children: ["Correct answer: ", subQuestion.correctAnswer] }))] }))] }));
+}
+export function MoversFillWordHintRenderer({ partNumber, partName, questionCount, instruction, hintLetters, subQuestions, answers, onAnswerChange, isReviewMode = false, }) {
+    // Detect if this is new format (single shared image, multiple blanks with blankIndex)
+    const isNewFormat = subQuestions.length > 0 &&
+        subQuestions[0].blankIndex !== undefined &&
+        subQuestions.every((sq) => sq.imageUrl === subQuestions[0].imageUrl);
+    if (isNewFormat) {
+        // NEW FORMAT: Single card with shared image and multiple blank inputs
+        return (_jsxs("div", { className: "flex h-full flex-col gap-4 overflow-y-auto p-6", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode }), _jsx(HintLetters, { letters: hintLetters })] }), _jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-6 shadow-sm", children: [_jsx("div", { className: "mb-6 flex justify-center", children: _jsx(QuestionImage, { imageUrl: subQuestions[0].imageUrl, alt: "Question image" }) }), _jsx("div", { className: "flex flex-wrap justify-center gap-4", children: subQuestions.map((subQuestion) => (_jsx(NewFormatSubQuestionItem, { id: `question-${subQuestion.id}`, subQuestion: subQuestion, answer: answers[subQuestion.id] || '', onChange: (value) => onAnswerChange(subQuestion.id, value), isReviewMode: isReviewMode, hintLetters: hintLetters }, subQuestion.id))) })] })] }));
+    }
+    // OLD FORMAT: Grid of individual cards (each with its own image)
+    return (_jsxs("div", { className: "flex h-full flex-col gap-4 overflow-y-auto p-6", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode }), _jsx(HintLetters, { letters: hintLetters })] }), _jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: subQuestions.map((subQuestion) => (_jsx(SubQuestionItem, { id: `question-${subQuestion.id}`, subQuestion: subQuestion, answer: answers[subQuestion.id] || '', onChange: (value) => onAnswerChange(subQuestion.id, value), isReviewMode: isReviewMode, hintLetters: hintLetters }, subQuestion.id))) })] }));
+}

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

@@ -1 +1,76 @@
-"use client";import{jsx as e,jsxs as r,Fragment as s}from"react/jsx-runtime";import{Check as n,X as a}from"lucide-react";import t from"../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import l from"../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner";function d({value:s,isEditable:t,cellKey:l,userAnswer:d,correctAnswer:i,onChange:o,isReviewMode:c,caseSensitive:m=!1}){const g="h-10 w-10 text-lg sm:h-12 sm:w-12 sm:text-xl md:h-14 md:w-14 md:text-2xl lg:h-16 lg:w-16";if(!t)return e("div",{className:`flex items-center justify-center rounded-lg border-2 border-gray-300 bg-gray-100 font-bold text-gray-700 ${g}`,children:s});const h=d||"",u=c&&(m?h===i:h.toLowerCase()===i?.toLowerCase()),b=c&&h&&(m?h!==i:h.toLowerCase()!==i?.toLowerCase());return r("div",{className:"relative",children:[e("input",{type:"text",value:h,onChange:e=>!c&&o(e.target.value.slice(0,2)),disabled:c,maxLength:2,className:`flex items-center justify-center rounded-lg border-2 text-center font-bold outline-none transition-colors ${g} ${c?u?"border-green-500 bg-green-100":b?"border-red-500 bg-red-100":"border-dashed border-gray-400 bg-yellow-50":h?"border-blue-500 bg-blue-50":"border-dashed border-gray-400 bg-white"} ${c?u?"text-green-600":b?"text-red-600":"text-gray-800":"text-gray-800"} ${c?"cursor-default":"cursor-text"}`,placeholder:"?"}),c&&u&&e("span",{className:"absolute -right-1 -top-1 rounded-full bg-green-500 p-0.5",children:e(n,{className:"h-3 w-3 text-white"})}),c&&b&&e("span",{className:"absolute -right-1 -top-1 rounded-full bg-red-500 p-0.5",children:e(a,{className:"h-3 w-3 text-white"})})]})}function i({grid:r,rows:s,columns:n,cellAnswers:a,answers:t,onAnswerChange:l,isReviewMode:i,caseSensitive:o=!1,disabledCells:c=[]}){return e("div",{className:"inline-grid gap-1 sm:gap-1.5 md:gap-2",style:{gridTemplateColumns:`repeat(${n}, minmax(0, 1fr))`},children:r.map((r,s)=>r.map((r,n)=>{const m=`${s+1}-${n+1}`,g=null===r,h=a[m];return c?.includes(m)?e("div",{className:"h-10 w-10 sm:h-12 sm:w-12 md:h-14 md:w-14 lg:h-16 lg:w-16"},m):e(d,{value:r,isEditable:g,cellKey:m,userAnswer:t[m],correctAnswer:h?.correctAnswer,onChange:e=>l(m,e),isReviewMode:i,caseSensitive:o},m)}))})}function o({isReviewMode:n}){return r("div",{className:"flex flex-wrap gap-4 text-sm text-gray-600",children:[r("div",{className:"flex items-center gap-2",children:[e("div",{className:"h-6 w-6 rounded border-2 border-gray-300 bg-gray-100"}),e("span",{children:"Pre-filled"})]}),r("div",{className:"flex items-center gap-2",children:[e("div",{className:"h-6 w-6 rounded border-2 border-dashed border-gray-400 bg-white"}),e("span",{children:"Fill in"})]}),n&&r(s,{children:[r("div",{className:"flex items-center gap-2",children:[e("div",{className:"h-6 w-6 rounded border-2 border-green-500 bg-green-100"}),e("span",{children:"Correct"})]}),r("div",{className:"flex items-center gap-2",children:[e("div",{className:"h-6 w-6 rounded border-2 border-red-500 bg-red-100"}),e("span",{children:"Incorrect"})]})]})]})}function c({cellAnswers:n,answers:a,caseSensitive:t=!1}){const l=Object.entries(n);return r("div",{className:"rounded-lg border border-gray-200 bg-white p-4 shadow-sm",children:[e("p",{className:"mb-3 text-sm font-semibold text-gray-700",children:"Answer Summary:"}),e("div",{className:"grid grid-cols-2 gap-2",children:l.map(([n,{correctAnswer:l}])=>{const d=a[n]||"",i=t?d===l:d.toLowerCase()===l.toLowerCase();return r("div",{className:"flex items-center justify-between rounded px-3 py-1.5 "+(i?"bg-green-50":"bg-red-50"),children:[r("span",{className:"text-sm font-medium text-gray-600",children:["Cell ",n,":"]}),e("div",{className:"flex items-center gap-2",children:i?e("span",{className:"text-sm font-semibold text-green-600",children:d}):r(s,{children:[e("span",{className:"text-sm font-semibold text-red-600 line-through",children:d||"—"}),r("span",{className:"text-sm text-blue-600",children:["→ ",l]})]})})]},n)})})]})}export function MoversGridFillRenderer({partNumber:s,partName:n,questionCount:a,instruction:d,grid:m,rows:g,columns:h,cellAnswers:u,answers:b,onAnswerChange:w,isReviewMode:p=!1,caseSensitive:x=!1,disabledCells:v=[]}){return r("div",{className:"flex h-full flex-col gap-4 overflow-y-auto p-3 sm:gap-5 sm:p-4 md:gap-6 md:p-6",children:[r("div",{className:"flex flex-col gap-4",children:[e(t,{partNumber:s,questionCount:a,partName:n,isReviewMode:p}),e(l,{instruction:d,isReviewMode:p})]}),r("div",{className:"flex flex-col items-center gap-6",children:[e(o,{isReviewMode:p}),e("div",{className:"rounded-xl border-2 border-gray-200 bg-gray-50 p-3 shadow-sm sm:p-4 md:p-6",children:e(i,{grid:m,rows:g,columns:h,cellAnswers:u,answers:b,onAnswerChange:w,isReviewMode:p,caseSensitive:x,disabledCells:v})}),p&&e(c,{cellAnswers:u,answers:b,caseSensitive:x})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Check, X } from 'lucide-react';
+import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+// Grid Cell Component
+function GridCell({ value, isEditable, cellKey: _cellKey, userAnswer, correctAnswer, onChange, isReviewMode, caseSensitive = false, }) {
+    // Responsive cell size: smaller on mobile, larger on desktop
+    const cellSizeClasses = 'h-10 w-10 text-lg sm:h-12 sm:w-12 sm:text-xl md:h-14 md:w-14 md:text-2xl lg:h-16 lg:w-16';
+    // If cell has a value (not null), it's a pre-filled cell
+    if (!isEditable) {
+        return (_jsx("div", { className: `flex items-center justify-center rounded-lg border-2 border-gray-300 bg-gray-100 font-bold text-gray-700 ${cellSizeClasses}`, children: value }));
+    }
+    // Editable cell - respect caseSensitive flag for comparison
+    const displayValue = userAnswer || '';
+    const isCorrect = isReviewMode && (caseSensitive
+        ? displayValue === correctAnswer
+        : displayValue.toLowerCase() === correctAnswer?.toLowerCase());
+    const isWrong = isReviewMode && displayValue && (caseSensitive
+        ? displayValue !== correctAnswer
+        : displayValue.toLowerCase() !== correctAnswer?.toLowerCase());
+    const getCellStyle = () => {
+        if (!isReviewMode) {
+            return displayValue
+                ? 'border-blue-500 bg-blue-50'
+                : 'border-dashed border-gray-400 bg-white';
+        }
+        if (isCorrect)
+            return 'border-green-500 bg-green-100';
+        if (isWrong)
+            return 'border-red-500 bg-red-100';
+        return 'border-dashed border-gray-400 bg-yellow-50';
+    };
+    const getTextStyle = () => {
+        if (!isReviewMode)
+            return 'text-gray-800';
+        if (isCorrect)
+            return 'text-green-600';
+        if (isWrong)
+            return 'text-red-600';
+        return 'text-gray-800';
+    };
+    return (_jsxs("div", { className: "relative", children: [_jsx("input", { type: "text", value: displayValue, onChange: (e) => !isReviewMode && onChange(e.target.value.slice(0, 2)), disabled: isReviewMode, maxLength: 2, className: `flex items-center justify-center rounded-lg border-2 text-center font-bold outline-none transition-colors ${cellSizeClasses} ${getCellStyle()} ${getTextStyle()} ${isReviewMode ? 'cursor-default' : 'cursor-text'}`, placeholder: "?" }), isReviewMode && isCorrect && (_jsx("span", { className: "absolute -right-1 -top-1 rounded-full bg-green-500 p-0.5", children: _jsx(Check, { className: "h-3 w-3 text-white" }) })), isReviewMode && isWrong && (_jsx("span", { className: "absolute -right-1 -top-1 rounded-full bg-red-500 p-0.5", children: _jsx(X, { className: "h-3 w-3 text-white" }) }))] }));
+}
+// Grid Display Component
+function GridDisplay({ grid, rows: _rows, columns, cellAnswers, answers, onAnswerChange, isReviewMode, caseSensitive = false, disabledCells = [], }) {
+    return (_jsx("div", { className: "inline-grid gap-1 sm:gap-1.5 md:gap-2", style: {
+            gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+        }, children: grid.map((row, rowIndex) => row.map((cell, colIndex) => {
+            const cellKey = `${rowIndex + 1}-${colIndex + 1}`;
+            const isEditable = cell === null;
+            const cellAnswer = cellAnswers[cellKey];
+            if (disabledCells?.includes(cellKey)) {
+                return _jsx("div", { className: "h-10 w-10 sm:h-12 sm:w-12 md:h-14 md:w-14 lg:h-16 lg:w-16" }, cellKey);
+            }
+            return (_jsx(GridCell, { value: cell, isEditable: isEditable, cellKey: cellKey, userAnswer: answers[cellKey], correctAnswer: cellAnswer?.correctAnswer, onChange: (value) => onAnswerChange(cellKey, value), isReviewMode: isReviewMode, caseSensitive: caseSensitive }, cellKey));
+        })) }));
+}
+// Legend Component
+function GridLegend({ isReviewMode }) {
+    return (_jsxs("div", { className: "flex flex-wrap gap-4 text-sm text-gray-600", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-6 w-6 rounded border-2 border-gray-300 bg-gray-100" }), _jsx("span", { children: "Pre-filled" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-6 w-6 rounded border-2 border-dashed border-gray-400 bg-white" }), _jsx("span", { children: "Fill in" })] }), isReviewMode && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-6 w-6 rounded border-2 border-green-500 bg-green-100" }), _jsx("span", { children: "Correct" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-6 w-6 rounded border-2 border-red-500 bg-red-100" }), _jsx("span", { children: "Incorrect" })] })] }))] }));
+}
+// Answer Summary for Review Mode
+function AnswerSummary({ cellAnswers, answers, caseSensitive = false, }) {
+    const entries = Object.entries(cellAnswers);
+    return (_jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-4 shadow-sm", children: [_jsx("p", { className: "mb-3 text-sm font-semibold text-gray-700", children: "Answer Summary:" }), _jsx("div", { className: "grid grid-cols-2 gap-2", children: entries.map(([cellKey, { correctAnswer }]) => {
+                    const userAnswer = answers[cellKey] || '';
+                    const isCorrect = caseSensitive
+                        ? userAnswer === correctAnswer
+                        : userAnswer.toLowerCase() === correctAnswer.toLowerCase();
+                    return (_jsxs("div", { className: `flex items-center justify-between rounded px-3 py-1.5 ${isCorrect ? 'bg-green-50' : 'bg-red-50'}`, children: [_jsxs("span", { className: "text-sm font-medium text-gray-600", children: ["Cell ", cellKey, ":"] }), _jsx("div", { className: "flex items-center gap-2", children: isCorrect ? (_jsx("span", { className: "text-sm font-semibold text-green-600", children: userAnswer })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-sm font-semibold text-red-600 line-through", children: userAnswer || '—' }), _jsxs("span", { className: "text-sm text-blue-600", children: ["\u2192 ", correctAnswer] })] })) })] }, cellKey));
+                }) })] }));
+}
+export function MoversGridFillRenderer({ partNumber, partName, questionCount, instruction, grid, rows, columns, cellAnswers, answers, onAnswerChange, isReviewMode = false, caseSensitive = false, disabledCells = [], }) {
+    return (_jsxs("div", { className: "flex h-full flex-col gap-4 overflow-y-auto p-3 sm:gap-5 sm:p-4 md:gap-6 md:p-6", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode })] }), _jsxs("div", { className: "flex flex-col items-center gap-6", children: [_jsx(GridLegend, { isReviewMode: isReviewMode }), _jsx("div", { className: "rounded-xl border-2 border-gray-200 bg-gray-50 p-3 shadow-sm sm:p-4 md:p-6", children: _jsx(GridDisplay, { grid: grid, rows: rows, columns: columns, cellAnswers: cellAnswers, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, caseSensitive: caseSensitive, disabledCells: disabledCells }) }), isReviewMode && (_jsx(AnswerSummary, { cellAnswers: cellAnswers, answers: answers, caseSensitive: caseSensitive }))] })] }));
+}

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

@@ -1 +1,68 @@
-"use client";import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{useState as a}from"react";import{ZoomIn as o,Check as s,X as l}from"lucide-react";import{ResolvedImage as n}from"../../../../../components/common/ResolvedImage";import i from"../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import d from"../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner";function c({imageUrl:s}){const[l,i]=a(!1);return r(t,{children:[r("div",{className:"relative flex items-center justify-center",children:[e(n,{src:s,alt:"Picture to label",className:"max-h-[350px] cursor-pointer rounded-lg object-contain shadow-md",onClick:()=>i(!0)}),e("button",{type:"button",onClick:()=>i(!0),className:"absolute right-2 top-2 rounded-full bg-white/80 p-1.5 shadow-md hover:bg-white","aria-label":"Zoom image",children:e(o,{className:"h-4 w-4 text-gray-600"})})]}),l&&e("div",{className:"fixed inset-0 z-50 flex items-center justify-center bg-black/70",onClick:()=>i(!1),children:e(n,{src:s,alt:"Picture to label (zoomed)",className:"max-h-[90vh] max-w-[90vw] rounded-lg object-contain",showLoadingState:!1})})]})}function m({words:t,usedWords:a}){return r("div",{className:"rounded-lg border-2 border-purple-200 bg-purple-50 p-4",children:[e("p",{className:"mb-3 text-sm font-semibold text-purple-800",children:"Word Bank:"}),e("div",{className:"flex flex-wrap gap-2",children:t.map((r,t)=>{const o=a.has(r);return e("span",{className:"rounded-full px-3 py-1.5 text-sm font-medium "+(o?"bg-gray-200 text-gray-400 line-through":"bg-white text-purple-700 shadow-sm"),children:r},t)})})]})}function u({label:t,value:a,onChange:o,isReviewMode:n,wordBank:i}){const d=t.isPreFilled,c=n&&(d||a.toLowerCase()===t.correctAnswer?.toLowerCase()),m=n&&!d&&a&&a.toLowerCase()!==t.correctAnswer?.toLowerCase(),u=n&&!d&&!a;return r("div",{className:"flex items-center gap-3",children:[e("span",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full text-sm font-bold text-white "+(d?"bg-green-500":"bg-blue-500"),children:t.number}),r("div",{className:"relative flex-1 rounded-lg border-2 "+(n?d||c?"border-green-500 bg-green-50":m?"border-red-500 bg-red-50":u?"border-blue-500 bg-blue-50":"border-gray-300":d?"border-gray-400 bg-gray-100":"border-gray-300 focus-within:border-blue-500"),children:[e("input",{type:"text",value:d||u?t.correctAnswer||"":a,onChange:e=>!n&&!d&&o(e.target.value),disabled:n||d,placeholder:"Type your answer...",className:"w-full rounded-lg bg-transparent px-3 py-2 text-sm outline-none disabled:cursor-default "+(d?"text-green-700 font-medium":u?"text-blue-600 font-medium":"text-gray-700"),list:`wordbank-${t.id}`}),e("datalist",{id:`wordbank-${t.id}`,children:i.map((r,t)=>e("option",{value:r},t))}),n&&c&&e("span",{className:"absolute right-2 top-1/2 -translate-y-1/2",children:e(s,{className:"h-5 w-5 text-green-500"})}),n&&m&&e("span",{className:"absolute right-2 top-1/2 -translate-y-1/2",children:e(l,{className:"h-5 w-5 text-red-500"})})]}),n&&!d&&(m||u)&&t.correctAnswer&&r("span",{className:"text-sm font-medium text-blue-600",children:["→ ",t.correctAnswer]})]})}export function MoversLabelThePictureRenderer({partNumber:t,partName:a,questionCount:o,instruction:s,imageUrl:l,wordBank:n,labels:p,answers:g,onAnswerChange:b,isReviewMode:h=!1}){const w=new Set(Object.values(g).filter(Boolean).map(e=>"string"==typeof e?e.toLowerCase():"").filter(Boolean)),f=n.map(e=>e.toLowerCase()),x=new Set([...w].filter(e=>f.includes(e)));return r("div",{className:"grid h-full grid-cols-1 gap-4 sm:gap-6 "+(h?"":"lg:grid-cols-2"),children:[r("div",{className:"flex flex-col gap-4 overflow-y-auto p-3 sm:pb-6 sm:pr-6 sm:pt-6 lg:pr-6",children:[e(i,{partNumber:t,questionCount:o,partName:a,isReviewMode:h}),e(d,{instruction:s,isReviewMode:h}),e(c,{imageUrl:l}),e(m,{words:n,usedWords:new Set(n.filter(e=>x.has(e.toLowerCase())))})]}),e("div",{className:"flex flex-col gap-4 overflow-y-auto p-3 sm:pb-6 sm:pl-2 sm:pt-6",children:r("div",{className:"rounded-lg border border-gray-200 bg-white p-4 shadow-sm",children:[e("p",{className:"mb-4 text-sm font-semibold text-gray-700",children:"Write the correct word for each number:"}),e("div",{className:"flex flex-col gap-4",children:p.map(r=>e(u,{label:r,value:g[r.id]||"",onChange:e=>b(r.id,e),isReviewMode:h,wordBank:n},r.id))})]})})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ZoomIn, Check, X } from 'lucide-react';
+import { ResolvedImage } from '../../../../../components/common/ResolvedImage';
+import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+// Main image with zoom functionality
+function MainImage({ imageUrl }) {
+    const [isZoomed, setIsZoomed] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative flex items-center justify-center", children: [_jsx(ResolvedImage, { src: imageUrl, alt: "Picture to label", className: "max-h-[350px] cursor-pointer rounded-lg object-contain shadow-md", onClick: () => setIsZoomed(true) }), _jsx("button", { type: "button", onClick: () => setIsZoomed(true), className: "absolute right-2 top-2 rounded-full bg-white/80 p-1.5 shadow-md hover:bg-white", "aria-label": "Zoom image", children: _jsx(ZoomIn, { className: "h-4 w-4 text-gray-600" }) })] }), isZoomed && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/70", onClick: () => setIsZoomed(false), children: _jsx(ResolvedImage, { src: imageUrl, alt: "Picture to label (zoomed)", className: "max-h-[90vh] max-w-[90vw] rounded-lg object-contain", showLoadingState: false }) }))] }));
+}
+// Word Bank Component
+function WordBank({ words, usedWords, }) {
+    return (_jsxs("div", { className: "rounded-lg border-2 border-purple-200 bg-purple-50 p-4", children: [_jsx("p", { className: "mb-3 text-sm font-semibold text-purple-800", children: "Word Bank:" }), _jsx("div", { className: "flex flex-wrap gap-2", children: words.map((word, index) => {
+                    const isUsed = usedWords.has(word);
+                    return (_jsx("span", { className: `rounded-full px-3 py-1.5 text-sm font-medium ${isUsed
+                            ? 'bg-gray-200 text-gray-400 line-through'
+                            : 'bg-white text-purple-700 shadow-sm'}`, children: word }, index));
+                }) })] }));
+}
+// Single Label Input Component
+function LabelInputItem({ label, value, onChange, isReviewMode, wordBank, }) {
+    // PreFilled labels are always correct (given answer)
+    const isPreFilled = label.isPreFilled;
+    const isCorrect = isReviewMode && (isPreFilled || value.toLowerCase() === label.correctAnswer?.toLowerCase());
+    const isWrong = isReviewMode && !isPreFilled && value && value.toLowerCase() !== label.correctAnswer?.toLowerCase();
+    const didNotAnswer = isReviewMode && !isPreFilled && !value;
+    const getBorderStyle = () => {
+        if (!isReviewMode) {
+            // During exam: preFilled labels are disabled with gray style
+            if (isPreFilled)
+                return 'border-gray-400 bg-gray-100';
+            return 'border-gray-300 focus-within:border-blue-500';
+        }
+        // Review mode
+        if (isPreFilled)
+            return 'border-green-500 bg-green-50'; // PreFilled always green
+        if (isCorrect)
+            return 'border-green-500 bg-green-50';
+        if (isWrong)
+            return 'border-red-500 bg-red-50';
+        if (didNotAnswer)
+            return 'border-blue-500 bg-blue-50';
+        return 'border-gray-300';
+    };
+    // Determine display value
+    const getDisplayValue = () => {
+        if (isPreFilled)
+            return label.correctAnswer || '';
+        if (didNotAnswer)
+            return label.correctAnswer || '';
+        return value;
+    };
+    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: `flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full text-sm font-bold text-white ${isPreFilled ? 'bg-green-500' : 'bg-blue-500'}`, children: label.number }), _jsxs("div", { className: `relative flex-1 rounded-lg border-2 ${getBorderStyle()}`, children: [_jsx("input", { type: "text", value: getDisplayValue(), onChange: (e) => !isReviewMode && !isPreFilled && onChange(e.target.value), disabled: isReviewMode || isPreFilled, placeholder: "Type your answer...", className: `w-full rounded-lg bg-transparent px-3 py-2 text-sm outline-none disabled:cursor-default ${isPreFilled ? 'text-green-700 font-medium' :
+                            didNotAnswer ? 'text-blue-600 font-medium' : 'text-gray-700'}`, list: `wordbank-${label.id}` }), _jsx("datalist", { id: `wordbank-${label.id}`, children: wordBank.map((word, idx) => (_jsx("option", { value: word }, idx))) }), isReviewMode && isCorrect && (_jsx("span", { className: "absolute right-2 top-1/2 -translate-y-1/2", children: _jsx(Check, { className: "h-5 w-5 text-green-500" }) })), isReviewMode && isWrong && (_jsx("span", { className: "absolute right-2 top-1/2 -translate-y-1/2", children: _jsx(X, { className: "h-5 w-5 text-red-500" }) }))] }), isReviewMode && !isPreFilled && (isWrong || didNotAnswer) && label.correctAnswer && (_jsxs("span", { className: "text-sm font-medium text-blue-600", children: ["\u2192 ", label.correctAnswer] }))] }));
+}
+export function MoversLabelThePictureRenderer({ partNumber, partName, questionCount, instruction, imageUrl, wordBank, labels, answers, onAnswerChange, isReviewMode = false, }) {
+    // Calculate used words from answers (ensure values are strings)
+    const usedWords = new Set(Object.values(answers)
+        .filter(Boolean)
+        .map((w) => (typeof w === 'string' ? w.toLowerCase() : ''))
+        .filter(Boolean));
+    // Check if word is in word bank (case-insensitive)
+    const normalizedWordBank = wordBank.map((w) => w.toLowerCase());
+    const usedWordsFromBank = new Set([...usedWords].filter((w) => normalizedWordBank.includes(w)));
+    return (_jsxs("div", { className: `grid h-full grid-cols-1 gap-4 sm:gap-6 ${!isReviewMode ? 'lg:grid-cols-2' : ''}`, children: [_jsxs("div", { className: "flex flex-col gap-4 overflow-y-auto p-3 sm:pb-6 sm:pr-6 sm:pt-6 lg:pr-6", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode }), _jsx(MainImage, { imageUrl: imageUrl }), _jsx(WordBank, { words: wordBank, usedWords: new Set(wordBank.filter((w) => usedWordsFromBank.has(w.toLowerCase()))) })] }), _jsx("div", { className: "flex flex-col gap-4 overflow-y-auto p-3 sm:pb-6 sm:pl-2 sm:pt-6", children: _jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-4 shadow-sm", children: [_jsx("p", { className: "mb-4 text-sm font-semibold text-gray-700", children: "Write the correct word for each number:" }), _jsx("div", { className: "flex flex-col gap-4", children: labels.map((label) => (_jsx(LabelInputItem, { label: label, value: answers[label.id] || '', onChange: (value) => onAnswerChange(label.id, value), isReviewMode: isReviewMode, wordBank: wordBank }, label.id))) })] }) })] }));
+}

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

@@ -1 +1,42 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Fragment as t}from"react";import{ResolvedImage as l}from"../../../../../components/common/ResolvedImage";import a from"../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import s from"../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner";import o from"../../../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer";import n from"../../../../../components/themes/cambridge-yle/CambridgeYleExampleText";function i(l){return l.split("\n").map((l,a)=>r(t,{children:[a>0?e("br",{}):null,l]},a))}export function MoversListenAndWriteRenderer({partNumber:t,partName:d,questionCount:m,instruction:c,imageUrl:b,audioUrl:x,title:p,exampleText:u,exampleHighlight:h,questions:g,answers:f,onAnswerChange:w,isReviewMode:N=!1,showHints:v=!1,groupContent:y,groupTitle:C}){const A=!!(x||b||y||u);return r("div",{className:"flex flex-col h-full gap-4 sm:gap-6 overflow-y-auto custom-scrollbar relative",children:[r("div",{className:"flex flex-col gap-2 sm:gap-3 p-3 sm:px-6 sm:pt-4",children:[e(a,{partNumber:t,questionCount:m,partName:d,isReviewMode:N}),e(s,{instruction:c,hasExample:!!u,isReviewMode:N})]}),A&&r("div",{className:"flex flex-col gap-2 sm:gap-3 p-3 sm:px-6 sm:pt-0 sticky top-0 z-20 bg-white/95 backdrop-blur pb-2 shadow-sm border-b border-gray-100",children:[x&&e(o,{audioSrc:x,compact:!0}),r("div",{className:"max-h-[35vh] overflow-y-auto custom-scrollbar pr-2 flex flex-col gap-3",children:[b&&e("div",{className:"flex items-center justify-center",children:e(l,{src:b,alt:"Shared illustration",className:"max-h-[200px] rounded-lg object-contain shadow-md"})}),y&&r("div",{className:"rounded-lg bg-amber-50 p-3 text-sm leading-relaxed text-gray-700 shadow-inner",children:[C&&e("h3",{className:"mb-2 font-semibold text-gray-800",children:C}),y]})]}),u&&e(n,{text:u,highlightedWord:h||""})]}),r("div",{className:"flex flex-col gap-4 p-3 sm:gap-6 sm:pb-6 sm:px-6",children:[p&&e("h2",{className:"text-center text-3xl font-bold uppercase text-coral-500",children:p}),e("div",{className:"flex flex-col gap-6 sm:gap-8",children:g.map(t=>{const a=t.isExample||!1,s=N||a,n=a&&t.correctAnswer?t.correctAnswer:f[t.id]||"",d=(f[t.id]||"").trim().toLowerCase(),m=(t.correctAnswer||"").trim().toLowerCase(),c=!!d,b=N&&!a&&c&&d===m,x=N&&!a&&c&&d!==m;return r("div",{id:`question-${t.id}`,className:"flex flex-col gap-4 rounded-2xl border p-4 sm:p-6 transition-all duration-200 hover:shadow-md "+(a?"border-amber-300 bg-amber-50/60 shadow-xs":"border-slate-200/80 bg-white shadow-xs hover:border-blue-300"),children:[r("div",{className:"flex items-center justify-between border-b border-slate-100 pb-3",children:[r("div",{className:"flex items-center gap-2",children:[e("span",{className:"inline-flex items-center justify-center rounded-full px-3.5 py-1 text-sm font-bold text-white shadow-xs "+(a?"bg-amber-500":N?b?"bg-emerald-500":x?"bg-rose-500":"bg-[#001590]":"bg-[#001590]"),children:a?"Ví dụ":`${t.questionNumber}.`}),a&&e("span",{className:"rounded-md bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700",children:"Example"})]}),N&&!a&&e("div",{children:e("span",b?{className:"inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-semibold text-emerald-700 border border-emerald-200",children:"✓ Đúng"}:x?{className:"inline-flex items-center gap-1 rounded-full bg-rose-50 px-2.5 py-0.5 text-xs font-semibold text-rose-700 border border-rose-200",children:"✕ Chưa đúng"}:{className:"inline-flex items-center gap-1 rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-600",children:"Chưa trả lời"})})]}),t.audioUrl&&e("div",{className:"w-full my-1",children:e(o,{audioSrc:t.audioUrl,compact:!0,dense:!0})}),t.imageUrl&&e("div",{className:"flex items-center justify-center rounded-xl bg-slate-50/80 p-3 border border-slate-100 max-w-md mx-auto w-full",children:e(l,{src:t.imageUrl,alt:`Question ${t.questionNumber} illustration`,className:"max-h-[200px] sm:max-h-[220px] w-auto rounded-lg object-contain drop-shadow-xs"})}),r("div",{className:"text-base sm:text-lg leading-relaxed text-slate-800 pt-1",children:[t.textBefore&&e("span",{className:"font-medium",children:i(t.textBefore)}),e("span",{className:"mx-1 inline-block w-[7.5rem] max-w-[40%] min-w-[5.5rem] align-baseline sm:w-[8.5rem]",children:e("input",{type:"text",value:n,onChange:e=>w(t.id,e.target.value),disabled:s,placeholder:a?"":"...",className:`w-full rounded-md border-2 px-2 py-1 text-center text-sm font-semibold outline-none transition-all sm:text-base ${a?"border-amber-300 bg-amber-100/50 text-amber-800 disabled:opacity-100":N?b?"border-emerald-400 bg-emerald-50 text-emerald-800":"border-rose-400 bg-rose-50 text-rose-800":"border-blue-200 bg-blue-50/30 text-blue-900 focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-100"} ${s?"disabled:cursor-not-allowed disabled:opacity-75":""}`})}),t.textAfter&&e("span",{className:"font-medium",children:i(t.textAfter)}),t.verbHint&&r("span",{className:"ml-1 italic text-slate-500 font-normal",children:["(",t.verbHint,")"]})]}),v&&t.hints&&t.hints.length>0&&!N&&r("div",{className:"flex flex-wrap items-center gap-2 pt-2 border-t border-slate-100",children:[e("span",{className:"text-xs font-medium text-slate-500",children:"Gợi ý:"}),t.hints.map((r,l)=>e("button",{type:"button",onClick:()=>w(t.id,r),className:"rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700 shadow-2xs transition-all hover:bg-blue-600 hover:text-white hover:border-blue-600 active:scale-95",children:r},l))]}),N&&!a&&t.correctAnswer&&e("div",{className:"mt-1 rounded-lg bg-emerald-50/80 p-2.5 text-sm border border-emerald-200/80",children:r("span",{className:"font-semibold text-emerald-800",children:["Đáp án đúng: ",e("span",{className:"font-bold underline",children:t.correctAnswer})]})})]},t.id)})})]})]})}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { ResolvedImage } from '../../../../../components/common/ResolvedImage';
+import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+import CambridgeYleAudioPlayer from '../../../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer';
+import CambridgeYleExampleText from '../../../../../components/themes/cambridge-yle/CambridgeYleExampleText';
+/** Preserve author newlines in fill-blank stems by mapping `\n` → `<br />`. */
+function renderTextWithLineBreaks(text) {
+    const lines = text.split('\n');
+    return lines.map((line, index) => (_jsxs(Fragment, { children: [index > 0 ? _jsx("br", {}) : null, line] }, index)));
+}
+export function MoversListenAndWriteRenderer({ partNumber, partName, questionCount, instruction, imageUrl, audioUrl, title, exampleText, exampleHighlight, questions, answers, onAnswerChange, isReviewMode = false, showHints = false, groupContent, groupTitle, }) {
+    const hasGroupContent = !!(audioUrl || imageUrl || groupContent || exampleText);
+    return (_jsxs("div", { className: "flex flex-col h-full gap-4 sm:gap-6 overflow-y-auto custom-scrollbar relative", children: [_jsxs("div", { className: "flex flex-col gap-2 sm:gap-3 p-3 sm:px-6 sm:pt-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, hasExample: !!exampleText, isReviewMode: isReviewMode })] }), hasGroupContent && (_jsxs("div", { className: "flex flex-col gap-2 sm:gap-3 p-3 sm:px-6 sm:pt-0 sticky top-0 z-20 bg-white/95 backdrop-blur pb-2 shadow-sm border-b border-gray-100", children: [audioUrl && _jsx(CambridgeYleAudioPlayer, { audioSrc: audioUrl, compact: true }), _jsxs("div", { className: "max-h-[35vh] overflow-y-auto custom-scrollbar pr-2 flex flex-col gap-3", children: [imageUrl && (_jsx("div", { className: "flex items-center justify-center", children: _jsx(ResolvedImage, { src: imageUrl, alt: "Shared illustration", className: "max-h-[200px] rounded-lg object-contain shadow-md" }) })), groupContent && (_jsxs("div", { className: "rounded-lg bg-amber-50 p-3 text-sm leading-relaxed text-gray-700 shadow-inner", children: [groupTitle && _jsx("h3", { className: "mb-2 font-semibold text-gray-800", children: groupTitle }), groupContent] }))] }), exampleText && (_jsx(CambridgeYleExampleText, { text: exampleText, highlightedWord: exampleHighlight || '' }))] })), _jsxs("div", { className: "flex flex-col gap-4 p-3 sm:gap-6 sm:pb-6 sm:px-6", children: [title && (_jsx("h2", { className: "text-center text-3xl font-bold uppercase text-coral-500", children: title })), _jsx("div", { className: "flex flex-col gap-6 sm:gap-8", children: questions.map((question) => {
+                            const isExampleQ = question.isExample || false;
+                            const isDisabled = isReviewMode || isExampleQ;
+                            const displayValue = isExampleQ && question.correctAnswer ? question.correctAnswer : (answers[question.id] || '');
+                            const rawUserAnswer = (answers[question.id] || '').trim().toLowerCase();
+                            const rawCorrectAnswer = (question.correctAnswer || '').trim().toLowerCase();
+                            const hasAnswer = !!rawUserAnswer;
+                            const isCorrect = isReviewMode && !isExampleQ && hasAnswer && rawUserAnswer === rawCorrectAnswer;
+                            const isWrong = isReviewMode && !isExampleQ && hasAnswer && rawUserAnswer !== rawCorrectAnswer;
+                            return (_jsxs("div", { id: `question-${question.id}`, className: `flex flex-col gap-4 rounded-2xl border p-4 sm:p-6 transition-all duration-200 hover:shadow-md ${isExampleQ
+                                    ? 'border-amber-300 bg-amber-50/60 shadow-xs'
+                                    : 'border-slate-200/80 bg-white shadow-xs hover:border-blue-300'}`, children: [_jsxs("div", { className: "flex items-center justify-between border-b border-slate-100 pb-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: `inline-flex items-center justify-center rounded-full px-3.5 py-1 text-sm font-bold text-white shadow-xs ${isExampleQ
+                                                            ? 'bg-amber-500'
+                                                            : isReviewMode
+                                                                ? isCorrect
+                                                                    ? 'bg-emerald-500'
+                                                                    : isWrong
+                                                                        ? 'bg-rose-500'
+                                                                        : 'bg-[#001590]'
+                                                                : 'bg-[#001590]'}`, children: isExampleQ ? `Ví dụ` : `${question.questionNumber}.` }), isExampleQ && (_jsx("span", { className: "rounded-md bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: "Example" }))] }), isReviewMode && !isExampleQ && (_jsx("div", { children: isCorrect ? (_jsx("span", { className: "inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-semibold text-emerald-700 border border-emerald-200", children: "\u2713 \u0110\u00FAng" })) : isWrong ? (_jsx("span", { className: "inline-flex items-center gap-1 rounded-full bg-rose-50 px-2.5 py-0.5 text-xs font-semibold text-rose-700 border border-rose-200", children: "\u2715 Ch\u01B0a \u0111\u00FAng" })) : (_jsx("span", { className: "inline-flex items-center gap-1 rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-600", children: "Ch\u01B0a tr\u1EA3 l\u1EDDi" })) }))] }), question.audioUrl && (_jsx("div", { className: "w-full my-1", children: _jsx(CambridgeYleAudioPlayer, { audioSrc: question.audioUrl, compact: true, dense: true }) })), question.imageUrl && (_jsx("div", { className: "flex items-center justify-center rounded-xl bg-slate-50/80 p-3 border border-slate-100 max-w-md mx-auto w-full", children: _jsx(ResolvedImage, { src: question.imageUrl, alt: `Question ${question.questionNumber} illustration`, className: "max-h-[200px] sm:max-h-[220px] w-auto rounded-lg object-contain drop-shadow-xs" }) })), _jsxs("div", { className: "text-base sm:text-lg leading-relaxed text-slate-800 pt-1", children: [question.textBefore && (_jsx("span", { className: "font-medium", children: renderTextWithLineBreaks(question.textBefore) })), _jsx("span", { className: "mx-1 inline-block w-[7.5rem] max-w-[40%] min-w-[5.5rem] align-baseline sm:w-[8.5rem]", children: _jsx("input", { type: "text", value: displayValue, onChange: (e) => onAnswerChange(question.id, e.target.value), disabled: isDisabled, placeholder: isExampleQ ? '' : '...', className: `w-full rounded-md border-2 px-2 py-1 text-center text-sm font-semibold outline-none transition-all sm:text-base ${isExampleQ
+                                                        ? 'border-amber-300 bg-amber-100/50 text-amber-800 disabled:opacity-100'
+                                                        : isReviewMode
+                                                            ? isCorrect
+                                                                ? 'border-emerald-400 bg-emerald-50 text-emerald-800'
+                                                                : 'border-rose-400 bg-rose-50 text-rose-800'
+                                                            : 'border-blue-200 bg-blue-50/30 text-blue-900 focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-100'} ${isDisabled ? 'disabled:cursor-not-allowed disabled:opacity-75' : ''}` }) }), question.textAfter && (_jsx("span", { className: "font-medium", children: renderTextWithLineBreaks(question.textAfter) })), question.verbHint && (_jsxs("span", { className: "ml-1 italic text-slate-500 font-normal", children: ["(", question.verbHint, ")"] }))] }), showHints && question.hints && question.hints.length > 0 && !isReviewMode && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 pt-2 border-t border-slate-100", children: [_jsx("span", { className: "text-xs font-medium text-slate-500", children: "G\u1EE3i \u00FD:" }), question.hints.map((hint, idx) => (_jsx("button", { type: "button", onClick: () => onAnswerChange(question.id, hint), className: "rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700 shadow-2xs transition-all hover:bg-blue-600 hover:text-white hover:border-blue-600 active:scale-95", children: hint }, idx)))] })), isReviewMode && !isExampleQ && question.correctAnswer && (_jsx("div", { className: "mt-1 rounded-lg bg-emerald-50/80 p-2.5 text-sm border border-emerald-200/80", children: _jsxs("span", { className: "font-semibold text-emerald-800", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", _jsx("span", { className: "font-bold underline", children: question.correctAnswer })] }) }))] }, question.id));
+                        }) })] })] }));
+}