Text Reveal Component

The Text Reveal component lets you present a clickable image to your learners. When the image is clicked on, additional content is revealed.

This article provides an overview of the Text Reveal component, component setup and behavior, and examples of Text Reveal component configurations.

Component overview

The Text Reveal component is an interactive component that allows you to add an image and click on the image that reveals a piece of text to the learner. The Text Reveal component can be configured to display in columns and allow different layout configurations.

The Text Reveal component is fully responsive and you can set the text to appear in a popup, which shows an image together with the revealed text, as needed.

Component set up

To add this component, follow the steps in this article:

The Property Panel for the newly added component will then open automatically for you to customize set-up.

Or click anywhere on an existing component to open the Property Panel.

General section

In the General section:

Add Title, or a Display Title, as needed. Display Title is seen by learners.

Scroll down the page and add your Body. Use the text editor to style and format your text, as needed.

1. Add Instruction Text that tells users how to use the component.
2. Include an Aria Label for screen readers, as needed.

Interaction Label section

In the Interaction Label section, you can enable an Interaction Label.

The Interaction Label allows you to add a widget before or after the Text Reveal component. This widget can display an icon and label prior to the Text Reveal component completion, which changes to a different icon and label once the Text Reveal component is completed.

Add Text Reveal Items

In the Items section, you Add Text Reveal Items to your component.

For each Text Reveal Item:

1. Select an Item Graphic Image to display.
2. Toggle Image Advanced Settings, as needed.
3. Scroll down and add Alt Text, as needed.
4. Add Caption. This text will display with the graphic.

Scroll down and add Item Title. This text will display as the item title.

Add Item Reveal Text. This text will display when the item is clicked. Use the text editor to style and format your text, as needed.

Add Item Reveal Image, as needed. The Image will display when the item is clicked. Toggle Image Advanced Settings, as needed. Add Image Alt Text, as needed.

Note: If using column mode, Item Title, Item Reveal Text, and Item Reveal Image will also appear in the popup.

Set Position of Item Reveal Image. Options for position of the image is Top, Bottom, Right, or Left.

Component Examples

The Text Reveal component gives you a lot of flexibility. Below are examples that illustrate Text Reveal component setup:

Example 1 – This example shows the Text Reveal component displaying the revealed text in a popup together with an Item Reveal Image placed to the right.

Example 2 – This example shows the Text Reveal component displaying the revealed text set to the right.

Example 3 – This example shows the Text Reveal component displaying the revealed text together with an Item Reveal Image placed on top.

Behavior section

In the Behavior section, toggle to Reveal text in a popup. This will display the items in a column layout.

Toggle Is Exploratory Question to allow items to be correct/incorrect with the option to display marking in the revealed text.

Toggle Show marking as needed. This option is available when the Text Reveal component is set to an exploratory question.

Scroll down and toggle to enable Set the caption to be displayed over the graphic. By default, this setting is disabled and the caption will appear underneath the image.

Toggle to Disable Item Titles to display items without titles, as needed.

Note: Enabling the setting Disable Item Titles will still show Item titles in the Text Reveal component popups.

Appearance section

In the Appearance section, you set the Item Layout.

Use the sliders to set the graphic’s width for Item Desktop Layout, Item Tablet Layout, and Item Mobile Layout.

Animations section

In the Animations section, you set what animations to run when the Text Reveal component first comes into view on the page. Toggle to enable specific animation settings.

Note: If Reveal text in a popup is enabled, the animations affect the revealed text. Otherwise, the item itself is animated when the component appears on the page.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.