Creating Interactive Documents with Sliders in E-Learning

Interactive Documents with Sliders #300: Challenge | Recap

Happy 300th challenge, E-Learning Heroes!

Using Sliders to Create Interactive Documents

In a recent post, John Berendes from Yukon Learning, shared a fun tutorial on using sliders to page through a document or policy manual. While this may not be an everyday use case for sliders, it’s a great way to begin seeing new ways to navigate information-heavy content in e-learning. Check out his post and download the source file to see how he put it together.

Using Sliders to Create Interactive Documents

View the tutorial

Using Sliders to Create Interactive Instruction Manuals

One way to approach your slider document is to align the visual elements to your content. Below is a simple example that uses a custom background and slider thumb to align with the LEGO instruction manual. 

Using Sliders to Create Interactive Instruction Manuals

View the example

Challenge of the Week

This week, your challenge is to show how sliders can be used to create interactive documents or instruction manuals. 

I’ve included some slider resources below. If this is your first time working with sliders, let us know in the forums if you get stuck or have questions.

Resources

Articles and tutorials

Webinars

Challenges

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.
  • Social Media: 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 slide into this week’s document challenge, check out the creative ways static content can be transformed into interactive e-learning:

Static to Interactive E-Learning Examples

Static to Interactive E-Learning Examples RECAP #299: Challenge | Recap

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.

169 Comments
Jodi Sansone
Kimberly Eng
Jonathan Hill
Daniel Jovanov
Daniel Jovanov
Ron Katz
Alex Jinca
Isaac Chavez
Jen Edgerton
Ron Katz
Ron Katz
Yvonne Rosas
Ron Katz
Yvonne Rosas
Carrie Gauthier
Thierry EMMANUEL

Thanks. I'm not sure I understand what you really mean by "smooth transition". Maybe the way I gradually reveal the colored curves on the first slide, and the other information on the second. In both cases, I'm using a primary cursor (the one with years) with its own variable. And all the other cursors use this same variable, so they move at the same time, but not the same length. For example, on the first slide there's a slider with a really big white thumb (on a transparent track) sliding to the right and revealing the background and curves. And four vertical sliders (with "India" "China" images etc. on the thumbs) on the right also using the same variable: this country run is the most visual and important information on this slide, to my notice. Same idea on the second slide: the ma... Expand

Thierry EMMANUEL
Molly Fisher
Jeffrey Riley