import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; // Mock question templates for different subjects 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 [topic, setTopic] = useState(''); const [questions, setQuestions] = useState([]); const [quizHistory, setQuizHistory] = useState([]); const [error, setError] = useState(''); const [selectedAnswers, setSelectedAnswers] = useState({}); const [isSubmitted, setIsSubmitted] = useState(false); const [grade, setGrade] = useState(null); const generateQuestions = () => { setError(''); if (!topic.trim()) { setError('Please enter a topic'); return; } const lowercaseTopic = topic.toLowerCase(); let template; // Check for specific templates first if (lowercaseTopic.includes('math')) { template = questionTemplates.math; } else if (lowercaseTopic.includes('history')) { template = questionTemplates.history; } else if (lowercaseTopic.includes('science')) { template = questionTemplates.science; } else { // Use generic templates for any other topic template = questionTemplates.generic; } const generatedQuestions = Array(4).fill(null).map(() => { const randomTemplate = template[Math.floor(Math.random() * template.length)]; return randomTemplate.generateChoices(topic); }); setQuestions(generatedQuestions); setSelectedAnswers({}); setIsSubmitted(false); setGrade(null); }; return (

✨ 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 (!selectedAnswers[index]) { setSelectedAnswers(prev => ({ ...prev, [index]: i })); } }} style={{ ...styles.choice, backgroundColor: isSubmitted ? i === q.correctAnswer ? '#d4edda' : selectedAnswers[index] === i ? '#fee2e2' : 'white' : selectedAnswers[index] === i ? '#e2e8f0' : 'white', cursor: isSubmitted ? 'default' : 'pointer' }} > {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 styles = { container: { maxWidth: '1200px', margin: '0 auto', padding: '20px', fontFamily: '"Segoe UI", system-ui, -apple-system, sans-serif', backgroundColor: '#f8fafc', minHeight: '100vh', height: '100%', overflowY: 'auto', position: 'relative', paddingBottom: '60px', '@media (max-width: 768px)': { padding: '20px 15px', } }, inputContainer: { display: 'flex', gap: '10px', marginBottom: '20px', backgroundColor: 'white', padding: '15px', borderRadius: '16px', boxShadow: '0 4px 6px rgba(0, 0, 0, 0.05)', '@media (max-width: 640px)': { flexDirection: 'column', padding: '20px', } }, input: { flex: 1, padding: '12px 16px', fontSize: '16px', borderRadius: '8px', border: '2px solid #e2e8f0', transition: 'border-color 0.2s ease', outline: 'none', '&:focus': { borderColor: '#3b82f6', } }, 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', '&: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', }, questionsGrid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '20px', width: '100%', marginBottom: '20px', '@media (max-width: 640px)': { gridTemplateColumns: '1fr', gap: '20px', } }, questionCard: { backgroundColor: 'white', padding: '20px', borderRadius: '12px', boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)', transition: 'all 0.3s ease', border: '1px solid #e2e8f0', '&:hover': { transform: 'translateY(-2px)', boxShadow: '0 8px 30px rgba(0, 0, 0, 0.12)', }, '@media (max-width: 640px)': { padding: '20px', } }, choices: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '8px', marginTop: '15px', '@media (max-width: 480px)': { gridTemplateColumns: '1fr', } }, choice: { padding: '16px', borderRadius: '12px', border: '2px solid #e2e8f0', transition: 'all 0.2s ease', cursor: 'pointer', textAlign: 'center', fontSize: '1rem', fontWeight: '500', '&:hover': { backgroundColor: '#f1f5f9', borderColor: '#94a3b8', transform: 'translateY(-1px)', }, '@media (max-width: 480px)': { padding: '14px', } }, 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', } }; const App = () => { return (

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