Math Storytelling Using Twine

Students will use their knowledge of probability and data management to create math questions within a children’s story. Twine is the ideal program for this, as students can add the questions within their story and use the answer to move to the next passage. Images can be added to visually enhance the story. It is recommended that this project be completed in pairs. This module is for students who have completed the Introduction to Twine module or for those with a working knowledge of Twine.

Learning Goals

By the end of this module students will know how to add images and videos to their Twine story and be more familiar with HTML and CSS programming languages. They will develop a story that includes questions and solutions about probability and data management.

Vocabulary

Passage

A narrative unit; a building block for stories.

Narrative

The process of telling and structuring a story.

CSS (Cascading Style Sheets)

A styling language used for coding the presentation of a document in a markup language.

HTML (Hypertext Markup Language)

The standard markup language for designing web pages.

Textbox

A space for users to enter information; this input can be saved as a variable.

Guiding Questions

Have you ever wished math was more creative or allowed for a written portion? Do you find word problems in math classes to be boring? In this module we will create our own fun and interesting word problems to teach math in a creative way!

Curriculum Links

This module links to the Math curriculum as students will use their probability and data management knowledge to form questions. Computer Science is incorporated as adjusting the appearance of their Twine passages and adding images involves knowledge of CSS and HTML. This module also aligns with the English curriculum through students’ use of appropriate vocabulary as they write and develop their story.

• Twine – Download Twine
• Children’s story books

Begin by reading a math story to the class. Here is a reading of the story Sir Cumference and the Dragon of Pi.

This demonstrates how math concepts can be incorporated into stories. For this activity students will choose a children’s story and add math questions based on the content. This site has some great examples of student-created stories that incorporate data management concepts which will help students understand the expectations and requirements of this activity.

Students will use elements from a children’s story to create math problems. This can be used for any unit in mathematics but works well with measurement, geometry, probability and data management. Based on the unit of study the teacher can provide requirements for students as to the type and number of questions. For example, a project based on measurement might include a question on perimeter, area, volume, surface area or measuring angles. For data management students might include a question on permutations, combinations, Pascal’s triangle or probability. Students will need to find the solutions to their questions and keep their written work so they can help their peers check their answers.

Getting Started

1. Open Twine and start a new story.
2. Name your story something relevant to your topic. This can be changed later if needed.
3. Change the “Story Format” by selecting the arrow beside the story title. Select “SugarCube 2.21.0”. 
4. Start typing your story and linking passages together. To link passages enclose the title in double square brackets [[ ]].
5. If you want the link to be one word and the title of the passage to be another you can add a pipe in the brackets. For example [[Lungs|Left Lung]] has the word Lungs as the link but the passage will be title Left Lung.
6. The green rocket icon indicates the starting passage. To change this to another passage, hover over the passage, click the three dots (ellipsis) and choose “Start Story Here”. 

Changing The Default Appearance

Once you have finished the layout and each path has an ending you can change the appearance of your story. Click the arrow beside the story title and select “Edit Story Stylesheet”.

There are a variety of colours that can be used in CSS and HTML programming. W3Schools lists colours by name and hexidecimal value.

body {
  background-color: MediumSeaGreen;
  color: white;
  font-family: Futura,Impact,Helvetica,sans-serif;
  font-size: 120%;
}

Line 2 changes the background colour to Medium Sea Green.
Line 3 changes the colour of the text to white.
Line 4 sets the fonts. Select multiple fonts to accommodate computers that may not have all of these fonts.
Line 5 makes the font size a little larger.

a {
  color: LightBlue;
}

This script changes the link colour to Light Blue.

a:hover {
  color: LightSteelBlue;
}

This script changes the colour of the links when they are hovered over to Light Steel Blue.

Changing The Appearance Of An Individual Passage

To change the appearance of an individual passage you need to add a tag to that passage. To add a tag, double click the passage and select “+Tag” under the passage title. Name the tag something that relates to the passage. For example, let’s add a tag called “water”, as the passage talks about oceans, and this tag could be used on other passages that include the topic of water.

.water {
  background-color: CadetBlue;
  color: Coral;
}

To program a class for water, add a period in front of the name, and then format the same way as our default settings.

Adding Images

There are two different ways to add images to a story:

1. By URL: add the URL of the image to your script. Some issues with this method is that you are limited to the images on the internet, and you have no control over the sites where these images were found. If the site is removed, your image will disappear.
2. From a folder on your computer: create a folder where you will save your Twine story, and any images you plan on using. Then you can add these images by filename to the passage where you want them to appear.

<img src="ocean.jpg">

This script inserts the image named ocean.jpg. When you test your program without publishing it, your image may not appear. To properly view your story, you need to “publish to file,” then open that file in a web browser. This will allow you to see how your story looks, and if any of your images need to be resized.

<img src="ocean.jpg" width="50%">

This script sets the size of the image to 50% of the original.

Textbox

A textbox can be added for users to type answers into, and another for linking to the next passage. In the following passage users can check their answers, and then return to the previous passage and try again if they were incorrect.

Question Passage

Type your answer here: <<textbox "$answer1" "">>
When you are done click [[here]]

The first line creates the textbox and labels the user’s input as a variable called answer1. The variable notation is in quotations, and there are double quotations for the user’s input.

Next Passage

<<if $answer1 is "22">> Well done! [[Continue]]
<<else>> Uh oh! Try again [[Combustion]]
<</if>>

Line 1 checks if the variable is 22 and if so displays the corresponding message.
Line 2 displays the message for variables other than 22, and links back to the question.
Line 3 ends the if statement.

To end the module, students can test out each other’s interactive stories and see if they can get the answers right. Students can compare the strategies they used to arrive at their answers.

• W3Schools has a list of HTML colours by name and hexidecimal value.
• Adam Hammond is an assistant professor at the University of Toronto. He has created a guide to programming in Twine. This guide includes videos and detailed instructions on how to make your Twine project the best it can be.
• The Twine Wiki page has links to specific actions such as adding a video.
• Indigenous Education is a site based out of British Columbia. They have stories about a boy named Small Number that teach mathematics through storytelling. At the end of each story is a thought-provoking math question.
• Math Stories Make a Difference is a TED Talk by Julie Cwikla on how our attitudes towards math impact our children and the people around us.
• Aboriginal Math Education is a TED Talk that looks at breaking the typical western way of teaching mathematics by incorporating Indigenous teachings.

---

You might also like