Rebuild This Interactive Timeline #13

Rebuild This Interactive Timeline #13

March 1, 2021 Off By JR

I have a back catalogue of small instructional design challenges and charrettes that I’ve been meaning to build into something bigger one day. That is obviously taking too long, so here’s a new idea. The Articulate E-Learning Heroes Community runs a weekly eLearning Challenge. I’ve mentioned before that often different IDs in different contexts will use different tools, and while I’ve used some of Articulate’s products, I’m primarily a Mac user. This means that a number of their products are not available to me. So instead, I thought, rather than being an Articulate eLearning Hero, that I could be an InArticulate eLearning Hero. So here it goes.


This week, your challenge is to rebuild Big History Project’s interactive timeline.

This is our first challenge where everyone is working from the same source project. The tool you use to recreate this project will impact your design considerations. For example, the dynamic menu effect is not possible with most tools. You’ll want to capture the essence of the effect, whichever tool you choose.

Recreating existing projects is a great way to practice your course design and technical skills.

David Anderson

Discussion Questions

Along with your project, share some insights about how you approached your project.

  • How long did it take you to build your demo?
  • How did you approach your design and development? Did you sketch out the project? Or did you jump right in and start building?
  • What was the biggest challenge you encountered?
  • Would you do anything differently?

The Project

How long did it take you to build your demo?

It has been quite a while since I’ve used the H5P Timeline tool (based on KnightLabJS Timeline). While listening to a webinar, flicking back and forth between different open content repos, and the Big History Project timeline this took me about an hour. There were some peculiarities with the content type that took me a bit longer than I thought they would which I’ll discuss later. The timeline that is available now is also very different from what was available at the time. If you check out the screenshot on the original challenge, and compare that to the current site you’ll see that the Column content type from H5P would have been a much better fit.

How did you approach the design and development?

H5P content types tend to be authored in the same way as one another. The fields you fill out are pretty consistent from type to type: title, item, description, asset, etc. For the timeline you have the main title slide, then each new item is a period of time. That period of time comes with start date, headline, description, and asset as the major components. Once you develop the flow of filling those out there’s not a whole lot to consider because the output of this content type is pretty structured. So to answer the question, it’s easy to just jump right in and start building.

What was the biggest challenge you encountered?

The first challenge was actually the available dates. The KnightlabJS tool was designed for reporting on things that happened during human history. So the furthest back in time you can create by default is about 271000 B.C.E. You’ll see on the landing slide that I put in a disclaimer about the years being YEAR x 10^5 to make up for this shortcoming. The next limitation I found with this content type vs. others was the asset. The asset draws on a URL and works with a handful of oEmbed enabled sites:

URL to the media (Twitter, YouTube, Flickr, Vimeo, Wikipedia, Google Maps and SoundCloud are currently supported).

You can add a thumbnail, but the intention of this is to connect to those other sources. Other content types with H5P all media to be loaded directly into the H5P activity, which would go a long way to making the asset more flexible. A secondary limit would be that each period can only have one asset attached to it. If I spent more time and thought creatively how to use the dates and headings in the updated Big History Project I think I could come up with a solution to the “one asset” problem, but not being able to upload an asset (other than a thumbnail) was a draw back.

What would you have done different?

Had I done this challenge when it was released (was H5P even around then?) it would have converted really nicely I think. I think if I was given the challenge now of “redesign the Big History” site as a challenge, and not limited myself to a timeline, then I would have used the H5P Column type to mashup a bunch of different activities, like in the BHP site they have some quizzes embedded. The Column would tackle that nicely.


Photo by nima gerivani from Pexels