Quiz Results Module

The Quiz Results module is a participation-type module and is used to display results from a Quiz-type Experience (such as a Shopify Product Quiz) on the confirmation page of the Experience.

Note: The participant needs to have successfully completed quiz questions in the Experience to see their quiz results on the confirmation page.

You define the Results available content (in case of a product match) and No results available content (in case of no product match) that will be shown as quiz results.
Additionally, you can add some general optional text (e.g., headline, byline) and images.

The design of the module can be configured (e.g. Layout and display style).

You can edit the Quiz Results module in the Page Builder by clicking it, or by clicking on the Pencil icon.

The sections mentioned below can be edited and configured to your needs (available from the tabs at the top of the Experience page builder).

 

Results

On the Results tab, you can map the quiz results to the participants' responses.

Click the Manage Results button.

You can then choose how many product recommendations to show and in what order.

  • Number of recommendations — Enter a value here. It determines how many products you want to show to the Experience entrant.

  • Randomize product order — When the toggle is enabled, it will randomize the order of product recommendations shown to the entrant to avoid showing the same results in the same order every time.

 

Content

  • Copy (optional) — Specify text elements and sizing.
    Tagline, headline, headline size, byline, description, CTA, link destination, image and icon image can be configured.

  • Result(s) available — You can define text and other copy that will only be shown above the results when a participant's responses result in one or more matching results (e.g. Here are your matching results).
    Image, tagline, headline, headline size, byline, description, CTA and link destination can be configured.

  • No result(s) available — You can define text and other copy that will only be shown when a participant's responses do not match any result (e.g. Oops! There's no match).
    Image, tagline, headline, headline size, byline, description, CTA and link destination can be configured.

 

Design

Layout

Choose a layout on how to display the Quiz Results.

Examples:
- Text on bottom:


- Masthead:

 

Multiple results

Choose the display style when there are multiple results.

  • Carousel — Displays the results as a horizontal carousel that can be cycled through. Users can manually navigate through the results using left/right arrows or pagination dots.
  • Stack — A vertically stacked layout that organizes the results in a top-to-bottom sequence.

 

Background

Use this to override the Experience or form background (if set) for this module.

  • Background color — You can set a background color with the visual color picker or by entering the color hex code.

  • Background — You can select (and upload) a background image or set a video URL.

When a background image is selected, you have the following layout options available:

  1. Background display sizing:
  • Cover automatically fills space while maintaining aspect ratio. The focus will be on the center of the image.

  • Contain scales the image to maintain its aspect ratio while fitting within the given space. It is ideal for use of irregular design assets and product images.

  • Native uses the actual image size.

  1. Background scroll:
  • Scroll with page — While the user scrolls the page, the background image will scroll with it.

  • Fixed position — While the user scrolls the page, the background image will remain its fixed position, not moving.

  1. Background repeat:
  • Display once — The background image will only be displayed once.

  • Repeat horizontally — The background image will be repeated multiple times horizontally (if its width is smaller than the width of the container).

  • Repeat vertically — The background image will be repeated multiple times vertically (if its height is smaller than the height of the container).

  • Tile to fill space — The background image will be repeated multiple times horizontally and vertically to fit the entire container (if its width and/or height is smaller than the width/height of the container).

 

Text alignment

Specify the alignment of the text copy: Left, center or right aligned.

 

Advanced options

With the advanced options, you can configure the display height of the Quiz Results and set a custom class name.

  • Display height — Defines the fixed pixel height for this module.

Note: This overrides any heights set in the theme or stylesheet.

Warning: Only touch this section if you are a developer, as this may impact your Experience hugely.

  • Custom classname — Will be output as xCustomModule-[Your-CSS-Classname] in the module when it is rendered on the page. Use this to give your module a unique style. You can also target CSS classes in a theme using the custom CSS classname.