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.
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!
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.
…
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.
