HTML/Javascript Content for Use In Connect Pro ()

**_goal2090_** · 2012-08-05 13:47:16

I am new to this and trying to figure out how to use "getParameter" I have a page with 3 html files. one of the page2.html has textboxed (this is user input). I just need to know how do you send and read the values if you come back to the survey

here is the simple index.html
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML to Connect: Prototype</title>
<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>
<script type="text/javascript" language="JavaScript">

// AEC: Change reference to file to load from content here
var windowContent_str = "content/navigation.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(false);

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

// AEC: Set exit URL and wait period (if appropriate). This is *only* in effect, in case the browser can't be closed
setExitURL('content/exit.htm', 1.5);

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

// AEC: Custom (Define custom properties and methods for content here, if appropriate)
function launchContent(url_str)
{
window.navigation.location.href = url_str;
}

</script>
</head>

<frameset frameborder="0" border="0" framespacing="0" rows="480,*" onunload="onBrowserClose()">
   <frame src="scripts/loading.htm" name="content" frameborder="0">
   <frame src="scripts/blank.htm" name="navigation" frameborder="0">
   <noframes>
   <body>
   <p>This web page uses frames, but your browser doesn't support them.</p>
   </body>
   </noframes>
</frameset>

</html>

here is page2.html

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Page 2</title>
<style type="text/css">
<!--
body {
background-image: url(images/Photography.jpg);
background-repeat: no-repeat;
background-position:center

}
.style4 {
font-size: 24px;
font-weight: bold;
}
.style5 {font-size: 24px}
-->
</style></head>
<body bgcolor="#ffffff">
<div align="center">
<p align="left"> </p>
<p align="left"> </p>
<table width="557" border="0" align="center">
<tr>
<td width="535"><span class="style4">The Shutter Release</span></td>
</tr>
<tr>
<td>
<table>
<tr>
<td> <input id="Text1" type="text" runat="server" disable="true" text="Sport1"/></td>
<td> <input id="txt_sport1" type="text" runat="server" disable="false"/></td>
</tr>
<tr>
<td> <input id="Text2" type="text" runat="server" disable="true" text="Sport2"/></td>
<td> <input id="txt_sport2" type="text" runat="server" disable="false"/></td>
</tr>

</table>
</td>
</tr>
</table>
</body>
</html>
I read this link but still confused and I appreciated if somesome show me an example
http://www.connectusers.com/tutorials/2 … /index.php

thanks

**_AChemey_** · 2012-08-06 14:19:38

Did you review the examples that were included in the article?

It seems as if your launch file is: content/navigation.htm. This file would be modified to include a reference to the tracking methods and properties that have been defined. Typically, it would be something like this:

var tracking = parent;

Then if you have already sent data to the LMS - you could retreive it by calling the GET methods (e.g. tracking.getLessonLocation() or tracking.getLessonData()).

This returns the data that you had sent to the LMS for those values. You need to know what they mean and thus can take the learner to the page they left off; or remember how they answered specific questions, etc.

Feel free to contact me off-list for as much assistance as possible.

-Andrew

**_goal2090_** · 2012-08-06 20:45:24

Hey Andrew thank you for ur help.
yes I did look at the example but i still don't see an example of passing/get user input
here is my navigation.htm page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navigation Frame</title>
<script language="javascript">
var pageStructure_ary = ["page1.htm", "page2.htm", "page3.htm"];
var pageQuestion_ary = [0,1,0];

var currentPage_int = 0;

var subFolder_str = "";
var tracking = parent;

// These are global variables used any time a setInterval is executed in this navigation code.
// It's a bit of an overkill, but the "var" is the interval; the "str" is the name of function
// to execute when the interval is completed; the "obj" is the object to execute the function.
var navigationInterval_var = '';
var navigationInterval_obj = '';
var navigationInterval_str = '';

function nextPage()
{
if(currentPage_int+1 < pageStructure_ary.length)
{
currentPage_int++;
tracking.content.location.href = subFolder_str + pageStructure_ary[currentPage_int];
}
checkButtonStates();
}

function previousPage()
{
if(currentPage_int > 0)
{
currentPage_int--;
tracking.content.location.href = subFolder_str + pageStructure_ary[currentPage_int];
}
checkButtonStates();
}

function exitPage()
{
tracking.sendTrackingData();
tracking.sendExitData();
navigationInterval_obj = tracking;
navigationInterval_str = 'setBrowserClosed';
navigationInterval_var = setInterval(waitForEmptyQueue, 100);
}

function checkButtonStates()
{
if(currentPage_int == 0)
{
Previous.disabled = true;
} else {
Previous.disabled = false;
}

if(currentPage_int + 1 >= pageStructure_ary.length)
{
Next.disabled = true;
// Since we are at the last page - call a function to indicate that.
// This is NOT used in all cases, but currently set's completion
// based on being at last page
setLastPage(true);
} else {
Next.disabled = false;
}
tracking.setLessonLocation(currentPage_int);
}

function setLocation(location_var)
{
var tempLocation_var = '';
if(typeof(location_var) != "undefined")
{
tempLocation_var = location_var;
}
tracking.setLessonLocation(tempLocation_var);
}

function getCurrentPage(loadPage_bln)
{
var tempCurrentPage_int = tracking.getLessonLocation();
if(tempCurrentPage_int > 0)
{
currentPage_int = tempCurrentPage_int;
} else {
currentPage_int = 0;
}

if(loadPage_bln)
{
tracking.content.location.href = subFolder_str + pageStructure_ary[currentPage_int];
}

checkButtonStates();
}

function setLastPage(isLastPage_bln)
{
// AEC: Behavior of the last page is determined by the content. In this example, the
// last page set's the "completion" status. The status is "incomplete" until the last
// page is reached. A better alternative is to set completion based on viewing *all*
// pages in the array pageStructureArray. See example that includes a Flash Interaction
// for this concept.

if(typeof(isLastPage_bln) != 'undefined')
{
if(isLastPage_bln)
{
tracking.setScoreRaw('100');
tracking.setLessonStatus('completed');
} else {
tracking.setLessonStatus('incomplete');
}
} else {
// This function shouldn't be called for any other reason, but we'll ignore for now
}
}

</script>
</head>

<input type="button" name="Next" id="Next" value=" Next > " onClick="nextPage()" />
</center>
</body>
</html>

**_AChemey_** · 2012-08-07 10:12:09

Assuming you have a text entry field named "txt_sport1" and it contains the only data that you'd like to store with the LMS...

To send the data to the LMS, you'd call:

var str_DataToSend = txt_sport1.text;
tracking.setLessonData(str_DataToSend);

To retrieve that data and display it as the default text you'd call:

var str_DataToRetrieve = tracking.getLessonData();
txt_sport1.text = str_DataToRetrieve;

Obviously, this get's more complicated if you have more data that you want to send. I'd recommend a name/value-pair; delimited via some character (e.g. something like: txt_sport1=VALUE&txt_sport2=VALUE).

-Andrew

**_goal2090_** · 2012-08-08 22:13:54

Hey Andrew, thank you soooo much for you help. I just still have one question :). I am still confused on where we put this and how do we call it or check for it. in other words:
this is page2.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Page 2</title>
<style type="text/css">
<!--
body {
background-image: url(images/Photography.jpg);
background-repeat: no-repeat;
background-position:center

}
.style4 {
font-size: 24px;
font-weight: bold;
}
.style5 {font-size: 24px}

-->
</style></head>
<body bgcolor="#ffffff">
<div align="center">
<p align="left"> </p>
<p align="left"> </p>
<table width="557" border="0" align="center">
<tr>
<td width="535"><span class="style4">The Shutter Release</span></td>
</tr>
<tr>
<td>
<table>
<tr>
<td> <input id="Text1" type="text" runat="server" disable="true" text="Sport1"/></td>
<td> <input id="txt_sport1" type="text" runat="server" disable="false"/></td>
</tr>
<tr>
<td> <input id="Text2" type="text" runat="server" disable="true" text="Sport2"/></td>
<td> <input id="txt_sport1" type="text" runat="server" disable="false"/></td>
</tr>

</table>
</td>
</tr>
</table>
</body>
</html>

now this code will not be in pgae2.html it will be put in navigation.html right? if yes tthen where will this go in that page? should I create a function ? if yes then how would I call it when clicking page2.htm
var str_DataToSend = document.getElementById('txt_sport1').value;
tracking.setLessonData(str_DataToSend);

var str_DataToSend2 = document.getElementById('txt_sport2').value;
tracking.setLessonData(str_DataToSend2);

where will this go and where would i check to see if the page has been completed . if page was completed then I will use this

var str_DataToRetrieve = tracking.getLessonData();
document.getElementById('txt_sport1').value = str_DataToRetrieve;

var str_DataToRetrieve2 = tracking.getLessonData();
document.getElementById('txt_sport2').value = str_DataToRetrieve2;

I guess my problem is i am not seeing where will I put the above code at.
here is my navigation.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navigation Frame</title>
<script language="javascript">
var pageStructure_ary = ["page1.htm", "page2.htm", "page3.htm"];
var pageQuestion_ary = [0,1,0];