How To Build An Interactive Timeline Using Google Docs

I confess. I'm addicted to using Google's tools for everything imaginable. I think the best thing that could happen to the RPG industry would be for Google to buy Wizards of the Coast; but I digress...

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 2 - Create a new Google Form by clicking in the menu on the upper left New --> Form. Immediately, a new window or new tab will open with a blank form that will need some editing. The screenshot below will show you what you'll start with.

Title the form, add some Help Text, and create enough fields for the following: the form MUST have the following fields (aka "Question Title" in the form editor) - title, start, end, description, image, and link. THEY MUST BE LOWER CASE for some reason. As you add fields / questions to the form - make sure title and start are required. You may also want to add some Help Text to inform the use what the formatting requirements are for the dates (must be mm/dd/yyyy format). By the time you are done - you should have a form that looks like the one below

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.

Here's a screenshot of what it should look like.

Click "Apply". Since the spreadsheet is empty, you will no doubt recieve an error from the Timeline Gadget; don't worry -- we'll fix this next. But before we do... you see that little tiny grey triangle above the [X] in the very upper right hand corner? Click that, and choose "Move to its Own Sheet".

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.

Step 6 - Move back to "Sheet1" by clicking on the tab at the bottom of the spreadsheet. Now click the menu above "Form" -> "Go to live form...". Here's a screenshot

Once your live form launches, enter your first event into the timeline. Remember, the dates MUST be in a mm/dd/yyyy format. I mentioned caveats before... well... negative dates is one of those caveats; using them might break your timeline. Here's an example of my first entry:

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).

Step 7 - The last step is to publish your spreadsheet, form, and gadjet for everyone to see and play around with. You DO want your players to be able to add events into their own campaign history log, right? To do this, first click the blue "SHARE" button at the top right and choose "Publish as Web Page". Make sure that you choose "Automatically republish" when the next menu pops up. When you are done, click the [X] and return to your spreadsheet.

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!

---

---