Lesson 13: Other Forms of Input
Overview
In this lesson students continue to explore ways to use conditional statements to take user input. In addition to the simple keyDown()
command learned yesterday, students will learn about several other keyboard input commands as well as ways to take mouse input.
Purpose
Students have learned how to make simple decisions with conditionals. Sometimes however we want to make decision based on if the condition we asked about originally was false or we want to make a decision based on multiple conditions being true. Thats where else statements and more complex conditionals come in. Else statements are a second statement which is attached to a if statement. Else statements execute when the if statement it is attached to is false. You can think of it as "if something is true do thing 1 else do thing 2.
This concept is introduced alongside several new key and mouse input commands, allowing students to gradually build up programs that input in different ways.
Assessment Opportunities
-
Use an if-else statement to control the flow of a program.
See Level 5 in Code Studio.
-
Respond to a variety of types of user input.
Use the wrap up discussion to check students' understanding of the different types of user input. You may also informally check their ability to use them as they progress through the Code Studio lesson.
Agenda
Warm Up (5 minutes)
Activity (40 minutes)
Wrap Up (5 minutes)
View on Code Studio
Objectives
Students will be able to:
- Use an if-else statement to control the flow of a program.
- Respond to a variety of types of user input.
Vocabulary
- Conditionals - Statements that only run when certain conditions are true.
Introduced Code
Teaching Guide
Warm Up (5 minutes)
Check for Understanding
Remarks
Today we'll be picking up today where we left off yesterday - using conditionals to write programs that respond to user input. Let's refresh what we learned yesterday.
Prompt:
- What is a Boolean? (eg. a true/false value)
- What is the relationship between a Boolean and a Conditional? (eg. a conditional asks a Boolean question and runs code if the answer is true)
- What are some examples of comparison operators that result in a Boolean? (eg. >, <, ==)
- What is the difference between
=
and==
? (eg.=
is used to assign a value,==
is used to check if two values are equal)
Remarks
That's great! Today we're going to look at a wayto make our conditionals even more powerful, and see some new ways to get user input.
Activity (40 minutes)
If/Else and More Input
Transition: Move the class to Code Studio, and have students complete the prediction level as a class or in small groups, then talk about what they found.
Video: Watch the video as a class and review the discussion questions together.
Wrap Up (5 minutes)
Wrap Up
Assessment Opportunity
This discussion serves as a brief review and assessment of the new user input commands. As students share out, press them to explain why their choice is better than other, similar choices (mouseDown / mouseWentDown / mouseWentUp). If any commands are missing after all the groups have shared out, elicit the missing ones from the group before moving on.
Prompt: You now have many different ways to detect user input. With a partner, choose three difference user input commands and think of an example of when you might use them. Be ready to share with the class!
- Lesson Overview
- Student Overview
- Predict
- Student Overview
Student Instructions
If/Else Predict
Read through the following program, paying special attention to the ifelse
block on Line 10. After discussing the following questions with your partner, write down your predictions and run the code to see what the program does.
- What happens when you press the space bar?
- What happens when you don't press the space bar?
- Video: If/Else Statements
- Teacher Overview
- Student Overview
Discussion Goals
Make sure students are thinking of situations in which they want two different things to happen, depending on the situation. For example, they may say that they want one animation if the sprite is moving to the left and a different animation if the sprite is moving to the right. Challenge the students to think about when they would just use an if
block, and when an ifelse
block is necessary.
Questions to Consider
- What’s an example of when you would need an “if/else” statement?
Student Instructions
When to Provide an "Else"
The else clause is useful when you want the program to do one thing when your condition is true, and a different thing when your condition is false.
Do This
Click "Run" to see the swarm of bees created for you and a flower on the left side of the screen. Make the swarm of bees appear when the mouse is near the flower (on the left side of the screen) and disappear when the mouse is away from the flower (on the right side of the screen). Look at the example on the right.
- Add an
if else
statement after you update the position of the bees. - In the input of the if use a boolean to check if the x position of the mouse is on the side of the screen with the flower.
- Set the
visible
property of each bee inside both the if and else statements appropriately to make the bees only show near the flower.
Assessment Opportunities
Use conditionals to control the flow of a program; detect and respond to user input.
Extensive Evidence
The gears spin in the opposite direction when the space bar is not being pressed, and the teeth of the gears line up properly.
Convincing Evidence
At least one gear spins in the opposite direction when the space bar is not being pressed, but there may be minor errors in the program that keep all the gears from spinning.
Limited Evidence
There is an else clause used, but there are major errors in the program that keep the gears from spinning.
No Evidence
There is no else clause.
Student Instructions
Reverse the Gears
The gears are back. They already spin when you press the space bar, but now you'll want to reverse them when you're not spinning it.
Do This
- Makes the gears spin opposite of the direction that they do when the space bar is pressed.
- If-Else Statements
- Student Overview
Student Instructions
Mouse X and Y
One of the simplest ways to take input is to just make a sprite follow the user's mouse position. You can get the x and y location of the mouse using World.mouseX
and World.mouseY
. This follows the pattern you learned with sprite properties. World
is the name of the object. mouseX
and mouseY
are the names of the properties.
Do This
You are going to make a bee sprite follow the mouse around the game area.
- The bee image is already loaded in the animation tab for you.
- Create a bee sprite that draws in the center of the window.
- Inside the draw loop update the position of the sprite to the position of the mouse:
- Set the x position of the sprite to the value of
World.mouseX
. - Set the y position of the sprite to the value of
World.mouseY
.
- Set the x position of the sprite to the value of
- Run the program to test that it works.
Student Instructions
Random Around Point
Now that you can make the bee follow the mouse, lets make a bee fly around the mouse as shown in the picture on the right. In order to do this, you will need to add a random amount between -50 and 50 to the mouseX
or mouseY
.
Do This
You already have a bee sprite that follows the mouse.
- Update the x and y location to be randomly close to the mouse.
- Add a random number between -50 and 50 to the
World.mouseX
andWorld.mouseY
.
- Add a random number between -50 and 50 to the
- If necessary, use the
World.frameRate
block to slow down the animation and find the best frame rate.
Challenge: Add 3 more bees that follow the mouse in the same way to make a swarm of bees.
Student Instructions
Make a Prediction: User Input
So far you've used keyDown
as a way to let users control your programs, but that's just one of many ways to take input. In fact, just one of many ways to detect keypresses! Depending on how you want to react to a keypress, there are a few other blocks you might want to use.
Read the program and predict below what will happen when you press each of the up, down, left, and right arrows.
After making your prediction, run the code and write down or share with your neighbor your observations.
- What seems to be the difference between
keyDown()
,keyWentDown()
, andkeyWentUp()
? - What do you think the exclamation mark (
!
) on line 10 does? - How might you use the different keypress blocks in a game?
Student Instructions
Student Instructions
Mouse Clicks
Keypresses are great, but sometimes you want users to interact through mouse clicks. There's a new block called mouseDown
which, similar to keyDown
, checks whether the left or right mouse buttons is being pressed. If you are using a computer with a mouse or trackpad that has only one button, you'll want to always use mouseDown("left")
.
Do This
Here's a program that drops a balloon down the screen - you're going to program the mouse button to raise the balloon back up while it's clicked.
- Add an if else statment that checks for
mouseDown
. - Inside the conditional, move the balloon up one pixel if the mouse is down. Otherwise, move the balloon down.
Hint: You'll need to move the code that drops the balloon for this to work - you only want it to run if mouseDown
is false
Challenge: Can you make the balloon drift randomly to the left and right as it rises and falls?
Student Instructions
Responding to a Single Click
Earlier we learned that keyWentDown
and keyWentUp
can be used to respond to a keypress a single time. The blocks mouseWentUp
and mouseWentDown
allow you to do that for the mouse!
Do This
Let's make a simple game that counts how many times you've clicked. We've already provided a variable clicks
that you can use to track how many times the user has clicked.
- Add a conditional that checks if the mouse went down.
- Inside your conditional, add to the
clicks
variable.
Challenge: Can you add a sprite that responds to mouseWentDown
as well? Add an image of your choice and increase the sprite's size each time the mouse is clicked.
Student Instructions
mouseDidMove
We can also use Boolean expressions to check whether or not the mouse has moved. The mouseDidMove
block will return false
if the mouse is still, but true
if the mouse has been moving.
Do This
Right now, this program just displays a salt shaker sprite. You'll need to use mouseDidMove
so that you can "shake" the salt by moving the mouse back and forth.
- Add a conditional that checks if
mouseDidMove
. - If the conditional is true, rotate the salt sprite randomly to the left or right.
Challenge: Can you keep track of how many times the mouseDidMove
shakes the salt, and then rotate it right side up after 100 shakes?
Student Instructions
Challenge: Checking for Multiple Conditions
Check with your teacher before taking on this challenge.
So far we've looked at a lot of ways to check if a single condition is true, but often a program needs to check the state of many conditions simultaneously before making a decision. For this challenge, let's assume the following scenario:
- The sprite should move up, down, left, and right if the corresponding arrow key is pressed.
- The sprite should not go all the way off the screen in any direction.
Do This Together
Before you tackle writing this program, you'll need to figure out how to check multiple conditions at once.
- Brainstorm with your neighbors ways you might check for more than one condition.
- Share back with other classmates so you can see other potential approaches.
- Explore the toolbox for blocks that might help (pay extra attention to the Math and Control drawers).
- Program your proposed solution.
- Test your program to make sure it's actually checking all of the conditions you intended.
Student Instructions
Free Play
Use what you've learned to create whatever you like. When you're finished, you can click to send your creation to a friend, or to send it to your Projects Gallery.
Standards Alignment
View full course alignment
CSTA K-12 Computer Science Standards (2017)
AP - Algorithms & Programming
- 2-AP-11 - Create clearly named variables that represent different data types and perform operations on their values.
- 2-AP-12 - Design and iteratively develop programs that combine control structures, including nested loops and compound conditionals.
- 2-AP-13 - Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.
- 2-AP-16 - Incorporate existing code, media, and libraries into original programs, and give attribution.
- 2-AP-17 - Systematically test and refine programs using a range of test cases.
- 2-AP-19 - Document programs in order to make them easier to follow, test, and debug.