Create a quiz with Vue.js

Raphaël Huchet
codeburst
Published in
2 min readNov 1, 2016

I don’t understand Angular. I really like React, but I am still learning basics. Let’s try Vue. Here is how I created a micro quiz player.

Initialization

HTML

First create a small HTML skeleton and include Vue.

Save it to foo.html and open it in a browser, you should see Hello, it works. We just learned how to render data with Mustache syntax: {{ title }}

Data

Then create a simple quiz object, and attach it to Vue’s instance data.

This is our quiz, next step is how to render it with Vue loops.

Render data in HTML

Vue provides a directive-driven loop system by adding v-for=”item on items” in a HTML element.

Vue has an unobtrusive reactivity system. If data object changes, HTML view updates. The quiz is now entirely rendered, it’s alive and reactive.

Navigation

Until now, all questions were displayed on the same page. Let’s change it to display only one question per page. To do so, we have to add “next” and “previous” buttons on each question, and hide all questions which are not the current question.

Vue instance: navigation methods

The app we created has to deal with user input: click on buttons. First, add a current question index data and two navigation methods to the Vue instance.

questionIndex increments with next() and decrements with prev()

HTML: navigation buttons

Create a button with v-on:click=”next” directive on it to trigger next() method. Add v-show=”index === questionIndex” on the question container to display only current question (don’t forget to add index parameter to the v-for directive)

Now we can navigate into the quiz. Last page is blank, we should display quiz result in it.

Quiz result

To display a score result, we have to handle user response for each question. That was the hardest step for me.

Handle user responses

Right now, the quiz radio buttons have no binding with Vue: clicking a radio has not effect. v-model directive makes two-way binding between form input and app state possible. Replace the previously created radio element.

name and value attributes are bound to Vue data. Then, initialize userResponses in Vue instance.

That was the last step in order to handle user responses: userResponses contains an alive array of “true if correct”. You can navigate forward and backward, select and change answers, and see userResponses “updating”.

Display score

The final score is the sum of “true” values in userResponses. Create a method in Vue app to compute this score.

Then add the quiz final page with total score.

That’s all, the quiz works. You can try it here and download the code there.

Final thoughts

I’m a rusty javascripter, and I just started tinkering with Vue. I wanted to share my feeling about how it’s easy to get started. Feel free to criticize @rap2h

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in codeburst

Bursts of code to power through your day. Web Development articles, tutorials, and news.

Responses (7)

What are your thoughts?