Quick Summary
This comprehensive blog tutorial briefly covers how to build a Vue quiz app. We will walk you through setting up your project, organizing reusable components, managing quiz data, and implementing interactive logic. By the end of this guide, you will be able to develop dynamic quiz applications using Vue.js.
Table of Contents
One of the biggest challenges developers face after learning a framework like Vue.js is bridging the gap between theory and application. Understanding syntax is one thing, but applying that knowledge to create structured, responsive, and maintainable applications is where the real test begins.
This is where developing a Vue quiz app comes into the picture. It provides lightweight components and makes development easier with dynamic rendering, prop drilling, and conditional logic.
In this blog, we will guide you step-by-step through building a fully functional frontend development quiz app using Vue.js, complete with question navigation, scoring, and smooth user interaction. Let’s start creating a dynamic and compelling Vue.js quiz app.
To get started, we will first create a new VueJS project. It will give you a clean slate to build upon and organize our app’s components and features effectively.
Here, we will be using Vue 2. Run the below command to create the VueJs app.
You will get preview like this-
Now, with the help of the following command navigate to the directory and run the server.
The localhost will display the default screen as shown below.
Every Vue component consists of three sections:
Explanation of Component Logic
The component includes two core methods that handle critical aspects of the quiz functionality. These methods are essential for managing the user’s progress, calculating the score, and ensuring a smooth flow through the quiz experience. Let’s break down each of them:
This method receives the user’s score from the Quiz component via a custom event named quiz-completed. It updates the local state property this.score with the received value.
This method increments the quizKey data property. Updating this key forces the Quiz component to re-render. It’s triggered by the reload event emitted from the CustomModal component.
Hire vuejs developers from us to help you turn your concept into a fully functional app!
We are moving ahead with our tutorial on developing a front-end quiz app using VueJS. Next, we will start with our components: the Quiz Component and the CustomModal Component.
CustomModal.vue
The file CustomModal.vue will consist of the UI and logic code of the modal. Refer to the code below.
Explanation:
You have {{ correctAnswers }} correct {{ pluralizeAnswer }}!Currently at question {{ index + 1 }} of {{ questions.length }}
Explanation:
Here’s the logic part of the Quiz component. Let’s pick a method one at a time and see what the logic is about.
The prop ‘questions’ is initialized with an empty array. When ‘loading’ is true, we will fetch the questions using Trivia API, and when the component mounts, we will push them to the array. Here, five questions will be fetched every time an API call is made.
async fetchQuestions() { this.loading = true; //fetching questions from API let response = await fetch( "https://opentdb.com/api.php?amount=5&category=21&type=multiple" ); let index = 0; //To identify single answer let data = await response.json(); let questions = data.results.map((question) => { question.answers = [ question.correct_answer, ...question.incorrect_answers, ]; //shuffle above array for (let i = question.answers.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [question.answers[i], question.answers[j]] = [ question.answers[j], question.answers[i], ]; } //add right answers and key question.rightAnswer = null; question.key = index; index++; return question; }); this.questions = questions; this.loading = false; },
The computed property currentQuestion() will return the current question at the current index.
currentQuestion() { if (this.questions !== []) { return this.questions[this.index]; } return null; },
The code snippet below is to keep count of the correct answers.
correctAnswers() { if (this.questions && this.questions.length > 0) { let streakCounter = 0; this.questions.forEach(function (question) { if (!question.rightAnswer) { return; } else if (question.rightAnswer === true) { streakCounter++; } }); return streakCounter; } else { return "--"; } },
The logic below will calculate the score. The ‘score()’ will use a reducer array prototype to reduce the current questions array to a n number. It returns the ‘score’ object that we use in the customModal component.
score() { if (this.questions !== []) { return { allQuestions: this.questions.length, answeredQuestions: this.questions.reduce((count, currentQuestion) => { if (currentQuestion.userAnswer) { // userAnswer is set when user has answered a question, no matter if right or wrong count++; } return count; }, 0), correctlyAnsweredQuestions: this.questions.reduce( (count, currentQuestion) => { if (currentQuestion.rightAnswer) { // rightAnswer is true, if user answered correctly count++; } return count; }, 0 ), }; } else { return { allQuestions: 0, answeredQuestions: 0, correctlyAnsweredQuestions: 0, }; } },
We will keep a watcher on quizCompleted(). If the quiz is completed, it will emit the event and display the score using this score for the app component.
watch: { quizCompleted(completed) { completed && setTimeout(() => { this.$emit("quiz-completed", this.score); }, 3000); }, },
To check the correct answer, it will compare userAnswer, the answer given by the user, and correct_answer, the answer given by the API. It further sets ‘.rightAnswer’ and ‘.wrongAnswer’ accordingly and manages the index state for moving on to the next question.
checkCorrectAnswer(e, index) { let question = this.questions[index]; if (question.userAnswer) { if (this.index < this.questions.length - 1) { setTimeout( function () { this.index += 1; }.bind(this), 3000 ); } if (question.userAnswer === question.correct_answer) { /* Set class on Button if user answered right, to celebrate right answer with animation joyfulButton */ e.target.classList.add("rightAnswer"); /* Set rightAnswer on question to true, computed property can track a streak out of 20 questions */ this.questions[index].rightAnswer = true; } else { /* Mark users answer as wrong answer */ e.target.classList.add("wrongAnswer"); this.questions[index].rightAnswer = false; /* Show right Answer */ let correctAnswer = this.questions[index].correct_answer; let allButtons = document.querySelectorAll(`[index="${index}"]`); allButtons.forEach(function (button) { if (button.innerHTML === correctAnswer) { button.classList.add("showRightAnswer"); } }); } } },
Run the server
After running the server, hit the browser and your UI will look something like this
When you click the answer, you will know whether your answer is correct or not. The next question will be displayed simultaneously. At the end of the quiz, you will have the score board that will display your correct answer(s).
Developing a quiz app with Vue js is creating an app that goes beyond the basics. From handling component structure and state management to implementing dynamic logic and external API integration, this project highlights Vue’s core concepts in a practical, engaging way.
Whether you are learning Vue to improve your skills or planning to launch a quiz or survey app for your business, Vue.js gives you the tools to move fast and build smart. And if you want to make sure your app is fast, scalable, and looks great, teaming up with a trusted Vue.js development company can help you implement that app without any usual headaches.
One of the most effective ways to learn Vue.js is by building small, focused applications like a quiz app. It covers essential concepts, such as component creation, data binding, event handling, and state management.
You can use fetch() or Axios to retrieve quiz data from public APIs like the Open Trivia Database. This approach will help you simulate real-world API consumption and teaches you how to handle asynchronous data in Vue using lifecycle hooks and state updates.
You can absolutely enhance it by adding user authentication, result tracking with a backend, Vue Router for multi-page navigation, or Vuex for centralized state management. These additions make the app more production-ready and scalable.
Your Success Is Guaranteed !
We accelerate the release of digital product and guaranteed their success
We Use Slack, Jira & GitHub for Accurate Deployment and Effective Communication.