Quiz

[Tlyons46]

import React, { useState } from 'react';

// Main App component for the Space Quiz
function App() {
// Array of quiz questions, each with a question, options, and the correct answer.
const questions = [
{
questionText: 'What is the largest planet in our solar system?',
answerOptions: [
{ answerText: 'Earth', isCorrect: false },
{ answerText: 'Jupiter', isCorrect: true },
{ answerText: 'Mars', isCorrect: false },
{ answerText: 'Saturn', isCorrect: false },
],
},
{
questionText: 'Which galaxy is our solar system a part of?',
answerOptions: [
{ answerText: 'Andromeda', isCorrect: false },
{ answerText: 'Triangulum', isCorrect: false },
{ answerText: 'Milky Way', isCorrect: true },
{ answerText: 'Whirlpool', isCorrect: false },
],
},
{
questionText: 'What is the name of the first human to walk on the Moon?',
answerOptions: [
{ answerText: 'Buzz Aldrin', isCorrect: false },
{ answerText: 'Yuri Gagarin', isCorrect: false },
{ answerText: 'Neil Armstrong', isCorrect: true },
{ answerText: 'Michael Collins', isCorrect: false },
],
},
{
questionText: 'How many planets are in our solar system?',
answerOptions: [
{ answerText: '7', isCorrect: false },
{ answerText: '8', isCorrect: true },
{ answerText: '9', isCorrect: false },
{ answerText: '10', isCorrect: false },
],
},
{
questionText: 'What is a "shooting star" actually?',
answerOptions: [
{ answerText: 'A star falling from the sky', isCorrect: false },
{ answerText: 'A meteoroid burning up in Earth's atmosphere', isCorrect: true },
{ answerText: 'A comet', isCorrect: false },
{ answerText: 'A distant galaxy', isCorrect: false },
],
},
];

// State variables for managing the quiz flow
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0); // Tracks the current question
const [score, setScore] = useState(0); // Stores the user's score
const [showScore, setShowScore] = useState(false); // Controls when to display the final score
const [selectedOption, setSelectedOption] = useState(null); // Stores the currently selected option by the user
const [feedbackMessage, setFeedbackMessage] = useState(''); // Provides immediate feedback (correct/incorrect)

// Handles the user's answer selection
const handleAnswerOptionClick = (isCorrect, answerText) => {
setSelectedOption(answerText); // Set the selected option
if (isCorrect) {
setScore(score + 1); // Increment score if correct
setFeedbackMessage('Correct!'); // Set correct feedback
} else {
setFeedbackMessage('Incorrect!'); // Set incorrect feedback
}
};

// Handles moving to the next question
const handleNextQuestion = () => {
const nextQuestion = currentQuestionIndex + 1;
setSelectedOption(null); // Clear selected option for the next question
setFeedbackMessage(''); // Clear feedback message for the next question

if (nextQuestion < questions.length) {
  setCurrentQuestionIndex(nextQuestion); // Move to the next question
} else {
  setShowScore(true); // If no more questions, show the score
}

};

// Resets the quiz to its initial state
const handleRestartQuiz = () => {
setCurrentQuestionIndex(0);
setScore(0);
setShowScore(false);
setSelectedOption(null);
setFeedbackMessage('');
};

return (

{showScore ? (
// Display the final score

You scored {score} out of {questions.length}!

Restart Quiz

) : (
// Display the current question and answer options
<>

Question {currentQuestionIndex + 1}/{questions.length}

{questions[currentQuestionIndex].questionText}

{questions[currentQuestionIndex].answerOptions.map((answerOption, index) => (
<button
key={index}
onClick={() => handleAnswerOptionClick(answerOption.isCorrect, answerOption.answerText)}
className={w-full py-3 px-4 text-left rounded-xl border-2 font-medium transition duration-300 ease-in-out ${selectedOption === answerOption.answerText ? (answerOption.isCorrect ? 'bg-green-100 border-green-500 text-green-800' : 'bg-red-100 border-red-500 text-red-800') : 'bg-gray-50 border-gray-300 text-gray-700 hover:bg-gray-100 hover:border-blue-400' } ${selectedOption !== null ? 'cursor-not-allowed opacity-80' : 'cursor-pointer'}}
disabled={selectedOption !== null} // Disable options after one is selected
>
{answerOption.answerText}

))}

{feedbackMessage && (
<div className={text-center text-lg font-semibold mb-4 ${feedbackMessage === 'Correct!' ? 'text-green-600' : 'text-red-600'}}>
{feedbackMessage}

)}
<button
onClick={handleNextQuestion}
className={w-full py-3 px-6 bg-purple-600 text-white font-semibold rounded-xl hover:bg-purple-700 transition duration-300 transform hover:scale-105 shadow-lg ${selectedOption === null ? 'opacity-50 cursor-not-allowed' : ''}}
disabled={selectedOption === null} // Disable next button until an option is selected
>
Next Question

</>
)}

);
}

export default App;