• Blog
  • Meet Our Trainers
  • Training Schedule
  • Contact
  • Privacy

As heard in training...

How Do I Display “Scrollable” Content On Screen?

December 3, 2019   Yukon Learning    Leave a Comment

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!)

Inserting a Scrolling Panel

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.

Inserting a text box and typing = L O R E M ( 5 ) to create placeholder text

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!

Dragging placeholder text into the Scrolling Panel

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.”

Inserting a Checkbox and typing "I 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.

Dragging the Checkbox into the Scrolling Panel

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.)

The States panel of the Checkbox reveals that the Selected State is the one with the checkmark

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.

Adding a Condition that the Checkbox is equal to Selected on the "Jump to next slide" trigger

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

~ Shane

Leave a Reply Cancel reply

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

     

Join  

Enter your name and email  below to instantly subscribe to The Articulate Trainer blog:

 
 
 

We take your privacy seriously. No spam ever.

  • Home
  • Blog
  • Meet Our Trainers
  • Training Schedule
  • Contact
  • Privacy

Copyright © 2023 The Articulate Trainer

Articulate, Articulate Storyline, and Articulate 360 are the trademarks or registered trademarks of Articulate Global, Inc.
Yukon Learning and Making E-Learning Easy for Everyone are the trademarks or registered trademarks of Yukon Group, Inc.