Please be aware that Ceros SDK plugins are non-native tools and are provided "as is". As such, we cannot guarantee that plugin functionality will work as intended across all implementation instances.
About This Plugin
This type of quiz is used to give results based on how many similarities there are between the answers to the questions and the possible results. It will give the user the result that most closely matches the corresponding answers they gave. This article will cover the multi-page setup.
Click here to import demo experience
How We Did It
Using the SDK’s event listeners, we track which answers the user is clicking on. Then, once the user reaches the end of the quiz and clicks to view their results, we show the layer that is tagged with the name of the answer that they gave the most.
How To Implement
Step 1: Add the Custom HTML Script
• Copy the SDK Script below and paste it into the Custom HTML field within the Settings panel in the 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"
></script>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 (A, B, C, D or 1, 2, 3, 4), with the last question directing you to one of 4 possible results.
• For a multi-page quiz, create a page for each question, a page for each result, and a start page if you would like.
Based on the tagging you set up, four clicks on answer “A” would return result “A".
When there is an even number of questions, in the event of a tie (i.e., the user clicks “A” twice and “B” twice), the result will be based on the alphabetical sequence of the value tags, so value:a would win over value:b.
In other words, if 50% of the answer values were “A” and 50% were “B,” result “A” would be shown since “A” is first in the alphabet.
Keep this in mind if you want a certain result to display in the event of a tie.
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 tag within the first Enter Tag field beneath the Page ID (press Enter/Return to add a 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.)
For example, you could have 4 questions (one question per page) with 4 possible answers (A, B, C, D, or 1, 2, 3, 4), and the last question directs you to one of 4 possible results pages.
• Within the same hotspot that we added the question tag to, add the following tags in the second Enter Tag field beneath the SDK ID:
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 value assigned to the question, or in other words, which option was selected. For example, if this was answer “C", use value:c as the tag.
In our demo experience, we’re using A, B, C, D, as the values, but the values could also be something like the name of the question, or another word or phrase.
• While the answer hotspot is selected, add an On Click > Go to Page interaction to take users to the next page.
Each of your answer hotspots (on all question pages except for the final question page) should follow this format if set up correctly:
• 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 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.
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: Tag Results Pages
• Add the following tags to each result page:
results - This indicates that it is a result page.
The name of the value the page represents - For results page “A", use a as the tag.
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), along with an On Click > Go to Page interaction on each result page to go back to the start page.
