Vue Examples

Quiz ​

There are lots of ways to implement a quiz.

A common approach is to use multiple choice questions, allowing the player to click on the correct answers.

The example shown below takes a different approach, with the player typing answers into a text input. Correct answers are shown beneath, after they are typed in.

Example ​

Live Example

Name 11 chemical elements with different last letters

0 / 11
0s
?
?
?
?
?
?
?
?
?
?
?

View it on the SFC Playground

Some questions allow for slight variations on the answer, such as case insensitivity, ignoring punctuation, or allowing different ways to word an equivalent answer.

The answers to the Music question are in a particular order. They don't have to be entered in that order, but matches are shown in the correct order.

The answers to the Chemistry question are dynamic, changing based on previous answers.

Features Used ​

Your implementation doesn't need to use the same Vue features as the example above, but to give you some idea of the knowledge you might need to attempt this:

  • The example above is written using a single component, with separate .js data files for each question.
  • It uses a Single-File Component with <script setup>.
  • Core reactivity functions: reactive(), ref(), computed() and watch().
  • The template uses:
    • Text interpolation, {{ ... }}.
    • v-for for looping.
    • v-model for two-way binding on the <input> and <select>.
    • v-on/@ for handling events.
    • Attributes bindings with v-bind/:.