Vorple by Juhana Leinonen

This topic is for discussions related to Vorple by Juhana Leinonen


A while back, there was some indication that Vorple could, or would eventually, generate html buttons.
Is this now possible by using the html code embedding capabilities in the version released with the new Inform7?

If one can and you happen to have an example, it would really help me get going on my next project.

By the way; the Vorple-based game you advised me on took second place in the spring geocaching event. :smiley:
I had a number of favourable comments on it.
Thanks, so much, for your help and patience.


It’s possible with Vorple Hyperlinks and some custom CSS styling, but out-of-the-box support is coming only in the next major version.

If you could show an example of where the buttons are used (in the story text or fixed in some position in the screen) I can make an example of a CSS file that does it.

That’s great! Is it playable somewhere?


As you know, I’ve been hoping to get that capability for some time.
Unfortunately; I don’t have a particular example that I can post.
I’m just starting to write using the new Inform7 with Vorple.
If I can see an example of how to attack a simple case, I think I can extend that knowledge to whatever I settle upon.
Sorry to impose, but a generalized example of buttons would be really helpful!

I put out the adventure I noted it under the pseudonym, Raetsel Brueder.
It’s a four stage puzzle.
I wrote the adventure, which is the first stage.
A fiend encoded the cipher which can be solved using the clues found during the adventure.
A field puzzle is located at the coordinates that one finds by decoding the cipher.
Solving the field puzzle allows one to find the final geocache.
All that said, many of the people loved the adventure, just for itself.
It’s available to play online from the start page at: geocaching.com/geocache/GC4Z … ce-is-ours


Something odd is going on with the modal dialog boxes implementation.

The documentation, Chapter 4: Turn types, in this package appears to be incorrect for mark the current turn “normal”;. The word “turn” appears not to be recognized by the “compiler”. It does, however, recognize the word “action” instead of “turn”. This was the word used in the previous version of Vorple. The other issue is that the “Ok” button on the actions marked as “dialog” does not seem to work and control is not returned to the adventure.

I traced the first issue to the extension code, which does not match the documentation and says:

Chapter 4 - Turn types

To mark the/-- current action (type - text):
execute JavaScript command “vorple.parser.setTurnType(’[type]’)”.

For the second one, it looks as if marking an “say …” as “dialog” and doing a “show notify” are equivalent. The difference is that the “Ok” button on the latter works. Did you actually mean to include the former in this release?

The reason I’m asking is that there is no generalized example; the solution depends on what kind of effect you’re trying to achieve. The general idea is that you’d do this:

Include Vorple Hyperlinks by Juhana Leinonen.
Release along with the "Vorple" interpreter.
Release along with style sheet "buttons.css".

When play begins:
	say "Blah blah blah?";
	say line break;
	place a link to command "look" reading "Take a look around";
	say "    ";
	place a link to command "inventory" reading "Take inventory";
	say "    ";
	place a link to command "jump" reading "Jump".

…which would produce:

Blah blah blah?

Take a look around Take inventory Jump[/code]
…and the links would be styled to look like buttons and positioned according to the rules in the buttons.css file.

Now if you wanted the buttons to be visible on the page at all times, like as if they were on a status line or similar, then the procedure would be slightly different.

That’s a documentation error and something wrong with the dialog turn style; I’ll take a look.

Thanks, I’ll check it out!

Thanks. Will wait for a post indicating it’s fixed.


Actually; putting the buttons on a static pane is pretty much what I’m trying to do. You did something very similar in an Undum-based example on your site. I’d like to put up a pane with buttons for at least the 4 cardinal compass points (and possibly the remaining four). Quest5 does something like what I want to do, but I don’t want to use Quest5. I’m hoping that by seeing an example of the correct approach to implementing this with Vorple, I can make the specific implementation I need and maybe even extend it a bit more.

Sure, here’s a rudimentary compass rose displayed in a sidebar.

Inform code:

Include Vorple Hyperlinks by Juhana Leinonen.
Release along with the “Vorple” interpreter.
Release along with style sheet “sidebar.css”.

To display sidebar:
open HTML tag “div” called “sidebuttons”;
place a link to command “northwest” reading “NW”;
place a link to command “north” reading “N”;
place a link to command “northeast” reading “NE”;
place a link to command “west” reading “W”;
place a link to command “look” reading “+”;
place a link to command “east” reading “E”;
place a link to command “southwest” reading “SW”;
place a link to command “south” reading “S”;
place a link to command “southeast” reading “SE”;
close HTML tag.

When play begins:
display sidebar.[/code]

If you clear the screen at any point you’ll have to redraw the sidebar, which is why I put it in a “to display sidebar” phrase.

Here’s the sidebar.css that places the sidebar and styles the links to look like buttons. It’s included also as an attachment, rename it to sidebar.css (the forum doesn’t allow the .css file extension) and put it in the Materials folder. If you don’t know CSS, you’ll find a lot of references and tutorials online, for example here and more with Google.

.sidebuttons {  /* the container for the buttons */
    position: fixed;
    right:0;  /* change to left:0; if you want to show it left */

.sidebuttons a {     /* the buttons themselves */
    padding:3px 5px;
    border:1px solid gray;
    box-shadow:1px 1px 1px gray;

body {  /* move the story text left so that the sidebar doesn't overlap it */ 
    padding-right:200px;  /* use padding-left instead if you moved the sidebar left */

sidebar.css.txt (578 Bytes)


This is exactly what I’ve been wanting to do.
I really appreciate your taking the time to put together the example. :stuck_out_tongue:

Just a note to say that your help, Juhana, has produced some very noticeable results.

Currently; I’m setting up a re-usable framework for a set of new adventures.

I’ve managed to modify the sidebar css file to show a logo, title, menu and compass.
I’ve also added a background behind the scrolling portion of the adventure.
Now I’m trying to address the various types of message boxes that one might typically be used in an adventure.

However; the issue with the modal dialog box “Ok” button, which I use for credits and such, is hard to avoid. You’ve been very helpful in providing examples that must have taken some time to code, so the foregoing is definitely not my being pushy about fixes. I know they take time and you don’t have an endless supply of that and I’ll wait 'til they’re available.

I’ve been able to put a background in for the “body” by adding a line to the “body” portion of the “.css”.:

body { /* move the story text left so that the sidebar doesn't overlap it and add background*/ padding-right:200px; background: #fff url(Background.jpg) repeat center scroll; }

Is there a way to do something similar for the vorple container, so that I could have the adventure appear on something that might look like an old sheet of paper?

Figured it out:

#vorpleContainer { background: #fff url(OldPaper.jpg) repeat center scroll; }
Need to do the same for the line on which one enters commands, but I think I’ve got the idea now.


I finally got the overall effect exactly as I wanted.
If you have a more elegant solution, I’m always ready to learn.

I’ve posted the relevant segment of the user CSS code file here for some other VORPLE user who may want it.
If someone can tell me how to post a jpeg, I’ll be happy to post a screen capture.

[code]body { /* move the story text left so that the sidebar doesn’t overlap it and add an autoscaled, non-scrolling background picture to the browser window.*/
background:#fff url(“Background.jpg”);
background-size:auto auto;

#vorpleContainer { /* add a scrolling background to the vorple container.*/
background:#fff url(“OldPaper.jpg”);

Now; this works on Firefox. I haven’t tried it on Safari. Will have to see.


I put together a bit of a bare interface/framework for use as a starting point in adventures I am in the process of writing. It shows some of what one can do in a few hours with VORPLE and I hope it helps people make the decision to try it.

It shows that one can set up panels containing logos, titles, menus and a compass rose. It also has background music, plus static graphics for the browser screen and scrolling “paper” for the interactive “game” area. These, however, are only some of the features.

I haven’t included the source via the index page, but will once Vorple has had a chance to get over the the inevitable “birthing pains”. There is still a minor bug with dialog boxes in Vorple, so I haven’t yet put too much effort into fine-tuning their use. At this point, I’ve had to make a few other very minor patches and I don’t want to have those spread far and wide. That could confuse more than help.

Please note that the example has only been tested on a Mac. It seems to work best on Firefox, but does have some loading issues with Safari. In addition; I can usually expect almost anything to run on Maxthon, but I haven’t tried it on that yet. (Frankly, my geocaching colleagues have found that Safari is not the best of platforms for any of the Interactive Fiction platforms.)

Here is the demo link:

Would appreciate hearing your comments.

Glad you got it working. It looks pretty good, works well on Chrome. For some reason it loads correctly on Safari when the dev tools are open but not otherwise, need to investigate that further.

Thanks for having a look at it. I was rather surprised how well it turned out for such a short development time.

Happy to hear that you see something that may be causing Safari to hang on loading. Fixing that would please a lot of people.


A while ago, I posted a note about the Dialog box “Ok” not releasing control back to the adventure.
I don’t know if you’ve even had time to investigate and find out if it was an issue with Vorple code or Noty code.
Is it something I take the time to follow up or is it something for which you already know what’s going on?


I went back and re-examined the situation with the Ok on the modal dialog boxes. They seem to be working, as far as I can tell. I must have made some obtuse coding error and corrected it when I tightened up the templated starting point for my newest adventure. I apologize for any concerns I may have raised on you part.

By the way; the more I get into your code the more I appreciate the planning and hard work that went into it.

I have a few “philosophical” questions regarding how to augment Vorple.

  1. I understand that jQuery is used by Vorple. I don’t believe that jQuery ui is, however. I think you’ve used another package that only provides some alert boxes and such. Would my doing an include of a local min version of jQuery ui be reasonable, or is there some reason I should avoid that. It seems like a good way to include some of the features with which I’ve been experimenting, while ensuring a standard look and feel. That said; I would likely try to construct a theme that would match that used by the existing Vorple released elements, unless I switched to only using the JQuery ui ones.

  2. I notice that you’ve avoided using the hosted versions of jQuery etc. Am I correct in assuming that this is to ensure that debugging/running can be done offline?

  3. Are you aware of any plans to make it possible to run Vorple within Inform7, similar to how we can run the z8 code? I want to ensure that my approach to extending things is compatible.