@tinyweb_dev/oe-exam-sdk 1.0.6 → 1.0.7

package/dist/components/questions/types/look-picture-fill-word-hint/LookPictureFillWordHintClient.js

@@ -1,134 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useMemo } from 'react';
-import { cn } from '../../../../shared/lib/utils';
-import { Input } from '../../../../components/ui/input';
-import { Check, X, Lightbulb, Pencil } from 'lucide-react';
-import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-export function LookPictureFillWordHintClient({ questionData, userAnswer = {}, isReviewMode = false, autoFillCorrectAnswers = false, explanation, onSubmit, }) {
-    // Build correct answers map
-    const correctAnswersMap = useMemo(() => {
-        return questionData.subQuestions.reduce((acc, sq) => {
-            acc[sq.id] = sq.correctAnswer;
-            return acc;
-        }, {});
-    }, [questionData.subQuestions]);
-    const initialAnswers = autoFillCorrectAnswers ? correctAnswersMap : (userAnswer || {});
-    const [answers, setAnswers] = useState(initialAnswers);
-    useEffect(() => {
-        if (autoFillCorrectAnswers) {
-            setAnswers(correctAnswersMap);
-        }
-        else if (userAnswer) {
-            setAnswers(userAnswer);
-        }
-    }, [userAnswer, autoFillCorrectAnswers, correctAnswersMap]);
-    const handleAnswerChange = (subQuestionId, blankIndex, value) => {
-        if (isReviewMode)
-            return;
-        const currentAnswer = answers[subQuestionId] || '';
-        const currentParts = currentAnswer.split(',').map(a => a.trim());
-        const subQuestion = questionData.subQuestions.find(sq => sq.id === subQuestionId);
-        if (!subQuestion)
-            return;
-        const matches = subQuestion.word.match(/\{(\d+)\}/g);
-        const blankCount = matches ? matches.length : 0;
-        while (currentParts.length < blankCount) {
-            currentParts.push('');
-        }
-        currentParts[blankIndex] = value.replace(/[^a-zA-Z]/g, '');
-        const newAnswers = { ...answers, [subQuestionId]: currentParts.join(',') };
-        setAnswers(newAnswers);
-        onSubmit?.(newAnswers);
-    };
-    const hintLetters = questionData.hintLetters || [];
-    const isSingleQuestion = questionData.subQuestions.length === 1;
-    // For single question, use the card layout similar to LookPictureFillBlankChooseAnswer
-    if (isSingleQuestion) {
-        const subQuestion = questionData.subQuestions[0];
-        const userAnswerValue = answers[subQuestion.id] || '';
-        return (_jsx(SingleQuestionLayout, { subQuestion: subQuestion, userAnswerValue: userAnswerValue, isReviewMode: isReviewMode, hintLetters: hintLetters, explanation: explanation, onAnswerChange: (blankIdx, value) => handleAnswerChange(subQuestion.id, blankIdx, value) }));
-    }
-    // Multiple questions - grid layout
-    return (_jsxs("div", { className: "space-y-4", children: [hintLetters.length > 0 && (_jsxs("div", { className: "flex items-center gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-orange-50 px-4 py-3", children: [_jsx(Lightbulb, { className: "h-5 w-5 text-amber-500 flex-shrink-0" }), _jsx("span", { className: "text-sm font-medium text-amber-700", children: "G\u1EE3i \u00FD:" }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: hintLetters.map((letter, i) => (_jsx("span", { className: "inline-flex h-7 w-7 items-center justify-center rounded-md border border-amber-300 bg-white text-sm font-bold text-amber-700", children: letter.toUpperCase() }, i))) })] })), _jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: questionData.subQuestions.map((subQuestion, index) => (_jsx(MultiQuestionCard, { subQuestion: subQuestion, index: index, userAnswerValue: answers[subQuestion.id] || '', isReviewMode: isReviewMode, onAnswerChange: (blankIdx, value) => handleAnswerChange(subQuestion.id, blankIdx, value) }, subQuestion.id))) })] }));
-}
-// Parse word into segments
-function parseWord(word, answerParts, correctParts, isReviewMode) {
-    const segments = [];
-    let lastIdx = 0;
-    const regex = /\{(\d+)\}/g;
-    let match;
-    while ((match = regex.exec(word)) !== null) {
-        if (match.index > lastIdx) {
-            segments.push({ type: 'text', value: word.substring(lastIdx, match.index) });
-        }
-        const blankIdx = parseInt(match[1], 10);
-        const userVal = answerParts[blankIdx] || '';
-        const correctVal = correctParts[blankIdx] || '';
-        const isCorrect = userVal.toLowerCase() === correctVal.toLowerCase();
-        segments.push({
-            type: 'blank',
-            value: userVal,
-            index: blankIdx,
-            isCorrect: isReviewMode ? isCorrect : undefined,
-            correctValue: correctVal,
-        });
-        lastIdx = match.index + match[0].length;
-    }
-    if (lastIdx < word.length) {
-        segments.push({ type: 'text', value: word.substring(lastIdx) });
-    }
-    return segments;
-}
-// Single question layout - similar to LookPictureFillBlankChooseAnswer
-function SingleQuestionLayout({ subQuestion, userAnswerValue, isReviewMode, hintLetters, explanation, onAnswerChange, }) {
-    const { previewUrl, isLoading } = usePresignedFileUrl(subQuestion.imageUrl);
-    const correctAnswer = subQuestion.correctAnswer.trim();
-    const matches = subQuestion.word.match(/\{(\d+)\}/g);
-    const blankCount = matches ? matches.length : 0;
-    const userParts = userAnswerValue.split(',').map(a => a.trim());
-    const correctParts = correctAnswer.split(',').map(a => a.trim());
-    const isComplete = userParts.filter(p => p.length > 0).length === blankCount;
-    const isAllCorrect = isReviewMode && isComplete && userAnswerValue.trim().toLowerCase() === correctAnswer.toLowerCase();
-    const isWrong = isReviewMode && isComplete && !isAllCorrect;
-    const hasAnswered = userParts.some(p => p.length > 0);
-    const segments = parseWord(subQuestion.word, userParts, correctParts, isReviewMode);
-    const imageSrc = previewUrl || (subQuestion.imageUrl?.startsWith('http') ? subQuestion.imageUrl : null);
-    // Build complete word for preview
-    const renderWordWithAnswer = (parts) => {
-        let result = subQuestion.word;
-        for (let i = 0; i < parts.length; i++) {
-            result = result.replace(`{${i}}`, parts[i]?.toUpperCase() || '?');
-        }
-        return result;
-    };
-    return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all hover:shadow-md", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-teal-500 to-cyan-600 text-white shadow-sm", children: _jsx(Pencil, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Nh\u00ECn tranh, \u0111i\u1EC1n ch\u1EEF c\u00E1i c\u00F2n thi\u1EBFu" })] }), isReviewMode && hasAnswered && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isAllCorrect ? 'bg-green-100 text-green-700' : isWrong ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-600'), children: [isAllCorrect && _jsx(Check, { className: "h-3.5 w-3.5" }), isWrong && _jsx(X, { className: "h-3.5 w-3.5" }), isAllCorrect ? 'Đúng' : isWrong ? 'Sai' : 'Chưa hoàn thành'] }))] }), _jsxs("div", { className: "p-5 space-y-5", children: [(imageSrc || subQuestion.imageUrl) && (_jsxs("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100", children: [_jsx("div", { className: "border-b border-gray-100 px-3 py-1.5", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-red-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-yellow-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-green-400" }), _jsx("span", { className: "ml-2 text-xs font-medium text-gray-500", children: "H\u00ECnh \u1EA3nh" })] }) }), _jsx("div", { className: "flex items-center justify-center p-4", children: isLoading ? (_jsx("div", { className: "flex h-48 items-center justify-center", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-teal-500" }) })) : (_jsx("img", { src: imageSrc || subQuestion.imageUrl, alt: "Question", className: "max-h-56 w-auto object-contain rounded-md", onError: (e) => {
-                                        e.target.src = '/images/placeholder-image.svg';
-                                    } })) })] })), hintLetters.length > 0 && (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-orange-50 px-4 py-3", children: [_jsx(Lightbulb, { className: "h-5 w-5 text-amber-500 flex-shrink-0" }), _jsx("span", { className: "text-sm font-medium text-amber-700", children: "G\u1EE3i \u00FD ch\u1EEF c\u00E1i:" }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: hintLetters.map((letter, i) => (_jsx("span", { className: "inline-flex h-8 w-8 items-center justify-center rounded-lg border-2 border-amber-300 bg-white text-sm font-bold text-amber-700 shadow-sm", children: letter.toUpperCase() }, i))) })] })), _jsx("div", { className: "rounded-lg bg-gradient-to-r from-gray-50 to-slate-50 p-4 border border-gray-100", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-teal-100 text-teal-600", children: _jsx("span", { className: "text-xs font-bold", children: "?" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider", children: "\u0110i\u1EC1n ch\u1EEF c\u00E1i c\u00F2n thi\u1EBFu" }), _jsx("div", { className: "mt-3 flex flex-wrap items-center gap-1", children: segments.map((seg, i) => {
-                                                if (seg.type === 'text') {
-                                                    return (_jsx("span", { className: "text-2xl font-bold text-gray-800 font-mono tracking-wide", children: seg.value }, i));
-                                                }
-                                                // Blank input
-                                                return (_jsxs("div", { className: "relative inline-flex flex-col items-center mx-0.5", children: [_jsx(Input, { type: "text", value: seg.value.toUpperCase(), onChange: (e) => onAnswerChange(seg.index, e.target.value), disabled: isReviewMode, maxLength: 2, placeholder: "?", className: cn('h-11 w-11 rounded-lg border-2 text-center font-mono font-bold text-xl uppercase transition-all', seg.isCorrect === true && 'border-green-400 bg-green-50 text-green-700', seg.isCorrect === false && 'border-red-400 bg-red-50 text-red-700', seg.isCorrect === undefined && 'border-teal-300 bg-teal-50 text-teal-700 focus:border-teal-500 focus:ring-2 focus:ring-teal-200') }), seg.isCorrect === false && (_jsx("span", { className: "absolute -bottom-5 text-xs font-bold text-green-600", children: seg.correctValue?.toUpperCase() }))] }, i));
-                                            }) }), isWrong && _jsx("div", { className: "h-4" })] })] }) }), hasAnswered && !isReviewMode && (_jsxs("div", { className: "rounded-lg bg-gradient-to-r from-teal-50 to-cyan-50 p-4 border border-teal-100", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-teal-500 text-white", children: _jsx(Check, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-xs font-semibold text-teal-700 uppercase tracking-wider", children: "Preview t\u1EEB ho\u00E0n ch\u1EC9nh" })] }), _jsx("p", { className: "text-lg font-mono font-bold text-gray-800 tracking-wide", children: renderWordWithAnswer(userParts) })] })), isReviewMode && isWrong && (_jsxs("div", { className: "rounded-lg bg-gradient-to-r from-green-50 to-emerald-50 p-4 border border-green-200", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-green-500 text-white", children: _jsx(Check, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-xs font-semibold text-green-700 uppercase tracking-wider", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" })] }), _jsx("p", { className: "text-lg font-mono font-bold text-gray-800 tracking-wide", children: renderWordWithAnswer(correctParts) })] })), !isReviewMode && !hasAnswered && (_jsxs("div", { className: "rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3 flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white", children: _jsx("span", { className: "text-xs font-bold", children: "!" }) }), _jsx("span", { className: "text-sm text-amber-800", children: "Vui l\u00F2ng \u0111i\u1EC1n ch\u1EEF c\u00E1i v\u00E0o c\u00E1c \u00F4 tr\u1ED1ng" })] })), isReviewMode && explanation && (_jsx("div", { className: "rounded-lg bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border border-blue-200", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-xs font-semibold text-blue-700 uppercase tracking-wider", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-gray-700 leading-relaxed", children: explanation })] })] }) }))] })] }));
-}
-// Multiple questions - compact card for grid
-function MultiQuestionCard({ subQuestion, index, userAnswerValue, isReviewMode, onAnswerChange, }) {
-    const { previewUrl } = usePresignedFileUrl(subQuestion.imageUrl);
-    const correctAnswer = subQuestion.correctAnswer.trim();
-    const matches = subQuestion.word.match(/\{(\d+)\}/g);
-    const blankCount = matches ? matches.length : 0;
-    const userParts = userAnswerValue.split(',').map(a => a.trim());
-    const correctParts = correctAnswer.split(',').map(a => a.trim());
-    const isComplete = userParts.filter(p => p.length > 0).length === blankCount;
-    const isAllCorrect = isReviewMode && isComplete && userAnswerValue.trim().toLowerCase() === correctAnswer.toLowerCase();
-    const isWrong = isReviewMode && isComplete && !isAllCorrect;
-    const segments = parseWord(subQuestion.word, userParts, correctParts, isReviewMode);
-    const imageSrc = previewUrl || (subQuestion.imageUrl?.startsWith('http') ? subQuestion.imageUrl : null);
-    return (_jsxs("div", { className: cn('overflow-hidden rounded-xl border-2 bg-white transition-all', isAllCorrect && 'border-green-400', isWrong && 'border-red-400', !isReviewMode && 'border-gray-200 hover:shadow-md'), children: [_jsxs("div", { className: "relative h-36 bg-gradient-to-br from-slate-50 to-slate-100 flex items-center justify-center", children: [imageSrc ? (_jsx("img", { src: imageSrc, alt: "Question", className: "h-full w-full object-contain p-3" })) : (_jsx("svg", { className: "h-10 w-10 text-gray-300", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) })), _jsx("div", { className: "absolute left-2 top-2 flex h-6 w-6 items-center justify-center rounded-full bg-teal-500 text-xs font-bold text-white", children: index + 1 }), isReviewMode && (isAllCorrect || isWrong) && (_jsx("div", { className: cn('absolute right-2 top-2 rounded-full p-1', isAllCorrect && 'bg-green-500 text-white', isWrong && 'bg-red-500 text-white'), children: isAllCorrect ? _jsx(Check, { className: "h-3 w-3" }) : _jsx(X, { className: "h-3 w-3" }) }))] }), _jsxs("div", { className: "p-3", children: [_jsx("div", { className: "flex flex-wrap items-center justify-center gap-0.5", children: segments.map((seg, i) => {
-                            if (seg.type === 'text') {
-                                return _jsx("span", { className: "text-lg font-bold text-gray-800 font-mono", children: seg.value }, i);
-                            }
-                            return (_jsx(Input, { type: "text", value: seg.value.toUpperCase(), onChange: (e) => onAnswerChange(seg.index, e.target.value), disabled: isReviewMode, maxLength: 2, placeholder: "?", className: cn('h-8 w-8 rounded border-2 text-center font-mono font-bold text-lg uppercase outline-none transition-all', seg.isCorrect === true && 'border-green-400 bg-green-50 text-green-700', seg.isCorrect === false && 'border-red-400 bg-red-50 text-red-700', seg.isCorrect === undefined && 'border-gray-300 focus:border-teal-400') }, i));
-                        }) }), isWrong && (_jsxs("p", { className: "text-center text-xs text-green-600 font-medium mt-2", children: ["\u0110\u00E1p \u00E1n: ", subQuestion.word.replace(/\{(\d+)\}/g, (_, idx) => correctParts[parseInt(idx)]?.toUpperCase() || '')] }))] })] }));
-}

package/dist/components/questions/types/look-picture-fill-word-hint/LookPictureFillWordHintCreator.d.ts

@@ -1,3 +0,0 @@
-import { LookPictureFillWordHintCreatorProps } from '../../_shared/types/look-picture-fill-word-hint.type';
-export declare function LookPictureFillWordHintCreator(props: LookPictureFillWordHintCreatorProps): import("react").JSX.Element;
-export declare const LookPictureFillWordHint: typeof LookPictureFillWordHintCreator;