This overview will explain how to use the octane.quiz.questionLoaded 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 a question is loaded, the octane.quiz.questionLoaded custom event is fired by Octane AI.
This Javascript event contains data about the currently viewed page in the quiz.
document.addEventListener("octane.quiz.questionLoaded", function (event) {
console.log("Question loaded event", event.detail);
}, false);
The addEventListener() method will allow you to execute code when a question is loaded - either in general, or specific pages in a quiz.
The event object's detail property will include the following data about the current quiz question:
Question ID
Question title
Question type
Quiz wrapper HTML DOM element (
.oct-quiz-content)
This provides a method of building code to customize & personalize specific pages in quizzes.
The octane.quiz.questionLoaded event fires for any page in the quiz before the results, including different question types, opt-in pages and explainer screens.
octane.quiz.questionLoaded data structure
The detail property of the event object returned by octane.quiz.questionLoaded 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": "9529d705c13086f206adda97454842831658d15a",
"question_type": "multiple_choice",
"question_title": "What are your health concerns?",
"quiz_wrapper_element": {}
}
1. detail.question_id
💡 How it works
question_id: the current 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 current page's title field text.
3. detail.question_type
💡 How it works
question_type: the current page's type.
Possible values:
multiple_choicedate_pickerfree_form_textemailphoneexplainer
4. 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 - in this case, the current question that has been loaded.
This can be used to manipulate HTML inside of, or around the top level containing div of the quiz.
Reference this document for a list of properties & methods that can be used with an HTML DOM element object.