<<audio "song" play>><h2>Adding audio files to your Twine story</h2>
<<if $sf is "none">>Please select a story format above, then click <<link "continue">><<goto sound>><</link>>.<<else>>
Sound, like sweeping changes to [[background]], requires some advanced editing in Twine. It's one of the more finicky aspects of creating on the web, so expect some trial-and-error, along with web searches for tutorials and troubleshooting.
(Tired of the music on this page? <<link "Click here to stop it">><<audio "song" stop>><</link>>.)
* Save your audio file to the same folder as your Twine .html files. //Wherever possible, use .mp3 files, as these are standard across most browsers.//
<<if $sf == "sc">>* Create a special passage named "<a target="_blank" href="https://www.motoslave.net/sugarcube/2/docs/#special-passage-storyinit">StoryInit</a>".
<img src=storyinit.png>
* Cache the audio using the {{{<<cacheaudio>>}}} macro in the StoryInit passage. Use the code {{{<<cacheaudio "soundID" "filename.mp3">>}}} to load the sound as soon as the game loads.
<img src=cacheaudio.png>
The second term is the sound file's ID (which will be important in the next step), and the last is the actual filename of the sound you are calling.
* Now, go to the passage where you want to use sound, and use the "<a target="_blank"
href="https://www.motoslave.net/sugarcube/2/docs/#macros-macro-audio">audio</a>" macro to play the sound: {{{<<audio "soundID" play>>}}}
<img src=audio.png>
<</if>><<if $sf == "h">>* Enter the following code into your passage, making sure to replace the name of the file with your own filename:
{{{<audio controls>}}}
{{{<source src="filename.mp3" type="audio/mp3">}}}
{{{Your browser does not support the audio element.}}}
{{{</audio>}}}
* Harlowe doesn't have built-in audio capability, so this is an html code to run it. See more about <a target="_blank" href="https://twinery.org/cookbook/audio/harlowe/harlowe_audio.html">audio in Harlowe here</a>.<</if>>
//Make sure you get the file name correct—it's easiest to select it in its directory, and copy-paste into your Twine passage.//
<h3>Testing audio</h3>
To test that your audio works, you'll need to "Publish to File" (the same as you do when you <<link "save your Story">>
<<script>>
Dialog.setup("saving", "info");
Dialog.wiki(Story.get("saving").processText());
Dialog.open();
<</script>>
<</link>>), then load the saved html file in your internet browser.
All good? Try some other functions, like <<link"images">><<audio "song" stop>><<goto [[images]]>><</link>>, <<link"styling">><<audio "song" stop>><<goto [background]]>><</link>>, or just return to <<link"start">><<audio "song" stop>><<goto [[Start]]>><</link>>.<</if>><h2>Customizing the background</h2>
<<if $sf is "none">>Please select a story format above, then click <<link "continue">><<goto background>><</link>>.<<else>>
Changing background colors, font types, and other general changes to the look of your story/game may require some CSS styling. If you only want to change a line or two, in-line styling as described [[here|colors]] is fine. But if you want consistent changes throughout the story/game, you might want to start up a <a target="_blank" href="http://twinery.org/wiki/stylesheet">CSS stylesheet</a>.
<<if $sf is "sc">>Here are the basics:<</if>><<if $sf is "h">>Harlowe doesn't <em>love</em> CSS the same way SugarCube does, but you can do some basic things if you use Harlowe-specific code (see the <a target="_blank" href="https://twinery.org/cookbook/css/storyformats/harlowe.html">Twine cookbook</a>):<</if>>
* On the Twine menu, click "Story", then "# Stylesheet".
<img src=stylesheet.png>
* Let's start with changing the background of the entire site.
<<if $sf is "sc">><img src=cssbg.png><</if>><<if $sf is "h">><img src=cssbgH.png><</if>>
* You'll see in the above image that we've also already added the code for the background change, under the "<<if $sf is "sc">>body<</if>><<if $sf is "h">>tw-story<</if>> {" selector:
{{{background-color:blue;}}}
* You can use whatever color you like—here are some resources <a target="_blank" href="http://www.w3schools.com/cssref/css_colornames.asp">by color name</a> or by <a target="_blank" href="http://www.colorpicker.com/">hexadecimal color picker</a>.
* This changes the background of ALL your passages.
<<if $sf is "sc">><img src=bluebg.png><</if>><<if $sf is "h">><img src=bluebgH.png><</if>>
Want to [[change the background of only SOME passages|background2]]?
Or return to [[start|Start]].
<</if>>
<h2>Adding online images to your Twine story</h2>
To add images you've found online, first make sure they are available for you to use (i.e., saved under a <a target="_blank" href="http://creativecommons.org">Creative Commons license</a>, under public domain, or you've obtained permission from the owner). Then make sure you <a href="IP_Record.docx">log all the information you'll need to credit the source</a>.
* <strong>NOTE! If you use the method below and your images just //don't show up// when you play your game, it's likely you've sourced your images from a site that does not permit "<a target="_blank" href="https://www.hostinger.com/tutorials/hotlinking">hot-linking</a>".</strong> Flickr, for example, does not permit hot-linking. It's not the best way to do things, but because we're often working with limited capabilities with students, it's the quickest. If you cannot [[use your own images|ImgSaved]] (even downloading and then <<link "hosting them">>
<<script>>
Dialog.setup("resourceHosting", "info");
Dialog.wiki(Story.get("resourceHosting").processText());
Dialog.open();
<</script>>
<</link>> on an image hosting site), you'll need to find another source for your image(s) that does permit hot-linking.
//Tip: Google Images can search just for images that are okay to use. Click "Tools", then "Usage Rights" and "Creative Commons licenses".//
<img src=gimg.png>
Find the URL for the image you want to use. Usually, you can find this by right-clicking the image and selecting "Copy Image URL" or "Copy Image Address":
<img src=copyimgurl.png>
Or keep clicking on the image until the URL in your address bar ends with an image tag (.jpg, .png, .gif), then copy the entire URL:
<img src=imgurl.png>
Then, to insert your image, <<if $sf == "sc">>you can either use Sugarcube notation {{{[img[URL]]}}} OR <</if>>you can use standard <a target="_blank" href="https://www.w3schools.com/html/html_images.asp">HTML notation</a>:
<img src=webimg.png>
Now [[test play|testBuild]] your story, and see where the images show up!
Want to add [[images you've saved to your computer|ImgSaved]], [[sound]], [[external links|ExtLinks]], or change [[background]] or [[colors]]?
You can also review the basics starting [[here|Start]].[[Start Page|Start]]
[[The Basics|basics]]
[[Get Twine|getTwine]]
<<link "Saving and Importing">>
<<script>>
Dialog.setup("saving", "info");
Dialog.wiki(Story.get("saving").processText());
Dialog.open();
<</script>>
<</link>>
[[Story Format|story format]]
[[Writing Passages|passages]]
[[Testing|testBuild]]
[[Internal Links|IntLinks]]
[[External Links|ExtLinks]]
[[Colors|colors]]
[[CSS Basics|background]]
[[Images|images]]
[[Sound|sound]]
[[Sharing & Publishing|sharing]]
[[Other Tutorials|tutorials]]
To download this tutorial's source file:
* Right-click (Mac: Cmd-click) anywhere on this page and select "Save As..."
* Save the .html file, then open it in Twine (Story Library > Library > Import)<h2>Creating external links</h2>
Creating links to external websites is pretty easy—you just use HTML coding! All HTML coding works in Twine.
Use <a href="https://www.w3schools.com/html/html_links.asp" target="_blank">HTML "link" notation</a>:
<img src=extlink.png>
Now maybe you want to try something more complicated, like adding [[images]] or [[sound]], or changing [[background]] or [[colors]]. Don't forget to [[save and test your story|testBuild]]!<h2>Customizing select passage backgrounds</h2>
<<if $sf is "none">>Please select a story format above, then click <<link "continue">><<goto background2>><</link>>.<<else>>
<<if $sf is "sc">>If you want to change elements of only SOME passages, you'll need to use //Tagged Passages// and the //Story Stylesheet//.
For this tutorial, we'll use the background property as an example, but you can do this with any element of these tagged passages, including fonts, colors, images, and more.
* Tag the passages where you want the changed elements to occur by clicking "+ Tag" and typing in the tag. //Make sure the tag is the same on each passage it is used!//
<img src=tag1.png>
<img src=tag2.png>
* For changes to occur in only tagged passages, open Story > Stylesheet, and create properties for them by appending the property title with ".tag". In this example, the tag is "yellow"; in order to change //body// elements of these passages, the CSS code is
"body.yellow":
<img src=yellow.png>
<img src=yellowshow.png>
You can do this with any CSS element, and mix and match tags throughout the passages.<</if>><<if $sf is "h">>If you want to change elements of only SOME passages, you'll need to use the <a target="_blank" href="https://twine2.neocities.org/#macro_enchant">"enchant:" macro for Harlowe</a>.
For this tutorial, we'll alter the background property and some text color, but you can do more, such as animating text, with this macro (see the link).
* In the passage, call the "enchant:" macro by typing:
{{{(enchant: )}}}
(it's always a good idea to put your closing bracket in from the start, so you don't forget later, especially when there are nested brackets)
<img src=enchantH.png>
* You can see we've already added style code to this passage. "?Page" applies the style settings to the entire passage/page. After that, a comma, then {{{(background: blue)}}} to set the background color, and {{{(text-color: white)}}} to set the text color. Each style item needs a "+" between it. So the entire code is:
{{{(enchant: ?Page, (background: blue) + (text-color: white))}}}
<img src=psgbgH.png><</if>>
Now, how about other features, like [[sound]], [[images]], and other [[tutorials]]? Or, you could just return to [[start|Start]].
<</if>><h2>Creating internal links</h2>
Now you'll want to link your created passages together. Here's where you're going to start coding!
Double-click on a passage to edit it, or create a new passage. When you give your new passages titles, make sure to keep them short and simple.
To link from one passage to another, you use a simple bit of coding: two square brackets.
<img src=intlinks.png>
This passage shows two ways to create internal Twine links:
<ol>
<li>Simply place a set of square brackets around the title of the destination passage.</li>
<li>Or if you want the <em>linked</em> text to be different from the title of the destination passage, use this notation: {{{[[link text|passageTitle]]}}}. That's two square brackets, the text you want your reader to click, a vertical line or "pipe" (on most keyboards, this is located as part of the forward-slash key), the title of the passage you're linking to, then two square brackets.</li>
</ol>
When it is published in a browser, that passage will look like this:
<img src=intlinkspub.png>
//Note: Twine tries to help you as much as it can: when you type two square brackets and the start of the passage title, it will show you a list of possible passages you can select.
On the other hand, if you enter a link for a passage that doesn't exist yet, Twine will create the passage for you automatically. This is a quick way to create the passages your story needs.//
This brings up an important point: coding is picky! You have to get the sequence JUST RIGHT for it to work — that means capitalizations, spaces, spelling, symbols... //everything//.
[[So now let's test that it worked!|testBuild]]<h2>Open Twine</h2>
You will need a computer (desktop or laptop) or a tablet to create Twine stories. (Unfortunately, it doesn't really work on mobile phones.)
Click <a target="_blank" href="http://twinery.org/">Twine</a> to open the Twine website in a new window or tab.
You have two options for using Twine: <<link "download it to your computer">>
<<set $browser to true>><<goto download>><</link>> (helpful if your internet connectivity is patchy or unavailable) or <<link "use it in your internet browser">><<set $browser to false>><<goto onlineWarn>><</link>> (great if you can't download or install new programs/apps to your computer, or you're on a tablet).
Both versions will appear exactly the same, so there are no differences in how they work.<<silently>><<set $psg=0>><</silently>><h1>What is Twine?</h1>
Twine is a platform that uses its own coding system (which is very simple and straightforward) to create web-ready "hypertext" stories (which a lot of people call "Twine games").
<h2>How does this tutorial work?</h2>
The tutorial will take you through the steps to create a Twine story, from the simplest story to some of the more advanced capabilities like changing how the story looks. It also includes instructions for saving your Twine story so you can share it, whether privately or publicly online.
You can go through this tutorial step-by-step by following links in each passage, or you can skip to specific topics using the menu on the left-hand side of the screen.
If you already know what Story Format you want to use for your Twine story, you can set it above. If not, the tutorial will help you select one.
[[Click here to get started!|basics]]
<em>Note: Full installation and use notes for the latest version of Twine is available <a target="_blank" href="https://twinery.org/reference/en/index.html">here</a>.</em>
<h2>Customizing colors</h2>
<<if $sf is "none">>Please select a story format above, then click <<link "continue">><<goto colors>><</link>>.<<else>>
You can easily change the colors of the text in each passage by using the following CSS coding:
<<if $sf is "sc">>{{{@@color:red;Red text!@@}}}<</if>><<if $sf is "h">>{{{(text-colour:red)[Red text!]}}}<</if>>
Which will look like this:
@@color:red;Red text!@@
You can use whatever color you like -- here are some resources <a target="_blank" href="http://www.w3schools.com/cssref/css_colornames.asp">by color name</a> or by <a target="_blank" href="http://www.colorpicker.com/">hexadecimal color picker</a>.
You can also change the spacing of the letters, the type and size of the font, and other <a target="_blank" href="http://www.w3schools.com/cssref/default.asp">CSS inline elements</a>:
<<if $sf is "sc">>{{{@@color:red;letter-spacing:3px;font-size:1.5em;Red text!@@}}}<</if>><<if $sf is "h">>{{{(text-style:"expand")[(size:2)[(text-colour:red)[Red text!]]]}}}<</if>>
@@color:red;letter-spacing:3px;font-size:1.5em;Red text!@@
To change the background color of a line, use the following code:
<<if $sf is "sc">>{{{@@background-color:red;Red background!@@
}}}<</if>><<if $sf is "h">>{{{(bg:red)[Red background!]
}}}<</if>>
@@background-color:red;Red background!@@
These are inline changes—if you want to make general changes to your story/game, it would be better to use a <a target="_blank" href="http://twinery.org/wiki/stylesheet">CSS stylesheet</a>.
The basics of CSS stylesheets are described [[here|background]], or you can go back to the [[Start|Start]] for other functions.<</if>><h2>Testing your Twine story</h2>
<<if $sf is "none">>Please select a story format above, then click <<link "continue">><<goto testBuild>><</link>>.<<else>>
The text and coding you're putting into the Twine canvas is not what your readers will actually see once you publish your story—this is the case with any website, game, or app.
So, as a digital developer, you'll want to regularly check that your //published// piece works and looks the way you designed it to. Twine has an easy way to do this.
* First, make sure you <<link "save your work">>
<<script>>
Dialog.setup("saving", "info");
Dialog.wiki(Story.get("saving").processText());
Dialog.open();
<</script>>
<</link>>.
* Now to test the story, go to the Twine menu and click "Build" then "Play".
<img src=play.png>
If you are using the browser version, this will simply add a new tab with your game in it. If you are using the desktop version, this will open a default Twine browser window.
* Once it's opened in your browser, you can play it and see if it's looking and working like you want it to.
<<if $sf is "sc">><img src=testplay.png><</if>><<if $sf is "h">><img src=testplayH.png><</if>>
* Once you're happy with your story, you can [[publish and share it|sharing]].
So those are the basics—you can build a story using nothing more than these tools.
You can also change the look of your [[text|colors]] and [[background]], and add things like [[images|images]], [[sounds|sound]], and [[external links|ExtLinks]].<</if>><h2>Adding local images to your Twine story</h2>
//Note: ''Only'' use this option if you will be [[publishing|sharing]] your Twine Story to your own server (e.g., you have your own website). If you don't have your own server and will be publishing through a Twine server such as <a target="_blank" href="http://itch.io/">itch.io</a>, ''all'' of your resources (images, sounds, etc.) will need to be <<link "hosted online">>
<<script>>
Dialog.setup("resourceHosting", "info");
Dialog.wiki(Story.get("resourceHosting").processText());
Dialog.open();
<</script>>
<</link>>, and you'll need to use the [[steps for adding online images|ImgOnline]].//
* To add images you've saved to your computer, first make sure they're <<link "saved">>
<<script>>
Dialog.setup("saving", "info");
Dialog.wiki(Story.get("saving").processText());
Dialog.open();
<</script>>
<</link>> to the same folder as your Twine story's .html file.
//If they're not in the same folder as the .html file, then they won't show up when you publish your story.//
* Then, to insert your image, you just enter in the following code:
{{{<img src=blerg.jpg>}}}
That's just one square bracket, the text "img", another square bracket, the name of the image file, then two closing square brackets.
* Now [[test play|testBuild]] your story, and see where the images show up!
Want to add [[images you've found online|ImgOnline]], [[sound]], [[external links|ExtLinks]], or change [[background]] or [[colors]]?
You can also review the basics starting [[here|Start]].<h2>Adding images to your Twine story</h2>
If you thought adding images was going to be more complicated than adding links, you were so wrong. It's almost easier!
There are two categories of images you can include in your Twine story: [[images saved on your computer|ImgSaved]] or [[images you've found online|ImgOnline]] //(don't forget to write all necessary information down about other people's images you find online—you'll want to include a credits passage to give them their fair dues!)//.
<span class="subt1">Twine 2.8, SugarCube & Harlowe</span>
<span class="subt2">Updated July 2024</span>
<div class="title"><a target="_blank" href="http://lyleskains.com/">Dr. Lyle Skains</a></div>
<span class="subt1"><<ToggleTheme>></span><h2>Other Twine tutorials</h2>
Here are some other excellent tutorials and resources you can use to build your Twine stories:
* <a target="_blank" href="https://twinery.org/cookbook/">The Twine Cookbook</a>—a resource of examples of different things you can do in Twine, with notes on the four primary Story Formats.
* <a target="_blank" href="https://www.motoslave.net/sugarcube/2/docs/">Sugarcube 2 Documentation</a>—all the things you can do in Twine's Sugarcube 2 Story Format.
* <a target="_blank" href="http://www.adamhammond.com/twineguide/">Adam Hammond's Twine Guide</a>—a great starting tutorial, including ''videos''.
* <a target="_blank" href="https://hiev-heavy-ind.com/Sample_Code/Sample_Code.html">HiEv's Sample Code Collection</a>—a fantastic collection of sample code for SugarCube //in// a Twine story you can save and import to Twine.
* <a target="_blank" href="http://twinery.org/questions/">Twine Q&A</a>—a forum where people ask and answer questions about worknig in Twine. //A bit old now, but still a useful resource if you search.//
* <a target="_blank" href="https://twinery.org/forum/discussion/1528/css-is-your-friend-the-basics-of-changing-twines-default-appearance-for-newbs">CSS is Your Friend: The Basics of Changing Twine's Default Appearance For Newbs</a>—Also getting a bit dated, but CSS basics don't change much.
* <a target="_blank" href="http://pastebin.com/Lb7KrHrZ">Some good CSS pointers (sample CSS stylesheet)</a>
* <a target="_blank" href="http://www.w3schools.com/cssref/default.asp">CSS Properties Reference</a>
* <a target="_blank" href="http://www.w3schools.com/cssref/css_selectors.asp">CSS Selectors Reference</a>
* <a target="_blank" href="http://www.colorpicker.com/">Color Picker (Hexadecimal)</a>
* <a target="_blank" href="http://ifdb.tads.org/">The Interactive Fiction Database</a>—find Twine stories/games to play, and post your own!
* <a target="_blank" href="http://itch.io">itch.io</a>—an indie game publishing site that features a lot of Twine games. You can also publish your games here.
Looking for more? I keep a running list of more <a target="_blank" href="https://vl5ttjmfy2.joplinusercontent.com/shares/qFGfgUilci3NeNgBQtsbqY">advanced Twine tricks I've used here</a>.
Return to [[start|Start]].<h2>Saving your Twine story</h2>
When you access Twine for the first time, it offers you this warning:
<img src=twineSaveMsg.png>
<div class="info">Twine saves your work two ways: //Autosave to cache// and //Publish to file//.
//Autosave to cache// just means Twine is automatically saving everything you do to a temporary cache file. If you're working in the online version, it's saving to your browser's history cache. If you're working in the desktop version, it's saving to a cache on your hard drive.
''These autosaves are easily wiped out!!!'' So you'll want to make sure you are frequently publishing to file:
On the Twine menu, click "Build" then "Publish to File".
<img src=pubtofile.png>
This will prompt you to save the .html file to your computer. You can name it anything you want, though it's easy enough to keep it as the story name. Save it somewhere you know you can find it.
//Note: once you start adding images and other file types to your story, you'll want to save them in the same location (folder or directory) as your .html file.//</div>
<h3>Opening a saved story in Twine</h3>
If you clear your cache or move to a new computer, you'll need to import your saved story back into Twine to edit it again.
From your Story Library, click the "Library" menu item, then "Import". You can then select the downloaded .html file from your computer, and open it in Twine to edit.
<img src=import.png>
<h2>Writing Passages</h2>
<<if $sf is "none">>Please select a story format above, then click <<link "continue">><<goto passages>><</link>>.<<else>>
The "Untitled Passage" box you see here is a //passage//. Double-click on it, and you'll be able to edit it:
<<if $sf is "sc">><img src=passage.png><</if>><<if $sf is "h">><img src=passageH.png><</if>>
Each passage will need a title and text in the passage.
Click "Rename" to title your passage.
<<if $sf is "sc">><img src=passagetitle1.png><</if>><<if $sf is "h">><img src=passage-titleH.png><</if>>
Name your passage something useful, keeping it short and memorable, and click "OK".
<<if $sf is "sc">><img src=passagetitle2.png><</if>><<if $sf is "h">><img src=passagetitle2H.png><</if>>
Then add text to your passage!
<<if $sf is "sc">><img src=titletext.png><</if>><<if $sf is "h">><img src=titletextH.png><</if>>
You can enter as much text as you like—each Twine passage is like a page in a story or website.
Play around with creating a few passages in Twine by clicking the "+New" button.
<img src=addpassage.png>
<<linkreplace "Alternative: quick passage creation">>Creating a new [[link|IntLinks]] with a passage title that is not currently in use will automatically create a new passage with that title in the canvas.<</linkreplace>>
[[Once you have a few passages, you'll need to link them together...|IntLinks]]
/%See how I've put in an external html link here to Twine? That's the
basic html coding for links - two square brackets, followed by the text
that will be the linking word, a vertical line, linked location, and two
closing square brackets:
[[linking text|http://URLtoweb.com]]
%/
<</if>><h2>Sharing your Twine story</h2>
What's the point of creating a story or game if no one can play it, right? So let's publish our Twine stories so we can share them with friends.
* When your game is ready to publish, <<link "Publish it to File">>
<<script>>
Dialog.setup("saving", "info");
Dialog.wiki(Story.get("saving").processText());
Dialog.open();
<</script>>
<</link>> just as you do when saving your game.
* If you have your own web hosting service, you can use that to <a target="_blank" href="https://www.wpbeginner.com/beginners-guide/how-to-host-a-website/">post the html files as a website</a>. If not, move on to the next step.
* You can host a website with your Twine stories through a [[GitHub account]].
* [[itch.io|http://itch.io]] allows you to host your games there and offer them for any price point you like (including free). You can also keep them private, so they're not publicly searchable.
//Note that if your Twine game incorporates images, audio, or other files outside of the exported html file, you'll need to [[host these online somewhere|resourceHosting]].//
* Upload your html file, and retrieve the web address.<h2>Hosting images and sounds online</h2>
If you don't have a webserver you can publish your Twine game to (and don't want to use a [[GitHub account]] , any external assets like images and sounds will need to be hosted somewhere. You'll be sharing your Twine HTML file, but this doesn't automatically include offline image and sound files.
So if you're using external assets (images, sound), you'll need to host them somewhere else online, using a hosting service such as:
''All File Types''
* <a target="_blank" href="https://www.dropbox.com/">Dropbox</a>
* <a target="_blank" href="https://drive.google.com">Google Drive</a>
* <a target="_blank" href="https://www.4shared.com/">4shared</a>
''For Images''
* <a target="_blank" href="https://www.google.com/photos/about/">Google Photos</a>
* <a target="_blank" href="http://imgur.com/">Imgur</a>
* <a target="_blank" href="https://www.flickr.com/">Flickr</a>
* <a target="_blank" href="http://www.freeimagehosting.net/">Free Image Hosting</a>
* <a target="_blank" href="http://postimage.org/">PostImage</a>
* <a target="_blank" href="http://imageshack.us/">ImageShack</a>
* <a target="_blank" href="http://photobucket.com/">PhotoBucket</a>
* <a target="_blank" href="http://www.500px.com/">500 Pixels</a>
* <a target="_blank" href="https://imgbox.com/">ImgBox</a>
Upload your file to one of these services, and locate its web URL.
For images, you can locate the web URL by right-clicking on the image and selecting "Copy Image Address". The file address //must// end in an appropriate file extension for the type of resource it is. Typically, these are .jpg, .png, .gif
<img src=imgaddress.png>
Use this link in place of the filename when adding your image to a Twine passage.
<img src=imgaddress2.png>
For sound files, you'll need to use a file-sharing service like Dropbox or Google Drive.
''For Dropbox''
* Upload the file to Dropbox, then <a target="_blank" href="https://www.dropbox.com/help/files-folders/view-only-access">share it so you get a sharing link</a>. Copy this link.
* The end of the sharing link should be "dl=0". Change the 0 to a 1.
* Use this link in place of the filename when adding your sound to the "cacheaudio" micro in your StoryInit file.
<img src=soundlink.png>
For Google Drive, follow <a target="_blank" href="https://www.labnol.org/internet/direct-links-for-google-drive/28356/">these instructions</a> to get the URL to put into the "cacheaudio" macro.
You can go back to [[sharing]] from here, or use the menu to explore other areas of the tutorial.<<silently>><<cacheaudio "song" "RetroMusiciStock_000011160348Wav44100.mp3">>
<<set $sf to "none">>
<</silently>><<silently>>
<<if $psg==0>>
<<set $rdPsg to "As for passages, the page you're reading right now is a <em>passage</em>. It's a bit of text (and, as you'll see, can include images, video, interactive elements, and even audio) that tells your reader/player something, advances the story, etc.<br><br>A Twine story is made up of multiple passages connected by links.<br><br>Now that you understand passages and links, you're ready to [[create your own|getTwine]].">>
<<else>>
<<set $rdPsg to "Now that you understand passages and links, you're ready to [[create your own|getTwine]].">>
<</if>>
<</silently>>
<h2>Links</h2>
If you've browsed the internet, you're already pretty familiar with links. Links act as portals from passage to passage, just as they help you travel from webpage to webpage.
$rdPsgfrom START:
In fact, this tutorial was completely written in Twine, and you can download the source file to see how it was done! Just right-click (Mac: Cmd-click) anywhere on this page and select "Save As..." Save the .html file, then open it in Twine.
[[Start from the bare basics|getTwine]]
[[Learn how to create links to other passages|IntLinks]]
[[Learn how to create links to external websites|ExtLinks]]
[[Learn how to change the colors|colors]]
[[Learn how to add images|images]]
[[Learn how to add sound|sound]]
[[See the list of other useful tutorials and resources|tutorials]]
/%See how this text is in gray, and it doesn't show up in the story when you test/build it? That's because it's a "comment" - it appears when you're coding the story, but not in the final version itself. You can use these comments to write notes to yourself.%/
____________________________
<em>More advanced users can integrate <a target="_blank" href="https://www.w3schools.com/html/html_intro.asp">HTML</a>, <a target="_blank" href="https://www.w3schools.com/css/css_intro.asp">CSS</a>, and <a target="_blank" href="https://www.w3schools.com/js/js_intro.asp">JavaScript</a>, but if this is your first time, let's walk through the basics.</em>
______________________________
<h2>Twine basics</h2>
The key components to create Twine stories are <<link "passages">>
<<replace "#1">>This page you're reading right now is a <em>passage</em>. It's a bit of text (and, as you'll see, can include images, video, interactive elements, and even audio) that tells your reader/player something, advances the story, etc.
A Twine story is made up of multiple passages connected by [[links]].<</replace>>
<<set $psg=1>>
<</link>> and [[links]].
<span id="1"></span><<silently>><<set $browser to false>><</silently>>
<h2>Download Twine to your computer</h2>
This is the current (as of 12 June 2024) Twine website:
<img src=twineweb.png>
Click "Download desktop app". This will open the GitHub page for Twine, and the latest release will be at the top of the page.
<img src=download.png>
<em>Note: Full installation and use notes for the latest version of Twine is available <a target="_blank" href="https://twinery.org/reference/en/index.html">here</a>.</em>
There are five versions of Twine available. <strong>The most flexible version is the one ending in "...web.zip".</strong> This version will work on any OS because it runs in your browser, exactly like the [[onlineWarn|online]] version of Twine. The only difference is that it runs from your own computer, so you can use it even if you're not connected to the internet.
To use this version, download the .zip file to your computer, <a target="_blank" href="https://www.wikihow.com/Unzip-a-File">unzip</a> the downloaded file. This will give you a "web" folder containing, among other things, an "index.html" file. Double click this file, and it will open in your internet browser, and you're ready to [[create a new story|newStory]].
If you prefer a desktop version for your particular operating system (OS), select the GitHub download that matches your OS and follow the installation instructions (<a target="_blank" href="https://twinery.org/reference/en/getting-started/installing.html">also found here</a>):
<ul>
<li>Windows - click the version ending in "...Windows.exe"</li>
<li>Mac - click the version ending in "...macOS.dmg"</li>
<li>2 options for Linux - click the version ending in "...Linux...zip" that corresponds to your system</li>
</ul>
There's no app available for tablets, so if that's what you have, you'll need to use the [[onlineWarn|online]] version.
Once you've installed your preferred version of Twine, it's time to open it up and [[create a new story|newStory]].<h2>Using Twine in your browser</h2>
This is the current (as of 12 June 2024) Twine website:
<img src=twineweb.png>
<em>Note: Full installation and use notes for the latest version of Twine is available <a target="_blank" href="https://twinery.org/reference/en/index.html">here</a>.</em>
Click "Use in your browser", and it will open Twine right in the same browser tab. Now you can [[create a new story|newStory]].<h1 style="color:red;">WARNING</h1>
Using Twine in your browser means you need to be <em><strong>very careful</strong></em> to <strong><span style="color:red;">save your Twine story frequently</span></strong>.
When you access Twine for the first time, it offers you this warning:
<img src=twineSaveMsg.png>
Twine saves your work two ways: //Autosave to cache// and //Publish to file//.
//Autosave to cache// just means Twine is automatically saving everything you do to a temporary cache file. If you're working in the online version, it's saving to your browser's history cache. If you're working in the desktop version, it's saving to a cache on your hard drive.
''These autosaves are easily wiped out!!!'' So you'll want to make sure you are frequently publishing to file:
On the Twine menu, click "Build" then "Publish to File".
<img src=pubtofile.png>
This will prompt you to save the .html file to your computer. You can name it anything you want, though it's easy enough to keep it as the story name. Save it somewhere you know you can find it.
//Note: once you start adding images and other file types to your story, you'll want to save them in the same location (folder or directory) as your .html file.//
Got it? Click here if you commit to frequently Publish to File so your work is saved, and [[let's use Twine in your browser|online]]!<h2>Create a New Story</h2>
Starting from your <strong>Stories Library</strong>:
<img src=twinehome.png>
Click the <img class="button" alt="+Story" src=newstory.png> button. Name your story (you can change this, so don't worry too much about it), and click "Create".
<img src=namestory.png>
Your new story will open up into the Twine "[[canvas]]".<h2>Twine Canvas</h2>
This is Twine's basic working area or ''canvas''.
<img src=canvas.png>
<em>Twine follows your settings for light or dark mode. You can change this manually by going to the menu and selecting "Twine > Preferences > Theme".</em>
These are Twine's menus, with all the options:
<img src=menu.png>
One of the first things you ought to think about is [[story format]].<<if $sf is not "none">> If you're already familiar with Story Formats, you can skip ahead to [[writing passages|passages]].<</if>><h2>Story Format</h2>
Twine has several different settings that change how you use it in the canvas, as well as how it looks when it is published.
You can use two of the most popular Story Formats in this tutorial: [[Harlowe]] and [[SugarCube]]. Let's have a look at each of them to help you decide.
<<if $sf is not "none">> If you're already familiar with Story Formats, you can skip ahead to [[writing passages|passages]].<</if>><h2>Harlowe</h2>
For new users, Harlowe is the default format. A lot of Twine beginners work with Harlowe, which includes more of a WYSIWYG (What You See Is What You Get) interface, where you don't have to do as much coding. The reason we don't use Harlowe on You & CO<sub>2</sub> is that we think it's important that you learn some basic coding for other applications in your life!
In the canvas, it has a lot more help and options in the passage creation space:
<img src=harlowe-psg.png>
It also has a very simple default story style with a built in "back" button:
<img src=har-psg-play.png>
Harlowe is very popular with new users, and users who don't already have coding experience in other spheres (such as familiarity with <a target="_blank" href="https://www.w3schools.com/html/html_intro.asp">HTML</a>, <a target="_blank" href="https://www.w3schools.com/css/css_intro.asp">CSS</a>, and <a target="_blank" href="https://www.w3schools.com/js/js_intro.asp">JavaScript</a>). Those who do have more experience may find it limiting.
Are you ready to [[select your Story Format|SFchoose]], or would you like to review [[SugarCube]]<<if hasVisited("SugarCube")>> again<</if>>?
<<if $sf is not "none">> If you're already familiar with Story Formats, you can skip ahead to [[writing passages|passages]].<</if>><h3>SugarCube</h3>
Sugarcube is the most powerful of the Twine story formats (to date), and most advanced Twine developers work in Sugarcube. That's because it includes the most options for making things work, and integrates more advanced coding (<a target="_blank" href="https://www.w3schools.com/html/html_intro.asp">HTML</a>, <a target="_blank" href="https://www.w3schools.com/css/css_intro.asp">CSS</a>, and <a target="_blank" href="https://www.w3schools.com/js/js_intro.asp">JavaScript</a>) more seamlessly than the other formats.
SugarCube offers fewer options "out of the box" — it doesn't do a lot of things for you automatically like Harlowe does — but it has a lot of flexibility and growing room that Harlowe often doesn't. Plus, since so many advanced users prefer SugarCube, that means there are a lot more tutorials out there for cool Twine stuff in this Story Format than most of the others.
Editing SugarCube passages looks like this:
<img src=passage.png>
And when played, the default SugarCube layout looks like this:
<img src=testplay.png>
<em>If it looks familiar, that's because this tutorial was built using SugarCube.</em>
If you continue to create stories and games with Twine, you'll find you want to do more advanced things as your knowledge and skills grow. Why not start with the format that can grow with you?
Are you ready to [[select your Story Format|SFchoose]], or would you like to review [[Harlowe]]<<if hasVisited("Harlowe")>> again<</if>>?
<<if $sf is not "none">>If you're already familiar with Story Formats, you can skip ahead to [[writing passages|passages]].<</if>><h2>Choosing your Story Format</h2>
There are <em>many</em> <a target="_blank" href="https://mcdemarco.net/tools/hyperfic/twine/catalog/">more Story Formats</a> for Twine than [[Harlowe]] and [[SugarCube]], but since these two are the most commonly used, have the most online tutorials and documentation, we're going to stick with these.
So which Story Format would you like to use for your first Twine story?
<<link "Harlowe">><<set $sf to "h">><<goto SFset>><</link>>
<<link "SugarCube">><<set $sf to "sc">><<goto SFset>><</link>><h2>Setting your Story Format</h2>
<<if $sf == "h">>Harlowe is Twine's default Story Format, so you don't <em>have</em> to do anything here. But if you want to know how it's done, here you go.<br><br><</if>>
On the menu, click "Story", then "Details" to open the Story Format dialog window.
<img src=sc-1.png>
<img src=sc-dialog.png>
Click on the arrow in the Story Format drop-down, and you can see all installed Story Formats.
<<if $sf == "sc">><br>Select the latest version of Sugarcube in the "Story Format" drop-down, then you can click the "X" to close the dialog window.<br><img src=sc-2.png><</if>>
Now we can [[create your first Twine passage|passages]]<<if $sf is not "none">> with <</if>><<if $sf == "h">>Harlowe<</if>><<if $sf == "sc">>SugarCube<</if>>!<div class="title">Lyle's Twine Basics</div><div class="header"><<if not tags().includes("noheader")>>
Story Format: <<cycle "$sf" autoselect>>
<<option "Click to select" none>>
<<option "Harlowe" h>>
<<option "SugarCube" sc>>
<</cycle>><</if>></div>
<h2>Using GitHub to host a website</h2>
You can use GitHub's free account services to host your Twine stories as websites. To do this, you'll need to:
<ol>
<li>[[Create a GitHub account]]</li>
<li>[[Create a new GitHub repository]]</li>
<li>[[Upload your Twine story to the repository]]</li>
</ol>
Other optional GitHub actions you can do are:
* [[Host multiple Twine stories on the repository]]
* [[Delete files on GitHub repository|edit files on GitHub repository]]
<h2>Create a GitHub account</h2>
Go to <a target="_blank" href="https://github.com/">GitHub</a> and enter your email to start the account registration process.
<img src=githubSignup.png>
You'll need to then enter a password and select a username.
//Choose your username wisely! Typically for GitHub, your username should be somewhat anonymous, so don't use your real name. Keep it simple, short, and all lowercase. Your username will be part of the web address for your Twine stories, so keeping it straightforward will make it easier to remember.//
Once you've done that, GitHub will ask you to verify your account. Then you'll be able to log in to GitHub, and [[create a new GitHub repository|Create a new GitHub repository]].<h2>Create a new GitHub repository</h2>
Once you've verified your new GitHub account, you can log in for the first time. You can skip the "personalization" wizard (or go through it; you do you), which will bring you to your dashboard or home page:
<img src=createghrepos.png>
There are two places here where you can create a new repository: upper left green button "Create repository", or a quick start to naming your repository and setting it to public or private in the middle of the page ("Start a new repository for USERNAME").
Whichever button you choose, you <strong>MUST</strong> use the following name for your repository (replacing USERNAME with your actual username):
USERNAME.github.io
For example, if your username is "pea", you would name the repository "pea.github.io".
<img src=createrepos.png>
You can select whether you want the repository to be public (anyone on the internet can see it) or private (only you and people you select can see it). You can change this later, so it's fine to leave it at private for now if you like.
Click "Create Repository" to complete the process, and it will take you to your repository page so you can [[upload your Twine story to the repository|Upload your Twine story to the repository]].
<img src=repository.png><h2>Upload your Twine story to the repository</h2>
First, make sure you've <<link "saved your Twine story">>
<<script>>
Dialog.setup("saving", "info");
Dialog.wiki(Story.get("saving").processText());
Dialog.open();
<</script>>
<</link>> to your computer, and you know //where// on your computer it is located (usually a downloads folder).
Your Twine file will automatically download using your story's title as the filename. So if you've created a Twine story named "The Unbearable Heaviness of Cats", the file will be saved as "The Unbearable Heaviness of Cats.html".
<img src=saveFile.png>
For the Twine story to work as the base for your GitHub website, you will need to rename it to "index.html".
<img src=renamehtml.png>
Next, go to your GitHub repository page. Under "Quick setup", click "uploading an existing file".
<img src=reposupload.png>
Drag and drop your Twine story (now renamed "index.html") to your GitHub repository.
<img src=upload.png>
<strong><span style="color:green;">Don't forget to click the green "Commit changes" button at the bottom of the page!</span></strong>
//If you have included files (images, sound, etc.) in your Twine story that are only located on your computer (i.e., you have not hotlinked from the internet), you must also upload them to your repository here.//
Now, you can open a new browser tab, and navigate to {{{https://USERNAME.github.io}}} (obvs, replace USERNAME with your registered username), and you will see your published Twine story. (For this sharing option, your repository must be set to "Public".)
If your repository is set to Private, you can still share, but only with other GitHub account holders. To add "collaborators", go to "Settings > Collaborators" and add GitHub members.
If you'd like to change whether your site is shared publicly or privately, go to "Settings", scroll down to the bottom, and click "Change Visibility".
<img src=visibility.png>
You can also [[host multiple Twine stories on the repository|Host multiple Twine stories on the repository]], or use the main menu on the left side of the screen to go elsewhere in the tutorial.<h2>Host multiple Twine stories on the repository</h2>
If you have more than one Twine stories you want to host on your GitHub page, you'll need to create an index page that helps users navigate to each story, and a directory (folder) for each story in your repository.
The process is much the same as uploading a single Twine story to GitHub, but you'll be using another file as your index file (which is the default start page); first, however, let's build our directory of Twine stories.
We're going to build this directory assuming that you have at least one Twine story that uses local files (e.g., images or audio files saved on your computer). This will create a neater repository that is easier for you to organize and keep track of.
There are two ways to create a useful directory on GitHub, but the easiest way is to [[upload folders directly to the repository|Upload folders directly to the repository]], so that's what we're going to do!<h2>Edit files on GitHub repository</h2>
If your repository has files in it, the "Code" tab of the repository will look like this:
<img src=reposwfiles.png>
<strong>To edit a file created //on// GitHub</strong>, click the file name on the repository list, then click the pencil editing icon and select "Edit in place":
<img src=editinplace.png>
You can then edit the html code, remembering to <span style="color:green;">click "Commit changes" when you finish</span>.
<strong>To delete a file</strong>, click the name of the file in the list. It will open the file in GitHub.
<img src=fileGH.png>
Click the three dots on the right side, and select "delete file".
<img src=fileghdel.png>
<span style="color:green;">Don't forget to click the green "Commit changes" button in the upper right, and again in the dialog that opens!</span>
<strong>To update any of the files you uploaded</strong> (including a Twine index file), edit your locally saved (on your computer) file, delete the old version of the file in the GitHubrepository, and upload the new version again.
Now you've got a website of all your Twine stories you can share with friends. Time to make some more stories!<h2>Upload folders directly to GitHub repository</h2>
This should be the easiest way to put multiple Twine stories on your GitHub website; ideally, you should have your Twine stories saved in organized folders on your computer anyway, so it will be as simple as drag-and-drop.
This is how I organize my Twine stories:
<img src=localfolder.png>
This is the selection of Twine stories I want to upload to my GitHub repository. Each folder here ("cats", "escape", etc.) is one Twine story, and contains at least the .html file downloaded from Publishing to File. Some stories, like the "cats" folder highlighted above, have additional files that I need to upload with them, such as images and sounds used in the story.
<strong>Any additional files that you need to upload with your Twine story MUST be in the same folder with the .html file.</strong>
In the "cats" folder that is highlighted, note also that the Twine file has been renamed to "index.html", just as we did when [[uploading a single Twine story to GitHub|Upload your Twine story to the repository]]. This will help later when we create a page to navigate to each of our stories.
Finally, note that each folder has a simple name that is one word, all lowercase. This will also help when we create the navigation page.
Next, let's get our nicely organized directory (a.k.a. set of nested folders) of Twine stories [[uploaded to our GitHub directory|directory upload]].<h2>Upload your Twine stories directory to your GitHub repository</h2>
This process is essentially the same as [[uploading one Twine story|Upload your Twine story to the repository]]: you drag and drop the folders instead of a single .html file.
Go to your GitHub repository page, click "Add file > Upload files".
<img src=addGHfile.png>
Drag and drop each of your Twine folders to your GitHub repository.
<img src=uploadfolder.png>
<strong><span style="color:green;">Don't forget to click the green "Commit changes" button at the bottom of the page!</span></strong>
Depending on how many files are in your directory, GitHub may need a few minutes to process them, but once it's finished your repository will look something like this:
<img src=reposdirect.png>
We have one more step to go before our Twine stories website is complete: we need to [[add an index page]] that helps our visitors navigate to each story.<h2>Add an index page</h2>
We've done a lot of re-naming our downloaded Twine .html files to "index.html" as we create this GitHub website. That's because anything named "index.html" is treated as special by internet browsers: whenever they navigate to a specific folder, they look first for the "index.html" file. If there is one present, that's what they will display by default.
For our multi-Twine story GitHub website to work, we need //one more// index.html file. This one needs to be outside all the folders we've already uploaded, and it needs to link to each of our stories.
The simplest way to do this is to create a very basic html file linking to each story. Alternatively, you can [[create another Twine story as your index file]]. The approach is basically the same. Let's start with the straightforward html file, created directly in GitHub.
From your GitHub repository page, click "Add file > + Create new file":
<img src=createGHfile.png>
This will take you to the file editing page. In the box directly after the name of your repository, type "index.html". Your file //must// have this name for your website to work.
<img src=nameGHfile.png>
Next, you can use GitHub's built-in editor to create your index file. (<<link "Click here">>
<<script>>
Dialog.setup("GH index html code", "info");
Dialog.wiki(Story.get("GH index html code").processText());
Dialog.open();
<</script>>
<</link>> here for a pop-up with the basic code you can copy and paste into the GitHub editor, then update with your own site's information.)
<img src=createindex.png>
This illustration uses colors to show different parts of the index code, and what you need to edit (also summarized below the image):
<img src=indexedit.png>
You'll need to edit:
* The names of the folders in each link (the pink portion of the illustration). This is <strong>very</strong> important, as this is the element that sends your site visitors to each of your Twine stories. Where my code has "cats", "escape", "infst", "schrodinger", and "trees", you'll need to replace the folder titles between quotation marks with the //exact// names of the folders you uploaded to your GitHub repository.
* The display names for each of your Twine stories (the green portion of the illustration). Replace "The Unbearable Heaviness of Cats", etc., with the actual full titles of your Twine stories.
* The site title (orange), if you like.
* Any text that offers instructions or description (yellow).
Of course, you can make any changes you like to make this page your own.
<span style="color:green;">When you are finished, click the green "Commit changes" button to save your index file.</span>
Your repository should now look something like this:
<img src=reposcomplete.png>
And your GitHub website (at {{{https://USERNAME.github.io}}}), once GitHub finishes processing the files, will look like this:
<img src=siteGHindex.png>
Clicking on each Twine story title should launch it in a new browser tab.
You can review how to [[edit your files on your GitHub directory|edit files on GitHub repository]], or use the main menu on the left side of the screen to go elsewhere in the tutorial.The code to copy and paste:
{{{
<!DOCTYPE html>
<html lang="en" class=" jrbvrbor idc0_350">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Twine Stories</title>
<link rel="preconnect" href="https://fonts.googleapis.com/">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="">
<style>
body {
background-color: white;
}
p {
color: black;
}
</style>
</head>
<body>
<h1>These are my Twine stories.</h1>
<p>Click each title to play the story in a new browser tab.</p>
<a target="_blank" href="cats">The Unbearable Heaviness of Cats</a>
<p>This story is about blah blah blah...</p>
<a target="_blank" href="infst">Infectious Storytelling</a>
<p>This story is about blah blah blah...</p>
<a target="_blank" href="escape">Escape Room</a>
<p>This story is about blah blah blah...</p>
<a target="_blank" href="schrodinger">Schrodinger's Virus</a>
<p>This story is about blah blah blah...</p>
<a target="_blank" href="trees">Trees</a>
<p>This story is about blah blah blah...</p>
</body>
</html>
}}}<h2>Create a Twine story as your index file</h2>
Sometimes I like keeping it in the (Twine) family and just using Twine for everything. We can indeed use Twine to create our index.html page.
In Twine, create a new story. It doesn't matter what you name it, so long as you re-name the file "index.html" later, but it cuts out a step if you go ahead and name it "index" now.
You only need one passage in your Twine index file. Open it to edit, and put in the following code. (<<link "Click here">>
<<script>>
Dialog.setup("Twine index html code", "info");
Dialog.wiki(Story.get("Twine index html code").processText());
Dialog.open();
<</script>>
<</link>> here for a pop-up with the code you can copy and paste into your Twine passage, then update with your own site's information.)
<<if $sf is not "h">><img src=createindexT.png><</if>><<if $sf == "h">><img src=createindexTh.png><</if>>
This illustration uses colors to show different parts of the index code, and what you need to edit (also summarized below the image):
<img src=indexedit.png>
You'll need to edit:
* The names of the folders in each link (the pink portion of the illustration). This is <strong>very</strong> important, as this is the element that sends your site visitors to each of your Twine stories. Where my code has "cats", "escape", "infst", "schrodinger", and "trees", you'll need to replace the folder titles between quotation marks with the //exact// names of the folders you uploaded to your GitHub repository.
* The display names for each of your Twine stories (the green portion of the illustration). Replace "The Unbearable Heaviness of Cats", etc., with the actual full titles of your Twine stories.
* The page title (orange), if you like.
* Any text that offers instructions or description (yellow).
Of course, you can make any changes you like to make this page your own.
Once you have finished, <<link "save the file">>
<<script>>
Dialog.setup("saving", "info");
Dialog.wiki(Story.get("saving").processText());
Dialog.open();
<</script>>
<</link>>, re-name it to "index.html" if you need to, and [[upload it to your GitHub repository|Upload your Twine story to the repository]].
Once you've done that, your repository should now look something like this:
<img src=reposcomplete.png>
And your GitHub website (at {{{https://USERNAME.github.io}}}), once GitHub finishes processing the files, will look like this:
<img src=siteGHindexT.png>
Clicking on each Twine story title should launch it in a new browser tab.
You can review how to [[edit your files on your GitHub directory|edit files on GitHub repository]], or use the main menu on the left side of the screen to go elsewhere in the tutorial.The code to copy and paste:
{{{
<h1>My Twine stories</h1>
Click each title to play the story in a new browser tab.
<a target="_blank" href="cats">The Unbearable Heaviness of Cats</a>
This story is about blah blah blah...
<a target="_blank" href="infst">Infectious Storytelling</a>
This story is about blah blah blah...
<a target="_blank" href="escape">Escape Room</a>
This story is about blah blah blah...
<a target="_blank" href="schrodinger">Schrodinger's Virus</a>
This story is about blah blah blah...
<a target="_blank" href="trees">Trees</a>
This story is about blah blah blah...
}}}<<widget "ToggleTheme">>
Toggle Theme: <div class="toggle-wrapper">
<div class="rect_2"></div>
<div class="rect_1">
<div class="rect_1_inset"></div>
</div>
<div class="rect_3"></div>
<div class="toggle_handler">
<div class="toggle_ellipse"></div>
</div>
</div>
<</widget>>