Homework Excuse Generator Teaching Kit

Made by Mozilla Learning Networks.

Learners will remix JavaScript code to change the words on a website, learning about composing for the web, coding JavaScript values, and remixing Web content.

An hour to 90 minutes

  • Preparation

    Do the activity on your own to become familiar with it. Make sure your technology works as expected across a few test machines.

    You may also wish to set up an account on teach.mozilla.org that you can share with your learners. This will save time later when they are ready to publish their remixes.

    Review this definition of the word "Remix", so that you can help your learners (and colleagues!) understand what it means to remix a make.

    Clear out enough space in your learning environment to let your learners circle up for part of the introduction activity.

    Post the URL, or Web address, of today's make somewhere highly visible in your room. You may want to post it as a shortened link using a service like bit.ly.

  • 15
    min

    Introduction

    Welcome your students and explain that in this activity we're going to explore "remix." Give each student a notecard and a pen or pencil. Explain that part of remix is finding a creative way to add to, switch around, or replace something that inspires your creativity. To begin, we're going to explore the idea of the 'homework excuse' together.

    • Give each student a notecard and pen or pencil.
    • Ask learners to take 3-5 minutes to write down the best homework excuse ever. Ask students to use their best handwriting or to get help writing from a classmate or teacher.
    • Collect the notecards.
    • Shuffle the note cards.
    • Ask your learners to circle up in an open space in the room.
    • Hand a notecard to each student.
    • Ask learners to rehearse their excuses quietly to themselves and to ask a trusted classmate or teacher for help with any difficult words.
    • Join the circle.
    • Explain that next we'll chain excuses. For example, you will start by asking the student to your left, 'Where is your homework?' Then, that student will give you the excuse on her notecard. Encourage dramatic readings! After that, the student who gave you the first excuse will become the teacher and ask the student to her left for her excuse until everyone (including you!) has given an excuse.
    • Once everyone has had a chance to give an excuse, ask learners to sit at their computers and go to the webpage for today's activity.
  • 10
    min

    Explore the project

    Ask students to explore the Homework Excuse Generator by clicking on its button several times and sharing the results with a neighbor or the whole group.

    Explain that this make is made in Mozilla's Thimble Web editor. This means that they can hit the green "Remix" button in the upper right hand corner of the screen to change all sorts of things on the page, including its title, text, and images.

    Explain that after students hit the Remix button, Thimble will show them the code for the wbepage, as well as the JavaScript code that makes the button work with the webpage. Explain also that HTML, the language of the Web, shapes the page while JavaScript, a coding language for webpages, makes its interactive parts work.

    Answer any questions your students have.

  • 40
    min

    Remix the project

    Guide learners around the Thimble interface using your computer and projector. Point out the sidebard to the left that has the main page called index.html, as well as the other files used in the web page, including the JavaScript file called excuses.js.

    Also show your learners that they can hit the 'Tutorial' tab on the right side of the screen to switch their view from the webpage to a self-guided tutorial that takes them through the remix activity.

    Run through the tutorial yourself at a baseline pace for the class and do a 'think-aloud' as you work. Speak your thoughts as you navigate and change the code.

    Invite eager students to move through the tutorial at their own pace.

    Use the tutorial and your think-aloud to support students and loop back to any difficult areas. At the end of 45 minutes, after following the tutorial, each student should have remixed and changed

    • The title of the page on the index.html page.
    • Several values in the arrays, or sets of words' in the excuses.js file.
    • The credits at the bottom of the index.html page.

    Gauge students' engagement with remixing the JavaScript and end this part of the activity early or extend the time students have to remix accordingly.

  • 5
    min

    Share your project

    Publish your remix. Invite your students to hit the 'Publish' button in the upper right-hand corner of their remix when they finish. Thimble will give them a URL, or Web address, to visit andf share with friends.

    Take it a step further. Invite learners to transform the Homework Excuse Generator into something else entirely, like a gross food generator. Invite them also to check out the style.css file in the left sidebar and to see what happens when they change values there.

  • 20
    min

    Reflect and review

    Give students about 5-10 minutes to visit one another's machines or to swap Web addresses to see what other learners came up with in their remixes.

    Ask volunteers to share some of their newly remixed excuses with the class.

    Facilitate a brief, reflective discussion about composing, coding, and remixing using questions like

    • What seemed easiest or most difficult about remixing the page today?
    • How does beginning with a remix help you learn to build something new? Or is beginning with a remix less helpful than beginning with a blank page? Why do you think so?
    • How would you explain the connection between the HTML - or webpage - in this activity and the JavaScript file?