Skip to main content
All CollectionsDeveloper DocsEvent reference
Using the octane.quiz.questionAnswered Event to Run Code When Moving on From a Page
Using the octane.quiz.questionAnswered Event to Run Code When Moving on From a Page

#customize #developer #event #javascript #quiz

Mark Baek avatar
Written by Mark Baek
Updated over a week ago

This overview will explain how to use the octane.quiz.questionAnswered event to run code when a particular question is loaded in a quiz.

πŸ’‘ What you'll learn


πŸ’‘ Prerequisites

Custom events are available on Octane Plus or higher plans.


How the event works

When moving past a page, the octane.quiz.questionAnswered custom event is fired by Octane AI.

This Javascript event contains data about the previous page, as well as the upcoming page in the current quiz session.


document.addEventListener("octane.quiz.questionAnswered", function (event) {
console.log("Question answered event", event.detail);
}, false);

The addEventListener() method will allow you to execute code when a question is answered, skipped or proceeds through any other means (like an explainer screen timer).

The event object's detail property will include the following data:

  • Next question ID, title & type

  • Previous question ID, title & type

  • Answer value

  • Quiz wrapper HTML DOM element (.oct-quiz-content)

This provides a method of building code that runs when moving on from a page, like removing page-specific CSS or extracting an answer value.

The octane.quiz.questionAnswered event fires for any page in the quiz before the results, including different question types, opt-in pages and explainer screens.

octane.quiz.questionAnswered data structure

The detail property of the event object returned by octane.quiz.questionAnswered will always follow the same data structure. Below are explanations of what each part of the event represents.

πŸ“• octane.quiz.questionLoaded example output


{
"question_id": "a1b8b1948d4cba8f93ae9140fb51509bba3661da",
"question_value": [
"Acne"
],
"question_title": "What is your main skincare concern? ",
"question_type": "multiple_choice",
"new_question_id": "46f518128844f67ba6f05a72a4bd46b2ec38b0ba",
"new_question_type": "multiple_choice",
"new_question_title": "How long is your ideal skincare routine? ",
"quiz_wrapper_element": {}
}

1. detail.question_id

πŸ’‘ How it works

  • question_id: the previous page's unique ID.

  • new_question_id: the next page's unique ID.

question_id can also be viewed inside of the quiz editor.

2. detail.question_title

πŸ’‘ How it works

  • question_title: the previous page's title field text.

  • new_question_title: the next page's title field text.

3. detail.question_type

πŸ’‘ How it works

  • question_type: the previous page's type in the current quiz session.

  • new_question_type: the next page's type in the current quiz session.

Possible values:

  • multiple_choice

  • date_picker

  • free_form_text

  • email

  • phone

  • explainer

4. detail.question_value

πŸ’‘ How it works

  • question_value: the answer value of the previous page. Data type will depend on the question type.

multiple_choice answer values will be an array of strings that matches the number of answers selected (1 or more).

  • Ex. question_value: ['Dry skin', 'Fine lines and wrinkles']

All other types will have a string for the answer value.

5. detail.question_consent_value

πŸ’‘ How it works

  • question_consent_value: the value of the marketing checkbox[?].

question_consent_value can have one of 3 values:

  • true: boolean that indicates the checkbox was selected.

  • false: boolean that indicates the opt-in was skipped, or an opt-in was submitted without selecting the checkbox.

  • null: null value that indicates the checkbox has not been enabled.

6. detail.quiz_wrapper_element

πŸ’‘ How it works

quiz_wrapper_element is an HTML DOM element object for the top level div of the current quiz content.

This object will be mostly empty for the octane.quiz.questionAnswered event.

Reference this document for a list of properties & methods that can be used with an HTML DOM element object.

Did this answer your question?