Skip to main content
Teacher Portal

Adding a Second Button to the Brain's Screen- Blocks-based

Teacher Toolbox icon Teacher Toolbox - The Purpose of this Activity

Now that students have experience in treating the brain's screen like one big button, they can turn the screen into two buttons. This activity will introduce students to using nested [If then else] blocks to better manage conditional statements and the underlying logic of doing so. Students are first guided through building the project for having screen presses turn the robot left or right. But, they are then asked to switch the buttons so that what turned the robot left now turns it right, and vice versa.

For more information about [If then] and [If then else] blocks or others used in this activity, visit the help information within VEXcode V5. For more information about this built in help tool, click here.

The following is an outline of what your students will do in this activity:

  • Reviewing the StopOrDrive project and the layout of the brain's screen in pixels.

  • Building a new LeftOrRight project while being guided through the reasoning of the programming.

  • Revising the project so that the buttons on the screen work oppositely.

  • Extend Your Learning: Splitting the screen into two buttons that when pressed, turn the robot left or right.

Materials Required:
Quantity Materials Needed
1

VEX V5 Classroom Starter Kit (with up-to-date firmware)
1

VEXcode V5 (latest version, Windows, macOS, Chromebook)
1

Engineering Notebook
1

StopOrDrive project from the previous Play page

Teacher Toolbox icon Teacher Toolbox

For suggestions on teaching strategies for this section, review the Delivery column of the To Do or Not to Do Pacing Guide! (Google Doc / .docx / .pdf)

The brain's screen can have more than one button.

This activity will let you program the robot to drive forward and turn left or right depending on which side of the brain's screen is pressed.

The three additional types of blocks that you will need during this activity are the following:

VEXcode V5 Blocks from the toolbox - a Turn block set to right; a less than operator; and a screen position set to x.

You can use the Help information inside of VEXcode V5 to learn about the blocks. For guidance in using the Help feature, see the Using Help tutorial.

VEXcode V5 Toolbar with a red arrow pointing to the Tutorials icon. The Tutorials are to the far right after the V5 logo, a globe icon, and FIle.

 

Step 1: Let's start by reviewing the StopOrDrive project.

The StopOrDrive project had the Clawbot stop if the screen was pressed, or else it had it drive forward.
The entire screen was one big button but in this next project, we want half the screen to be one button and the other half to be the other.

Stop or Drive project from the previous lesson. The project begins with a when started block with an attached Forever block. Inside the forever block is an if then else block that reads if screen pressed then stop driving; wait until not screen pressed. Else, drive forward.

In order to split the screen into two buttons, we need to understand more about the layout of the screen.

Pixel grid of the V5 Brain screen shows 12 numbered rows along the lefthand side, with the top row labeled Row 1 and the bottom labeled Row 12. Across the top are 48 numbered columns, with Column 1 labeled on the far left and Column 48 labeled on the far right. The total pixel measurements are 480px wide by 240 px tall.

  • Notice that the columns increase in number from left to right. The number of columns is 48 and the screen is 480 pixels wide.
  • Write down in your engineering notebook that the x-value on the screen is equal to the number of pixels measured from left to right.
  • What is the x-value of the center of the screen? For this activity, you can focus on the x-axis alone because you only need a left and right button.

Teacher Toolbox icon Teacher Toolbox - Answer

The x-value at the center of the screen is equal to half of the width of the screen in pixels. So the center point's x-value is 240. Students will need this number to program the conditional for whether the screen is pressed on the left or right. So be sure to check that they all have the correct value.

Looking ahead, the User Interface Challenge in the Rethink section will require students to apply what they have learned to create four buttons on the screen. So for that, they will need both the x- and y-values.

Teacher Tips icon Teacher Tips

The instructions direct students to the Tutorials within VEXcode V5 as needed. For further assistance, see the VEX Library for supplementary help articles.

Step 2: Programming for two buttons

  • Save StopOrDrive as the LeftOrRight project.
  • Remember, if you need help opening, naming, or saving projects, watch the Tutorials in VEXcode V5.

Project name dialog box in VEXcode V5 Toolbar reads Left Or Right. Slot 3 is selected to the left and the Toolbar reads Saved to the right.

  • Build the project below. It will have the Clawbot turn left or right when the screen is pressed, depending on the side it is pressed on.

A VEXcode V5 project begins with a when started block with a forever block attached, Inside the forever loop are nested if then else blocks. The If branch of the first if then else block reads If screen pressed. The if then else block nested inside the If branch reads If screen x position less than 240 then turn left, and wait until screen not pressed; else turn right and wait until screen not pressed. The outer else branch contains a drive forward blocks.

Teacher Toolbox icon Teacher Toolbox - Why Nested If Then Else Blocks?

The project's skeleton (control blocks only) includes nested blocks: and [If then else] block inside of an [If then else] block inside of a [Forever] loop. This might seem more complicated than it needs to be because you could instead use sequential [If then] blocks. However, using sequential [If then] blocks is not good programming practice.

Three coding structures are shown from left to right. The structure on the left has a red x over it, indicating the problem with a series of nested if then blocks. In the center is a structure of empty C blocks showing nested if then else blocks. To the right, the structure is filled in to show that the same behaviors can be completed in a simpler form.

The rejected project on the left is the sequentially conditional version of our LeftOrRight project. If the screen is pressed and if the x-value is less than 240, the Clawbot turns left. If the screen is pressed and if the x-value is greater than 240, the Clawbot turns right. The problem with this project is that it runs the risk of having both conditions be true. Anytime you use sequential [If then] blocks, you risk creating bugs within a project because there might be more than one conditional statement that is true. Bugs lead to unpredictability.

In the center is the LeftOrRight project's skeleton, and on the right the project is shown with some of the conditional statements and Drivetrain blocks inserted. The logic in this version of the project is slightly different. If/when the screen is pressed, the x-value is either less than 240 (turn left) or it's not less than 240 (turn right). We don't need another conditional statement there. Once the screen is pressed, it's either less than 240 or it's not. We only have two buttons to concern ourselves with. Note, the project on the right is still incomplete.

Students need to understand the differences between these two approaches to the project. Understanding the differences in the underlying logic will greatly benefit developing programmers.

The Left or Right project is broken down with the functionality of the blocks in the project labeled. The forever and outer if screen pressed branch are labeled Keeps checking if screen is pressed. The inner if branch is labeled when screen is pressed, checks whether on the left or right. The next turn left block is labeled If press was on the left (less than 240), turns left. The wait until block is labeled waits until screen is no longer pressed before continuing. The turn right block is labeled if press was not on left (less than 240), turns right. The next wait until block is labeled waits until screen is no longer pressed before continuing. The outer else branch with the drive forward block is labeled If screen is not pressed, drives forward.

  • Let's review what this project does.

    It keeps checking if the screen is pressed. If the screen isn't pressed it drives forward but if it is, it checks where the screen is pressed.

    If the press was on the left side (less than 240), it turns left. Otherwise, it turns right. We don't need another condition for when the x-value is greater than 240 because if it isn't less than 240 (turn left), it must be greater (turn right). We only have two buttons to worry about.

    The wait until Control blocks after each turn have the project wait until the screen is no longer being pressed before continuing.

Toolbar in VEXcode V5 with a red box around the download button. The icons read, from left to right, Controller, Brain, Download, Run, Stop, and Share.

  • Now that the project is done, download and run it to test how it works.
  • For help, watch the Download and Run a Project tutorial video in VEXcode V5.
  • Take notes in your engineering notebook about how the buttons control the movements of the Clawbot.

Teacher Tips icon Teacher Tips

While testing, the students should recognize that the User Interface when used from behind the Clawbot, seems to work in reverse. From the user's perspective, the Clawbot turns away from the side that is being pressed by the user. That is not an optimal User Experience.

When pressing the screen's buttons from behind the Clawbot as it drove forward, you pressed on the right side of the screen to turn left and on the left side of the screen to turn right. That is not a good User Experience. A User Experience is how well a user can interact with a User Interface to control a computer system. There is more information about User Interfaces in the Apply section of this lab.

In this case, we need to improve the User Interface in order to improve the User Experience.

Left or Right VEXcode V5 project. A VEXcode V5 project begins with a when started block with a forever block attached, Inside the forever loop are nested if then else blocks. The If branch of the first if then else block reads If screen pressed. The if then else block nested inside the If branch reads If screen x position less than 240 then turn left, and wait until screen not pressed; else turn right and wait until screen not pressed. The outer else branch contains a drive forward blocks.

  • Review the LeftOrRight project and revise it so that when the user presses the buttons from behind the Clawbot, the robot turns right when the user presses the left side of the screen. Or else, the Clawbot turns left.
  • Plan, test, and iterate on this project in your engineering notebook so that the project makes the Clawbot turn toward the side of the screen that the user is pressing from behind the Clawbot.

Teacher Toolbox icon Teacher Toolbox

Students should plan, test, and refine these changes to the project while documenting it within their engineering notebooks. For the individual engineering notebook rubric, click one of the following links (Google Doc / .docx / .pdf), or click one of the following links for team notebooks (Google Doc / .docx / .pdf). Remember to explain the scoring to students before they begin working.

Teacher Toolbox icon Teacher Toolbox - Solutions

There are two possible ways to solve the problem posed above. The first way is the one written into the instruction: Review the LeftOrRight project and revise it so that when the user presses the buttons from behind the Clawbot, the robot turns right when the user presses the left side of the screen. Or else, the Clawbot turns left.

VEXcode V5 Sample solution begins with a When started block with an attached forever block. Inside the forever block are nested If then else blocks. The outer if then else block reads if screen pressed; else drive forward. In the If branch an if then else block reads if screen x position less than 240 then turn right, else turn left.

The other solution is to switch the Operator block so that when the x-value is greater than 240, the Clawbot turns left.

VEXcode V5 Sample solution begins with a When started block with an attached forever block. Inside the forever block are nested If then else blocks. The outer if then else block reads if screen pressed; else drive forward. In the If branch an if then else block reads if screen x position greater than 240 then turn left, else turn right.

Motivate Discussion icon Motivate Discussion

You needed to use coordinates from a coordinate plane when you programmed the conditional statement for when the x-value was less than 240 (left side of the screen). To have the brain's screen draw visual buttons, you would also need to use coordinates.
Return to Step 2 where you were shown the coordinates for the V5 Robot Brain's screen.

Pixel grid of the V5 Brain screen shows 12 numbered rows along the lefthand side, with the top row labeled Row 1 and the bottom labeled Row 12. Across the top are 48 numbered columns, with Column 1 labeled on the far left and Column 48 labeled on the far right. The total pixel measurements are 480px wide by 240 px tall.

Q: What is the x-value at the right edge of the screen?
A: The x-value increases from 0 at the left edge to 480 at the right edge.

Q: So the range of the x-value is 480 (0 to 480). What is the range of the y-value?
A: The range of y-value is 240 (0 to 240).

Q: Where is the origin (0, 0) of this coordinate plane?
A: The origin is in the upper left side.

Q: You are at the top of the screen when the y-value is equal to 0. Why is this unusual?
A: Usually, the y-value increases as you move upward but on the V5 screen, the y-value increases as you move downward. But you can think of it as the y-value increasing as you move away from the origin (0, 0) at the top left of the screen.

Extend Your Learning icon Extend Your Learning

In the Rethink section's User Interface Challenge, students will be asked to develop a project that creates four buttons on the screen to control the Clawbot's claw and arm. For that challenge, they are also asked to have those four buttons shown on the screen. This Extend Your Learning, like the previous page's will help to prepare them for that challenge because the challenge has four buttons to program for and this only has two.

Have students add an event to the program so that the screen draws two visible buttons when the project runs. Suggest that students use the Help feature in VEXcode V5 for information about Events and Looks blocks, particularly the [Draw rectangle] block's information. Direct students to review how the brain's screen is organized into a coordinate system based on the number of pixels when used in the [Draw rectangle] block. They will need to understand that in order to set parameters within that block. Additionally, they will need to understand how to broadcast events. In this case, the event is drawing buttons.

Students should plan, test, and refine these changes to the project while documenting it within their engineering notebooks. For the individual engineering notebook rubric, click one of the following links (Google Doc / .docx / .pdf), or click one of the following links for team notebooks (Google Doc / .docx / .pdf).

Here is an example solution:

VEXcode V5 sample solution with two stacks of blocks side by side. The stack on the left begins with a when started block and shows a Broadcast Draw button block added to the top of the Left or right project, between the when started block and the forever loop. The stack on the right starts with a When I receive Draw Button event block followed by four Looks blocks that read Set fill color to green on Brain; draw rectangle 0, 0, 240, 240; set fill color to purple on Brain; and draw rectangle 240, 0, 480, 240 on Brain.

For an additional professionally realistic experience, have students ask their classmates for feedback on their two color choices.
Do the chosen colors make you want to use the interface, or which colors would they prefer as users?
Part of developing a great User Interface is collecting data about the User Experience, even aesthetic preferences.

<  Back Return to Labs Next  >