Configuring the JavaScript
Configuring the JavaScript
Next, you will modify the HTML file that Captivate produced. The JavaScript in this file creates the e-mail that sends the score at end of the Captivate movie. You change the JavaScript to add inputs for the users to enter their names and e-mail addresses, and you hide the form elements that hold the scoring information. Use the following steps to accomplish this:
- In Dreamweaver, open the HTML file that Captivate produced.
- Switch to Code view. Replace the sendMail javascript function lines 25-30 with the sendMail function from the file newSendMail.txt included in the ZIP in the Requirements section for this tutorial.
- Save the file.
- Browse the HTML file in your browser to preview these changes. The file now opens a new window with the score results when the user presses the “Submit Quiz” button.
Here is a sample of the code produced for the function:
function sendMail()
{
// strip the word Core Data out of the results
var stripCoreData = gstrEmailBody.replace("Core Data", "");
// remove the double quotes
var stripQuotes = stripCoreData;
while(stripQuotes.indexOf(""") !=-1){
stripQuotes=stripQuotes.replace(""", "");
}
// turn results into an array to access single items
var results_array = stripQuotes.split(",");
// assign variables
var RawScore = results_array[7];
var MaxScore = results_array[8];
var MinScore = results_array[9];
var Accuracy = RawScore/MaxScore;
Accuracy = Accuracy*100;
// write html for popup window
var htmlString=
"<html><head><title>Email Results</title></head><body>" +
"<form Name='results' method='post' action='insert.cfm'>" +
"<table cellspacing=1 cellpadding=4 border=0><tr>
<td bgcolor='#336699'><strong>Your score:</strong></td>" +
"<td align='left' bgcolor='#6699cc'>" + RawScore + "</td></tr>"+
"<tr><td bgcolor='#336699'><strong>Maximum score:</strong></td>"+
"<td align='left' bgcolor='#6699cc'>" + MaxScore + "</td></tr>" +
"<tr><td bgcolor='#336699'><strong>Accuracy:</strong></td>" +
"<td align='left' bgcolor='#6699cc'>" + Accuracy + "%</td></tr>" +
"<tr><td bgcolor='#336699'><strong>Your Name:</strong></td>
<td align='left' bgcolor='#6699cc'><input type='text' Name='name'>
</td></tr>" + "<tr><td bgcolor='#336699'><strong>Email Address:</strong>
</td><td align='left' bgcolor='#6699cc'><input type='text' Name='email'>
</td></tr>" + "<tr><td bgcolor='#336699'>" +
"<input type='hidden' value='RoboDemo Sample Test' name='Test'>" +
"<input type='hidden' value='" + MaxScore + "' name='total'>" +
"<input type='hidden' value='" + RawScore + "' name='correct'>" +
"<input type='hidden' value='" + Accuracy + "' name='accuracy'>" +
"</td><td align='left' bgcolor='#6699cc'>
<input type='submit' name='Submit' value='Submit Your Score'>
</td></tr></table>" +
"</form></body></html>"
// function for the popup window
function launchwin(htmlString){
newwin = window.open("",
"flashcamwin","height=300,width=325,scrollbars=0");
newwin.document.open();
newwin.document.write(htmlString);
newwin.document.close();
}
// launch the window
launchwin(htmlString);
}
The first 16 lines of code retrieve the scores from the gstrEmailBody variable produced by Captivate, and strip unneeded content and double quotes. Captivate provides a lot of additional information that you don’t use in this tutorial, such as the time spent taking the quiz. The variable htmlString is code for an HTML page that you’ll have to launch into a new window. The code writes the scores from the quiz into hidden form variables: RawScore, MaxScore, MinScore, Accuracy.
You can edit the JavaScript variable, htmlString, to fit the style and design of your site. If you integrate this Captivate quiz with a ColdFusion application, you can take it a step further by outputting your variables, such as a user id, into hidden variables.
Comments