import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'; import ReactDOM from 'react-dom/client'; /** * ChatAIClass: * * This class is intended for non-technical users who want to interact with an AI system. * * Usage: * 1. Create an instance of ChatAIClass: * const chat = new ChatAIClass(); * * 2. Call getResponse(prompt) to get a response from the AI: * const answer = await chat.getResponse("What is quantum computing?"); * console.log(answer); */ export class ChatAIClass { constructor() { // Directly create a new ChatManager instance with the AI behavior description. // We assume ChatManager is available globally or imported from elsewhere. this.chatManager = new ChatManager(AI_BEHAVIOR_DESCRIPTION); } /** * Generates a response from the AI based on the given prompt. * * @param {string} prompt - The user's input or question. * @returns {Promise} - The AI's response as text. */ async getResponse(prompt) { // Add the user's message to the conversation. this.chatManager.addMessage('user', prompt); // Ask the ChatManager for the AI's response and return it. const response = await this.chatManager.getCharacterResponse('classify'); // Add the AI's message to the conversation so it has memory of it. this.chatManager.addMessage('assistant', response); return response; } } // Mock question templates for different subjects const AI_BEHAVIOR_DESCRIPTION = ` You are an educational AI quiz generator that creates engaging, accurate, and thought-provoking multiple-choice questions. Your questions should be: 1. Clear and unambiguous 2. Educational and informative 3. Appropriate for the given topic 4. Challenging but fair 5. Include plausible but clearly incorrect alternative answers Format all responses as valid JSON arrays containing question objects. `; const questionTemplates = { generic: [ { template: "Basic understanding", generateChoices: (topic) => ({ question: `What best describes ${topic}?`, choices: [ `A type of ${topic}`, `Something related to ${topic}`, `Information about ${topic}`, `Examples of ${topic}` ], correctAnswer: 0 }) }, { template: "Who is known for their work in TOPIC?", generateChoices: (topic) => ({ question: `Which person is most associated with ${topic}?`, choices: [ `A famous ${topic} expert`, `A ${topic} researcher`, `A ${topic} pioneer`, `A ${topic} scholar` ], correctAnswer: 2 }) }, { template: "What is the importance of TOPIC?", generateChoices: (topic) => ({ question: `Why is ${topic} important?`, choices: [ `It helps us understand the world better`, `It solves important problems`, `It advances human knowledge`, `It improves our daily lives` ], correctAnswer: 0 }) }, { template: "How does TOPIC affect our lives?", generateChoices: (topic) => ({ question: `How does ${topic} impact society?`, choices: [ `It changes how we live`, `It influences our decisions`, `It shapes our future`, `It affects our behavior` ], correctAnswer: 2 }) } ], math: [ { template: "What is NUM1 + NUM2?", generateChoices: () => { const num1 = Math.floor(Math.random() * 100); const num2 = Math.floor(Math.random() * 100); const correct = num1 + num2; const choices = [ correct, correct + 1, correct - 1, correct + 2 ]; // Shuffle the choices array for (let i = choices.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [choices[i], choices[j]] = [choices[j], choices[i]]; } return { question: `What is ${num1} + ${num2}?`, choices, correctAnswer: choices.indexOf(correct) }; } } ], history: [ { template: "Important historical events", generateChoices: () => ({ question: "Which event marked the beginning of World War II in Europe?", choices: [ "German invasion of Poland", "Attack on Pearl Harbor", "Russian Revolution", "Treaty of Versailles" ], correctAnswer: 0 }) }, { template: "Ancient civilizations", generateChoices: () => ({ question: "Which ancient civilization built the pyramids?", choices: [ "Ancient Egyptians", "Ancient Greeks", "Romans", "Mayans" ], correctAnswer: 0 }) }, { template: "Historical figures", generateChoices: () => ({ question: "Who wrote the Declaration of Independence?", choices: [ "Thomas Jefferson", "George Washington", "Benjamin Franklin", "John Adams" ], correctAnswer: 0 }) }, { template: "Revolutionary periods", generateChoices: () => ({ question: "What period marked the rapid advancement of industrial technology?", choices: [ "The Industrial Revolution", "The Renaissance", "The Middle Ages", "The Stone Age" ], correctAnswer: 0 }) } ], science: [ { template: "Basic physics", generateChoices: () => ({ question: "What force keeps planets in orbit around the Sun?", choices: [ "Gravity", "Magnetism", "Friction", "Electricity" ], correctAnswer: 0 }) }, { template: "Biology processes", generateChoices: () => ({ question: "What is the process of plants converting sunlight to energy called?", choices: [ "Photosynthesis", "Respiration", "Digestion", "Oxidation" ], correctAnswer: 0 }) }, { template: "Chemistry basics", generateChoices: () => ({ question: "What is the smallest unit of matter?", choices: [ "Atom", "Cell", "Molecule", "Electron" ], correctAnswer: 0 }) }, { template: "Scientific method", generateChoices: () => ({ question: "What is the first step of the scientific method?", choices: [ "Ask a question", "Form a hypothesis", "Conduct experiment", "Analyze data" ], correctAnswer: 0 }) } ] }; const QuizGenerator = () => { const questionsContainerRef = useRef(null); const [showIntro, setShowIntro] = useState(true); const [isIntroFadingOut, setIsIntroFadingOut] = useState(false); const [introComplete, setIntroComplete] = useState(false); const [topic, setTopic] = useState(''); useEffect(() => { if (showIntro) { // Start fade out after intro duration const fadeOutTimer = setTimeout(() => { setIsIntroFadingOut(true); }, 2500); // Remove intro after fade out animation completes const removeTimer = setTimeout(() => { setShowIntro(false); setIntroComplete(true); }, 3000); // Total duration (intro display + fade out) return () => { clearTimeout(fadeOutTimer); clearTimeout(removeTimer); }; } }, [showIntro]); const [timeLeft, setTimeLeft] = useState(60); const [isTimerRunning, setIsTimerRunning] = useState(false); const [windowWidth, setWindowWidth] = useState(window.innerWidth); useEffect(() => { const handleResize = () => { setWindowWidth(window.innerWidth); }; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); const [bestTimes, setBestTimes] = useState({}); const [correctAnimation, setCorrectAnimation] = useState(null); const [questions, setQuestions] = useState([]); const [quizHistory, setQuizHistory] = useState([]); const [error, setError] = useState(''); const [isLoading, setIsLoading] = useState(false); const [answeredQuestions, setAnsweredQuestions] = useState({}); const [selectedAnswers, setSelectedAnswers] = useState({}); const [isSubmitted, setIsSubmitted] = useState(false); const [grade, setGrade] = useState(null); const [chatAI] = useState(() => new ChatAIClass()); const generateQuestions = async () => { setTimeLeft(60); setIsTimerRunning(true); setError(''); setIsLoading(true); setQuestions([]); // Clear old questions immediately setSelectedAnswers({}); setAnsweredQuestions({}); setIsSubmitted(false); setGrade(null); try { const prompt = `Create exactly 4 multiple-choice questions about ${topic}. Return ONLY a JSON array of objects with no additional text or formatting. Each object MUST have these exact properties: { "question": "string with the question text", "choices": ["array", "of", "four", "choices"], "correctAnswer": number from 0-3 } Example format: [ { "question": "What is example question 1?", "choices": ["choice 1", "choice 2", "choice 3", "choice 4"], "correctAnswer": 0 }, ... (3 more similar objects) ]`; const response = await chatAI.getResponse(prompt); // Clean the response string thoroughly let cleanResponse = response .replace(/```json/g, '') // Remove ```json .replace(/```/g, '') // Remove remaining ``` .replace(/^\s*\[/, '[') // Ensure array starts at beginning .replace(/\]\s*$/, ']') // Ensure array ends properly .trim(); // Attempt to parse the JSON with validation let generatedQuestions; try { generatedQuestions = JSON.parse(cleanResponse); // Validate the structure of the parsed questions if (!Array.isArray(generatedQuestions)) { throw new Error('Response is not an array'); } // Validate each question object generatedQuestions.forEach((q, index) => { if (!q.question || !Array.isArray(q.choices) || q.choices.length !== 4 || typeof q.correctAnswer !== 'number' || q.correctAnswer < 0 || q.correctAnswer > 3) { throw new Error(`Invalid question format at index ${index}`); } }); } catch (parseError) { console.error('JSON Parse Error:', parseError); throw new Error('Failed to parse AI response into valid question format'); } if (Array.isArray(generatedQuestions) && generatedQuestions.length === 4) { setQuestions(generatedQuestions); // Scroll to questions after a brief delay to ensure rendering is complete setTimeout(() => { questionsContainerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 100); } else { throw new Error('Invalid question format received'); } } catch (err) { setError('Failed to generate questions. Please try again. The AI response was not in the correct format.'); console.error('Question generation error:', err); console.error('Raw response:', response); } finally { setIsLoading(false); } setSelectedAnswers({}); setIsSubmitted(false); setGrade(null); }; useEffect(() => { let timer; if (isTimerRunning && timeLeft > 0 && !isSubmitted) { timer = setInterval(() => { setTimeLeft(prev => prev - 1); }, 1000); } else if (timeLeft === 0 && !isSubmitted) { handleSubmit(); } return () => clearInterval(timer); }, [timeLeft, isTimerRunning, isSubmitted]); const handleCorrectAnswer = useCallback((questionIndex) => { setCorrectAnimation(questionIndex); // Create and animate confetti const canvas = document.createElement('canvas'); canvas.style.position = 'fixed'; canvas.style.top = '0'; canvas.style.left = '0'; canvas.style.width = '100%'; canvas.style.height = '100%'; canvas.style.pointerEvents = 'none'; canvas.style.zIndex = '9999'; document.body.appendChild(canvas); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const particles = []; const colors = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6']; // Create particles for (let i = 0; i < 100; i++) { particles.push({ x: canvas.width / 2, y: canvas.height / 2, size: Math.random() * 8 + 4, color: colors[Math.floor(Math.random() * colors.length)], speedX: (Math.random() - 0.5) * 15, speedY: (Math.random() - 0.5) * 15 - 7, rotation: Math.random() * 360, rotationSpeed: (Math.random() - 0.5) * 5 }); } let animationFrame; const animate = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); let stillAlive = false; particles.forEach(particle => { if (particle.y < canvas.height) { stillAlive = true; particle.x += particle.speedX; particle.y += particle.speedY; particle.speedY += 0.3; // gravity particle.rotation += particle.rotationSpeed; ctx.save(); ctx.translate(particle.x, particle.y); ctx.rotate((particle.rotation * Math.PI) / 180); ctx.fillStyle = particle.color; ctx.fillRect(-particle.size / 2, -particle.size / 2, particle.size, particle.size); ctx.restore(); } }); if (stillAlive) { animationFrame = requestAnimationFrame(animate); } else { cancelAnimationFrame(animationFrame); document.body.removeChild(canvas); } }; animate(); setTimeout(() => { if (document.body.contains(canvas)) { cancelAnimationFrame(animationFrame); document.body.removeChild(canvas); } }, 3000); setTimeout(() => setCorrectAnimation(null), 1000); }, []); const handleSubmit = () => { if (!isSubmitted) { const allAnswered = questions.every((_, index) => selectedAnswers[index] !== undefined ); if (!allAnswered) { alert('Please answer all questions before submitting.'); return; } const correctCount = questions.reduce((count, q, index) => { return count + (selectedAnswers[index] === q.correctAnswer ? 1 : 0); }, 0); const gradePercent = Math.round((correctCount / questions.length) * 100); const quizResult = { topic, grade: gradePercent, timestamp: new Date().toLocaleTimeString(), correctCount, totalQuestions: questions.length, timeSpent: 60 - timeLeft }; setBestTimes(prev => ({ ...prev, [topic]: Math.min(60 - timeLeft, prev[topic] || Infinity) })); setQuizHistory(prev => [...prev, quizResult]); setGrade(gradePercent); setIsSubmitted(true); setIsTimerRunning(false); } }; return (

0 ? styles.containerWithQuestions : {}), position: 'relative', paddingTop: questions.length > 0 ? '60px' : '40px' }}>

{showIntro && (

QuizWhiz

Master Any Topic, One Quiz at a Time

)} {questions.length > 0 && !isSubmitted && (

30 ? '#22c55e' : timeLeft > 10 ? '#eab308' : '#ef4444' }} />

Time Left: {timeLeft}s

)}

✨ Quiz Generator ✨

setTopic(e.target.value)} placeholder="Enter any topic (e.g., math, cooking, sports, art)" style={styles.input} />

{error &&

{error}

}

{questions.map((q, index) => (

Question {index + 1}

{q.question}

{q.choices.map((choice, i) => (

{ if (!isSubmitted && !answeredQuestions[index]) { const isCorrect = i === q.correctAnswer; const newAnswers = { ...selectedAnswers, [index]: i }; setSelectedAnswers(newAnswers); setAnsweredQuestions(prev => ({ ...prev, [index]: true })); if (isCorrect) { handleCorrectAnswer(index); } } }} style={{ ...styles.choice, backgroundColor: (answeredQuestions[index] || isSubmitted) && selectedAnswers[index] === i ? i === q.correctAnswer ? '#86efac' // bright green for correct : '#fca5a5' // bright red for incorrect : (answeredQuestions[index] || isSubmitted) && i === q.correctAnswer ? '#86efac' // show correct answer : 'white', cursor: answeredQuestions[index] || isSubmitted ? 'default' : 'pointer', opacity: (answeredQuestions[index] || isSubmitted) && selectedAnswers[index] !== i && i !== q.correctAnswer ? 0.5 : 1, transform: selectedAnswers[index] === i ? 'scale(1.02)' : 'scale(1)', border: selectedAnswers[index] === i ? `2px solid ${i === q.correctAnswer ? '#22c55e' : '#ef4444'}` : '2px solid #e2e8f0', transition: 'all 0.3s ease-in-out' }} > {choice}

))}

{questions.length > 0 && (

)} {isSubmitted && (

Quiz Results

= 75 ? '#86efac' : grade >= 50 ? '#fde047' : '#fca5a5', border: '3px solid #1e293b' }}> {grade}%

{grade === 100 ? 'Perfect! 🎉' : grade >= 75 ? 'Great job! 👏' : grade >= 50 ? 'Keep practicing! 💪' : 'You can do better! 📚'}

)}

{quizHistory.length > 0 && (

Session History

{Object.entries( quizHistory.reduce((acc, result) => { if (!acc[result.topic]) { acc[result.topic] = { total: 0, count: 0 }; } acc[result.topic].total += result.grade; acc[result.topic].count += 1; return acc; }, {}) ).map(([topic, data]) => (

{topic}

= 75 ? '#86efac' : (data.total / data.count) >= 50 ? '#fde047' : '#fca5a5' }}> {Math.round(data.total / data.count)}%

Quizzes taken: {data.count}

))}

{quizHistory.map((result, index) => (

{result.topic}

= 75 ? '#86efac' : result.grade >= 50 ? '#fde047' : '#fca5a5' }}> {result.grade}%

Correct: {result.correctCount}/{result.totalQuestions} Time: {result.timestamp}

))}

)}

); }; const keyframes = { fadeInOut: { '0%': { opacity: 0, transform: 'translateY(20px)' }, '30%': { opacity: 1, transform: 'translateY(0)' }, '70%': { opacity: 1, transform: 'translateY(0)' }, '100%': { opacity: 0, transform: 'translateY(-20px)' } }, bounceIn: { '0%': { opacity: 0, transform: 'scale(0.3)' }, '50%': { opacity: 0.7, transform: 'scale(1.05)' }, '70%': { opacity: 0.9, transform: 'scale(0.95)' }, '100%': { opacity: 1, transform: 'scale(1)' } }, slideInFromRight: { '0%': { opacity: 0, transform: 'translateX(50px)' }, '100%': { opacity: 1, transform: 'translateX(0)' } }, pulse: { '0%': { transform: 'scale(1)' }, '50%': { transform: 'scale(1.05)' }, '100%': { transform: 'scale(1)' } }, float: { '0%': { transform: 'translateY(0px)' }, '50%': { transform: 'translateY(-10px)' }, '100%': { transform: 'translateY(0px)' } }, shimmer: { '0%': { backgroundPosition: '-1000px 0' }, '100%': { backgroundPosition: '1000px 0' } } }; const styles = { introContainer: { position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(248, 250, 252, 0.98)', zIndex: 1000, padding: 0, opacity: 0, animation: 'fadeIn 0.5s ease-out forwards', transition: 'opacity 0.5s ease-out', height: '100vh', }, introTitle: { fontSize: '4rem', fontWeight: '800', color: '#3b82f6', margin: 0, padding: 0, background: 'linear-gradient(45deg, #3b82f6, #10b981)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', animation: `${keyframes.fadeInOut} 2.5s ease-in-out forwards`, display: 'block', textAlign: 'center', lineHeight: 1.2, }, introTagline: { fontSize: '1.5rem', color: '#64748b', fontWeight: '500', animation: `${keyframes.fadeInOut} 2.5s ease-in-out forwards`, position: 'relative', textAlign: 'center', margin: '1rem 0 0 0', padding: 0, lineHeight: 1.4, }, headerContainer: { textAlign: 'center', marginBottom: '40px', position: 'relative', }, mainTitle: { fontSize: '3rem', fontWeight: '800', background: 'linear-gradient(45deg, #3b82f6, #10b981)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', marginBottom: '10px', textAlign: 'center', letterSpacing: '-0.5px', }, titleIcon: { display: 'inline-block', animation: `${keyframes.float} 3s ease-in-out infinite`, margin: '0 10px', }, titleUnderline: { width: '100px', height: '4px', background: 'linear-gradient(90deg, #3b82f6, #10b981)', margin: '0 auto', borderRadius: '2px', }, backgroundPattern: { position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'linear-gradient(45deg, #f1f5f9 25%, transparent 25%) -50px 0, linear-gradient(-45deg, #f1f5f9 25%, transparent 25%) -50px 0, linear-gradient(45deg, transparent 75%, #f1f5f9 75%), linear-gradient(-45deg, transparent 75%, #f1f5f9 75%)', backgroundSize: '100px 100px', opacity: 0.3, zIndex: -1, }, timerContainer: { position: 'sticky', top: -20, zIndex: 100, backgroundColor: 'white', padding: '5px 10px', borderRadius: '0 0 12px 12px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)', marginBottom: '20px' }, timerBar: { width: '100%', height: '8px', backgroundColor: '#e2e8f0', borderRadius: '4px', overflow: 'hidden' }, timerProgress: { height: '100%', transition: 'width 1s linear, background-color 0.3s ease' }, timerText: { textAlign: 'center', fontWeight: '600', marginTop: '8px', color: '#1e293b' }, correctAnimation: { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', fontSize: '24px', fontWeight: 'bold', color: '#22c55e', animation: 'fadeUpAndOut 1s ease-out forwards' }, container: { maxWidth: '1200px', margin: '0 auto', padding: '40px 20px', fontFamily: '"Inter", system-ui, -apple-system, sans-serif', backgroundColor: 'rgba(248, 250, 252, 0.9)', minHeight: '100vh', width: '100%', position: 'relative', paddingBottom: '60px', transition: 'all 0.5s ease-in-out', backdropFilter: 'blur(10px)', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', '@media (max-width: 768px)': { padding: '20px 15px', } }, inputContainer: { display: 'flex', flexDirection: 'column', gap: '15px', marginBottom: '20px', backgroundColor: 'white', padding: '20px', borderRadius: '16px', boxShadow: '0 4px 6px rgba(0, 0, 0, 0.05)', width: '100%', maxWidth: '600px', alignItems: 'center', }, input: { width: '100%', maxWidth: '400px', padding: '16px', fontSize: '16px', borderRadius: '12px', border: '2px solid #e2e8f0', transition: 'border-color 0.2s ease', outline: 'none', backgroundColor: '#f8fafc', '&:focus': { borderColor: '#3b82f6', backgroundColor: 'white', } }, button: { backgroundColor: '#3b82f6', color: 'white', border: 'none', padding: '14px 28px', borderRadius: '12px', cursor: 'pointer', fontSize: '1rem', fontWeight: '600', transition: 'all 0.2s ease', boxShadow: '0 4px 6px rgba(59, 130, 246, 0.3)', whiteSpace: 'nowrap', width: '100%', maxWidth: '400px', '&:hover': { backgroundColor: '#2563eb', transform: 'translateY(-1px)', }, '&:active': { transform: 'translateY(0)', } }, error: { color: '#ef4444', marginBottom: '20px', padding: '12px', backgroundColor: '#fee2e2', borderRadius: '8px', fontWeight: '500', }, questionsContainer: { display: 'flex', flexDirection: 'column', padding: '10px', marginBottom: '60px', scrollMarginTop: '20px', }, questionsGrid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '20px', width: '100%', marginBottom: '20px', paddingTop: '25px' }, questionCard: { backgroundColor: 'rgba(255, 255, 255, 0.95)', padding: '25px', borderRadius: '16px', boxShadow: '0 10px 30px rgba(0, 0, 0, 0.1)', transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', border: '1px solid rgba(226, 232, 240, 0.8)', animation: `${keyframes.fadeIn} 0.5s ease-out forwards`, backdropFilter: 'blur(8px)', transform: 'translateY(0)', '&:hover': { transform: 'translateY(-2px)', boxShadow: '0 8px 30px rgba(0, 0, 0, 0.12)', }, '@media (max-width: 640px)': { padding: '20px', } }, choices: { display: 'grid', gridTemplateColumns: window.innerWidth <= 480 ? '1fr' : 'repeat(2, 1fr)', gap: '8px', marginTop: '15px' }, choice: { padding: '16px', borderRadius: '12px', border: '2px solid #e2e8f0', transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', position: 'relative', zIndex: 1, overflow: 'hidden', cursor: 'pointer', textAlign: 'center', fontSize: '1rem', fontWeight: '500', position: 'relative', overflow: 'hidden', background: 'linear-gradient(45deg, #ffffff, #f8fafc)', '&::before': { content: '""', position: 'absolute', top: 0, left: -100, width: '200%', height: '100%', background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent)', transition: 'all 0.5s ease', transform: 'translateX(-100%)', }, '&:hover': { backgroundColor: '#f1f5f9', borderColor: '#94a3b8', transform: 'translateY(-1px)', }, padding: window.innerWidth <= 480 ? '14px' : '16px' }, gradeContainer: { marginTop: '20px', backgroundColor: 'white', padding: '20px', borderRadius: '12px', boxShadow: '0 8px 16px rgba(0, 0, 0, 0.1)', textAlign: 'center', position: 'relative', zIndex: 1, }, gradeTitle: { fontSize: '1.5rem', fontWeight: '700', color: '#1e293b', marginBottom: '20px', }, gradeScore: { display: 'inline-block', fontSize: '2.5rem', fontWeight: '800', padding: '15px 40px', borderRadius: '12px', marginBottom: '20px', color: '#1e293b', }, gradeMessage: { fontSize: '1.25rem', fontWeight: '600', color: '#475569', }, historyContainer: { marginTop: '40px', padding: '20px', backgroundColor: 'white', borderRadius: '16px', boxShadow: '0 4px 6px rgba(0, 0, 0, 0.05)', }, historyTitle: { fontSize: '1.75rem', fontWeight: '700', color: '#1e293b', marginBottom: '20px', textAlign: 'center', }, historyGrid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))', gap: '20px', }, historyCard: { padding: '16px', borderRadius: '12px', border: '2px solid #e2e8f0', backgroundColor: '#f8fafc', display: 'flex', flexDirection: 'column', gap: '10px', }, historyTopic: { fontSize: '1.1rem', fontWeight: '600', color: '#3b82f6', }, historyGrade: { fontSize: '1.5rem', fontWeight: '700', padding: '8px 16px', borderRadius: '8px', textAlign: 'center', }, historyDetails: { display: 'flex', justifyContent: 'space-between', fontSize: '0.9rem', color: '#64748b', }, averagesContainer: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '15px', marginBottom: '20px', padding: '15px', backgroundColor: '#f1f5f9', borderRadius: '12px', }, averageCard: { backgroundColor: 'white', padding: '12px', borderRadius: '8px', boxShadow: '0 2px 4px rgba(0, 0, 0, 0.05)', display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center', }, averageTopic: { fontSize: '1rem', fontWeight: '600', color: '#1e293b', textAlign: 'center', }, averageScore: { fontSize: '1.25rem', fontWeight: '700', padding: '4px 12px', borderRadius: '6px', textAlign: 'center', }, averageCount: { fontSize: '0.875rem', color: '#64748b', textAlign: 'center', } }; // Add these new styles for the loading spinner styles.loadingSpinner = { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }; styles.spinner = { width: '20px', height: '20px', border: '3px solid rgba(255,255,255,0.3)', borderRadius: '50%', borderTopColor: 'white', animation: 'spin 1s ease-in-out infinite', display: 'inline-block' }; styles.loadingText = { marginLeft: '8px' }; // Add keyframe animation for spinner const styleSheet = document.createElement('style'); styleSheet.textContent = ` @keyframes spin { to { transform: rotate(360deg); } } html, body { height: auto !important; min-height: 100vh !important; overflow-y: auto !important; } `; document.head.appendChild(styleSheet); const App = () => { return (

); }; const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();