Customize Lectora's Table of Contents with Visited-page and Chapter Icons

Internal clients often ask me to include a table of contents (TOC) in Lectora-based learning. Usually this involves identifying, on the TOC display itself, whether or not the learner has visited a page. The clients also almost always want other features, such as the company logo.

At first, I did this by creating my own custom TOC written with HTML, JavaScript, and CSS, combined with huge action groups and unique actions on each page running those huge action groups. By doing this, I accomplished my goal of tracking which pages learners have visited. However, it is not a very reusable solution and is fraught with places to make a mistake. I needed to find a friendlier, more reusable method.

Tailor-made TOCs

Ayesha Habeeb Omer, chief operating officer at CommLab India, wrote a wonderful blog entry on the Lectora site, showing how to customize the Lectora TOC. This is well worth reading—I certainly gained a lot from it.

Applying Ayesha’s ideas to my previous attempt, I was able to further modify the Lectora TOC, creating a much more user-friendly set of instructions. This reusable approach to customizing the TOC adds a few actions to identify visited pages. It also modifies, post-publishing, some of the JavaScript and HTML that Lectora creates, to complete the transformation.

The basic steps to customize the table of contents are as follows (In the next subsection, I will walk you through each one, with screenshots):

1. Add TOC in Lectora
2. Identify the HTML name of the TOC object
3. Add button to toggle visibility of the TOC
4. Publish your lesson to HTML
5. Find the following files in the root folder of your published lesson:
1. trivantis-toc.js
2. tocXXX.htm, where XXX is the HTML name of your TOC object
6. Make changes to trivantis-toc.js, tocXXX.html, and page-visited actions in Lectora
7. Publish to HTML again
8. Replace published trivantis-toc.js and tocXXX.html files with modified files
9. Add appropriate image/icon/graphic files to the images folder
10. View results

Step-by-step procedure

Step 1—Add an “Indented List” TOC in Lectora. Uncheck the “Initially Visible” checkbox, and check the “Show Pages” and “Use Icons” checkboxes (Figure 1).

Step 2—Identify the HTML name of the TOC object (in the example in Figure 1, this is “toc354”).

Figure 1: Setting up the TOC object

Step 3—Add a “Menu” or “Table of Contents” button to toggle visibility of the TOC (Figure 2).

Figure 2: Setting up the Visibility toggle for the TOC

Step 4—Publish your lesson to HTML. You must do this to access the TOC files Lectora generates.

Step 5—Find the following files in the root folder of your published lesson (Figure 3).

• trivantis-toc.js
• tocXXX.html, where XXX is the HTML name of your TOC object

Figure 3: Finding the HTML and JavaScript files to change

Step 6—Make changes to trivantis-toc.js, tocXXX.html, and page-visited actions in Lectora.

See the section below titled “Step 6 changes.”

Step 7—Publish to HTML again.

Step 8—Replace published trivantis-toc.js and tocXXX.html files with modified files.

Step 9—Add appropriate image/icon/graphic files to the images folder.

If Lectora automatically inserts the images you want into the images folder when you add the TOC object, i.e., trivantis-check_off.gif and trivantis-check_on.gif, you will not have to add any images. However, if you chose other icon images, such as the alternate images (complete_icon2.png and incomplete_icon2.png) shown in Table 1 (under the subheading “Images” further down in this article), you need to copy them to the images folder after the initial publishing.

Step 10—View results (Figure 4).

Figure 4: The finished TOC

Step 6 changes

Copy trivantis-toc.js and tocXXX.html to another folder outside of the published area. This is so you can modify them and not worry about Lectora overwriting them during required subsequent publish-to-html actions.

Add a pagevisited state for the addIcon object in trivantis-toc.js.

Around line 519 in the initImage function, find the AddIcon(iNA,"page",pageIcon) line. This creates the page state and associates the pageIcon variable to that state. Add this line to create a pagevisited state and its associated icon:

AddIcon(iNA,"pagevisited",pagevisitedIcon)

Do the same for the “chap” state where chap stands for chapter. If you want to identify when a user completes a chapter you would add the following line:

 AddIcon(iNA,"chapvisited",chapvisitedIcon)

When you have added these lines, the initImage code will look like this:

 function initImage(){
.
.
.
  AddIcon(iNA,"au",auIcon)
  AddIcon(iNA,"chapvisited",chapvisitedIcon)
  AddIcon(iNA,"chap",chapIcon)
  AddIcon(iNA,"pagevisited",pagevisitedIcon)
  AddIcon(iNA,"page",pageIcon)

  AddIcon(iTA,"n",nIcon)
.
.
.
}

Next, locate the section that creates the Global Variables. This is around line 710. Now that the pagevisited and chap states are created, identify the icon used for the newly created visited states. Change the pageIcon variable to be equal to the icon graphic of your choosing and the pagevisitedIcon variable to the icon graphic filename. The example lines below set trivantis-check_off.gif for non-visited states and trivantis_check_on.gif for the visited states.

// Global variables
// ****************
var indexOfEntries = new
Array
.
.
.

// pageIcon = "tocpageicon.gif"
pageIcon = "trivantis-check_off.gif"
pagevisitedIcon = "trivantis-check_on.gif"

//chapIcon = "tocchapicon.gif"
chapIcon = "trivantis-check_off.gif"
chapvisitedIcon = "trivantis-check_on.gif">

auIcon = "tocauicon.gif"
.
.
.

Do this for both page and chapter states.

Images

Here are the icons for the pages, chapters, SCOs, and status.

Modify the table of contents HTML page

This section shows how to modify the HTML code of the TOC file identifying a page’s visited state, evaluate each page’s visited variable, and then display the appropriate HTML and icon.

The TOC is created using JavaScript in tocXXX.html. An object called “fT” contains the entire HTML code for the table of contents. An embedded object within the fT object creates each chapter and page. Chapters and pages are created using different methods in the trivantis-toc.js file. Pertinent methods are NewFolder, NewLink, insertFolder, and insertEntry.

function NewFolder(d, h, t){
  folder = new Entry(d, h, t)
  folder.isFolder = true
  return folder
}
function NewLink(d, h, t){
  linkItem = new Entry(d, h, t)
  linkItem.isFolder = false
  return linkItem
}
function insertFolder(p, c){
  return p.addChild(c)
}
function insertEntry(p, d){
  return p.addChild(d)
}

Create chapters by calling the insertFolder function. This function identifies the folder object and then calls the NewFolder function, which expects as parameters the title of the Chapter that will display, the HTML page of the initial page of the chapter, and the “state” of the icon to be shown. In this example the “state” is “chap.”

aux1 = insertFolder(fT, NewFolder("Chapter 1 - this is editable", "index.html", "chap"))

Create pages by calling the insertEntry function. This function identifies the folder object and calls the NewLink function, which expects as parameters the title of the page that will display, the HTML page, and the “state” of the icon to show. In this example the “state” is “pagevisited.”

insertEntry(aux1, NewLink("Title Page - this is the name of the page in Lectora", "index.html", "pagevisited"))

When the user selects either the chapter link or the first page of the chapter they are directed to the same page. In the example just shown, both link to index.html.

You have now identified each entry in the chapters and for each page. The next step is to evaluate whether the page was visited or not. To do this you evaluate the value of the page-visited variable for each page. Remember the naming convention we created for the page visited variables. cXpY_visited where c signifies a chapter, X is the number of the chapter, p signifies a page, and Y is the page number. For example, c1p1_visited is the first page of the first chapter. To access the variable using JavaScript, you need to look for VarcXpY_visited.

The HTML name of the action that initializes c1p1_visited is action 443. The HTML name of the action that sets c1p1_visited on index.html is action372.

In index.htm line 227:

function action443(fn){
   if(Varc1p1_visited.equals('~~~null~~~'))Varc1p1_visited.set('0');
    if(fn) eval(fn);
}

Also on line 272:

function action372(fn){
    Varc1p1_visited.set('1');
    if(fn) eval(fn);
}

This shows how the Lectora variable c1p1_visited is called Varc1p1_visited in JavaScript. Find the value of the variable using the getValue method: Varc1p1_visted.getValue(). Finally, since toc354.html is loaded into each page, you need to use parent.Varc1p1_visted.getValue() to find out the value.

If the page was visited, the value should equal 1. If it is 1, ensure that the pagevisited state is set. Do this as follows:

if (parent.Varc1p1_visited.getValue()==1) {
	insertEntry(aux1, NewLink("Title Page - this is the name of the page in Lectora", "index.html", "pagevisited"))} 
else {
	insertEntry(aux1, NewLink("Title Page - this is the name of the page in Lectora", "index.html", "page"))
}

Do this for each page. The final code will look like this file (tocXXX.html). (In this article, the example file is toc354.html.)

Mark the chapter completed

To mark an entire chapter completed, simply verify that each page in the chapter was visited. In the example below Chapter 1 has six pages. The “if statement,” using multiple AND (&&) operators, verifies that if each page has been verified the “chapvisited” state will be displayed.

if ((parent.Varc1p1_visited.getValue()==1)&& (parent.Varc1p2_visited.getValue()==1)  && (parent.Varc1p3_visited.getValue()==1)  && (parent.Varc1p4_visited.getValue()==1) && (parent.Varc1p5_visited.getValue()==1) && (parent.Varc1p6_visited.getValue()==1)   ) {
	aux1 = insertFolder(fT, NewFolder("Chapter 1 - this is editable", "index.html", "chapvisited"))  
	}
  else {
		aux1 = insertFolder(fT, NewFolder("Chapter 1 - this is editable", "index.html", "chap"))  
	}

Conclusion

Using this repeatable process you can set up your TOC within Lectora and easily customize it to look how you want and provide valuable information to your users.

September 24, 2012

Join or login to save this to your library

Contributor

Greg Gardner

Director of Business Development, Sify Technologies

Share

Category

Learning Solutions

Topics

Design & Development Tools, Elearning Development Strategies, UX & UI