exercises-style

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<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 [[text and images]] from Scott Mccloud's <em>Understanding Comics</em>. For each of the macros, expressions, CSS and HTML techniques below you'll find a an example to demonstrate and guide alternate ways of composing the scene linked above. With nod to the iterative approach of <em>99 Ways to Tell a Story,</em> this activity invites you to re-create the scene above, with Twinery. Use multiple passages and a variety of these different techniques in combination with [[the provided text and images|text and images]]. Embrace and explore the novel Twine-based storytelling tools to expand the expressive value beyond text and image alone. <b>Access the coding/formatting directly</b> -- Save this Twine --right-click, or ctrl-click to Save As -- import the downloaded HTML file into twinery.org to then copy/paste the code into a new twine file where you can experiment with new styles for your interactive storytelling:</span> <ul> <li>[[Text Area]]</li> <li>[[Cycle with Images]]</li> <li>[[Type]]</li> <li>[[Link Append]]</li> <li>[[Link Replace]]</li> <li>[[Countdown Timer]]</li> <li>[[Time Constraint]]</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 TEXT AREA to invite subjective / expressive input 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." In the example below it is paired with link to advance to a new passage where the text can be displayed using the variable within the coding: Example: Describe your morning routine <<textarea "$routine" "">> When you have entered your description [[click here|text-demo]]

Either - Refresh browser tab to see other outcomes. Use EITHER to randomize outcomes for the reader. Example: I'll stop in the store to pick up some <<print either("ice cream", "dinner", "coffee", "soup", "cigarettes","lottery tickets", "bubblegum", "batteries", "an umbrella")>> [[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 [[this linked example|goto2]] there will be a 5 second delay and then Twine will automatically go back to the index

The following text [[is made invisible|index]] with changes in the Stylesheet (and tags)

Link Replace -- single-use link that deactivates itself and replaces its link text withthe hidden contents when clicked. Example: <<linkreplace "How do I get back to the menu?">>Simple, just [[click here|index]]<</linkreplace>>

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: I prefer <span id="rainy">rainy </span>weather\ <<timed 7s>><<replace "#rainy">>[[sunny|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 "[img[https://clogosphere.neocities.org/if/mccloud/panel_1.png]]">> <<option "[img[https://clogosphere.neocities.org/if/mccloud/panel_4.png]]">> <<option "[img[https://clogosphere.neocities.org/if/mccloud/panel_3.png][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]]

<<timed 5s>><<goto "index">><</timed>> In five seconds this will automatically go back to index

Wow, that's intense! So, everyday you are engaged in $routine? [[index]]

Introduce a time constraint with Link. Behind the scenes on this Macro, where a link takes you is based on how much time has passed in milliseconds. This is combined with a goto macro, an if / else statement and conditional operators. Here, if the player clicks the link in under 5 seconds, they make it into the store. Otherwise (else) they go home. Example: You realize you forgot to buy a carton of eggs. Quickly! Do you \ <<link "try to get back into store before they close?">> <<if time() lt 5000>> <<goto "store">> <<else>> <<goto "home">> <</if>> <</link>>

You made it in! Time to get some eggs before they close for the night [[index]]

Too late! The store is closed. You just go home. [[try again|Time Constraint]] or go back to [[index]]