A JavaScript resource for beginners.
This is what I would call an ambitious project.
JavaScript is a powerful option when it comes to working with Captivate and as I have been working to use it over the years – I have found it difficult to find helpful resources – especially if you are interested in it but do not have any prior background from which to draw upon.
This is my attempt to begin providing something I think will be useful for those who are interested in dabbling with JavaScript. I intend to author a small book for beginners on how to use JavaScript with Captivate. This Interactive Guide is meant to be the companion to that book. I created the companion first and will now begin working on the small book that goes into a little more detail. I also hope to author a second small book with some additional JavaScript ideas that is at a bit more advanced. I plan to make a companion project for that as well.
I am no expert in this but I truly hope that what I am offering here will be a good resource for somebody out there who is a lifelong learner and interested in extending the possibilities with Captivate.
I had originally meant to just have a single resource but the project was starting to get a bit large so I cut it short and will do a second one in the future. This one is over 30 slides of JavaScript goodness.
Please – if you encounter any bugs in this project – let me know so that I can update it.
Post any comments or questions that you might have.
Please log in and complete your profile to continue.
I’m trying to open this post/guide but a message pops up saying “Click ‘Proceed’ to Complete Your Profile.” I’ve done that various times–completely filling out all the data in the form, and then clicking on the submit button, but NOTHING HAPPENS. It’s not going into the post and just repeats the pop-up asking me to click proceed, etc. I’m logged into the account, and I’ve been able to open posts before, so why is this happening? Why is this site so poorly constructed?
I have the same problem – I shouldn’t be forced to fill out anything to see my own post…
Here is the direct link.
Thanks for sharing, Greg. Added to my resources library.
A useful introduction, thanks.
This is a terrific resource! And it’s great to see it presented as a Captivate module (I feel like I don’t see enough “how-to” examples actually created with Captivate – a tool we all use to build learning modules ). I’ve been compiling my own list of Javascript/Captivate commands, etc; I think I’ve read everything on these forums as well as the articles shared by John Ryan Design and every other linked resource; I just wish there was a “single” repository of this information – like a ‘wiki’ page for JavaScript.
Thank you – I have come to discover many tricks and shortcuts through the open door that JavaScript provides. I keep a small journal with some of the ideas that are a bit tougher to remember.
All examples of using Java with Captivate are quite useful. Thanks.
Very useful.
Excellent work, Greg!
The interactive examples are great, and the JS is simple enough for anyone to understand.
I guess it’s important to state that although Captivate consumes basic Javascript, it also natively uses JQuery, and all the goodness that it implies. In order to make good use of it, some time spent with the Chrome Developer tools is necessary.
I’ve been doing a lot with Javascript in Captivate, and have a few blog posts with downloadable source files on my blog.
Using Javascript in Captivate here
Importing JSON data into Captivate here
Captivate Progress Bar using Javascript here
How to use a Javascript Timer in Captivate here
Hopefully this might help some of you.
I’m also currently working on an example of how to dig deeper into the CPM.js that’s created when you publish a Captivate project.
Particularly the cp.model object, which holds a bunch of really cool things.
A couple of use cases – creating functionality that allows you to extract the total number of frames in a slide and the number remaining so that you can create a visual ‘time left’ counter for the slide as well as the project., another where you can dynamically extract a list of slide names.
If anyone wants to hit me up, please feel free.
Sounds amazing! I’m doing my best to better understand the correlation between JavaScript and Captivate, so know the resources shared are appreciated!
There is a thread in the community with some very useful information on how to display the current slide time and remaining time that I managed to implement: https://community.adobe.com/t5/captivate/display-slide-duration-inside-the-slide/m-p/11294761?page=1#M282772
And thank you for the content on your blog; it is great!
Thanks for the links to those comprehensive sites.
Excellent work, Greg!
The interactive examples are great, and the JS is simple enough for anyone to understand.
I guess it’s important to state that although Captivate consumes basic Javascript, it also natively uses JQuery, and all the goodness that it implies. In order to make good use of it, some time spent with the Chrome Developer tools is necessary.
I’ve been doing a lot with Javascript in Captivate, and have a few blog posts with downloadable source files on my blog.
Using Javascript in Captivate here
Importing JSON data into Captivate here
Captivate Progress Bar using Javascript here
How to use a Javascript Timer in Captivate here
Hopefully this might help some of you.
I’m also currently working on an example of how to dig deeper into the CPM.js that’s created when you publish a Captivate project.
Particularly the cp.model object, which holds a bunch of really cool things.
A couple of use cases – creating functionality that allows you to extract the total number of frames in a slide and the number remaining so that you can create a visual ‘time left’ counter for the slide as well as the project., another where you can dynamically extract a list of slide names.
If anyone wants to hit me up, please feel free.
This was very helpful. Thank you.
Hi Greg,
Thank you very much for sharing your knowledge and taking the time to make a guide.
I’ll get right on it!
Many thanks for doing this. I am just exploring using JavaScript with Captivate and making some progress.
Good to hear.
Hopefully you gain something useful from this.
I sometimes like to simply refer to this as creating my advanced actions manually.
Hi Greg,
I was recently looking for a book or other resources on this topic and there’s not much out there. I’m sure many people will find this very useful. Thanks!
Glad to hear you are excited about this resource. I hope it is received by the rest of the community with such enthusiasm.
Hey Greg,
Is there a way I can change the state of a button and play audio on keypress, and change back to original state on keyup?
Sure –
You could try something like this… see attached
In this example – pressing the letter A down will
- play selected audio
- change the state of a button object on the screen
- disable the button (so it isn’t pressed multiple times if held)
- enable stop button
Releasing the A button will
- Revert button state to normal
- stop playing the audio
- re-enable the button to play audio again
- disable the stop button
Setup
- Have two onscreen objects
- Button 1 will have the play audio and be visible on screen.
- Button 2 will have a stop triggered audio command and be hidden on screen.
- You could also have two hidden buttons and change the state of a third object
- Place JavaScript as an onEnter action
Hope that helps.
Let me know if you have further questions.
Attachment 
…
Hello Greg !…
I dreamed of such a tutorial !… Linking JavaScript with Captivate was a real struggle for me since I started using Captivate. So I started collecting some JavaScript codes myself as I used them in my projects !…
Here is what I already collected so far on the Cpt Forum or on the net :
# Clear a TEB :
var elem = document.getElementById(“TEB_1_InputField”);
elem.value=””;
# Random number between 1 and 10 :
window.cpAPIInterface.setVariableValue(“Number”, Math.floor(Math.random()*11));
# Random number between 5 and 20 :
(Math.floor(Math.random() * (max – min + 1)) + min);
window.cpAPIInterface.setVariableValue(“Number”, Math.floor(Math.random()*16) + 5);
# Use the numbers in a french format (with spaces or using “,” instead of a “.” for the decimals)
var NumberInFR = NumberInCpt.toLocaleString(“fr-FR”);
# Round a decimal number :
window.cpAPIInterface.setVariableValue(“v_Number_E”, Math.floor(v_Number_D));
# Go to the previous page in the browser :
window.history.back();
# Make an object blink (already in your demo):
setInterval(function() {
$(“#Object”).fadeOut(500);
$(“#Object”).fadeIn(500);
}, 5000);
Nearly nothing as compared as yours !!… Hi hi !!… So big BIG thank you again !!!… And I hope I will read your next post soon !…
Best wishes !…
…
You must be logged in to post a comment.
