Activity 7: Interactive Storytelling

Due: On git by Tuesday, Oct. 18, 2016 at 11:00am
Team: This is a solo assignment; you should type all the code to your solution. However, feel free to get help from others/Google/etc.
Grading: This assignment is the weekend activity for Experience 7, worth 10 points. There is no partial credit.

Introduction

CS 205 is designed to be as much about understanding how to solve a problem as it is about being creative. To begin to understand a graph, you will write your own interactive story.

An interactive story presents a reader with a narrative and allows her a choice of options to advance the story. For example, the story may read:

From the above narrative, the reader chooses where Zoey advances next through an interactive choice:

At the core, every interactive story makes a graph. Each node is a narrative and each edge is a choice that leads from one narrative to another. In this activity, you will write your own interactive story and construct a Python graph of your story.

Once your story is complete, you will be able to read through your interactive story in the workbook. In a future activity, we will move this story out of the workbook for you share with your friends and family.

Part 1: Write your Story

Before programming, you need an interactive story! Write a story, any story, to tell a tale. Your story can be:

• fan fiction about your favorite TV show, movie, or book
• a re-telling of a favorite trip or vacation
• a story you have in your head
• anything!

Not to limit you, but to ensure your graph is interesting, there are a few minimum requirements. You are encouraged to exceed them.

• Your interactive story must have at least 8 narratives (8 nodes). You are encouraged to have more!
• Your interactive story must have at least 13 choices (13 edges). You are encouraged to have more!
• At least one narrative must have at least 3 choices (one node must have at least 3 outbound edges).
• Exactly one narrative must be the beginning of the story (we will label this the start node).
• At least one narrative must be the ending of the story (this node will have outbound edges). You can have multiple endings.
• Your story must tell a story. It cannot simply be letters/words that lead to other letters/words. Be creative, have fun.

Part 2: Program your Story

The code for Activity 7 is a Workbook experience, which we have provided a bit of code to get you started (and the JavaScript to tell your story):

In the exp_activity7 directory, program your story in py/compute.py.

There are three features you must include in your graph so that we can properly tell your story.

1. The narrative must be an attribute of the node called narrative. You can create a node with this attribute using the following Python:
   G.add_node("hallway", narrative="Zoey walks into a long hallway [...]")
   
   It may be useful to store the narrative for each section in a text file rather than inside of you Python. If your hallway narrative was stored in res/hallway.txt, you can add it to the node using the following Python:
   text = open("res/hallway.txt").read()
   G.add_node("hallway", narrative=text)
   ...or in one line of code:
   G.add_node("hallway", narrative=open("res/hallway.txt").read())
   
   
2. Exactly one node must be labeled as the start node. To label the start node, add a start=True attribute to the node. For example:
   G.add_node("hallway", narrative=open("res/hallway.txt").read(), start=True)
   
   
3. The text for the interactive choices must be an attribute of the edge called text. For example, adding an edge between the hallway and ballroom nodes may be:
   G.add_edge("hallway", "ballroom", text="After a moment, Zoey chooses to travel through the oak door.")

Finally, feel free to use HTML if you would like to add formatting to your story. No sterilization is done to the narrative text before it is rendered.

Example: My (Wade's) Story

My (Wade's) story tells the tale of Isaac looking for his lost cat. In the end, my story had 20 nodes and 31 edges. In creating my story, I wrote the text in Word (then split them out and saved them as .txt files in /res/), but had to sketch out the connections to keep everything straight. I drew up my final sketch, which shows the graph of my story:

A few things to mention, all of which are perfectly reasonable features of a story:

• There are a few "dead ends" in my story, where a choice leads to an optional story but does not advance the novel towards the end. For example, the "Envy 2" node goes directly back to where the story was before going there.
• In fact, the shortest path through my story visits only 11 of the 20 nodes.
• My story only has one ending ("Meow"), though yours may have more than one. An ending is any node that does not have any outbound edges.
• My story has lots of loops (which we will call cycles when they appear in a graph), including one big cycle at the end that takes the reader all the way back to the start ("Porch 3" → "Porch 4" → "Start"). Another shorter cycle is "Start 2" → "Hallway" → "Trap Room" → "Porch" → "Start 2".
• Finally, there are a few spots where a linear story is told through several screens: "Cellar" → "Cellar 2" → "Cellar 3" is a linear sequence that tells a linear story with only once choice to move between each of the narratives.

Part 3: Explore your Story

After you story is complete, use the Workbook to explore your story. You will need to compute (by clicking compute in the workbook) to generate the JSON that will be used to render your story. Once complete, viewing your visualization will allow you to explore your story.

Make sure your story works! You story should start at the beginning and a series of choices should allow a reader to get "An End".

Submission

This activity is submitted digitally via git. View detailed submission instructions here.