Using TimelineJS in the English Language Classroom

Page No.: 
49
Writer(s): 
James Harry Morris, Waseda University, Japan

Timelines have come to take a central role in the history classroom. They are used ‘to help students understand chronological order … [and] visualize a sequence of events’ (Downey & Long, 2015, p. 141). Additionally, they help students to grapple with information from multiple sources and to try to understand how different historical people and events are connected (Fillpot, 2009). Nevertheless, the use of timelines in education is not confined to the subject of history—they also find a place in digital humanities and English lan-guage courses, particularly Content and Language Integrated Learning (CLIL) courses.

I have integrated timeline creation into university-level English-medium history courses and CLIL courses that I teach in Japan. Drawing on this experience, I will introduce readers to a platform called TimelineJS; explain how to use it; and reflect on its potential uses, benefits, and limitations in the English language classroom.

 

What is TimelineJS?

TimelineJS is an online tool created by Northwestern University Knight Lab that allows users to build timelines. Although numerous timeline creation tools exist and readers might want to experiment with what is available on the market, TimelineJS has a number of features that make it particularly suitable for use in the classroom environment. Firstly, it is free. Secondly, users are not required to create any sort of account, and nothing needs to be downloaded—everything is done through a Google Sheets spreadsheet and the TimelineJS website. These are key considerations, as explaining how to create accounts and requiring students to download software is not only time-consuming, but it also raises ethical questions about student privacy and computer security. Thirdly, the tool has a low learning curve. Both students and teachers can learn how to use the tool quickly, and therefore, it can be easily integrated into the classroom. Finally, TimelineJS produces visually pleasing results (see https://timeline.knightlab.com/ for some examples).

 

Setting Up the Timeline

TimelineJS is extremely simple to use, but the initial setup can be a little tricky for students because there are several precise steps that the user needs to take to set up their timeline. Upon visiting the TimelineJS website (https://timeline.knightlab.com/), the user should click on the “Make a Timeline” button (Figure 1). This will transport them to the bottom of the page where there is a four-step guide to creating a timeline with TimelineJS.

The website provides more detail and a video guide, but for your convenience, the steps are as follows:

  1. Click “Get the Spreadsheet Template” and then click “Make a Copy” to save a copy to your Google Drive (Figure 2).
  2. Once the spreadsheet is open, click “File,” point to “Share,” click “Publish to web,” click “Publish,”  and then copy the URL in the browser’s address bar (Figure 3).
  3. Paste the URL into the box on the TimelineJS website.
  4. Copy the link generated on the TimelineJS website and paste it into a new tab to see your timeline.

In my experience, students often get lost during this setup, so it is worth spending some time going through things several times and checking on students’ progress. Once these steps are complete, students will have a Google Sheets spreadsheet (where they will edit the timeline) and a URL (where they can view their timeline).

 

Editing the Timeline

In order to edit the timeline, users input text on the Google Sheet. These edits automatically manifest as changes on the timeline (sometimes after a few seconds or minutes) and are saved to the file in the user’s Google Drive. Each event on the timeline requires a date, which will dictate the order in which it appears. A range can also be given by providing an end date. This can help to display events that took place over several years, historical periods, or lifespans. The Headline column is used to edit the title of each event and the Text column to edit the body of text that accompanies each event. The Media column allows users to insert various sorts of media taken from the Internet, including images, videos, audio, and maps. Finally, the Background column allows users to edit the design of the timeline by entering a hexadecimal colour code or a link to an image that will be displayed in the background of an individual event (Figure 4). These columns form the basic blocks for building the timeline.

There is a more extensive guide to editing timelines and a frequently asked question section on the TimelineJS website that can aid with troubleshooting. Additionally, hovering over different parts of the spreadsheet provides a brief explanation of its function. Despite this, based on common issues that have arisen in my own classes, there are a few tips that I think are worth noting:

  • The formatting of dates is important. Putting anything other than a single numeric year into the “Year” column will create an error that stops the timeline from being displayed. Most of the problems that students face with creating their timelines in my own classes have stemmed from the incorrect formatting of dates, so it is worth highlighting the importance of THIS.
  • Inserting media into the timeline usually involves pasting a link into the Media column. However, when using a Google Image search, users must right-click on the image that they want to use and select “Copy Image Link.” It is this link, rather than the link in the browser’s address bar, that is needed to successfully insert images from Google into the timeline. If there are image display issues in a student’s timeline, I recommend checking where the image links came from.
  • Most of us are unfamiliar with hexadecimal colour codes, so it is worth finding a list or other resource to help your students find the colours that they may want to use in their timeline. I use the HTML Color Codes website (https://htmlcolorcodes.com/).
  • Encourage students to avoid deleting columns, rows, or cells because this can sometimes create errors. Instead, encourage them to replace or rewrite content.
  • Ensure that students check their timelines regularly. This can help catch issues or errors early, and make problems much easier to resolve.

 

Uses, Benefits, and Limitations

I tend to use timeline creation with TimelineJS as an alternative form of individual and team presentations. I ask students to conduct independent research on a topic, build a timeline based on said topic, and present that timeline to the class. I have also employed it to create resources that I can use in the classroom instead of PowerPoint presentations. There are, of course, numerous other potential uses for timelines: They can be used for teaching grammar (particularly tenses), for reading comprehension activities, and as resources for exam revision. The possibilities are limited ONLY by the imagination of the instructor.

Using timelines has several potential benefits. As learning resources, timelines can be particularly beneficial for visual learners, and they can introduce variety into classrooms that rely heavily on PowerPoint presentations. Furthermore, as noted earlier, they can help students to understand the way in which different events, people, and sources are connected. The creation of timelines with TimelineJS offers additional benefits: Students learn how to use a new type of software, and they can build teamwork skills remotely (Google Sheets allows multiple users to edit a timeline). Furthermore, the ability to integrate a variety of media helps them to think about creating presentations beyond traditional “text + image” models. Additionally, unlike PowerPoints, timelines built with TimelineJS can be accessed anywhere as long as students have Internet access on a computer, tablet, or mobile phone. Nevertheless, while timelines have the potential to add variety, they are not a replacement for traditional PowerPoints. They are best suited to historical subject matter and therefore have the most potential in social studies CLIL courses.

 

References

Downey, M. T. & Long, K. A. (2015). Teaching for historical literacy: Building knowledge in the history classroom. Routledge. https://doi.org/10.4324/9781315717111

Fillpot, E. (2009). History in every classroom: Setting a K-5 precedent. In R. G. Ragland and K. A. Woestman (Eds.), The teaching American history project: Lessons for history educators and historians (pp. 137-158). Routledge. https://doi.org/10.4324/9780203878200

 

PDF: