Extensions | Single Page Quiz Extension

Single Page Quiz Extension

Most common answer logic

What You Need

  • Custom HTML script
  • The number of answers per question must always equal the number of results. E.g. if question 1 has answer options A, B, C, and D then there must be 4 results.
  • All questions must have the same number of answer options
  • Each answer will correspond to the results later

Whether you’re trying find out which Hogwarts house you’d belong in or if you’re more of a Carrie or a Miranda, we all love a good quiz. With Ceros, you can create one of your own and have full control over the look and feel of it. This plugin allows you to apply the necessary logic for your experience to function like a quiz by scoring the most common answer and generating a result on a single page 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.

Import Demo Experience

How to implement

Add HTML


In the Settings panel, paste the below script in the Custom HTML field.

<script type="text/javascript" id="ceros-assessment-quiz" src="//creative-services.ceros.com/customer-success/most-common-single-page-quiz/assessment-quiz/main.js"> </script>

Set Up Your Interactions


Set up your interactions as you normally would to show the appropriate layers for the next question, and hide the layers for the current question, after the user answers. In our example, for each question we will apply the same interaction to every answer hotspot. On any of the Q-1 hotspots for example, we have an interaction of:

  • On Click - Show:
    • 2-Q
    • 2 - Answers
    • 2 SDK HS
  • On Click - Hide:
    • 1-Q
    • 1 - Answers
    • 1 SDK HS

    Follow these same steps for all of the Hotspots on your canvas, making sure to show and hide the appropriate layers for each question.


Tagging Question Answers


Before you start tagging your layers and layer groups, ensure you have set up your experience to contain all of the different questions, answers and results necessary. In the demo example above, we have grouped each question into a Q/A folder, with all of the hotspots and answers organized appropriately. If you’re unsure how to get started, simply use this demo as a template and adjust the questions and answers accordingly.

  • Each Answer Layer requires a Hotspot
  • Using the SDK tool , select the first answer Hotspot to be tagged and add the following tags in the SDK panel:
    • answer
    • "question-descriptive-name" e.g. question:artist


Answer Payloads


  • in the payload section of the answer, add in "result-descriptive-name" e.g. result-a to identify what result this answer coordinates with.
  • Repeat the above tagging and payload step for each answer hotspot in the question folder. Each hotspot for the first question should have the same coordinating question reference tag, e.g. question:artist, and the payload should be unique to the reference layer you want to show.




Tagging Results


Ensure you have the same amount of end results as you have answers for each question. E.g. if you have 4 different choices for your questions (must be same number throughout quiz) you should have 4 result layers for the end of your quiz. You can see these represented in the “A-E Result” layer groups in the demo experience above.

  • With your first result layer selected, open the SDK tool , and add the following tags:
    • results
    • "result-descriptive-name" - this should coordinate with your answer payload from the previous step. e.g. result-result-a


Result Payloads


  • In the payload section, add a descriptive reference to the result layer associated with this answer. In the first question example, all “A” answers yield an “A” result layer, so we will be using result-a as our payload.




Repeat Above Steps & Set Submit Tag


Repeat the above steps for each of the question groups in your experience. To let the SDK know when the answers should be submitted (once the last question has been answered) we will be adding an additional tag to the final question Hotspots.

  • On the final question Hotspots (e.g. question 5) add a tag of submit
  • Additionally, ensure your interactions on these final question hotspots only have an interaction to hide the current question layers. You do not need a show interaction.


Testing


  • Open up your preview link and test out your work.