Harlowe's Input Problem: A Radio Button Input Tutorial

Harlowe has (another) problem...

I previously wrote about the quick fix for the text input issue presented by Harlowe within the Twine 2 engine. And while I researched how to get this to work I realized that you can apply this hack to other input methods as well.

The radio button input method is perfect for fixed options. Unlike the text input method where the player can type in any old thing, the radio button input method only allows the player to select one value from a list to define a variable.

I'm sure you come across Radio Button Inputs pretty frequently. The most common one I've seen is the gender selection menu:

However, this can be utilized in an infinite number of ways within Twine alone. So, today we are going to build our own spaceship designer using nothing but radio buttons.

First thing's first we have to set up that JavaScript. Copy/paste this right into your Edit Story JavaScript window.

window.Harlowe = { 'State' : State };
window.processInputElements = function () {
    $('input[data-varname]').on('change', function () {
        var varName = $(this).attr('data-varname');
        Harlowe.State.variables[varName] = this.value;
    });
};

Now we need to configure our spaceship settings. It's very important that this comes in a separate passage after you set up your radio buttons. This is what I've decided I'm going to let the user pick from:

(if: $blue is "on")[(set: $shipColor to "a striking 

blue color")]

(if: $yellow is "on")[(set: $shipColor to "a warm, and 

welcoming yellow color")]

(if: $red is "on")[(set: $shipColor to "a dangerous red color")]
(if: $black is "on")[(set: $shipColor to "a pitch black color")]

(if: $tall is "on")[(set: $shipHeight to "with a tall frame")]
(if: $short is "on")[(set: $shipHeight to "with a short and 

stout frame")]

(if: $propeller is "on")[(set: $shipFlight to "spinny 

propeller on the nose")]
(if: $solarSails is "on")[(set: $shipFlight to "solar sail 

system jutting out from the sides")]

(if: $jetEngine is "on")[(set: $shipFlight to "set of jet 

engines powering it")]

(goto: "spaceship")

The way this works is that once a radio button is selected it sends the value "on" (and yes, it's important to keep it lowercase when configuring the options) to the engine, and the custom code takes that and translates that into something that Harlowe can register. The reader won't be able to see this passage due to the (goto:) macro at the bottom and that's just how we want it. Otherwise they'd get a sneak peek at the details of the other options.

Now to set up the actual buttons themselves. I created three separate forms for the three option types, and put each set of options into each form:

Ship Color:
<form>
  <input type="radio" name="color" data-varname="blue"> [Blue]\
  <input type="radio" name="color" data-varname="yellow"> [Yellow]\

  <input type="radio" name="color" data-varname="red"> [Red]\

  <input type="radio" name="color" data-varname="black"> [Black]\

</form>
<script>processInputElements();</script>

Ship Height:
<form>
  <input type="radio" name="height" data-varname="tall"> [Tall]\

  <input type="radio" name="height" data-varname="short"> [Short]\

</form>
<script>processInputElements();</script>

Ship Propulsion:
<form>
  <input type="radio" name="propulsion" data-varname="propeller"> [Propellers]\

  <input type="radio" name="propulsion" data-varname="solarSails"> [Solar Sails]\

  <input type="radio" name="propulsion" data-varname="jetEngine"> [Jet Engine]\

</form>
<script>processInputElements();</script>

(link-goto: "Your custom spaceship!", "rocketShipConfig")

What happened here is that for each option selected, the form takes in that information (the information for the radio button form is a value named "on" which is written when an option is checked) and applies it to the variable in question. So, say a player chose the "blue" spaceship option, that variable would now be "on" and whenever the variable was reconfigured as "on" it would present the text associated with it being "on".

On the last passage I wrote this, to build up the spaceship:

  Your custom spaceship is $shipColor, $shipHeight, 

  and has a state of the art $shipFlight. 

And when I ran the game it printed this nifty little spacecraft:

Cute, right? Now as I always say, never trust the player. So the last thing I did was set some default settings hidden into the code. I set it up so that if the player didn't pick an option (in which case the code automatically put out a 0 value) that the $shipColor would be set to blue, the $ship height would be short, and the $shipFlight would be set to solar sails. The code itself looked like this:

(link-goto: "Your custom spaceship!", "rocketShipConfig")

[(if: $shipColor is 0)[(set: $blue to "on")]

(if: $shipHeight is 0)[(set: $short to "on")]

(if: $shipFlight is 0)[(set: $solarSails to "on")]]

Those default options are always important. Noting is more awkward than when your code throws in a 0 where there ought to be a string. There ya have it, pals! Happy Typing!