TimelineJS Projects

What is TimelineJS?

TimelineJS is an open-source storytelling web tool, developed by Knightlab, that empowers anyone to build visually rich, interactive timelines using nothing more than a Google Sheet.

Potential Learning Goals and Outcomes

Digital scholarship writ large (physical vs. digital environment)
Writing for the web/questions of audience and community
Visual Design
Accessibility
Intellectual property and Image Use (Copyright and Creative Commons)
Digital Publication/Digital Identity
Basic understanding of storytelling

Examples

Timeline of The Yowl, part of a student project from ENG 422.

“Women in Computing” from Knightlab (TimelineJS developers)

Possible Assignment

Students (alone or in a group) are tasked with creating a timeline that engages the reader with images, videos, and text about a topic related to the course material writ large, or within a specific unit/module of the course. They are to engage with scholarly resources, oral histories, and reference material as they create their timeline. Each timeline should have no more than 20 slides/dates, per the developer’s recommendation.

Students can begin with an outline of their timeline with dates and related information using Google Docs or they can jump right into the Google Sheets template.
This can be done individually or as a group. Since Google Sheets is collaborative, it’s great for small groups.
Each slide has a date, title, description, and media (image, video, or audio).
Aside from filling out the Google Sheets and plugging it in at Knighlab’s website, finding media will be the other main task.

Recommended Sessions

1 Session Example

1 (50+ mins) in-class instruction with the following elements:
- Basics of writing for the web
- Overview of TimelineJS site and template
- Finding and using digital media under a creative commons license
- Accessibility (alt-text, color contrast, and user experience)
Consultation appointments with Media Consultants/Digital Learning team might include the following
- Text and color styling with HTML
- Accessibility audit
- Enriching timelines with different media types

2 Session Example

First in-class instruction may include a few items from this list:
- Introduction to storytelling with digital media
- Basics of writing for the web
- Introduction to metadata in relation to storytelling
- Finding and using digital media under a creative commons license
- Accessibility (alt-text, color contrast, and user experience)
Second in-class may include may include a few items from this list:
- Overview of TimelineJS site and template
- Workshop timelines with media and text
- Accessibility check with WAVE web tool
Consultation appointments with Media Consultants/Digital Learning team might include the following
- Text and color styling with HTML
- Accessibility audit
- Enriching timelines with different media types

Recommended Assessment

Example Assessment Criterion/Category

Appearance, Navigation, and Accessibility
Demonstration of Learning
Reflection on Learning
Presentation
Design