Disclaimers

Developer tools features are only available on the Octane Plus and Enterprise plans.
Our support team cannot assist with custom code. If you need help with implementing custom code on your quiz, please procure the help of a developer.

How to access the Developer Tools in your quiz

Inside the quiz editor, go to the Settings tab, and you will find the Developer Tools section at the bottom:

You can check the Results page settings to change your Results Page Behavior and Add to Cart Button Behavior:

And you can check the Question lifecycle events for a full reference of all the quiz's JavaScript events:

The JavaScript events are fired automatically, so you do not need to enable any settings for them to fire. You just need your code to listen to them.

How to add custom JavaScript code to target your quiz

The custom JavaScript code that you want to use to target your quiz will need to be applied to your live quiz page. You will see one example of how to do so below. You can add this code to a custom liquid block on your theme's editor, or to your page's HTML.

Here is an in-depth guide on how to do this without changing your theme's code.

How Octane AI developer tools work

Octane AI enables developer customization through a collection of custom JavaScript events. Each event fires at a specific point during a user's quiz session, with contextual data that can be used in JavaScript to execute code.

For example, every time someone completes a quiz (i.e., makes it to a results page), the custom event octane.quiz.completed will trigger.

octane.quiz.completed includes extensive data about a user's quiz session, such as selected answers, opt-in information, and recommended products.

JavaScript code can then be used to hook into this data and execute code based on a user's quiz session, such as displaying content dynamically based on answers, redirecting customers to another page & more.

Listen to your first event and run your first script

Before following the steps below, make sure you have a quiz created in Octane AI. A simple template quiz will work.

Publish your quiz to a Shopify page (check our guide for this here).

Copy the following code snippet.

<script>
document.addEventListener("octane.quiz.completed", function(event) {
  console.log("octane.quiz.completed event", event.detail);
}, false);
</script>

In the same area where your quiz embed code was added, add the code snippet you copied after the quiz embed code.
Open the page on your website that your quiz is on.
Open your browser console with Cmd + Opt + J (Mac) or Ctrl + Shift + J (Windows and Linux).
Reach the end of the quiz to see quiz session data appear in the browser console.

You can find examples of ways you can use this data through code here. Here's a quick example:

In the example below, we:

Grab the answer to the quiz question "What is your name?" and store it in the variable whatIsYourNameAnswer.
Target the results page title with document.querySelector(".oct-quiz-title").
Use the textContent property to replace the page's title with one that dynamically inserts the customer's name.

<script>
document.addEventListener("octane.quiz.completed", function(event) {
  const whatIsYourNameAnswer = event.detail.answers["Octane: What is your name?"];
  
  document.querySelector(".oct-quiz-title").textContent = `Hi ${whatIsYourNameAnswer}, here are your recommendations`;
}, false);
</script>

Event reference

Events will automatically fire for Octane Plus quizzes. Here's a full list of events and when they appear during a quiz session.

octane.quiz.completed

When someone reaches the end of a quiz. Check our dedicated guide here for more information.

octane.quiz.accessed

When someone accesses a quiz results page URL.

octane.quiz.questionLoaded

When a question is loaded in a quiz session. Check our dedicated guide here for more information.

octane.quiz.questionAnswered

When a question is answered in a quiz session. Check our dedicated guide here for more information.

octane.quiz.addToCart

When an add to cart button is pressed.

octane.quiz.addToCartError

When an add to cart action fails. This will mostly appear if Octane AI's default add to cart function has been disabled, and a custom one is being built instead (for example, to connect a quiz with a slide-out cart).

octane.quiz.viewCart

When the view cart button is pressed, this event will only fire if you have checked Octane AI will not add products to the cart. (Advanced) in Add to cart behavior in the Developer Tools settings.

octane.quiz.viewCheckout (deprecated - use goToCheckout instead)

Fired when the button to go to checkout is clicked.

octane.quiz.goToCheckout

Fired when a user clicks a button with 'Go to checkout' behavior.

octane.quiz.goToProductPage

Fired when a user clicks a button with 'Go to product page' behavior.

Developer options in the editor

Several developer options are available in the quiz editor. Here's a full list of options and what each option is for.

Custom CSS

By going to the Design tab, then Custom CSS, you can enable custom CSS class names for the quiz elements:

Please check our full article on Custom CSS here.

Toggling certain quiz behaviors

The following options can be found by going to the Settings tab -> Results page settings in the quiz editor.

These options do not toggle custom events on or off. The quiz's custom JavaScript events will always fire on Octane Plus quizzes.

Instead, they should be used contextually when required by your code customizations.

Add to cart behavior

Selecting the option Octane AI will not add products to the cart disables the built-in add to cart behavior. If this is enabled, the add to cart button will no longer add products to the shopping cart without additional custom code.

This setting can be used in conjunction with the octane.quiz.addToCart event to create custom behavior when the add to cart button is pressed.

If you are using a custom cart app, such as a slide-out or tray cart, you might need to use this feature. While some custom cart apps work out of the box with Octane AI, some will require additional developer work to function properly inside the quiz. Here is a dedicated article on this for more information.

Results page behavior

Enables or disables native quiz HTML for the results page. If Octane AI will not create your results pages is chosen, the results page created in the editor will no longer display. If you want to redirect quiz takers to a URL when they finish the quiz and populate it with the quiz data, you can use this feature.

This option can be useful when code customizations deviate from Octane AI's built-in HTML structure enough that creating custom HTML instead becomes simpler, or when replacing quiz results with a URL redirect and displaying the built-in quiz results is unnecessary.

This setting is useful for enabling complete developer freedom over results page design, while still using the editor-built quiz to handle the backend logic for product recommendations.