In this guide:
About This Plugin
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. This article will cover a single-page setup.
Click here to import Demo Experience
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 result that corresponds to the number of points the user got (which can be a range of point values) based on their answers.
How To Implement
Step 1: Add the Custom HTML Script and Set Score Boundaries
• Copy the SDK Script below and paste it into the Custom HTML field within the Settings panel in the Ceros Studio. Press OK to finish and close the 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="4"
data-score-boundary-result2="8"
data-score-boundary-result3="12"
data-score-boundary-result4="16"
></script>
The numbers in quotes (see below) are the lower bounds of each range of scores.
In our demo experience, the score values are set up so that a cumulative value of 4-7 (minimum right) points would show Result 1, Result 2 would be 8-11 points, Result 3 would be 12-15 points, and the total point value would need to be 16 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 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 result1, result2, result3, and result4. Keep these in mind as these are the tags that will be added to the results hotspots which we’ll review in Step 4.
Step 2: Create Quiz Assets - Questions, Answers, and Results
• First, create the assets for the quiz.
For example, you could have 4 questions with 4 possible answers, with the last question directing you to one of 4 possible results 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.
Step 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 necessary click interaction to show the next question.
• With the SDK Panel open, select the hotspot you want to work with and add the following tags within the second Enter Tag field beneath the SDK ID (press Enter/Return to submit a tag):
question:x - This tag defines the question the answer belongs to. In this case, x identifies the layer/folder that the question is on. If this is question 1, the tag is question:1.
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 On Click interactions 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:results to each hotspot.
The final question does not need an On Click > Show interaction as the SDK takes care of this with the goto:results tag.
Analytics Note: Since the hotspots created for the quiz plugin may only trigger SDK commands, in those situations, 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 if there is 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 the visibility of a shape that exists off the canvas.
Step 4: Create, Tag, and Add Click Interactions to Results Hotspots
• After all of the answer hotspots are created and tagged, create a hotspot for each result you would like displayed.
These hotspots will reveal each result layer/folder through an On Click interaction.
• Add the On Click interaction to each of these result hotspots where the interaction will display the result. Typically this will be done by “showing” a hidden layer/folder.
• In addition to the On Click > Show interactions, add the two following tags to the results hotspots:
results - 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 - Example: for result 1, use result1 as the tag.
If a user has a total of 4 points at the end of the quiz, you would want to send them to result 1, because the data score boundary for result 1 is set to 7 (based on our demo setup).
These hotspots can also exist off the canvas to prevent users from clicking them, but must not be hidden in the Layers panel.
Step 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) within each result folder.
This hotspot will also need two On Click interactions, one to hide the current result folder and the other to show the quiz start folder.