« Writer | Main | Boycott Thomson Research »

Dynamic Anchors using Javascript and Tinderbox

This entry is a very brief introdcution to one of the ways in which I use Tinderbox to enhance my teaching. Tinderbox is an unusual program in that it provides so a high degree of flexibility that at first (and second) glance it isn't clear how one might even use such software. Tinderbox in many way resembles a database program, but deeper experience with the program reveals the limitations and inaccuracy of such a comparison.

In the spring of 2006, I began seriously exploring Tinderbox's capabilities and what I found was a program that could, among other things, help me organize my research, engineer and customize data objects, establish relationships between those data objects, and provide a modular toolset for constructing websites. All of my websites are based on Tinderbox documents, including this blog.

In the winter of 2008, I overhauled the Tinderbox document I use to adminster my course website. For the first year of my getting to know Tinderbox, I produced a document as a container for a series of notes each representing a discrete HTML page. In January of this year, I rebuilt the Tinderbox document so that larger HTML structures--such as divs, tables, and unordered lists--were represented by notes and subelements--such as rows, cells, and list items--were represented by notes nested inside the notes representing the larger, block-level HTML elements. I develped export templates for the required block elements as well as many subelements. As a result, building and modifying my course websites involves little, if any, tinkering at the level of HTML. I can focus on the overall document I'm editing and not worry so much about formatting. This is especially important when working with so detailed an object as, for example, the daily syllabus for the theory course I am presently teaching.

A few things I would like to point out about the current syllabus for the theory course is that the coding of typographer's quotes around articles, last-name orientation for authors, page ranges for assigments, in-line URLs for downloadable materials, content for the RSS feed, the cell formatting to identify the next meeting, and many other style and structural elements are accomplished by my Tinderbox document.

What's more, the fundamental unit of an assignment on my daily syllabus originates from a bibliographic entry produced by EndNote. First, I select references in EndNote for export. I run a PERL transformation on those exported items which produces a Tinderbox document. I then import these Tinderbox objects into my course Tinderbox document, rearranging and tagging the objects until I have a workable syllabus.

This process is nearly identical to the one I use in my own research. In the next month or so, I will be building a new Tinderbox document to deliver a multimedia object (set of interrelated data) which examines the cultural significance of postmodern zombie cinema, a web-accessible project which will be closely related to a scholarly article whose working title is "Planet Zombie.

In the following video, I explain how using Tinderbox enables me to enhance my teaching using the web. Unlike paper syllabus, a web-accessible syllabus can accommodate additions, in this case, additions to help students understand difficult material covered in class. More importantly, unlike many pedagogical devices which provide students with more information about course readings, this process requires almost no additional effort.

In particular, I use an open-source tool called Skim (without question the best tool for annotating PDFs I have ever used). I use Skim to take notes on the readings and, when I'm done, export those notes to a text file. I then use a PERL script to transform those notes into a Tinderbox document and add the resulting objects to my course's Tinderbox document. I tag these objects and re-export the daily syllabus to the web when I'm finished. The notes I rank three or higher are then published under their respective assignments in initially hidden divs.

Here is the video which explains just a few of the benefits of providing such materials for my students.

Clicking downloads a 21.7 MB file (duration: 5 mins 08 secs).
Please be patient while the file loads
Ctrl/Right-click here to “Save File As . . .”



Nice post and video. Could you talk a little more about your code side, J. I'm interested in the java side or any other sort of hook. Looking forward to the next installment.


Thanks. What a generous sharing about TB and what a wonderful use of it. Along with your previous sharing about the use of TB in Academia, your work has been very helpful. Great fortune with your project. --Patrick


Great post! I am considering using TB in my work, but I'd love to get my hands on the 2 PERL scripts you mention for exporting.

Good job, Richard


I have been periodically checking the TBX forums hoping to find reference to a follow up on this screencast. I can get a sense of your TBX structure from the screencast but I was wondering if you had any plans to provide additional details regarding TBX to create content-rich, web-based syllabii (as well as your PERL scripts to export from EndNote/Skim to TBX)?

This is some really nice work! I would really like to push my own TBX work in this direction.