How to Create an Online Interactive Story Just to Battle Dragons

Like many great and wondrous things, this journey began with procrastination.

The Beginning

In the early summer of 2022, Vocal announced The Fantasy Prologue Challenge, a fiction writing competition in which the Vocal community was challenged to write the first chapter of a fantasy saga that uses the first sentence: “There weren't always dragons in the Valley.”

If you had asked me about it in the weeks before the challenge deadline, I would have told you that I had no interest in submitting a story. It’s not that I didn’t like the theme (being an avid RPG and D&D player, you should not question whether I think dragons are cool). But like many creatives in the throes of writer's block, I just had… nothing.

But then… I had something.

(Four hours before the deadline.)

My idea was that I would take a slightly different approach to the challenge and create the first chapter of a Choose-Your-Own-Adventure book. I had read a few of these books when I was younger, and the format would allow my reader to approach the story like one of the D&D sessions and RPGs that I loved so much.

The Limitations of an Online “Choose-Your-Own-Adventure”

I wrote my little heart out and actually managed to submit the story on time. However, I felt like the scope of my adventure was a tad limited by its online format. For example, a typical “Choose-your-own-adventure” book makes the reader commit to choosing a page to turn to, to see what happens next. Without a physical book, it was much more difficult to indicate where a reader should go next in their story.

Similarly, because the entire story existed on one online page rather than a book, a reader could just ignore every direction and read the story through. I knew this was a possibility, so I tried to make my story coherent if read linearly, but this limited how much the story would change based on the reader’s choices.

I was still happy with my story, but ultimately my choice of format made my story more prone to user/reader error and more simple than the story I wanted to tell.

The Discovery of Twine

After reading my original story, a dear friend of mine told me about Twine, an open-source tool for telling interactive stories. I was deeply interested but ultimately apprehensive. Twine uses variables, conditional logic, CSS, and Javascript to produce HTML code that runs your story. Although I do a little data management for my 9 to 5 job, this was definitely a little outside of my comfort zone. So instead of listening to my friend’s well-meaning suggestion, I didn’t touch my story again for months.

But then, one day, I finally got the courage to try it out.

And you know what? I’m so glad I did.

Getting Started with Twine

Twine was relatively easy to get the hang of, as the system is pretty intuitive and help guides are easily accessible from within the software. I won’t go into a full guide about what I’ve learned so far (maybe at a different time, if there is interest), but I wanted to take a minute to de-mystify Twine for the newbies to code.

You can download Twine as an app or use it from within your browser. Pieces of your story are called “Passages.” Think of passages as a "page" of your story.

From one passage, you can connect your story to other passages. Any text [[surrounded by double brackets]] will automatically link your passage to another one. This bracketed text turns into a link that your reader can click to "make a decision" and progress from one passage to the next.

Your new passage will automatically be named based on the text in the brackets unless you add a line | in the brackets. If you do this, the reader will only see what comes before the line, but the passage will be titled based on whatever comes after the line.

This is what the reader sees when you "play" the story- white story text and blue "clickable links" (default settings).

From there you can keep writing passages and connecting them to other passages. In the editor view, each passage has arrows that show the flow of your story from one page to the next.

Once you get the hang of connecting your passages, there’s a lot more you can do with Twine. You can add pictures, change colors, edit text styles, create variables to store information about your characters, write conditional logic to make things appear or disappear, include random chance encounters, and much much more…

I’ve learned a lot about what Twine can do, and I’m happy to share a little bit more about my experiences in a future article! But for now, I wanted to cover the very basics of what you needed to begin a story in Twine.

If you're interested in seeing what I've done in Twine (so far), check out itch.io, an indie game site where you can play my story, A Sea of Dragons, for free!

And to see where it all began, you can read my original "choose-your-own-adventure" story here:

Interested in mapping out your own interactive adventure? You can start here.