Customize quiz design, tap into quiz session data or even create custom functionality in quizzes using code with Octane AI developer tools.
💡 What you'll learn
💡 Prerequisites
Developer tools are available on Octane Plus & higher plans.
How Octane AI developer tools work
Octane AI enables developer customization through a collection of custom Javascript events. Each event fires at a certain point during a user's quiz session with contextual data that can be used with 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, 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.
Listening to your first event
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 [?].
Copy the following code snippet.
In the same area 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).
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.
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.
📕 octane.quiz.accessed: when someone accesses a quiz results page URL.
📕 octane.quiz.questionLoaded: when a question is loaded in a quiz session.
📕 octane.quiz.questionAnswered: when a question is answered in a quiz session.
📕 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.
Developer options in 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
This option can be found by going to Design → Custom CSS in the quiz editor.
Enable custom class names: quizzes normally use dynamic class names which makes targeting quiz elements with CSS difficult.
This option enables static class names for quiz elements, which can then be targeted with CSS code on your website to customize quiz design.
Toggling certain quiz behaviors
The following options can be found by going to 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: enables or disables the quiz's built-in add to cart functionality. This should only be disabled if you're building your own custom add to cart functionality to replace the quiz's.
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.
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.