You should create your own spreadsheet for your project, by visiting the example spreadsheet and choosing вЂњFile вЂ“> Make a CopyвЂќ from the Google Docs menu.

The popcorn instance is initialized in assets/js/project-popcorn-data.js, which loads popcorn events from a Google spreadsheet.

index.html includes a very simple layout for an audio element & one popcorn target, with css contained in assets/css/style.css.

The project template itself is actually quite simple. We link to the external Timeline scripts, but include the Popcorn and Tabletop scripts directly in the project вЂ“ Tabletop because itвЂ™s just hosted on Github, and popcorn because the version hosted at doesnвЂ™t work with file:// links, so we have to modify it very slightly.

Tabletop, which is used to feed data from a Google spreadsheet directly into both of the above frameworks, so that events donвЂ™t have to be coded directly in Javascript.

SIMILE Timeline, which enables the display of events in a timeline (itвЂ™s an old and somewhat clumsy framework, and should perhaps be replaced by something like TimelineJS).

Popcorn, which allows events in a webpage to be synced to the playback of a media element.

The project relies on three specialized external libraries: The latter post links out to two JSBin pages that we use to explain to the class how the projects work.

For more information you can check out the project assignment and my explanation of popcorn. Hopefully they will allow students in the class вЂ“ or anyone else вЂ“ to very quickly hand-build a small oral history website around a single interview. This project contains template files for use in an oral history project for a digital history class, вЂќ History & Its Publics in a Digital AgeвЂќ.

History timeline template website