Vue2: Quiz App
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:
- Use the
v-on
directive to listen for click events on the multiple-choice options and the "Submit" button. - Utilize data properties to manage the state of the quiz, such as the selected answers and the correct answers.
- Apply two-way data binding with
v-model
to easily track which options the user selects. - 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.