Twine makes it easy to string together passages of text into a storyboard to form a game. However, adding the finishing touches to enhance gameplay and make it more visually attractive is a bit more nuanced. Below we have provided links for a gaming mechanisms, web design guides, and visual and audio assets.

The goal should never be to pack in as many gadgets as possible. Rather, think about those core elements that make your game interesting. In Syrian Journey, artwork helped the player develop empathy for the Syrian refugees. In Queers in Love at the End of the World, the simple timer drove the entire game play. One or two game elements can radically enhance a game. Too many elements can create cognitive overload for the gamer and distract completely from the content or message of the game.

In our meeting today, participants will play through each others games, focusing on what worked well, what didn’t, and making suggestions for enhancement. Think about games and other media that you’ve enjoyed that could serve as inspiration to improve each game.

Twine Guides

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=”http://url.com” target=”_blank”>Click Here</a>
YouTube Video <html>
<iframe width=”100%” height=”pixel #” src=”https://url.com/embed/code” 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 the 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("https://source.unsplash.com/random/1280x720"); 
 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

Download Election Simulator 2016 and import it into Twine to review how it was built.

Discussion – Peer-Peer Learning

In the average classroom, it’s assumed that the instructor is the expert. While this is certainly true for the content of the course, there are many instances where our students know more about technology, etc.

  • How do we, as teachers, capitalize on our students strengths and expertise in the classroom?
  • Why would we want to have our students teach one another?
  • How has Peer-Peer Learning played a role in XP?
  • What is necessary in a course for Peer-Peer Learning to take place? How to we scaffolded Peer-Peer Learning?
  • What are the challenges facing Peer-Peer Learning? The benefits?
  • What assignments in your course allow for the integration of Peer-Peer Learning?