Each section of your Twine project is a box called a passage. To add a passage, you could click the green +Passage button in the bottom-right corner, but the easiest way is to simply create a link. Twine 2 will automatically create a New Passage for you every time you create a link. More about creating links in a moment.
To edit a passage, double-click it.

PASSAGES

A passage has three main fields: the title of the passage, tags, and the body. You can name other passages anything you like, but do not use the same passage name twice. Tags are only used for special types of code, so you can ignore the tags section. Everything that you type in the body will be shown to the player.

twine2

LINKS

linklinklinkLinks between passages are shown as arrows between passages. Links are like doors to other passages. They are the same as being told to turn to another page in a Choose Your Own Adventure book. Links are marked in the text of a passage by two square brackets:

[[This is a link]]

The text between the brackets must match the title of the passage that it links to. Passage titles are case-sensitive, which means that “Blue door” and “BLUE DOOR” are NOT the same.

twine5

HIDING LINKS

hiding

It is possible to change what text is shown to the player for a link. This can come in handy if you want to hide the title of the passage from the player. You can do that with an arrow, like this:

[[The text you want to display->The REAL Passage Title]]

For example: You may want to send the player to a passage called “Wrong” without letting them know that the link they are clicking is wrong. You can do this:

[[New York City is the capital of New York->Wrong]]

If your project has a broken link in it, it is shown in red, and clicking it shows an error message:

twine4

Here is an example of a passage body with links:

You decide to go to the hotel dining room.
You [[read the newspaper]] and order a coffee.
You get the strange feeling that some is watching you.

[[Look behind you]]
[[Hide under the table]]
[[Go back to your room->You lose]]


who-wants-to-be-a-millionaire1

MULTIPLE CHOICE QUIZ

Here is an example of a multiple choice question with links:

How many sides does an octagon have?

[[7->Wrong]] [[8->Question 2]] [[9->Wrong]]

The correct answer takes the player to a passage called “Question 2.” All of the incorrect answers take you to a passage called “Wrong” which could look like this:

I’m sorry. That is incorrect.
Click the back arrow and try again.

VIEWING YOUR PROJECT

To view your project, click the Play button in the bottom-right. Twine will open your project in a new browser tab.

To save your finished project, click the menu in the bottom-left with the name of your project and then Publish to File. The project will save as an HTML file (a webpage).

mario

CONTINUE TO THE NEXT POST: Twine Pictures, GIFs, and Background Images


What is Twine?

May 09, 2014

Over the next several blog posts I am going to publish my Twine guide. What is Twine?

twine

Twine is an open source (GPL) program that uses wiki formatting to create hypertext. The Twine program is available for free for Windows/Mac OSX and there is also a convenient web-based version. There isn't currently an iOS version. There is also an advanced command-line version called "Twee" that uses Python. Often people refer to Twine creations as "interactive fiction" or "choose your own adventure stories", but I'm just going to refer to them as Twine projects. In my middle school computer classes, students have used Twine to create websites, games, and quizzes.

ku-medium7744485956_1c80b82ea9_zMGSchooseIntro_1265262898

A Twine project is organized in a nice graphical interface that shows connections between passages and points out any broken links. Once finished, the program generates a single HTML page which contains the entire project.

twine1

The Twine program allows you to create a project without needing to know HTML, CSS, and Javascript. Projects can be enhanced by more advanced coding, but the fact that such knowledge is unnecessary leads to a more friendly/equitable approach to HTML and game design. In my middle school computer classes, I have used Twine to introduce hypertext, interactive media, variables, conditional statements, and random numbers.

CONTINUE TO THE NEXT POST: How To Use Twine, Level One


kidblogKidblog allows teachers to easily create a class blog in which students may create blog posts, but all submissions must be approved before being posted. Students do not need email addresses to join. Additionally, the site is secure and students must login in order to read blog posts.

Upon signing up, I immediately found two problems with the "Basic Free" version of Kidblog: a 100MB storage limit and strict limits on filetypes that can be uploaded. I needed students to be able to upload images, Twine games, and HTML files. I also quickly realized that Kidblog is built on WordPress and that with the right plugins, I could create by own version of Kidblog.

There were only three plugins that were needed to create a Kidblog-esque blog:

  1. Add Multiple Users – by HappyNuclear | Visit plugin site –This plugin allows you to add multiple user accounts to your Wordpress blog using a range of tools including CSV. Create Contributor accounts for students. Contributors are able to create posts, but their posts must then be approved by an Admin before being published.
  2. Upload Media For Contributors – by GeekPress | Visit plugin site – This plugin adds the ability to upload media for the contributors of your site.
  3. Restricted Site Access – by Jake Goldman, 10up, Oomph | Visit plugin site – This plugin limits access to your site to users who are logged in or accessing the site from a set of specific IP addresses. Send restricted visitors to the log in page, redirect them, or display a message or page. Powerful control over redirection, including SEO friendly redirect headers.

 

Edit 8-1-15: Additional plugins that were helpful were Export User Data by Q Studio, Iframe to Embed by sw-galati.ro, Improved User Search in Backend by David Stöckl, Title to Tags by Thomas J. Belknap, WP User Avatar by flippercode, and Menus by dsader.
 




RECENT POSTS