All Collections
Quizzes
Building Result Pages
Using Developer Tools to Customize Quiz Behavior
Using Developer Tools to Customize Quiz Behavior
Use the developer tools section of your quiz settings to access advanced ways to customize a quiz's functions.
Mark Baek avatar
Written by Mark Baek
Updated this week

Overview


Octane AI quizzes have several tools that allow extra design and functionality customization for brands with access to developers. These tools allow you to take your quiz customization beyond Octane AI's built-in editor and do things like:

  • Apply custom CSS to quizzes.

  • Redirect results pages to a custom landing page.

  • Create a custom integration for 3rd party shopping carts.

And more!

What you'll learn

How to access developer tools.

Prerequisites

Developer tools are available on the Octane Plus plan.

Using these features will require you to create custom code on your website that targets with your desired developer tool. Our support team will be unable to provide instructions on creating that code beyond the content in this document.


How developer tools work


Quizzes in Octane Plus accounts can fire custom javascript events when certain actions are triggered that contain data from the quiz. This data can be combined with custom code to add functionality to quizzes that isn't available in Octane AI's default editor.

These events can be viewed under the developer tools section in the Settings tab of the quiz editor.

The events that can be fired are:

  • octane.quiz.addToCart

  • octane.quiz.completed

  • octane.quiz.accessed

The completed and accessed events are for custom results pages, while the addToCart event is used for the setting described in the next section.

Listening to events

These events can be listened to with the following code:

document.addEventListener('octane.quiz.completed', function (e) {console.log('completed'); console.log(e.detail);}, false);

To listen to an event other than completed, replace "completed" in the code with the event of your choice.


Add to cart behavior & JavaScript event


Under add to cart behavior settings, two options can be chosen:

  1. Octane AI will add products to the cart.

  2. Octane AI will not add products to the cart. (Advanced)

If you select the advanced option, adding items to the cart in the quiz will no longer work without code tied to the custom event.

Octane AI Will Not Add Products to the Cart

When advanced behavior is enabled, a custom event is fired to signal either success or failure every time a user adds an item to the cart on a results page,

You can listen to those events easily by adding the following JavaScript code.

document.addEventListener('octane.quiz.addToCart', function (e) { 
// your code for successfully added items
console.log(e.detail); // example: {items: [{id: '12345', quantity: 1}]}
}, false);

document.addEventListener('octane.quiz.addToCartError', function (e) {
// your code for the error case
}, false);

The event is configured for bubbling up and the items information is available in the detail event's object property.

Success or failure will be indicated by one of the following events:

  • octane.quiz.addToCart

  • octane.quiz.addToCartError


Custom Results Behavior & JavaScript Event


Under results page behavior, settings two options can be chosen:

  1. Octane AI will create your results pages

  2. Octane AI will not create your results pages

Choosing "Octane AI will not create your results pages" will stop any of the editor-created results pages from showing up.

Instead, custom CSS/HTML code can use the event to build results pages.

Octane AI Will Not Create Your Results Page

When someone finishes a quiz with a custom result page enabled, the event will include the following information about the customer:

  • Quiz answers

  • Marketing opt-ins (contact info)

  • Product recommendations

  • Quiz result URL

A quiz result page URL shared through the event will be a snapshot of the result page that the customer received, so any changes made to the quiz afterwards won't be reflected in the link.

Below is the data inside of the event.

document.addEventListener('octane.quiz.completed', function (e) { 
// your code for building and handling the results page
console.log(e.detail);
/* output example
{
"quiz_wrapper_element": element, "answers": { "Question 1": "Answer 1", "Question 2": "Answer 2",
"quiz_wrapper_element": element,
"product_blocks": [
[
{
"description": "The candy bar of your dreams",
"id": "40597157904591",
"image": "https://cdn.shopify.com/s/files/...2048x2048.jpg?v=1639095",
"link": "https://store.myshopify.com/products/chocolate?variant=904591",
"price_formatted": "$5",
"tags": [
"brand new"
],
"title": "Crispy chocolate bar",
"type": ""
},
{
"description": "The everlasting taste you were looking for",
"id": "40597156823247",
"image": "https://cdn.shopify.com/s/files/...2048x2048.jpg?v=163968",
"link": "https://store.myshopify.com/products/lollipop?variant=459715",
"price_formatted": "3",
"tags": ["brand new", "birthday"],
"title": "Lollipop",
"type": ""
}
]
]
"quiz_results_url": "", "email": "", "phone": "", "user": ""
}
*/
}, false);

It will include a reference to the HTML element where if the Octane AI will not create your results pages option is selected, you would add your own designs.

This is done by replacing // your code for building and handling the results page with your own design code.

The event is configured for bubbling up and the items’ information is available in the detail event’s object property.

octane.quiz.accessed

When using a custom results page template, an event called octane.quiz.accessed will appear when accessing the results page URL.

Listening to this event will allow custom results pages to repopulate a results page access link. Click here for reference on how to listen to Octane AI's custom events.

Did this answer your question?