Using Scrolling Panels in E-Learning #273

Scrolling Panels in E-Learning #273: Challenge | Recap

A common design challenge for course designers is finding ways to break down and organize content into small, digestible chunks. Tabs and accordion interactions can do this by grouping related content into meaningful sections. Labeled graphics are another popular click-and-reveal interaction that lets learners pull information by clicking interactive markers.

But sometimes the content still won't easily fit on the slide. When shrinking or chunking content isn't an option, try adding an interactive scrolling panel.

Scrolling panels are a great way to present large images, lengthy text blocks and other graphics that don’t fit well on a slide. And that’s what this week’s challenge is all about!

Challenge of the Week

This week, your challenge is to share one or more ideas for using scrolling panels in e-learning courses.

New Entries Only!

We hosted our first scrolling panel challenge three years ago and the entries were amazing. To keep things fresh, we’re asking you share a new entry or rework a previous example for this week’s challenge.

User Guide

Share Your E-Learning Work

  • Comments: Use the comments section below to share a link to your published example and blog post.
  • Forums: Start  your own thread and share a link to your published example..
  • Personal blog:  If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure.
  • Twitter: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness.

Last Week’s Challenge:

Before you dive into this week’s challenge, check out the fantastic tabs interactions your fellow community members shared over the past week:

Tabs Interactions in E-Learning #272

Tabs Interactions in E-Learning #272: Challenge | Recap

Wishing you a scrolltastic week, E-Learning Heroes!

New to the E-Learning Challenges?

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

187 Comments
Jodi M. Sansone
Norma Fecteau
Jonathan Hill
Jonathan Hill
Rema Merrick
Joseph Suarez
Preethi Ravisankar
Preethi Ravisankar
Jonathan Hill
Chris Hodgson

I believe it's because the code snippet provided by Preethi was slightly 'unfinished', in that there was a height variable declared to calculate the scroll object but this was not actually called upon within the main function. When setting the variable in Storyline if we instead said player.SetVar("num",x[0].scrollTop/height*100); We would be converting the slider position into a percentage, whereby the very top of the slider would be 0 and the bottom would be 100 across any screen size. What this doesn't account for however is if the user changes their screen 'window' size during the activity (e.g. if they were on their phone and switched from portrait to landscape mode) We can however account for this using the .resize event handler in JQuery! So the final code would look so... Expand

Preethi Ravisankar
Catalina Sandor
Paul Alders
Andrzej Jabłoński
Alex Jinca
Alex Jinca
Jonathan Hill
Alex Jinca
Carrie Gauthier
Chris Hodgson