The EnterPage 16-02
July 25, 2013

In this issue:

Tracker.Net Version 6 Adds Divisions, Security Questions, Audio/Video Lessons, jQueryUI, and Much More

Exam Engine and Training Studio Add Responsive Web Design

Exam Engine is an "Assessment" Category Finalist for 2013 Best of Elearning! Awards

Recent Blog Posts

Programming for e-Learning Developers Segment

Expert Information from Learning & Mastering ToolBook

OpenScript Tip from Learning & Mastering ToolBook

Web Hint from Learning & Mastering ToolBook

JavaScript Tip


Introduction

Welcome to the second EnterPage Newsletter of the year. As some of you may have seen, we had another fire here in Colorado Springs. My good friend and former member of Platte Canyon, Jeffrey Zink, lost his home unfortunately. It is terrible but I'm pleased to say that our common insurance company, USAA, is taking good care of him and his family. On a more positive note, we just released version 6 of our popular Tracker.Net Learning Management System. We have information on that below as well as the typical feast of blog postings and Programming for e-Learning Developers tips on ToolBook and JavaScript.



Tracker.Net Version 6 Adds Divisions, Security Questions, Audio/Video Lessons, jQueryUI, and Much More

We are excited to announce that version 6 of our Tracker.Net Learning Management System (LMS) is now available. Here are just some of the new features:
  • Adds new Division level that is a grouping of organizations. Courses and Classes can be assigned at the Division level.
  • Optional Security Questions for resetting your password.
  • Supervisor Administrators/Reporters can be assigned at the Organization or Division level as well as configuring the supervisor's direct reports.
  • Adds 49 new reports/graphs.
  • New Audio and Video lessons. Link directly to the media file and Tracker provides all SCORM communication. Optionally play in HTML 5 when supported and revert to Windows Media Player otherwise.
  • Additional lesson settings to skip bookmarks/suspend data, set the maximum number of lesson attempts, or end access after completion.
  • Greatly improved Windows Authentication.
  • Ability to "skin" the interface through jQueryUI.
  • Automatically saves your last report/graph selected.
  • Special "External Mode" for integrating Tracker.Net into another system.
  • Redesigned and improved Global Settings screen.
  • Settings to hide inactive classes, courses, lessons, and/or students in the Administrator or Reporter.
  • Improved interface that is easily accessible from mobile devices.
  • Updated Tracker Reporter application allows users to view 109 reports and 118 graphs by student, lesson, course, class, organization, and division.
  • Scheduler application can now send division emails as well as organization/course/class emails. Any student information such as username and password can be included.
  • Updated and expanded Tracker Reports SQL Server Reporting Services solution boasts 101 reports and 125 graphs by student, lesson, course, class, organization, and division.
  • Downloadable trial version
Pricing for this new version remains $6,995 for up to 500 users on a single web site, $8,995 for up to 2000 users on a single web site, and $10,995 for unlimited users on a single web site. The updated Tracker Scheduler program is $495 per user while the improved Tracker Store is $995 per web site. Source code is available for internal use for an additional $4,995. The Tracker Reporter program is also $495 per user while the power Tracker Reports SQL Server Reporting Services solutions is $1,995. An upgrade from the previous version is $2,895 (up to 500 users), $3,595 (up to 2000 users), or $4,295 (unlimited users). Upgrades from older versions are available as well.

Tracker.Net Information

Tracker.Net Demonstration Site

Tracker.Net Webinars


Exam Engine and Training Studio Add Responsive Web Design

We have updated Exam Engine (now at version 4.5) and Training Studio (now at version 3.5) to incorporate Responsive Web Design. This uses CSS styles and media queries to dynamically adjust the content to the size of the user's display. This makes it possible to take advantage of the larger amount of real estate available on desktops while still providing useful content for the smaller screen sizes of tablets and phones.

Blog Post on Responsive Web Design

Blog Post on the History and Advantages of Template-Based Authoring

Exam Engine Sample

Training Studio Sample


Exam Engine is an "Assessment" Category Finalist for 2013 Best of Elearning! Awards

Thanks to all your votes back in April, our Exam Engine™ authoring tool has been named one of three finalists for the 9th Annual Best of Elearning! Awards in the "Assessment" Category. The results will be announced in late August.

We really appreciate your support!

Exam Engine Information

Purchase Exam Engine

Recent Blog Posts

Here are some recent blog posts.

History and Advantages of Template-Based e-Learning Authoring

Responsive Web Design with Exam Engine and Training Studio

We hope you will visit our blog often and consider subscribing to the RSS feed.

Blog

RSS Feed


Programming for e-Learning Developers Segment

This feature is a short segment from Jeff's Programming for e-Learning Developers book.

Debugging Your Applications

Although all of us would like to write perfect programs from the start, that rarely happens in the real world. We therefore need a way to figure out what is wrong with them. This is known as debugging. While entire books have been written on the subject, we can at least take a look at the core debugging techniques you can use in each of our environments.
ToolBook – OpenScript
To debug OpenScript, you open the Script Editor for the script you are interested in and click the “Debugger” button on the toolbar.

The next step is to put in a “breakpoint.” This is where the script execution will stop and allow you to “step through” and watch the code. In OpenScript, you click on the line(s) where you want to stop.

You then return to “reader” mode and initiate the script. For example, you might click the button that starts the sequence or re-enter the page. The Debugger will then pop up. The first thing I recommend doing is viewing variables (View menu – Variables). This allows you to see the current value of your variables. ToolBook also displays sysError, Target, and TargetWindow. These can also be helpful for figuring out strange problems. You can then use the Trace menu (Figure 137) to step through the code. Most common is to continue line by line (“Trace Statement”) or to step into another method (“Trace Into Call”). If all looks OK and you want to either jump to the next breakpoint or finish the script execution completely, you can choose “Continue Execution.”
ToolBook – Actions Editor
The Actions Editor doesn’t have an integrated debugger. While it is possible to use the OpenScript Debugger on the code generated by the Actions Editor for native mode, that is not for the faint of heart, since the generated code is typically more complex than hand-coded script would be. Similarly, you can publish to HTML and use a JavaScript debugger like those covered later in this chapter, but trying to find the right code and digging through ToolBook’s own generated JavaScript can be daunting. In most cases, you can get by with the poor man’s debugger: alert boxes.

For example, we add a Display alert action with both the variable name and variable value. These work both natively and after publishing to HTML. It was important to try this in both native and HTML mode as CRLF in our code turned out to be one character in native and two characters once inside the browser. If you are linking to external .js files, you can put JavaScript alert calls for simple debugging of those scripts. You can also put in a debugger; line to launch as explained in the upcoming JavaScript section.
Flash
Flash has a robust debugging environment that is much improved in recent versions. Rather than needing to go to a separate “debug” mode as in ToolBook OpenScript, you set the breakpoint by clicking to the left of the line number.

The next step is to go to the Debug menu and select Debug Movie. This will launch both the Flash Debugger and the Flash movie itself. You then run the movie as normal until you hit the breakpoint. The Debugger window will then come to the front. You can view various object properties and the values of your variables. You don’t need to wait until you have a problem in order to use the Debugger. I’ll often fire it up just to confirm initial logic or to see what variable values look like if I’m not positive about the format or contents .

We can then use the Debug menu to control our debugging session. The most common options are to “Step In” to a function, “Step Over” the current line to stay in the current function, or to “Continue” execution until you reach another breakpoint.
JavaScript
There are two approaches for debugging your JavaScript. If you are using a development environment like Visual Studio, you can set breakpoints directly within it and then run the project. To do this, you click to the left of the line where you want to set the breakpoint. This is quite similar to how you set a breakpoint in Flash.

You’ll also need to “Disable script debugging ” for both Internet Explorer and other browsers in order for this to work. When you do this, you’ll get the option to debug any JavaScript errors out there as you browse the web. This is a great idea when you are testing your own software but can be a drag when you run into all the bad web pages out there. So remember where the setting is so you can turn it off later if desired.

When you perform the action (such as click a button) that calls that code, Visual Studio comes to the front and shows you the current execution line. The variables and parameters that are currently being used are automatically shown in the “Locals” window. The “Autos” window limits the display to variables used in the current and preceding line of code. You can also have one or more “Watch” windows which show the value of just variable(s) you select.

As with the ToolBook OpenScript and Flash debuggers, you can “Step Into” a Method (e.g., jump into its code), “Step Over” a line to get to the next one, or “Continue” to the next breakpoint or to the end of the program. You can also “Step Out” to move back up a level to the calling method. This can be handy if you have “stepped in” to a method and now want to return to where you were without having to step through each line of the called method. You control this with the Debug menu. Notice that the accelerators (F8 for “Step Into” for example) are settable based on your language profile. F8 is traditionally the value for Visual Basic developers while C# and C++ developers have typically used F10.

The second approach for debugging JavaScript involves using the browser itself. Firefox has a free JavaScript Debugger “Add-on” that then is listed under the Tools menu. That brings up the JavaScript Debugger itself. You can go to the correct HTML page in the upper left of the screen. If the page is using .js files, you can select the one you want from the list. The Debugger will then show the code from the page or file in the right window. You can then set a breakpoint by clicking to the left of the desired line number. We then return to the main browser window and exercise the code.

The JavaScript Debugger then comes to the front with the breakpoint highlighted. We can then “Step Over,” “Step Into,” or “Step Out” using the toolbar or the Debug menu. We can then view variables on the left side window.

Starting with Internet Explorer 8, IE also has a debugger right in the browser. It is located with HTML, CSS, and Profiler tools under the Developer Tools option under the Tools menu. Once you have the Developer Tools open, you want to click on the “Script” tab. From there, you can list the JavaScript in the page itself or select the desired .js file from the drop-down list. You can then set one or more breakpoints in the normal way by clicking in the area to the left of the line number. We then return to the browser window and cause this code to be executed.

The JavaScript Debugger then comes to the front with the breakpoint highlighted. Rather than use a menu in this case, we use the toolbar to “Step Over,” “Step Into,” or “Step Out” the current line of code. We can choose to view Locals as well as a Console (for executing code), a list of breakpoints, a list of “watched” variables, and the entire “call stack.” Notice how we can again expand nodes and other variables to view their values. This is extremely useful, particularly when working with XML.

Programming for e-Learning Developers Information

Order Programming for e-Learning Developers ($29.95 with free shipping in the U.S.)


Expert Information from Learning & Mastering ToolBook 

By Peter Jackson, ToolBookDeveloper.com


Encoding/Decoding Text

Question: I need to create an encrypted key based on text that a user enters into a field. The key needs to be the same each time that the same text is entered.

Answer: You can use ASYM_Decode() and ASYM_Encode() these are linked in the TB###r.sbk like:
    linkDLL "TBCBT.DLL"
        STRING ASYM_Encode = Encrypt(STRING,STRING)
        STRING ASYM_Decode = Decrypt(STRING,STRING)
    end linkDLL
    
So if you don't ship the TB###r.sbk, then you will need the above code.

You can call these functions with just the first parameter which is the text that you wish to encrypt/decrypt which MUST be less than 32k or the returned value will be null:-( I think the second parameter is a key, however, the key only works when it is a number???


OpenScript Tip from Learning & Mastering ToolBook

By Jeff Rhodes, Platte Canyon Multimedia Software Corporation

ASYMI_AutoSize Property

With version 11.5 of this training, we redid virtually all screen captures to show the Windows 8 style. These captures were a few pixels bigger. The easiest way to update the buttons/images was to change them to autosize to the graphic they hold. We could do this via the Property Sheet, but that got pretty tedious. Quicker was the script below. You select the object and use the Command Window to execute this script.

ASYMI_AutoSize of selection = True; send ASYM_Reset to selection

How did I figure out what property to set? I used the Property Browser and looked at the user properties for the object after setting the AutoSize via the Property Sheet.

Why ASYM_Reset? That tells any object to redraw or otherwise reset itself.


Web Hint from Learning & Mastering ToolBook

By Denny Dedmore, SumTotal Systems, Inc.

Question Feedback with One Universal Media Player

Question: Is there a practical way to provide both text and audio immediate feedback for a simple multiple choice question that has 3 or more possible responses WITHOUT using 3 or more unique Universal Audio Players? I'm trying to avoid adding objects to quiz pages that I don't really need.

Answer: You could have one large audio file which contains the contents of the three files. Then tell ToolBook to play just the segment of the large file needed, using the Universal Media Player (UMP). It is a little complicated, but it works fine.

Basic logic is something like:
This will queue the UMP to the right spot and starts playing...
play UMP
pause UMP
set mediaPosition of UMP to 15303
play UMP

Then set up TimeMarkers for the UMP to be the END position of each segment, and add:
On Media Timing Event
   stop UMP

to the UMPs Action Editor code to ensure it stops at the end of the segment. It is also a good idea that when combining all of your three audios into one file to add a one second buffer of silence between each.



JavaScript Tip

By Jeff Rhodes, Platte Canyon Multimedia Software Corporation

Making a jQueryUI Button

We now use the nice jQueryUI library in Tracker.Net, Exam Engine, and Training Studio. In each case, you link in the correct JavaScript files and style sheet and then use JavaScript to create the button. The nice thing is that you can use various types of HTML objects (input, anchor, ASP.NET buttons, etc.) and they still end up looking like a button. Here is an example from Tracker.Net:

$(function () {
        var optionsBtnId = $("#optionsBtn");

        if (optionsBtnId.length) {
            optionsBtnId.button({
                icons: {
                    primary: "ui-icon-home"
                },
                text: false
            });
            optionsBtnId.click(function () {
                var returnVal = true;

                if (isOnCoursePage == true) {
                    if (isOneCourse == true) {
                        window.resizeTo(800, 600);
                    }
                    else {
                        returnVal = checkIfOkToLeave(LessonOpenMessageLeavingScreen);
                    }
                }

                return returnVal;
            });
        }
    });

The $() means that the jQuery will call the function after the page fully loads. We then get our hands on the HTML object that we want to use for our button. The #optionsBtn means that we are looking for an object with an id of "optionsBtn." We then call the jQueryUI button method to create the button. In this case, we tell it to use the jQueryUI home icon and not to have any text. Next, we define the click function. Here we are doing some logic to determine whether to proceed with the click. If returnVal is false, the server side event will not be processed and we stay on the page.



The EnterPage is distributed up to four times per year, with occasional special issues. Individuals who have expressed interest in Platte Canyon Multimedia Software Corporation or its products receive The EnterPage. Suggestions for articles or proposals for article submissions are welcome. Send information to ep@plattecanyon.com. Back issues of the EnterPage are available at:

http://www.plattecanyon.com/enterpage.aspx

Platte Canyon Multimedia Software Corporation, 8870 Edgefield Drive, Colorado Springs, CO 80920, (719) 548-1110