Intermediate Web Literacy II | 3. Storytelling with Scripts | Simple Story Generator

• 1. Preparation

  Work through today's activity to get a feel for how each of its parts - the HTML, CSS, and JavaScript - looks and 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 arrays (lists - or "buckets" - full of values) and how the document method looks for parts of a webpage to read and write.

  For example, document.getElementById("my-first-paragraph") would look for the part of a connected webpage called my-first-paragraph. Then, in your script, you could add a command to read the value of the paragraph or to write something new in its place. That might look something like this:

  document.getElementById("my-first-paragraph").innerHTML = "<p id="my-first-paragraph"> I'm replacing the first paragraph on my webpage with this sentence instead!</p>"

  
  

  That line of code replaces the HTML of the my-first-paragraph part of the webpage with a new paragraph from the script.

  You don't need expert knowledge of these ideas. Just be able to explain them in broad terms within the context of the lesson.

  Be sure to test your technology and Internet connectivity.

  Come up with an equitable way for your learners to form groups of four.

  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. Storytelling Buckets

  15 minutes

  Gather learners together and welcome them to today's lesson. In this project, we'll be moving away from alerts and looking at how we can use buttons and JavaScript to change text on the webpage itself (rather than inside an alert box).

  We're going to create random stories using special variables called arrays. Arrays are like buckets - they can hold a lot of different values for a single variable. For example, we could create a variable called myFavoriteColors and use an array to give it several possible values such as blue, green, or purple.

  Then we'll create variables that pick a random value from each array for us. Finally, we'll use a new method called document to mix and match our variables and their values to write a new, random story on our webpage each time we click a button.

  First, to see how it all works, we're going to play a game called Storytelling Buckets.

  1. Form groups of four.
  2. Pass out paper, markers, scissors, and four small buckets, baskets, boxes, or containers per group.
  3. One bucket will be filled with "who" words, another will be filled with "did" words, another will be filled with "where" words, and the last will be filled with "when" words.
  4. Ask one person per group to be "who," another to be "did," another to be "where," and the last to be "when."
  5. The person serving as "who" should come up with as many nouns as possible, write them down on paper, cut them out, and then put them into the "who" bucket. These will be the main characters of the stories groups create.
  6. The person serving as "did" should fill a bucket with phrases that include verbs and objects like "ate a sandwich" or "built a robot."
  7. The person serving as "where" should fill a bucket with phrases that name locations like "at the movies" or "down the road."
  8. The person serving as "when" should fill a bucket with phrases that name times like "yesterday" or "on April 17th."
  9. Give students about five minutes to put as many words as possible into each bucket.
  10. Then, have groups compose their own stories by combing one word from each bucket, one sentence at a time. Ask group members to record their stories somehow so they can share them with the whole group later.
  11. Give groups 5-10 minutes to compose their stories.
  12. After that, ask each group to share its story with the whole class.

  Once each group has shared, facilitate a short conversation about the game. Ask questions like, "When did that kind of storytelling really work or produce something cool or funny? When did it break down? Why? Did anything surprising happen?" Invite several responses and then ask students to take their seats by their computers and to load today's project in their browsers.

• 3. Coding with Arrays and document

  25 minutes

  Once learners have all loaded today's activity in their browsers, ask them to hit the button on the page several times and to note what happens on the screen. Ask a few students to describe what they think is happening based on what they know about functions, variables, and our bucket game before moving ahead.

  Next, ask learners to hit the "Remix" button in the upper right-hand corner of the 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.

  The tutorial will take learners through changing the background color of the page on the stylesheet and changing the text in the alert box in the JavaScript file so they can see how parts of the page connect to one another. Encourage students to mess around with the code to see what else they can change or if they can add to the story in the box.

  Syntax and punctuation will be especially important today, so help students place their semi-colons and quotation marks when they have trouble. Some parts of today's code will have quotation marks surrounding them, as well as quotation marks inside them.

  When that happens, if you use double quotation marks on the outside, switch to single quotation marks - or apostrophes - on the inside. If you begin with single quotation marks - or apostrophes on the outside, switch to double quotation marks inside.

  Double-to-single looks like this:
  "some coding 'with a string or other quoted passage' inside it"

  Single-to-double looks like this:
  'some coding "with a string or other quoted passage" inside it'

  Either is fine. Just be consistent to make your code easy to read and debug.

  Once you've gone through the tutorial, ask learners 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 test their webpages and read one another's stories. Then ask them to gather together again for a closing conversation.

• 4. Reflection and Assessment

  5 minutes

  Finally, facilitate a brief, reflective discussion about the day's learning using prompts like these - or make your own!

  • In your own words, can you describe how today's activity worked?
  • How was this activity like and different from the storytelling projects we did with alerts? Which did you like better? Why?
  • What are some other uses you can imagine for random generators?
  • How would you describe the balance between technical know-how and creativity in this activity? Are the two related in your mind? If so, how?
  • How would this activity have been different if you had to problem-solve how to do it instead of beginning with an example or model of the code?
  • 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 Pictures