Endless Quiz App

import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './src/App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); import React, { useState, useEffect } from 'react'; import Question from './Question'; import './styles.css'; const App = () => { const [questions, setQuestions] = useState([]); const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0); const [score, setScore] = useState(0); const [feedback, setFeedback] = useState(''); const [quizActive, setQuizActive] = useState(true); useEffect(() => { fetchQuestions(); }, []); const fetchQuestions = async () => { // Replace with API call if you have backend, otherwise use static questions const fetchedQuestions = [ { question: 'What is the capital of France?', correctAnswer: 'Paris', incorrectAnswers: ['London', 'Berlin', 'Rome'], }, { question: 'What is the highest mountain in the world?', correctAnswer: 'Mount Everest', incorrectAnswers: ['K2', 'Kangchenjunga', 'Lhotse'], }, { question: 'What is the largest planet in our solar system?', correctAnswer: 'Jupiter', incorrectAnswers: ['Saturn', 'Uranus', 'Neptune'], }, { question: 'Who painted the Mona Lisa?', correctAnswer: 'Leonardo da Vinci', incorrectAnswers: ['Michelangelo', 'Raphael', 'Donatello'], }, { question: 'What is the chemical symbol for water?', correctAnswer: 'H2O', incorrectAnswers: ['CO2', 'NaCl', 'O2'], }, ]; // Simulate API delay setTimeout(() => { setQuestions(fetchedQuestions); }, 500); }; const handleAnswerSelection = (selectedAnswer) => { if (!quizActive) return; const currentQuestion = questions[currentQuestionIndex]; if (selectedAnswer === currentQuestion.correctAnswer) { setScore(score + 1); setFeedback('Correct!'); } else { setFeedback(`Incorrect. The correct answer is ${currentQuestion.correctAnswer}.`); } setQuizActive(false); // Disable further answers until next question }; const nextQuestion = () => { setCurrentQuestionIndex((prevIndex) => (prevIndex + 1) % questions.length); // Loop through questions setFeedback(''); setQuizActive(true); // Enable answers for the new question }; if (questions.length === 0) { return

Loading Questions...

; } const currentQuestion = questions[currentQuestionIndex]; const allAnswers = [...currentQuestion.incorrectAnswers, currentQuestion.correctAnswer].sort(() => Math.random() - 0.5); // Shuffle answers return (

Endless Quiz

Score: {score}

{feedback && (

{feedback}

)}

); }; export default App; import React from 'react'; const Question = ({ question, answers, onAnswerSelect, quizActive }) => { return (

{question}

); }; export default Question; body { font-family: 'Arial', sans-serif; background-color: #f4f7f6; color: #333; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .app { background-color: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); text-align: center; width: 80%; max-width: 600px; } h1 { color: #3498db; margin-bottom: 20px; } .score { font-size: 1.2em; margin-bottom: 30px; color: #777; } .question-container { margin-bottom: 30px; padding: 20px; background-color: #ecf0f1; border-radius: 8px; } .question-text { font-size: 1.4em; color: #2c3e50; margin-bottom: 20px; } .answers-list { list-style: none; padding: 0; } .answer-item { margin-bottom: 10px; } .answer-button { display: block; width: 100%; padding: 12px; border: none; border-radius: 6px; background-color: #3498db; color: white; font-size: 1em; cursor: pointer; transition: background-color 0.3s ease; } .answer-button:hover { background-color: #2980b9; } .answer-button:disabled { background-color: #95a5a6; cursor: default; } .feedback { margin-top: 20px; padding: 15px; border-radius: 6px; } .feedback.correct { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .feedback.incorrect { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .feedback p { margin-bottom: 10px; } .feedback button { padding: 10px 20px; border: none; border-radius: 6px; background-color: #3498db; color: white; cursor: pointer; font-size: 1em; transition: background-color 0.3s ease; } .feedback button:hover { background-color: #2980b9; } ```