Developing HTML/Javascript Content for Use In Connect Pro

  
1 Votes

This document serves to describe a prototype that was developed to allow HTML/Javascript-based content to launch and track in Adobe Acrobat Connect Pro (Connect Pro).  This prototype allows developers to include JS files into any HTML/Javascript-based content and call some simple methods to retrieve or send data to Connect Pro. 

This prototype was developed in conjunction with the SCORM-to-Connect prototype that is available and downloadable separately.  The primary files “ConnectAICC.js” and “ConnectCommon.js” described in this document are shared in the SCORM-to-Connect prototype and can potentially be used for other content communication with Connect Pro.

This is a prototype, simply because there are many ways to communicate with Connect Pro using HTML/Javascript-based content.  This includes, though not exclusively:  Java, HTTP-POST through Forms, Server-side scripts (e.g. ASP, JSP, CGI, etc) and even Flash.  In addition to this HTML/Javascript prototype, there are a series of other articles written for different types of content.  Please review the different articles and examples, based on the content tool(s) being used to develop content.  These prototypes might provide the functionality required “as-is” for your needs or give you information on how to develop your own tracking mechanism.

The HTML/Javascript-to-Connect prototype (HJ2C prototype, or HJ2C) follows the requirements of content, in general, for use in Connect Pro.  Content that is imported into Connect Pro needs to be a single Assignable Unit (AU), or in the case of SCORM, a single Shareable Content Object (SCO).  Connect Pro does not import content that contains multiple AU’s in a single package.  Connect Pro includes support for Curriculums, which allows you to create the same effect.  However, the content needs to be separated into individual AU files at import into the Content tab.

Requirements

• Text / HTML Editor (Dreamweaver, Notepad, TextPad, emacs, etc)
• Familiarity with HTML/Javascript is recommended
• Adobe Acrobat Connect Pro account
• Sample Files associated with this document are available for download (briefly described in the Sample Files section, below).  These files may be compressed in .zip format and may require you to install an extraction program such as 7-Zip available from http://www.7-zip.com.

• HTML to Connect – Prototype (ZIP, 38KB)
• HMTL to Connect – Sample: Single Page Example 1 (ZIP, 38KB)
• HMTL to Connect – Sample: Single Page Example 2 (ZIP, 10KB)
• HTML to Connect – Sample: Multiple Page Example 1 (ZIP, 105KB)
• HTML to Connect – Sample: Multiple Page Example 2 (ZIP, 388KB)
• HTML to Connect – Walkthrough (HTM/SWF, 5.78MB)

 

Overview

This prototype provides two files “ConnectAICC.js” and “ConnectCommon.js” (Connect JS files) which perform the communication with Connect Pro to send/retrieve data.  An additional file “ConnectSCORM.js” is provided in an attempt to communicate with SCORM 1.2 and SCORM 2004 LMSs.

Note: Communication with an LMS other than Connect Pro, might be an additional benefit, though not the focus of this prototype.  The examples provided in this article have been created for Connect Pro, though they may also launch and track against third-party LMSs.

Typically communication occurs at least twice when communicating with an LMS, such as Connect Pro; once in the beginning (to retrieve data) and at least once at the end (to send data).  Content can send data a lot more often to Connect Pro, based on individual needs and requirements. 

The type and format of data that can be sent to Connect Pro follows the AICC-HACP standard.  The type of data includes:

• Retrieving general data from Connect Pro, such as location (bookmarking data), status (incomplete, completed, passed, failed), score and time.  This is known, in AICC command terminology as “GetParam”
• Sending general data to Connect Pro such as location, status, score and time.  This is known, in AICC command terminology as “PutParam”
• Sending interaction-specific data to Connect Pro, such as an ID to identify the interaction, the type of interaction, latency (how long it took to answer the question), whether the learner answered the question properly, etc.  This is known, in AICC command terminology as “PutInteractions”
• Terminate the communication with Connect Pro (though this is NOT necessary for tracking to work properly with Connect Pro).  This is known, in AICC command terminology as “ExitAU”

 

Using this prototype, developers only need to know to use the Connect JS files to integrate any Javascript-based content with Connect Pro.  This document does not provide an overview of the LMS standards such as AICC.   For a better understanding of the LMS standards, please review:

• AICC Website: http://www.aicc.org
• Creating AICC content for Connect Pro: http://www.adobe.com/resources/breeze/training/articles/aicc_compliant.html
• ADL Website (for SCORM): http://www.adlnet.org
• Letsi Website (for next generation SCORM): http://www.letsi.org

 

Because the prototype is JavaScript-based – which is interpreted by the browsers – it has restrictions from the browsers.  In general, browsers do not allow cross-domain communication (though there are workarounds that could be employed).  This prototype is therefore only supported when the content resides on the same domain as the Connect Pro server.  If you use the Content tab to import this content into Connect Pro – you will be able to launch and track the content into Connect Pro.  If you expect to store the content on any other server; or have the content stored on the Connect Pro servers and launched/tracked from another LMS, this is not supported.

Using the HTML/Javascript-to-Connect Prototype

The HJ2C prototype is a Javascript file that uses the LMS standards to communicate with Connect Pro.  The HJ2C provides a set of methods and properties that Javascript developers use to communicate data with Connect Pro. 

To use the HJ2C prototype, you simply need to perform a few steps:

• Extract the contents of the prototype into a folder
• Load the Connect JS files
• Use the methods of the Connect JS files to communicate data with Connect Pro
• Compress (zip) the root files of the content that uses this prototype
• Import resulting zip file into the Content tab of Connect Pro

Loading Connect JS files

In order to be used, the Connect JS files need to be loaded into any HTM/JS file(s) that want to communicate with Connect Pro.  The Connect JS files are loaded using the standard script tags:

<script src=”scripts/ConnectCommon.js”> </script>
<script src=”scripts/ConnectAICC.js”> </script>

Note:  In the line above, the Connect JS files are found in the sub-folder called “scripts”, as provided in the prototype and example files.  Where you place and subsequently load the Connect JS files are based on your folder structure and coding preference.

The examples and prototypes actually attempt to load the Connect JS files using a bit more complex code, to attempt to communicate with Connect, or any AICC or SCORM-compliant LMS:

<script src="scripts/ConnectCommon.js"> </script>
<script type="text/javascript">
     function loadJSFile(file_str)
     {
          document.write('<script src="', file_str, '" type="text/JavaScript"><\/script>');
     }
     var isAICC_bln = isAICCwindow(window);
     if(isAICC_bln)
     {
          loadJSFile("scripts/ConnectAICC.js");
     } else {
          loadJSFile("scripts/ConnectSCORM.js");
     }
</script>

After the Connect JS files are loaded, they are used to initialize communication with Connect Pro and retrieve data (using the GetParam Command).  The HJ2C is typically loaded before the content files are displayed to the learner.  Once loaded (and initialized) the properties and methods are available to display / use data from Connect Pro and send data to Connect Pro. 

The HJ2C is typically loaded before the first content file is displayed, because the content might want to know if the learner has launched this content before.  If the learner has launched this content before, there may be “state data” or information that indicates where the learner left off; what sections were completed or pages viewed; how they answered individual questions, etc.  When a learner launches the content for the first time, the content is expected to start at the beginning.  On subsequent launches, the learner may expect to be returned to the location they left off in their last previous attempt.  Of course, there may be other rules determined by need and requirements that determine where a learner leaves off; so if perhaps a learner leaves in the middle of a quiz, they are returned to the beginning of the quiz and not in the middle or the question they left off. 

After the HJ2C prototype is loaded, it is recommended that the AICC parameters are validated.  The AICC parameters are passed to the launch file when the content is opened from Connect Pro as a learner in either the Content or Training tabs.  When the AICC parameters are validated, the content would typically call an HJ2C command to get data from Connect Pro and wait for a valid response, before continuing.

Waiting for a response

The AICC-HACP standard uses an HTTP-POST to communicate data with Connect Pro.  The implementation of the HTTP-POST in the HJ2C doesn’t return a response immediately.  For example, the method getTrackingData() in the HJ2C starts the process to request a GetParam to Connect Pro.  However, this code would not return any data, such that (in the example below, data_var does not contain the response from Connect Pro):

Var data_var = getTrackingData();

The method getTrackingData issues an HTTP-POST to Connect Pro, a response has to be returned and then the response has to be parsed.  The code to call getTrackingData() and wait for a response is made to the initialize function of the Connect JS files and referenced in the index.htm file found in the root of all the  example files.  A simplified snippet is provided and explained here:

// AEC: Change reference to file to load from content here
var windowContent_str = "content/content.htm";

// AEC: Set whether to send score as a percentage (overrides the value set in AICCtoConnect.js)
setLMSScoreAsPercent(true);

// AEC: Set whether to warn when tracking is disabled (this is not related to debugging option)
setWarnWhenNoTracking(true);

// AEC: Set debugging option here (overrides the value set in AICCtoConnect.js)
setDebug(false);

// Bulk of loading code is here
initialize(3, 'launchContent', this, windowContent_str);

// Custom Methods for Index.htm (CUSTOM CONTENT METHODS)
function launchContent(url_str)
{
     window.navigation.location.href = url_str;
}

Note:  The SCORM standard has a similar issue where we have to search for the SCORM API and have to wait to communicate with it, until it is found.

The code in the root index.htm file is very simplified from earlier versions of this prototype.  This snippet above attempts to communicate with Connect Pro and retrieve data.  Assuming the data is retrieved and parsed, the content (set by windowContent_str) is then launched (by calling the custom launchContent method) and the methods of the prototype available for use.

The initialize method accepts a number of parameters:

Parameter	Description
waitForData_int	Number (integer) of seconds to wait for the Data to load.  When this timeout limit has reached, can call a method (waitForData_str).
waitForData_str	Name (string) of the function or method to call when the data has been loaded (isInitialized() ==true) or hasn’t been loaded and the timeout limit reached (isInitialized() == false).
waitForData_obj	Reference to the Window or Object that contains the function to call when the data has been loaded.
waitForDataParam1_str	Optional parameter to pass the name of the function to call when the data has been loaded.

In the example, above, the initialize method is called with:

initialize(3, 'launchContent', this, windowContent_str);

In this case, the code attempts to wait for the data to load from Connect Pro for up to three seconds.  If the data is loaded; or the time limit (of 3 seconds) has expired, then the launchContent is called with the windowContent_str parameter.

Another example might be to parse the data that is returned from Connect Pro:

var userID_str = ’’;
var userName_str = ’’;
var userStatus_str = ’’;
var userScore_int = 0;
var userLocation_str = ’’;
var userData_var = ’’;

// AEC: Change reference to file to load from content here
var windowContent_str = "content/content.htm";

// AEC: Start loading data from Connect
initialize(3, parseDataFromLMS, this, windowContent_str);

// AEC: Custom (Define custom methods for content here)
function parseDataFromLMS(url_str)
{
     if(isInitialized())
     {
          userName_str = getStudentName();
          userID_str = getStudentID();
          userStatus_str = getLessonStatus();
          userLocation_str = getLessonLocation();
          userScore_int = Number(getScore());
          userData_var = getLessonData();
     }

     // Show content from this point
     window.content.location.href=url_str;
}

 

Not all methods in the prototype require a polling mechanism to wait for a response with Connect Pro.  Only the methods that actually perform an HTTP-POST may require a mechanism to wait for a response.  The following methods in the prototype, which are explained later in this document, initiate an HTTP-POST:

getTrackingData();
sendTrackingData();
sendInteractionData();
sendExitData();

In the example files provided, only two of these methods utilize the waiting mechanism:

getTrackingData

and

sendExitData

These methods require a mechanism to wait for a response, because we need to know the response is completed in the beginning (when getTrackingData is called), before the content is launched and at the end (when sendExitData is called), before attempting to close the browser window. 

 

Methods

This section covers some of the methods available in HJ2C prototype.  It might not cover all of them, because some are used for internal purposes.  However, it will attempt to describe the most common methods used by the example files.

There are two major types of methods: Get and Set methods.  The bulk of the Get methods return specific information from the LMS.  The Set functions send data to the LMS. 

The method

getTrackingData()

is used to actually perform an HTTP-POST to the Connect Pro server to retrieve all of the data at once.  Once it has successfully received a response, the HJ2C parses the response and updates the properties (not necessarily exposed in this document) with the data from Connect Pro.  When it is finished parsing and updating, isInitialized() returns true.  This makes the rest of the Get methods available for use, without directly communicating with Connect Pro, such that calling:

var myStudentID = getStudentID();

would set the variable myStudentID with the value of the Student ID from the LMS.

Similarly, most of the set methods do not update the LMS with the data.  They are stored locally until one of the following methods is executed:

sendTrackingData();
flush()
finish();

The explanation of these methods is found in the chart, below:

Tracking Methods

Method	Parameters	Description
initialize	None	Used to determine if an LMS such as Connect Pro is available.  Note: If the AICC parameters are not available and the SCORM API can not be found, isInitialized will return false. initialize issues the getTrackingData method and initiates a polling mechanism to wait for a response.  To execute a method when the polling is completed, set the waitForData properties prior to calling initialize.
isInitialized	None	It is used to determine whether the LMS is initialized.  Returns: Boolean (one of: undefined, true, or false).
isTrackingDataLoaded	None	Used to determine whether the tracking object has communicated with the LMS and retrieved all of the tracking data. Returns: Boolean (one of: undefined, true, or false).
getLessonLocation	None	Lesson Location as stored by the LMS. Returns: String (Note: If your code depends on an integer or array or other datatype, an explicit conversion may be required).
getLessonStatus	None	Status as stored by the LMS. Returns: String
getScore	Boolean	Score as stored by the LMS. Returns: String (since it may be in format of “raw, max, min”).
getTimeInSession	None	Time spent as stored by the LMS. Returns: String (HH:MM:SS)
getStudentID	None	Student ID as sent by the LMS. Returns: String
getStudentName	None	Student name as sent by the LMS. Returns: String
getLessonData	None	Used to retrieve “resume” or “lesson” data from the LMS, as sent by the content in previous sessions.  This is typically used to retrieve state data. Returns: String
setLessonLocation	String	Set’s the location where the learner is currently.
setLessonStatus	String	Set’s the learner’s status.  Should be one of: “incomplete”, “completed”, “passed” or “failed” (all lower-case).
setScore	Integer (Raw Score), Integer (Minimum Score), Integer (Maximim Score)	Set’s the learner’s score.  Use the optional Min and Max fields if necessary (and the LMS supports them).
setTime	String (HH:MM:SS)	Formatted time.  This parameter isn’t necessary, as the TrackingSWF will determine the time automatically.  Use this to override the timer.
setLessonData	String	Send data t store in the LMS.  This can be as much as a blob-field or whever the LMS can store for this field.
flush	None	Flushes or forces data to be sent to the LMS.  Each of the calls above won’t immediately send the data to the LMS, unless flush or finish is called.
finish	None	Flushes or forces data to be sent to the LMS, but also terminates the relationship with the LMS.
sendTrackingData	Integer (Raw Score), Integer (Min Score), Integer (Max Score), Boolean (Score As Percent), String (Location), String (Completion Status), String (Success Status), Boolean (Status Preference), String (Time In Session), String (Resume Data) Note: Parameters are optional, assuming the individual values have been set (e.g. setLessonLocation()).	This method sends the tracking data to the LMS, as based on the current values of the appropriate data.  The data can be set using the “set” methods in this prototype, or by passing as optional parameters to this method. For example, calling: setScore(25); sendTrackingData(); has the same effect as calling sendTrackingData(25,0,100…); Score As Percent indicates whether to send score to Connect Pro as a percent (e.g. “25”) or Raw,Min,Max (e.g. “1,0,4”). Status Preference determines whether to send score as a completion (incomplete/completed) or success (passed/failed). Resume Data is the same as Lesson Data description, above.
sendInteractionData	String (Interaction ID), String (Objective ID), String (Interaction Type), String (Correct Response), String (Student Response), String (Result), Integer (Question Weight), String (Latency), String (Date), String (Time)	Sends interaction data data to the LMS. This simply tells the LMS how the learner answered individual questions.  sendInteractionData not only updates the interaction array, but sends the data to the LMS.  A corresponding method “setInteractionData” only updates the interaction array. InteractionID is a unique identifier for each question.  Objective ID can be sent as 0 if you aren’t tracking objectives in the LMS.  Type is the type of interaction and should be one of:  true-false, choice, fill-in, matching, performance, sequencing, likert, numeric. Responses are how the learner answered the question. Result is either “correct” or ‘wrong”. Weight is the relative importance of the question (typically 1). Latency is the time in seconds the learner took to answer the question. Date and Time are determined and formatted for you, so pass empty or null strings.
sendExitData	None	Terminates relationship with LMS (by calling the AICC “ExitAU” command).

 

The following methods are used by some of the methods that are called for typical tracking.  They may be useful for other purposes:

Additional Methods

Method	Parameters	Description
getParameter	String (Search String), String (Name to search for), String (Optional; Delimiter of values in Search String)	Searches the Search String for a name/value pair (e.g. Name=Value) and returns the value. The optional delimiter is a single value or comma-delimited value of delimiters that could be found in the string.  Returns: String (value if found)
waitForData	None	Used to determine when the tracking data has been returned from Connect Pro.  This is typically used in the beginning of the file (and is executed when initialize is called) – after getTrackingData is called and while waiting for the data to be returned from Connect Pro, before attempting to parse the data or launch the content.  This method doesn’t have any parameters, but it does use properties such as waitForData_str, defined in the Additional Properties section, above.
waitForEmptyQueue	None	Used to determine when the tracking queue is empty.  This is typically used when an exit button is clicked in the content – to send data to Connect Pro and then wait for the queue to be empty before attempting to close the browser window or otherwise end the content. This method doesn’t have any parameters, but it does use properties such as queueInterval_str, defined in the Additional Properties section, above
setBrowserClosed	None	Attempts to close the browser.  Uses various mechanisms based on whether it’s IE6 (or earlier), IE7 and Mozilla-based browsers.  Called by exitLMS method. To override behavior create a custom method called ‘setBrowserClosed’ in the root index.htm file (or modify the behavior of the setBrowserClosed method in the ConnectCommon.js
onBrowserClose	None	Set’s behavior of the content when the browser is closing.  Typically called on the onClose event of the browser window.
exitLMS	None	Sends exit data to Connect Pro and then waits for the tracking queue to empty, before calling setBrowserClosed method.
trim	String	Removes any leading and trailing spaces in string.  Typically used when parsing strings.
findParentWindow	Object (window)	Returns the top parent window.  Typically used to find the AICC parameters, or the top window so it can be closed.

Prototype Files

The prototype is a relatively simple solution and is also relatively easy to use.  You really don’t need to use the file structure or the files “as-is”.  You can certainly incorporate the Connect JS files into your own directory structure and load them (or otherwise use the methods of the HJ2C) into your own content.  However, the prototype can certainly be used simply by taking the directory / file structure and copying your content into the “content” folder and referencing your files/methods as explained below (and in the Walkthrough in the Sample Files section).  Here is the file structure of the prototype:

• index.htm (File)
• scripts (Folder)
• flash (Folder)
• content (Folder)

 

Index.htm
The index.htm file is the launch file.  It needs to be in the root of the file set and needs to be in the root of the resulting compressed file (discussed later).  Index.htm provides a basic framework where initially a “loading” screen appears and then later the HTML-based content.  Index.htm can be used “as-is” or can be incorporated into your own launch file.  If used “as-is”, the content simply needs to be copied to the “content” folder and referenced in a single line in the Index.htm file.

Scripts
This folder contains the prototype code as well as some other basic HTM/JS files.  It provides the communication mechanism to send/retrieve data from Connect Pro.  The files contained in this folder may actually be used in any AICC or SCORM-compliant LMS, though they have only been tested for Adobe Connect Pro.  The files provided in this folder are utilized by the HTML/Javascript-based content to communicate data to Connect Pro.

Flash
This folder is used to store the Flash-based assets used by the prototype.  At the current time, the only Flash file is a “loading.swf” file which displays a loading bar.  This loading file is displayed in the beginning of the prototype when it is launched from Connect Pro.  It displays until the data is retrieved from Connect Pro and stored in local variables.  You can certainly customize this loading file, by creating your own Flash-based file and calling it “loading.swf” and placing in this folder

Content
This folder stores your HTML/Javascript-based content.  Simply copy your content into this folder “as-is”.  You should take note of the file that is used to launch your specific content.  The HTML/Javascript-based launch file needs to be referenced in the index.htm file found in the root of this HTML/Javascript-to-Connect prototype.

 

Importing content into Connect Pro

If you are importing a single content file (e.g. PDF, HTM, etc) the file can either be imported individually or compressed in zip format.  This section only pertains to multiple file courses which are to be imported into Connect Pro.

Importing content into Connect Pro is documented in many places, including here:  http://help.adobe.com/en_US/AcrobatConnectPro/7.0/WS76BDB2C9-24A2-4d4d-B8C2-EAE1A26603F4.html#WSDF93E779-D109-4d12-A66D-29FAC2F03B6B.  There is more information available on importing content into Connect Pro, including documentation written by me, which can be searched in Adobe.com or the web in general.

To create a valid zip file for importing into Connect Pro, the files need to:

• contain a single HTM or HTML file in the root of the zip file; OR
• contain either a file called “index.htm” or “index.html” in the root of the zip file

Note:  There are other potential intricacies for properly recognizing file types when importing into Connect Pro. This may include requiring only a single HTM and single AAM file in the root of the zip file, in order for Connect Pro to recognize the content type as “Authorware”.  However, that’s not discussed in this document.

The root of the HTML/Javascript-to-Connect Prototype (and associated sample files) contains a single “index.htm” file.  This is the file that Connect Pro will launch when the content is imported and subsequently launched from Connect Pro Content or Training tabs.  Because the root of the Prototype does not contain any other HTM files, its name isn’t that important.  However, you need to make sure that this “index.htm” file is contained in the root of the zip file.  This means you need to open the folder containing the Prototype files and select all of the files/folders (including the “index.htm” file) before creating a zip file.  Do NOT compress or zip up the parent folder itself.

Please review the format of the example file found in the Sample Files section, above, for the structure of a valid zip file which can be imported into Connect Pro.

Parsing Tracking Data

This section is a reminder when parsing data that was retrieved from Connect Pro.  In most cases, developers are asked to create a file that in addition to sending data such as score, and status to Connect Pro also sends “bookmarking” data.  This allows learners to return to the location where they left off (or some related location because, for example, sometimes a learner is taken to the beginning of the quiz to retake the quiz, instead of being taken to the middle of the quiz where they left off).  However, in addition to taking the learner where they left off, it is often required to remember “state” data or what state the learner left the content.  A simple example might be to remember what pages the learner viewed.

Simple Array

A great way to remember the pages viewed is to use a simple array.  In this example, imagine if the content consists of 3 pages that need to be viewed.  An array might be created to store values for when the learner has completed all of the pages.  I tend to use the following values:

Value	Definition	Description
-1	Not Viewed	Default for all pages in the content.  This value means the learner has not even attempted to view this page.
0	Viewed (not Completed)	Used to represent a page that contains something the learner needs to interact with.  If there is a question on the page the learner needs to answer, etc.  If they have not completed all of the required interactions on that page, the value is 0.
1	Viewed (and Completed)	Once the learner has completed all of the interactions on a page, the value is set to 1.  If the page simply contains text, the value could be set to 1 immediately upon entering the page.

Since there are three pages in this example, then a variable (which is defined as pagesViewed_ary) is initialized as:

var pagesViewed_ary = [-1, -1, -1];

When a learner views the first page in the content, the array is updated such that:

pagesViewed_ary[0] = 1;

Note:  Arrays in JavaScript are 0-based, so the reference to the first item in the array starts at 0.

In our example, let’s assume that the learner completed the first page, and navigated to the second page when they exited.  We’ll introduce a new variable currentPage_int which contains the current page the learner is at.  This might get a bit confusing, because we are going to make currentPage_int 0-based, as well.  This makes it easier to translate the current page with the pages viewed in the array.  At this point, we’d expect our variables to be set as follows:

currentPage_int = 1;
pagesViewed_ary = [1, 1, -1];

Since we want to remember what pages were viewed by the learner in this session, we’ll want to send the array to Connect Pro.  The methods to call to store this kind of data would be something similar to:

setLessonLocation(currentPage_int);
setLessonData(‘pagesViewed_ary=’ + pagesViewed_ary.toString());

Where the current location is sent as the “lesson location” and the additional state data is sent as “Lesson Data”.  The actual value sent to the Lesson Data is:  “pagesViewed_ary=1, 1, -1” and doesn’t contain brackets or other formatting.

Assuming the learner exits at this point, we are now going to look at what it takes to update all of the information the next time the learner launches the content from Connect Pro. 

A method exists in the Connect JS files which is used to grab name/value pairs from a string.  It’s called getParameter and accepts up to three String parameters (Search String, Name to Search for and Optional delimiter), as described in the Additional Methods section, above.

It might be easier to look at an example using the following code snippet:

var name_str = ’fname=Andrew&lname=Chemey’;
var fieldName_str = ’fname’
var firstName_str = getParameter(name_str, fieldName_str, ’&’);

would set

firstName_str

to “Andrew”.

Returning to our initial example, we need to get the data from Connect Pro when the content is launched.  Assuming we’ve called getTrackingData() and waited for a valid response and isInitialized() is true…

var currentPage_str = getLessonLocation();
var lessonData_str = getLessonData();
var pagesViewed_str = getParameter(lessonData_str, pagesViewed_ary, ‘’);

Notice that we defined two variables here:

currentPage_str

and

pagesViewed_str

These variables contain Strings and not an Integer or Array, respectively (e.g. currentPage_str = “1” and pagesViewed_str = “1, 1, -1”). 

We need to convert these values to their respective datatypes.  For currentPage_int, we’ll use the Number method and for pagesViewed_ary the split method:

currentPage_int = Number(currentPage_str);
pagesViewed_ary = pagesViewed_str.split(‘,’);

Note:  The values in the pagesViewed_ary are also strings and may require conversion to integers, if necessary.

For such a “simple” array it certainly seems like it took a bit of time to explain the conversions and storage of array data.  However, reading through this section above, could save hours of pulling hair, if you happen to forget about the conversions that occur as you go from one datatype to another.  J

Simple Multidimensional Array

This section serves as a friendly reminder of what happens when you use multidimensional arrays.  In a simple case, imagine if you are using the following array to store in Connect Pro:

var multiDimension_ary = [-1, [-1, -1], -1];

If this array is converted to a string

var multiDimension_str = multiDimension_ary.toString();

it looks like this:

multiDimension_str = ”-1, -1, -1, -1”

It’s impossible to differentiate this string from a number of arrays, including:

[-1, -1, -1, -1]
[[-1], -1, -1, -1]
[[-1], [-1, -1, -1]]
[[-1, -1], -1, -1]
[[-1, -1], [-1, -1]]
.
.
.

I assume you get the point.  Multidimensional arrays need special consideration when converting to strings.  Whether a different delimiter is used for each dimension or some other mechanism is used, is up to you.

Debugging

The prototype and example files include support for adding debugging information to the content.  The implementation displays an alert box when the content is closed, though this can easily be modified to force the display of information at any time. 

Enabling Debug

To enable debugging in the prototype or any of the example files, edit the “index.htm” file that is found in the root of all of the packages.  Find the line:

debug_bln = false;

and change it to read:

debug_bln = true;

Appending Debug Information

Once enabled, the debug log writes to a variable debug_str which is what is displayed when the browser window is closed.  However, rather than access the variable directly, developers should use a method called addToDebug, with a single String parameter containing the debug code that should be displayed.

Method	Parameters	Description
addToDebug	String (Value to add to Debug String)	Appends the value to the debug string and is displayed when the content browser is closed (assuming debug_bln is true); Returns: Nothing
showDebug	Integer (Number of debug lines to display at a time) If the parameter is undefined or empty, the debug alert is split on lines of 50.  If there are 75 lines of debugging information to display, it displays two alert messages.	Displays the debug log and resets the variable that holds the log.
setDebug	Boolean	Determines whether to enable debugging

For example, if you queried Connect Pro for the learner’s name and wanted to ensure the variable was updated properly.  The following code will add a line to display in the debug message with “myStudentName_str = {STUDENT_NAME_VALUE}”:

var myStudentName_str = getStudentName();
addToDebug("myStudentName_str = " + myStudentName_str);

To display the debug log at anytime before the onBrowserClose method is executed, use:

showDebug();

 

Sample Files

There are several example files provided in this document.  They all use the prototype to communicate data with Connect Pro.  This section provides a brief description of each of the sample files.

SinglePage_Sample1

This single page sample is what is created when you review the Walkthrough.  It creates a simple single-page HTM file with a single button.  When the button is clicked, it executes some tracking code to Connect Pro and then attempts to close the browser window.

All of the code used in this example is found in the “index.htm” file in the root of the sample folder.

SinglePage_Sample2

This single page sample provides a table with data that is retrieved from Connect Pro and then allows you to send data to Connect Pro.  The fields that display the data from Connect Pro are automatically updated when launched.  The fields that are used to send data to Connect Pro are posted when the “Send Data to LMS” button is clicked.  Optionally, the “Exit and Close” is used to issue the “ExitAU” method for AICC (and “LMSFinish” or “Terminate” for SCORM) and attempt to close the browser window.

All of the code used in this example is found in the “index.htm” file in the root of the sample folder.

MultiPage_Sample1

This is a multi-page sample which displays three HTM files in a content frame of a frameset.  The navigation frame displays three buttons, Next, Previous and Exit.  The content is set to “completed” (and a score of 100) when the learner reaches the last page, regardless of whether they have viewed any/all of the other pages (though the pages are displayed linearly).

The file “index.htm” found in the root of the sample folder provides the frameset.  It displays a Flash-based loading bar until either the data is retrieved from Connect Pro; or there is no valid communication with Connect Pro.  The bulk of the code is found in the “navigation.htm” file in the Content folder, though some is also referenced from the root “index.htm” file.

MultiPage_Sample2_withFlashInteraction

This is a multi-page sample which displays three HTM files in a content frame of a frameset.  One of the content pages (page 2) displays a Flash-based interaction.  The navigation frame displays three buttons, Next, Previous and Exit. 

The content is set to “passed” when the learner views all of the content pages; AND successfully answers the question in page 2.  The content is set to “failed” when the learner views all of the content pages; AND does not successfully answer the question in page 2.  Otherwise the content is “incomplete”.

The Flash-based interaction receives a parameter that indicates how the learner answered the question in previous attempts.  Upon answering the interaction, the interaction data is sent to Connect Pro using the sendInteractionData method.  The status and score of the interaction is also sent to the navigation code for determining the score and status of the course, overall. 

Note:  The mechanism to determine whether the learner answered the interaction properly, in this example, is based on when the learner clicks a “Next”, “Previous” or “Exit” button.  This means that it’s possible the learner could answer a question and close the browser and not necessarily receive credit for answering the question.

The file “index.htm” found in the root of the sample folder provides the frameset.  It displays a Flash-based loading bar until either the data is retrieved from Connect Pro; or there is no valid communication with Connect Pro.  The bulk of the code is found in the “navigation.htm” file in the Content folder, with some additional code found in “page2.htm” and the root “index.htm” file.

Closing the browser

The prototype and examples include at least two methods which may be utilized to end communication with Connect and attempt to close the browser (found in ‘ConnectCommon.js”):

• exitLMS()

• closeWin()

 

These methods attempt to close the browser window using code hacks for Internet Explorer and other browsers.  These hacks might not work in all browsers (e.g. Firefox 2.0.10 or higher) or environments.  These methods might be need to be modified if they do not work or cause problems in your environment (e.g. cause the LMS window to close, or cause the browser to crash).

In addition, another method has been provided which you can call to redirect the browser to another URL incase the browser does not close:

• setExitURL(URL, TimeLimit)

 

This method is called by the

closeWin

function, but is typically only executed when the browser does not close.

Conclusion

These prototype files are provided “as-is”, though I expect to be making changes to them.  Feel free to contact me with any updates and suggestions you might have for these files.