Using Twine in Canvas

This document covers how to integrate a Twine project into a Canvas course. In addition it talks briefly about Harlowe markup.

Your Twine Project’s Appearance

There are two parts to styling Twine for use in our Canvas courses. The first is the CSS that applies styling and structure that will make it blend into Canvas. The second is markup that will further enhance the look of your Twine project.

CSS

Applying the necessary CSS to your Twine project is easy. You will do the following for each Twine project:

1. Copy the CSS code from below.
2. In your Twine project click the name of the project in the lower menu bar to open the project menu.
3. Click “Edit Story Stylesheet” to open the Stylesheet editor
4. Paste in the CSS code you copied from below
5. Close the Stylesheet editor to apply the changes.

hr {
	border: 0;
	height: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
 
leadin {
	padding: 0.5em;
	top: 8px;
	background-color: #f5f5f5 !important; 
	display: inline-block;
}
 
end {
	color: #00294c;
	padding: 0.5em;
	top: 2px;
	background-color: #f0f7fd !important; 
	border-bottom: 2.5px solid #4dabe9;
	display: inline-block;
	
}

tw-link {
	font-weight: 400;	
}
 
tw-story {
	max-width: 900px;
	width: 100%;
	color: #333;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 14px;
	font-size: .875em;
	line-height: 1.5;
	margin: 8px auto;
 
}
 
tw-passage {
	margin-left:4em;
	margin-right:25px;
}
 
tw-sidebar {
	left: -3.5em;
}

Suggested Formatting Methods and Markup

The following additional markup will work with the CSS to provide styling for elements in the Twine project. All of these are optional, but recommended to help add polish to your project. Note that both the Leadin and End tags are depended on the custom CSS above. They are not standard Twine tags.

Leadin

<leadin>text</leadin>

The leadin tag will add a 5% grey background to any text it surrounds. This tag can be used to indicate the part of the passage that is directly taken from the previous answer/input the user has made.

Example:
A Twine project where the user selects You address the manager and say "I am not sure I agree." and on the resulting passage it starts with the same text You address the manager and say "I am not sure I agree.". In this case, you can wrap the text with the leadin tag to indicate it is verbatim what the user selected.

End

<end>text</end>

The end tag can be used to apply a light blue box to the final string of text at the end of a branch in Twine. This will help indicate that the user has indeed reached an intended ending of one of the branching paths in the project. It helps to formalize how the ending of a branch is depicted.

The tag can be used to wrap a final line of text, or it can be as simple as using it on the word “End.”

Bolding Option Labels

Always make the labels for options bold. This helps readability, and helps to clearly separate the labels from the actual text describing the option. This is especially important when the text for one option wraps to a second line. For example:

Option 1: Remain silent and hope that someone else will correct the CEO.
Option 2: You speak up and say, “Sir, if we add that many things to the system, it is liable to collapse.”
Option 3: Nod your head and express agreement with the CEO to keep the meeting moving along. Lunch is next, and you are very hungry.

Harlowe Markup

Harlowe is the name of the default Story Format used in Twine 2. It is important to use the Harlowe markup when doing basic formatting/styling of text. Twine/Harlowe expect this markdown to be used to apply various effects such as the passage fade-in.

Harlowe Style Markup

You can find more information about the markup Harlowe uses in the Harlowe manual.

Placing your Twine Project in a Canvas Page

To place your Twine project into a Canvas page, do the following:

1. Export your Twine project to a flat HTML file by choosing “Publish to file” from the project’s menu.
2. Upload the HTML file to a place where you can get a direct link to it. It is recommended that you work with the Media team to host the file on the media.uwex.edu server.
3. Navigate to the HTML editor for the Canvas page you would like to place the Twine project in.
4. Copy and Paste the iframe tag that is shown below into your Canvas page.
5. Replace “TWINE_PROJECT_URL” with the URL that points directly your hosted Twine project file.
6. Save the Canvas page.

<iframe style="max-width: 900px; border:0;" src="TWINE_PROJECT_URL" width="100%" height="1024px"></iframe>

Published on June 24, 2022 at 11:43:07 am CDT. Last modified on June 24, 2022 at 11:43:07 am CDT.