Using the Execute JavaScript Window

[zreichenbachcarr]

Curious if there is a simple way to attach javascipt to a Cap 5 project other than opening the standard.js and putting it in there.

I am trying to add 2 functions to a project so they will be accessable by the project at anytime. Is there a way to embed the two functions in the file or do I have to publish and then add.

Thanks for the help.

ZSRC

[Jim_Leichliter]

You have a few choices:

1.  In the .htm wrapper containing the .swf using script tags

2.  In a .js file (like the standard.js file)

I typically put my JavaScript functions in the standard.js file.  I alter the standard.js template in the Captivate install directory.  That way, all of my JS functions are available every time I publish.  Then inside of Cp, I can call my functions like:    GoToSlide(5);

Captivate doesn't care whether the JavaScript is in the .htm wrapper, in a .js file, or in the Captivate JavaScript panel.  It all gets pumped to the browser's DOM anyway.  (DOM = Document Object Model).  What DOES matter is the order of operations when getting a reference to the Captivate object.  There's a chance you could reference the Captivate object before it's actually created.  You want to make sure the .htm and .swf are done loading before you perform any action on the Captivate object.  I usually get a reference to the Captivate object on the slide entry action of the first slide of the Cp project:

var objCp = document.Captivate;

That way I know for sure that the Captivate object is loaded and ready.

HTH,

Jim Leichliter

[zreichenbachcarr]

Jim,

Thanks for the quick response. I was using the standard.js

I was really looking to see if I could add all of my functions inline in the Execute javascript script window, but it doesn't seems to liek that option. Or I should be it doesn't appear to be an option.

Thanks again for the feedback. I do like the idea of editing the "master standard.js file" That may accomplish what I need as well.

[Jim_Leichliter]

One thing to note is that Captivate's JavaScript panel will not accept comment tags like:

//This is a JavaScript comment
/*And this is
A Comment That
Spreads between
Line Breaks*/

I like to comment my code but if you do, your JS won't run.

[Twmaz]

I'm trying to do something similar but not having luck thus far.

Here's what I tried:

1. I created a button on a screen

2. I set the 'On Success' to be 'Execute JavaScript'

3. the javascript Panel has these two lines in it:

     alert("Calling showAlert...");

     showAlert("Hello World");

4. I modified standard.js to add this block of code:

       function showAlert(var alertText) {

             alert(alertText);

       }

5.  I hit F12 to publish and run the project

When I do this, I see 'Calling ShowAlert' in a pop up window but I don't see 'Hello World'

Any suggestions?

[Jim_Leichliter]

Try this:

   function showAlert(alertText) {

             alert(alertText);

       }

getting rid of the "var"

Jim Leichliter

[Twmaz]

thanks jim... still no luck.. does the same thing as noted above

[Twmaz]

Jim.. I'm thinking what MAY be going wrong is I'm editing the wrong standard.js file.. The file I am editing is in this folder:

C:\Users\Tom\Documents\My Adobe Captivate Projects\TomProject

This is the folder that my captivate file is in (called TomProject.cptx): C:\Users\Tom\Documents\My Adobe Captivate Projects

Should I be changing standard.js in a different folder or putting it somewhere else for captivate to find it?

[Twmaz]

OK.. I think I've got an idea of what is going on here:

if I make my changes to standard.js and hit 'F12'  to run the captivate project directly from captivate (F12 is the hotkey to 'run it in a web browser'), it doesn't pick up the changes in the standard.js file

But, if I hit 'Shift-F12' to republish the project, let it copy all the files over to C:\Users\Tom\Documents\My Adobe Captivate Projects\TomProject  and then re-edit the standard.js file,  save it, and then run it from the last dialog that pops up in from the publish windo (something like 'do you want to view the project now?), then it seems to work.

---------------

Is there anyway to make this process a bit more turnkey and integrated into the captivate IDE so I don't have to jump thru so many hoops each time I make a change to the java file?

Basically I'm hoping there is a way so that with just running it via F12 (running the project in a web browswer)

[Twmaz]

Another thing that seems odd:

I've created a project with the test noted above.

I do the following
1. do a full publish

2. add my extra method to standard.js:

     function showAlert(alertText) {

       alert(alertText);

    }

3. run project.htm  ... everything works fine (the Javascript code works )

4. run index.htm  ... the javascript code does NOT work

why would one work and the other not work??

[Jim_Leichliter]

There are two JavaScript API's.  One for swf/htm output and one for HTML5.  The project.htm is for swf/htm output.  The index.htm is for HTML5 output. 

If you want to have the changes carry over during F12 testing AND publishing, edit the standard.js file in the Captivate installation directory:

...\Adobe\Adobe Captivate 6 x64\Templates\Publish

Jim Leichliter

[Twmaz]

Thanks Jim.. That solved it so that F12 will run the code in the standard.js file.

So I have one question left on this thread:

I've created a project with the test noted above.

I do the following

1. I modified the standard.js file in the templates folder to add this block of code:

           function showAlert(alertText) {

                   alert(alertText);

            }

2. do a full publish

3. run project.htm ... everything works fine (the Javascript code works in standard.js )

4. run index.htm ... the javascript code in standard.js does NOT work   - (does not show me 'Hello World') but the javascript code in the captivate javascript panel does work (says 'Calling showAlert...";

why would one work and the other not work??

[Jim_Leichliter]

Good question.  The standard.js file is for the project.htm file.  The index.html file is for HTML5 content and it does not utilize the standard.js file at all.  If you want to include the standard.js file in the index.html file, you can add the following script tag in between the head tags of the index.html file:

<script src="standard.js" type="text/javascript"></script>

[Twmaz]

Jim -

Thanks again for responding so quickly..  

Your suggestion worked but I now have some follow up questions

1. when I add that line to index.html, the Javascript that is in the standard.js file starts working    but the javascript that is in the captivate-javascript panel code stops working (simple one line call alert("Calling showAlert...");) .  If I remove that line, then the reverse is true (standard.js stops working but the call to captivate-javascript panel code starts working)..  How can I get it so that they both work?

2.  I couldn't find an 'index.html' in the template folder or other adobe captivate program folders.. Is there a way I can make this change one time so that that all future projects that are published will have this change in them (similar to the way you suggested I edit the standard.js file to put our application specific javascript code)?

thanks again!

[Twmaz]

sorry Jim.. It's late here and so question #2 was a dumb one.. I found index.html in the C:\Program Files\Adobe\Adobe Captivate 6 (32 Bit)\HTML

So net, question #1 from previous entry is the only outstanding question i have on this.

[Jim_Leichliter]

I did some experimenting and I have some good news.  For HTML5 publishing, you can add your own .js files to the following location:

...\Adobe\Adobe Captivate 6 x64\HTML\assets\js

Any .js file you put in this directory will automatically be copied to your published output.  To include these files in your index.html file, open the index.html file located here:

...\Adobe\Adobe Captivate 6 x64\HTML

and add your script tag for your custom .js file (in between the head tags):

<script type='text/javascript' src='assets/js/test.js'></script>

If you're publishing SCORM content, you'll want to edit the corresponding default_HTML5.html file to include the script tag.  For SCORM 1.2, it's located here:

...\Adobe\Adobe Captivate 6 x64\Templates\Publish\SCORM\Default\1_2

This gives you the ultimate flexibility to include your own .js files and have them automatically output during publishing.  I would recommend this method vs. adding the script tag for the standard.js file.  It sounds like there's possibly a JS naming conflict with including the standard.js file in an HTML5 project.

Jim Leichliter

[Twmaz]

Thanks Jim.. I made the changes you suggested (I created an IE_Custom.js file and put it in assets/js folder.. then I added the <script type='text/javascript' src='assets/js/IE_Custom.js'></script>   line to the index.html file  (just below the other lines that were including other js files.

But I'm still getting the same behavior when running index.html.

to recap:

I've got these 2 lines in the javascript panel for the button:

     alert("Calling showAlert...");

     showAlert("Hello World");

and in my IE_Custom.js file, I've got this method:

       function showAlert(alertText) {

             alert("From JAVASCRIPT: " + alertText);

       }

----

When I run it and press the button, it  it just says 'From JAVASCRIPT Hello World"

but I don't see the 'Calling showAlert'....  I expected to see both dialogs (one right after the other)

I was thinking it may be because the 2nd dialog is covering up the first dialog and for whatever reason when I hit the OK on the 2nd dialog it is closing the first dialog as well, but that doesn't seem to be the case..

When I comment out the showAlert() method in IE_Custom.js,  I see 'Calling showAlert' but NOT the 'From Javascript...' message as expected.

Any idea why the 2 dialogs don't show up (one from javascript panel and one from javascript js file) when running in HTML5?  It works just fine when running in regular SWF mode.

[Jim_Leichliter]

Have you tried looking at this in FireFox or Chrome?  Use the developer's console in Chrome... or the FireBug extension in FF.  Are you getting any errors in the console when you click the button?

HTML5 content hijacks the alert() function and "repurposes" it so the alert will show up inside of Cp.  Using the alert() function to debug is ok... a better way would be to use console.log('your message here');

These statements show up in the FireBug or Chrome console. 

I personally use Chrome for my debugging.  You can open the Chrome console by hitting CTRL+SHIFT+J.

Once the console is open, try calling your showAlert() function... then call alert() and showAlert() in one go and see what happens in the console.

[Twmaz]

Thanks Jim -

Your comment "HTML5 content hijacks the alert() function and "repurposes" it so the alert will show up inside of Cp"

made me decide to step back and confirm what I am trying to test.. Basically I wanted to be sure I could do javascript stuff from both the Javascript panel in captivate as well as external javascript files..   That part seems to be working fine enough for me to check this box .  Whether Alerts can be called directly from the javascript panel is less important as long as I have a workaround, which I feel I do as long as I shell out to wrapper method in the external javascript file.

so net, I'm good to call this one closed .