Intermediate Web Literacy II | Storytelling with Three Buttons

• 1. Preparation

  Learning Progression

  In this lesson, your learners will:

  1. Create human storytelling machines that let a user hit one of three buttons to hear part of a atory from a human "function" assigned to tell that part of the story.
  2. Learn the definition of "string."
  3. Practice with the alert method and multiple buttons to tell a three part story usign buttons on this Thimble project.
  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 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. Round-robin Storytelling

  10 minutes

  Welcome learners and explain that in today's activity we'll build on our first lesson and write three short functions that tell the begining, middle, and end of a story. We'll connect each function to its own button on a webpage and then also style the page a bit to see how webpages and stylesheets written in CSS interact.

  To build a mental model of how our buttons and functions will work, we're going to take ten minutes or so for a round-robin storytelling activity.

  1. First, forms groups of four.
  2. One group members should be the user. The other group members should be storytelling functions.
  3. Give each group four pieces of paper and some markers.
  4. The user should quickly draw and cut or tear out three buttons, one for each function.
  5. The functions should get together and create a short, three sentence story with a beginning, middle, and end. They should write the sentences on different pieces of paper and give one sentence to each function.
  6. Then the functions should stand in a row or semi-circle with desks or a table between them and the user.
  7. The user should put a button in front of each function.
  8. Next, give the user 3-5 minutes to press each button in whatever order they like. When the user presses the button in front of a function, that group member should read their part of the story aloud.
  9. After hearing the story in order, the user can remix the story by hitting the buttons in different orders and in different frequencies.
  10. If you have time, encourage groups to put their stories aside after a few minutes of remix and to make up new, improvised stories. For example, whenever the user hits a button, that function could say one word out loud to contribite to a new story. Each function could "return" one more word out loud everytime they're "called" by the user.
  
  

  Finally, close the storytelling with a few questions like, "Which was more fun - returning the first story in the correct order or making up a more random story as you went? Why?" Invite a few volunteers to give their answers, and then invite learners to take their seats by their computers and to go to today's project in their browsers.

• 3. Coding Multiple Buttons and Alerts

  15 minutes

  Once learners have loaded the webpage for today's activity, ask them to hit each button on the page to see the beginning, middle, and end of a tiny story. These buttons launch an alert box like the button in our last activity.

  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.

  Note that the buttons in this project only use the alert command - or method - to tell their parts of the story. We're not using variables today. It's entirely possible to pass a "string" - or to write the message you want to share - right in the parentheses after an alert in the script.

  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 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!

  • What makes the web good for storytelling? Why do people share stories there? What are some of the different ways you can share them on the web?
  • Can you describe, in your own words, how alerts work between a script and a webpage?
  • Which parts of today's project did you like the most? The least? Why?
  • What seemed easiest? What seemed most difficult? Why?
  • How do webpages, stylesheets, and coded scripts work together?
  • How else could we use buttons or alerts on a webpage?
  • How would our work with JavaScript have been different if we started here with three buttons instead of with one button in the first project?
  • How would you improve this lesson and/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→Simple Story Generator

• 5. Optional: Badging

  You will learn how to write multiple, short functions that each connect to a button on a webpage.

  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:

  Share a link to your remixed pop-up story and/or upload a screenshot of your creation!

  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→Simple Story Generator