Intermediate Web Literacy II | 3. Storytelling with Scripts | Simple Story Generator
Made by Mozilla
45 to 60 minutes
Learn how to use arrays and the
document method to generate random stories and add them to a webpage.
Activity 3 of 8
Write the Web
21st Century SkillsCommunication Creativity Code Compose Contribute Remix Revise Share
- Code a button and script that work together to tell a story with several randomly generated elements.
- Intermediate web users
- An Internet-connected, projected instructor computer
- Internet-connected computers
- Four small buckets, baskets, boxes, or containers per each group of four learners
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-paragraphpart 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 Buckets15 minutes
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
myFavoriteColorsand use an array to give it several possible values such as
Then we'll create variables that pick a random value from each array for us. Finally, we'll use a new method called
documentto 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.
- Form groups of four.
- Pass out paper, markers, scissors, and four small buckets, baskets, boxes, or containers per group.
- 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.
- Ask one person per group to be "who," another to be "did," another to be "where," and the last to be "when."
- 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.
- The person serving as "did" should fill a bucket with phrases that include verbs and objects like "ate a sandwich" or "built a robot."
- The person serving as "where" should fill a bucket with phrases that name locations like "at the movies" or "down the road."
- The person serving as "when" should fill a bucket with phrases that name times like "yesterday" or "on April 17th."
- Give students about five minutes to put as many words as possible into each bucket.
- 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.
- Give groups 5-10 minutes to compose their stories.
- 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
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 (
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.
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 Assessment5 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