Day 2

Building Text-Based Games (10AM)

Review 1st Syntax
  • 1st Twine Syntax – The most important tool—linking passages:

Link passages using [[this syntax]].

Twine Storyboard showing how [[]] syntax links passages

Here’s a variation on the [[syntax|Passage Title]].

Twine Storyboard showing how [[|]] syntax links passages

Another Twine Syntax (2nd)
  • 2nd Twine Syntax – Add Text Within A Twine Passage:

Use the Hook and (click:) Twine syntaxes together:

[Click  this text to reveal]<hook| (Click: ?hook)[And now this text has appeared]


In practice:

Producing Games
  • Continue planning games / Start working on games – this will be most of our time moving forward. Here’s what planning your game might look like:

  • Video Guides – Too long to watch all in session:

Sharing Progress & Ideas

Partner up with a colleague and describe your games/prototypes to each other. Feel free to share your current progress whether you’re still outlining on paper or building in Twine or both. Be sure to ask questions and give constructive feedback on the progress. For example, you can share one thing you like about your partners game and one thing you think might improve their  product.

Lunch (12PM)

Picture of sushi.

Continue Building Text-Based Games (1PM)

Add Media (Etc.) With These Twine Syntaxes

Common Twine Syntaxes

Content Type Syntax Examples (Change Underlined Content)
Audio* <audio src=”file.mp3” autoplay></audio>
Image* <img src=”file.png” height=”pixel #“>
Line <hr>
Link <a href=”” target=”_blank”>Click Here</a>
YouTube Video <html>
<iframe width=”100%” height=”pixel #” src=”” frameborder=”0″ allowfullscreen></iframe>

*Requires a file to be available in the root folder of your Twine game or a url of a file.

Please note, these are some syntaxes I use in my Twine games—this list in no where near exhaustive and variations exist (refer to the Harlowe manual and Twine wiki for more details). You are welcome to use these syntaxes to alter and enhance your game. Here’s a tutorial to get you started:

Adding Images to Twine Games Tutorial

Change Your Twine Game's Appearance with CSS

Cascading Style Sheets (CSS) are used to alter the appearance of web pages / html documents. There are several good CSS sheets already designed for Twine. You can  change the style from passage to passage to create a sense of movement for the player.

You can customize your Twine game in various ways using the Story Stylesheet in Twine and some CSS code. Using CSS, you can alter the presentation of your game including background and text color. For in-depth CSS view this guide and these resources. Otherwise, check out the basic Twine CSS below (copy any code you want into your game’s Story Stylesheet):

Example Twine CSS Code

  • Remove the “back arrow” button in your Twine game:
tw-icon.undo { display: none; }
  • Change the background color:
html { background-color: black; }
  • Change the text color:
tw-passage { color: green; }
/* Text between these symbols contains my comments. */
html { /* This CSS changes the background to a random image. */
 background-image: url(""); 
 background-size: cover;

tw-story { /* Changes to text and text box, respectively. */
 color: black;
 text-shadow: 1px 1px grey;
 font-size: 24px;
 border: 5px black;
 border-radius: 20px;
 background: rgba(255,255,255,0.9);
 padding: 20px;

tw-link { /* Changes color of links. */
 color: rgb(51,179,166);

tw-icon.undo { /* Removes the undo button. */

If you want to dive deeper, here’s a look at Twine syntax and CSS:

Free Images, Additional Guides, & Resources

Free (Open) Images

Twine Syntax

CSS Guides

Downloadable Twine Game

Your welcome to download Election Simulator 2016 and import it into Twine to review how it was built.

Faculty’s Twine Board Example


  • What are the major take aways from today?
  • What can game design and Twine teach our students? (i.e. Digital Literacy, Web Literacy, Media Literacy, etc.)
  • What types of Twine games make you most excited?

Link for shared notes in Google Docs