Quiz AppA Quiz App is an interactive application designed to test a user's knowledge on a particular subject through a series of questions. It typically presents questions one by one, allows the user to select an answer from a set of options, provides feedback (sometimes), and calculates a final score.\n\nKey functionalities of a Quiz App often include:\n* Question Display: Presenting a question along with multiple-choice answer options.\n* Answer Handling: Capturing the user's selected answer.\n* Score Tracking: Keeping a running tally of correct answers.\n* Navigation: Moving between questions (e.g., next/previous, though in simpler apps, it might be linear).\n* Results Display: Showing the user's total score and often a summary of correct/incorrect answers at the end.\n* Restart Option: Allowing the user to take the quiz again.\n\nIn React, building a Quiz App is an excellent way to practice fundamental concepts:\n* Components: Breaking down the UI into reusable pieces (e.g., `QuestionCard`, `AnswerOption`, `ResultsScreen`).\n* State Management: Using `useState` hooks to manage the current question index, the user's score, whether the quiz has ended, and potentially the selected answers for each question.\n* Props: Passing data down from parent components (e.g., questions array, current question data) to child components.\n* Conditional Rendering: Displaying different parts of the UI based on the application's state (e.g., showing the quiz questions while in progress vs. showing the results screen when finished).\n* Event Handling: Responding to user interactions, such as clicking an answer button.\n* Data Structures: Organizing quiz questions and answers efficiently, typically as an array of objects.\n\nThe example code provided will demonstrate a basic Quiz App structure using functional components and `useState` hooks. It will iterate through a predefined set of questions, track the score, and display the final results.
Example Code
import React, { useState } from 'react';\n\n// Basic CSS for demonstration purposes\nconst styles = {\n quizContainer: {\n fontFamily: 'Arial, sans-serif',\n maxWidth: '600px',\n margin: '50px auto',\n padding: '20px',\n border: '1px solid #ddd',\n borderRadius: '8px',\n boxShadow: '0 2px 4px rgba(0,0,0,0.1)',\n backgroundColor: '#fff',\n },\n questionSection: {\n marginBottom: '20px',\n },\n questionCount: {\n fontSize: '14px',\n color: '#666',\n marginBottom: '10px',\n },\n questionText: {\n fontSize: '20px',\n fontWeight: 'bold',\n marginBottom: '20px',\n },\n answerSection: {\n display: 'flex',\n flexDirection: 'column',\n },\n answerButton: {\n backgroundColor: '#f0f0f0',\n border: '1px solid #ccc',\n borderRadius: '5px',\n padding: '10px 15px',\n marginBottom: '10px',\n cursor: 'pointer',\n textAlign: 'left',\n fontSize: '16px',\n transition: 'background-color 0.2s',\n },\n answerButtonHover: {\n backgroundColor: '#e0e0e0',\n },\n resultsSection: {\n textAlign: 'center',\n },\n resultsText: {\n fontSize: '24px',\n fontWeight: 'bold',\n marginBottom: '20px',\n },\n restartButton: {\n backgroundColor: '#007bff',\n color: '#fff',\n border: 'none',\n borderRadius: '5px',\n padding: '12px 20px',\n fontSize: '18px',\n cursor: 'pointer',\n transition: 'background-color 0.2s',\n },\n restartButtonHover: {\n backgroundColor: '#0056b3',\n },\n};\n\nconst questions = [\n {\n questionText: 'What is the capital of France?',\n answerOptions: [\n { "answerText": 'New York', "isCorrect": false },\n { "answerText": 'London', "isCorrect": false },\n { "answerText": 'Paris', "isCorrect": true },\n { "answerText": 'Dublin', "isCorrect": false },\n ],\n },\n {\n questionText: 'Who is the CEO of Tesla?',\n answerOptions: [\n { "answerText": 'Jeff Bezos', "isCorrect": false },\n { "answerText": 'Elon Musk', "isCorrect": true },\n { "answerText": 'Bill Gates', "isCorrect": false },\n { "answerText": 'Tony Stark', "isCorrect": false },\n ],\n },\n {\n questionText: 'The iPhone was originally released in what year?',\n answerOptions: [\n { "answerText": '1995', "isCorrect": false },\n { "answerText": '2005', "isCorrect": false },\n { "answerText": '2007', "isCorrect": true },\n { "answerText": '2010', "isCorrect": false },\n ],\n },\n {\n questionText: 'What is the largest planet in our solar system?',\n answerOptions: [\n { "answerText": 'Earth', "isCorrect": false },\n { "answerText": 'Mars', "isCorrect": false },\n { "answerText": 'Jupiter', "isCorrect": true },\n { "answerText": 'Saturn', "isCorrect": false },\n ],\n },\n];\n\nfunction QuizApp() {\n const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);\n const [score, setScore] = useState(0);\n const [showResults, setShowResults] = useState(false);\n\n const handleAnswerOptionClick = (isCorrect) => {\n if (isCorrect) {\n setScore(score + 1);\n }\n\n const nextQuestion = currentQuestionIndex + 1;\n if (nextQuestion < questions.length) {\n setCurrentQuestionIndex(nextQuestion);\n } else {\n setShowResults(true);\n }\n };\n\n const restartQuiz = () => {\n setCurrentQuestionIndex(0);\n setScore(0);\n setShowResults(false);\n };\n\n return (\n <div style={styles.quizContainer}>\n {showResults ? (\n <div style={styles.resultsSection}>\n <div style={styles.resultsText}>\n You scored {score} out of {questions.length}\n </div>\n <button style={styles.restartButton} onClick={restartQuiz}\n onMouseEnter={(e) => e.currentTarget.style.backgroundColor = styles.restartButtonHover.backgroundColor}\n onMouseLeave={(e) => e.currentTarget.style.backgroundColor = styles.restartButton.backgroundColor}\n >\n Restart Quiz\n </button>\n </div>\n ) : (\n <>\n <div style={styles.questionSection}>\n <div style={styles.questionCount}>\n <span>Question {currentQuestionIndex + 1}</span>/{questions.length}\n </div>\n <div style={styles.questionText}>\n {questions[currentQuestionIndex].questionText}\n </div>\n </div>\n <div style={styles.answerSection}>\n {questions[currentQuestionIndex].answerOptions.map((answerOption, index) => (\n <button\n key={index}\n style={styles.answerButton}\n onClick={() => handleAnswerOptionClick(answerOption.isCorrect)}\n onMouseEnter={(e) => e.currentTarget.style.backgroundColor = styles.answerButtonHover.backgroundColor}\n onMouseLeave={(e) => e.currentTarget.style.backgroundColor = styles.answerButton.backgroundColor}\n >\n {answerOption.answerText}\n </button>\n ))}\n </div>\n </>\n )}\n </div>\n );\n}\n\nexport default QuizApp;\n