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

• Read and follow instructions in post Math the Lectora Way
• Be willing to dabble in some JavaScript

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.