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.
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).
Exit this window, and also change the type of the extension to “Bottom of file scripting.”
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:
if(VarFact1.getValue() == 1 && VarFact2.getValue() == 1 && VarFact3.getValue() == 1)
document.getElementById(“button75”).style.visibility = “visible”;
FIRST FACT BUTTON:
document.getElementById(“text88”).style.visibility = “visible”;
document.getElementById(“text88”).style.border = “1px dotted”;
SECOND FACT BUTTON:
document.getElementById(“text94”).style.visibility = “visible”;
document.getElementById(“text94”).style.border = “1px dotted”;
THIRD FACT BUTTON:
document.getElementById(“text101”).style.visibility = “visible”;
document.getElementById(“text101”).style.border = “1px dotted”;
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.