Intermediate Web Literacy II | Simple Story Generator

• 1. Preparation

  Learning Progression

  In this lesson, your learners will:

  1. Create offline storytelling enigines by putting different kinds of words (like words for characters or for where and when a story takes place) inside buckets that users can pick words from randomly to create new stories.
  2. Learn the definition of "array."
  3. Remix this Thimble project to create new values inside arrays that let the storytelling function in the project randomly generate new stories when a button is pushed on the webpage.
  4. 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 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 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. 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 learners 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 learners 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 learners 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 learners 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 learners 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 learners 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 activity→Storytelling with Pictures

• 5. Optional: Badging

  Learn how to use arrays and the document method to generate random stories and add them to a webpage while you learn how to code, compose, remix, and revise.

  Steps to complete this task:

  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 web stickers we have created to get you started.
  2. Click on “Tutorial”.
  3. Follow the steps in the tutorial. The tutorial will walk you through how to make changes to the code.
  4. Once you are finished, you can save your work and share it. Log into your Webmaker account and hit "Publish."

  Evidence:

  Upload before and after pictures of your webpage showing how it displays a story after you push the button on the page.

  21st Century Skills:

  If you successfully complete the above, you will practice the following skills:

  • Communication
  • Creativity

  The skills that you have learned through this activity can be recognized and validated by earning credentials or badges.

  Through a partnership with the Open Badges Academy (OBA), you can earn over 15 Web Literacy and 21st Century Skills credentials or badges. Once you earn them, you can share the credentials/badges via your social media or resume or use them to connect with others.

  If you are interested in applying for badges, visit the OBA and/or reach out to Matt Rogers or DigitalMe to schedule a demonstration.

  Next activity→Storytelling with Pictures