Quiz – Web Game | React

Introduction

Welcome to the Quiz - Web Game | React tutorial! In this comprehensive guide, we will take you through the process of building a fully functional quiz web game using React, a popular JavaScript library for building user interfaces. This tutorial is designed for developers of all skill levels, from beginners to advanced React developers.

What You Will Learn

By the end of this tutorial, you will have a fully functional quiz web game built using React, with the following features:

• Multiple choice questions with answers
• Scorekeeping and scoring system
• Game timer
• High score tracking
• Responsive design

Prerequisites

Before starting this tutorial, make sure you have the following:

• Basic knowledge of JavaScript and HTML/CSS
• Familiarity with React (if not, you can start with the official React documentation)
• A code editor or IDE (Integrated Development Environment) of your choice
• Node.js and npm (Node Package Manager) installed on your computer

Step 1: Setting Up the Project

To start building our quiz web game, we will create a new React project using the following command in your terminal:

npx create-react-app quiz-game

This will create a new directory called quiz-game with the basic React project structure.

Step 2: Creating the Quiz Data

Create a new file called questions.json in the src directory and add the following data:

[
  {
    "question": "What is the capital of France?",
    "answers": ["Paris", "London", "Berlin", "Rome"],
    "correctAnswer": 0
  },
  {
    "question": "What is the largest planet in our solar system?",
    "answers": ["Earth", "Saturn", "Jupiter", "Uranus"],
    "correctAnswer": 2
  },
  {
    "question": "What is the most popular programming language?",
    "answers": ["JavaScript", "Python", "Java", "C++"],
    "correctAnswer": 0
  }
]

This file contains an array of objects, each representing a question with its answers and the correct answer.

Step 3: Creating the Quiz Component

Create a new file called Quiz.js in the src directory and add the following code:

import React, { useState } from 'react';
import questions from './questions.json';

const Quiz = () => {
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [score, setScore] = useState(0);
  const [timer, setTimer] = useState(0);

  const handleAnswer = (answer) => {
    if (answer === questions[currentQuestion].correctAnswer) {
      setScore(score + 1);
    }
    setCurrentQuestion(currentQuestion + 1);
  };

  const handleTimer = () => {
    setTimer(timer + 1);
  };

  return (
    <div>
      <h1>{questions[currentQuestion].question}</h1>
      <ul>
        {questions[currentQuestion].answers.map((answer, index) => (
          <li key={index}>
            <input type="radio" name="answer" value={index} onClick={() => handleAnswer(index)} />
            {answer}
          </li>
        ))}
      </ul>
      <p>Score: {score}</p>
      <p>Time: {timer}</p>
    </div>
  );
};

export default Quiz;

This component uses the useState hook to store the current question, score, and timer. It also defines two functions: handleAnswer to update the score and move to the next question, and handleTimer to increment the timer.

Step 4: Creating the App Component

Create a new file called App.js in the src directory and add the following code:

import React from 'react';
import Quiz from './Quiz';

const App = () => {
  return (
    <div>
      <Quiz />
    </div>
  );
};

export default App;

This component simply renders the Quiz component.

Step 5: Creating the Index File

Create a new file called index.js in the src directory and add the following code:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

This file sets up the React DOM and renders the App component to the #root element in the index.html file.

Step 6: Adding Styles

Create a new file called styles.css in the src directory and add the following code:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.quiz-container {
  max-width: 400px;
  margin: 40px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.question {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.answers {
  list-style: none;
  padding: 0;
  margin: 0;
}

.answers li {
  margin-bottom: 10px;
}

.answers li input[type="radio"] {
  margin-right: 10px;
}

.answers li label {
  font-size: 18px;
}

This file adds basic styling to our quiz game.

Step 7: Running the Quiz Game

Open your terminal and navigate to the quiz-game directory. Run the following command to start the quiz game:

npm start

This will start the quiz game in your default web browser.

That's it! You have now built a fully functional quiz web game using React.