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 HR-focused AI quiz generator that creates professional, insightful, and engaging multiple-choice questions about workplace satisfaction and employee experience. Your questions should be: 1. Clear and constructive 2. Focused on workplace dynamics and employee well-being 3. Sensitive to professional environments 4. Balanced and unbiased 5. Include realistic workplace scenarios and responses Format all responses as valid JSON arrays containing question objects. Maintain a supportive, professional tone appropriate for HR contexts. `; const questionTemplates = { hr: [ { template: "Work-Life Balance Assessment", generateChoices: () => ({ question: "How would you rate your current work-life balance?", choices: [ "I maintain a healthy balance between work and personal life", "I occasionally struggle to disconnect from work", "Work frequently impacts my personal time", "I find it challenging to maintain any balance" ], correctAnswer: 0 }) }, { template: "Professional Growth", generateChoices: () => ({ question: "How satisfied are you with your career development opportunities?", choices: [ "Clear growth path with ample opportunities", "Some opportunities but unclear progression", "Limited growth opportunities", "No clear development path" ], correctAnswer: 0 }) }, { template: "Team Collaboration", generateChoices: () => ({ question: "How effectively does your team collaborate on projects?", choices: [ "Strong collaboration with clear communication", "Generally good teamwork with occasional issues", "Inconsistent collaboration patterns", "Significant collaboration challenges" ], correctAnswer: 0 }) }, { template: "Management Support", generateChoices: () => ({ question: "How would you describe the support from your immediate supervisor?", choices: [ "Consistently supportive and available", "Generally supportive with room for improvement", "Minimal support provided", "Lack of necessary support" ], correctAnswer: 0 }) }, { template: "Workplace Environment", generateChoices: () => ({ question: "How would you rate your workplace environment?", choices: [ "Positive and conducive to productivity", "Generally comfortable with minor issues", "Some significant concerns", "Needs major improvements" ], correctAnswer: 0 }) }, { template: "Job Satisfaction", generateChoices: () => ({ question: "How fulfilled do you feel in your current role?", choices: [ "Highly fulfilled and engaged", "Moderately satisfied", "Somewhat unfulfilled", "Significantly dissatisfied" ], correctAnswer: 0 }) } ], wellness: [ { template: "Stress Management", generateChoices: () => ({ question: "How well are you able to manage work-related stress?", choices: [ "I have effective strategies to manage stress regularly", "I manage stress adequately but could use more support", "I often struggle with work-related stress", "I find stress management very challenging" ], correctAnswer: 0 }) }, { template: "Workload Balance", generateChoices: () => ({ question: "How would you describe your current workload?", choices: [ "My workload is consistently manageable", "I occasionally feel overwhelmed but can cope", "I frequently feel overworked", "My workload is regularly unmanageable" ], correctAnswer: 0 }) }, { template: "Career Path Clarity", generateChoices: () => ({ question: "How clear is your career progression path within the organization?", choices: [ "I have a well-defined career path with clear milestones", "I see some opportunities but need more clarity", "My career path is somewhat unclear", "I'm uncertain about my career progression" ], correctAnswer: 0 }) }, { template: "Work-Related Anxiety", generateChoices: () => ({ question: "How often do you experience work-related anxiety?", choices: [ "Rarely or never experience work anxiety", "Occasionally experience manageable anxiety", "Frequently experience anxiety", "Regular anxiety affecting performance" ], correctAnswer: 0 }) }, { template: "Professional Development", generateChoices: () => ({ question: "How satisfied are you with your professional development opportunities?", choices: [ "Excellent learning and growth opportunities", "Adequate but could be enhanced", "Limited development options", "Insufficient growth opportunities" ], correctAnswer: 0 }) }, { template: "Work Purpose", generateChoices: () => ({ question: "How meaningful do you find your work?", choices: [ "Highly meaningful and aligned with my values", "Generally meaningful with room for improvement", "Sometimes struggle to find meaning", "Rarely feel connected to work purpose" ], correctAnswer: 0 }) } ], 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 }) } ] }; // Add getAnswerEmoji function const getAnswerEmoji = (question, choice, index) => { const questionLower = question.toLowerCase(); const choiceLower = choice.toLowerCase(); // Satisfaction/Rating questions if (questionLower.includes('rate') || questionLower.includes('satisfaction') || questionLower.includes('how would you')) { return ['😄', '🙂', '😐', '😟'][index]; } // Frequency questions if (questionLower.includes('how often') || questionLower.includes('frequently') || choiceLower.includes('rarely') || choiceLower.includes('sometimes') || choiceLower.includes('often')) { return ['✨', '⭐', '⚡', '💫'][index]; } // Agreement questions if (choiceLower.includes('agree') || choiceLower.includes('disagree')) { return ['👍', '🤝', '🤔', '👎'][index]; } // Progress/Development questions if (questionLower.includes('progress') || questionLower.includes('development') || questionLower.includes('growth') || questionLower.includes('career')) { return ['🚀', '📈', '📊', '📉'][index]; } // Stress/Workload questions if (questionLower.includes('stress') || questionLower.includes('workload') || questionLower.includes('pressure') || questionLower.includes('anxiety')) { return ['🌟', '💫', '⚡', '🌪️'][index]; } // Generic responses return ['🎯', '🎪', '🎭', '🎨'][index]; }; 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' }} >

{getAnswerEmoji(q.question, choice, i)}

{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: '20px', borderRadius: '12px', border: '2px solid #e2e8f0', transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', cursor: 'pointer', textAlign: 'center', position: 'relative', overflow: 'hidden', background: 'linear-gradient(45deg, #ffffff, #f8fafc)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '120px', '&:hover': { backgroundColor: '#f1f5f9', borderColor: '#94a3b8', transform: 'translateY(-2px)', boxShadow: '0 4px 6px rgba(0, 0, 0, 0.05)' } }, 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();