Or
Attaching custom JavaScript event handlers to ToolBook’s DOM elements
In my previous article, "Keyboard shortcuts in ToolBook HTML”, I showed how one can implement keyboard shortcuts using the arrow keys to navigate between the pages, and in my article “Keyboard shortcuts in ToolBook HTML 2 - Using a combination of keys to create keyboard shortcuts for navigation”, I explained how it is possible to use a combination of keys (using either the shift or CTRL keys in combination with other keys)
But what if we want to use ALT key in combination with the arrow keys?
I must warn you that the solution is quite complicated - so if you are not comfortable with JavaScript and the actions Editor you might find this article to be a bit intense. If you however are comfortable with JavaScript you might get a kick out of seeing how one can attach events to DOM objects in ToolBook’s HTML Runtime – without doing edits to ToolBook’s HTML files…
The solution
The actions editor does not have any built in mechanism to detect if the alt key is pressed, so here we need to take advantage of ToolBook’s ability to link in external JavaScript (for the lowdown on how to do this check out this article on Denny Dedmores site) – and be sure to return:-))
(We’ll take a mental break here to digest what we’ve read on Denny’s site……………………………………)
Now might be a good time to see the live sample of this article.
Ok thus refreshed lets continue:-)
By checking out some JavaScript sites for solutions to detect if the ALT key is pressed, I could only find solutions which required JavaScript code to be executed in the context of an onKeyup handler of a DOM object.
While the external JavaScript feature is intended to let us call functions stored in a JavaScript file from event handlers defined by ToolBook’s Actions Editor, It does not allow us to use the external JavaScript file to handle events such as on keyup. And this is what we need to be able to in order to detect if the alt key is pressed.
So in other word to detect if the ALT key is pressed we need to be able to attach a custom event handler to ToolBook’s HTML runtime.
So let’s first look at how you’d do that:
In my previous article, “External CSS Style sheet with ToolBook HTML”, we used an external JavaScript file to assign a style sheet to a DOM element in the ToolBook HTML runtime. Using the same approach to find the DOM document, we can instead attach custom functions to events on the DOM object by calling this code from the Actions Editor:
//Use the Actions Editor to call this function once to initialise
function tbfunction_initEventWatcher(){
//find the contentframe
var sysframe = document.getElementById('syspageFrame');
var contentDoc;
//IE doesnt understand contentDocument
if (sysframe.contentDocument) {
//Mozilla
contentDoc = sysframe.contentDocument;
contentDoc.addEventListener('keydown', checkKeys, false);
contentDoc.addEventListener('keyup', checkKeys, false);
}
else {
//IE
contentDoc = sysframe.contentWindow.document;
contentDoc.attachEvent('onkeydown', checkKeys);
contentDoc.attachEvent('onkeyup', checkKeys);
}
}
Notice the difference in the syntax between Mozilla and IE.
The code above means that ToolBook in addition to any on keyup handlers defined in the actions editor also calls the function we have defined. In this case the function is called checkKeys:
function checkKeys(e){
ALTIsPressed = e.altKey;
}
Since we need to retrieve the value of alt back into the Actions Editor we just store the value in a global variable defined in beginning of the JavaScript file.
//Define a "Global" variable to hold the value of the ALT key is pressed o not
var ALTIsPressed = false;
As the global variable is not defined in the Actions Editor we cannot access the variable from the actions editor so we need to provide a function which is accessible from the Actions Editor:
function tbfunction_getAltKeyStatus(){
return ALTIsPressed;
}
(All the code above can be found in the events.js file in the sample which can be downloaded from the downloads page).
Now we are ready to hook up our JavaScript file in the Actions Editor, contrary to my previous examples with keyboard shortcuts I have the relevant Action Editor Actions on each page’s onload and on keyup handlers.
The onload page look like this
-- On load page... -------------------------------------------------------------
Comment: initialise the event Watcher
Execute Script initEventWatcher (HTML)
Basically all we are doing is to call the JavaScript function above which in turn attaches events ToolBook’s HTML objects which ensure that when the user presses a key, both the action editor handler and our custom JavaScript event handler is executed.
The onkeyup handler looks like this:
-- On key up... ----------------------------------------------------------------
Execute Shared Actions "TC_KeyNav"
To make things easier to maintain the On Keyup calls a shared action and pass on the keyCode parameter from the on KeyUp handler on to the Shared Action as a parameter:
-- Shared Actions "TC_KeyNav" --------------------------------------------------
Define local variable "altDown" (Initial value: "")
Comment: Navigate when the user press the arrow keys or the end key while pressing the ALT key
Comment: Tomas Lund, ToolBookConsulting.com, July 2008
Set altDown to false
Execute Script getAltKeyStatus (HTML & Native)
If altDown and KeyCode = 37
Go to the previous page
Else if altDown and KeyCode = 39
Go to the next page
Else if altDown and KeyCode = 35
Execute Shared Actions "TC_Exit"
End if
Notice that this in turn calls another shared action called TC_Exit
-- Shared Actions "TC_Exit" ----------------------------------------------------
Define local variable "res" (Initial value: "")
Display confirmation: "Are you sure you wish to exit the course?"; store response in res
If res
Exit (LMS: suspend lesson) (LMS: Student can resume) (LMS: no automatic navigation)
End if
That’s it:-)
Ok I know there is a lot to take in here but download the sample from the download page and have a play with it and it will hopefully make sense to you.
As always I appreciate comments and questions in the comments section below.
Tomas
The Caveats
This works for obfuscated and non obfuscated code but it doesn’t work when the content is running as a popup, this is just because I haven’t had time – or a requirement - to figure out how to do it yet.
Since the alt key has special functionality in the Windows and in the browsers you may see some occasional unexpected behavior, but generally it works OK. (One problem I have seen a couple of times and only with Mozilla is that the ALT + Right key shortcut will not work the very first time a course is displayed - I believe it is a focus issue but I haven’t solved it yet).