Navigation Using Javascript

I am wondering how many Lectora users have encountered this scenario during course development (?): You have defined your navigation buttons Next and Back at the title level to Go To the Next Page and Go To the Previous Page, respectfully. And then, on any one particular page, you need your Next Button or your Back Button to go somewhere besides the Next Page or the Previous Page? As an Accessibility Content Developer, this occurs quite frequently, as we are branching to different pages based on Accessibility needs of the user. In order to do this in Lectora can actually involve a bit amount of work. Though we have the ability to remove the inheritance of the Next or Back button on any particular page and then define a new Next or Back button on a particular page with a different navigation action, this only address part of the problems involved in doing this. One of the issues with this method is the tab order. If I remove the inheritance of the Back button on a particular page, and then define a new Back Button with a new navigation action on the page, the tab order of the new Back Button will probably NOT be the same as the inherited navigation, hence, I may have to remove the inheritance of several buttons and place new buttons on the page to keep the tab order correct. In addition, I may have swipe actions, keystroke actions, etc also defined at the title level to Go To Previous Page and all of these actions must also be removed from inheritance on a particular page and redefined on that page.

So, my goal was to design a way, using existing Lectora objects and my own JavaScript functions, to define all my navigation buttons, keystrokes, swipe actions, etc at the title level, and, if I need to change an action of navigation button on any particular page, just change the ACTION that the button executes at the page level. In other words, to provide a mechanism that separates the physical button on the web page from the action that it performs. I have successfully done this in the attached title.
I have attached a Library Object of JavaScript functions called Action Group JS Map and Call functions. Just add this to your course at the title level. It will add the JavaScript necessary for us to set things up.

How to use the JavaScript functions:

The first thing I do is create two action groups at the title level. I call them Next Button Default Action Group and Back Button Default Action Group. In the Next Button Default Action Group, I have one action, which is, Go To Next Page. In the Back Button Default Action Group, I have one action, which is, Go To Previous Page. These are the default actions that I want my Next and Back Button to have.

DefaultActionGroups

But now, here is the trick. How do I ‘map’ the Next and Back buttons at the title level so that they use these default actions, and yet, ‘override’ the action that the Next and Back buttons perform on any one particular page? What the Next and Back buttons really need are a more ‘permanent’ name that I can use to call an action group ‘mapped’ to this permanent name, and somehow, change the action group that the ‘permanent’ name runs on any particular page. Hence, this is where my JavaScript functions come in.
At the title level, I set up two actions. One action is called “OnShowRunJS Map Permanent Key Named Next to Next Button Default Action Group”, the second action is called “OnShowRunJS Map Permanent Key Named Back to Back Button Default Action Group”.

OnShowRunJS

They work exactly as they are described. For the On Show Event, Run Javascript and then call this function (for the Next button):

mapActionGroup(‘next’, ‘og428’)

What does this mean? mapActionGroup() is the name of Javascript function that I created, which will ‘map’ a permanent name to an action group. This function is being passed two parameters. The first parameter passed into the function is my permanent name that I want to use for, in this case, the Next Button, so, I just picked ‘next’ as the permanent name. (You need to remember this permanent name for the Next button, so, make it simple and easy to remember) The second parameter passed into the function is the HTML name of the action group, which, in this case, is the Next Button Default Action Group we created earlier. How do I get the HTML name of the action group? Select the Next Button Default Action Group in the Explorer tree in Lectora, go to Properties tab on the ribbon, in the Group box, there is small box with an arrow in it in the lower right hand corner. Double-click and it will give you the Description of the Action Group (which you can fill in with a description). At the bottom of this dialog box in the HTML name, which the parameter that you need for this function.

DefaultActionGroupDescription

Once our OnShowRunJS actions are created for the Next and Back Buttons, we need have our Next and Back buttons ‘call’ something to run the action group mapped to the permanent name (either ‘next’ for the Next Button or ‘back’ for the Back Button). So, for the Next Button, using a On Mouse Click Run JavaScript action, we call this JavaScript function that I created:

callActionGroup(‘next’)

Again, ‘next’ is the permanent name we are using for the Next Button Action Group we are currently calling, set up in the mapActionGroup() function.

Also, if you want to define any swipe actions, keystroke actions, etc, that will also perform the actions of the Next Button (or Back Button), you would add those actions at the title level and they would also Run JavaScript callActionGroup(‘next’).

This is the default set up for the title. Now, when you go to any page in the title and click the Next button ( or do a Left Swipe on a tablet or hit a keystroke command for the Next button) , it will go to the Next Page in the title, and the Back button will go to the Previous Page in the title.

Great!

Now, what do we do if we want to override, say, the Next Buttons action on any one particular page to do something else besides Go To Next Page.

To make things easy for myself, I just select the Next Button Default Action Group and the OnShowRunJS action for the Next Button at the title level and copy them, then paste a copy of them onto the particular page. Rename the Next Button Default Action Group to something else like ‘Next Button Page 3 Override Action Group’ and then change the actions of the action group to where you want the title to go when you hit the Next Button on this page. This new Action Group will also have a new HTML name ( that is different from the HTML name at the title level), so, get the HTML name of the Action Group and in the OnShowRunJS action that you copied from the title level, change the mapActionGroup() so that you supply it with the correct HTML name as the second parameter to the function. Finally, you need to remove the inheritance of the Next Button Default Action Group and the OnShowRunJS action from the title level on the particular page. Select the page in the Explorer tree, select Properties for the page from the ribbon and click on Inherit Settings. Change the drop down box from “All objects from parent” to “Specific objects from parent”. Move the Next Button Default Action Group and the OnShowRunJS action for the Next Button to the Excluded box. WARNING: Make sure that you exclude the Next Button Default Action Group and the OnShowRunJS action for the Next Button from the title level on every page that you override the Next Button’s functionality, or you may experience some JavaScript errors.

InheritSettings

And you are finished for this page! Now, when you Next Button runs the JavaScript function callActionGroup(‘next’) on this particular page, ‘next’ is now mapped to the new action group Next Button Page 3 Override Action Group (instead of the Next Button Default Action Group) and will call the actions in this action group instead. The same thing will happen automatically for your swipes, keystrokes, etc., so, you do not have to do anything specific to change the functionality for them.

See the sample course, my library object and documentation.

Tags: , , , , , ,

Comments

Your email address will not be published. Required fields are marked *