Lesson Plan

Homework Excuse Generator

Remix a random Homework Excuse Generator to have some fun at the start of a new school year.

Use it to teach.learn:

  • Basic coding ideas
  • Editing JavaScript content
  • Creating an interactive button with JavaScript

In this activity, you'll remix a random Homework Excuse Generator to have some fun at the start of a new school year.

First, you'll change the title of the webpage using HTML, the language of the Web..

Then, you'll change a bunch of words that show up on the webpage by remixing some JavaScript, a coding language that makes webpages interactive.

Finally, you'll change the credits on the webpage using HTML so that people know you remixed this page.

English Language Arts
World Languages
Grades 7 – 12
All Notes
Teacher Notes
Student Notes

1 Change the title of the page

To change the title of your Homework Excuse Generator, you'll edit HTML, the language of the Web.

Go to line . Find the text between the h1 tags.

In HTML, h1 tags and most others have an opening tag and a closing tag, and in the closing tag a / goes in front of the tag itself, like /h1. Brackets - like this <> go around each opening and closing tag. Check out the code to see what I mean.

Try to change the words of the title, but leave the opening and closing h1 tags alone. For example, you might call this page 'My Homework Excuses' or 'Best Excuses Ever.' The idea here is just to get some practice changing text so you can see how your webpage changes when you change the HTML.

2 Change your excuses

To change the excuses generated by the button on thos page, you have to edit the excuses.js file in the left sidebard on this page. Click on the name of that file to edit it.

Even though you can include JavaScript on a webpage like index.html, we often save our .js files (and other files, like .css or images) separately so we can keep our code clean and use our .js files on several different webpages at once.

Our JavaScript file is made of one function, or tiny program, that returns a homework excuse to our webpage whenever we click its button.

In the excuses.js file, check out line through line . These lines are variables which are the building blocks of functions. These first three variables are special ones that each hold a large set of values. Variables that hold a set of values, instead of just one value, are called arrays and they begin and end with brackets. All of the values here are words, which are called strings in scripts like this one.

Go ahead and change a bunch of the strings. Delete the words you see and then remix your own words into the arrays. Try to add 5-10 words to each array. Your Web browser needs you to be careful about punctuation, though. It can only interpret your code in a very specific way, so if you drop a quotation mark or comma, your browser won't know what to do.

Each string needs a quotation mark before and after it, and the strings need to be separated from one another by commas between them.

For example, a remixed array might look like this

var who = ['mouse', 'robot', 'bff', 'bus driver', 'rival'];

Be careful, also, to keep all your punctuation at the end of each line - a bracket and a semi-colomn.

The next set of variables, between line and line uses math to pick one value, or string, from each of your arrays.

Finally, the getElementById('excuses').innerHTML line of the function pushes each new homework excuse out from the JavaScript function and on to your webpage, index.html.

When you go back to index.html, check out line . You can see how we link ithe webpage to the JavaScript file that makes the button work right there. You can also look at line to see how our HTML button runs the excuses.js file when you click it.

3 Give yourself credit

Now that you've done all this work, give yourself credit for a job well done.

Go to line and add 'Remixed by [you].' Use your first name or initial. Don't use your last name or give out any other personal information here. If you wonder if you should use your initial or name, ask a teacher for advice.

The 'CC-BY' line here means that the page is licensed for other people to remix as long as they give the original maker credit. This kind of license is called a Creative Commons Attribution license because when you atribute something to someone, you say 'This was made by' whoever made it.

4 OPTIONAL: Mess around with the code

Congratulations on remixing HTML and JavaScript!

If you'd like to explore and remix more of the page, you can remix the stylesheet file in the left sidebar called style.css. CSS stands for 'cascading stylesheet.' A stylesheet tells different parts of a webpage how to look. Change some of the number values you see in style.cssto find out what happens to your page. Messing with things like color or font-size ought to cause big changes to your page.

Even though you can include CSS on a webpage like index.html, we often save our .css files (and other files, like .js or images) separately so we can keep our code clean and use our .css files on several different webpages at once.

If you're interested, try to find the background-colors and font colors in the stylesheet and change them to match your school colors. You can find HTML color codes at sites like this color picker.

Be sure to save, reload, and test your page often so you can undo any changes that completely break it.

5 Share your remix

When you're ready to share your postcard, click 'Publish' in Thimble follow the link you get to see your new webpage.

Once you've saved your page, copy the URL and send it to your teacher or ask your teacher to write it down for you. You can visit that web address from any Internet-connected device to share your work with family and friends.

Share the URL with your family and ask your family members about their favorite homework excuses. You can remix them into your make!

Great job! You finished the tutorial! You can make your own tutorials for others to follow by adding a tutorial.html page to any Thimble project.