As a programmer, it can be very useful at times while using Lectora to take advantage of the program’s HTML extensions to insert Javascript into pages. This allows us to use Javascript to fine-tune page behaviors in ways Lectora could not easily achieve on its own. To make the most of Javascript, though, you need to be able to interact with elements you have already placed on the page with Lectora. Here is a basic look at how to do that.
You can define variables in Lectora. Variables are values that can be changed according to what is going on within the course, and can be used to provide a responsive experience for the user. For example, suppose I have a “click to reveal” interaction on a page where the user has to click three images to reveal text associated with each one. I can make a Lectora variable corresponding to each of these images. Then, I can set actions on the page so that when the images are clicked, the values on their respective variables change (for example, from 0 to 1). Right after each variable is changed, we’ll check whether or not ALL three variables are 1. If they are, we’ll go to the next page, show the next button, or whatever else we want to do when the user completes the interaction.
That is possible to do in Lectora, but what about in Javascript? How do we access these variables and the images we’re supposed to click, which were created in Lectora, in an HTML extension? This is what we’ll do in this article.
First off, we want to create the page that we’re going to use in Lectora. This is the easy part. As described above, we want three buttons, three objects that will be revealed by clicking these three buttons (we’ll use text, but they can be images, videos, sound, or whatever you want), and a “next page” button. Set the next button and the things to be revealed to be hidden at the beginning—in the button properties, check the “initially hidden” box. So the general setup should be something like this:
Again, set the next button and the text to “initially hidden.” Finally, set the action on Page 1’s next button to go to the next page when clicked (which should be there already by default).
Now, let’s create three variables. In the Tools section, there is a button called Variables. That will open a window where you can add our three variables. I named mine Fact1, Fact2, and Fact3. Javascript is case-sensitive, so Fact1 and fact1 will be considered different variables. Lectora, however, is not, and will not allow you to have two variables like that at the same time. Keep that in mind. Make sure their initial values are all 0 (it’s the default value Lectora gives, so you shouldn’t have to change it), and then close the variables window once you’re done.
Now, we need to create an HTML Extension—it’s in the Add Web Object group in the Insert section of the toolbar. Add one to your page, and let’s examine the properties. In the Additional Settings group on the HTML extension’s properties, you’ll see “required variables.” Click it, and add the Fact1, Fact2, and Fact3 variables. Why would we need to do that, exactly? By default, Lectora only makes available those variables that are used in actions on that page. Our variables are NOT currently used. We are essentially declaring that we want to use our three variables in the page, so Lectora will include those for us to use. Otherwise, Javascript errors will occur if we try to use variables that aren’t available to us. This ensures that we CAN use them without any difficulty.
Exit this window, and also change the type of the extension to “Bottom of file scripting.”
Now, we need to identify the Javascript IDs of our elements. Click each button and text element in the title explorer, and examine the properties of each one. The first group of properties will have a popup icon attached to it. Click it, and you will see a popup with two things: a description, and an HTML name. We are only interested in the HTML name right now. Take note of the names that our four buttons and three text elements have. I recommend grabbing a piece of paper and writing down which ID goes to which element—yours may not be the same as mine. The IDs should be in the form “button45” or “text88,” but the numbers may be different. You may also change them at this point if you want to make them easier to remember, but remember that each name must be unique, and like the variables, they are case-sensitive.
Once you have your 7 element IDs written down, click the external HTML object. We’re going to edit it to write the code we need (click the big Edit button in the extension’s properties). Include the following code:
<script>
function checkComplete()
{
if(VarFact1.getValue() == 1 && VarFact2.getValue() == 1 && VarFact3.getValue() == 1)
{
document.getElementById(“button75”).style.visibility = “visible”;
}
}
</script>
In plain English, we are writing a small function called checkComplete (which we place between script tags to show that it is Javascript) that will determine whether all the buttons have been clicked. If so, it will show the next button that we set to be hidden initially. If not…nothing happens. Our Lectora variables are referred to in Javascript as Var<var name>. So a variable called Fact1 in Lectora will be referenced as VarFact1 in Javascript. You may also be wondering about the double equals signs, which signifies a comparison that evaluates to true or false (a single equals sign denotes a value assignment). Finally, remember to change “button75” with whatever ID your next button has.
This function we just wrote must be called from somewhere—but we won’t do that in this extension. Instead, we need to call it in response to one of our three buttons being clicked. If you have knowledge on the Javascript click event, you CAN do that just in this extension, but to make this as simple as possible, we will do something else. Instead, Lectora offers a “run Javascript” event action, which we will use. For each of our three fact buttons, attach a mouse click action in Lectora with a “Run Javascript” action type. Then, for the first, second, and third fact buttons respectively, insert code similar to this:
FIRST FACT BUTTON:
document.getElementById(“text88”).style.visibility = “visible”;
document.getElementById(“text88”).style.border = “1px dotted”;
VarFact1.set(1);
checkComplete();
SECOND FACT BUTTON:
document.getElementById(“text94”).style.visibility = “visible”;
document.getElementById(“text94”).style.border = “1px dotted”;
VarFact2.set(1);
checkComplete();
THIRD FACT BUTTON:
document.getElementById(“text101”).style.visibility = “visible”;
document.getElementById(“text101”).style.border = “1px dotted”;
VarFact3.set(1);
checkComplete();
You’ll notice that these three sets of actions do similar things. In plain English, the corresponding button’s fact text is made visible and a dotted border is put around it (something which cannot automatically be done in Lectora itself!). Then, the corresponding variable is set to 1, indicating the button has been clicked. Then we call our checkComplete function from before to check if ALL the buttons have been clicked, and show the next button if they have.
Note that each set of actions has two differences, though: the text ID that they act on in the first and second lines (remember that yours might be different!) and the variable name from the third line.
If you’ve set everything up correctly, you should be able to run this and see the next button and the three facts hidden at first, but each fact will appear once the corresponding button has been clicked, and the next button will appear when all three fact buttons have been clicked. Please note that you cannot simply preview this in Lectora—you have to preview the page in a browser for the Javascript to work. A finished version of this tutorial is available at www.lhtlearning.com/LHT%20Blog/VariableExample.zip
This was only a very simple example of how Javascript can be used in Lectora. With more knowledge of the language, you can greatly expand the types of things you can do for your eLearning courses.
