<h1><span style="color:lime"> Exercises in Style</span></h1><span style="color: lightgray">This activity is based on Matt Madden's book <em>99 Ways to Tell a Story: Exercises in Style</em>, and also Stacey Mason + Mark Bernstein's <em>On Links: Exercises in Style</em>, and borrows images and text from Scott Mccloud's <em>Understanding Comics</em>.
In this activity, the goal is to further develop familiarity with unique ways of storytelling in Twine. Here are the [[text and images]] to use.
Below you will find a selection of macros, expressions, CSS and HTML techniques with examples to demonstrate how they might be used. You are expected to access the code/formatting directly by saving this Twine HTML file, then importing it into your twinery.org library so you can copy/paste/modify for your storytelling needs.
Work individually or with a partner: Combine <em>multiple</em> techniques to compose two different versions of this scene that break away from a single paragraph of text, and that negotiate use of available images too. Create a new Twine file for your two new versions, with names of participants included on starting passage of your new twine. When you are finished, publish to file.
Note: You can modify and introduce additional text, but stay within the context of the scene. The main goal of this activity is to explore unique ways of composing a story with Twine.</span>
<ul>
<li>[[Cycle]]</li>
<li>[[Cycle with Images]]</li>
<li>[[Type]]</li>
<li>[[Link Append]]</li>
<li>[[Link Prepend]]</li>
<li>[[Countdown Timer]]</li>
<li>[[Timed]]</li>
<li>[[Timed Replace]]</li>
<li>[[GoTo Nested with Timed|GoTo]]</li>
<li>[[Either]]</li>
<li>[[Invisible]]</li>
<li>[[Change Color of Select Words]]</li>
</ul>
Use CYCLE to invite expressive choice from the reader. As Clara Fernandez-Vara suggests "This kind of choice doesn't really have consequences in the system, but it makes the players feel like they're in control and they can be themselves."
Example:
You're hungry. Visions of <<cycle "$answer" autoselect>>
<<option "sandwiches">>
<<option "ice cream">>
<<option "granola bars">>
<<option "salads">>
<<option "pizza">>
<</cycle>> dance in your head
[[index]]
Either - Refresh browser tab to see other outcomes. Use EITHER to randomize outcomes for the reader.
Example:
You stop in the store to pick up some <<print either("ice cream", "dinner", "coffee", "soup", "aspirin", "cigarettes", "pretzels")>>
[[index]]<<set $seconds to 10>>\
The Store Closes Soon: <span id="countdown">$seconds seconds remaining</span>!\
<<silently>>
<<repeat 1s>>
<<set $seconds to $seconds - 1>>
<<if $seconds gt 0>>
<<replace "#countdown">>$seconds seconds remaining<</replace>>
<<else>>
<<replace "#countdown">>Closed!<</replace>>
<<stop>>
<</if>>
<</repeat>>
<</silently>>
[[index]]Simulating a typewriter. One way of pacing arrival of text on the screen. Change the number next to "type" in milliseconds (ms). You can also add a delayed start
<<type 40ms>>
I walked across the street.
<</type>>
<<type 40ms start 2s>>
I walked across the street, more slowly.
<</type>>
[[index]]Link Append -- single use link adds text after keyword. Use this to invite/provoke further participation from reader to advance the story
Example
You look into the <<linkappend "street" t8n>>, cars zoom by you. <</linkappend>>
[[index]]
goto macro <em>goes to </em>indicated passage as soon as Twine encounters it. Nesting a goto within a timed macro allows you to introduce a delay.
In example below there is a 15 second delay before the goto macro is activated. I've added Counter for visual reference
<<timed 15s>><<goto "index">><</timed>>
<<set $seconds to 15>>\
The Store Closes Soon: <span id="countdown">$seconds seconds remaining</span>!\
<<silently>>
<<repeat 1s>>
<<set $seconds to $seconds - 1>>
<<if $seconds gt 0>>
<<replace "#countdown">>$seconds seconds remaining<</replace>>
<<else>>
<<replace "#countdown">>Too Late<</replace>>
<<stop>>
<</if>>
<</repeat>>
<</silently>>
The following text [[is made invisible|index]] with changes in the Stylesheet (and tags)
Link Prepend -- single use link adds text before keyword. Use this reveal new insight into characters or circumstances
Example:
You <<linkprepend "love" t8n>> actually do not <</linkprepend>> when it rains!
[[index]]Delay display of text in 2 second intervals three times (at: 2s, 4s, 6s)
<<timed 2s>>Oh No...
<<next>>It's...
<<next>>Raining!
<<next>> You can also do this with images, use the Twine image formatting found on [[this page|text and images]] instead of text.
<</timed>>
[[index]]
Replace text after 7 seconds:
You hesitate. Too many choices! You choose<span id="strawberry"> strawberry </span> ice cream.\
<<timed 7s>><<replace "#strawberry">> [[vanilla|index]] <</replace>><</timed>>
This HTML Span tag allows you to change the color of a specific part of a sentence:
Example:
The clerk gave me a <span style="color:goldenrod">creepy </span>look
[[index]]Use CYCLE with images to introduce visual or hybrid visual/text-based modes of storytelling. Follow the option formatting to introduce text and/or image that can be cycled through. Conclude with a linked text or image if you want to advance to a new passage
<<cycle "$answer" autoselect>>
<<option "Heading home after work">>
<<option "[img[https://clogosphere.neocities.org/if/mccloud/panel_1.png]]">>
<<option "Raining [[again|index]]">>
<</cycle>>
Below is the text and images to use for this Exercises in Style activity. Once you save this Twine and import it into twinery.org you'll see the formatting and URLs of the images. You can also select and copy the text.
Return to [[index]]
TEXT:
<em><h2>I crossed the street to the convenience store. The rain soaked my boots. I found the last pint of chocolate chip in the freezer. The clerk tried to pick me up. I said, “No thanks." He gave me this creepy look. I went back to the apartment, and finished it all in one hour. Alone at last.</h2></em>
IMAGES:
[img[https://clogosphere.neocities.org/if/mccloud/panel_1.png]]
[img[https://clogosphere.neocities.org/if/mccloud/panel_2.png]]
[img[https://clogosphere.neocities.org/if/mccloud/panel_3.png]]
[img[https://clogosphere.neocities.org/if/mccloud/panel_4.png]]
[img[https://clogosphere.neocities.org/if/mccloud/panel_5.png]]