As we network with newer Lectora developers, we are often asked to clarify the use of variables in the tool. As a reminder, variables within Lectora hold key pieces of information that you can later refer to and act upon.
My next few posts will attempt to provide a primer on using Lectora variables to accomplish a few basic tasks. Once you begin using them, all sorts of possible uses will emerge.
Note that the actions I’ll mention are included as part of the normal Action dialog box drop-down list.
And once you add a new custom variable to a course, it also becomes available for you to select in an Action dialog box drop-down list.
So once you get the hang of it, you are really just selecting things rather than having to structure the code yourself (like you would in JavaScript). Once your initial variable and actions are set up, this saves you a lot of time.
For our first example, let’s manipulate a variable to enable navigation within a course. In another post, we will look at testing against an answered question and then later at using a learner’s name within text in a course.
Navigation example
Suppose that you have three photos on a page and you want the learner to click on each to reveal some hidden text. The text is important so you don’t want the learner to be able to leave the page without clicking each of the three photos. You can create a variable to help with this.
1. In this scenario, first disinherit the next button from the page. Add a copy of the same Next button back to the page and make the On Click setting of that button (on the On Click tab) ‘None’ (meaning it won’t advance until you add another action to it).
2. Next, add an action to each of the three photos. The action would be On Click, Modify variable _gonext (or whatever you want to name it, but I recommend using the underscore at the beginning of the name because it will make it list at the top of the variables list so you can easily find it).
3. Then select ‘Add to variable.’ For one of the photos, enter the letter a (‘a’), for the second b, and for the third c. Some developers will simply add the number ‘1’ to the variable each time a photo is clicked, resulting in the value equaling ‘3’ once all three photos have been clicked. That will work too; however, Lectora won’t know if the learner simply clicked the same photo three times in a row, resulting in the variable = 3, rather than knowing that the three separate photos were clicked. Using letters gives you a lot more control.
(Note that I also recommend manipulating a single variable as much as possible rather than creating a unique variable for each photo; the fewer variables you have to track and test against later, the simpler your coding becomes.)
For example, the action on the second photo would look like this.
So now, once the learner clicks all three photos, the _gonext variable will equal some combination of “abc” depending upon which order the photos were clicked (if they clicked them in opposite order, the variable will equal “cba”).
4. At this point, add an action to the Next button (that you just added to the page) that instructs On Click, Go to Next Page.
5. And here is where the variable comes in. Go to the conditions tab of the action and add three conditions:
- If _gonext Contains a
- If _gonext Contains b
- If _gonext Contains c
It’s important that you use three separate conditions because you don’t know in which order “abc” will appear. By setting your conditions this way, it doesn’t matter which photo the learner clicks first and you won't have to test against all the possible options. It only matters that they do indeed click each photo.
It’s also important that you select‘All of the Following.’ This instructs Lectora to only perform the action if all of the criteria is met. The default setting is ‘Any of the Following’ which means that your learner could advance after clicking only one of the photos.
Now that you’ve done all this, the Next button won’t work unless the learner clicks all three photos and at least sees whatever you intended.
6. As a best practice, you might also have a hidden text box on the page that says “You must click each photo before continuing.” or something similar. This way the learner will know why they can’t advance to the next page if they click the Next button before completing the criteria you established.
If you want to add this functionality, go to the Else tab of the Action you just created on the Next button and instruct it to show this text box.
Now the text box will show if the learner clicked the Next button but all three photos had not been clicked (in other words, the condition we just set failed).
Hopefully this post is helpful to those of you exploring Lectora variables for the first time. I’ll provide another example in my next post.
And, as always, if you have any questions, please let me know.