Tally Score Quiz - Single 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 single 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.
What you need
- Custom HTML script
- Answers with numeric values assigned to each one
- Ranges of cumulative point values that will correspond to a result
How to implement
Add Quiz Plugin Code to Ceros Experience and Set Score Boundaries
Create a new Ceros Experience in the Ceros Admin and Paste the following code in the Custom HTML section of the settings panel:
<script async id="ceros-quiz-plugin" src="//creative-services.ceros.com/ceros/quiz-plugin/v1-1/main.min.js?r=1" data-quiz-type="score-boundaries" data-score-boundary-result1="0" data-score-boundary-result2="6" data-score-boundary-result3="9" data-score-boundary-result4="12" ></script>
The numbers in quotes above are the lower bounds of each range of scores.
In the 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 an example, 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 folder or object that is set as the corresponding result.
In this case it’s
result4. Keep this in mind because these are the tags that would need to be added to the results hotspots which we’ll get into in Step 4.
Create Quiz Assets - Questions, Answers and Results
Now you can create the assets for the quiz.
For example, you could have 4 questions with 4 possible answers (A, B, C, D or 1, 2, 3, 4), with the last question directing you to one of 4 possible results.
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.
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, and add the following tags in the “Current Selection” section:
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.)
In this tag,
xis 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 1 point, you would use
value:1as the tag.
This tag defines the question the answer belongs to. In this case,
xidentifies the layer/folder that the question is on. If this is question 1, the tag is
While the hotspot is selected, add an “On Click” interaction to hide the current question and show the next question.
The final question’s answer hotspots will have the same tags as listed above, but with the addition of the tag
goto:resultsto each hotspot.
The final question does not need a “Hide” click interaction as the SDK takes care of this with the
Create, Tag and Add Click Interactions to Results Hotspots
After all the answer hotspots are created and tagged, create a hotspot for each result you would like displayed.
These hotspots will reveal each result layer through an “On Click” interaction.
- Add the “On Click” interaction to each of these result hotspots where the “On Click” interaction will display the result. Typically this will be done by “showing” a hidden layer folder.
- In addition to the “On Click” interactions, add the two following tags to the results hotspots:
This identifies the hotspot as a trigger to show a result layer/folder
- 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
result1as 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.
These hotspots can also exist off canvas to prevent users from clicking them, but must not be hidden in the Layers panel.
Option to Reset the Quiz and Start Over
To reset the quiz, add a hotspot with the tags
quiz-resetto a button (i.e., a square shape and a hotspot) within each result layer/folder.
This hotspot will also need an “On Click” interaction to hide the current result layer/page and show the quiz start page.