Saturday, September 19, 2009

It's not Voodoo, It's JavaScript

In my last post I showed you how to use the math functionality of Lectora. Lectora allows you to add, subtract, multiply, and divide variables. If you want to do more than this or use more complex logic, then you will need to add JavaScript to your project. For those unfamiliar with JavaScript, I might just as well have said you can hire an expert in voodoo to apply magic to your Lectora project. However, learning to use it will allow you to do more with your e-learning projects.

In this post I will show you how to use JavaScript to verify that a variable contains a valid number. Let's get started.

Prerequisites

1. Create a variable that will contain an answer to the question "Is this a number?"

The JavaScript code will use this variable to store its result.
  • Open up the Variable Manager from the Tools menu
  • Add a variable named "IsNumber" using the default settings
2. Add the JavaScript
  • Use the menu Add > Object > External HTML to add a place to put the JavaScript code.
    • Object Name: js_validateNumber
    • Object Type: Header Scripting
    • Custom HTML: Cut and Paste the following code into this text box:
function validateNumber() {
  if (VarYears.getValue().match(/[^0-9]/)) {
    VarIsNumber.set("no");
  } else {
    VarIsNumber.set("yes");
  }
}


I'm not going to get into the details of the JavaScript in this posting. Basically all it does is check to see if there is character in the number that is not a digit between zero and nine. Note that the code refers to the Lectora variables you previously created with the prefix "Var". If you did not use the same variable name (including letter case) that I used, then you will need to go back and change your variable names in Lectora or adjust the JavaScript code accordingly.

3. Call the JavaScript from Lectora

To call JavaScript from Lectora, you need to use a little trickery. Create the following variable:
  • Open up the Variable Manager from the Tools menu.
  • Add a variable named "Lectora_JavaScript" using the default settings
Stay with me. This is getting slightly illogical so if you like your Lectora code always in perfect harmony then your eye may be starting to twitch right about now. You will see why you are doing this in the next step.
  • Add the following action to the Calculate Months action group you created in the Math the Lectora Way post. Put it in the first spot so that it is called first.
    • Action Name: Call js_validateNumber
    • Action: Modify Variable
    • Target: Lectora_JavaScript
    • Value: JavaScript:validateNumber()
    • Modification Type: Set Variable Contents


Using the Value field to call the JavaScript is the trick necessary to make Lectora talk to JavaScript. Note that if you have coded in JavaScript before, you may be tempted to add a semi-colon at the end of the JavaScript call. Don't do it! Errors await those who do not heed this warning. ;)

4. Make decisions based on the answer to the question "Is this a number?"

The answer to this question is stored in the variable IsNumber using the JavaScript code.
  • Edit the Action Multiple by 12
    • Click on the Condition tab
      • Check the box next to "Perform action ONLY if the following is TRUE."
      • Variable: IsNumber
      • Relationship: Equal To
      • Value: yes
  • Edit the Action Update Months
    • Click on the Condition tab
      • Check the box next to "Perform action ONLY if the following is TRUE."
      • Variable: IsNumber
      • Relationship: Equal To
      • Value: yes
    • Click on the Else tab
      • Check the box next to "If the conditions are not met, perform the following action."
      • Action: Display Message
      • Target: Standard Message Window
      • Message to Display: Please use numbers only.

5. Finally, Test the Project

Use Mode > Preview in Browser > Internet Explorer to preview your project. Use the web browser for preview rather than Lectora's built in preview so that the JavaScript will be executed. This code has not been tested in web browsers other than Internet Explorer.

If the value you enter is not a number, the you will see the pop-up message "Please use numbers only." If the value you enter is a number, you see it calculated as before in the Math the Lectora Way post.


Now you have the knowledge to practice some JavaScript voodoo. Remember, with great power comes great responsibility. Use wisely and enjoy.

Saturday, September 5, 2009

Math the Lectora Way

Lectora has some basic math functionality you can use to add, subtract, multiply, and divide variables. This comes in very useful for projects that require basic computation. For more complex computation you can add JavaScript to the project. For now, we'll stick with what Lectora has built in.

For this example, we'll calculate the total number of months in a specified number of years.

Prerequisites
  • You should be familar with Lectora
  • You should have a basic understanding of actions and action groups

1. Create a page in Lectora

First, create a blank project in Lectora or create a new page in an existing project.

2. Add the Required Objects

Add a text box. The text box can sometimes be hard to find. Go to Add >> Object >> Form Object >> Entry Field. Name the textbox "Years". Name the associated variable "Years" also.

Add a button. Label the button "Calculate Months".

Add a label. This is where we will but the results. Name it "Months".

You should now have something that looks similar to the following:


3. Create the Action Group

Create an action group. Name it "Calculate Months". Your tree view in Lectora should now look something like the following:


You'll be adding two actions to the action group. The first action will calculate the months. The second action will update the page with the new value. You will need to make sure these are ordered as stated to display the correct results.

Add a Modify Variable Action. This is where you will do the calculation of years to months by multipling by 12. Notice the calcuation will change the value of the variable "Years" to months. Set the following:
  • Action Name: Multiply by 12
  • Action: Modify Variable
  • Target: Years
  • Value: 12
  • Modification Type: Multiply Variable By


Add a Change Contents Action. This will display the resultant number of months (now in the variable "Years") to the learner. Set the following:
  • Action Name: Update Months
  • Action: Change Contents
  • Target: Months
  • New Content: Years


4. Link the Action Group to the Button

Now you will need to go back to the button and edit it so that when the learner clicks it, the calculation will be made. Go into the button properties and choose the "On Click" tab. Set the following:
  • Action: Run Action Group
  • Target: Calculate Months

5. Preview the Project

All that is left to do is to see the code in action. Preview the project and notice any number you put in will be calculated into months when you click the button.


What happens if you don't put in a number? The calculation will not work and the text will show up in the results.


You may want to check the value in the years textbox to make sure it only contains numbers. Otherwise, you'll want to let your learner know it is not a valid number. For this you will need JavaScript. Look for a follow-up posting on that topic!