Intermediate Web Literacy II | Creating a Storytelling Resource

• 1. Preparation

  Learning Progression

  In this lesson, your learners will:

  1. Learn the meaning of "object-oriented programming" (OOP).
  2. Create an inaginary cat object using OOP by brainstorming a list of characteristics that make up a cat, such as eye-color and hair-color.
  3. See how you can make a new cat object by naming it and giving its attributes different values than other cat objects have.
  4. Remix this Thimble project to create an engine that generates new prompts for storytelling by using OOP to build and combine new objects that are also story elements like protagonist, setting, and conflict.
  5. Reflect on their learning.

  ---

  You should...

  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 learners 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 learners to take 5 minutes to draw and color a cat. Each learner will wind up with his or her own version of a cat object. learners 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 learners' 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 learners 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 learners 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 learners 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 learners 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 learners 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 learners 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 activity→Storytelling with Interactive Fiction

• 5. Optional: Badging

  For educators, librarians, and trainers participating in Mozilla pilots and programs:

  Here are the tasks you should complete to earn web literacy badges for this activity:

  1. Go to this Thimble project and click the "Remix" button. This will open Thimble, a tool that makes it easy to create and publish your own web pages while learning HTML, CSS & JavaScript. You will see storytelling prompts we created to get you started.
  2. Follow the steps in the tutorial. The tutorial will walk you through how to make changes to the code.
  3. Once you are finished, you can save your work and share it. Log into your Webmaker account and hit "Publish."

  Here is the evidence you should submit to Mozilla's Credly site for each web literacy skill in this activity:

  • Share a link to your new Storytelling Engine and/or upload a screenshot of your creation.

  Mozilla will award your badges from our Credly site.

  When you train people in your own communities, you will ask them to complete the same activities, but they will submit their work to you through the Mozilla Learning Academy. That badging framework is is hosted by the Open Badge Academy (OBA).

  To learn how to use OBA, you can schedule a demo here.

  For educators, librarians, and trainers who would like to award web literacy badges on their own:

  To earn the web literacy badges associated with this activity, your learners should complete the following tasks:

  1. Go to this Thimble project and click the "Remix" button. This will open Thimble, a tool that makes it easy to create and publish your own web pages while learning HTML, CSS & JavaScript. You will see storytelling prompts we created to get you started.
  2. Follow the steps in the tutorial. The tutorial will walk you through how to make changes to the code.
  3. Once you are finished, you can save your work and share it. Log into your Webmaker account and hit "Publish."

  Here is the evidence your learners should submit for this activity:

  • Share a link to your new Storytelling Engine and/or upload a screenshot of your creation.

  Then you will assess their work and award them badges using Mozilla's open source, web literacy framework on the Open Badge Academy (OBA).

  To learn how to use OBA, you can schedule a demo and tutorial here.

  For individuals and organizations that would like to adapt or remix Mozilla's open source, web literacy badge framework:

  Visit the Mozilla Learning Academy on the Open Badge Academy (OBA) website. Then schedule a demo to learn how to use and adapt the badges for your own contexts and communities.

  Next activity→Storytelling with Interactive Fiction