JavaScript and jQuery in Exam Engine 4
May 4, 2012 Leave a comment
The new version of Exam Engine is completely HTML and JavaScript. The navigation buttons and other common elements are in the main page (index.htm) as is an iFrame that contains each of the templates. One of these templates is login.htm, which is used if the developer has specified to use a login page in the absence of an LMS. Let’s look at that page to get an idea of the design and how the jQuery library comes in handy.
Here is the HTML of the login.htm page.
<body>
<span id="loginLabel"></span>
<img id="loginImageBtn" src="" alt="" />
<input id="loginBtn" type="button" />
<input id="studentName" type="text" />
<input id="studentPassword" type="password" />
<span id="statusBlock"></span>
</body>
The position, font, and other formatting are implemented with a style sheet. But we need to add the functionality with JavaScript. Here is the “load page” script:
var usePassword;
$(function () {
var loginText = parent.ReadExamSetting("LoginPageMessage", "Enter your name:");
var loginBtn;
var studentNameId = $("#studentName");
var passwordId = $("#studentPassword");
usePassword = parent.ReadExamSettingBoolean("LoginPageUsePassword", false);
$("#loginLabel").html(loginText);
if (parent.UsejQueryUiButtons == true) {
loginBtn = $("#loginBtn");
$("#loginImageBtn").hide(); // needed for Firefox
}
else {
loginBtn = $("#loginImageBtn");
$("#loginBtn").hide(); // needed for Firefox
}
parent.ConfigureButton(loginBtn, "Login", LoginBtn_Click);
parent.SetBtnStatus(loginBtn, "Login", true, true, true); // visible, enabled, in template
if (usePassword == true) {
passwordId.show();
passwordId.keydown(studentName_KeyDown);
}
else {
passwordId.hide();
studentNameId.keydown(studentName_KeyDown);
}
// Hide Countdown Timer
parent.CountdownTimerRef.hide();
parent.TransitionControlRef.show();
});
We declare usePassword outside the function block so that we can use its value when the user actually clicks the Login button. The $(function() { syntax is part of jQuery and means that the page if fully loaded and all the objects are in place. We read our loginText variable with the ReadExamSetting function. The first parameter is the name of the setting and the second is a default value. This setting is originally created in the Exam Engine Configuration Editor and is stored in an XML file that is part of the exam. parent refers to the main page and its ExamEngineSettings.js file. The studentNameId and passwordId variables are jQuery objects. The “#studentName” is a selector that identifies an object with an id of “studentName.” This is the input control in the HTML above.
Next, we read the usePassword value from the exam as well. We then set the text of our loginLabel span control with this syntax: $(“#loginLabel”).html(loginText);. The first part creates the jQuery object using the selector as we saw above. We then call its html method and set its value to the loginText value that we read above.
Our next set of logic is to use either jQuery UI buttons or normal graphic buttons. We set the loginBtn variable to the appropriate object (input for jQueryUI or img for graphical) and hide the other object. At that point, we call two common functions, ConfigureButton and SetBtnStatus. These associate the proper “click” handler, set the states of the buttons, and load graphics if needed.
We then use our usePassword variable to either show or hide the password input control. Based on whether it is showing, we either add a KeyDown handler to it or the login input. This is so the user can press the Enter key rather than having to click or tab to the Login button. Notice the handy jQuery syntax to handle the keydown event with the studentName_KeyDown function: passwordId.keydown(studentName_KeyDown);.
We end by hiding the “countdown” timer and showing the iFrame itself (TransitionControlRef). The main point is that using jQuery simplifies getting our hands on object references and gives us a standard set of properties and methods.
About Jeff Rhodes
Platte Canyon/Jeff Rhodes Blog 