Today I'm going to walk you through a tutorial on how to use Google Docs to build an interactive timeline that you can use for your campaigns. What's even cooler is that both players and gamemasters alike can enter in the dates and times of events in the past or present (with a few caveats). Since I'm a data junky, and love to catalog my campaigns; I'm psyched about this tool. Now let's get started:
If you want to skip to the cool online tool I've set up for people to use, scroll to the bottom; otherwise keep reading and maybe you'll learn something.How To Build An Interactive Timeline Using Google Docs
Note: All the screenshot images below can be enlarged by clicking on them to get a better view.STEP 1 - If you don't already have one, you'll need a gmail address and you'll need to activate your Google Documents application. Once you managed to reach the internals of Google Docs, you should see a screen something like this ->
STEP 3 - Once your form is done, you'll now need to make some tweaks to the spreadsheet that was automatically created to store your form data and add a Timeline widget to the spreadsheet as well. Click the button at the top of the form that reads "See Responses" then click "Spreadsheet". This will take you to the underlying spreadsheet that is tied to the form. It should look something like this:
Step 4 - Next, click on the menu above the sheet and choose "Insert" -> "Gadget...". A pop-up menu will appear, select the "Featured" category on the left and scroll down the list on the right to find the Timeline Gadget.
Click the bubble button that reads "Add to Spreadsheet". This will plop the gadget right down in the middle of your spreadsheet, which is less than ideal. Will fix that up next.
Step 5 - Customize the Timeline Gadget by making the following changes:
- Set the range to "Sheet1!B1:G100". Google spreadsheets by defauly only have 100 rows on a new spreadsheet. If you get more than 100 entries from your form, the spreadsheet will expand to include the new entries, but you'll have to remember to come back to this configuration menu to change the range for the cells.
- Retitle your timeline -- I named mine "FRCS Interactive Timeline". /wink
- Change upper interval to "month"
- Change upper interval width to "narrow"
- Change lower interval to "year"
- Change lower interval width to "xx-narrow"
- You can play around with the color schemes later - for now just leave them as the default.
That should result in you being bumped over to a new sheet with a blank timeline. You may also see another error about Headers being fouled up.. we'll fix that next.
After entering a few of these, you will note that your spreadsheet automatically gets the entries. Here's a view of the spreadsheet.
Not pretty, but that's not the point. Now, if you click over back to your Timeline Gadget worksheet (the tab titled "Gadget1" at the bottom), you should see the following (or something similar).
Now you want to know how to embed the form and spreadsheet into another website? Well, for the timeline click back over to the Gadget1 tab and click the grey "Publish" button in the upper right hand corner of the timeline. The code that you end up with should be pasted into any HTML document and ... voila... it's magic.
To embed the form someplace, switch back to "Sheet1" and then select "Form" -> "Embed Form..." from the menu along the top. A new window will open and you'll get some iframe source code. Drop that code into any HTML page and you'll be ready to roll. In my experience, it helps to edit the width/height values of the iframe to eliminate scroll bars (yeck!). There's also similar parameters in the script URL for the Timeline widget that you can play with.
Both the timeline and form are LIVE below. If you have any questions or comments, please go back to the top of the post and click "Comments". I'd love to hear what you think of this latest tutorial.
BELOW IS THE LIVE INTERACTIVE FRCS TIMELINE
Use the form below the timeline to update and enter whatever events you want. Click on the events to get more information, images, and links. It's awesome!