Intermediate Web Literacy II | Storytelling with Pictures

• 1. Preparation

  Learning Progression

  In this lesson, your learners will:

  1. Create human storytelling machines in which each person in a line tells the next part of the same story through movements.
  2. Storyboard three-panel comics using printed copies of a template like this.
  3. Use Creative Commons Search to find online images that reflect their storyboards.
  4. Learn about if statements in JavaScript.
  5. Remix this Thimble project to replace the images in its comic with the images they searched for online.
  6. 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 to familairize yourself with if statements. Statements like these are called "conditionals" in JavaScript because they set up statements or commands that happen when a certain condition is met on the webpage. The if statement looks for that condition and reacts to it.

  You don't need to be a JavaScript expert for this lesson. Just be able to explain that conditionals can check to see what's happening on a webpage and then make different things happen under different conditions.

  Be sure to test your technology and Internet connectivity.

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

  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. Setting the Tableau

  15 minutes

  Once you've welcomed your learners, explain that today we'll use pictures to tell our stories. We're each going to use three pictures to show the beginning, middle, and end of a story. Today our script will use logic to figure out which picture to show next and when to restart the story.

  To get the hang of that idea, we're going to perform three-part stories in groups of three using an activity called "Setting the Tableau." Tableau is another word for scene. Here is how to play:

  1. Form groups of three with one learner playing the beginning of the story, another learner playing the middle, and the last learner playing the end of the story.
  2. Each group comes up with an idea for a three-part story they can tell by performing the same character at three different moments of time. For example, the first learners plays someone stirring a pot; the second learner ladles food from the pot on to a plate; the last learner eats the food. Each learner plays the same character, but does something different to show the beginning, middle, and end of the story.
  3. Each learner should begin facing right.
  4. Each learner should then turn to the left as they perform their part of the story.
  5. When the previous learner faces to their left, the next learner begins their performance, also moving from right to left.
  6. This right-to-left motion is meant to reflect how an if statement works - if the last learner is facing right, don't perform. If there is no last learner (like at the beginning) or if the last learner is facing left, then perform.
  7. At the end of the story, the group should "reset" and all group members should face right again.
  8. Give groups 5 minutes to come up with a story and to rehearse it incorporating the right-to-left motion.
  9. Take another five minutes or so for each group to perform.

  Encourage classmates to applaud one another's work. After the last performance, ask learners, "What condition had to be met for you to perform? How did you know when to start your part of the story?"

  After facilitating a few volunteers' responses to those questions, ask learners to take their seats at their computers and to open today's project in their broswers.

• 3. Storyboarding Your Script

  15 minutes

  Give learners a few minutes to click through the story on today's project page. Ask them how they think the page works? How does it know which picture to show next? Can they think of if kinds of statements that might explain what's going on here?

  Tell learners that we'll look inside the project and begin coding our own stories in a few minutes. First though, we'll plan the stories that we want to tell using a simple storyboarding template. Our storyboards don't need to be fancy; we can use stick figures. The big idea is just to figure out what kinds of pictures we should search for later on to tell our own stories. If we decide on our stories now, we'll save time searching for images later.

  Hand out copies of the storyboarding template you want to use and give learners about 10 minutes to sketch and describe the three images they want to find for their stories. Each learner should finish with a drawing and description of the beginning, middle, and end of their story. Here is an example template:

  
  Image credit public domain by Tomas Mitkus

  After ten minutes, ask the group to turn its attention towards the project's code and explain that learners who aren't finished storyboarding can put their templates aside and work on them later.

• 4. Using if Statements to Tell a Story

  15 minutes

  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 searching for their images and swapping them into the JavaScript code included in the project.

  You can also use this external tutorial about finding openly shared images online or this external image search resource.

  Syntax and punctuation will be especially important today, so help learners place their brackets, 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 test their webpages and read one another's stories. Then ask them to gather together again to debrief on the lesson.

• 5. 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.

  • In your own words, how do if statements work?
  • How else could people use if statements on a webpage or, say, in a game or in a robot's brain?
  • Can you think of a time in real life when you used if statements in your head?
  • What are some similarities and differences between this lesson and our previous ones?
  • What's your favorite way to tell a story? Through words? Pictures? Both? Something else?
  • How would this lesson have been different if you had to write it from scratch instead of remixing it?
  • What seemed easiest about today's work? Most difficult? Why?
  • 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 User Input

• 6. Optional: Badging

  By using and connecting HTML, CSS, and JavaScript to create storytelling prompts, you will learn how to code, compose, contribute, remix, share, and synthesize.

  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 survey questions 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 new 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→Storytelling with User Input