How Can Learners Explore a Larger Document in My Course?

We love getting these kinds of questions in our hands-on Articulate training. Why? They address real issues that most e-Learning developers deal with every day. If it were up to us, all e-Learning courses would look incredible with great graphics, with fewer words on screen, and everything would be highly interactive…maybe even fun. We all want to build that kind of course!

The truth is, we have to work with real-life content that can make finding the balance between what is “incredible” and what meets the needs of your stakeholders challenging. This is the art of building great e-Learning courses.

So, what is the question? Oh, now I remember…

Like most questions we’re asked involving Storyline, there’s always more than one solution. That’s true here as well. Below is a quick list of some of alternative options to consider:

• Create a button/trigger that jumps to a file
• Add the document to the Resources tab in the Player
• Put in a Scrolling Panel
• Use the Zoom Picture option
• Create a drag and drop interaction
• Execute JavaScript to use a PDF reader (not addressed in this blog entry) 

You may have other ideas as well!

I should add that when this question was asked, some of these options were dismissed because the Subject Matter Expert (SME) did not want the file downloaded (instead, preferring for it to be read on screen). For this blog entry, we will cover all of these options except using JavaScript.

Visit this link to see these options in action.

Here’s how we built it:

For the first two options, we’ll leave the document as a PDF file. For the others, we saved the document as a picture, as it provided more flexibility.

Option 1: Create a Button/Trigger that Jumps to a File

This option downloads the document to the learner’s computer. From here, they can save, print, share, view, etc.

Here are the steps we used:

1. Select Insert |  Button.
2. Add a trigger to the button to “Open URL/File” when the user clicks.

Option 2: Add the Document to the Resources Tab

This option also downloads the document to the learner’s machine.

To utilize this option, take the following steps:

1. Select Home | Player.
2. Choose Resources from the ribbon.
3. Add the file you want to make downloadable.
4. Confirm that the Resources checkbox in the Features tab is selected.

Option 3: Zoom Picture

This option utilizes a picture. Like the first two, this is a very simple option. It also works best if the document is only one page. It’s fast and easy, but you do not have a lot of control over where it goes and how it looks.

Here are the steps to accomplish this option:

1. Select Insert | Picture.
2. Resize the picture to a smaller size (Otherwise, Zoom Picture won’t work!).
3. With the picture selected, select Picture Tools Format | Zoom Picture (A magnifying glass will appear on the picture!).

When the course is previewed or published, the learner can click the image to see an enlarged view of the document. Selecting it a second time (or anywhere else) closes the large view.

Option 4: Scrolling Panel

This option provides you with a little more control and works well even if the document is longer than a single page.

Here are the steps for this option:

1. Select Insert | Picture.
2. Resize the picture to a thumbnail size.
3. Create a new layer.
4. Add a Scrolling Panel on the Layer from the Insert tab.
5. Insert the picture of your full-sized document and resize it to the size you prefer. (It will be bigger than the canvas, but that’s fine.) Since you are going to pull it into the Scrolling Panel, make sure you do not size it too wide since the scrolling panel only scrolls vertically, not horizontally.
6. Drag the document into the Scrolling Panel.
7. Create a close button with a trigger that, when clicked, hides the layer.
8. On the Base Layer, add a new trigger to the thumbnail to show the layer.

Option 5: Drag and Drop

This option is not quite as intuitive, but it’s just as simple. It works well for just about any size of document or canvas.

1. Select Insert | Picture.
2. Resize the picture to a thumbnail size.
3. Create a new layer.
4. Add a hotspot to the layer that covers the entire canvas.
5. Insert the picture of your full-sized document and resize it to the size you prefer. (It will be bigger than the canvas, but again, that’s OK!)
6. This step will feel a little strange…add a drag and drop trigger. It really does not matter what the action is because we are really not triggering anything. We are just creating the ability to drag the document. I typically create a trigger to show a layer, but leave the layer unassigned. The item being dragged should be your document (in my example, it’s a group of three images.) 
7. Right-click the hotspot and select Drag and Drop | Free. 
8. In our example, we also added a box of instructions to the learner that exits after around eight seconds.
9. Add a new trigger to hide the layer. Since the document was covering the entire screen, we used a trigger to hide the layer when the user presses a key. In the example, we used the Escape key. (If you choose the same, note that this will not work in preview, since Escape is used to exit the preview mode.) 
10. On the Base Layer, add a new trigger to the thumbnail to show the layer.

The user will be able to move the document around by clicking and dragging the document around the screen.

Summary

These are five simple solutions to a common question. You may download a copy of this example file at this link. As always, let us know what you create or reach out to us with your questions!

That’s Storyline, and I’m sticking to it.

~Ron

Update: Please note that the interface of the faster new trigger workflow (in Storyline 360 update 3.33.20625.0 or later) will appear slightly different! While the process is the same, this article uses screen captures from the classic trigger workflow.