Getting Started with JavaScript and Adobe Captivate

(44)

Comments

(26)

Getting Started with JavaScript and Adobe Captivate

(44)

(26)

(44)

Summary

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.

Click here to preview project

Please log in and complete your profile to continue.

blog

elearning resources

javascript(beginner)

Learn_Project

tutorials/training

(44)

Comments

(26)

Greg Stager Follow

I am currently a provider of technical training and support in the electronic manufacturing industry. My prior training and work experience as a teacher, network administrator, web design, and instructional design make me well prepared to design it, develop it, and deliver it. I am a father of five, a US Army veteran, and I enjoy playing the guitar as well as performing in local community theater.

26 Comments

Piotr69

Jan 31, 2023

Piotr69

Jan 31, 2023

Thank you Greg, I really appreciate your help. Your tutorials are useful and unique

()

OzBassist

Nov 16, 2022

OzBassist

Nov 16, 2022

I have a few useful tips and tricks on my site on the topic of using Javascript with Captivate:
https://jrdesign.com.au/category/tips-and-tricks/captivate/

()

(1)

etm1000

Mar 26, 2022

etm1000

Mar 26, 2022

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?

()

(2)

mmagioli

Apr 25, 2021

mmagioli

Apr 25, 2021

Thanks for sharing, Greg. Added to my resources library.

(4)

Dave Emsley

Mar 9, 2021

Dave Emsley

Mar 9, 2021

A useful introduction, thanks.

(4)

Kim Price

Feb 1, 2021

Kim Price

Feb 1, 2021

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.

(4)

(1)

cferran1

Jan 12, 2021

cferran1

Jan 12, 2021

All examples of using Java with Captivate are quite useful. Thanks.

(1)

cferran1

Jan 12, 2021

cferran1

Jan 12, 2021

Very useful.

()

OzBassist

Nov 16, 2020

OzBassist

Nov 16, 2020

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.

(6)

(3)

InstructionalRy

OzBassist

's comment

Nov 16, 2020

InstructionalRy

Nov 16, 2020

OzBassist

's comment

Sounds amazing! I’m doing my best to better understand the correlation between JavaScript and Captivate, so know the resources shared are appreciated!

(1)

iDoNotBelieveIt

OzBassist

's comment

Nov 18, 2020

iDoNotBelieveIt

Nov 18, 2020

OzBassist

's comment

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!

(2)

cferran1

OzBassist

's comment

Jan 12, 2021

cferran1

Jan 12, 2021

OzBassist

's comment

Thanks for the links to those comprehensive sites.

()

OzBassist

Nov 16, 2020

OzBassist

Nov 16, 2020

Excellent work, Greg!

The interactive examples are great, and the JS is simple enough for anyone to understand.

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.

If anyone wants to hit me up, please feel free.

(3)

jimmyshoe85

Oct 21, 2020

jimmyshoe85

Oct 21, 2020

This was very helpful. Thank you.

(2)

maria carmenu32233869

Jul 30, 2020

maria carmenu32233869

Jul 30, 2020

Hi Greg,

Thank you very much for sharing your knowledge and taking the time to make a guide.

I’ll get right on it!

(2)

iDoNotBelieveIt

Jul 8, 2020

iDoNotBelieveIt

Jul 8, 2020

Many thanks for doing this. I am just exploring using JavaScript with Captivate and making some progress.

(3)

(1)

Anonymous

Sep 12, 2019

Anonymous

Sep 12, 2019

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!

(3)

Greg Stager

Sep 9, 2019

Greg Stager

Sep 9, 2019

Glad to hear you are excited about this resource. I hope it is received by the rest of the community with such enthusiasm.

(6)

(2)

James K 85

Greg Stager

's comment

Apr 18, 2022

James K 85

Apr 18, 2022

Greg Stager

's comment

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?

()

Greg Stager

James K 85

's comment

Apr 18, 2022

Greg Stager

Apr 18, 2022

James K 85

's comment

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

()

Ludovic Mercier

Sep 9, 2019

Ludovic Mercier

Sep 9, 2019

…

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