Interactive Timelines in E-Learning #146

Interactive timelines are a great way to visually display chronological events, milestones, and procedures. They’re super easy to build and can be customized to align with any design theme.

Timelines can also be used to tell stories about events that change over time. Timeline stories could include a company’s history, product lifecycles, or maintenance routines and procedures.

Challenge of the Week

This week, your challenge is to share an example that demonstrates how interactive timelines can be used in e-learning.

NOTE: Your entry can be anything from a rough concept to a polished example. The challenges are open to everyone, regardless of experience or skill level. If you need technical or creative help with your project, please ask in our forums and reference the challenge number you’re working on.

157 Comments

I love building timelines in Storyline!
Here’s a recent timeline freebie I shared: http://elearningdesigner.com/storyline/tabs-timeline/index.html
You can download the template from the ELH downloads page: https://community.articulate.com/download/storyline-2-tabs-timeline

This is beautiful! I am new to the SL community, so sorry if this is redundant, but do folks ever share how they created some of the effects in their pieces? I love the block arc effect and am wondering how you created them so symmetrically!

Hey David, I did a little but would be interesting to explore more what tool is better suited for this type of data visualization. Not sure if you are interested but they have so many cool examples here: https://public.tableau.com/en-us/s/gallery
P.S. Your visual inspired me to try smth like that in Articulate too

My timeline is a few slides in to the demo. Constructive criticism welcome!
Demo: http://allisongoldthorpe.com/wp-content/uploads/articulate_uploads/Supporting-Pollinators-in-Wisconsin/story.html
Post: http://allisongoldthorpe.com/using-an-interactive-timelines-in-elearning/

Hey everyone! I took this opportunity to make an interactive version of an older timeline about the peace talks between the Colombian government and the Fuerzas Armadas Revolucionarias de Colombia -- better known as FARC. It's a bit of a heavy subject, I know, but the fact that those involved accomplished what they did (which, admittedly, wasn't as much as many people had hoped) is still quite impressive and laudable. The design is a bit rough around the edges, but I think it gets the point across nicely.
Regular version here: http://andylocke.net/sites/default/files/colombiaPeace/story.html
HTML5 version here: http://andylocke.net/sites/default/files/colombiaPeace/story_html5.html

Hi Andy, your timeline through me off a little, but it's still great! I didn't know to trace the endpoints of the line to get the slides to transition. Perhaps just show the initial 2012? Anyways it's still really good.

Thanks Allison. I tried a few other things which killed some time, but once I had the assets it took a few hours. I will say that what makes this unique is that the embryo only appears to be a slider. It's actually a png sequence built in Adobe Animate placed into states of a stationary object.

I like how the slider thumbnail grows as you move through the timeline. Nicely done, Richard.
If you haven't already, will you share this example in both the Sliders and Video Background challenges?
https://community.articulate.com/articles/video-backgrounds-visually-engage-learners
https://community.articulate.com/articles/interactive-sliders-elearning-challenge

Namaste to all the fellow heroes and challengers,
Here is my submission of this week's challenge. As a history graduate I start looking at the history of Warfare and convert its different phases into a interactive timeline.
Here's the link for Demo:
http://creativtechnologies.com/blogpost/history_warfare/story.html

Hi everyone,
Here is my submission of the week. It gives you some tips on planting and growing trees: https://cloud.scorm.com/sc/InvitationConfirmEmail?publicInvitationId=f16990fc-14db-400e-b166-abf37bad7aea

Thanks, Jaime! It has some flaws, but the functionality it there. Sometimes, when I'm short on time, it forces me to stick to something clean and simple. It keeps me from going overboard with the clicky clicky bling bling.

Thanks, Hugo! It was actually all done within storyline. I created each of the boxes with a trigger to show a layer with more information about that date. Then I lined up all the boxes horizontally on the base layer and grouped them all together. That way I could add motion paths to the entire group, one going left, one going right, both with a relative starting point. Then it was just a matter of adding the buttons to trigger the group to move along those motion paths!

I wanted to re-create this javascript timeline: https://timeline.knightlab.com/
Unfortunately I didn't have time to do more than three points, here's the demo: http://malialis.ca/articulate/challenge146/story.html
Eventually I'd like to make the points on the timeline more noticeable by having them animated and the sliders move left to right when going back in time.