Hello guys…
I’ve been working with Captivate 2019 for a couple of months and trying to get the most out of it with Javascript. I think I’ve managed to do a few nice things with it. I’m kind of building a reusable framework within my simulators. One thing I’ve been struggling with is how poorly documented CP is… especially regarding the Javascript interface. There might be an official CP Javascript Reference that I have overlooked after browsing Adobe’s support and e-learning websites but, I think I’m giving up looking for it.
When I browse the forums for help, I frequently see how others use functions such as:
cp.clickHandler(item);
cp.animateItem(“18488”,20651,true,item_tag,4);
cp.runJavascript(cp.model.data.Button_1.oca);
I’ve been able to get a hold of them by playing around, testing and digging into them through the JS console, but it takes considerable time and effort. I find it sad that Adobe doesn’t responsibly provide thorough documentation of them. It looks like they don’t actually care about developers using Captivate.
I know there’s something at:
https://helpx.adobe.com/captivate/using/common-js-interface.html
and
https://helpx.adobe.com/captivate/using/captivate-variables-list.html
but it’s quite scarce and has no mention of these many useful JS functions that we see on the forums, and there might be many more. At this time I’m especially interested in cp.animateItem(). Do you know where to find its specifications by any chance?
Is there any (un)official complete guide or reference for CP’s JS functions and variables?
Thank you very much in advance!
Does anyone know what would be the javascript command to use in advanced action to change the layout of the Table of content from superimposed to extended.
I would like to have the TOC superimposed on the splash screen (index.html) and then show the rest of the project.
I don’t think that will be possible, even by using Javascript. It would mean that the size of your course would be different since what you call ‘Splash screen’ would have the TOC in overlay, and the rest not which would have a completely different width. Think about a movie that starts with a smaller width and then suddenly has a larger width? How would that be experienced.
BTW, this has no link whatsoever with the original question in this thread.
Hi – I’ve found using the command
cp.changeState(“OBJECT”,”STATE”);
or
cp.changeState(“OBJECT”,”Normal”);
to return to the default state extremely handy. Truly are these undocumented? As the original poster says, there must be a list of all of the cp.X commands available. I’m trying to find a way to change the colour of some text when clicked on. Yes I could use cp.hide() / cp.show() but I’m trying to steer away from relying on hidden objects and manipulating the DOM seeing as the output is now HTML5.
Any pointers would be ace!
I rarely use JS and almost never use hidden objects since multi-state objects appeared. There are easier ways to return to Normal state even without JS. Up to you to prefer programming of course, have done too much in my career and appreciate the comfort of advanced and shared actions. Much easier to debug.
Perhaps this is too much on the beginner side but you can review this link as well.
https://elearning.adobe.com/2019/09/getting-started-javascript-adobe-captivate/
I found this useful:
It’s actually helpful Todd… thank you very much!!!
It has a couple of functions of interest for me. Unfortunately, I can’t still find the specifications for cp.animateItem() or many other functions. But I really appreciate your contribution. I hope we’ll find a complete reference and share it.
Cheers!
Thanks Todd, couldn’t find my bookmark for this excellent Reference by Steve Warwick. So sad he is not present in the community anymore, a wonderful JS expert!
As far as I know only the documents you mention are published by the Adobe team. Sorry about that. For the Captivate system variables I published a detailed table with explanations. But since another user accuses me of being to agressive with links to my blog, will refrain from posting a link. There are several JS experts in the community. Personally I prefer using advanced/shared actions when possible, and use JS only when it is impossible to achieve what I want with the point-and-click language. But I totally understand if you like coding that you want to use JS exclusively. Or for communication between an OAM and CP.
Thank you very much, Lieve. One big reason to use JS is that I create lots of dummy data simulating login credentials, accounts, and transactions. I organize my data into objects, which makes it much easier to handle. These JS objects are related. I use these relations to make decisions such as loading a user profile, and then their accounts and corresponding transactions. The simulator doesn’t simply show info, it actually simulates a system and its processes. Storing all that data into CP variables and having that many advanced actions would be cumbersome. By using JS I just have to do something like:
load_account(customer.id);
load_transactions(current_slide, v_date);
show_info_msg(current_slide, messages.transactions_loaded, time);
… and that does the magic! I don’t even usually set actions on slide enter events. I rather do something like:
window.cpAPIEventEmitter.addEventListener(“CPAPI_SLIDEENTER”, function() {
something.my_function(my_data(current_slide));
}
I have my own naming convention for elements including the slide number:
smartshape_s1_tx_line_1
Then I can:
for(transaction in transactions){
cp.show(‘smartshape_s’+current_slide+_tx_line_+transaction.id);
}
reset_messages(); load_slide();
…and it works like a charm. My colleagues are delighted with how much the simulator feels like the real system itself.
I cannot run an advanced action from another advanced action without JS in CP. With Javascript, I can do even better than that, and I can time actions and repeat them without firing events. I can:
setInterval(function() { order_msgs(); if(action_complete){ break_interval(); reload_slide() }}, time*1000);
I can also prevent right-click on certain elements, fetch data from other sources, use localStorage and store pseudo-persistent data. There are tons of things you can only achieve with JS in CP. Sadly, CP’s docs for JS are quite scarce. I would like to know how to fire animations from JS, for example. I’ve been running tests with cp.animateItem(). I hope someday I will manage to do it, maybe without Adobe’s help.
P.S. Long post, I know. For what it’s worth…I just wanted to share my experience with CP. Best regards!
Lieve Weymeis you should post links to your blog, especially when you have a great answer to someone’s question. What the other user might be concerned about is when you attempt to try to redirect users away from that person’s post. It’s all well and good to promote your content in the community but in the comments of another person’s content isn’t very friendly.
I’m curious about this cp.animateItem() thing, as I never heard of it before. You said that you stumbled across it in some forum posts, but I couldn’t find them. Would you be able to point me to those posts; especially the one with the example you cite above: ‘cp.animateItem(“18488”,20651,true,item_tag,4);’? Thanks.
You must be logged in to post a comment.
