Student Instructions

Unit 5: Lesson 5 - Using Variables in Apps

Background

In this lesson you'll learn the next step with using variables in programs by adding them to apps. There are a few things you need to understand about where you create variables in your code and how you refer to them. In this lesson we show you how to do it and you have to debug a few problems related to common issues that newcomers have with variables.

You'll also use an if statement for the first time in this lesson in order to make a game change screens once the score reaches a certain value.

We examine the difference between the = operator and a new one ==

Vocab

• Variable Scope - dictates what portions of the code can "see" or use a variable, typically derived from where the variable was first created. (See Global v. Local)
  • Global Variable - A variable whose scope is "global" to the program, it can be used and updated by any part of the code. Its global scope is typically derived from the variable being declared (created) outside of any function, object, or method.
  • Local Variable - A variable with local scope is one that can only be seen, used and updated by code within the same scope. Typically this means the variable was declared (created) inside a function -- includes function parameter variables.

Lesson

• Simple Counter App uses a variable
• Where you create your variables matters
• Understanding variable scope - global vs. local
• Using variables in a clicker game (Apple Grab)
• Add if statements to a game
• Make your own clicker game mini-project (see activity guide below)

Resources

• Activity Guide - The Clicker Game (PDF | DOCX)

Continue

Student Instructions

Clicker Game Demo

Try out this clicker game! You'll be building your own version (with a theme you choose) at the end of the lesson.

Things That Are Familiar

You know how to build many of the components of this game already: - Multiple screens. - Buttons that change the screen when clicked. - Image that moves when you click it.

Things That Are New

• Keeping track of and displaying the changing score.
• Keeping track of and displaying the changing lives.
• Changing to the win screen if the score is 25.
• Changing to the lose screen if the lives is 0.

Student Instructions

Changing Elements on Screen

There's another way to display text in your app besides console.log and write.

There is a command called setText which will change the text of a component on screen given its id. This is a very powerful technique and one that you will use a lot. Here's what it looks like in action....

Let's do a very simple example of using setText.

Do This:

• Run the code in the app.

  Look at the code for the "upArrow" event handler and how it sets the text of the label.

• Modify the code.

  When the down arrow is clicked, set the text of the label to something else.

• GOAL:

• Your only goal is to successfully use setText in this example app.
• The app should do something similar to the animated example at right.

Once you've got it functional, click Finish to move on.

Student Instructions

All the Basics You Need

When you close these instructions, you'll get to play a little bit with the very simple app (shown at right) to demonstrate the basics of concepts involved in making the clicker game. We'll call it the Count Up/Down App. Yes, it's a boring "game," but it has all the pieces of a more sophisticated game.

This app demontrates a few new concepts. We'll step through each one, one at a time, explaining how each thing works. Along the way, we'll also encounter some common challenges, and learn how to solve them.

Do This:

• Keeping clicking the up arrow until something happens (something besides the number increasing).
• Start over.
• Click the down arrow until something happens (something besides the number decreasing).
• Start over.

Once you think you've seen all the behavior click Finish to see the first part of how this is done.

Student Instructions

Using Variables in Apps!

The example program here has a small portion of the Count Up/Down App written. Right now, what the app should do is shown in the animation to the right.

Important Concept!

This small functionality demonstrates an important concept - how to create a variable in the app and update it when an event occurs. It may seem fairly straightforward but there are some common misconceptions that we want to alert you to.

Do This: Misconception Investigation

Over the next few levels you are going to do a small investigation of two apps that do almost the same thing but one works as expected and one with a bug that demonstrates an important concept about using variables in apps. Here is what you'll do:

1. Run this app, which works properly.

   • Study the code until you think you understand what's happening.
   • Pay attention to the code that handles the up arrow being clicked.

2. Run the app on the next screen, which has a bug.

   • On the next screen we show you almost the same app, but with a subtle problem.
   • See if you can spot the difference and fix it.

3. Report what you found!

   • We'll ask you to report what you found. It's not a quiz. You can go back and forth until you spot the problem, but you should find it and be able to write what it is.

Student Instructions

Debugging Problem!

Uh oh! The code here is subtly different from the one in the previous example and now there is a problem.

Do This:

• Run the app and try it to see the problem.
• See the error.
• Note that NaN stands for "Not a Number" - why would it say this?
• Note the difference between this broken version and the previous one that worked.
• Fix the problem so that it works as before.

Student Instructions

Respond to the following questions about your investigation into the bug with the counting game. Feel free to go back and look at the game again (but do so in another tab or be sure to click "Submit" to save your work!):

• From the user's perspective, what was the difference between the first version of the game and the one with the bug?
• From looking at the code, what specifically was the difference between the two, and why is that an issue?
• How did you fix the bug?

Student Instructions

Creating Variables in the Right Place

td{ width: 400px; vertical-align: top; }

Problem: writing var count again The problem you encountered was caused by Line 4: var count = count + 1 is telling the computer to create a new variable called count inside the event handling function. So it creates a new variable, but then when trying to assign it a value it cannot compute count + 1 because count doesn't have a value anymore. We don't want a new variable; we want to reassign the value of the variable we already created in Line 1.
Solution: remove var from Line 4 Instead of trying to create a new variable inside the event handler, this code will now reference the one created in Line 1. Because we only created the variable once, all references to count refer to the same variable.

Where You Decide to Create Variables in Your Code Matters

In Javascript you have two choices:

1. Create a variable outside of any function.

2. Create a variable inside a function.

The term for this concept is "variable scope." The scope of a variable defines which parts of your code can access and modify the variable.

Understanding Variable Scope

Javascript has two scopes: global and local. Here's the difference...

Variables created within a function become local to the function. Local variables have local scope: they can only be accessed within the function. In the example to the right we say that age is "local to" someFunction which means that only code within someFunction can access and modify the value age. Code that's outside this function cannot see or use the variable. In fact, local variables are created when a function starts, and destroyed when the function is completed. Local variables only exist for the life of one function call.

Global Variables

A variable declared outside a function, becomes global. A global variable has global scope which means the variable is accessible and modifiable throughout your program by any code, and also in any function. In the example to the right we say that lives is a global variable.

Local variables are useful temporary placeholders for data that you need to perform a computation of some kind.

Often a program might have several functions that perform different but related tasks, and you'd like to reuse variable names. Since local variables are only recognized inside their functions, variables with the same name can be reused in different functions.

The best example of this is function parameters. Function parameters are a form of local variable - they get created and initialized when a function is called, they get used while the function runs, and then they get destroyed when the function completes.

Imagine if all we had were global variables. Then you could not write this code:

If all variables had to be global we'd have to invent different variable names for every function parameter in the entire program. But because the size variable is local to the function, we can re-use this handy parameter name.

Common Pitfalls with Local Variables

• The most common mistake is something you just experienced: accidentally re-creating a variable inside a function when you intended to reference a global variable.

• When you create a variable inside a function, and it happens to have the same name as a global variable, the local variable takes precedence and the function will try to use the local variable first.

Global variables are useful for keeping track of data over the lifetime of the program that's running.

If you want to keep track of some data between events, or between function calls, you want a global variable.

Where to Create Global Variables

By convention global variables are created and initialized in the very first lines of code in a program.

Common Pitfalls with Global Variables

• Because you can create a global variable anywhere in your code that is outside of a function definition, you can get yourself into trouble if you have variable declarations scattered throughout a large program. You might accidently re-create or create a new variable for a purpose you've already made a variable for.

• ADVICE: Stick to the convention: if you need a global variable in your program, create it and give it an initial value at the very top of your program. Keep all global variables in a group at the top where you can look them up.

Moving On...

Now let's practice a little bit more with variables.

For our programs coming up we're particularly interested in global variables since that gives us the ability to remember data like the score of a game over the life of a program.

Continue

Student Instructions

Make Count Down Work

You now know enough about using global variables (and some of the problems you might run into) to try it yourself.

Let's start with an easy task. Right now clicking the up arrow works as expected; clicking the down arrow does not. So...

Do This:

Make the count go down by 1 every time the down arrow is clicked

• Study how the up arrow works, and use it as an example for writing the code for the down arrow.
• Add and modify the code so that when the down arrow is clicked the count goes down.
• When you're done the app should work like the animation shown to the right.
• HINT: Don't forget to set the text of the label.

Student Instructions

Bug Squash!

This program has a bug that doesn't produce an error. It just doesn't do what's expected. The reason is a common mistake that all programmers make.

Do This:

• Run the program.
• To see the bug:
  • Click the up arrow about 5 times.
  • Click the down arrow about 10 times.
  • Click the up arrow again.
• Look at the code and fix the problem.
• Read about the common mistake by expanding the area below.
• Once you've fixed the issue, move on.

Student Instructions

Bug Squash!

This program has a few different bugs that are related to the same problem.

Do This:

• Run the program.
• To see the bug:
• Click the up arrow several times.
• Click the down arrow.
• Look at the code and fix the problem.
• Read about the common mistake by expanding the area below.
• Once you've fixed the issue, move on.

Student Instructions

Bug Squash!

This program has a few different bugs. Find them and squash them!

Do This:

• Run the program.
• To see the bug:
• Click the up arrow exactly twice.
  • Restart the program and do this a few times - you'll notice nothing happens the first time you click.
• Click the down arrow several times.
• Look at the code and fix the problem.
• Read about the common mistake by expanding the area below.
• Once you've fixed the issue, move on.

Student Instructions

Using Global Variables

You'll now look at a version of the clicker game. We've set up the basic functionality to move the apple around the screen, and have created a global variable to keep track of the score.

Do This:

Add code to update the score when the apple is clicked. Remember that you'll have to update both the global variable and the label text!

Student Instructions

Tracking Lives

In the game, the number of lives starts at 3 and decrements by 1 every time the background image is clicked. Add this functionality to your game!

Do This:

• Add your variable to keep track of lives.
• Add a click handler for the background image. ID: "background"
• When the background is clicked, decrement the number of lives by 1.

Student Instructions

Having Your App Make Decisions

Now that you have variables keeping track of useful information in an app, the next thing you probably want to do is make decisions based on their values.

For example: in the Count Up/Down App what we want to say is "if the count reaches 20 then switch screens"

NOTE: we're going to learn all about if statements later on. For now, we need just enough to make our program end. If you can understand enough to copy this example then you're good.

Add an if-statement to the event handler

We want to add an if statement into the event handler to check the value of count immediately after we update its value. Here's what the full event handler should look like:

Notice: use == to compare values. As you know the simple = means assign a value to a variable. So we need a different operator to check if one value is equal to another. That operator is the "equal equal" operator: ==.

More Explanation Below This Line

If you understand the example above and feel like you could incorporate that into the Count Up/Down app, then you you can probably continue without difficulty. You can always come back to this page if you want to read the more complete explanations.

Continue

if Statements

Most programming languages have a way to do this: to check to see if some condition is true, and if it is do something. It's called an "if statement". if statements are a big topic in and of themselves, but for now we'll just look at a simple example to meet our current needs.

Here's an example of an if statement (shown in both block and text form)

There are a couple of things happening here that we should explain.

How to Add an if Statement to Your Program

In the toolbox you'll now see an if statement. To add it to your program just drag it out. For our current program we want to check the value of count inside the up arrow event handler.

You'll notice it has an empty space where you need to insert the condition that you want to check. We'll get to that next.

The if statement defines a block of code to execute between open and closing curly braces {}.

If the condition is true then the block of code inside the curly braces is executed from top to bottom, exactly once. If the condition is false then the entire block of code is ignored.

The Operators == vs. =

= read as: "gets"

== read as: "equal-equal"

The reason why we recommended that you read = as "gets" is really to avoid confusion with the == operator, which to avoid confusion even further, many programmers read as "equal-equal".

To state what should be obvious by this point: = is for assigning a value to a variable and == is for checking or testing to see what a value is. You can probably imagine the number of mistakes that beginners might make here.

TIP: if you continue to read code "aloud" in your head using "gets" and "equal-equal" it might help you discover bugs in your code or avoid them in the first place. For example, here is an arbitrary piece of code:

code	read as
	"var a gets 7. If a equal-equal 9 then a gets 0"

Misconception Alert - Where to Put if Statements

An if statement does not constantly monitor your program checking the condition to see if it's true or false. An if statement is an instruction just like any other that gets executed line by line in order from top to bottom.

This means that you need to insert an if statement into your code at the exact place where you need the condition checked. Once the condition is checked program execution picks up at the end of the if statement and proceeds from there.

This is why we need to check the value of count EVERY time the up arrow is clicked. So that means the if statment must be written into the event handler for the up arrow, and checked after we update the value of count. Here's what the full event handler should look like:

Continue

Student Instructions

Add Your Own if Statement

In most apps you want to make decisions based on the state of some data you're keeping track of in the app.

We've modified the Count Up/Down App to add another screen. When the count reaches certain values, we'll switch screens. In the code you'll see an if statement has been added to the event handler for up arrow that states:

• If the value of count is equal to 20, then set the screen to "gameOverScreen".

Do This:

Add an if statement so that when counting down the app changes screens when the count reaches -5.

• Run the app and click the up arrow 20 times to see what happens when the if statement is triggered.
• Study the if statement for the up arrow button to see how it works.
• Add an if statement to the down arrow event handler:
  • If count is equal to -5, then set the screen to the "gameOverScreen."
• Goal: Once you're finished, clicking the down arrow in the app should work like the animation shown to the right.

Student Instructions

Add a Reset Button

In most apps you want to provide a way to start over.

To do this without having the user quit and restart your app, you need to add code to reset variables and text displays to initial values so the app can effectively start over.

We've added a button to the "gameOverScreen" in the Count Up/Down App and added an empty event handler for it.

Right now clicking the "start over" button does nothing. You will write code to make it work.

Do This:

Add code to the startOverButton event handler to reset the app.

The app should work like the animation shown to the right. Notice that when the "start over" button is clicked it goes back to the main screen and the count has been reset to 0.

The code should:

• Set the screen to the gamePlayScreen.
• Set the count variable to 0.
• Set the correct text label on the gamePlayScreen to show the count is 0.

Once you get it to work, move on.

Student Instructions

Bug Squash!

The Count Up/Down App has a bug!

A very common mistake has been introduced into the code. It's one that vexes early programmers, but we're sure you'll find it.

Do This:

• Run the program.

• To see the bug:

• Click the up arrow just once.
• Restart the program.

• Click the down arrow just once.

• Look at the code and fix the problem.

• Read about the common mistake by expanding the area below.

• Once you've fixed the issue, move on.

Student Instructions

Bug Squash!

The Count Up/Down App has a bug!

A common mistake has been introduced into the code.

It's a tricky one to find because at first it looks like everything is okay.

Do This:

• Run the program.

• To see the bug:

  • Click the up or down arrow until you get to the "gameOverScreen."
  • Click "start over."
  • Click the up or down arrow again... what the?

• Look at the code and fix the problem.

• Read about the common mistake by expanding the area below.

• Once you've fixed the issue, move on.

count = 0;
setText("countDisplayLabel", 0);

function resetAll(){
  count = 0;
  setText("countDisplayLabel", count);
  setScreen("gamePlayScreen");
}

onEvent("startOverButton", "click", 
function() {
  resetAll();
});

Student Instructions

Bug Squash!

The Count Up/Down App has a bug!

A common mistake has been introduced into the code.

We've changed the app so that it counts up and down by 3 rather than by 1.

Do This:

• Run the program.

• To see the bug:

• Click the up or down arrow trying to get to the game over screen.

• It should be impossible to get to the game over screen.

• Look at the code and fix the problem.

• Read about the common mistake by expanding the area below.

• Once you've fixed the issue, move on.

Student Instructions

Make Your Own "Clicker" Game

You will be creating your own “clicker” game similar to the Apple Grabber game you worked on in this lesson. The general object of the game is to click on an element that jumps around every time you click it. You will pick your own theme and decide what the rules are and how to keep score.

Your Main Tasks Are To:

• Pick a theme for your game and add appropriate images and styling.
• Add variables to track some data during gameplay.
• Add code to event handlers to update the variables and display appropriately.

See Activity Guide for Requirements

There is a full activity guide and rubric for this project. You can find a link to it in the student resources section for this lesson. Or ask your teacher for it.

Template

This level is a template for the app. You should run it to see what it does right now. You will modify this template, both the design elements and the code, for your project.

The template has 4 screens and some basic navigation functionality and event handlers set up for you. The game play screen uses the images from the Apple Grabber game, but you should replace these with images related to your chosen theme.

Student Instructions

AP Practice - Create PT - Choosing an Abstraction

One component of the AP Create Performance Task is creating and describing an abstraction in your program. Here's the actual prompt.

Here's one row of the scoring guide for this question

Grade the Response

Below is a segment of code from a "clicker" program with a rectangle drawn around a portion of the code identifying an abstraction.

Each row is worth one point that either can or cannot be awarded. Explain why you would or would NOT award the point for Row 7 based on the criteria given above.