If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

Course: Resources > Unit 1

Lesson 3: Computer programming teachers
Khan for Educators
Resources
Teachers
Computer programming teachers
© 2024 Khan AcademyTerms of usePrivacy PolicyCookie Notice

Teaching guide: Intro to JS - Drawing Basics

Google Classroom
This is a teaching guide for the Intro to JS lesson on Drawing basics.
This lesson is the first time the student will see coding in action and write code themselves.

What the student will learn

  • How to give the computer a command, by "calling a function."
  • How to draw ellipses, rectangles, and lines, by calling different function names and passing in an appropriate number of parameters.
  • The correct syntax for calling a function in JavaScript, i.e. where to put parentheses, commas, and semi-colons.
  • The canvas grid on Khan Academy - 400x400 pixels, with 0,0 starting in upper left, x in the horizontal direction and y in the vertical direction. (See image).
  • A brief guide to using the number scrubber tool to quickly change numbers.

The student will be able to write code like:

Where students struggle

  • Students often struggle with getting the syntax exactly right - like leaving off the semi-colon, forgetting to use commas in between parameters. Oh Noes Guy should warn them about their bad syntax, but they may still struggle to see how to fix it.
  • Students may misspell function names. Once again, Oh Noes Guy can often suggest a better spelling. They can also look at the documentation below the editor to double-check.
  • Students may pass in the wrong number of parameters or forget what the parameters mean. You can encourage them to change the parameters and see how the shape changes in responses. You can also remind them to check the documentation.
  • Students may have a hard time understanding the layout of the canvas grid. You can print out a grid paper handout for them to help them visualize it or just have them draw it out on a piece of paper next to them.

Additional materials: Unplugged activities

An "unplugged" activity is one that you can do with students without needing to use a computer at all. They can help convey concepts in a more visceral way, and they can also be a backup activity for when computers fail.
To complement this lesson, the best unplugged activities are the ones that convey the idea of a program as a series of commands. These activities are best done before the students get into coding and are probably better suited for younger students. For a short activity, you can quickly play Robot Game or if you have more time, try Code.org's Graph Paper Programming (Overview Video & Example Teaching Clip).

Additional materials: Discussion questions

These are questions that you can ask students individually after they've done the lesson, or lead a group discussion around, if everyone's gotten to the same point.
  • What is surprising about programming?
  • What is the hardest part?
  • What do you like about it?
  • What do you dream about being able to program one day?

Additional materials: Trivia questions

These can be fun to do as a class after everyone’s gotten through the lesson. They can also lead to discussion about which questions are the hardest. Play them on Quizizz.

Want to join the conversation?

Log in