Coding Non-Linear Stories With @twinethreads

Coding Non-Linear Stories With @twinethreads


I loved “Choose your own adventure” books as a kid. They had a way of immersing me into the story under the guise of gaming. So when my colleague Colin ( showed me twine, I was hooked.

…I am more than hooked.

What makes twine so unique is that it gives students a chance to create large non-linear stories, show them the layout as a flowchart and allow them to use coding to “spice” it up. As such, the amount of coding required is really up to the author. Twine uses Cascading Stylesheets and supports HTML. I was able to easily apply simple styles to fonts and colours and embedding YouTube stuff without much effort.

From their website:

Twine is an open-source tool for telling interactive, nonlinear stories.

You don’t need to write any code to create a simple story with Twine, but you can extend your stories with variables, conditional logic, images, CSS, and JavaScript when you’re ready.


Condition logic! Creating variables! JavaScript?!?!

YES! Check out this really nifty interactive story:



Please consider the following:


Little Johnny writes a story about a castle with locked doors. Different parts of the story provide clues as to where to head next. Readers of the story must solve clues and find keys (which are stored as variables) to progress. If the variables are null (non existent) the reader cannot continue and must retract steps. Perhaps you want your reader to fill an inventory during your story.

I like the idea of conditional logic. Introduces some computational thinking as students can compare variables – among other things.

(If $haveBow AND $haveKey) { $UnlockDoor == true; }

Screen Shot 2015-11-24 at 5.01.06 PM

Secondly, planning a story like this requires a great deal of spatial reasoning. Authors have to think big picture and plan ahead. I would suggest using some type of concept map app before getting started. Check out in the browser.

Screen Shot 2015-11-24 at 4.29.09 PM

Back to twine. Head over here to get started.

What you will notice immediately is the option to work offline or online. Choosing the online option allows for autosaving in the browser but comes with warning. Browser histories get deleted and twine data is not associated with a login. There is a nifty feature to publish work to a file which I highly recommend.

After clicking “use it online” there is a brief tutorial followed by the home splash page.

Screen Shot 2015-11-24 at 4.34.35 PM

Click the green +Story button to begin and you will be directed to a blue page with one default passage created. Think of the “passages” as pages in a book – but each linking to as many other passages as you wish.

Screen Shot 2015-11-24 at 4.36.35 PM

Click the pencil icon to edit the passage.

Screen Shot 2015-11-24 at 4.37.17 PM

Perhaps the most important feature of twine is the “auto linking” of passages. Writing a link inside double square brackets create a link and also creates new passages automatically.

Screen Shot 2015-11-24 at 4.38.38 PM

Screen Shot 2015-11-24 at 4.38.47 PM

One you have created some basic passages, you can begin looking into CSS. Clicking the title of your story in the bottom left corner yields a sub menu with a few options.

Screen Shot 2015-11-24 at 4.40.15 PM

Adding simple CSS goes a long way. In this example I want to change the background colour on all passages to black.

Screen Shot 2015-11-24 at 4.41.46 PM

Screen Shot 2015-11-24 at 4.41.56 PM

(You’ll notice my font is still back and appears to not show)

Cascading Stylesheets can be quite powerful and the author gets full control of their story. I like the idea of changing font colour for different dialogue and adding background images as scenes.

Similarly with CSS, you can edit the JavaScript of your story. JavaScript provides another level of engagement between the reader and the story itself. Maybe you want the reader to name the main character so you include a simple form to store information into a variable.

Here is a cool RPG project with character attributes: Skycrawl – a RPG work-in-progress

Perhaps you want to “alert” the reader on certain passages or play different sounds when passages load.

Screen Shot 2015-11-24 at 4.46.57 PM

Screen Shot 2015-11-24 at 4.47.08 PM

When you are ready to save your work offline, there is a publish button in the same bottom left menu. I highly recommend this. It creates an html file for later use or to import back for future editing.

Screen Shot 2015-11-24 at 4.48.18 PM


If you’d like to try it for yourself, head over to

For more information on Stylesheets check

For an introductory JavaScript tutorial check


Lastly, check out these pretty cool example twine stories:

Ceramic Uncertainty:


How would you use twine? I’d love to hear your thoughts.

Screen Shot 2015-11-24 at 5.03.34 PM

Screen Shot 2015-11-24 at 4.55.44 PM


(Visited 1,554 times, 1 visits today)

2 Responses for this post

  1. Jackie
    | |

    Which version and style of Twine do you use with students?


Leave a Reply

Email *