Create a Quiz Game with Vue 3 and JavaScript

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a quiz game with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create quiz-game

and select all the default options to create the project.

Create the Quiz Game

To create the quiz app, we write:

<template>
  <form>
    <div v-if="questionIndex < questions.length">
      <label>{{ question.question }}</label>
      <div v-for="c of question.choices" :key="c">
        <input type="radio" name="choice" v-model="answer" :value="c" />
        {{ c }}
      </div>
    </div>
    <div v-else>
      <button type="button" @click="restart">restart</button>
    </div>
    <button type="button" @click="submit">check</button>
  </form>
  <p>score: {{ score }}</p>
</template>

<script>
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 {
  name: "App",
  data() {
    return {
      questions,
      score: 0,
      questionIndex: 0,
      question: questions[0],
      answer: "",
    };
  },
  methods: {
    submit() {
      const { answer, question, questions, questionIndex } = this;
      if (answer === question.rightAnswer) {
        this.score++;
      }

      if (questionIndex < questions.length) {
        this.questionIndex++;
        this.question = { ...questions[this.questionIndex] };
      }
    },
    restart() {
      this.question = questions[0];
      this.answer = "";
      this.questionIndex = 0;
      this.score = 0;
    },
  },
};
</script>

We have the form element with a div to display the question.

We display a question only if questionIndex is less than questions.length .

If questionIndex is equal to questions.length , then we ran out of questions to display.

To display the question, we render the question.question in the label.

And we render the question.choices entry in the div below it.

We render radio buttons by rendering an input with type set to radio .

The name attribute are all set to choice so that the browser knows that they’re in the same group.

This means we can only choose one of them.

v-model is also bound to the same value so the selected choice is bound to the answer reactive property.

Otherwise, we display the restart button so that the restart method is called when we click it.

We display the submit button below that to submit the answer.

And we display the score below that.

In the script tag, we have the question entries with the chocies and rightAnswer .

The data has all our reactive properties’ initial values.

The submit method is where we check out answer.

We get the answer and compare it to question.rightAnswer .

question has the current question.

If they’re the same, we increase score by 1.

And if questionIndex is less than questions.length , we move to the next question by increasing questionIndex by 1.

And then we set this.question to the new question after that.

Once we went through all the questions, restart is run.

We just reset the reactive variables to their initial values.

Conclusion

We can create a quiz game easily with Vue 3 and JavaScript.