Vue2: Quiz App

Easy
3
20.0% Acceptance

Objective

Build a simple interactive quiz application using Vue. Your application should display a series of multiple-choice questions, each with four possible answers. At the bottom, include a "Submit" button that, when clicked, will evaluate the answers and display the number of correct answers to the user.

Key Concepts to Implement:

  1. Use the v-on directive to listen for click events on the multiple-choice options and the "Submit" button.
  2. Utilize data properties to manage the state of the quiz, such as the selected answers and the correct answers.
  3. Apply two-way data binding with v-model to easily track which options the user selects.
  4. Implement a method that gets triggered when the "Submit" button is clicked to evaluate the quiz.

By completing this lab, you will gain practical experience with event handling, data binding, and Vue methods.

Challenges Information

Create the Vue App Root

Task: Your Vue application should have a root element with the id of app.

Details: Make sure the root element for your Vue application has an id attribute set to app.

Display the Main Heading

Task: Display a main heading with the text Hello Quiz App.

Details: Create an h1 element and set its text content to Hello Quiz App.

Add a Reset Button

Task: Add a button to reset the quiz.

Details: Create a button element with the id of reset-button and text Reset Quiz.

Add Quiz Score Element

Task: Display the quiz score.

Details: Create a p element with the id of result that will show the quiz score. Initially, it should display Score: 0.

Create a Questions Container

Task: Add a div to contain the questions and options.

Details: Create a div element with the id of questions-container to hold your questions and multiple-choice options.

Display a Question

Task: Display a quiz question.

Details: Inside questions-container, add a p element with the id of question to display a quiz question.

Display Multiple-Choice Options

Task: Add multiple-choice options for the question.

Details: Inside questions-container, add four button elements each with a class of option. They should have different answer options for the displayed question.