Lesson 16: Mouse Input

Overview

Question of the Day: What are more ways that the computer can react to user input?

In this lesson students continue to explore ways to use conditional statements to take user input. In addition to the keyboard commands learned yesterday, students will learn about several ways to take mouse input. They will also expand their understanding of conditionals to include else, which allows for the computer to run a certain section of code when a condition is true, and a different section of code when it is not.

Purpose

Students have learned how to make simple decisions with conditionals. Sometimes, however, we want to make decisions based on whether the condition we asked about originally was false. That's where else statements come in. Else statements are a second statement which is attached to an if statement. Else statements execute when the conditions they are attached to are false.

This concept is introduced alongside several new mouse input commands, allowing students to gradually build up programs that use input in different ways.

Assessment Opportunities

  1. Use an if-else statement to control the flow of a program.

    See Level 9 in Code Studio.

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

Lesson Modifications

Warm Up (5 min)

Activity (40 min)

Wrap Up (5 min)

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.

Links

Heads Up! Please make a copy of any documents you plan to share with students.

For the Teachers

Vocabulary

  • Conditionals - Statements that only run when certain conditions are true.

Introduced Code

Teaching Guide

Lesson Modifications

Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, please see these modifications for Unit 3.

Warm Up (5 min)

Discussion Goal

Students may come up with many different specific scenarios, but make sure that they are differentiating between conditionals that respond to user input and those that respond to other changes in the program, such as a score increase, the location of a sprite, or player lives lost. Major things to remember may include putting the conditionals in the draw loop or paying attention to how the blocks are nested.

3-2-1 Review

Prompt: What are three different things that you've been able to do with conditionals? What are two big things that everyone should remember when using conditionals? What's one thing you still want to learn how to program?

Share: Allow students to share out their responses.

Remarks

That's great! Today we're going to look at a way to make our conditionals even more powerful, and see some new ways to get user input.

Question of the Day: What are more ways that the computer can react to user input?

Activity (40 min)

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 min)

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.

Wrap Up

Question of the Day: What are more ways that the computer can react to user input?

Prompt: You now have many different ways to detect user input. With a partner, choose three different user input commands and think of an example of when you might use them. Be ready to share with the class!

  • Lesson Overview
  • 1
  • (click tabs to see student view)
View on Code Studio

Teaching Tip

If-Else Statements - Map Level (PDF)

Student Instructions

  • Prediction
  • 2
  • (click tabs to see student view)
View on Code Studio

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
  • 3
  • (click tabs to see student view)
View on Code Studio

Teaching Tip

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.

Student Instructions

Questions to Consider

  • What’s an example of when you would need an “if/else” statement?
View on Code Studio

Assessment Opportunities

Key Concepts:

Use conditionals to control the flow of a program; detect and respond to user input.

Assessment Criteria:
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

These gears already spin one direction when you press the space bar, now you'll want them to spin the other direction when the space bar isn't pressed.

Do This

  • Make the gears spin the opposite way when the space bar is not being pressed.
View on Code Studio

Assessment Opportunities

Key Concepts:

Use conditionals to control the flow of a program; detect and respond to user input.

Assessment Criteria:
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.

Teaching Tip

This is the first time that students have seen mouse input. Athough they have not seen the block before, they may be able to predict from Line 13 that the gears will spin when the mouse is pressed. This level is almost exactly the same as the previous level, so you may also use it as a review of the if/else construct.

Student Instructions

Control the Gears

Here is the same program, but with one small difference.

Do This

  • Read the program carefully, especially Line 13, to figure out how to control the gears.
  • Run the program and test whether you were correct.
  • Make the gears spin the opposite way when there is no user input.
View on Code Studio

Student Instructions

Mouse Clicks

Here's a program that drops a balloon down the screen. Make the balloon go up and down according to whether the user is pressing the mouse.

Do This

  • Add code that checks whether the mouse is being pressed.
  • Move the balloon up if the mouse is down. Otherwise, move the balloon down.
View on Code Studio

Student Instructions

World.mouseX

This program uses an if block to shake the blender when the mouse is on left side of the screen.

Do This

  • Run the program to see how it works.
  • Add an else to make the mixer shake when the mouse is on the other side of the screen.
View on Code Studio

Student Instructions

Practice keyboard input and using the if/else block with these activities.


Choose from the following activities:
a
Lady Bug Walk

Move the ladybug only when the mouse is near the bottom of the screen.

b
Ghost Moving with the Mouse

Make this ghost move in different directions depending on where the mouse pointer is.

View on Code Studio

Student Instructions

Ladybug Walk

This ladybug should only move when the mouse is near the bottom of the screen. You're going to use a conditional to make sure the ladybug only moves when the mouse is near the bottom of the screen.

Do This

  • Use an if block to check whether the position of the mouse (World.mouseY) is below a certain point.
  • Add code using the counter pattern to increase bug.x to make it move. The bug should only move if the mouse pointer is near the bottom of the screen.
View on Code Studio

Student Instructions

Ghost Moving with the Mouse

In this level, you'll make the ghost move either left or right depending on the position of the mouse pointer. In the example shown, if the mouse pointer is on the left, the ghost moves left. The opposite is also true.

Do This

  • Write at least two if-statements to check for the location of the mouse.
  • Make the ghost move in a different direction for each mouse location.
  • Assessment
  • 9
  • (click tabs to see student view)
View on Code Studio

Assessment Opportunities

Key Concepts:

Use conditionals to control the flow of a program; detect and respond to user input.

Assessment Criteria:
Extensive Evidence

The creature only shakes when the user presses the mouse, and the text only appears when the user is not pressing the mouse. Only one conditional block is used, and the program is error-free.

Convincing Evidence

The creature only shakes when the user presses the mouse, and the text only appears when the user is not pressing the mouse, but there may be small errors, such as problems with the size of the text or positioning of the creature.

Limited Evidence

There is an else clause used, but there are major errors in the program that keep the program from running properly.

No Evidence

There is no else clause.

Student Instructions

Fix the Program

This program should only shake the creature when the mouse is pressed, and only show directions when the mouse is not pressed.

Do This

  • Change the code so that the creature only shakes when the mouse is pressed.
  • Change the code so the directions ("Press the mouse to shake the creature.") only show when the user is not pressing the mouse.
View on Code Studio

Student Instructions

Try out these new blocks and challenges with mouse input.


Choose from the following activities:
a
Twin Spirals

Make the spirals move in the opposite way when the mouse is pressed down.

b
Follow the Mouse - Beginner

Make the bee follow the mouse as it moves.

c
Follow the Mouse - Advanced

Make the bee buzz randomly around the mouse.

d
Shake the Salt - Detect Mouse Movement

Make the salt shaker shake as you move the mouse.

e
Free Play

None

View on Code Studio

Student Instructions

Twin Spirals

These spirals turn and change size in opposite ways.

Do This

  • Run the code to see what is making the spirals shrink, grow, and turn.
  • Add code so that the spirals switch what they are doing when the mouse is pressed down.
View on Code Studio

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.
  • Run the program to test that it works.
View on Code Studio

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

View on Code Studio

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?

View on Code Studio

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.