Main content
Resources
Course: Resources > Unit 1
Lesson 4: Computer programming teachers- Programming content overview
- Tracking progress of programming students
- Classroom debugging guide
- Pair programming in the classroom
- Teaching guide: Intro to JS - Drawing Basics
- Teaching guide: Intro to JS - Coloring
- Teaching guide: Intro to JS - Variables
- Teaching guide: Intro to JS - Animation basics
- Teaching guide: Intro to JS - Interactive Programs
- Teaching guide: Intro to JS - Resizing with variable expressions
- Teaching guide: Intro to JS - Text and strings
- Teaching guide: Intro to JS - Functions
- Teaching guide: Intro to JS - Logic and if statements
- Teaching guide: Intro to JS - Looping
- Teaching guide: Intro to JS - Arrays
- Teaching guide: Intro to JS - Objects
- Teaching guide: Intro to JS - Object-oriented design
- Programming classroom handouts
- Additional programming projects
- Lesson plans: teaching programming in the classroom
- Programming case study: Encouraging cross-disciplinary projects
- Programming case study: Going beyond the KA curriculum
- Programming case study: Teaching an elementary school class
© 2023 Khan AcademyTerms of usePrivacy PolicyCookie Notice
Teaching guide: Intro to JS - Coloring
This is a teaching guide for the Intro to JS lesson on Coloring.
What the student will learn
- How to use the
background()
command to change the color of the entire canvas. - How to use the
fill()
command to change the color of shapes andstroke()
to change their outline. - How to use
strokeWeight()
andnoStroke()
to modify the stroke outline. - A brief overview of the RGB (Red-Green-Blue) color scheme and using the color picker.
- The importance of looking up functions in the documentation to remember how to use them, especially when working on projects.
The student will be able to write code like:
Where students struggle
- Students often struggle with the order of the commands. They must always call the color-changing functions before they draw the shapes they want to be colored. Encourage them to think carefully about the order and try moving lines of code around (copy/paste) to see what happens.
- Students sometimes confuse when to use
fill()
vs.stroke()
, especially for lines - lines have no fill, so they must be colored withstroke()
.
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.
- How often do you find yourself using the documentation? Do you scroll to it or open it in a new tab?
- Have you seen the RGB color scheme used anywhere else? Have you seen any other ways that computers describe colors? (HSB and HSV are examples)
- How do you mix colors when you’re painting? How is different from specifying a color when programming?
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?
No posts yet.