User Guide Cancel

Add a Click to Reveal widget to a project in Adobe Captivate

Last updated on Nov 14, 2023

Captivate User Guide
Introduction to Captivate
1. What's New in Adobe Captivate
2. Adobe Captivate System Requirements
3. Adobe Captivate Updates
4. Download Adobe Captivate
5. Frequently Asked Questions
Add a slide
1. Slide navigator in Adobe Captivate
2. Add a conversation slide
3. Add characters to your Adobe Captivate project
4. Edit the background image on a slide
5. Add padding to content blocks and components
6. Create a long scroll project
Add text blocks
1. Add text to a project
Add media blocks
1. Add images to a project
2. Add videos to a project
3. Add quotes
4. Add SVGs to a project
Interactive components
1. Add a button
2. Add an input field
3. Add a radio button group
4. Add a dropdown
5. Add a checkbox
Widgets
1. Add a Card
2. Add Tabs
3. Add a Certificate
4. Add a Carousel
5. Add a Hotspot
6. Add Drag-and-Drop
7. Add a Timeline
8. Add Click to Reveal
Create quizzes
1. Add a Multiple-choice question
2. Add a True or false question
3. Add a Match the column question
4. Add a Short answer question
5. Add a Sequence question
6. Add question pools and random question slides
7. Import questions as CSV
Add audio to a project
1. Add audio
Interactions
1. Add interactions to a project
2. Create interactive video with overlay
3. Create a slide-level interaction
4. Create an object-level interaction
Animations
1. Add animations to a project
Accessibility
1. Make a project accessible
Customize the timeline
1. Timeline panel in Adobe Captivate
Customize TOC and Playbar
1. Table of Contents in Adobe Captivate
Edit project properties
1. Variables in Adobe Captivate
2. Preferences
3. Project dimensions
4. Themes
Create a simulation project
1. Simulation
Preview a project
1. Preview
Share a project for review
1. Share for review
Publish a project
1. Publish your project
Upgrade projects in Adobe Captivate
1. Upgrade projects to the latest version

Looking for instructions on adding a Click to Reveal widget? Read on to know how you can add one and customize it further.

Note:

Adobe Captivate introduces content blocks, such as text or an image block, which contain components like text, image, or button. Play this video to learn more about content blocks and components.

Overview

The Click to Reveal widget in the all-new Adobe Captivate is a learner-centered approach that encourages active engagement and discovery. It allows learners to control their learning pace, dive deeper into specific areas of interest, and access additional information on demand.

This widget consists of cards. When a learner clicks a card, a pop-up displays, called an overlay. The overlay contains additional content. For each card in the widget, there is an overlay.

Add a Click to Reveal widget

Select Add new widget > Click to Reveal in the left toolbar.

Change the properties of the Click to Reveal widget

At the widget level, Adobe Captivate lets you add or remove the number of cards in the widget, choose from a set of pre-defined design options, add or remove a title or image, and many more.

In the Visual Properties panel, the Content Width slider and Horizontal Padding are linked in the Alignment and Spacing section. Moving the slider from the left side changes the left padding value, and moving the slider from right changes the right padding value. The same change is replicated in the Content Width slider when you change the left or right Horizontal padding values.

Move the Content spacing slider to adjust the spacing between the cards.
Move the Number of cards slider to increase or decrease the number of cards. You can add at most six cards in the widget.
Select a design option. The Design Options present pre-configured layouts with cleaner design elements to apply to the widget.

For more information, view Design options in Adobe Captivate.
In the Components section, you can change the following:
- Title: Add or remove the widget's title.
- Body: Add or remove the body of the widget
- Instruction: Add or remove the instruction on the widget.
- Previous button: Add or remove the Previous button on the widget.
- Next button: Add or remove the Next button on the widget.
You can add or remove the following components on the cards inside the widget.
- Icon: Add or remove the icons on the cards.
- Caption: Add or remove the captions below the cards.
In the Appearance section, change the look and feel of the card and the widget via the following tabs:
- Background tab: Add the widget's background color and a border, and apply a shadow to the border. When applying a background, you can select a solid color, linear or radial gradient, or add an image as a background.
- Card tab: Increase or decrease padding around the text objects, add a radius to one or four corners of the card, add a border to the card, and apply a shadow to the card's border.
In the Settings section, you can turn on or off the following:
- Reveal first card by default: When you enable this toggle, the first overlay card opens by default when a learner views the project.
- Move the next slide only when the widget completes: When you enable this toggle, the project moves to the next slide only when a learner has visited all the overlay cards.

Change the properties of a card

Adobe Captivate lets you change the appearance of a card, such as adding a background color, adding a border to the card, or applying a shadow to the border.

Select a card on the widget.
In the Visual Properties panel, in the Components section, you can change the following in a card:
- Icon: Add or remove the icon on a card.
- Caption: Add or remove the text caption below the card.
In the Appearance section, add padding and change the radius of the card on one or all four corners. You can also change the card's appearance by adding a border, color, or shadow.

Change the icon on a card

Change the icon and add color to the icon on a card.

Select the icon on a card.
In the Visual Properties panel, in the Icon section, select the folder icon and change the icon from the Asset panel or your computer. Then select an icon and replace the card's icon.
Change the icon's transparency in the Appearance section by moving the Opacity slider.
Select a color from the color picker to change the icon's color.

Change the properties of an overlay card

Change the appearance of an overlay card by adding a background color or a border. An overlay appears after a learner clicks the corresponding card in the widget.

Select an overlay card in the selector on the slide.
Select a design option. The Design Options presents pre-configured layouts with cleaner design elements to apply to the overlay card.

For more information, view Design options in Adobe Captivate.
In the Components section, you can change the following for an overlay card:
- Overlay Label: Add or remove the label of the overlay card.
- Overlay Image: Add or remove the image on the overlay card.
- Overlay Title: Add or remove the title of the overlay card.
- Overlay Body: Add or remove the body text of the overlay card.
In the Appearance section, add padding around the text in the overlay card, add rounded corners to the card, add a background color, add a border to the overlay card, and add a shadow to the border.

Edit the text of an overlay card

Change the text's font, size, color, and many more. For more information on working with text, view Text in Adobe Captivate.

Select an overlay card in the selector below the widget.
Select any text inside the overlay card.
In the Visual Properties panel, you can:

Apply a text preset, change the font and size, change the text's color, add an outline, highlight, shadow, and many more.

For more information, view Text in Adobe Captivate.
In the Reporting section, select the checkbox Include in quiz if you want the quiz to be included in an LMS. Each scorable unit of Captivate is automatically assigned a unique Interaction ID. This Interaction ID is what makes data tracking by the LMS possible.

Replace and edit an image on an overlay card

Adobe Captivate allows you to change an image's intensity, blur, brightness, or contrast levels on an overlay card.

Select the image on the overlay card.
Move the Opacity slider in the Visual Properties panel to increase or decrease the image's transparency.
You can apply an image filter in the Appearance section in the Visual Properties panel. Also, change the image's intensity, blur, brightness, or contrast levels.
Select Border to add a border to the image. Change the width, size, and color of the border.
Select Drop shadow to apply shadow to the border of the image.
In the Image source section, click the folder icon to replace the image from Assets or a location on your computer.

For more information on working with images, view Images in Adobe Captivate.
In the Reporting section, select the checkbox Include in quiz if you want the quiz to be included in an LMS. Each scorable unit of Captivate is automatically assigned a unique Interaction ID. This Interaction ID is what makes data tracking by the LMS possible.