top of page
Create a Quiz

Create a Quiz

Create a quiz that randomly selects questions from a database collection.

Intermediate.png

Intermediate

25K

Published:

June 22, 2021

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

In this example, we create a quiz that randomly chooses 5 questions from a collection. Once the site visitor answers all the quiz questions and submits them, we validate their answers, show the correct answer for each question, and display the final score.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It

Collection

 

We created a Questions collection that stores all of the questions and the visitors' answers.

 

 

Page Elements

 

We added the following elements:

 

  • 3 text elements: for welcoming site visitors and showing the score.

  • 2 buttons: start quiz button and submit button.

  • Repeater: contains the questions and their possible answers. After submission the repeater also contains the correct answer for each question and text indicating whether the visitor’s answer was correct or incorrect.

 

 

Backend Code

 

We added the questions.jsw web module to get information about the questions and answers from the Questions collection:

 

  • getAllQuestions(): a function that queries the collection and returns all of its items.

  • getRandomQuestions(): a function that receives a variable indicating how many questions it should return. The function calls the getAllQuestions() function to get all questions and returns the specified number of randomly selected questions.

 

 

Page Code

 

  1. In the $w.onReady function we initiate the buttons' onClick event handlers.

  2. When the site visitor clicks the Start Quiz button we get 5 random questions using the getRandomQuestions() function and bind them to the repeater's data.

  3. When clicking the submit button we first validate that the site visitor has answered all the quiz questions. If so we validate the answers.

  4. We compare each answer with the correct answer we got from the quiz data and show a message letting the visitor know if each answer is correct or not.

  5. We also evaluate the visitor’s score, adding 20 points for each correct answer. 

APIs We Used

Non-code example.

Non-code example.

Non-code example.

Non-code example.

Non-code example.

Related Articles

Article Link

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Maintain Page State

Maintain Page State

Maintain the state of your repeater while navigating to a dynamic page.

Intermediate.png

Intermediate

Gift Quiz

Gift Quiz

Help customers find the perfect gift with a quiz and product recommendations.

Intermediate.png

Intermediate

Country Autocomplete

Country Autocomplete

Automatically complete country names while typing. Use your keyboard to select the country you want.

Intermediate.png

Intermediate

Anchor 2
bottom of page