''Born Digital'' literature is created and accessed in direct relation to the digital medium. We might recast McLuhan and say, //The interface is the message//.
The [[purpose or charge-> Born Digital Experiment]] of this experiment can be fullfilled with other tools, but Twine is definately a good start.
---
- [[Key Tasks]]
- [[Reasons Why Sherwood Likes Twine]]
- [[Twine Resources]]
---
## Born-Digital Experiment 10%
This is an opportunity to get a taste of creating a literary text in a new media environment. I will introduce you to a simple, hypertext/interactive-fiction editor called Twine. We will discuss options. Some of you may become more experimental and learn about Processing/P5js, create your own Twitter Bot, or …?
You can create an original text or remix / remediate other literary texts. The emphasis will be on using this as a hands-on exploration. Some of my favorite student projects in the past have been decidedly "low tech." The point is to investigate the relationship between content and medium for yourself. Your project should exhibitacriticalintelligence, verbal innovation,and thoughtful explorationof the chosen media. It does not have to be perfect or publishable. You do not need any prior technological skills. We will present these in class; and you will submit your work with a brief (1-2 page reflection on your process, struggles, and what you discovered in making your experiment).* Medium - It provides a writing environment. Try composing text in Twine rather than pasting from MS Word
* Structure - The ease of creating lexia (pseudo-pages) encourages us to think spatially. You might write a multi-linear text of many configurations, but you need not default to paragraphs and pages.
* Multi-modality - Images, videos, and other online materials can be included with relative ease, but not too easily.
* Un-templated - The "template is the message" said the ghost of Bill Gates. The minimialism of Twine encourages us not to obsess on pretty shiny objects (though you can use CSS to control the visuals, add background images etc.
* Logic - the availability of a simple Macro language allows you to play with variables and conditions in a way that you get a taste for coding as kind of writing.
# OFFICIAL
Twine Wiki - <a href="http://twinery.org/wiki/">link</a> - The official Twine wiki is one starting point for practical questions.
Getting Started - <a href="http://twinery.org/wiki/twine2:guide">link</a> this page on the Twine wiki will be a very good reference.
Adam Hammond - this teacher of digital literature introduces undergraduates to Twine, and has created some useful video tutorials. <a href="http://www.adamhammond.com/twineguide/">link</a>
---
''Technical detail'' - Twine has gone through several versions (1.0, 1.4, 2.1) and there are several available story formats. You are using Twine 2.1.3 with the Harlowe story format. The only reason you need to know this is if you try to do something very complicated and are using other tutorials. Some of the other formats will have different affordances. Snowcube, for instance, has additional controls for manipulating sound. But if you're working with Harlow and try to follow Sugarcube instructions it won't work well. 0. [[Make a link]]
0. [[Make a 'covert' link]]
0. [[Add a simple image]]
0. [[Add a background image to a single page]]
0. [[Using variables]]
0.0. [[Setting a variable]]
0.0. [[Using a conditional]]Making a link is quite simple.
It should remind you of how a link is made in a wiki.
0. Type the link word, such as //example//
0. Enclose it in brackets: `[[example]]`
0. Save the passage on which you are working by ''clicking the X''
Making a covert link is only a little more complicated.
### But first, why?
Sometimes you want //link phrase one// and //link phrase two// to both point to the same destination, //the end//. Or maybe you just want the hotlinked prhase to be //a very poetic expression// but the destination needs to be titled //end01//.
### How?
0. Type the link word, such as //link phrase one//
0. Enclose it in brackets: `[[link phrase one]]`
0. Add an arrow pointing to the name of the destination passage: `[[link phrase one->end01]]`
0. Save the passage on which you are working by ''clicking the X''
[[link phrase one->end01]]
[[link phrase two->end01]]
[[long poetic phrase that's a link->end01]]Adding images is fairly simple. Like most "fancy" things in Twine, you just paste in some simple HTML.
There is one hitch. You are used to cutting and pasting an image into MS Word. In using the web-based Twine, that image must be published on the web somewhere. You need an "address" or URL.
### How?
Including an image involves using code such as this:
`<img src="the URL of your image" width="500" height="300" alt="description">`
<img src="http://sherwoodweb.org/ken.png" width="200" height="200" alt="description">
### Note
0. The address provided is the complete or "absolute" URL because I need the Twine to look it up on the web. So the example above uses http://sherwoodweb.org/ken.png
0. A limitation of this is that if that website were to move the image or change the name, the link would break.
#### Alternatively
If you export your Twine and place the images in the same folder of your own computer, you can then use "just the filename.jpg" to include images. But if you publish or share the Twine, you need to package up ALL the FILES!
You can read more about adding images and sound here <a href="http://twinery.org/wiki/twine2:add_an_image_movie_sound_effect_or_music">link</a>
You can change the background color or image on an individual page by adding style codes to the top. CSS color codes can be indicated by common color words (//black//, //white//, //yellow//, etc. ) or specific six-digit values call hex codes. Google //css hex color codes// for help.
Your style codes will look something like this and must be embedded between a pair of style codes:
`<style>
</style> `
### Color
`
body
{ background-color: red; color: white;
}
tw-link { color: #422424; }
`
### Background image
`
body
{ background-image: url("http://orig11.deviantart.net/8166/f/2013/219/c/0/c0fb1a1463169ace91f3e558fb0e3fe5-d6h0i32.gif")
}
tw-link { color: #422424; }
tw-passage {color: white;
font-family: Lora, serif;
font-size: 28px; }
`
[[Page with a background color]]
[[Page with a background image]]
You can learn more about styling Twine through this tutorial <a href="https://furkleindustries.com/fictions/twine/twine2_CSS_tutorial/">link</a>
## About variables
Writing "macros" in Twine allows you to explore some of the expressive features of coding. The first key concept is the variable.
In Twine, a variable is a hidden value that can be used to control behaviors. A typical and simple way to use is variable is as a counter. Perhaps you are writing a story in which you want to keep score or require certain steps to be taken before a test is satisfied.
For a beginner, there are two separate steps
0. Define the variable (you create it and give it an initial value)
0. Use the variable in a conditional test.
If the variable never changes, however, then we don't gain much. So usually there is also a mechanism by which that variable can change its value.
[[Setting a variable]]
[[Changing a variable]]
[[Using a conditional]] A typical way to set a variable is to give it a numerical value.
For example, this would create a variable called "score" and give it a value of "0":
`(set: $score to 0)`
NOTE: the "$" is what tells Twine that this is a variable. You can define other variables in this fashion: `(set: $health to 10)`, `(set: $lives to 3)`
Usually you would set these with initial values on the first page, and the user would not revist them. If the user returned to that page the values would again be set to those initial numbers.
[[Setting a variable]]
[[Changing a variable]]
[[Using a conditional]] Variables can be used in many ways but a first step is to allow them to determine what text appears or does not appear on a page.
Here is a scenario. Perhaps you are writing a narrative in which you only want the link to the end page to be available to the reader after he or she has read 50 passages.
So, you would have a test or condition.
If the reader's score is 50 or more, then show the ending page.
You could do something like this:
`(if:$score<50)[You aren't done yet.]
(if:$score>49)[You are done now.]`
Of course you can put more in those brackets, the code for an image, a whole set of links, three paragraphs worth of text etc.
[[Setting a variable]]
[[Changing a variable]]
[[Using a conditional]]
---
If you'd like to see a more complex example, I used Twine to make a sailing quiz that tracks score and keeps track of the answer status to a dozen different questions, ending with a "victory" page when the player has answered all the question and only if they've all been answered correctly. <a href="https://profsherwood.github.io/twine-sailing/SailingRightOfWay.html">Sailing Twine</a> You click to play it. But you can see the code if you download and open this in Twine.Double-click this passage to edit it.This is just to show that the link brought us to the page "end01"This is just to show that the link brought us to the page "end01"<style>
body
{ background-color: red; color: white;
}
tw-link { color: #422424; }
tw-passage {color: white;
font-family: Lora, serif;
font-size: 28px; }
</style>
There's not much text in this. But it shows up.<style>
body
{ color: white;
background-image: url("http://orig11.deviantart.net/8166/f/2013/219/c/0/c0fb1a1463169ace91f3e558fb0e3fe5-d6h0i32.gif");
color: white;
}
tw-link { color: #422424; }
tw-passage {color: white; font-family: Lora, serif;
font-size: 28px; }
</style>
## This is a very bold image.This is a very bold image.You could change the value of a variable in the same fashion you set it. For example, on page two you could write something like:
`(set: $score to 10)`
However with a variable such as this, there might be multiple occasions to change the score, so you might instead want to //increment// it, that is to increase it by one.
`(set: $score to $score + 1)`
Obviously, you could paste this incrementing code on several pages and the score would go up each time it was visited.
[[Setting a variable]]
[[Changing a variable]]
[[Using a conditional]]
---
Note, for simplicity we are treating variables that store a number. You can also use a variable to hold a string of letters (like a player's name). Sometimes it is also useful to be able to use a boolean or true/false variable such as `(set: $doorlocked to true)`.