Create a Quiz

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.