All Collections
Quizzes
Developer Options
Custom CSS Explanation & Class Names
Custom CSS Explanation & Class Names

#custom-css #developer #quiz

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

This document includes explanations of Octane AI's quiz HTML structure, as well as the CSS class names that are assigned when the custom CSS option is enabled for a quiz.

This can be done with these quick steps:

  1. Open your quiz in the Octane AI quiz editor.

  2. In the quiz editor, navigate to Design and click on Custom CSS.

  3. Click on 'Enable custom class names'.

While CSS class names can be customized or even changed to match existing class names on your website, the ones below will be the default class names present in each Octane AI quiz when custom CSS is enabled.

πŸ’‘ What you'll learn


πŸ’‘ Prerequisites

Custom CSS can be enabled on Octane Plus plans.

We recommend this feature only if you're savvy with CSS & HTML development, or have access to a developer. While Octane AI does support custom CSS, our support team is unable to assist with issues applying code beyond the guidance provided in this document.


Global wrapper HTML structure

πŸ” This is the main structure of a quiz:

<div class="octane-ai-quiz-rendered">
<div class="oct-quiz-wrapper <question_type_class>">
<div class="oct-quiz-content">
// first element Close button (on fullscreen mode)
// quiz content will appear inside this element
</div>
</div>
</div>

Quizzes have a main wrapper in which Octane AI's script starts. It has a statistic class called "octane-ai-quiz-rendered" which cannot be changed.

<div class="octane-ai-quiz-rendered">
// Wrapper will be rendered inside
</div>

The "oct-quiz-wrapper" element represents a mask that hides quiz content. Inside the wrapper element, another element is rendered that represents the content holder. The whole quiz HTML is rendered inside of it.

<div class="oct-quiz-wrapper">
// Content holder will be rendered inside
</div>

The "oct-quiz-content" is the final main element, and its purpose is to hold quiz content.

<div class="oct-quiz-content">
// Quiz content will appear inside this element
</div>

The close button is always rendered as a first element inside content div.

<div class="oct-quiz-close">
<svg width="20" height="20" viewBox="0 0 20 20">
<g fill="currentColor" fill-rule="evenodd">
<mask id="oct-closeXb" fill="#fff">
<use xlinkhref="#oct-closeXa"></use>
</mask>
<path id="oct-closeXa" d="M11.414 10l4.293-4.293a.999.999 0 1 0-1.414-1.414L10 8.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L8.586 10l-4.293 4.293a.999.999 0 1 0 1.414 1.414L10 11.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z"></path>
<g fill="currentColor" mask="url(#oct-closeXb)">
<path d="M0 0h21v21H0z"></path>
</g>
</g>
</svg>
</div>

πŸ” Global wrapper classes

Wrapper class name:

oct-quiz-wrapper

Content class names:

oct-quiz-content

Close quiz popup (only for full screen):

oct-quiz-close

Text HTML structure

All text fields are generated inside the div element, except for the rich text editor content. The div element prevents other styles on your site from interfering with the quiz.

Below you can see how each element is rendered.

The AI personalized message can have a varying length, since it's AI-powered:

<div class="oct-quiz-ai-text">
// Text will be rendered inside
</div>

Title:

<div class="oct-quiz-title">
// Text will be rendered inside
</div>

Heading:

<div class="oct-quiz-heading">
// Text will be rendered inside
</div>

Subheading:

<div class="oct-quiz-subheading">
// Text will be rendered inside
</div>

Body text:

<div class="oct-quiz-body-text">
// Text will be rendered inside
</div>

Caption text:

<div class="oct-quiz-caption-text">
// Text will be rendered inside
</div>

The rich text editor is a little more complex. A class is available for its wrapper, but the content inside will be subject to rich text settings.

<div class="oct-quiz-rich-text">
// Text will be rendered inside
</div>

πŸ” Text classes

AI personalized message:

oct-quiz-ai-text

Title class names:

oct-quiz-title

Heading class names:

oct-quiz-heading

Subheading class names:

oct-quiz-subheading

Body text class names:

oct-quiz-body-text

Caption text class names:

oct-quiz-caption-text

Rich text editor class names:

oct-quiz-rich-text

Buttons HTML structure

Every button is wrapped inside the div element.

<div class="oct-quiz-btn-wrapper">
// Button will be generated inside
</div>

Every button has the same HTML structure. Below is an example of only one variant, but the rest are generated the same way.

<button class="oct-quiz-btn oct-quiz-btn--primary ">
// Some text
</button>

To control button sizes, we only add a size class modifier to the same HTML structure.

<button class="oct-quiz-btn oct-quiz-btn--primary oct-quiz-btn--small">
// Some text
</button>

πŸ” Button class names

Buttons wrapper

Buttons wrapper class name:

oct-quiz-btn-wrapper

Add all to cart button class name:

oct-quiz-btn-wrapper-buy-all

General / all buttons class name:

oct-quiz-btn

Buttons style

Primary button class name:

oct-quiz-btn--primary

Secondary button class name:

oct-quiz-btn--secondary

Primary text button class name:

oct-quiz-btn--primary-text

Secondary text button class name:

oct-quiz-btn--secondary-text

Buttons size

Small buttons class name:

oct-quiz-btn--small

Medium buttons class name:

oct-quiz-btn--medium

Large buttons class name:

oct-quiz-btn--large

Questions HTML structure

πŸ” Explainer screen

The explainer screen has a unique class name for the content holder and the main content wrapper. Explainer screens consist of top and bottom content while buttons to go to the next question.

<div class="oct-quiz-wrapper oct-quiz-wrapper--explainer">
<div class="oct-quiz-content">
// we render question content here
</div>
</div>

πŸ” Email, SMS and freeform text questions

Email, phone, and collect text share the same structure, so they have a wrapper class that is an addition to the main content wrapper. A div element is rendered inside of the main content that wraps around the input type text field.

<div class="oct-quiz-wrapper oct-quiz-wrapper--email">
<div class="oct-quiz-content">
// Top content
<div class="oct-quiz-email-wrapper">
<input type="text" />
</div>
// Bottom content
</div>
</div>

πŸ” Multiple choice

For multiple choice, a wrapper class is included as an addition to the main content wrapper class.

A div element that is a wrapper for all the answer options inside it is also included.

Inside the div wrapper, a UL > LI structure is rendered. UL has a general options class and LI's are items/answers.

Every LI has three divs. The first one represents visible text. The second and third LI's are only there to help create text choice buttons in the quiz that maintain a static width when font styling is changed.

<div class="oct-quiz-wrapper oct-quiz-wrapper--multiple-choice">
<div class="oct-quiz-content">
// Top content
<div class="oct-quiz-multiple-choice-wrapper">
<ul class="oct-quiz-multiple-choice-options oct-quiz-multiple-choice-options--stacked">
<li class="oct-quiz-multiple-choice-options__option">
<div>text holder</div> // main text you see
<div>text holder</div> // hidden text to take space if different style (hover)
<div>text holder</div> // hidden text to take space if different style (selected)
</li>
</ul>
</div>
// Bottom content
</div>
</div>

πŸ” Picture choice

Picture choice is very similar to multiple choice. A wrapper class is included that is an addition to the main content wrapper class.

Inside, there is a div wrapper for all the answer options.

Inside the div wrapper, a UL > LI structure is rendered in which UL has a general options class and LI's for items and answers.

Three divs are included inside of LI. The first one is an empty div that holds the image as a background. The second is the text holder and the third only holds border style. The number and order of divs can be different, which depends on options chosen when the picture choice question is created.

<div class="oct-quiz-wrapper oct-quiz-wrapper--picture-choice">
<div class="oct-quiz-content">
// Top content
<div class="oct-quiz-picture-choice-wrapper">
<ul class="oct-quiz-picture-choice-options oct-quiz-picture-choice-options--ratio-square oct-quiz-picture-choice-options--text-below">
<li class="oct-quiz-picture-choice-options__option">
<div>text holder</div> // Rendered if text position is top
<div>empty img div</div> // This div holds an image as background
<div>text holder</div> // Rendered if text position is bottom
<div>empty div</div> // This div shows an border style
</li>
</ul>
</div> // Bottom content
</div>
</div>

Questions classes

Explainer screen

Wrapper:

oct-quiz-wrapper--explainer

Email opt-in page

Wrapper:

oct-quiz-wrapper--email

Input wrapper:

oct-quiz-email-wrapper

SMS opt-in page

Wrapper:

oct-quiz-wrapper--phone

Input wrapper:

oct-quiz-phone-wrapper

Free form text question

Wrapper:

oct-quiz-wrapper--collect-text

Input wrapper:

oct-quiz-collect-text-wrapper

Multiple choice question

General wrapper:

oct-quiz-wrapper--multiple-choice

Options wrapper:

oct-quiz-multiple-choice-wrapper

Options:

oct-quiz-multiple-choice-options

Options - single item:

oct-quiz-multiple-choice-options__option

Options stacked:

oct-quiz-multiple-choice-options--stacked

Options horizontal:

oct-quiz-multiple-choice-options--horizontal

Options checkbox answers:

oct-quiz-multiple-choice-options--checkbox

Options radio answers:

oct-quiz-multiple-choice-options--radio

Picture choice question

General wrapper:

oct-quiz-wrapper--picture-choice

Options wrapper:

oct-quiz-picture-choice-wrapper

Options:

oct-quiz-picture-choice-options

Options - single item:

oct-quiz-picture-choice-options__option

Image:

oct-quiz-picture-choice-img

Image ratio option - square:

oct-quiz-picture-choice-options--ratio-square

Image ratio option - portrait:

oct-quiz-picture-choice-options--ratio-portrait

Image ratio option - landscape:

oct-quiz-picture-choice-options--ratio-landscape

Image ratio option - circle:

oct-quiz-picture-choice-options--ratio-circle

Image ratio option - custom:

oct-quiz-picture-choice-options--ratio-custom

Picture option text position - below:

oct-quiz-picture-choice-options--text-below

Picture option text position - above:

oct-quiz-picture-choice-options--text-above

Picture option no text:

oct-quiz-picture-choice-options--no-text

Results page HTML structure

πŸ” Layout section

The code below represents the layout of a results page. There is no limit to the number of content blocks that can be added to a results page.

Each content block can only have one of each:

  • Top content holder

  • Products wrapper

  • Bottom content holder

There is no limit to the number of products that can be added inside of a products wrapper.

<div class="oct-quiz-wrapper oct-quiz-wrapper--result-page">
<div class="oct-quiz-content">
<div>// result page Title</div>
<div>// result page subtitle</div>

<div class="oct-quiz-product-block oct-quiz-product-block--vertical oct-quiz-product-block--left">
<div>// Top content section</div>

<div class="oct-quiz-products">
// this div is a product holder
<div class="oct-quiz-products__item">
// this div represents an individual product
</div>
</div>

<div>// Bottom content section</div>
</div>
</div>
</div>

πŸ” Image section

The image HTML contains 2 elements. The first one is a div wrapper.

The second div is an anchor with an image as a background and a link to the product page.

Several image ratio options are available and can be selected under the DISPLAY SETTINGS section of a content block.

<div class="oct-quiz-result-item__img-wrapper">
// We will display only one image ratio class name,
// and it will be the one you selected in the content block settings section
<a class="oct-quiz-result-item__img quiz-result-item__img--ratio-square"
href="href_to_product_page"
style="background-image: url("img_url_generated")">
</a>
</div>

πŸ” Copy section

The copy section is an element that contains all of product's copy. This includes the product title, description and price.

Here's a breakdown of the HTML below:

  • The copy container is a div element that wraps title, description, and pricing elements.

  • The title is an anchor and contains a link to the product page.

  • The description is a div element that contains the HTML of the product description.

  • The pricing is a div element that contains pricing as text.

<div class="oct-quiz-result-item__copy-wrapper">
<a class="oct-quiz-result-item__title"
href="href_to_product_page">
// Product title
</a>
<div class="oct-quiz-result-item__description">
// Description
</div>
<div class="oct-quiz-result-item__pricing">
// Pricing
</div>
</div>

πŸ” Actions element section

This section contains all of the actions that items can have - buttons, quantity inputs and dropdowns.

The HTML's structure starts with the main div wrapper (actions wrapper). Inside, a div element that holds all the content (actions content) is included.

The action content div element is not rendered for horizontal views.

Octane AI's content holder will hold all of the elements that contain buttons, inputs, or dropdowns.

  • The first div element is a variant wrapper (if the product is recommended with variants).

  • The second div element is a Recharge holder (if the Recharge integration is enabled).

  • The third div element holds a quantity input field.

  • The rest of the div elements are action button holders (add to cart, checkout, or go to product page).

    • A maximum of 2 buttons can be included per product.

    • Button holders don't have classes.

<div class="oct-quiz-result-actions-wrapper">
<div class="oct-quiz-result-actions-content"> // This div is not rendered in horizontal view
<div class="oct-quiz-result-item__variant-wrapper">
<div class="oct-quiz-result-item__dropdown-mask">
<select>
<option value="0">Variant 1 copy</option>
<option value="1">Variant 2 copy</option>
</select>
</div>
</div>
<div class="oct-quiz-actions-recharge-wrapper">
// If you have recharge html it will be rendered here
// if you don't have recharge this html will not be rendered
</div>
<div class="oct-quiz-result-item__quantity">
<input type="number" min="1" value="1">
</div>
<div>
<button class="your_custom_button_classes">ADD TO CART</button>
</div>
<div>
<button class="your_custom_button_classes">Button 2</button>
</div>
</div>
</div>

πŸ” Recharge section

The Recharge section will be only be rendered if Octane AI's Recharge integration is enabled, and is present on the store.

<div class="oct-quiz-recharge">
<div class="oct-quiz-recharge__radio-wrapper">
<div>
<label class="oct-quiz-recharge__radio-label">
<input name="recharge_{generatedID}" type="radio" value="onetime">
<span></span>
// One-time purchase text
</label>
</div>
<div>
<label class="oct-quiz-recharge__radio-label">
<input name="recharge_{generatedID}" type="radio" value="subsave" checked="">
<span></span>
// Subscribe and save text
<div class="oct-quiz-recharge__help-wrapper">
<div class="oct-quiz-recharge__help-text">
// Your help text
</div>
<svgIcon/>
</div>
</label>
</div>
</div>
<div>
// There are multiple options how we render childrens of this div

// 1. Option, if there is multiple options
// This elements uses the same classes from item
<div class="oct-quiz-result-item__variant-wrapper">
// This elements uses the same classes from item
<div class="oct-quiz-result-item__dropdown-mask">
<select>
<option value="15">Deliver every 15 days</option>
<option value="30">Deliver every 30 days</option>
</select>
</div>
</div>

// 2. Option, if there is only 1 delivery option

<div>Deliver every 15 days</div> // we only render a div with the text
</div>
</div>

Results page classes

Layout section

Quiz wrapper result page:

oct-quiz-wrapper--result-page

Content block:

oct-quiz-product-block

Products wrapper:

oct-quiz-products

Product/item:

oct-quiz-products__item

Vertical layout option:

oct-quiz-product-block--vertical

Horiztonal layout option:

oct-quiz-product-block--horizontal

Left product alignment:

oct-quiz-product-block--left

Center product alignment:

oct-quiz-product-block--center

Right product alignment:

oct-quiz-product-block--right

Image section

Image wrapper:

oct-quiz-result-item__img-wrapper

Image:

oct-quiz-result-item__img

Image ratio option - square:

quiz-result-item__img--ratio-square

Image ratio option - portrait:

quiz-result-item__img--ratio-portrait

Image ratio option - landscape:

quiz-result-item__img--ratio-landscape

Image ratio option - custom:

quiz-result-item__img--ratio-custom

Copy section

Copy wrapper:

oct-quiz-result-item__copy-wrapper

Copy title:

oct-quiz-result-item__title

Copy description:

oct-quiz-result-item__description

Copy pricing:

oct-quiz-result-item__pricing

Actions element section

Actions wrapper:

oct-quiz-result-actions-wrapper

Actions content:

oct-quiz-result-actions-content

Variant wrapper:

oct-quiz-result-item__variant-wrapper

Dropdown mask:

oct-quiz-result-item__dropdown-mask

Actions wrapper for Recharge:

oct-quiz-actions-recharge-wrapper

Quantity wrapper:

oct-quiz-result-item__quantity

Recharge section (if enabled)

Recharge wrapper:

oct-quiz-recharge

Option/radio wrapper section:

oct-quiz-recharge__radio-wrapper

Radio options/label:

oct-quiz-recharge__radio-label

Help icon wrapper:

oct-quiz-recharge__help-wrapper

Help icon text:

oct-quiz-recharge__help-text

Did this answer your question?