Highlighted

How to Execute javascript in Specific Frame of the Timeline?

Explorer ,
Oct 31, 2018

Copy link to clipboard

Copied

It was my reason to leave "Articulate Storyline" and buy "Adobe Captivate" but Adobe as always disappointed me again ... Because I can't find a way to do this :

I have a blank slide in adobe captivate 2019, Just a Blank Slide... Ok ... Now the question is: How can I execute a javascript code at frame "90" for example ...

I want to tell to timeline to execute a javascript code at frame 90 ...

Any Idea is Extremely appreciated.

Can't test your project as I'm sitting behind company firewalls, blocking downloads such as your project file.

However, I noticed I had a little typo up there. Sorry for that. It's actually:

window.cpAPIEventEmitter.addEventListener("CPAPI_VARIABLEVALUECHANGED",function(){cp.clickHandler(yourInterativeObject);},"cpInfoCurrentFrame");

...without [Space] between 'click' and 'Handler'. That might have been it. Sure works for me.

Topics

Advanced, Advanced actions, Quizzing and LMS

Views

1.3K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to Execute javascript in Specific Frame of the Timeline?

Explorer ,
Oct 31, 2018

Copy link to clipboard

Copied

It was my reason to leave "Articulate Storyline" and buy "Adobe Captivate" but Adobe as always disappointed me again ... Because I can't find a way to do this :

I have a blank slide in adobe captivate 2019, Just a Blank Slide... Ok ... Now the question is: How can I execute a javascript code at frame "90" for example ...

I want to tell to timeline to execute a javascript code at frame 90 ...

Any Idea is Extremely appreciated.

Can't test your project as I'm sitting behind company firewalls, blocking downloads such as your project file.

However, I noticed I had a little typo up there. Sorry for that. It's actually:

window.cpAPIEventEmitter.addEventListener("CPAPI_VARIABLEVALUECHANGED",function(){cp.clickHandler(yourInterativeObject);},"cpInfoCurrentFrame");

...without [Space] between 'click' and 'Handler'. That might have been it. Sure works for me.

Topics

Advanced, Advanced actions, Quizzing and LMS

Views

1.3K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Most Valuable Participant ,
Oct 31, 2018

Copy link to clipboard

Copied

I am not a JS expert, but this is perfectly possible with Advanced or Shared actions which are converted to JS on runtime, so it iwould be easy with JS as well.  You can use the system variable cpQuizInfoCurrentFrame.  There is a command 'Delay next actions by....'. which I use if I trigger an action with the On Enter event of a slide.

There are several JS experts around here, but most of them still asleep I suspect.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Engaged ,
Oct 31, 2018

Copy link to clipboard

Copied

Hi Lilybiri,

I'd be curious to learn how you would do this with Advanced or Shared Actions only, since there is no event to trigger them at frame 90. 'Delay next action by...' on Slide Enter is not really the same, because it would fire no matter what, even if the slide had been paused between Slide Enter and Frame 90 or some navigation in between skipped frame 90 altogether.

I thought the only way would be to setup an event listener via cpAPIEventEmitter and have it listen to cpInfoCurrentFrame variable.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Most Valuable Participant ,
Oct 31, 2018

Copy link to clipboard

Copied

That is true, I didn't explain the whole workflow and I am well aware of the fact that Delay next actions has its limitations like the ones you point out.  I told the OP to wait for a JS expert, didn't try to explain all my tricks since he/she clearly wants to use JS. I pointed at the firtst place to the system variable as you could read. There used to be a SWF widget by Jim Leichliter which did allow to fire an action based on an exact time on the slide in the past. This is clearly a JS use case now.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Oct 31, 2018

Copy link to clipboard

Copied

Dear Lilybiri and Gaanf... Thank you for your comments. I know there is no way to do such thing using Captivate alone, except using JS.and I'll wait for a JS expert.

Something that I don't know and I can't understand is, why in 2018, there is no Multimedia Authoring Program on Earth that can handle Cue points or Bookmarks in the right way ... More than one thousand engineers at Adobe worked on a program that can not do something interactive in a specific time of a movie... Captivate and Storyline seems to be more likely a video editing tool not Authoring tools ...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Engaged ,
Oct 31, 2018

Copy link to clipboard

Copied

As far as I remember from having toyed around with Storyline during a 30 Days Trial Period some time ago, Storyline was perfectly able to fire an action from cue points in the timeline.

Anyway, Captivate doesn't do this through UI, but as indicated above there's still a way by utilizing the Captivate JavaScript API:

  • Create an Advanced Action like the one shown below. 'Your Action here' is whatever you want to happen on Frame 90 (sticking to your example).

myFrame90Action.png

  • Create an interactive object somewhere on the slide (Button, ButtonShape, ClickBox), give it a meaningful name, hide it from the output (so your learner doesn't see it/ click it), and assign your Advanced Action to it .
  • Run the following line of code from the JavaScript Script Window on Slide Enter of the slide where you want the timeline to trigger the action (make sure, 'Current' is selected in the DropDown):

    window.cpAPIEventEmitter.addEventListener("CPAPI_VARIABLEVALUECHANGED",function(){cp.clickHandler(yourInerativeObject);},"cpInfoCurrentFrame");

    ..., replacing 'yourInteractivObject' with the name of the hidden object you created.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Oct 31, 2018

Copy link to clipboard

Copied

Thank you Gaanf....

But Still, it doesn't work...

I've done every step as you said...

I Attached my captivate file here:

https://we.tl/t-m5VkppkUdi

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Engaged ,
Oct 31, 2018

Copy link to clipboard

Copied

Can't test your project as I'm sitting behind company firewalls, blocking downloads such as your project file.

However, I noticed I had a little typo up there. Sorry for that. It's actually:

window.cpAPIEventEmitter.addEventListener("CPAPI_VARIABLEVALUECHANGED",function(){cp.clickHandler(yourInterativeObject);},"cpInfoCurrentFrame");

...without [Space] between 'click' and 'Handler'. That might have been it. Sure works for me.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Engaged ,
Oct 31, 2018

Copy link to clipboard

Copied

Seems that either copying to or copying from this forum here adds the Space because the line wraps there. It's back although I deleted it. Never mind, just make sure you delete it in Captivate's Script Window.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Most Valuable Participant ,
Oct 31, 2018

Copy link to clipboard

Copied

Sorry, but I think there is some misunderstanding. Captivate is an eLearning authoring tool. To me that means as much interactivity as possible which can be perfectly done without having to do something on a specific frame. There are many ways to give control to the user by pausing the timeline, using the events provided. I rarely feel the need to fire something on a specific frame at all. Maybe you can have a look at this well-visited blog post:

http://blog.lilybiri.com/pausing-captivates-timeline

If you only want an interactive video, use the bookmarks which you can add easily on the new interactive video feature. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Oct 31, 2018

Copy link to clipboard

Copied

I think a lot of people out there do not agree with your idea of "....perfectly done without having to do something on a specific frame."

Source: just Google This: Storyline How to Jump to a specific point on the timeline?

The problem is that Storyline was perfectly able to fire an action from cue points in the timeline. But it never could jump to any of those cue points. That costs a lot for our creativity. On the other hand, Captivate was capable of jumping to bookmarks but was not able to fire actions from them... And now it's Possible Thanks to Gaanf...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Engaged ,
Oct 31, 2018

Copy link to clipboard

Copied

Thanks, but it's not as though I 'invented' that.

Have a look here:Learn about the Common JavaScript interface for Adobe Captivate.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Most Valuable Participant ,
Oct 31, 2018

Copy link to clipboard

Copied

@Gaanf  Thanks! That API and the help text was created by that same Adobe team that doesn't even think about it. Sorry for that bitter note, but I don't like users ot launch insults when they don't even know the product in depth.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Oct 31, 2018

Copy link to clipboard

Copied

So, please tell those geniuses at Adobe team that we didn't pay for a software that CAN NOT do simple tasks relying on itself.

We paid because we didn't want to learn JavaScript. We paid because we didn't want to hire a programmer. We paid because we didn't want to search around finding codes. We paid because we didn't want to post forums requesting codes and "waiting for a JS expert" who may take pity on us providing codes to do such simple things "That is first building blocks of creating interactive videos" and wasting too much time and effort to use them later in our projects.  Now I should waste a lot of time copying pasting codes each time firing hundreds of actions and being careful not to confuse with them...

And I don't know why you deny that is a deficiency...

That is a deficiency not because you are unable to understand why it is...It is a deficiency because a customer and more, people admit it is a deficiency. Both in Storyline and Captivate...

And yes before I posted this thread ... I Googled every possible way... I've been on that webpage too,  but just like You "who know the product in depth", I wasn't able to get a result because as you said: "Most of JS Experts Were Asleep!"

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Most Valuable Participant ,
Oct 31, 2018

Copy link to clipboard

Copied

I asked you 'why do you need to execute a script on a specific frame' without getting an answer.

As a consultant I helped out a lot of Captivate users and I only needed to use JS in perhaps 1 out of 100 courses. Reason: I know Captivate rather well.... I didn't have to learn JS, do not know why you think you have to do so.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Oct 31, 2018

Copy link to clipboard

Copied

I left Storyline while it has more interesting features, interactions, and more comfortable workflow than Captivate, But Storyline was not able to jump to specific cue points...

So it is useless if you want to create Complex Interactive videos ... You can pause at a specific frame and fire an action there, but you haven't any control on the video itself... For example, if the user is incorrect, You can not take him/her one step back in the video or etc, and it's been about 5 years people requesting this feature with no luck...

I Chose to move to Captivate because it's new feature "Interactive Videos" ... I should execute more than 10 JavaScripts for doing Voice Recognition in between my voice overs inside each overlay slide ... for ESL teaching purposes ...

And I'm Really Sorry if You Thought Any Insult Happens... Because I didn't mean it... But Still, I think It is a deficiency and I think Captivate has not many features to learn in-depth...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Most Valuable Participant ,
Oct 31, 2018

Copy link to clipboard

Copied

In my mind you are still confuing interactive video with real interactive courses. This discussion makes no sense becaus we are talking about totally different goals.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Oct 31, 2018

Copy link to clipboard

Copied

Have a good day Lilybiri....

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Oct 31, 2018

Copy link to clipboard

Copied

@Gaanf Thank you for your Completely Correct Answer...

Adobe Should be Thankful for creative experts like you that solve problems of their software they never even think of...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Oct 31, 2018

Copy link to clipboard

Copied

It would be much simpler to just execute the JavaScript in the function of the event listener. You don't need a button or an advanced action:

window.cpAPIEventEmitter.addEventListener("CPAPI_VARIABLEVALUECHANGED",function(){

if(window.cpInfoCurrentFrame === 90 )

{

//execute your script here.

}

},"cpInfoCurrentFrame");

or just use a setTimeout on slide enter:

setTimeout( function(){ your code here };, 3000);

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Oct 31, 2018

Copy link to clipboard

Copied

Wow...Thanks, I Think I'll Use your Code...It's a lot simpler...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Oct 31, 2018

Copy link to clipboard

Copied

Just wanted to add that I have been using eLearning development tools since 1997, started with Authorware 3, Toolbook, Flash etc.

All of these tools eventually opened up scripting windows so the user could have much more flexibility. Every program has it unique features, but none of them can account for every use case.

We use the best tool for the job, which is Captivate 90% of the time.

Since I'm fairly adept at HTML, JavaScript and CSS, I can write code to make Captivate do just about anything our Designers can think of, and if not, I write HTML pages in insert as HTML5 animations. Drag and Drops and animation are the biggest reasons for this.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Nov 01, 2018

Copy link to clipboard

Copied

I don't know why your code doesn't work with my advanced action ... 

I'm afraid if this is a Captivate bug, but not sure about that...

Here is Screen Shot of my simple project :

Base.png

And these are my decisions that construct "reza" script :

1.png

First three actions calculate the exact frame of second 2 of the slide, and save that frame number to "exactFrame" variable.

Then thanks to your code it executes the Script_Window right at second 2 of the timeline.

in Script_Window I have a JavaScript to change the value of my variable named "SpeechReceived" and also it pauses the timeline

using this code in JS window :

window.cpAPIEventEmitter.addEventListener("CPAPI_VARIABLEVALUECHANGED",function(){

if(window.cpInfoCurrentFrame === window.exactFrame)

{

  cp.movie.pause(cp.ReasonForPause.CPCMNDPAUSE);

    speechResult = "hello";

    window.cpAPIInterface.setVariableValue("SpeechReceived",speechResult);

}

},"cpInfoCurrentFrame");

"cpInfoCurrentFrame");

Now please look at my last decision :

2.png

I want to continue my paused timeline whenever "SpeechReceived" is equal to "hello" but here is the problem : although my variable "SpeechReceived" changes to "hello" nothing happens ... it seems that while loop doesn't work and something goes wrong here...

Any Idea how to fix that bug....

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Engaged ,
Nov 13, 2018

Copy link to clipboard

Copied

Probably too late to be of much use to you but...

I had problems getting 'is equal to' to work on comparing text strings in the past. Seems it's more for comparing numbers. Try 'contains' instead.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Most Valuable Participant ,
Nov 13, 2018

Copy link to clipboard

Copied

@Gaanf  Can you give some examples? I only use 'contain' when it is appropriate, both for strings and numbers.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Gaanf LATEST
Engaged ,
Nov 13, 2018

Copy link to clipboard

Copied

No, unfortunately I don't have any example at hand right now. But I had issues when checking for exact matches of text strings on several occasions in the past. Not sure now - it might have been when comparing one variable holding text with another holding text. 'is equal to' wouldn't evaluate to true,while ' contains' would.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Captivate User Guide
New Group