Tabs and accordions

August 6th, 2011

Tabs and accordions are some of the more apparent visual features of Vorple.

Tabs are a menu, typically on the top of the page resembling tabs on a physical paper folder. Each tab is a link to a subpage. In an IF story you could have an about page, credits, maps, help, hints, feelies, links to more stories or anything else in their separate pages and not necessarily embedded in the story behind special commands.

While you could easily add normal HTML links anywhere in the story’s web site, the idea of Vorple’s tabs is that clicking on a subpage doesn’t actually take you away from the page (which would effectively quit the story). Clicking on a tab hides the current page and shows the selected subpage. Clicking on the story tab reveals the story again, ready to continue.

Accordions can be used to fold parts of the story out of the way. A traditional problem when playing IF is that when the story clears the screen you lose scrollback as you can’t go back to the previous text anymore. (The TADS interpreter on Windows lets you move back to previous block of text after the screen is cleared, and some interpreters have a separate scrollback window feature where the old text can be retrieved.) Instead of clearing the screen, the story could just hide the previous text under a header where the reader could bring it back up with a mouse click.

Tabs and accordions are almost trivial to create with jQuery, but the challenge comes from keeping the story running in the correct place when new sections are created and making sure they don’t interfere with the story engine. Below is a mockup of a story with subpages in tabs and parts of the story divided with an accordion.

The Plan

July 25th, 2011

Vorple is under development and progress is steady. Some of the planned features were shown in the proof of concept introduced in the IF demo fair last March, but the first release will not yet look much like the initial concept. The first step is integration with Undum, a hypertext fiction engine. (If you’re not familiar with Undum, the tutorial game will give a good overview of how it looks like.)

The first release will include at least the following features:

The manual for the plain version of Undum comes as a byproduct: it’s about as much work to split the basics into its own volume as it would be to write a single Vorple manual covering everything. This way even people who want to write hypertext fiction but aren’t interested in additional features Vorple provides can benefit from the project.

Instead of reinventing the wheel, Vorple will use existing tools as much as possible. Just like Undum and Parchment, Vorple uses jQuery as the base tool. Some hand-picked jQuery plugins are added and integrated to the main system. The aim is not as much to create something new, but to bring the existing tools used widely in web development to IF web interpreters and to make sure they’re compatible and easy to use. I’ve had many people tell me about the ideas they have of IF interpreter user interfaces. I’m hoping this will make it easier for them to make their visions come true.

The ultimate goal is to have Vorple working with both Parchment (z-code/glulx) and the upcoming online TADS interpreter. Undum is used as the testbed mostly because Undum is natively JavaScript and adding external features is (relatively) easy. The first release will not look much anything like the proof of concept, but most of the features built to Undum will work as such in the parser IF interpreters.

It is admittedly also exciting to build a bridge between hypertext fiction and parser IF. Some day in the foreseeable future we could have an interpreter that plays any form of interactive fiction online. Undum is by no means meant to be just some scaffolding that’s discarded when parser IF support is up. Hypertext fiction features will be treated as equal to parser IF interpreter support.

And the schedule? The first release might be ready in a couple of months from now. In the meanwhile some of the upcoming features will be showcased here in separate posts. Nothing is set in stone yet, so comments are most welcome!

Edit: Page tabs and section folding moved to a later release and replaced by tooltips.