Skip to main content
This site uses cookies to provide you with a greater user experience. By using Exceed LMS, you accept our use of cookies.
Intellum
Get Started
Help Articles
Courses
All Topics

Text Reveal Component

  • By Intellum Documenation
  • Published: Dec 10, 2021
  • Duration 5m
  • Difficulty Beginner
  • Rating
    Average rating: 0 No reviews

Outline

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

Follow these steps to add the Text Reveal component to a Block:

  1. Click Add Component.
  2. Use the component search or scroll to find the Text Reveal component.
  3. Click the Card Drop component and select Add Left, Add Full, or Add Right.

Click the Edit Component icon on the newly added Text Reveal component to begin set up.

General section

In the General section:

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

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

  1. Add Text Reveal 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 that 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 to Set Image Per Device Size, as needed.
  1. Scroll down and add Alt Text, as needed.
  2. 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. Set Image Per Device Size, as needed. Add Image Alt Text, as needed.

Heads up!

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

Finally in the Items section, you 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.

Behaviour section

In the Behaviour 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.

Heads up!

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.

Heads up!

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.