Lesson Plan

Code.org: An Hour of Code

An Introduction to Computer Science and Programming
Art L.
California Teachers Advisory Council (CalTAC) Member
Sweetwater High School
National City, CA
Show More
My Grades 9, 10, 11, 12
Objectives

Students will be able to...

  • write a computer program to have the computer complete a task based upon the instructions given.
  • learn and understand the basics of computer science.
  • use pair programming techniques to write the program.

Here is a link to the Hour of Code Tutorials.

For a complete listing of the educational standards that these computer programming activities address (Common Core, NGSS [Next Generation Science Standards], CSTA [Computer Science Teachers Association] K-12 Computer Science Standards), click on the following link.

Additionally, Code.org and the Hour of Code event provides a step-by-step teacher's guide/lesson plan for the Hour of Code:

Educators can use the Quick Start Guide to teach the Hour of Code; it is well-written and self-explanatory and does not require the Step-by-Step procedure. But I did not include one since it is required and it is completely based upon the materials provided by Code.org.

What I am surprised by and will request from Common Sense Media is to add as a subject Computer Science and embed the K-12 Computer Science Standards established by CSTA.

This lesson is provided by Code.org; I took the liberty of modifying it for this app flow: Code.org's Hour of Code: Quick Start Guide for Educators

Subjects
English Language Learning
Math
Science
Grades K - 12
All Notes
Teacher Notes
Student Notes

1 Hook

Prep for the Hour of Code

  1. Go through the tutorial yourself so you can help students during class time. Preview the congrats page to see what students will see when they finish.
  2. Test tutorials and videos on student computers or devices. Make sure they work properly.
  3. Having trouble with Hour of Code videos? The Code.org tutorial videos are hosted on YouTubeEducation.com (not YouTube). This works even in schools that block YouTube. If it doesn't work for you, you can use the "Show Notes" tab to read instructions instead of watching the video. (Meanwhile, please ask your IT department to whitelist the domain "youtubeeducation.com") Or download the videos here; the Hour of Code videos are the first 6 videos listed in that link. You can also download each video directly by clicking on the green "download" button in the video pop-up windows at learn.code.org.
  4. Provide headphones for your class, or ask students to bring their own. (Sound isn’t required for the tutorial, but recommended.)
  5. Don't have enough devices? Use pair programming. When students partner up, they help each other and rely less on the teacher. They’ll also see that computer science is social and collaborative. The three rules of pair programming in a school setting:
  6. The driver controls the mouse and keyboard.
  7. The navigator makes suggestions, points out errors, and asks questions.  
  8. Students should switch roles at least two times a session.
  9. Have low bandwidth? Ask students to click the “Show notes” links to watch storyboards instead of the full videos. You can show videos at the front of the class, so each student isn't downloading videos separately.
  10. Optional: print out certificates for your students to take home. Or if students have their own email address, they can request a certificate at the end of the hour of code.

Right before your class period

  1. Write these links on your white board:
  2. Main activity: hourofcode.com/code
  3. For students who finish early: code.org/learn

To start off your class period, inspire students about computer science by showing them one of these videos, featuring Bill Gates, Mark Zuckerberg, Black Eyed Peas founder will.i.am and NBA star Chris Bosh talking about the importance of programming. (There are 1 minute, 5 minute, and 9 minute versions) We’ll also have a video specifically about the Hour of Code, to be released in December.
Briefly explain what computer science means. Here’s an example:

“Computer science is the art of blending human ideas and digital tools to increase our power. Computer scientists work in so many different areas: writing apps for phones, curing diseases, creating animated movies, working on social media, building robots that explore other planets and so much more. Think about things in your everyday life that use computer science: a cell phone, a microwave, a computer, a traffic light… all of these things needed a computer scientist to help build them."

Adjustments for K-2 Teachers

  • Have the first level of the activity already pulled up on students’ computer screens when they students start the activity.
  • If possible, have students sit away from the computers while explaining the directions to the activity.
  • Explain the 3 commands that the bird can do: move forward, turn right, and turn left.
  • Do a live example of the first 3 levels. Try putting tape on the floor to make it look like the bird’s maze. Model the commands yourself and then pick 1 or 2 student volunteers to model for the class.
  • Have students pair program by sitting 2 students at the same computer. Have the person controlling the mouse and keyboard first be a “1” and the other student who makes suggestions, points out errors, and asks questions be a “2.” Every 5 minutes, have the students switch roles.
  • Practice clicking and dragging blocks before attempting to solve any of the puzzles. Also, practice dragging blocks to the trash can.
Student Instructions

Good morning everyone.

Today, we will be having the Hour of Code in class. We will be watching some inspirational videos about Coding and Computer Science.

What exactly is Computer Science? “Computer science is the art of blending human ideas and digital tools to increase our power. Computer scientists work in so many different areas: writing apps for phones, curing diseases, creating animated movies, working on social media, building robots that explore other planets and so much more. Think about things in your everyday life that use computer science: a cell phone, a microwave, a computer, a traffic light… all of these things needed a computer scientist to help build them."

2 Direct Instruction

Overview of Code.org’s Hour of Code activity

Our activity is a set of 20 self-guided puzzles that teach the basics of computer science for users with no prior experience. In each puzzle, students write a program that gets a character through a maze. The activity uses Blockly, a visual programming language that has blocks you drag and drop to write programs. The activity includes instructional videos before puzzles #1, 6, 10, 14, 18, and a wrap-up video after the last puzzle. The characters in our activity are from the popular kids’ games Angry Birds and Plants vs. Zombies.

Even though students will be using blocks to write code, they will be able to see the code they write represented in Javascript, a text-based language.

And as much as we designed this activity to teach basic computer science, we’re aiming for students to walk away thinking that computer science is fun, approachable, and relevant to their lives.


Introduce them to a few tips that will help make your first hour of code go smoothly:

  1. “Ask 3 and then me” rule. Students should ask 3 classmates, and if they don’t have the answer, then they should ask the teacher.
  2. Tell students: “Learning to program is like learning a new language; you won’t be fluent right away.”
  3. Persistance is key in computer science, and it’s worth it because of the satisfaction when you achieve something that you’ve worked really hard on.
  4. Encourage students to run their program often to be able to de-bug (fix) their program more easily. Risk-taking is important in computer science.
  5. Tell students to turn on/log-in to their computer and go to hourofcode.com/code to get started. Our activity begins with a video, so you can watch it as a class or students can watch it individually on their computers. If you watch it as a class, tell students to dismiss the first video that pops up in the activity by clicking on the “X” in the upper right hand corner.
Student Instructions

Write your first computer program.

Learn the basic concepts of Computer Science with drag and drop programming. This is a game-like, self-directed tutorial starring video lectures by Bill Gates, Mark Zuckerberg, Angry Birds and Plants vs. Zombies.

  1. Start by opening a Internet browser on the computer.
  2. Click on the following link: http://code.org/learn
  3. Select either the Anna and Elsa tutorial or the Angry Birds Tutorial.
  4. Follow the step-by-step instructions.

3 Guided Practice

To do the guided practice, you need the following.

  • A projector and sound system to project teacher computer screen.

When the students access the Hour of Code tutorials, ask them to select the one that you would like to guide them through; either select:

  1. Pause the opening video.
  2. Have students turn off their monitor.
  3. Ask them to view the projected screen as you play the video of the beginning tutorial you selected.
  4. Once the video plays and is done, have students turn on their monitor.
  5. Do the first one to two puzzles with them.
  6. Then have them do it on their own.
Student Instructions

Students, please do the following to create your first program. If you already have created a computer program, see if you can do these ones. If you have already done these, see if you can help and guide others that have not done this before.

  1. Turn on your computers and log on.
  2. Open an Internet browser.
  3. Open one of the following Web pages:
    1. Code wtih Anna and Elsa
    2. Tutorials for Beginners (Mark Zuckerman and Angry Birds are on this one).

  4. Turn off your monitor.

  5. Look at the projected screen and let us view the video together.

  6. Let us solve for the first puzzle togehter!

  7. If you have headphones, plug it into your computer in order to hear the sounds of the puzzle you are solving and the videos.

4 Independent Practice

While students are doing the activity, walk around the classroom and answer any questions that they might have. Also, be sure to identify students that are far behind their classmates. An easy way to see this is the orange dot indicating puzzle number at the top of their screen.

When your students come across difficulties:

  • Most of the puzzles can be solved with 6 blocks or less. Students may think they need solutions with lots of blocks, but encourage them to think about the logic of the puzzle instead of just adding more blocks. Ask them to explain in words what they want their character to do.
  • Encourage students and offer positive reinforcement: “You’re doing great, so keep trying.”
  • It’s okay to respond: “I don’t know. Let’s figure this out together.” If you can’t figure out a problem, use it as a good learning lesson for the class: “Technology doesn’t always work out the way we want. Together, we’re a community of learners.”
  • Check the Hour of Code forum to ask questions and see FAQs.
Student Instructions

Now that we completed the first puzzle together, work with your programming partner and try to complete the 20 puzzles!

If you have problems solving the puzzle, talk to your partner first; then ask for my help.

Have fun creating your computer program!

5 Wrap-Up

What to do if a student finishes early?

  • Students can try Hour of Code activities made by other providers at code.org/learn in the “1 hour” tab.
  • Students can continue on with similar puzzles created by Code.org at http://learn.code.org. Code.org’s Hour of Code activity is one of the lessons in our K-8 Intro to Computer Science Course; learn more about that course at code.org/educate/20hr.
  • Or, ask students who finish early to help classmates who are having trouble with the activity.
Student Instructions

Once you are finished

  • See if you have a certificate availabe for you to print out that you completed the Hour of Code; if yes type your name on it and print it.
  • Try the Hour of Code activities made by other providers at code.org/learn in the “1 hour” tab.
  • You can continue on with similar puzzles created by Code.org at http://learn.code.org. Code.org’s Hour of Code activity is one of the lessons in our K-8 Intro to Computer Science Course; learn more about that course at code.org/educate/20hr.
  • Or, if you finish early, help classmates who are having trouble with the activity.