@tinyweb_dev/oe-exam-sdk 1.0.9 → 1.0.10

package/dist/components/exams/take/components/QuestionRenderer.js

@@ -102,7 +102,7 @@ export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode =
         }
         case 'CROSSWORD_PUZZLE': {
             const data = transformCrosswordPuzzle(questions);
-            return (_jsx(MoversCrosswordPuzzleRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, title: data.title, gridSize: data.gridSize, clues: data.clues, answers: answers, correctAnswers: data.correctAnswers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+            return (_jsx(MoversCrosswordPuzzleRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, title: data.title, gridSize: data.gridSize, markedColumn: data.markedColumn, hiddenWord: data.hiddenWord, clues: data.clues, answers: answers, correctAnswers: data.correctAnswers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, caseSensitive: data.caseSensitive }));
         }
         case 'IMAGE_OBJECT_MATCHING': {
             // Reuse coloring renderer — same content structure as READ_AND_COLOR_OBJECTS
@@ -125,10 +125,6 @@ export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode =
                     onAnswerChange(regionId, hintItemId);
                 }, isReviewMode: isReviewMode }));
         }
-        case 'CROSSWORD_PUZZLE': {
-            const data = transformCrosswordPuzzle(questions);
-            return (_jsx(MoversCrosswordPuzzleRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, title: data.title, gridSize: data.gridSize, clues: data.clues, answers: answers, correctAnswers: data.correctAnswers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
-        }
         case 'SORT_WORDS_INTO_CATEGORIES': {
             const data = transformSortWordsIntoCategories(questions);
             const gradableCount = data.words.filter((word) => !word.isExample).length;

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

@@ -8,9 +8,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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);
-}
+import { tokenizeCrossOutQuestion } from '../../../../questions/types/cross-out-word-group/tokenize';
 function normalizeWord(word) {
     return word.replace(/[^\p{L}\p{N}'-]/gu, '').toLowerCase();
 }
@@ -27,12 +25,20 @@ function formatAnswerLabel(answer) {
         return 'câu đúng (không gạch)';
     return `gạch "${answer.crossOut}"${posInfo}`;
 }
+function isCorrectToken(correct, tokenIndex, plain) {
+    if (!correct)
+        return false;
+    if (typeof correct.wordIndex === 'number' && correct.wordIndex >= 0) {
+        return correct.wordIndex === tokenIndex;
+    }
+    return Boolean(correct.crossOut) && normalizeWord(correct.crossOut) === plain && plain !== '';
+}
 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 tokens = useMemo(() => tokenizeCrossOutQuestion(question.question), [question.question]);
     const selectedWord = currentAnswer?.crossOut || '';
     const selectedIndex = currentAnswer?.wordIndex;
     const replaceWith = currentAnswer?.replaceWith || '';
@@ -76,11 +82,10 @@ function QuestionItem({ question, answer, onAnswerChange, isReviewMode, correctA
             });
         }
         else {
-            const cleanWord = rawToken.replace(/[^\p{L}\p{N}'-]/gu, '') || rawToken;
             onAnswerChange(question.id, {
                 type: mode,
                 wordIndex: tokenIndex,
-                crossOut: cleanWord,
+                crossOut: rawToken,
                 ...(mode === 'CROSS_OUT_AND_REPLACE' ? { replaceWith } : {}),
             });
         }
@@ -109,9 +114,9 @@ function QuestionItem({ question, answer, onAnswerChange, isReviewMode, correctA
                                             ? '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-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" })), isReviewMode ? (_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) => {
+                                        : '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' })) : null, !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
@@ -119,12 +124,21 @@ function QuestionItem({ question, answer, onAnswerChange, isReviewMode, correctA
                         const isCorrectTargetInReview = isReviewMode &&
                             !question.isExample &&
                             correctAnswer?.wordIndex === tokenIndex;
+                        const isSelectedCorrect = isReviewMode &&
+                            !question.isExample &&
+                            isSelected &&
+                            isCorrectToken(correctAnswer, tokenIndex, plain);
+                        const isSelectedWrong = isReviewMode &&
+                            !question.isExample &&
+                            isSelected &&
+                            !!correctAnswer &&
+                            !isSelectedCorrect;
                         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
+                                    : isSelectedCorrect
                                         ? 'bg-emerald-100 text-emerald-800 font-bold line-through decoration-emerald-600 decoration-2 shadow-sm border border-emerald-300'
-                                        : isWrong
+                                        : isSelectedWrong
                                             ? '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

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

@@ -307,5 +307,5 @@ export function MoversCrosswordPuzzleRenderer({ partNumber, partName, questionCo
                                                                 inputRefs.current.delete(key);
                                                         }, type: "text", maxLength: 1, disabled: Boolean(isExample), value: cellValue, onChange: (e) => handleInputChange(e.target.value, r, c), onKeyDown: (e) => handleKeyDown(e, r, c), onFocus: () => handleCellClick(r, c), className: `w-full h-full text-center bg-transparent uppercase font-bold outline-none ${isExample ? 'cursor-default' : 'cursor-pointer'}` })) : (_jsxs("div", { className: "flex flex-col items-center justify-center", children: [_jsx("span", { children: cellValue || '—' }), reviewStatus && !reviewStatus.isCorrect && (_jsx("span", { className: "absolute -bottom-1 -right-1 text-[9px] bg-green-600 text-white font-bold px-1 rounded-full shadow", children: reviewStatus.expected }))] })), isReviewMode && reviewStatus && (_jsx("span", { className: `absolute -top-1 -right-1 rounded-full p-0.5 text-white ${reviewStatus.isCorrect ? 'bg-green-500' : 'bg-red-500'}`, children: reviewStatus.isCorrect ? (_jsx(Check, { className: "h-2.5 w-2.5" })) : (_jsx(X, { className: "h-2.5 w-2.5" })) }))] }, key));
                                         });
-                                    }) }) })] })] })] }));
+                                    }) }) }), (markedColumn || hiddenWord) && (_jsxs("div", { className: "w-full max-w-md rounded-xl border-2 border-amber-200 bg-amber-50 p-4", children: [_jsx("label", { className: "block text-sm font-bold text-amber-900 mb-2", children: "What's the hidden word?" }), !isReviewMode ? (_jsx("input", { type: "text", value: answers['hidden-word'] || '', onChange: (event) => onAnswerChange('hidden-word', event.target.value.toUpperCase()), placeholder: "Hidden word", className: "w-full rounded-lg border border-amber-300 bg-white px-3 py-2 text-sm font-semibold uppercase tracking-wider outline-none focus:border-amber-500" })) : (_jsxs("div", { className: "text-sm", children: [answers['hidden-word'] && (_jsx("span", { className: "font-semibold text-gray-800", children: answers['hidden-word'] })), hiddenWord && (_jsxs("div", { className: "mt-1 text-xs", children: [_jsx("span", { className: "text-gray-500", children: "\u0110\u00E1p \u00E1n: " }), _jsx("span", { className: "font-bold text-green-700", children: hiddenWord })] }))] }))] }))] })] })] }));
 }

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

@@ -8,6 +8,7 @@ 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 { FillInBlankAnswerKey } from '../../../../questions/types/fill-in-blank-group/FillInBlankAnswerKey';
 import { extractPlaceholderIndices, isBlankMatch, padStudentAnswers, splitStem, toFillInBlankImageUrls, } from '../../../../questions/types/fill-in-blank-group/blank-utils';
 function emptyAnswer(blankCount) {
     return { answers: Array.from({ length: blankCount }, () => '') };
@@ -53,7 +54,7 @@ function ItemCard({ question, answer, onAnswerChange, isReviewMode, correctAnswe
                                         : blankWrong
                                             ? 'border-rose-400 bg-rose-50 text-rose-800'
                                             : 'border-blue-200 bg-blue-50/40 text-blue-900 focus:border-blue-500 focus:bg-white'}` }, partIndex));
-                        }) })] }), isReviewMode && !question.isExample && expected.length > 0 && (_jsxs("div", { className: "mt-2 rounded-lg border border-emerald-200 bg-emerald-50 px-2.5 py-2 text-sm text-emerald-800", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", expected.map((alts) => alts.join(' / ') || '(trống)').join(' | ')] }))] }));
+                        }) })] }), isReviewMode && !question.isExample && expected.length > 0 && (_jsx("div", { className: "mt-2 rounded-lg border border-emerald-200 bg-emerald-50 px-2.5 py-2", children: _jsx(FillInBlankAnswerKey, { answersByBlank: expected, blankIndices: blankIndices }) }))] }));
 }
 export function MoversFillInBlankGroupRenderer({ partNumber, partName, questionCount, instruction, audioUrl, imageUrl, showHints = false, hints = [], questions, answers, onAnswerChange, isReviewMode = false, correctAnswerMap, }) {
     return (_jsxs("div", { className: "relative flex h-full flex-col gap-4 overflow-y-auto custom-scrollbar sm:gap-6", children: [_jsxs("div", { className: "flex flex-col gap-2 p-3 sm:gap-3 sm:px-6 sm:pt-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode })] }), (audioUrl || toFillInBlankImageUrls(imageUrl).length > 0) && (_jsxs("div", { className: "sticky top-0 z-20 flex flex-col gap-3 border-b border-gray-100 bg-white/95 p-3 pb-2 shadow-sm backdrop-blur sm:px-6", children: [audioUrl && _jsx(CambridgeYleAudioPlayer, { audioSrc: audioUrl, compact: true }), toFillInBlankImageUrls(imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: toFillInBlankImageUrls(imageUrl).map((url, imageIndex) => (_jsx(ResolvedImage, { src: url, alt: `Shared illustration ${imageIndex + 1}`, className: "max-h-[180px] rounded-lg object-contain" }, `group-image-${imageIndex}`))) }))] })), showHints && hints.length > 0 && !isReviewMode && (_jsx("div", { className: "flex flex-wrap gap-2 px-3 sm:px-6", children: hints.map((hint) => (_jsx("span", { className: "rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700", children: hint }, hint))) })), _jsx("div", { className: "grid grid-cols-1 gap-3 p-3 sm:grid-cols-2 sm:px-6 lg:grid-cols-3", children: questions.map((question) => (_jsx(ItemCard, { question: question, answer: answers[question.id], onAnswerChange: onAnswerChange, isReviewMode: isReviewMode, correctAnswer: correctAnswerMap?.[question.id] }, question.id))) })] }));

package/dist/components/exams/take/components/speaking/renderers/SpeakingSpontaneousQaGroupRenderer.js

@@ -37,14 +37,24 @@ export function SpeakingSpontaneousQaGroupRenderer(props) {
     useEffect(() => {
         setSequenceStep(getInitialSequenceStep());
     }, [getInitialSequenceStep, setup.nav.currentIndex]);
+    const hasQuestionAudio = Boolean(content?.audioUrl?.trim());
     useEffect(() => {
         if (sequenceStep !== SPONTANEOUS_QA_SEQUENCE_STEP.DELAYING || shouldResumeCompletedState)
             return;
         const timer = setTimeout(() => {
-            setSequenceStep(SPONTANEOUS_QA_SEQUENCE_STEP.PLAYING_QUESTION);
+            setSequenceStep(hasQuestionAudio
+                ? SPONTANEOUS_QA_SEQUENCE_STEP.PLAYING_QUESTION
+                : SPONTANEOUS_QA_SEQUENCE_STEP.ALLOW_RECORDING);
         }, 3000);
         return () => clearTimeout(timer);
-    }, [sequenceStep, shouldResumeCompletedState]);
+    }, [hasQuestionAudio, sequenceStep, shouldResumeCompletedState]);
+    useEffect(() => {
+        if (sequenceStep === SPONTANEOUS_QA_SEQUENCE_STEP.PLAYING_QUESTION &&
+            !hasQuestionAudio &&
+            !shouldResumeCompletedState) {
+            setSequenceStep(SPONTANEOUS_QA_SEQUENCE_STEP.ALLOW_RECORDING);
+        }
+    }, [hasQuestionAudio, sequenceStep, shouldResumeCompletedState]);
     const handleTeacherVideoEnded = useCallback(() => {
         setSequenceStep(SPONTANEOUS_QA_SEQUENCE_STEP.DELAYING);
         props.onTeacherIntroPlayed?.();

package/dist/components/exams/take/hooks/useSpontaneousQaGroupRendererSetup.js

@@ -27,8 +27,9 @@ export function useSpontaneousQaGroupRendererSetup({ part, answers, onAnswerChan
                 flattenIndex: child.flattenIndex,
                 expectedAnswers: child.expectedAnswers,
                 points: child.points,
+                isExample: child.isExample,
             },
-            is_example: false,
+            is_example: child.isExample,
             correct_answer: { expectedAnswers: child.expectedAnswers },
             total_points: String(child.points),
             question_type: 'SPONTANEOUS_QA_GROUP',

package/dist/components/exams/take/utils/answer-transformers.js

@@ -263,6 +263,16 @@ export function transformAnswersForSubmission(answers, parts) {
         if (speakingQuestionIds.has(questionId) && typeof answer === 'string') {
             continue;
         }
+        if (questionId === 'hidden-word') {
+            const parent = findGridParentQuestion(parts);
+            if (parent?.questionType === 'CROSSWORD_PUZZLE') {
+                if (!gridCellAnswers.has(parent.parentId)) {
+                    gridCellAnswers.set(parent.parentId, {});
+                }
+                gridCellAnswers.get(parent.parentId)['hidden-word'] = String(answer);
+            }
+            continue;
+        }
         // Handle grid cell keys (from FILL_MISSING_WORDS_IN_GRID)
         if (isGridCellKey(questionId)) {
             const parent = findGridParentQuestion(parts);
@@ -454,9 +464,14 @@ export function transformAnswersForSubmission(answers, parts) {
                     words[`down-${c.number}`] = word;
                 }
             }
+            const hiddenWord = cellAnswers['hidden-word'];
+            const cells = Object.fromEntries(Object.entries(cellAnswers).filter(([key]) => key !== 'hidden-word'));
+            if (hiddenWord) {
+                words['hidden-word'] = hiddenWord;
+            }
             result.push({
                 questionId: parentId,
-                answer: { answers: words, cells: cellAnswers },
+                answer: { answers: words, cells },
             });
         }
         else {

package/dist/components/exams/take/utils/cross-out-word-group.transformer.js

@@ -63,21 +63,19 @@ export function normalizeCrossOutWordGroupAnswer(raw) {
         const rawIndex = obj.wordIndex;
         const wordIndex = typeof rawIndex === 'number' && Number.isInteger(rawIndex) && rawIndex >= 0
             ? rawIndex
-            : rawIndex === null
-                ? null
-                : undefined;
+            : null;
         return type === 'CROSS_OUT_AND_REPLACE'
             ? {
                 type,
-                ...(wordIndex !== undefined ? { wordIndex } : {}),
+                wordIndex,
                 crossOut: typeof obj.crossOut === 'string' ? obj.crossOut : '',
                 replaceWith: typeof obj.replaceWith === 'string' ? obj.replaceWith : '',
             }
             : {
                 type: 'CROSS_OUT',
-                ...(wordIndex !== undefined ? { wordIndex } : {}),
+                wordIndex,
                 crossOut: typeof obj.crossOut === 'string' ? obj.crossOut : '',
             };
     }
-    return { type: 'CROSS_OUT', crossOut: '' };
+    return { type: 'CROSS_OUT', wordIndex: null, crossOut: '' };
 }

package/dist/components/exams/take/utils/question-transformers.d.ts

@@ -472,14 +472,19 @@ export interface CrosswordClueItem {
     startRow: number;
     startCol: number;
     length: number;
+    isExample?: boolean;
 }
 export interface CrosswordPuzzlePartData {
+    type?: 'STANDARD' | 'HIDDEN_WORD';
     title?: string;
     instruction: string;
     gridSize: {
         rows: number;
         cols: number;
     };
+    markedColumn?: number;
+    hiddenWord?: string;
+    caseSensitive?: boolean;
     clues: {
         across: CrosswordClueItem[];
         down: CrosswordClueItem[];

package/dist/components/exams/take/utils/question-transformers.js

@@ -1258,6 +1258,7 @@ export function transformCrosswordPuzzle(questions) {
             startRow: Number(c.startRow) || 1,
             startCol: Number(c.startCol) || 1,
             length: Number(c.length) || 1,
+            ...(c.isExample === true ? { isExample: true } : {}),
         }))
         : [];
     const down = Array.isArray(content?.clues?.down)
@@ -1267,15 +1268,20 @@ export function transformCrosswordPuzzle(questions) {
             startRow: Number(c.startRow) || 1,
             startCol: Number(c.startCol) || 1,
             length: Number(c.length) || 1,
+            ...(c.isExample === true ? { isExample: true } : {}),
         }))
         : [];
     const correctAnswers = correctAnswer?.answers && typeof correctAnswer.answers === 'object'
         ? correctAnswer.answers
         : {};
     return {
+        type: content?.type === 'HIDDEN_WORD' ? 'HIDDEN_WORD' : 'STANDARD',
         title: content?.title || '',
         instruction: question?.instruction || content?.instruction || 'Complete the crossword.',
         gridSize: { rows, cols },
+        ...(typeof content?.markedColumn === 'number' ? { markedColumn: content.markedColumn } : {}),
+        hiddenWord: correctAnswers['hidden-word'] || '',
+        caseSensitive: correctAnswer?.caseSensitive === true,
         clues: { across, down },
         correctAnswers,
         explanation: question?.explanation,

package/dist/components/questions/_shared/components/compact/KidChoiceRow.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export declare function optionLetter(index: number): string;
+export declare function KidChoiceRow({ letter, selected, isReviewMode, isCorrect, disabled, onClick, children, className, }: {
+    letter: string;
+    selected?: boolean;
+    isReviewMode?: boolean;
+    isCorrect?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/questions/_shared/components/compact/KidChoiceRow.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, X } from 'lucide-react';
+import { cn } from '../../../../../shared/lib/utils';
+export function optionLetter(index) {
+    return String.fromCharCode(65 + index);
+}
+export function KidChoiceRow({ letter, selected = false, isReviewMode = false, isCorrect = false, disabled = false, onClick, children, className, }) {
+    const showStatus = isReviewMode && (isCorrect || selected);
+    const rowTone = isReviewMode
+        ? isCorrect
+            ? 'border-green-400 bg-green-50'
+            : selected
+                ? 'border-red-400 bg-red-50'
+                : 'border-gray-200 bg-gray-50'
+        : selected
+            ? 'border-blue-500 bg-blue-50 shadow-sm ring-2 ring-blue-100'
+            : 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50 hover:shadow-sm';
+    const badgeTone = isReviewMode
+        ? isCorrect
+            ? 'bg-green-500 text-white'
+            : selected
+                ? 'bg-red-500 text-white'
+                : 'bg-gray-200 text-gray-600'
+        : selected
+            ? 'bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-sm'
+            : 'bg-gray-100 text-gray-600 group-hover:bg-gray-200';
+    return (_jsxs("button", { type: "button", onClick: onClick, disabled: disabled || isReviewMode || !onClick, className: cn('group flex w-full items-center gap-2 rounded-md border px-3 py-1.5 text-left transition-all', rowTone, (disabled || isReviewMode || !onClick) && 'cursor-default', className), children: [_jsx("div", { className: cn('flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full text-xs font-bold transition-all', badgeTone), children: letter }), _jsx("div", { className: cn('min-w-0 flex-1 text-sm font-medium', isReviewMode && isCorrect
+                    ? 'text-green-800'
+                    : isReviewMode && selected && !isCorrect
+                        ? 'text-red-800'
+                        : 'text-gray-700'), children: children }), showStatus && (_jsx("div", { className: cn('flex h-5 w-5 shrink-0 items-center justify-center rounded-full', isCorrect ? 'bg-green-500' : 'bg-red-500'), children: isCorrect ? _jsx(Check, { className: "h-3 w-3 text-white" }) : _jsx(X, { className: "h-3 w-3 text-white" }) }))] }));
+}

package/dist/components/questions/_shared/components/compact/KidInstruction.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+export declare function KidInstruction({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/questions/_shared/components/compact/KidInstruction.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../../../../shared/lib/utils';
+export function KidInstruction({ children, className, }) {
+    if (!children) {
+        return null;
+    }
+    return (_jsx("div", { className: cn('rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800', className), children: children }));
+}

package/dist/components/questions/_shared/components/compact/KidPrompt.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+export declare function KidPrompt({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/questions/_shared/components/compact/KidPrompt.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../../../../shared/lib/utils';
+export function KidPrompt({ children, className, }) {
+    if (!children) {
+        return null;
+    }
+    return (_jsx("div", { className: cn('rounded-md border border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 px-3 py-2 text-sm font-semibold text-gray-800', className), children: children }));
+}

package/dist/components/questions/_shared/components/compact/KidQuestionCard.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export declare function KidQuestionCard({ icon, title, points, isExample, review, headerExtra, children, className, contentClassName, }: {
+    icon?: ReactNode;
+    title: string;
+    points?: number;
+    isExample?: boolean;
+    review?: 'correct' | 'wrong' | null;
+    headerExtra?: ReactNode;
+    children: ReactNode;
+    className?: string;
+    contentClassName?: string;
+}): import("react").JSX.Element;

package/dist/components/questions/_shared/components/compact/KidQuestionCard.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, CircleHelp, Star, X } from 'lucide-react';
+import { cn } from '../../../../../shared/lib/utils';
+export function KidQuestionCard({ icon, title, points, isExample = false, review, headerExtra, children, className, contentClassName, }) {
+    return (_jsxs("div", { className: cn('overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm', className), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-3 py-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: icon ?? _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsx("span", { className: "truncate text-sm font-medium text-gray-700", children: title }), isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "C\u00E2u v\u00ED d\u1EE5"] }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [headerExtra, typeof points === 'number' && (_jsxs("span", { className: "text-xs text-gray-500", children: [points, " \u0111i\u1EC3m"] })), review === 'correct' && (_jsxs("div", { className: "flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-700", children: [_jsx(Check, { className: "h-3 w-3" }), "\u0110\u00FAng"] })), review === 'wrong' && (_jsxs("div", { className: "flex items-center gap-1 rounded-full bg-red-100 px-2 py-0.5 text-xs font-semibold text-red-700", children: [_jsx(X, { className: "h-3 w-3" }), "Sai"] }))] })] }), _jsx("div", { className: cn('space-y-3 p-3', contentClassName), children: children })] }));
+}

package/dist/components/questions/_shared/components/compact/index.d.ts

@@ -4,3 +4,7 @@ export { CompactPreviewButton } from './CompactPreviewButton';
 export { CompactCreatorHeader } from './CompactCreatorHeader';
 export { CompactFieldCard } from './CompactFieldCard';
 export { CompactExplanationToggle } from './CompactExplanationToggle';
+export { KidInstruction } from './KidInstruction';
+export { KidPrompt } from './KidPrompt';
+export { KidQuestionCard } from './KidQuestionCard';
+export { KidChoiceRow, optionLetter } from './KidChoiceRow';

package/dist/components/questions/_shared/components/compact/index.js

@@ -4,3 +4,7 @@ export { CompactPreviewButton } from './CompactPreviewButton';
 export { CompactCreatorHeader } from './CompactCreatorHeader';
 export { CompactFieldCard } from './CompactFieldCard';
 export { CompactExplanationToggle } from './CompactExplanationToggle';
+export { KidInstruction } from './KidInstruction';
+export { KidPrompt } from './KidPrompt';
+export { KidQuestionCard } from './KidQuestionCard';
+export { KidChoiceRow, optionLetter } from './KidChoiceRow';

package/dist/components/questions/_shared/types/crossword-puzzle.type.d.ts

@@ -1,13 +1,17 @@
-import type { CrosswordClue, CrosswordPuzzleContent, CrosswordPuzzleCorrectAnswer } from '../../../../shared/types/questions/crossword-puzzle';
+import type { CrosswordClue, CrosswordPuzzleContent, CrosswordPuzzleCorrectAnswer, CrosswordSubtype } from '../../../../shared/types/questions/crossword-puzzle';
 export interface CrosswordClueFormItem extends CrosswordClue {
     id: string;
     answer: string;
     direction: 'across' | 'down';
 }
 export interface CrosswordPuzzleFormState {
+    type?: CrosswordSubtype;
     title?: string;
+    instruction?: string;
     rows: number;
     cols: number;
+    markedColumn?: number;
+    hiddenWord?: string;
     clues: CrosswordClueFormItem[];
     caseSensitive: boolean;
     points: number;

package/dist/components/questions/_shared/types/spontaneous-qa-group.type.d.ts

@@ -6,6 +6,7 @@ export interface SpontaneousQaGroupQuestionData {
     expectedAnswers: string[];
     points: number;
     questionNumber: number;
+    isExample?: boolean;
 }
 export interface SpontaneousQaGroupPartData {
     partNumber: number;
@@ -31,7 +32,23 @@ export interface SpontaneousQaGroupCreatorProps {
         getFormData?: () => SpontaneousQaGroupData;
     } | null>;
 }
+export interface SpontaneousQaGroupStudentAnswer {
+    audioKeys: Array<string | null>;
+}
+export interface SpontaneousQaGroupGradeDetail {
+    itemId: string;
+    isCorrect?: boolean;
+    userAnswer?: unknown;
+    correctAnswer?: unknown;
+    partialScore?: number;
+    feedback?: string;
+}
 export interface SpontaneousQaGroupClientProps {
     questionData: SpontaneousQaGroupData;
     isReviewMode?: boolean;
+    userAnswer?: SpontaneousQaGroupStudentAnswer;
+    onItemRecorded?: (flattenIndex: number, blob: Blob) => void;
+    uploadingIndex?: number | null;
+    gradeDetails?: SpontaneousQaGroupGradeDetail[];
+    disabled?: boolean;
 }

package/dist/components/questions/types/answer-the-question/AnswerTheQuestionClient.js

@@ -1,11 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, CardContent } from '../../../../components/ui/card';
 import { Input } from '../../../../components/ui/input';
-import { Label } from '../../../../components/ui/label';
-import { CheckCircle2, XCircle, BookOpen } from 'lucide-react';
+import { CheckCircle2, XCircle, PenLine } from 'lucide-react';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
 import { toAnswerTheQuestionImageUrls, } from '../../_shared/types/answer-the-question.type';
+import { KidPrompt, KidQuestionCard } from '../../_shared/components/compact';
 import { useState } from 'react';
 function isDisplayableMediaUrl(value) {
     return (value.startsWith('http://')
@@ -33,7 +32,7 @@ export function AnswerTheQuestionClient({ questionData, onSubmit, isReviewMode =
     const [answer, setAnswer] = useState(userAnswer || '');
     const imageUrls = toAnswerTheQuestionImageUrls(questionData.imageUrl);
     if (!questionData.question && imageUrls.length === 0) {
-        return (_jsx(Card, { children: _jsx(CardContent, { className: "p-3", children: _jsx("p", { className: "text-gray-500", children: "Kh\u00F4ng c\u00F3 d\u1EEF li\u1EC7u c\u00E2u h\u1ECFi" }) }) }));
+        return (_jsx(KidQuestionCard, { icon: _jsx(PenLine, { className: "h-3.5 w-3.5" }), title: "Tr\u1EA3 l\u1EDDi c\u00E2u h\u1ECFi", children: _jsx("p", { className: "text-sm text-gray-500", children: "Kh\u00F4ng c\u00F3 d\u1EEF li\u1EC7u c\u00E2u h\u1ECFi" }) }));
     }
     const isExample = questionData.isExample || false;
     const correctAnswer = questionData.correctAnswer || '';
@@ -43,19 +42,19 @@ export function AnswerTheQuestionClient({ questionData, onSubmit, isReviewMode =
     const isCorrect = isReviewMode && userAnswer !== undefined
         ? userAnswer.trim().toLowerCase() === correctAnswer.trim().toLowerCase()
         : undefined;
-    return (_jsx(Card, { className: "overflow-hidden border-0 bg-white shadow-sm", children: _jsxs(CardContent, { className: "p-3 space-y-3", children: [(questionData.title || questionData.groupContent) && (_jsxs("div", { className: "rounded-xl border border-indigo-200 bg-gradient-to-r from-indigo-50 to-blue-50 p-4 space-y-2", children: [questionData.title && (_jsx("h3", { className: "text-base font-bold text-indigo-900", children: questionData.title })), questionData.groupContent && (_jsx("p", { className: "text-sm text-indigo-700 leading-relaxed whitespace-pre-wrap", children: questionData.groupContent }))] })), imageUrls.length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: imageUrls.map((url, imageIndex) => (_jsx("div", { className: "relative max-w-lg overflow-hidden rounded-xl border border-gray-200 bg-gray-50 shadow-sm", children: _jsx(MediaPreview, { src: url, alt: `Question image ${imageIndex + 1}` }) }, `atq-image-${imageIndex}`))) })), _jsxs("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-5", children: [isExample && (_jsxs("div", { className: "mb-2 inline-flex items-center gap-1.5 rounded-full bg-amber-100 border border-amber-300 px-3 py-1", children: [_jsx(BookOpen, { className: "h-3.5 w-3.5 text-amber-600" }), _jsx("span", { className: "text-xs font-semibold text-amber-700 uppercase tracking-wide", children: "Example" })] })), questionData.question ? (_jsx(Label, { className: "text-base font-semibold text-gray-800 mb-3 block", children: questionData.question })) : null, questionData.suggestedAnswers && questionData.suggestedAnswers.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mt-2 mb-1", children: questionData.suggestedAnswers.map((suggestion, index) => (_jsx("button", { type: "button", disabled: isReviewMode || isExample, onClick: () => {
-                                    if (!isReviewMode && !isExample) {
-                                        setAnswer(suggestion);
-                                        onSubmit?.(suggestion);
-                                    }
-                                }, className: `inline-flex items-center rounded-full border px-3 py-1 text-sm font-medium transition-colors ${answer === suggestion
-                                    ? 'border-teal-400 bg-teal-50 text-teal-700 ring-1 ring-teal-200'
-                                    : 'border-gray-200 bg-white text-gray-600 hover:border-teal-300 hover:bg-teal-50/50 hover:text-teal-600'} ${isReviewMode || isExample ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`, children: suggestion }, index))) })), _jsxs("div", { className: "flex items-center gap-3 mt-3", children: [questionData.prefixText && (_jsx("span", { className: "text-base font-medium text-gray-700", children: questionData.prefixText })), _jsx(Input, { value: displayedAnswer, onChange: (e) => {
-                                        setAnswer(e.target.value);
-                                        onSubmit?.(e.target.value);
-                                    }, placeholder: "Vi\u1EBFt \u0111\u00E1p \u00E1n...", disabled: isReviewMode || isExample, className: `max-w-xs border-2 text-lg font-medium ${isReviewMode
-                                        ? isCorrect
-                                            ? 'border-green-400 bg-green-50 text-green-700'
-                                            : 'border-red-400 bg-red-50 text-red-700'
-                                        : 'border-teal-300 focus:border-teal-500 focus:ring-teal-200'}` }), questionData.suffixText && (_jsx("span", { className: "text-base font-medium text-gray-700", children: questionData.suffixText })), isReviewMode && isCorrect !== undefined && (_jsx("span", { className: "flex items-center gap-1", children: isCorrect ? (_jsx(CheckCircle2, { className: "h-5 w-5 text-green-500" })) : (_jsx(XCircle, { className: "h-5 w-5 text-red-500" })) }))] }), isReviewMode && isCorrect === false && (_jsxs("div", { className: "mt-3 flex items-center gap-2 rounded-lg bg-green-50 border border-green-200 px-4 py-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }), _jsxs("span", { className: "text-sm text-green-700", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", _jsx("strong", { children: correctAnswer })] })] })), autoFillCorrectAnswers && (_jsxs("div", { className: "mt-3 flex items-center gap-2 rounded-lg bg-teal-50 border border-teal-200 px-4 py-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-teal-600" }), _jsxs("span", { className: "text-sm text-teal-700", children: ["\u0110\u00E1p \u00E1n: ", _jsx("strong", { children: correctAnswer })] })] }))] }), explanation && isReviewMode && (_jsxs("div", { className: "rounded-xl border border-blue-200 bg-blue-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold text-blue-800 mb-1", children: "Gi\u1EA3i th\u00EDch:" }), _jsx("p", { className: "text-sm text-blue-700", children: explanation })] }))] }) }));
+    return (_jsxs("div", { className: "space-y-3", children: [(questionData.title || questionData.groupContent) && (_jsxs("div", { className: "rounded-xl border border-indigo-200 bg-gradient-to-r from-indigo-50 to-blue-50 p-4 space-y-2", children: [questionData.title && (_jsx("h3", { className: "text-base font-bold text-indigo-900", children: questionData.title })), questionData.groupContent && (_jsx("p", { className: "text-sm text-indigo-700 leading-relaxed whitespace-pre-wrap", children: questionData.groupContent }))] })), _jsxs(KidQuestionCard, { icon: _jsx(PenLine, { className: "h-3.5 w-3.5" }), title: "Tr\u1EA3 l\u1EDDi c\u00E2u h\u1ECFi", points: questionData.points, isExample: isExample, review: isReviewMode && isCorrect !== undefined ? (isCorrect ? 'correct' : 'wrong') : null, children: [imageUrls.length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: imageUrls.map((url, imageIndex) => (_jsx("div", { className: "relative max-w-lg overflow-hidden rounded-md border border-gray-200 bg-gray-50", children: _jsx(MediaPreview, { src: url, alt: `Question image ${imageIndex + 1}` }) }, `atq-image-${imageIndex}`))) })), questionData.question ? (_jsx(KidPrompt, { children: questionData.question })) : null, questionData.suggestedAnswers && questionData.suggestedAnswers.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mt-2 mb-1", children: questionData.suggestedAnswers.map((suggestion, index) => (_jsx("button", { type: "button", disabled: isReviewMode || isExample, onClick: () => {
+                                if (!isReviewMode && !isExample) {
+                                    setAnswer(suggestion);
+                                    onSubmit?.(suggestion);
+                                }
+                            }, className: `inline-flex items-center rounded-full border px-3 py-1 text-sm font-medium transition-colors ${answer === suggestion
+                                ? 'border-teal-400 bg-teal-50 text-teal-700 ring-1 ring-teal-200'
+                                : 'border-gray-200 bg-white text-gray-600 hover:border-teal-300 hover:bg-teal-50/50 hover:text-teal-600'} ${isReviewMode || isExample ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`, children: suggestion }, index))) })), _jsxs("div", { className: "flex items-center gap-3 mt-1", children: [questionData.prefixText && (_jsx("span", { className: "text-sm font-medium text-gray-700", children: questionData.prefixText })), _jsx(Input, { value: displayedAnswer, onChange: (e) => {
+                                    setAnswer(e.target.value);
+                                    onSubmit?.(e.target.value);
+                                }, placeholder: "Vi\u1EBFt \u0111\u00E1p \u00E1n...", disabled: isReviewMode || isExample, className: `max-w-xs border text-sm px-3 py-1.5 rounded-md font-medium ${isReviewMode
+                                    ? isCorrect
+                                        ? 'border-green-400 bg-green-50 text-green-800'
+                                        : 'border-red-400 bg-red-50 text-red-800'
+                                    : 'border-teal-300 focus:border-teal-500 focus:ring-teal-200'}` }), questionData.suffixText && (_jsx("span", { className: "text-sm font-medium text-gray-700", children: questionData.suffixText })), isReviewMode && isCorrect !== undefined && (_jsx("span", { className: "flex items-center gap-1", children: isCorrect ? (_jsx(CheckCircle2, { className: "h-5 w-5 text-green-500" })) : (_jsx(XCircle, { className: "h-5 w-5 text-red-500" })) }))] }), isReviewMode && isCorrect === false && (_jsxs("div", { className: "mt-3 flex items-center gap-2 rounded-lg bg-green-50 border border-green-200 px-4 py-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }), _jsxs("span", { className: "text-sm text-green-700", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", _jsx("strong", { children: correctAnswer })] })] })), autoFillCorrectAnswers && (_jsxs("div", { className: "mt-3 flex items-center gap-2 rounded-lg bg-teal-50 border border-teal-200 px-4 py-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-teal-600" }), _jsxs("span", { className: "text-sm text-teal-700", children: ["\u0110\u00E1p \u00E1n: ", _jsx("strong", { children: correctAnswer })] })] })), explanation && isReviewMode && (_jsxs("div", { className: "rounded-md border border-blue-200 bg-blue-50 px-3 py-2", children: [_jsx("p", { className: "text-sm font-semibold text-blue-800 mb-1", children: "Gi\u1EA3i th\u00EDch:" }), _jsx("p", { className: "text-sm text-blue-700", children: explanation })] }))] })] }));
 }

package/dist/components/questions/types/answer-the-question-group/AnswerTheQuestionGroupClient.js

@@ -1,8 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BookOpen, CircleHelp, Lightbulb, Sparkles, Star, Volume2 } from 'lucide-react';
+import { BookOpen, CircleHelp, Lightbulb, Sparkles, Volume2 } from 'lucide-react';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
 import { toAnswerTheQuestionGroupImageUrls } from '../../_shared/types/answer-the-question-group.type';
+import { KidInstruction, KidPrompt, KidQuestionCard } from '../../_shared/components/compact';
 function isAbsoluteMediaUrl(value) {
     return (value.startsWith('http://')
         || value.startsWith('https://')
@@ -41,15 +42,15 @@ function MediaPreview({ src, kind = 'image', alt }) {
 }
 export function AnswerTheQuestionGroupClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, }) {
     const items = questionData.items || [];
-    return (_jsxs("div", { className: "space-y-4", children: [questionData.instruction && (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800", children: questionData.instruction })), questionData.audioUrl && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2", children: [_jsx(Volume2, { className: "h-4 w-4 text-slate-500" }), _jsx(MediaPreview, { src: questionData.audioUrl, kind: "audio", alt: "Group audio" })] })), toAnswerTheQuestionGroupImageUrls(questionData.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toAnswerTheQuestionGroupImageUrls(questionData.imageUrl).map((url, imageIndex) => (_jsx(MediaPreview, { src: url, alt: `Hình ảnh (${imageIndex + 1})` }, `group-image-${imageIndex}`))) })), questionData.passage && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-white p-5 shadow-xs", children: [_jsxs("div", { className: "mb-2.5 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-indigo-700", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: "B\u00E0i \u0111\u1ECDc (Reading Passage)" })] }), _jsx("div", { className: "prose prose-sm max-w-none leading-relaxed text-gray-800", dangerouslySetInnerHTML: { __html: questionData.passage } })] })), items.map((item, itemIndex) => {
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(KidInstruction, { children: questionData.instruction }), questionData.audioUrl && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2", children: [_jsx(Volume2, { className: "h-4 w-4 text-slate-500" }), _jsx(MediaPreview, { src: questionData.audioUrl, kind: "audio", alt: "Group audio" })] })), toAnswerTheQuestionGroupImageUrls(questionData.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toAnswerTheQuestionGroupImageUrls(questionData.imageUrl).map((url, imageIndex) => (_jsx(MediaPreview, { src: url, alt: `Hình ảnh (${imageIndex + 1})` }, `group-image-${imageIndex}`))) })), questionData.passage && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-white p-5 shadow-xs", children: [_jsxs("div", { className: "mb-2.5 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-indigo-700", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: "B\u00E0i \u0111\u1ECDc (Reading Passage)" })] }), _jsx("div", { className: "prose prose-sm max-w-none leading-relaxed text-gray-800", dangerouslySetInnerHTML: { __html: questionData.passage } })] })), items.map((item, itemIndex) => {
                 const userValue = userAnswers[itemIndex] || '';
                 const expectedAnswers = Array.isArray(item.expectedAnswers)
                     ? item.expectedAnswers.filter((answer) => answer.trim() !== '')
                     : [];
-                return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] })), _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-violet-100 px-2 py-0.5 text-xs font-semibold text-violet-700", children: [_jsx(Sparkles, { className: "h-3 w-3" }), "AI"] })] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-3", children: [toAnswerTheQuestionGroupImageUrls(item.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toAnswerTheQuestionGroupImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(MediaPreview, { src: url, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1} (${imageIndex + 1})` }, `${item.questionNumber}-${imageIndex}`))) })), _jsx("p", { className: "text-sm font-semibold leading-relaxed text-gray-800", children: item.question || 'Câu hỏi chưa được nhập' }), isReviewMode || item.isExample || !onAnswerChange ? (userValue ? (_jsx("div", { className: "rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-700", children: userValue })) : null) : (_jsx("textarea", { value: userValue, onChange: (event) => {
-                                        const next = items.map((_, index) => userAnswers[index] || '');
-                                        next[itemIndex] = event.target.value;
-                                        onAnswerChange(next);
-                                    }, placeholder: "Nh\u1EADp c\u00E2u tr\u1EA3 l\u1EDDi...", rows: 2, className: "w-full rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-800 outline-none ring-blue-200 focus:border-blue-400 focus:ring-2" })), isReviewMode && expectedAnswers.length > 0 ? (_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs font-medium text-gray-500", children: "\u0110\u00E1p \u00E1n" }), _jsx("ul", { className: "list-disc space-y-1 pl-5 text-sm text-gray-700", children: expectedAnswers.map((answer) => (_jsx("li", { children: answer }, answer))) })] })) : isReviewMode && !userValue ? (_jsx("div", { className: "rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-500", children: "Ch\u01B0a c\u00F3 \u0111\u00E1p \u00E1n m\u1EABu" })) : null] })] }, `${item.questionNumber}-${itemIndex}`));
+                return (_jsxs(KidQuestionCard, { icon: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }), title: `Câu ${item.questionNumber || itemIndex + 1}`, points: item.points || 0, isExample: item.isExample, headerExtra: _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-violet-100 px-2 py-0.5 text-xs font-semibold text-violet-700", children: [_jsx(Sparkles, { className: "h-3 w-3" }), "AI"] }), children: [toAnswerTheQuestionGroupImageUrls(item.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toAnswerTheQuestionGroupImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(MediaPreview, { src: url, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1} (${imageIndex + 1})` }, `${item.questionNumber}-${imageIndex}`))) })), _jsx(KidPrompt, { children: item.question || 'Câu hỏi chưa được nhập' }), isReviewMode || item.isExample || !onAnswerChange ? (userValue ? (_jsx("div", { className: "rounded-md border border-gray-200 bg-gray-50 px-3 py-1.5 text-sm text-gray-700", children: userValue })) : null) : (_jsx("textarea", { value: userValue, onChange: (event) => {
+                                const next = items.map((_, index) => userAnswers[index] || '');
+                                next[itemIndex] = event.target.value;
+                                onAnswerChange(next);
+                            }, placeholder: "Nh\u1EADp c\u00E2u tr\u1EA3 l\u1EDDi...", rows: 2, className: "w-full rounded-md border border-slate-200 px-3 py-1.5 text-sm text-slate-800 outline-none ring-blue-200 focus:border-blue-400 focus:ring-2" })), isReviewMode && expectedAnswers.length > 0 ? (_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs font-medium text-gray-500", children: "\u0110\u00E1p \u00E1n" }), _jsx("ul", { className: "list-disc space-y-1 pl-5 text-sm text-gray-700", children: expectedAnswers.map((answer) => (_jsx("li", { children: answer }, answer))) })] })) : isReviewMode && !userValue ? (_jsx("div", { className: "rounded-md border border-gray-200 bg-gray-50 px-3 py-1.5 text-sm text-gray-500", children: "Ch\u01B0a c\u00F3 \u0111\u00E1p \u00E1n" })) : null] }, `${item.questionNumber}-${itemIndex}`));
             }), isReviewMode && questionData.explanation && (_jsxs("div", { className: "flex items-start gap-2 rounded-xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-800", children: [_jsx(Lightbulb, { className: "mt-0.5 h-4 w-4 flex-shrink-0" }), questionData.explanation] }))] }));
 }