Most Common Answer Quiz - Single Page

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.

We will go over the single page setup.

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

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:

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 single page quiz, you could have the questions visible on scroll, or you could have the hotspot interactions reveal and hide the layer folders rather than on individual pages.

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 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.

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, and add the following tags in the “Current Selection” section:

  • 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” you would use value:c as the 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 was question 1, the tag would be question:1.

• While the hotspot is selected, add the “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 of goto:results to each hotspot.

You only need to add an “On Click -> Hide” interaction to hide the final question – the goto:results tag takes care of showing the appropriate result layer folder, 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. 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:

• results

  This identifies the hotspot as a trigger to show a result layer/folder

• A tag to define the value the hotspot represents.

  For example, if the hotspot takes users to result “D,” add d as the tag.

These hotspots can exist off canvas to prevent users from clicking them, but must not be hidden in the Layers panel.

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 layer folder.

This hotspot will also need an “On Click” interaction to hide the current result layer and show the quiz start page.