Table of contents
- What is TimelineJS?
- How does it work?
- How to get your timeline online
- “Can I use it too?”
- Overall conclusions
I’ll be the first to admit that I’m not that great with remembering exact dates. If I do, it’s because I’ve spent a lot of time working with them. It took me a good decade to remember the reigning dates of my “favourite” Tang emperor (626-649CE). Doesn’t sound great for a history professor or a Tang historian, does it? But it’s like mathematicians will be the first to tell you that maths is not really about adding or subtracting numbers with ease, or knowing how to split the bill faster than anybody else.
Yet it is important in history to know when things happened, so we don’t end up in anachronistic constructions of the past, or so we can see how one event or person possibly influenced, or received influence from another event or person. (Note: correlation ≠ causation.)
If you’re dealing with Chinese history, and like my students you’re new to it, it turns out it’s really hard to keep all that info straight. I found there were some very constructive reinterpretations of China’s glorious past. And most troubling for twentieth century history, I realized that students skipped the Republican era (1911-1949) in most of their work. That meant the relevance of that era was not clear, nor was its location on their mental timeline.
Enter Timeline JS to help us see when, what, and even where things were happening. Ironing out the creases of the space-time continuum, I decided to use this app from Knightlab and Google’s Mymaps in the second edition of my Modern China course, and it really helped against the invisibility of the Republican period.
What is TimelineJS?
In short, it is a piece of software that turns data from a spreadsheet into a beautiful timeline to scroll through from left to right, older to more recent. You can click on the entries and read more info or browse through media that enhance the timeline.
Here is an example from our HST269 course in Fall 2019:
How does it work?
It’s surprisingly simple, if you’re OK with using Google sheets. (If you’re hardcore anti-Google, you may want to experiment with H5P’s timeline, but I haven’t got experience with that one).
The TimelineJS website is very clear, but if you like a different explanation, here is mine!
- Copy the template Google Sheet to your own drive. (Link is also in the Timeline JS step-by-step guide)
- Add in all the info you need
- Leave Row 1 as it is: this is necessary for the timeline to work later on, so don’t mess with it.
- I use row 2 for the title slide of the timeline and don’t add a date (leaving columns A-I empty)
- For dates before the start of the common era, use negative numbers.
- For a time span (e.g. a dynasty, a person’s life or an event spanning multiple years): enter the start date in Year (Column A) and end year in End Year (Column E)
- Of course you can be more refined in your dates but we often did not have these for premodern China, for instance!
- Headline (Column J) needs to be short and focused, provide the details in Text (Column K). In Text you can use HTML for formatting text and hyperlinks.
- Media (Column L) is for the links to Youtube videos, jpgs, even Google My Maps etc. When linking from Wikipedia, make sure to link to the image, not the main Wikipedia page (ask me how I know).
- In Media Credit (Column M), I find it best to link to the page where one can find more contextual info, such as the creator, time period etc. Often that means not the link ending in .mp4 or .jpg!
- Media Caption (Column N) is a very brief description of the visual/auditory element you added to the entry. This is very useful if it’s not immediately clear what the connection is.
- We never bothered filling out Columns O through R blush I’m sure there’s good stuff you can do with it but I haven’t played with them yet.
How to get your timeline online
- Make sure to share your spreadsheet to the web: Select File –> Share –> Publish to the Web.
- Then copy the URL that is in the address bar at the top of the window: NOT the one that comes from the pop-up window when you published the spreadsheet to the web.
- Paste the URL into Step 3 of the Make a timeline page
- You can tweak the details of its presentation, and perhaps you want to make the height taller (I usually go for 800), but for our class’s purpose the other standard settings were fine.
- Click the preview button/ open preview in a new window. This will show you if an image link is not working as intended and of course you’ll find all the typos you thought you’d caught. Just go back into your spreadsheet, fix the faulty link or text, and check again.
- You could just share the first link, but of course it’s much more fun if your timeline is on your website. Copy the embed code (starting with <iframe>) and create a Custom HTML block in your WordPress post or page. Plonk it down there, and hopla, you have a timeline embedded in your website!
“Can I use it too?”
Yes! It’s free to use, and I hope that the above instructions have shown you how easy it is!
With my students, we built the timelines for the courses collectively. For modern China, students decided on three-four items to add individually, and two others and I provided feedback. For premodern China I shared a Google form for every session requesting what items should go on the timeline. The student responsible for that session’s timeline segment made their choice based on the group’s input, and received feedback from a couple of other students, as well as from me.
I set up the timeline with the Title slide in the webpage in advance of the assignment. Thus the students only needed to work in the spreadsheet. A brief tutorial walking them through the basic steps was all they needed, and because Google Sheets has great version history, you can always revert back to earlier versions in case of a mishap. Once they’ve added their contributions, they can quickly check if the timeline shows their contributions correctly. (Some images have disappeared because the link got broken since 2019 – we need to update those!)
We created 3-5 timelines, because the recommendation is to keep the number of entries limited, both for the viewers’ ease of use, and for the software.
Overall conclusions
The first time I used the timelines, students were of course more aware of the correct sequence of events, because they were closely working with the course materials and dates. That translated in better coursework overall, and less convoluted time-travel required to follow their arguments in how things worked according to them.
In subsequent years, I have included the timeline as a study aid, or referred to it to preview/review as we embark on a new section or conclude a segment. I definitely notice that for Modern China, the sequence of events is less wobbly!
And: this also inspired students to create their own timelines about more focused topics, from the history Chinese medicine (currently under construction) to the prosecution of Buddhism over multiple dynasties, to name but two.
The most tricky part seems to be the “publish to the web” step, but now you know that, there’s no stopping you. What timeline will you create?