Down the Rabbit-Hole

This story showcases Vorple's features.

When you see a ? icon you can click on it to learn more about the feature being demonstrated.

Down the Rabbit-Hole

a Vorple demonstration

click to begin


Vorple uses several open source JavaScript libraries to build upon. The most important of these is jQuery, which is the most popular JavaScript helper library. It makes working with browser elements and common JavaScript tasks much faster and easier.

These dialog boxes are created using Vorple's notification module, which is flexible enough to show the notifications as this kind of modal dialog boxes with custom buttons.

These buttons are created using the button module. The buttons can be icons, text, HTML buttons or any other elements.

Buttons are assigned to a button group that is a collection of buttons. Buttons in a button group can be manipulated as a single entity (for example hidden and revealed as needed).

This image is created by writing vorple.media.image( 'lamps.jpg' ), which creates a tag <img src="media/image/lamps.jpg" />. This doesn't usually reduce typing, in fact quite the contrary in most cases, but the idea is that if you write the tags by hand and make a typo or create an invalid structure with the end tags the browser will happily just skip the illegal tag or the typoed part, causing hard to find bugs. If you typo a helper's name, you'll get an immediate error message.

In this room you see a YouTube video embedded into the story. The movie theater background is an empty element with the image as its background. Clicking on the link inserts the embedded YouTube video in the element. Padding of the element makes sure the video is in the correct position to cover the image of an empty screen.

As you enter the museum, the system saves a cookie that tracks whether you've visited the library before or not. The curator's reaction is different on the first time and on later visits he "remembers" the visitor. The cookie persists between playthroughs, even if the story hasn't been saved.

Cookies can be used to save any kind of data, but most commonly it's used to save the reader's preferences. The built-in mute controls in the lower right corner save their status automatically using cookies, so if the reader has chosen to mute audio, the setting is remembered the next time they read the story.

When you hover the mouse cursor over the images here you see a tooltip popping up, showing a description of the image. Vorple uses the qTip2 library to display the tooltips.

The tooltips can be placed on any element, including links. They can be triggered when the mouse cursor hovers over them, on click, on other custom events or triggered manually as happened with the "back" link when the story started. The tooltips can contain images and styled text and their appearance can be modified.

Two kinds of audio types are supported: music and sound effects. Those two types can be played and stopped independent of each other and the reader can use mute controls (lower right corner in this theme) to turn sounds off.

Vorple uses the SoundManager 2 library to play audio. It uses a Flash player or if Flash is not available it tries to use native HTML5 audio.

Vorple adds two new link types to Undum: disposable and unique.

The bird cage link in the garden is disposable. After you've clicked on it once it's disabled and it will not be enabled again anymore, even if you leave the garden and come back later. If any other situation later has the same link, it will be disabled as well.

Unique links are such that only one of them can be active at the same time. Both the "smells" and "sights" actions have a link to "flowers" in their text. The flowers links have been made unique so that only the first action you click has the link active, no matter which one you choose.