This guide will explain how to generate content in a results page based on quiz answers using custom Javascript code.

This includes dynamically inserting a customer's answers in a results page, which currently requires developer methods.

💡 What you'll learn about

Before getting started (jump to section)
Sample code (jump to section)
Modifying the code (jump to section)
- Changing the text that the question is targeting (jump to section)
- Changing the question that the code is targeting (jump to section)
- Changing the text that gets generated (jump to section)
Frequently asked questions (jump to section)

💡 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. This document serves as a starting point for those with the technical proficiency to build the next steps.

Before getting started

The code sample in this guide will make use of the following features:

The octane.quiz.completed custom event.
Custom properties for targeting answers to a quiz question.
Custom CSS to target specific text types in a results page.
Javascript code, which can be added in Shopify.

The specific code you'll need to add will depend on your custom property content, as well as the text type that you would like to target.

Octane AI will only be able to provide support on the content within this guide. A certain level of technical proficiency is recommended in order to make changes beyond the examples shown in this article.

For further reading on the methods used in this guide, check out the following documentation:

Sample code

The code below is an example of how you can replace the results page title with dynamically generated text. In this example, the results page title will be replaced with text mentioning the customer's name as long as the "What is your name?" question has been answered.

If the question was skipped, the default text will display instead.

📕 Replacing title text in a results page with dynamic text

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

This code can be copy/pasted into your website without any changes as long as your quiz meets the following requirements:

The custom property name for your question is Octane: What is your name?
There is title text present in your results page

This code will replace the 1st instance of title text in your results page, defined by elements that have the CSS class .oct-quiz-title.

Here's a breakdown of the different parts of this code.

Code	Explanation
document.addEventListener('octane.quiz.completed', function (e) { // The event listener runs the code here }, false);	This event listener allows you to tap into the `octane.quiz.completed` custom event. When this code detects the event `octane.quiz.completed`, it will automatically run the code enclosed inside. Without the event listener, there won't be a way to trigger code specifically on quiz completion.
if (e.detail.answers['Octane: What is your name?']) { // The if statement runs the code here };	This is an `if` conditional statement, while the code `e.detail.answers['Octane: What is your name?']` is the condition. `e.detail.answers` references an object nested inside of the `octane.quiz.completed` event, which contains all of the quiz questions & answers that a customer has answered. By using bracket notation, we're able to target a specific question inside of the `answers` object which in this case is `'Octane: What is your name?'`. In non-code terms, this if statement will only run the code enclosed inside if an answer value exists for `'Octane: What is your name?'` This lets the text created in the quiz editor display if a customer chooses to skip this question. Without the `if` statement, our code would always run on quiz completion even if the question had been skipped, which would result in the title being replaced by blank text.
document.querySelector('.oct-quiz-title').textContent = `Hi, ${e.detail.answers['Octane: What is your name?']} here are your results`;	`document.querySelector()` is a method that lets the code search and reference the page for the first CSS class that matches our input. In this case, we're targeting the class `.oct-quiz-title` which must be enclosed in quotation marks `''`. `.textContent` lets us replace the text inside of the element that `.oct-quiz-title` is attached to. This is done by using `=` to set the `textContent` to `Hi, ${e.detail.answers['Octane: What is your name?']} here are your results`. For this text, backticks `` must specifically be used. This lets Javascript recognize when we're inserting a variable instead of plain text, which is indicated by enclosing the variable inside of `${}`. `${e.detail.answers['Octane: What is your name?']}` will be replaced by the answer value to `'Octane: What is your name?'`

Modifying the code

The examples and explanations in this section can be used as a starting point to customize the code sample provided in the previous section.

Octane AI will only be able to provide support on the specific content provided in this guide - Javascript proficiency is recommended for making any changes beyond the examples provided below.

Changing the text that the question is targeting

The code added inside of the event listener below targets the text that will be replaced by the generated code by targeting CSS classes.

document.addEventListener('octane.quiz.completed', function (e) {
     if (e.detail.answers['Octane: What is your name?']) {
          document.querySelector('.oct-quiz-title').textContent = `Hi, ${e.detail.answers['Octane: What is your name?']} here are your results`;
     };
}, false);

The specific part of the code that does this is document.queryselector('.oct-quiz-title').

oct-quiz-title is the name of the class, and we add a . in front of the class name so that the code will know that it's looking for a CSS class. Finally, the class must be surrounded in quotation marks (it can be single quotes '' or double quotes "") so that the code is read correctly.

You can replace .oct-quiz-title with any of the following classes to change which text in your results page it will replace (only the 1st instance of that text will be replaced).

For example, to replace subheading text the code inside of the querySelector() would be changed to document.queryselector('.oct-quiz-subheading')

CSS class name	Text type
`oct-quiz-title`	Title text
`oct-quiz-heading`	Heading text
`oct-quiz-subheading`	Subheading text
`oct-quiz-body-text`	Body text
`oct-quiz-caption-text`	Caption text

Changing the question that the code is targeting

Specific questions can be targeted by their custom property. In the code below, the question "What is your name?" is being targeted twice.

if (e.detail.answers['Octane: What is your name?']) {document.querySelector('.oct-quiz-title').textContent = `Hi, ${e.detail.answers['Octane: What is your name?']} here are your results`;};

First, the code checks to see if an answer exists to the question in if (e.detail.answers['Octane: What is your name?']).

If the code passes that check, it targets the question again when generating dynamic text by inserting the answer to our "What is your name?" question inside of ${e.detail.answers['Octane: What is your name?']}.

A different question can be targeted by replacing Octane: What is your name? with the custom property name of the question you'd like to target.

In the example below, we have a custom property for the question "What is your dog's name?" in a pet food quiz.

To target this question with our code, we would replace every instance of Octane: What is your name? with Octane: What's your dog's name?

In addition, the enclosing single quotation marks '' will need to be replaced with double quotation marks instead "".

This is because Octane: What's your dog's name? includes single quotation marks, which will confuse the Javascript code if we enclose this text with single quotation marks as well.

Here's what the code snippet would look like after these changes:

document.addEventListener("octane.quiz.completed", function (e) {
     if (e.detail.answers["Octane: What's your dog's name?"]) {
          document.querySelector('.oct-quiz-title').textContent = `Hi, ${e.detail.answers["Octane: What's your dog's name?"]} here are your results`;
     };
}, false);

The text surrounding ${e.detail.answers["Octane: What's your dog's name?"]} could then be changed to fit the quiz's content, for example:

document.querySelector(".oct-quiz-title").textContent = `Hi, here's the best pet food for ${e.detail.answers["Octane: What's your dog's name?"]}`

Changing the text that gets generated

In the code below, the textContent property is being adjusted with the = operator - in order words, code is being instructed to set the text of .oct-quiz-title to the custom text inside of the code.

document.querySelector('.oct-quiz-title').textContent = `Hi, ${e.detail.answers['Octane: What is your name?']} here are your results`;

To change the text being generated, the text inside of the `` will need to be changed.

For example, to change the generated text from "Hi, <name> here are your results" to "These recommendations have been generated just for you, <name>", the code snippet above would be adjusted to:

document.querySelector('.oct-quiz-title').textContent = `These recommendations have been generated just for you, ${e.detail.answers['Octane: What is your name?']}`;

💡 Why is the code using `` instead of '' or ""?

The text being generated by the code inserts a variable that will dynamically turn into the answer provided by the customer.

`Hi, ${e.detail.answers['Octane: What is your name?']} here are your results`;

Javascript knows that e.detail.answers['Octane: What is your name?'] is a variable, rather than plain text, because it's enclosed inside of ${ }.

However, ${ } will only work inside of backticks ``. As an example, the following code would not work as intended:

"Hi, ${e.detail.answers['Octane: What is your name?']} here are your results"

Enclosing this text in regular quotation marks "" means Javascript won't recognize that a variable is being inserted, and instead will read ${e.detail.answers['Octane: What is your name?']} as regular text.

Frequently asked questions

Can I insert an answer into existing text instead of replacing all of the text using code?

Using Javascript to insert quiz answers into content will require replacing all of the text content that you're targeting with the text generated by the code.

How do I insert multiple answers into the text I'm generating?

This can be done by inserting multiple variables into your generated text.

Here's an example that inserts the answers to skin type and skincare concern questions in a skincare quiz into code-generated text.

document.querySelector('.oct-quiz-title').textContent = `This routine is perfect for your skin type, ${"Octane: What's your skin type?"} and your skincare concern, ${"Octane: What skincare concern is most important to you?"}.`;

How do I insert other content types like images using code?

Dynamically generating content types besides text using code will require different Javascript methods and is beyond the scope of this guide.

While Octane AI will be unable to provide support on these methods, further reading can be done on different methods you can use below. Javascript proficiency is recommended for these methods.

Using Quiz Design Settings

Creating Custom Quiz Behaviors through Custom Events

Custom CSS Explanation & Class Names

Redirecting to a Custom URL on Quiz Completion with Javascript

Arranging Content in a Single Row Using CSS