3 Ways to Use Custom Color Palettes in Captivate That YOU Have to Check Out
September 11, 2015Controlling Captivate – Upgrading to Captivate 9
March 14, 2016Welcome 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.
10 Comments
Demo doesn’t work for me on MacBook Pro, I tried:
Chrome (Versie 48.0.2564.103 (64-bit))
Safari (Versie 9.0.3 (11601.4.4))
Firefox (43.0.4)
I had to manually push a file to the server. It’s working now.
The ‘Slide Label’ requirement is very restrictive:
“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. ”
If i understand this correctly, I’ll need to rename any slides where I want to use this functionality?
Considering that I’m building multiple courses that use the Table of Contents, which is based on the slide label; this will cause me to have to manage each TOC manually after refresh.
I’m afraid this is too much of an impact to consider implementing your solution.
Please reconsider storing this in a user defined variable!
Everything is possible and we can customize anything. This is a free version. The label is a way to make it dynamic and is used only to activate the next button when clicking on all mandatory elements.
I cant find where to download this plugin – help
When you sign-up you should get a password and link to the downloads. Did you not get that?
Looking at this for a “Scavenger Hunt” scenario.
Not sure what you mean by that. Could you provide more detail?
Sadly, I can’t get it working. I’ve tried to implement it in it’s simplest form in a new project and I can’t get it working. I’m running CP2019 in a Windows7 VM on a MacBook Pro (MacOS 10.14.6).
I wish there was a downloadable captivate file that we could use to check the properties of the different elements (maybe there is but I can’t find it).
So, to confirm I’ve got it set up right, my 2 slide test file has the second slide named “clicks_2” (sans quotes).
The zip file was imported onto slide 1 as a HTML5 Animation object with Border and Scrolling off and the timing set to to Rest of Project.
I’ve got 4 buttons to hide/show 4 individual text captions, each set to invisible in output, (my initial desire was to hide/show images but after my tests failed, I changed to captions just to be precise to the instructions while testing).
Each button’s action is executing a javascript (Set to Current and Continue…) with the following pasted into the respective Script_Window: showHide(“TC_2_1”), showHide(“TC_2_2”), etc and the text captions are named TC_2_1, TC_2_2, etc.
I’m previewing the slides via HTML5 in Browser. The buttons look like they are clicking but the
What am I missing???
Your help is most appreciated, thanks!
Brett
Hi Brett … help is on the way via email. Sorry you’re having an issue with this but we’ll help you make it work!