Remove in-line JavaScript from Index.HTML output to seperate file

[davidevan]

Currently I manually strip all the JavaScript from Index.HTML files and reference one unobtrusive JavaScript file with these scripts contained in it, among others that we have as the JavaScript callbacks from our LMS.

I'm wondering if there's some way to change the master template that generates the correct index.html file in this way for us rather than having to change the output Index.html file of every presentation after the fact.

[Jim_Leichliter]

Yes, you can modify the HTML5 template located here:

• C:\Program Files\Adobe\Adobe Captivate 7 x64\HTML

If you're using SCORM with your LMS, you can modify the template here:

C:\Program Files\Adobe\Adobe Captivate 7 x64\Templates\Publish\LMS\Standard\SCORM\Default

** Note there are different folders/templates for SCORM 1.2 and 2004

To automatically include the .js file(s), you can drop them into this directory and Cp will include them in your published output as long as you're publishing HTML5 output:

C:\Program Files\Adobe\Adobe Captivate 7 x64\HTML\assets\js

[davidevan]

Thanks!

[zeitgen]

I think my question will be appropriate for the thread as well...

In captivate 6 we had the CPLibrary.js (among other files) in .\Program Files\Adobe\Adobe Captivate 6 x64\HTML\assets\js that listed the available course methods; it also went to the output of every course.

Where did it go in Captivate 7?

The Cp7 published output now contains a rather huge cp.js, which looks somewhat similar.

Does Captivate still have a 'template js' for this? I need to disable a certain method in every course, but do not obviously want to go into every cp.js to correct it manually after publishing.

[davidevan]

In general JavaScript or in-line Script should not be in HTML markup. Search "Unobtrusive JavaScript" links for examples of why and how. JavaScript files referenced by Index.html

should also be versioned to prevent caching issues as in the standard file-n.m.o version naming where n,m, and o are integer values representing major, minor and draft states respectively. Preferably there should be only one JS file referenced by all of Index.html at runtime that is minified in production for performance and security. However in development it is useful

to reference small separate .js files so these can be easily debugged with source level debugging tools.

-David

[Jim_Leichliter]

@zeitgen:  There is no template for cp.js as it is dynamically generated (and minified) when you publish.

@davidevan:  Agree that versioning would be great, and having only one reference to a minified .js file even better performance wise, but seeing that these publishing templates were outsourced to Rustici Software and not done by Adobe, I don't think we'll have much luck there.  Personally, I'm glad they're not doing this since it does make troubleshotting production issues a bit easier.

[davidevan]

Thanks Jim,

It would be useful to have a list of which published assets don’t change at run time (are common to all CP presentations) versus which are specific to each presentation.

The issue I’m having is the amount of content as we are hosting 30 or so presentations for a total of 3.24 GIG of storage. If there’s some way to create common references across presentations for assets that are shared between presentations, such as common template, stylesheets, static js, etc, that would help a lot.

-David

[Jim_Leichliter]

@davidevan:  Yes, that would be really helpful.  I would encourage you to put in a feature request to Adobe for that. 

http://www.adobe.com/go/wish

[PMC2]

Jim, is there a way to modify or change certain aspects of the cp.js with other js files? Such as changing what a tooltip says, and dynamically hiding a button during playback?

[Jim_Leichliter]

@ursitehost:  Have you looked at modifying the files in this location?:

C:\Program Files\Adobe\Adobe Captivate 7 x64\Templates\PlaybackFLA\HTML

Especially the playbarScript.js file?  This will modify the playbar for HTML5 output only. If you need to modify the playbar for SWF output, you'll need to modify the source .fla file in the Adobe installation dir.

[PMC2]

@Jim: Yes we have been there and changed the CC = "CC" to CC = "Helpdesk" and it still comes up with "Closed Caption". Which makes me think it's not reading that file anymore anyway since the tooltip is "Closed Caption" and not "CC". I did try accessing the setting from the tooltip array and did this in the playbarScript.js file:

playbar.toolTips["CC"] = "Helpdesk"

That didn't work too well as I only got an "H", but the tooltip did change. Then it was brought to my attention that it was a multidimensional array and we changed it to:

playbar.toolTips["CC"][0] = "Helpdesk"

And that worked. A co-worker of mine also stated that since Captivate has 9 languages in it by default, we could change the playbar.toolTipLocaleIndex to something other than 0-8, so just in case something was added on an update we tried a value of -1 and it forced Captivate to look at the playbarScript.js file for the tooltips. Apparently it only looks at the custom js file if the locale doesn't match up with one of it's own.

Thanks for your help Jim, I also have another question from my own thread and it involves hiding a button on the fly during playback, and showing it again at some point. Do you know of a way to access the properties of the buttons to do this?

Paul

[Jim_Leichliter]

What kind of button are we talking about?  Regular Cp button, Smartshape button, Playbar button, TOC button, Quiz button???

[davidevan]

Hi there.

May I suggest using jQuery for this purpose (it’s already referenced by the index.html that Captivate generates, but not really used in the default script)

So to hide we have $(selector).hide(), or $(selector).show(), respectively

Where selector is a document object model element identifier such as a ID or class name for an element. To use an ID use the pound symbol and write $(“#myId”).hide(). To use a class name write $(“.myClass”).hide(). More at jQuery.com and select the documentation link, and then choose selectors.

[Jim_Leichliter]

Or you could just use the built-in methods:

window.cp.show('itemName');

and

window.cp.hide('itemName');

But this method will only work for standard Cp items, not playbar buttons, TOC buttons, etc.

[PMC2]

@davidevan: We looked into that but it seems that our element (a playbar button) doesn't have an ID in the construct to use.

@Jim: Yeah, we are in the playbar. This is our situation. We have lessons that need to be watched totally without skipping ahead (requirement of our work). Now after they have watched it and want to view it again, or if they are in guest status (for review) then they are allowed to skip to the point they want to go to. So the forward button needs to go away during "Student" mode and come back when they have completed it and are viewing it for a second time, or are just using for reference. We have all the coding done for determination of status, just can't seem to get the button to hide/show on command.

[Jim_Leichliter]

I don't like to hide/show playbar buttons for aesthetic reasons.  I typically hijack them like so:

//Save current click handler for Playbar Forward Button:
var pbForwardButtonClickHandler = playbar.rootObj.btnMap.Forward.clickHandler;
//Hijack current click handler for Playar Forward Button:
playbar.rootObj.btnMap.Forward.clickHandler = function(){cp.alert('Forward Button is Disabled');};

When the Forward button is clicked, the user gets a message that the button has been disabled. 

When you want to restore the Forward button back to its original form, you can do this:

//Restore original click handler for Forward Button
playbar.rootObj.btnMap.Forward.clickHandler = pbForwardButtonClickHandler;

The code above assumes your are executing in the context of the window object... in other words, you are not placing this code inside the JS panel inside of Captivate, but rather in a separate .js file, or in the browser's debug console.

[davidevan]

Jim:

I’m thankful that you’re the voice of this level of detail Captivate development.

Do you know if Adobe’s made any progress on providing a JavaScript API guide for Captivate specifically for HTM5 output that covers this ground?

-David

[Jim_Leichliter]

@davidevan:  Adobe does not have any guide to the JavaScript API.  However, I'm in the process of putting together a video series that covers most things.

[davidevan]

Jim,

That sounds awesome! Let me know!

Also, a quick thing: looking for a way to left and top justify an HTML5 output presentation in an iFrame.

-David

[Jim_Leichliter]

@davidevan:  Not sure off hand... but it's definitely a css modification.  Have you looked at the captivate.css file?

[PMC2]

@Jim:

I think we got the asthetics out of the way. From what you guys told us we found a way to remove the button without anything changing or shifting.

$(".playbarSmallButton[title='Forward']").css({"visibility":"hidden"});

That removes the button as we needed and also just leaves a blank spot instead of shifting.

Now, with that said, we are now back to the changing of the tooltip for the CC button which is now a "?", to "Helpdesk".

We have a way to do it that works, but we are concerned that Captivate doesn't look at our tooltips in the playbarScript.js before using all the inbred versions. Is there a way to set it to look for ours other than what we are doing, in case we need to change another button tooltip?

We also need to add the current slide/total slides to the playbar...

[Jim_Leichliter]

@ursitehost:  Wow!  Nice work!  Love the way you added the css to the selector.  So for others reading the post:

//Hide Forward Button (buttons will not shift)
$(".playbarSmallButton[title='Forward ']").css({"visibility":"hidden"});
//Show Forward Button (buttons will not shift)
$(".playbarSmallButton[title='Forward ']").css({"visibility":""});

The tooltips are a bit confusing and I can only get them to change when the project is rewound.

You have the following JS objects:

//used to change the default language for the playbar tooltips

playbar.toolTipLocaleIndex

playbar.movieProperties.playBarProperties.locale

//tooltips themselves

playbarTooltips

playbar.toolTips

Changes to the playbarScript.js file does not update the playbar (although you think it would).  After some digging, I found that you can change the tooltip in the CpPlaybar.js file (Starting at line 43).  This file can be found in the .../assets/js folder of the published output .  Changing this file does change the tooltips!  Sadly, this file is dynamically generated when you publish... meaning there's no install template (that I can discern) where you can make it a permanent change.

[PMC2]

@Jim:

Thanks for the information, I will give those a try and see what happens. One correction, there is no space after the title name in those calls. It will break if you use a space.

[Jim_Leichliter]

@ursitehost:  Funny... it breaks if I don't use a space... maybe my install is different?

[PMC2]

@Jim

Actually, it is finicky as to how you do the tooltips with my situation. If I set the locale in the playbarScript.js file we have to remove the space and it works. If I don't put the locale line in I have to add the space back. There is some connection to the locale selection as to how that can be called. I need to research some more on that connection. So for those reading this, if at first you don't succeed, do the opposite and it may work, lol.

It would be nice if Captivate had a toggle that we could set to actually look in the custom tooltips in the playbarScript.js like it did in version 6. That's how I changed it then. Once they changed to 7 everything got complicated and less in our control. That's all I need now is some way to tell Captivate where to look instead of it thinking it knows best, hehe.

Thanks again Jim, your insights have sparked a lot of success here.

Message was edited by: ursitehost