All Collections
Quizzes
Quiz Design
Using Quiz Design Settings
Using Quiz Design Settings

How to use your quiz's design settings to their fullest.

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

Octane AI features a large range of design settings that help make your quiz as on-brand as possible without requiring any code (advanced developer options are supported too).

Use this guide as a tour through Octane AI's design settings and the things you should know.

πŸ’‘ What you'll learn about


Locating design settings

The vast majority of Octane AI's design settings can be found under the Design tab in Octane AI's quiz editor.

Here's a quick summary of what each section of the Design tab does.

What it does

Layout

Set the alignment of elements in the quiz as well as content width & autoscroll.

Typography

Set the font name, color, weight and size of text in your quiz.

Colors & styles

Set the color of elements in your quiz (except text, which is in Typography).

Background image settings

Upload a general background image for the quiz.

Spacing

Edit the vertical spacing between elements in the quiz.

Transitions and animations

Toggle page & button hover animations.

Custom CSS

Set custom CSS class names for elements in the quiz.

Answer display settings

Design settings for answers can be found in the DISPLAY SETTINGS menu found under ANSWERS in every picture choice question.

These settings let you change:

  • Image ratio: the shape of the image answer

  • Image scaling: how your image file fits the answer space

  • Text position: where the answer text appears in relation to the image

  • Content width: how large each image answer is

  • Answers per row: how many image answers are displayed per row

The content width of answers as well as how many answers per row can fit is related to the size of the space that the quiz is published in.

Regular text-based multiple choice questions will have the option to select what kind of text-based options the question displays.

Product display settings

Design settings for product appearance can be found inside of content blocks. Click inside of a RESULTS PAGE, then click into a CONTENT BLOCK holding products to find its DISPLAY SETTINGS menu.

These settings let you change:

  • Image ratio: the shape of the product image

  • Image scaling: how your image file fits the product space

  • Product display: the formatting of each product

  • Content alignment: the alignment of content in each product

  • Product size: how large each product is

  • Max products per row: the maximum number of products per row

  • Optional product information: toggle the information that displays per product

Much like answer content, the number of products you can display per row may depend on the amount of space your embedded quiz allows for.

Working with fonts

Quizzes have 3 options when it comes to fonts:

  1. Inherit font settings from your website

  2. Manually assign website fonts to quiz content

  3. Use the quiz's default fonts

You can view exact font sizes for quiz elements here:

πŸ’‘ Previewing custom fonts

Most custom fonts won't be displayed inside of the quiz editor or the quiz editor's preview, since the font files are present on your website.

To preview quizzes with custom font settings, publish the quiz in a page on your website first such as a hidden or unlinked page.

Inheriting font settings

To inherit font settings, simply to go to:

Design > Typography

Under SETTINGS, you'll be able to check an option labeled "Inherit font family from destination website".

When using this setting, fonts will be applied to your quiz according to their assigned hierarchy in your website's theme code.

In some cases, fonts may not apply the way you intend them to, in which case we recommend using the next method of manually assigning fonts.

Manually assigning fonts to quiz content

In the Typography section, every piece of editable text in the quiz also has an option labeled "Use custom font family".

By checking this, you can type in the exact font family you want to apply to that section of text in your quiz. The name of the font as it appears in your website code should be used.

You should avoid using the INHERIT FONTS option if you're also manually assigning fonts.

Images in quizzes

Background images in quizzes can use a different version for mobile vs. desktop devices. Currently, only background images can use this option.

Full-page quiz embeds are recommended when using a background image. This is because the shape of your quiz embed will flex with the size of the space that the quiz is shown in.

When quizzes use page body embeds, this results in a quiz space that constantly changes with each device and browser window that views the page. This happens in full-page embeds as well but to a much lesser extent, helping your background image keep a more consistent aspect ratio.

For details on image sizing and formats, check out this article:

What is max content width for?

The LAYOUT settings in your quiz allow you to set a max content width.

This setting is important for page body embeds, where the width of the embedded content area should match the max content width.

Making the max content width exceed the size of the page's embedded content area won't make the quiz larger than what the page itself allows, so the max content width should only match the content area of the actual webpage.

If you're unsure of what this is, you can leave it at the default value.

Did this answer your question?