NOTE: Sometime around 2015 there was an update to Google Forms that broke the ability to quickly/easy store high scores for Twine Games in Google Drive. Sorry!

<<set $name = prompt("What’s your name?")>>

/*Places the variables (given as parameters) into the Google Forms
text input field.*/
macros['googleForms'] =
{
handler: function (place, macroName, params, parser)
{
/*Enter the ID of the first Google Forms text input field here.*/
a = place.querySelector("#entry_111111111");
a.value = eval(Wikifier.parse(params[0]));
/*Enter the ID of the second Google Forms text input field here.*/
b = place.querySelector("#entry_222222222");
b.value = eval(Wikifier.parse(params[1]));
}
};

NOTE: Material in this tutorial does NOT work with Twine 2's default format, Harlowe.

Scripts allow you to add new features to your Twine game. You can find these scripts posted on blogs and in Twine forums. For example, Leon Arnott has created many scripts and has posted them to his blog, Glorious Trainwrecks.

To add a script to your game, click the menu in the bottom-left, then click Edit Story JavaScript. Copy and paste the script from the blog into the Edit Story JavaScript passage. Here is a simple script that I created that will allow you to change the background image within passages:

//changes the background image
macros['setback'] =
{
	handler: function (place, macroName, params, parser)
	{
document.body.style.backgroundImage = 'url('+params[0]+')';
	}
};

After adding that, you can use the macro on any page in which you would like to change the background image. Be sure to include the URL for the image. Like this:

<<setback http://ohiofi.com/img/oh.png>>

Finally, you might want to include some CSS like this:

body {
background-repeat:no-repeat;
background-size:100%;
}

Here is a DEMO that uses my setback macro.


This is part of a larger "How To" guide, click here for my full How To Use Twine guide.

CONTINUE TO THE NEXT POST: How to use Google Drive to store High Scores for Twine games

RANDOM NUMBERS

Games are more interesting if they are different each time you play. In board games, rolled dice and shuffled cards are typical. In video games, random numbers are used. You can use the code random to "roll dice" and get a number between 1 and 6. The code below says to the computer, “Generate a number between 1 and 6. If you roll a 1, the player has found a dollar.”

(set: $diceroll to (random: 1, 6))
(if: $diceroll is 1)[
  You found a dollar! (set: $money to $money + 1)
]

The code below say to the computer, “Generate a number of coins (between 1 and 100) to be found in a treasure chest and tell the player how many coins they found.”

(set: $randomtreasure to (random: 1, 100))
You found $randomtreasure coins in the treasure chest!
(set: $coins to $coins + $randomtreasure)

PICTURES AND ANIMATED GIFS

You can use <img src=" "> to add pictures and animated gif files to your game. Make sure that you only use one angle bracket on each side, not two. The web address of the file needs to go in between the "quotation marks," like this:

<img src="http://ohiofi.github.io/img/catdance1.gif">

STYLE

To customize the way your game looks, click the menu in the bottom-left, then Edit Story Stylesheet. In the stylesheet, you can write CSS code that will allow you to change the background color, the text color, the maximum size for pictures, and much more.

If you put the code background:lightblue; in the section after body { , it changes the background to light blue. Putting the code color:purple; in the section after body { changes the text color to purple. The code img { max-width:600px; } says to the computer, "All images (pictures, animated gifs, etc.) should be 600 pixels wide or less."

Here is some basic CSS that can be used with Harlowe, the default Twine 2 theme.

@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);

.mars { /* A background named 'mars' */
  background-image: url("http://ohiofi.github.io/img/mars.jpg");
  background-size: cover;
}

tw-story {
  /* The following changes the text */
  color: darkgreen; /* Set text to green or other color */
  text-shadow: 1px 1px lightgreen; /* Green text shadow */
  font-size: 20px;
  font-family: "Press Start 2P","Helvetica","Arial",sans-serif;

  /* Set background to fade lightblue to blue */
  background: lightblue; /* For old browsers */    
  background: -webkit-linear-gradient(lightblue, blue);
  background: -o-linear-gradient(lightblue, blue);
  background: -moz-linear-gradient(lightblue, blue);
  background: linear-gradient(lightblue, blue);

}

tw-passage {
  /* The following changes the text box */
  border: 5px groove gray; /* Gray border around the box */
  border-radius: 25px; /* Rounded corners on the box */
  background: rgba(255,255,255,0.7); /* 30% transparent box */
  padding: 25px;
}

tw-link {
  color:darkblue; /* Set the link color to darkblue */
  transition: color .5s ease-in-out;
}

tw-link:hover { /* Mouse over a link & it turns orange */
  color: orange;
}



img { /* Images won't get larger than 600px */
  max-width: 600px;
  max-height: 600px;
}