Title: 2018 CSTA Workshop: Interactive Storytelling
Date: 2018-07-08
template: slides

class: center, middle

# Interactive storytelling: Weaving together literacies of text and code

Chris Proctor<br/>
cproctor@stanford.edu<br/>

CSTA 2018<br/>

.refs[
Slides & resources at chrisproctor.net<br>
Conference wifi: CSTA / ThanksDeborah
]

???

---

- [20] Introduction
    - [5] Prewriting: A conversation that changed you. 
    - [10] Sharing prewriting, introductions, motivations behind Unfold.Studio
    - [5] Workshop overview
- [50] First story: A conversation that changed you
    - [10] Introduction to Ink syntax and Unfold.Studio
    - [10] Mini-lesson: planning narrative with directed graphs
    - [20] Writing (with individual consultations and troubleshooting)
    - [10] Sharing and reflection: communities of practice
- [15] Break 
- [45] Second story: Building a world
    - [10] Prewriting: planning out a jointly-constructed world
    - [10] Mini-lesson: conditionals and variables 
    - [15] Writing 
    - [10] Sharing and reflection: collaborative learning
- [40] Theory and pedagogy
    - [30] 
    - [10] Sharing and reflection: personally-meaningful projects
- [10] Closing thoughts: bringing this back to your classroom

???

What are my goals here? I want people to have an authentic experience writing with Unfold Studio. 
I also want to support reflection on what happened, from a pedagogical point of view.

- Connections between ELA and CS practices (prewriting -> pseudocode; revision -> refactoring; editing -> debugging)
- Possibility of criticality

---

# Prewriting

Think about a conversation you remember well, one that changed you in some way. Maybe it was something that was said, 
maybe it was something that wasn't said. Please choose one you're willing to share in this workshop.

Take five minutes to free-write about this conversation--on paper or on your device. The most important thing is to keep writing. 
If you're feeling stuck, consider these prompts:

- Try to write it out as dialogue. (You can make up what you don't remember.)
- Write how it could have gone; how you wish it had gone; how you feared it might go.
- Describe how you felt or how the other person felt. What was on your mind?

.refs[
Just joining us? This is "Interactive storytelling: Weaving together literacies of text and code." Come on in! 
]

???
5 minutes

--- 
# Sharing

Form a small group, introduce yourselves, and briefly share the conversation you wrote about.

[Here's the Google Doc with participant bios](https://docs.google.com/document/d/1GPJUf2LHWlJWVSmQ45YgCKlmaa-XRuhZGw16Q04cjwU/edit#) 
(You can get these slides at [chrisproctor.net/slidex](http://chrisproctor.net/slides).)

???
5 minutes

---
# Workshop overview

- 1:00-2:00
    - Introduction
    - Story 1: Interactive conversation
    - Reflecting on teaching & learning
- 2:15-3:00
    - Story 2: Collaborative worldbuilding
    - Reflecting on teaching & learning
- 3:15-4:00
    - Powerful ideas in interactive storytelling
    - Back to the classroom
    - Closing

???
5 minutes

---
<iframe src="https://csta.unfold.studio" style="width: 100%; height: 100%; border: none;">
</iframe>

???
Show how to create account, social affordances, etc.

---
# My story

Hey, brothers, Mom's birthday is about a month away, and I was thinking that she might really enjoy taking a week-long sculpture class at an art retreat up in the mountains. The total cost is about $1200 for a week -- not cheap, for sure, but I think she will love it. We’ll also have to get her a place to stay.

Would you guys be interested in splitting the cost of this as a gift for mom? If an even four-way split is too much money for anyone, we could also get creative in how we divide up the cost.

---
# Planning with directed graphs

???
Then show how the story can get written

---
# Planning with directed graphs

---
# Planning with directed graphs

???
Now you try it. Later we'll get fancy with variables, conditions, etc.

---
# Ink syntax

This is my very first time writing interactive fiction. I am feeling
    + excited.
        -> high_energy
    + apprehensive.
        -> high_energy
    + bored.
        -> low_energy

=== high_energy ===
    I hope I can channel this into some quality writing. 
    + I'm ready
        -> get_started

=== low_energy ===
    I hope I find something that sparks my curiosity. 
    + Yeah, probably not.
        -> coffee
    + I'll give it a try
        -> get_started

=== coffee ===
    I'm going to go get some coffee...
    -> END

=== get_started ===
    OK, let's get this story started. {high_energy: I got this! | 
    Good thing I did some prewriting ahead of time.}
    -> END
    
???
Show documentation
Make an account on csta.unfold.studio
Write a first story. (Offer a story to fork.)

---
<iframe src="https://csta.unfold.studio/stories/1066" style="width: 100%; height: 100%; border: none;">
</iframe>

---
# Writing your first story

- Much more documentation at [docs.unfold.studio](http://docs.unfold.studio)
- Mini-lesson up front
- Feel free to work together
- We'll share at 1:35

---
# Pedagogical strategies

- Doing programming with stuff that matters
- Writer's workshop
- Mini-lessons

---
# Discussion

---
class: middle, center

# Break

---
# Variables

VAR money = 100
    VAR fullness = 0
    -> menu
    === menu ===
    {Well hello there!|Welcome back!|->END} What can I get you?
    + I'll take the surf and turf.
        -> surf_and_turf
    + I'll have a cupcake.
        -> cupcake 
    + Nothing for me, thanks.
        -> ending
    === surf_and_turf ===
    Yum!
    ~ money -= 40
    ~ fullness += 100
    -> result
    === cupcake ===
    That was mildly satisfying.
    ~ money -= 20
    ~fullness += 10
    -> result
    === result ===
    I felt quite {
        - fullness == 0: ravenous
        - fullness < 50: unsatisfied
        - else: satiated
    }. However, I still had {money} coins.
    -> menu

---
<iframe src="https://csta.unfold.studio/stories/1065" style="width: 100%; height: 100%; border: none;">
</iframe>

---
#Collaborative world-building

Now we're going to work together to build a world.

- Find a partner. 
- Create a new story and share it. 
- Come up with a few places we might want to add to this world. Add them to the board on sticky notes. 
  You will implement these knots.
- Your story should define several knots but not divert to any of them (it doesn't do anything)
- You'll want to create another story you can use to test your story.
    - It should **stub out** any knots you're using that aren't yours.
    - It should **initialize** all the variables you need.
- Chris will create a public story that INCLUDES all the other stories.

---
<iframe src="https://csta.unfold.studio/stories/1067" style="width: 100%; height: 100%; border: none;">
</iframe>

---
<iframe src="https://csta.unfold.studio/stories/1068" style="width: 100%; height: 100%; border: none;">
</iframe>

---
# Discussion

- Big CS ideas
    - Flow control
    - State
    - Computational models
- Interdisciplinary possibilities?

---
class: middle, center

# Break

---
background-position: top
background-image: url(/media/slides/unfold.png)
background-size: contain

???
I was an English teacher before I was a CS teacher. This work was motivated by my observation
that a lot of the practices that I had seen in my English class were also happening in my CS classes.

Interactive storytelling is having a renaissance.

Developed Unfold Studio through 3+ iterations of participatory design research

---
# Research questions
1. What kind of medium and pedagogy might support textual-computational multiliteracy?.cite[1]
2. What practices might emerge in such a textual-computational multiliteracy space?
3. How might such practices support critical awareness and resistance to racism, sexism, and 
other oppressive ideologies?.cite[2]

.refs[
.anchor[1] New London Group, 1996
.anchor[2] Fairclough, 1992; Morrell, 2015
<br/>Slides & resources at chrisproctor.net
]

???
Answers:
1. interactive storytelling webapp. Codesign at multiple levels:
    - affordances (unicode, line-wrap)
    - social features (private stories, feed)
2. critical discourse models, for one. (Go back to prior slide to show example)
    - Immersion and interactivity (microworlds)
    - 4-layer analytical framework: affordances, techniques, figured meanings, critical possibilities
3. conceptual framework. The importance of critical computational literacy
    - particularly dialogue between Learning Sciences and Critical Literacies

---
# Literacy space
A network of actors collaborate to do semiotic work.
<img src="/media/slides/csta/diagrams/literacy_space.png" width="70%">

---
# Textual literacy
<img src="/media/slides/csta/diagrams/textual_literacy.png" width="70%">

---
# Computational literacy
<img src="/media/slides/csta/diagrams/computational_literacy.png" width="70%">

---
# Microworld Simulation
<img src="/media/slides/csta/diagrams/microworld.png" width="70%">

---
# Figured meaning
<img src="/media/slides/csta/diagrams/figured_meaning.png" width="70%">

---
# Model of personhood / Subjectivity
<img src="/media/slides/csta/diagrams/subjectivity.png" width="70%">

---
# Identity
<img src="/media/slides/csta/diagrams/identity.png" width="70%">

A model of personhood one authors and occupies in a literacy space, which exists at the interface "between intimate discourses, inner speaking, and bodily practices formed in the past and the discourses and practices to which people are exposed, willingly or not, in the present."

---
#Immersion
<img src="/media/slides/csta/diagrams/immersion.png" width="70%">

---
#Interactivity

<img src="/media/slides/csta/diagrams/interactivity.png" width="70%">
---
# Interactive storytelling
<img src="/media/slides/csta/diagrams/interactive_storytelling.png" width="70%">

---
# Sociology workshop

- Create an oppressive social world where the possibilities of speech are limited for the main character. 
- Create a world where the main character is enregistered: s/he is assigned a model of personhood based on the way s/he speaks and performs identity.
- Create a world where the main character subverts a model of personhood s/he is assigned

---
<iframe src="https://unfold.studio/stories/1063" style="width: 100%; height: 100%; border: none;">
</iframe>

---
# Discussion

---
# Next steps

- Adding new features
- Expanding capacity
- Actively looking to support adoptions and research partnerships
    - To support critical computational literacies
    - To support perspective-taking across the curriculum
    - To support argumentative writing

---
class: center, middle

# Interactive storytelling: Weaving together literacies of text and code

Chris Proctor<br/>
cproctor@stanford.edu<br/>

CSTA 2018<br/>

.refs[
Slides & resources at chrisproctor.net<br>
Thanks!
]