DIGI 260 - Lab 06 Home


Twine
Story Structure
Images
Random Choices
Styling Stories
Including Media

  1. Download Twine, or use it online (preferable), and create a new Story. You may wish to consult the Twine 2 Guide when working on this lab.

    By default, Twine stores your Stories in progress as cookies in your browser.
  2. Figure out the content for your Story.

    You can organize your content however you like, and Twine will keep track of the Story's Map. There's always one Passage which is the starting point for your story.

    Twine is all about linking content. There are a number of ways to create these links, such as: [[somewhere special]] [[off the map|somewhere special]] You can also use HTML anchor elements if you want to link away from your Twine Story.
  3. Add images to each of your passages. You can link to images online... <img src="http://ecx.images-amazon.com/images/I/51Qit4uKVrL._SY355_.jpg"> ...but likely you would prefer to link to your own images, which must be relative to your published HTML file (in the same folder).
  4. Twine allows for some randomness, which is one of the ways we can make stories approach Smuts' unpredictable interactivity. For example, you could begin your first passage like this: (either:"This is the beginning of story number [[one]].","This is the beginning of story number [[two]].") You could use grammar to build sentences like this: I love my (either: "cat", "dog", "elephant")! In your lab, create code so that your Story begins by displaying one of three possible images. The resulting image links to the next passage. (Consider this a "splash" screen for the beginning of your Story.)
  5. Twine has a fair bit of CSS by default. One of the goals here is to get Twine not looking so much like Twine. There are a couple of quick steps towards this goal: change the font; remove the default layout.

    Open the menu in the lower left corner of Twine and choose Edit Story Stylesheet. Paste the following CSS in the empty sheet:

    tw-story {
    	font: 2em monospace;
    	margin: 0;
    	padding: 0;
    	width: 100%;
    }
    
    tw-link {
    	color: green; 
    }
    
    tw-link.visited {
    	color: pink;
    }
    

    This will effectively hide Twine's sidebar (where the forward and back arrows appear). If you'd like your user to be able to go back, you'll need to provide them a link in your passage. As well, this changes the default colours of Twine links (different from anchor elements). If you hunt a little further in the default CSS, you can change the rollover effects as well. Twine provides all sorts of coding possibilities for styling text.

    In your lab, be sure you have custom colours and fonts chosen.

  6. Wrap the contents of one of your passages in a div element. Using inline CSS, make that div the full height and width of the browser window, and add a big background image. If you're averse to inline CSS, give the div an id attribute, and write a rule for that id in the Story Stylesheet.
  7. Create separate passages in your story to contain content from your Labs 1, 2, and 4. You'll need to use custom HTML to include this content.

Note: For the CSS portions of this lab, you may wish to consult this tutorial, which goes a little further into explaining CSS and the way it works in Twine.

When you choose Publish to File in Twine, you produce an HTML file. Place this HTML file and any other required files (TEST!) in a folder named with your first and last names, and the number of the lab. .zip this folder and upload it using the VIULearn page for the labs. Don't forget to have fun!

This lab is worth five marks. This lab is due at the beginning of next class.