This is for anyone interested in learning more about how to use JavaScript with Captivate. Here’s a list of 5 simple yet commonly used JavaScripts I use.
1. Arrays
Arrays are awesome and this quick reference only covers a fraction of their power. Let’s say you have a several comments that you want to use throughout your project at various times. Rather than writing them up each time, or having the comments stored as different variables, I use an single ‘array’ that stores all the comments in one place.
var comments = [“You showed a great understanding here.”, “Excellent work.”, “Good effort”, “Could improve on some understanding”, “Please review section 1.”]
Now if I want to ever refer back to any comment in the array I would now just write “comment” and the number it’s at (starting with zero)
comments[1] // returns ‘Excellent work.’
I almost always pair arrays with variables. For example, if I had the variable ‘score’ that kept track of a users progress, I can control which comment to display with this variable.
comments[score] // returns the comment at score’s value.
2. Show, Hide, Enable, and Disable Stuff
If you have a button with the id ‘obj’, here’s how you would make it visible, invisible, enabled and disabled. I usually have to wrap this code inside more complex functions (such as enabling a button after a video has finished playing).
cp.show(‘obj’);
cp.hide(‘obj’);
cp.enable(‘obj’);
cp.disable(‘obj’);
3. Alert Messages
Yes you can create your own text box with a button, give it an id, hide it, write a code that triggers it to be visible, and then write another code to hide it again. But if it’s just for a quick message, the ‘alert’ function is easier.
alert(“message”,”title”)
As a bonus, you can customize how it looks under Edit –> Object Style Manager
4. document.onkeydown
Let’s say you are creating a software simulation and you want the ‘up arrow’ to change the state of an object. Without javascript, you could create an advanced action with a keyboard shortcut. But what about if you needed twenty keys to launch different actions? That would require 20 advanced actions associated with 20 shortcuts.
Here is how to achieve this same effect with javascript. The following code would be executed on enter of a slide.
document.onkeydown = function(e){
if(e.code ==”ArrowUp”){
alert(“Up Arrow pressed”)
}
if(e.code ==”ArrowDown”){
alert(“Down Arrow pressed”)
}};
Without getting into too much detail, this code essentially listens for any key to be pressed. It then uses a bunch of if statements to identify if a certain key was pressed, and will then launch an action. You can have as many keys or key combinations as you want, and it’s all laid out in one area.
5. Switch Statements
I wrote about switch statements in another blog I made about failure messages. https://elearning.adobe.com/2018/01/super-easy-dynamic-successive-quiz-failure-attempts/ I find them to be a valuable tool in my arsenal.
Let’s say you have a situation where the value of a variable will determine 10 different possible outcomes. For example, if variable ‘x’ equals 7 do this, but if variable ‘x’ equals 8 do something else. To write this with advanced actions would require 10 different ‘if statements’. That’s a lot of repetitive writing of ‘if statements’. This is where switch statements can come in handy.
switch (x) {
case 1:
alert(“The variable x = 1”);
break;case 2:
alert(“The variable x = 2”);
break;case 3:
alert(“The variable x = 3”);
break;case 4:
alert(“The variable x = 4”)
break;
}
Switch statements act exactly like if statements but without having to write them all out. Each ‘case’ represents the value of the variable. For example, “case 4:” would occur if the variable ‘x’ equaled 4.
If you have any questions about how to utilize these scripts please let me know. Hope this has been helpful.
I have a questions about item #2.
2. Show, Hide, Enable, and Disable Stuff
If you have a button with the id ‘obj’, here’s how you would make it visible, invisible, enabled and disabled. I usually have to wrap this code inside more complex functions (such as enabling a button after a video has finished playing).
cp.show(‘obj’);
Would this work when you are playing an embedded (iframe) video in the web object?
I was looking for a way to show the button after the video finishes.
Yes the code should work. However, if you are executing this code from inside your iframe (i.e. you wrote your own html script and imported it as a web object) you would need to use:
parent.cp.show(‘obj’)
I wrote a blog about triggering functions when videos end that might be helpful.
https://elearning.adobe.com/2017/11/triggering-a-function-when-an-event-video-ends/
Also, if you are using Vimeo, I have a blog post about triggering end events.
https://elearning.adobe.com/2017/12/end-of-video-events-with-vimeo/
Thanks for your JS posts, Jeremy. Myself I switch to JS for functionality that is not available or cumbersome in Captivate or when usting CpExtra widget. Arrays is certainly one of them, but I use JS most to create a random number or to format numbers. Switch is great, but often I prefer advanced actions because they are easier to manage by clients.
You must be logged in to post a comment.