3 Ways to Link in Lectora

by Jonathan Shoaf

As a developer you learn quickly that there are always multiple solutions to a problem. This can be frustrating at first but soon you learn the benefits and drawbacks of each individual solution. Lectora is a popular tool for creating e-Learning content for exactly this reason--it provides multiple ways to solve problems. In this blog post I'm going to talk about one example of this: hyperlinks.

Problem

You want to link to content from your Lectora self-paced course. Which approach do you use?

Solution

There are three main approaches to use in Lectora. This blog post explains some of the benefits and drawbacks of each:

1. Using a Lectora Action
2. Using a Lectora Hyperlink
3. Using an External HTML Object

Let's look at three approaches to hyperlinking--starting with the most common and ending with the least common.

1. Using a Lectora Action

Using a Lectora action is the most common way of linking in Lectora. Using this method you access Lectora's actions which provide an easy way to start a lot of tasks. The steps to do this are as follows:

1. Insert a Text Object by going to the menu and choosing Add > Object > Text Block
2. Make sure the text object is selected
3. Insert an Action by going to the menu and choosing Add > Action
4. Use the Go To action and select a Target
5. Click Ok to close

For those familiar with HTML, you may find it interesting what goes on behind the scenes. Lectora is not actually using the HTML <a> tag. Lectora uses the <div> tag and attaches javascript code to the onUp event. You don't need to worry about these details, just remember this if you use CSS in your project. Adding styles for the <a> tag will have no effect on links created using Lectora Actions.

Lectora Action
Benefits: Uses Lectora's powerful Action system
Drawbacks: Limited to Lectora Actions, does not use <a> tag

2. Using a Lectora Hyperlink

Often, you will need to link to content embedded in a paragraph. To do this, use a hyperlink. Use the following steps:

1. Insert a Text Object by going to the menu and choosing Add > Object > Text Block
2. Type in your text and select the word you want to use as a hyperlink
3. Choose the Hyperlink icon from the toolbar
4. Make sure the Go To action is selected and choose a Target
5. Click Ok to close

The benefit to using this method is that you can embed a link in the middle of text. Also, behind the scenes Lectora uses the <a> tag so it can inherit any CSS you have coded for hyperlinks.

Lectora Hyperlink
Benefits: Uses Lectora's powerful Action system, Embeds in text, uses <a> tag
Drawbacks: Limited to Lectora Actions

3. Using an External HTML Object

For a variety of reasons, you may need additional flexibility in how you create hyperlinks. For the most flexibility, use the External HTML object to write HTML code to create the link. Use the following steps:

1. Insert an External HTML object on the page by going to the menu and choosing Add > Object > External HTML
2. Type in your HTML link for example:
   
   
   <a href="http://www.google.com">External HTML</a> based link
   
   
3. Click Ok to close

Of course, you will need to know HTML to be able to use the External HTML object. However, you will have complete control over how the link works. For example, you can add javascript and/or style markup. You can also link to content within your Lectora project using the trivExitPage method. This is the method used behind the scenes when you create a Lectora Hyperlink. For example, you might use the following code to link to a page named "Page 2":

<a href="javascript:trivExitPage('page_2.html', true)">External HTML</a> based link

External HTML Object
Benefits: Complete flexibility
Drawbacks: Requires knowledge of HTML, does not preview in Lectora, may require knowledge of how Lectora works behind the scenes

Would it help to see this in action? Click here to see the sample project.