How Do I Display “Scrollable” Content On Screen?

At Yukon Learning, we believe that e-Learning should be engaging with graphics, animations, and the like. Sometimes, however, we’re asked to display a large amount of text on screen, such as legal material or a Terms of Service policy. In this blog post, we’ll walk through a specific Storyline 360 build that’s perfect for this use case.

The Scrolling Panel is a Storyline 360 feature we really can’t get enough of. It helps us display endless content without ever leaving the page (since space on a single slide is in fact limited), by providing learners a scrollbar! We can scroll through an unlimited amount of text, visuals, and even interactive elements.

Additionally, if that content is required to view, we’ll take this design a step further to ensure the learner has scrolled down through all of the material before moving forward. You can check out our example here, and then let’s get started!

Incorporating a Scrolling Panel

First, we’ll create a Scrolling Panel via the Insert tab. (It doesn’t look like much at first, but trust me it will!)

Tip: Insert content outside of the Scrolling Panel first and then drag them into the panel, simply to give you more space for initial development.

For the purpose of this exercise, if you need a bit of generic placeholder text to work with, insert a text box onto the slide and type “=lorem(5)” before pressing the Enter key… It’s like magic! (We use this placeholder text at Yukon Learning when crafting custom templates so learners can visualize how content will look in conjunction with the imagery and interactivity.) Moving forward, you can change the number “5” in the “lorem” statement to the amount of paragraphs of placeholder text you need.

Once you’ve resized the text box (or other content) just thin enough to fit within the Scrolling Panel, drag it straight into the panel. You should see a scrollbar materialize onto the slide!

Learning that Checks the Box

Now that we have content to scroll through, we’ll implement a simple checkbox for learners to acknowledge they’ve seen all of the material before advancing.

On the same slide with the Scrolling Panel, insert a checkbox via Insert | Input and select your preferred style. Then, click onto the slide outside of the Scrolling Panel to create it.

Tip: Eventually, the checkbox will live within the Scrolling Panel, but for ease of development, we like to insert the checkbox directly onto the slide, outside of the panel first, and then drag it in.

Here, you can immediately begin typing into the checkbox field, no additional text box required. Maybe type something like “I have read and agree to the terms.”

Now that the checkbox is ready, use the scrollbar on Scrolling Panel to scroll to the very bottom of your content, and then drag the checkbox there.

Tip: You might pause and take a moment here to re-position the checkbox or other content and get all of the elements within the Scrolling Panel situated properly. (Alternatively, you could fine-tune the spacing and positioning of all of your material first, and multi-select to drag everything into the Scrolling Panel simultaneously.)

Under One Condition

Before requiring that the learners scroll through all content and check the box, it’s important to understand that once the checkbox is checked, it’s technically showing its Selected state. (We won’t make changes to the state here. However, it’s good to be aware that the checkmark itself equates to the “Selected” state for this next step.)

Big picture moment: Finally, we’re ready to tell Storyline 360 to only advance to the next slide if the checkbox is checked.

The “big picture” moment directly above translates to:

1. Creating any actions means we’ll be adjusting or creating triggers, like programming without having to know how to program.
2. The word “if” usually means we need to add a Condition to a trigger, in this case the specific trigger for advancing to the next slide.
3. The Condition for the navigation trigger (“Jump to next slide”) will be that the checkmark is in its “Selected” state.

To implement the logic above, locate the trigger that allows your learner to jump to the next slide and open it (by double-clicking the trigger or selecting it and using the pencil icon). Add the Condition: if the checkbox is equal to its Selected state.

That’s it! When you preview your course, you should now only be able to navigate forward after scrolling down and checking the box. We’ve given you a .story file for download here to see how it should look in Storyline. Feel free to deconstruct it!

I hope this checks off some items for your e-Learning projects. If you have thoughts or questions, please leave us a comment below.

~ Shane