Tally Score Quiz - Multi-Page

The Tally Score quiz works by revealing a result based on a total score that is accumulated based on the numeric values given to each answer.

We will go over a multi-page setup below.

How we did it

Using the SDK’s event listeners, we add up the values of each answer the user clicks on. Then, once the user reaches the end of the quiz, we show the layer that corresponds to the amount of points the user got (which can be a range of point values) based on their answers.

How to implement

1. Add Quiz Plugin Code to Ceros Experience

Create a new Ceros Experience in the Ceros Admin and Paste the following code in the Custom HTML section of the settings panel:

The numbers in quotes above are the lower bounds of each range of scores.

In our example, the score values are set up so that a cumulative value of 0-5 (minimum right) would show Result 1, Result 2 would be 6-8, Result 3 would be 9-11, and total point value would need to be 12 or higher to return Result 4.

The numbers used here are just what we chose, and you will most likely need to change them to fit your needs.

These values can be whatever you want them to be as long as the values of the questions add up to return one of the results.

You can set answer values to be zero if you’re making a true or false quiz, or if there is only one right answer per question.

Make sure that the phrase following data-score-boundary- is the same name as the tag on the page that is set as the corresponding result.

In this case it’s result1, result2, result3, and result4.   Keep this in mind because these are the tags that would need to be added to the results pages which we’ll get into in Step 4.

2. Create Quiz Assets - Question Pages with Answer Hotspots and Result Pages

First, create the assets for the quiz.

For example, you could have 4 questions (one question per page) with 4 possible answers, with the last question directing you to one of 4 possible results pages based on the cumulative score created from the addition of the value tags.

Based on the values set in the tags for each answer, the total value of the selected answers will return result 1, 2 , 3, or 4 depending on the cumulative score.

3. Create and Tag Answer Hotspots, Add Click Interactions

Next, create a hotspot over each answer choice.

After the hotspots have been created, add the appropriate tags to them within the SDK panel and the click interaction necessary to show the next question.

• Click the SDK icon (wrench and hammer) in the toolbar to bring up the SDK panel.

  

• Select the hotspot you want to work with.

• In the “Page ID” section, add the following tag:

  • question:x

    This tag defines the question the answer belongs to. In this case, x identifies the page that the question is on.

    For example, if this page contains question 1, use question:1 as the tag for the page. (Note: This will only need to be added once as it is a global tag for the page.)

• Under “Current Selection,” add the following tags:

  • answer

    This identifies the hotspot as an answer.

    (Pro Tip: All answers must have the answer tag, so to save time, you can select all answer hotspots and add this tag to all of them at the same time.)

  • value:x

    In this tag, x is the numeric value assigned to the question, or in other words, how many points that answer is worth. For example, if answer “A” is worth 2 point, you would use value:2 as the tag.

• While the hotspot is selected, add the “On Click” interaction to take users to the next page.

   

The final question’s answer hotspots will have the same tags as listed above, but with the addition of the tag of goto:results to each hotspot.

The goto:results tag takes care of sending users to the results page so, there does not need to be a click interaction on these hotspots, but you can use an On Hover interaction to boost the style and user experience.

NOTE:

Since the hotspots created for the quiz plugin only trigger SDK commands, Click and/or Hover are NOT sent to Ceros analytics, Google Analytics, Google Tag Manager or any other analytics platform via the Universal Analytics feature because typically no interaction added to the hotspot. You could of course have a setup where clicking on an answer choice triggers a pop-up, etc., but if you do not have something like that, to work around this, there would need to be a Click and/or Hover interaction added to the answer choice hotspots if you want them to be tracked. It can be anything, i.e., toggling visibility of a shape that exists off canvas.

4. Tag Results Pages

Add the following tags to each result page:

• results

  This indicates that it is a result page.

• A tag that matches the last part of the data-score-boundary- value in the Custom HTML referenced in Step 1.

  For result page “1,” use result1 as the tag.

If a user has a total of 2 points at the at the end of the quiz, you would want to send them to result page 1, because the data score boundary for result 1 is set to 3.

Pro Tip: Each result page must have the “results” tag, so you can select all of them and add the tag to all at the same time.

5. Option to Reset the Quiz and Start Over

To reset the quiz, add a hotspot with the tags answer and quiz-reset to a button (i.e., a square shape and a hotspot), along with an “On Click” interaction on each result page go back to the start page.

The quiz-reset tag resets/clears the score, and the click interaction takes the user back to the start page.