All Collections
Quizzes
Guides
How to Create Transition Pages with Explainer Screens
How to Create Transition Pages with Explainer Screens
Transition pages are pages that display information between questions or a loading page in your quiz.
Mark Baek avatar
Written by Mark Baek
Updated this week

Overview


This is a brief introduction to explainer screens as well as a guide to turning one into a loading page for your quiz.

Explainer screens are super versatile and can be used to make a wide variety of transition pages.

What you'll learn

What explainer screens are, and how to use them in quizzes.


What are explainer screens?


Explainer screens are blank, custom pages you can add to your quiz. By default, they begin with no content aside from a 'Continue' button.

If you haven't used one already, here are some ways you can use explainer screens:

  • Loading pages

  • Landing pages

  • Presenting information

  • Filler between questions

  • and more!

Since explainer screens are filled with your content, they're a great part of an on-brand experience.


Creating a loading page


Loading pages are made with a few simple components:

  1. A still image or animated GIF

  2. A timer

  3. Text (optional)

An on-brand image and a small note to people taking the quiz is normally more than enough. Follow the steps below for a detailed dive into how to turn an explainer screen into a loading page.

Creating an Explainer Screen

Let's start by adding the explainer screen and getting it ready to be used as a loading screen.

Step 1: Inside of the Quiz editor, press "Add page"

Pages don't just include questions, but also opt-in pages and explainer screens as well.

Step 2: Select "Explainer screen"

Originally, there will be only Title text and a Continue button.

Step 3: Add content to your "Explainer screen"

You can add a Title, Subtitle, and any other content you want using Top or Bottom content areas. As in any other quiz page, you can add Explainer screen content in the form of:

  • Text

  • Images

  • Video

  • Button CTAs

For a loading page, none of these are needed but using text and a GIF, we can make a simple loading animation.

Filler content might be something simpler - for example, you can add on-brand copy to explainer pages to create a quiz flow that's more like a conversation than a quiz.

Step 4. Choose a way to proceed with the quiz

Under the CONTINUE BUTTON tab, there is "Do not show button" option.

Although the 'Continue' button isn't required, explainer screens do require a way to proceed past them to be enabled. Including the button, you have three options:

  1. Continue button (default)

  2. Continue after timer

  3. Continue when clicking anywhere

The 2nd and 3rd options are listed under the title/subtitle blocks. You can select the "After __ seconds" option to let the quiz continue based on a timer or on a mouse click anywhere.

NOTE: If you choose not to show "Continue" button, and don't add an alternative way to proceed past the page, you won't be able to save your quiz.

In order to add rules for where an explainer screen goes next, you'll need at least two methods of progressing past the page active (such as a Continue button + the timer).

Step 5. Drag-and-drop your explainer screen to the right place in your quiz (OPTIONAL)

Did this answer your question?