Skip to main content
All CollectionsDeveloper DocsEvent reference
Using the octane.quiz.questionLoaded Event to Run Code When a Question is Loaded
Using the octane.quiz.questionLoaded Event to Run Code When a Question is Loaded

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


{
"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_choice

  • date_picker

  • free_form_text

  • email

  • phone

  • explainer

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.

Did this answer your question?