Create a Quiz Game with React and JavaScript

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create an addition game with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app quiz-game

with NPM to create our React project.

Create the Quiz Game

To create the quiz game, we write:

import React, { useState } from "react";

const questions = [
  {
    question: "What is American football called in England?",
    choices: ["American football", "football", "Handball"],
    rightAnswer: "American football"
  },
  {
    question: "What is the largest country in the world?",
    choices: ["Russia", "Canada", "United States"],
    rightAnswer: "Russia"
  },
  {
    question: "What is the 100th digit of Pi?",
    choices: ["9", "4", "7"],
    rightAnswer: 9
  }
];

export default function App() {
  const [score, setScore] = useState(0);
  const [questionIndex, setQuestionIndex] = useState(0);
  const [answer, setAnswer] = useState("");

  const restart = () => {
    setScore(0);
    setAnswer("");
    setQuestionIndex(0);
  };

  const submit = (e) => {
    e.preventDefault();
    if (answer === questions[questionIndex].rightAnswer) {
      setScore((score) => score + 1);
    }

    if (questionIndex < questions.length) {
      setQuestionIndex((i) => i + 1);
    }
  };

if (questionIndex < questions.length) {
    return (
      <div>
        <label>{questions[questionIndex].question}</label>
        {questions[questionIndex].choices.map((c, i) => {
          return (
            <div>
              <input
                type="radio"
                name="choice"
                value={c}
                onChange={(e) => setAnswer(e.target.value)}
                checked={answer === c}
              />
              {c}
            </div>
          );
        })}
        <button type="button" onClick={submit}>
          check
        </button>
        <p>score: {score}</p>
      </div>
    );
  } else {
    return (
      <form>
        <div v-else>
          <button type="button" onClick={restart}>
            restart
          </button>
        </div>
        <p>score: {score}</p>
      </form>
    );
  }
}

We have the questions array with the question, choices, and rightAnswer properties with the question, the choices for the question, and the right answer for the question respectively.

Then in App , we have the score , questionIndex , and answer states created with useState .

answer is the answer the player chooses.

Below that, we have the submit function, we call e.preventDefault() to do client-side form submission.

Then we check if our answer choice is the same as rightAnswer .

If it is, then we call setScore to increment the score.

And if questionIndex is less than questions.length that means we have more questions to show.

Therefore, we call setQuestionIndex to increment the score with a callback that returns the original index i plus 1.

Next, we have an if statement that does the same check if the if in the submit function.

If questionIndex is less than questions.length , we should the question with the radio buttons for the player to choose the answer.

We set the checked prop to set the radio button to checked.

We determined which one if checked by comparing the answer value to c .

onChange lets us set the choice with a function that calls setAnswer to set the choice.

Below that, we display the check button that calls submit to submit the answer when we click it.

And then we show the score below that.

If the if condition is false , we show the restart button that calls restart to reset all the values.

And we also show the score below that.

Conclusion

We can create a quiz game easily with React and JavaScript.