Skip to main content
All CollectionsDeveloper DocsEvent reference
Using the octane.quiz.completed Event to Run Code on Quiz Completion
Using the octane.quiz.completed Event to Run Code on Quiz Completion

#customize #developer #event #javascript #quiz

Mark Baek avatar
Written by Mark Baek
Updated over a week ago

This overview will explain how to get data on a quiz session and run code on quiz completion using the octane.quiz.completed custom event.

πŸ’‘ What you'll learn


πŸ’‘ Prerequisites

Custom events are available on Octane Plus or higher plans.


How the event works

When someone reaches the end of a published quiz, the octane.quiz.completed custom event is fired by Octane AI.

This Javascript event contains extensive data about the quiz session as well as results page content.


document.addEventListener("octane.quiz.completed", function (event) {
console.log("Quiz completion event", event.detail);
}, false);

The addEventListener() method will allow you to execute code on quiz completion, i.e. reaching the results page inside of the event listener's callback function.

The event object's detail property will include the following data about the current quiz session:

  • Quiz answers

  • Email / phone number

  • Recommended products

  • Content blocks on current results page

  • Current quiz taker ID

This provides a method of building code that runs at the end of a quiz personalized to each quiz session.

octane.quiz.completed data structure

The detail property of the event object returned by octane.quiz.completed will always follow the same data structure. Below are explanations of what each part of the event represents.

πŸ“• octane.quiz.completed example output


{
"answers": {
"Octane: Question 1": "Answer 2",
"Octane: Question 2": "Answer 1",
"quiz results URL": "https://mystore.myshopify.com/pages/quiz#r=..."
},
"email": "[email protected]",
"email_consent": "null",
"phone": "555-123-4567",
"phone_consent": true,
"product_blocks": [
[
{
"description": "product description",
"id": "product id",
"image": "https://cdn.shopify.com/s/files/...",
"link": "https://mystore.myshopify.com/products/...",
"price_formatted": "$20",
"product_block_id": "dynamic",
"tags": [
"tag 1",
"tag 2"
],
"title": "product title",
"type": "product type",
"variants": [
{
"id": "variant1 id"
},
{
"id": "variant2 id"
}
]
}
],
[
{
"description": "product description",
"id": "product id",
"image": "https://cdn.shopify.com/s/files/...",
"link": "https://mystore.myshopify.com/products/...",
"price_formatted": "$10",
"product_block_id": "dynamic",
"tags": [
"tag 1",
"tag 2"
],
"title": "product title",
"type": "product type",
"variants": [
{
"id": "variant1 id"
}
]
}
]
],
"quiz_results_url": "https://mystore.myshopify.com/pages/quiz#r=...",
"sections": [
{
"id": "content block id",
"name": "content block name",
"products": [
{
"description": "product description",
"id": "product id",
"image": "https://cdn.shopify.com/s/files/...",
"link": "https://mystore.myshopify.com/products/...",
"price_formatted": "$20",
"product_block_id": "dynamic",
"tags": [
"tag 1",
"tag 2"
],
"title": "product title",
"type": "product type",
"variants": [
{
"id": "variant1 id"
},
{
"id": "variant2 id"
}
]
}
]
},
{
"id": "content block id",
"name": "content block name",
"products": [
{
"description": "product description",
"id": "product id",
"image": "https://cdn.shopify.com/s/files/...",
"link": "https://mystore.myshopify.com/products/...",
"price_formatted": "$10",
"product_block_id": "dynamic",
"tags": [
"tag 1",
"tag 2"
],
"title": "product title",
"type": "product type",
"variants": [
{
"id": "variant1 id"
}
]
}
]
}
],
"user": "user id",
"quiz_wrapper_element": {}
}

1. detail.answers

πŸ’‘ How it works

  • answers: an object of key / value pairs representing answers selected during the current quiz session.

Each key / value pair in the answers object represents the custom properties[?] of the questions & answers in a quiz.

To view or edit custom properties, follow these steps:

  1. In Octane AI's dashboard, go to Quizzes.

  2. Next to the quiz you're targeting, click on the Edit button.

  3. In the quiz editor, click on Connect in the top bar.

2. detail.email_consent / details.sms_consent

πŸ’‘ How it works

  • email_consent / sms_consent: the value of the marketing checkbox[?].

email_consent and sms_consent can have one of 3 values:

  • true: boolean that indicates the checkbox was selected.

  • false: boolean that indicates the opt-in was skipped, or an opt-in was submitted without selecting the checkbox.

  • null: null value that indicates the checkbox has not been enabled.

3. detail.product_blocks

πŸ’‘ How it works

  • product_blocks: An array of all visible product blocks in the current results page.

Each index in the product_blocks array is also an array that contains objects representing individual products.

Empty arrays are content blocks that are visible but contain no products, such as content blocks being used only for text / image content.

product_blocks is ideal for iterating through recommended products, especially if your results page uses advanced logic[?] to dynamically display different blocks.

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 results page.

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.

5. detail.sections

πŸ’‘ How it works

  • sections: an array of all possible content blocks in the current results page.

Each index in the sections array is an object representing content blocks in the current results page - including content blocks that are hidden through advanced logic[?].

Each content block object includes:

  • id: a unique ID for the content block.

  • name: the internal name value for the content block.

  • products: an array of objects, where each object is an individual product.

6. detail.user

πŸ’‘ How it works

  • user: a string identifying the current quiz taker by cookie.

This value will stay the same as long as the quiz taker's Octane AI cookie is not refreshed or deleted, including across different quizzes.

Code examples

Here are some examples of ways that the octane.quiz.completed event can be used to create dynamic, personalized code.

Displaying quiz session data in the console

Console logging the detail property of the event object will display each quiz session's data in your browser console.

Inserting a quiz answer dynamically into the results page

Any answer value can be grabbed through the detail.answers object and inserted into a results page.

This code example replaces the results page title with dynamic text but only if an answer is present for the question "What's your name?"

Redirecting to another webpage based on recommended hero product

This code block assumes that the quiz recommends one hero product in the 1st content block. After assigning the title of the product to a variable, an if...else if statement is used to automatically redirect customers to a custom landing page based on the product.

This method can use any data in the event object to create custom redirect logic.

Did this answer your question?