Controlling Captivate – ShowHide

Welcome to another installment of Controlling Captivate! In this post we are going to show you, with the help of a FREE TLC add-in, how to show and hide elements without using any advanced actions. This blog and add-in pertain only to CP8, CP9, and HTML5 output.

In a recent project we needed to show and hide multiple objects on several slides, sometimes up to 15 objects. Creating the advanced actions to control all of this was a nightmare. Even using groups and shared actions didn’t make it much easier. We thought, “Wouldn’t it be great if you could call a single JavaScript function to hide everything, then show what you wanted just as easily?” Well, that’s just what we’ve done.

Following some very straight-forward naming conventions for the slide label and object names, calling a simple function will Show/Hide objects and also keep track when all elements have been clicked. In addition, this function will show/enable the Next button for you if it is hidden.

We’re not going to go through all of the code that makes this work, we’re just going to explain the naming conventions, the functions, and the simple implementation of the ShowHide add-in. Did we mention you can get the add-in for FREE when you sign-up? Do it now by clicking the sign-up link so you can download the add-in and follow along.

Click here to download a demo.

Installation

The first step is to download the ShowHide.zip file.

The next step is to install the add-in. On the first slide of your project choose Media/HTML5 animation and point to your ShowHide.zip file?

With the animation on the stage, in the properties panel deselect the border and scrolling options. Set the animation to display for the rest of project. That’s it!

Naming Conventions

The key to using this add-in is the naming conventions.

Slide Label

The first step is the slide label. The slide must be named “clicks” followed by an underscore and the number of items you want to track. For example, you have three text captions you want to show/hide. Your next button is hidden until all three captions have been revealed. Your slide label will be “clicks_3”. This tells the add-in that there are three clickable objects and to set up an array to determine when all items have been clicked.

Note: By naming a custom next button “next_btn” the code will show the next button when all items are clicked.

Show/Hide Single Objects

In our demo we chose to name the text captions we are showing/hiding;

TC_2_1, TC_2_2 and TC_2_3 where:

TC = Text Caption (This can be anything, but must be the same for all objects)
2 = Slide Number (Required)
1 = Object Number (Required sequence)

Note: Ensure that all parameters are separated by an underscore.

With the applicable interactive object selected, choose the simple action “Execute JavaScript” and enter the following functions in the JavaScript window:

showHide("TC_2_1")
showHide("TC_2_2")
showHide("TC_2_3")

Note: Ensure you choose “Current” and “Continue playing the project” is optional depending on your project.

Show/Hide Multiple Objects

In Captivates output there are no groups. Grouping is only for ease-of-use in the Integrated Development Environment (IDE). Consequently, if you group 20 objects and choose to show the group in an advanced action, 20 JavaScript show commands would be written by Captivate. That is why the naming convention we’re detailing is important since we are not really hiding a group by name.

We will follow the previous convention, but sequence group objects with alpha characters, so the groups in the demo for the three text captions and the three images are as follows:

GR_3_1a         GR_3_2a         GR_3_3a
GR_3_1b         GR_3_2b         GR_3_3b

Where:

GR = Group (This can be anything, but must be the same for all objects)
3 = Slide Number (Required)
1 = Group Designator (Required sequence)
a-z = (Required sequence within the group)

Note: Ensure that all parameters are separated by an underscore except for the alpha character.

The functions to execute in the JavaScript window are similar to the ones used before:

showHide("GR_3_1")
showHide("GR_3_2")
showHide("GR_3_3")

The JavaScript will automatically determine if an alpha identifier exists, and if so, show all objects with the alpha identifier.

A function also exists to show an object or group of objects without hiding. This is demonstrated on slide 4 of the demo. Follow the naming conventions for a group of objects and call the JavaScript function, showItem(“GR_4_1”) and so on.

Want to just show or hide any element regardless of naming convention, execute the JavaScript:

showElement(‘object name’)
hideElement(‘object name’)

That’s all there is to it! Thanks for reading and we hope you find the ShowHide add-in a valuable tool that speeds up your development.