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
📕 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_choicedate_pickerfree_form_textemailphoneexplainer
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.
Ex.
question_value: "[email protected]"
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.