Skip to main content
SearchLoginLogin or Signup

Creating Digital Stories with TimelineJS

These lessons introduce students to creating engaging and sustainable digital timelines using the web-based, open-source platform, TimelineJS.

Published onOct 05, 2022
Creating Digital Stories with TimelineJS


These lessons introduce students to creating engaging and sustainable digital timelines using the web-based, open-source platform, TimelineJS. Topics covered include understanding the internet and its role in digital humanities, finding and responsibly using media, data literacy, digital storytelling, and TimelineJS training.

Literacies & Competencies

Information Literacy: The TimelineJS assignment connects to multiple frames from the ACRL Framework for Information Literacy for Higher Education, particularly the “Information Creation as a Process” and “Scholarship as Conversation” frames. By scaffolding the assignment over the semester with a series of lesson plans, students gain first-hand experience in the iterative process of researching, creating, revising, and disseminating information.

Data Literacy: Data literacy plays a prominent role in the project as students may encounter concepts of data creation, management, and documentation for the first time. 

Digital Storytelling competencies: Students must consider the affordances and limitations of TimelineJS to craft an engaging story that will resonate with their specific audience. They identify the purpose and audience for the project early in the process, which allows them to be intentional in their decision-making as they determine what media and data to include. By examining existing projects, students learn about effective practices for digital storytelling and the importance of planning for sustainability. As they find and evaluate existing content for use in their timelines, they learn what it means to ethically re-use others’ content and consider how they enter into the scholarly conversation themselves.


Higher-level undergraduate students, graduate students, and other educators new to digital humanities.

Curricular Context

This series of four synchronous, one-hour, virtual workshops were designed for students in a fully remote, education-focused museum studies course titled Museum Education and Interpretation. The scaffolded nature of this series prepares students to create their final project, a digital timeline connected to curriculum requirements in K-12 schools that can function as learning objects in K-12 teaching. The project was designed to combine concepts of museum education with digital storytelling in place of a field assignment that could not be conducted during the COVID-19 pandemic. Working in groups, students created timelines on topics taught in K-12 schools, such as the Civil War and local architecture. 

Instructional Partners

Digital Scholarship, Multimedia, and Copyright librarians, Museum Studies instructor 

  • Kayla Abner, Digital Scholarship Librarian

  • Paige Morgan, Digital Publishing and Copyright Librarian

  • Amanda McCollom, Multimedia Literacy Librarian

  • Lois Stoehr, Museums Studies Instructor 


  • Computers with a current browser

  • TimelineJS (cloud-based)

  • Google Sheets

  • Accessibility considerations

    • Users with accessibility needs can largely use their regular devices and software to access the TimelineJS backend.

    • Basic accessibility guidelines, especially regarding alternate text, should be followed.


These lessons have been adapted into an “assignment package” available through the library website to facilitate discussions between librarians and instructors. They make up four full-class sessions. If time is limited, some topics (such as copyright or other broad concepts) could be adapted into an LMS module or LibGuide. Alternatively, the number of lessons can be reduced to one class that covers the basics of copyright, crediting media, digital storytelling, and how to input data into TimelineJS to get students started. Later intervention could include librarian-supported open lab time where students can come for help with troubleshooting, or a librarian can attend the professor’s office hours to answer student questions. 

The original lessons were designed for graduate students in Museum Studies. For advanced researchers, especially those with digital humanities experience, the two TimelineJS sessions could be combined into one workshop, with the focus being on getting started with the software. For undergraduates or junior faculty, a focus on finding and reusing media in addition to a session on creating content in TimelineJS would be helpful. 

These lessons could be adapted to in-person instruction, allowing more instructor engagement when students design storyboards, for example. Additionally, they could be adapted to many other subject areas, especially those with a historical component. Examples are History, English, Anthropology, Political Science, or interdisciplinary subjects like History of Science.

Learning Outcomes

Students will understand:

  • The technological infrastructure (such as front and back end applications, server storage, and the internet) that makes digital projects possible, and use that information to make informed decisions about sustainability and accessibility.

  • How to create a digital timeline in TimelineJS and how to preserve their content long-term.

  • Best practices for reusing media, including proper attribution and what is permitted for reuse. 

    • Students will learn the basics of copyright and intellectual property, including how to properly use and credit media and the basics of fair use doctrine. 

  • The basic principles of data management are shown through the creation and maintenance of their dataset. 


For TimelineJS session one:

  • Create and share with students one worksheet with discussion questions and one with a storyboard. 

  • Open the example timeline, Mapping a World of Cities.

For TimelineJS session two: 

  • Create a copy of the TimelineJS Google Sheet Template and share it with students using the “prompt copy” option in Google Sheets.

  • Create a demo timeline with different types of media to illustrate the creation process. 


  • Learning Schedule/Syllabus 

  • TimelineJS assignment description 

  • TimelineJS grading rubric

  • Storyboard worksheet 

  • TimelineJS Google Sheet Template 

  • TimelineJS help sheet


Student Learning 

We created a grading rubric to help the instructor discuss assignment expectations and evaluate the projects. A digital scholarship librarian also reviewed the projects and met with the instructor to consult on assessment. 

After the workshop series, we sent students a short survey for their feedback. We also heard feedback from the professor via her students and at an additional Q&A session. Based on what we learned, we reorganized the workshops so that students have an introduction to TimelineJS before learning how to find and responsibly use media. This way, they know how media works in TimelineJS and can find sources that integrate better. Students remarked that they enjoyed the timeline project for its introduction to learning about different public audiences and how to engage with that public in a digital format. 

Survey questions for students:

  • Describe your experience working with TimelineJS. What are the pros and cons of the tool? Was there anything you felt unprepared for while you were finishing up your project?

  • How did the timeline project serve the learning goals of the course? If it did not, how could the project have better aligned with learning goals?

  • Compared to a traditional, non-digital project (like a term paper), was making the timeline easier, harder, or about the same? Why?

  • Finally, would you do a project like this in the future? Why or why not?

Implementation Fidelity

Implementation fidelity was evaluated organically from personal notes taken during the session. For example, during the first TimelineJS workshop, the instructor noted that the lecture session was too long, taking time away from the timeline critique activity. In response, the lecture component will be reduced in the future to allow more activity time. 

One thing we wondered was whether it was more effective to have the copyright session before or after the TimelineJS platform introduction. If we had held it before, would it help students have content ready for TimelineJS? Or would it be better to have the copyright session after the TimelineJS introduction, so students could conceptualize what content they might want?


The instructor was uncertain about giving and grading a new digital assignment on a platform unfamiliar to them. This concern led to the close collaboration of the Digital Scholarship Librarians, who developed an assignment description and grading rubric, and the librarian-led workshops. Instructor hesitancy about new, multi-modal assignments is common in digital scholarship instruction. “Assignment packages” that include well-articulated instructions, helpful resources, and potential evaluation tools can help alleviate concerns. 

Key Takeaways:

  • Students struggled with getting images they could use in TimelineJS (for technical reasons, not copyright ones).

    • The session's original order taught students how to find and use media before using TimelineJS. Unfortunately, this approach led students to struggle with finding media that worked in TimelineJS, because they had begun looking for it before understanding the platform. In response, we plan to move the finding and using media section to after students learn how to use TimelineJS. We also put the Help Sheet together. It covers tested media sources and explains how to find the direct image URL needed for the TimelineJS spreadsheet. 

  • Had this been an in-person sequence rather than remote, we would have had a classroom free-work and troubleshooting session. For that session, we would have expected students to have completed at least 1-2 draft slides beforehand so they would have identified areas where they had questions.

    • We held an optional troubleshooting drop-in session approximately four weeks before the assignment was due, which turned out to be too early. As a result, students had not had a chance to start their timelines, which might have been due to the COVID-19 pandemic.

  • Despite student nervousness, the final timelines were excellent and served as useful object lessons about the relative scarcity of online museum material related to topics like African-American history.

    • The group work aspect of the final timeline assignment likely contributed to their high quality as some students had backgrounds in CSS, for example, and were able to add finishing touches to their timeline to impart a professional look. 

Additional Instructional Materials

  • TimelineJS Part One

    • Discussion questions

    • Slides

    • Lesson Plan

  • TimelineJS Part Two

    • Slides

    • Lesson Plan

Lesson Outline

Lesson 1: How does “the Internet” work, and what is it good and bad for?

Learning Objectives - Students will:

  • Understand the technological infrastructure of the web through front-end and back-end distinction.

    • Appreciate the ephemerality and affordances of this infrastructure.

  • Understand that audiences reach the internet in various ways with different accessibility needs.

  • Understand the concept of “hosting” and knowing where things are located on the internet, including the distinctions between different types of files (HTML files, image files, sound files, etc.) 

Activity: Students right-click on an image and show how to get to the image URL (for later insertion into timelines). Inspect source code on a webpage to get a feel for HTML and CSS. Check the accessibility of a website with

Lesson 2: Introduction to TimelineJS - What makes an effective timeline? How do we plan to build effective and sustainable content in the tool?

Learning Objectives - Students will:

  • Be able to articulate effective and ineffective digital storytelling techniques shown through discussion and critique of an existing digital timeline project. 

  • Understand and incorporate sustainability concepts into project planning.

  • Be able to begin crafting an effective digital narrative as shown during a storyboarding activity, using any topic. 

Activity: Students view an existing timeline and answer discussion questions (in the learning management system or in person).

Lesson 3: How do we find and responsibly use content for our timelines?

Learning Objectives - Students will:

  • Understand the basics of copyright law, including public domain and fair use.

  • Be able to conduct a fair use analysis on copyrighted content that they want to use.

  • Be aware of several websites/search techniques that they can use to find content that can be used in their timelines, in addition to content from museum partners.

Activity: Students find media preferably of different types and from different sources.

  • If students have topics: Find five pieces of media that reflect that topic to use in the final timeline. 

  • If students do not have topics: Find five pieces of media on any topic.

Lesson 4: TimelineJS part two - hands-on practice and demonstration

Learning Objectives - Students will:

  • Understand basic concepts of data creation, management, and documentation.

  • Be able to begin creating data that will form the foundation of the timeline as shown by finishing one row of data (in the spreadsheet) and generating a timeline.

  • Be able to effectively search for solutions in documentation when faced with a technical issue. 

Activity: Students add their five pieces of media from the previous session into the timeline spreadsheet. 

Demo Timeline created from Google Sheet Template

No comments here
Why not start the discussion?