Adding a timeline in your Adobe Captivate project

Select the widget on the slide.

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 nodes to increase or decrease the number of timeline nodes in the widget. You can add at most six nodes.

Select any design option. A design option presents 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 button to go to the previous slide.
• Next button: Add or remove the button to go to the next slide.

You can add or remove the following on an event on a timeline:

• Event: Add or remove the events of the nodes.
  
• Image: Add or remove the images in an event.
• Caption: Add or remove an event's caption.
• Subtitle: Add or remove an event's subtitle.
• Card: Add or remove a card around an event.

In the Appearance section, you can further customize widget's background. The Background tab controls the color setting at the widget level. Select the Background tab, add the widget's background color and a border, and apply a shadow to the border.

Select the Line solid color to change the timeline bar's color and bar segment's color.

If you've selected Card, then in the Appearance section, you can change the card's background color by selecting the color picker. You can also add a border and apply a shadow to the card.

In the Settings section, enable or disable the toggle Move to next slide when the widget completes. When you enable this toggle, a learner moves to the next slide only after visiting all the hotspots.

Select an event in the widget.

In the Visual Properties panel, you can change the following:

• Image: Add or remove an image in the event. Select the image placeholder and replace the default image with an image from Assets or your computer. For more information on working with images, view Images in Adobe Captivate.
  
• Caption: Add or remove a caption in the event.
• Subtitle: Add or remove a subtitle in the event. Select the caption and the subtitle, and change their properties. For more information, view Work with text in Adobe Captivate.
  
• Card: Add or remove a card around the event.

In the Card section, increase or decrease padding around the text objects, add a radius to one or four corners of the card, add the card's background color, add a border to the card, and apply a shadow to the card's border.

Select a navigation button in the widget.

In the Visual Properties panel in the left toolbar, move the Opacity slider to increase or decrease the transparency of the button.

Select any design option. A design option presents pre-configured layouts with cleaner design elements to apply to the button.

For more information, view Design options in Adobe Captivate.

In the States section, click Show to launch the States Flyout. Configure the in-built states of the button, Hover, Visited, Selected, and Disabled. If any state is disabled, right-click the state, and select Enable.

In the Appearance section, add color and shadows to the button in the Shape tab and apply a border. Select one of the caps (Butt, Round, or Projecting) when applying a border.

Change font family, color, and other properties in the Text tab. Enable the Text toggle first.

When you enable the toggle, the label Next is added to the button. You can change the properties of the label in the tab.

For more information, view Work with text in Adobe Captivate.

In the Icon tab, enable the Icon toggle.

You can change the button label and add an icon near the label. Select the folder icon and change the icon from the Asset panel or your computer. 

Select the Solid color checkbox and add the icon's color from the color picker. To add a border to the icon, select the Border checkbox, and apply a border. Change the color and width of the border and specify the border end caps (Butt, Round, or Projecting).

Select the icon size from the options, Small, Medium, or Large. Then select the position of the icon on the button. Select either:

• Alight Left
• Align Top
• Align Right
• Align Bottom

Select the icon's Offset relative to the button. Select either Default, Comfortable, or Compact. Offset adds space between the icon and the edge or border of the button.

In the Flip icon section, select Flip horizontally or Flip vertically, so that when a learner clicks the icon, the icon flips in the selected mode.

In the Reporting section, select the checkbox Inlcude 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. 

Select a segment of the timeline bar.

In the Visual Properties panel, select any color from the color picker.