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 - Resizing with variable expressions

*This is a teaching guide for the Intro to JS lesson on Resizing with variable expressions.*

Depending on the level of your students, you could mark this as a "bonus" lesson. This is one of the hardest lessons, and students can learn the rest of the course even if they struggle with the concepts in this lesson. Try it out in your class and see what the response is like.

### What the student will learn

- The math operators that are valid in JavaScript (+, -, /, *, %).
- How to use variables to draw groups of shapes that can be easily resized by changing a single variable.

### The student will be able to write code like:

### Where students struggle

- As noted above, students generally have a hard time with this lesson - but they also say that it helps them understand variables much better once they do understand it.
- Some students, especially younger ones, struggle with the math that’s involved in coming up with the variable expressions. Encourage them to use grid paper to draw out the shapes, write down their proportions, and use a calculator to see what the relationships are of the numbers to each other. Once they program the numbers, remind them to try changing the numbers to see how the shapes change as a result.
- Some students wonder if they can use different sorts of math expressions - like
`faceSize * 0.50`

,`faceSize / 2`

, and`faceSize * 1/2`

. All of those are valid in JS and mean the same thing.

### 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.

- Show the diagram of an animal body (penguin, human, etc). What variables might you use to program the body and its parts (face, limbs)? You can even try measuring each other to see what the proportions are, like what fraction legs are compared to height.
- Show the diagram of a building. What variables might you use to program the building and its parts (windows, doors, etc)?

### 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?

- This Quizizz is the same as the Interactive Programs.(2 votes)