Intermediate Web Literacy II | Storytelling with Scripts | 7. Creating a Storytelling Resource

• 1. Preparation

  Work through today's activity to get a feel for how each of its parts - the HTML, CSS, and JavaScript - looks and for how those parts work together. Review this lesson plan, as well, to make sure you're comfortable facilitating it.

  Be sure to read through the lesson so you can familairize yourself with it's mark-up and code and check out object-oriented programming (OOP), as well.

  You don't need to be an expert on JavaScript to teach this lesson. Just be able to explain that with JavaScript you can create "objects" that are templates or models you can use over and over again by changing their values.

  Objects are made up of their parts - they typically have names, attrbiutes, and behaviors. For example, an animal object might have a name like "dog," attributes like "four legs" or "floppy ears" or "long tail," and behaviors like "bark" or "play."

  Be sure to test your technology and Internet connectivity.

  Have somewhere highly visible that you can list ideas and write some example code. You might use a chalkboard or whiteboard, a piece of chart paper, or a document projected from your computer.

  Create a class account or several accounts for students to use on Thimble, Mozilla's online code editor, and post the URL, or a shortened link, for today's project somewhere highly visible in the learning space.

• 2. Defining a Cat Object

  15 minutes

  Welcome your group to class and explain that today we're going to learn how to code objects. This is called "object-oriented programming" or "OOP" for short. If you like to pun, you can also share that it's okay to say "oops" a lot today.

  An object is a JavaScript function that you define with particular characteristics. For example, if you created an object in JavaScript called "room," it might have characteristics like "door," "window," "floor," "ceiling," and "furniture."

  Objects are useful because you can reuse them just by changing the values of their characteristcs. There are countless rooms in the world, but each might have a different number of doors or windows, or different colors on the walls, or different kinds of floors and ceilings. By creating a room object, you create a piece of code you can modify endlessly to reflect different examples of the same object.

  Let's explore the idea of objects further by drawing some cats - or, to put it another way, let's draw a bunch of different examples of a cat object.

  1. Invite learners to grab some paper and markers.
  2. Ask students to take 5 minutes to draw and color a cat. Each student will wind up with his or her own version of a cat object. Students can help one another draw or even describe their cats out loud or in writing if drawing is a struggle.
     
     

     

  3. After everyone has finished drawing a cat, ask a few volunteers to share their drawings with the group by holding up the drawing and talking a little bit about it.
  4. Once the whole group has seen several examples of cat drawings, ask the class what kinds of features or characteristics are common to all of the cats. At this point, you're looking for common features like "eye color or "hair color," rather than for values like "blue eyes." List these features somewhere highly visible in the room - like on your whiteboard, chart paper, or projected document.
  5. Once you have five or six features listed, explain that now you have enough ideas to begin building a cat object in code.
  6. Underneath that list of ideas, write a line of pseudo-code that looks like this (but plug in a few of your students' ideas for the features here):
     
     function Cat(name, hairLength, hairColor, eyeColor,) {
  this.name = name;
  this.hairLength = hairLength;
  this.hairColor = hairColor;
  this.eyeColor = eyeColor;
}
     
     This is the cat object. The this prefix makes each cat's features usable throughout any longer script that might use those variables in different ways.
  7. Next, explain that you can create new variables to create new cats that follow this function, model, or object. Write a line of code like this:
     
     var mittens = new Cat("Mittens", "long haired", "calico", "green");
     
     
  8. Finally, ask students if they can list the cat's name, hair length, hair color, and eye color from reading that code. Also ask if a few volunteers can explain how they made those connections between Mittens (or the cat your class creates) and the cat object.

  Thie big idea here is to realize that you can write an object to describe and create examples of nearly anything that has a structure, whether its an animal, a computer, a song, or a story. If you can break something down into parts, you can write an object to describe it and serve as a container for different examples of it.

  When you feel like your learners have had enough time to think through, verbalize, and understand the connections between Mittens (or the cat your class creates) and the object model, invite them to load today's project in their browsers.

• 3. Storytelling with Object-oriented Programming (OOP)

  25 minutes

  After students have loaded today's project in their browsers, invite them to click the button several times to see how the page generates prompts for multimedia stories.

  Ask students to think about the page in terms of object-oriented programming (OOP). Which parts of the page do they think might be objects? Which features or characteristics might those objects have based on the values displayed on the page? How is writing a story with different parts like describing a cat with different parts

  Invite a few volunteers to share their thinking with the group.

  After hearing from a few learners, ask learners to hit the "Remix" button in the upper right-hand corner of today's activity page. This will take them into Thimble, Mozilla's online code editor.

  Inside Thimble, learners can see the code for the webpage itself (index.html), as well as the CSS stylesheet (style.css) and JavaScript code (script.js) for the page. Those files are accessible in the left-hand FILES sidebar and can be edited in the central column of the page. A preview of what the webpage will look like when published is over on the right.

  At this point, ask learners to log-in to Thimble using their accounts or a class account you provide.

  Notice that the preview pane also has a "Tutorial" tab above it. Click on this tab to show learners the tutorial and then work through it with the group, inviting students who feel comfortable doing so to work ahead.

  This tutorial will take learners through revising existing objects or writing their own.

  Syntax and punctuation will be especially important today, so help students place their semi-colons and quotation marks when they have trouble.

  Once you and your learners have gone through the tutorial, ask them to hit "Publish" in the upper-right hand corner of the screen. This will give them a URL they can use to visit their own versions of this page and they can share the URL with friends and family, as well.

  Give learners a few minutes to visit each other's computers and to click through one another's storytelling resources to see what kinds of prompts they create.

  After that, ask students to gather again for a debrief on the lesson.

• 4. Reflection and Assessment

  5 minutes

  At the end of the lesson, use questions like these (or make your own!) to facilitate a brief, reflective discussion of the day's work.

  • Can you explain, in your own words, how object-oriented programming (OOP) works?
  • When do you think someone would use OOP in a project for the web? Can you think of how other people, like designers or video game creators might use objects in their work?
  • When would it be good to use something like OOP or modeling in real life?
  • What seemed easiest about today's work? Most difficult?
  • How would this project have been different if you had to start from scratch instead of remixing someone's work?
  • How would you improve this lesson or project?

  You can record learners' responses for the purpose of assessment, as well, but be sure to do so in a way that doesn't disadvantage those who struggle with composing in any particular medium. For example, be ready to record spoken answers, as well as to read typed or written responses.

  Next --> Storytelling with Interactive Fiction