Optional Lesson: Create Your Own App

Overview

To conclude their introduction to programming, students will design an app based off of one they have previously worked on in the programming unit. Students will choose the kinds of improvements they wish to make to a past project in order to show their ability to make abstractions and implement complex algorithms. The project concludes with reflection questions similar to those students will see on the AP® Create Performance Task. Students can either complete the project individually or with a partner. Every student will need a collaborative partner with whom they will give and receive feedback.

Purpose

A skill that programmers must develop is the ability to plan and execute a project from idea all the way through shipping of a product. Some of the best apps are new ideas brought on by the past work of a programmer themselves or other programmers. In order to execute these new ideas programmers must identify the programming structures needed to implement their idea and create a project plan. Often there are deadlines on projects which require programmers to make choices about the top features which need to be in a release of a new product. Finally, programmers must be able to express to others the work they have done to create their app.

AP® is a trademark registered and/or owned by the College Board, which was not involved in the production of, and does not endorse, this curriculum.

Agenda

Getting Started

Activity

Wrap-up

Extended Learning

Assessment

View on Code Studio

Objectives

Students will be able to:

  • Complete reflection questions in a format similar to those on the AP performance tasks.
  • Collaborate to give and receive feedback on program implementation to improve program functionality.
  • Update existing code to add new functionality to a program.
  • Create a video demonstrating the functionality of a program.

Links

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

For the Students

Teaching Guide

Getting Started

Brainstorm: Programming Projects and Concepts So Far

Teaching Tip

Here is a pretty extensive list of the things students should come up with.

Programming Projects (apps) Programming Concepts
  • Digital Scene
  • Chaser Game
  • Multi-screen App
  • Clicker Game
  • Mad Libs
  • Secret Number
  • Dice Game
  • Digital Assistant
  • Coin Flipping Simulation
  • Word/Image Scroller
  • Drawing App











    • Turtle Commands
    • Functions
      • Functions with Return Values
    • Parameters
    • Looping
      • While
      • For
    • Random Numbers
    • Commenting
    • Debugging
      • Debug Console
      • Debug Commands
      • Console.log
    • Events
    • UI Elements
      • Buttons, Text Labels, Dropdowns, Images, Screens, Sounds, etc.
      • Prompt and PromptNum
    • Variables
    • Conditionals (If, Else if, Else)
      • Boolean Expressions
      • Boolean Operators (&&,

    Goal: Recall the programming projects, both large and small, done in the unit. Review how they can be used to frame the coming project as a practice for the Create Performance Task.

    Remarks

    For the project we are beginning today, you are going to create a project of your choice built on past work. Let’s make a list of all the past projects you have worked on and the programming concepts you have learned.

    Brainstorm: Divide a piece of paper in half the long way. On the left side of the piece of paper, list all the programming projects you have done so far in this unit. On the right side of the piece of paper, list all the programming concepts you have learned so far.

    Share Out: Have students share what they wrote and compile a class list of programming projects and programming concepts. Congratulate students on coming this far! That’s a lot of things they have learned!

    Activity

    Set Up

    Students can complete this project in the Projects section of Code Studio. To access this area, students click "Projects" in the menu in the top right hand of the screen. In he Projects section, students can create new projects or revisit old ones.

    Students identify target App and major components that must be programmed.

    Remarks

    For our final project of the unit you will use one of the projects we’ve done already as a point of inspiration to make something new. You may build on and add features to an app you wrote before. You may also write something completely new that you are inspired to create.

    Teaching Tip

    Complete Project Planning Guide: Students should use the Practice PT Planning Guide - Improve Your App to develop an overview description of their target app. The first thing students should do as part of planning is to...

    Read Requirements: Read through the guidelines of the project together and address any high-level questions about the aims of the project. Students will have a chance to review the requirements once they start planning.

    Assign Collaborative Partners: On the real Create Performance Task, teachers are not supposed to give much help to students. Instead students are supposed to work with a collaborative partner. Assign each student a specific person as her collaborative partner.

    Note: Students can work with a partner to create an app together. They should probably still consult with someone outside of the partnership who does not know the details of their project. This will help with the feedback process.

    Distribute: Practice PT Planning Guide - Improve Your App

    This planning guide should help students think about how to plan and execute the project. The planning guide contains a link to Practice PT Planning Guide - Improve Your App for students as well. Students should begin reviewing the project guidelines and getting down to work. This project will take some time, as it has new elements, such as a video, and it asks students to create PDF documents of their write-ups.

    A proposed schedule of the steps of this project is included below, as well as more thorough explanations of how to conduct the various stages.

    Day 1

    • Review the project guidelines and the rubric.
    • Assign students to collaborative partners.
    • Have students brainstorm and complete App Design Guide guide in Practice PT Planning Guide - Improve Your App.

    Teaching Tip

    If students are having difficulty developing their project plan, encourage them to talk with their collaboration partner. Develop the expectation that prior to asking you for help, students will have consulted one another.

    Program: Students should work individually to program their app or portion of their app. While they are responsible for writing their own code for the project, they may still consult with the other members of their class, especially their collaborative partner.

    Students individually program major components.

    Teaching Tip

    If students work in partners, they will need some way to combine their code. Possible solutions are:

    • emailing links to their individual code *creating a shared document / spreadsheet into which students can paste links Groups only need to create one program which contains all of their work. Individual group members can then “Remix” this project or just copy the code by using a link.

    Peer Consultation: After students have finished implementing a draft of their program, they should meet with their collaborative partner, present their work so far, and provide feedback regarding their progress. They should complete the Feedback Guide. Other potential questions to address: Is there anything that’s particularly clever or gives you ideas for your own project? Do you agree with the choices your partner has made? Is there anything missing?

    Day 2

    • Students begin work on programming projects.
    • Add at least one or two new features/components to the app.

    Work with classmates to give and receive feedback.

    Day 3

    • Students give and receive feedback with collaborative partner.
    • Students pick two pieces of feedback to act on and improve in their program.
    • Continue working on program.

    Teaching Tip

    Reflection Questions: Students will complete the reflection questions included in Practice PT Planning Guide - Improve Your App.

    Video Creation: Students will create a video to demonstrate the functionality of their program. The video should not be longer than 1 minute. It does not need sound.

    Video Creation - Suggested Tools:

    • Many of the short program clips of programs running throughout the curriculum were created using LiceCap, which is an easy way to create gifs of things happening on your computer - http://www.cockos.com/licecap/
    • QuickTime - You can do a screen recording with QuickTime as well. Can use QuickTime on Mac or Windows.

    Day 4

    • Students finalize their first implementation of the program.
    • Students begin their reflection questions and/or video.

    Teaching Tip

    Adding Code Segments To PDF: In order to add pictures of segments of their code, students may need to take screenshots. Below are the shortcuts for a couple different platforms for taking screenshots (a picture of part or all of the computer screen).

    Adding Shapes: One way you can add shapes to a picture is by using the drawing feature of Google Docs. Click Insert -> Drawing. Then add the image you want to put the shape on by clicking on . Then pick the shape you need from the dropdown .

    Many PDF viewers also have the ability to add simple shapes to a document. If neither of those options seems to be working for students, they can always print a copy, draw on the shapes, and scan it back in.

    Project Submission: Students will submit their projects, but they will need instructions on how to submit them as there are several different files. For the real performance task, all documents will have to be combined into a single PDF file. They need to hand in:

    • A copy of their Planning Document
    • A copy of their Feedback Guide where they got feedback
    • A separate PDF with their write-up
    • A video demo of their code
    • A copy of their code. (Note: Although they can submit their code directly through Code Studio, they will not be able to put the ovals and rectangles required for the Performance Task. Students should practice copying their code and adding those shape components to a PDF. )

    Final Submissions: Make a determination of how best students can submit final work. On the actual Performance Tasks, students will be required to submit all of their documents in a single PDF document, but it

    Students complete project reflection questions and create video.

    Day 5

    • Students complete their reflection questions and/or video.
    • Students submit their projects.

    Wrap-up

    Submit and potentially present submissions.

    Teaching Tip

    Feel free to exclude the wrap-up activities in the interest of time. Neither is an essential portion of the Performance Tasks and they are included only to provide a more natural conclusion to the project within your class.

    To make grading easier, you might have students anonymously score projects according the rubric. Both the scorer and score should be anonymous.

    Self-assess: It can be a useful exercise to have students briefly assess themselves using the rubric they were provided at the beginning of the project. Ask them to identify points where they could improve, and remind them that this rubric is very similar in structure to the one that will be used on the actual AP Performance Tasks they will see later in the year. Presentation (Optional): If time allows, students may wish to have an opportunity to share their final apps with one another. Consider options like creating a “Digital Gallery” by posting all links to a shared document.

    Presentation (Optional): If time allows, students may wish to have an opportunity to share their final apps with one another. Consider options like creating a “Digital Gallery” by posting all links to a shared document.

    Extended Learning

    Assessment

    Rubric: Use the provided rubric (in Practice PT Overview and Rubric - Improve Your App), or one of your own creation, to assess students’ submissions.

    • Basic Mechanics of Variables
    • 2
    • (click tabs to see student view)
    View on Code Studio

    Student Instructions

    What's happening in this lesson and next

    We are going to take the next two lessons to learn about how to work with variables and then incorporate them into our clicker game in order to keep score. Here's the breakdown:

    This lesson:

    • Moving memory around: Get your hands dirty with some of the basic mechanics and properties of working with variables.

    • Basic mechanics: To keep things simple we're going to complete some bare-bones examples so you get the basic ideas behind creating and using memory through variables. We'll primarily just be displaying text in the console rather than enhancing an app for now.

    • Establishing a good "mental model" for working with variables: We all want to make cool apps, but having a good mental model before you get in too deep will allow you to go further and faster later on.

    • Getting past misconceptions: Understanding the typical pitfalls of learning variables for the first time, combined with establishing a good mental model will make working with memory and variables in the future much easier.

    Next lesson:

    • Adding variables to our apps.
    • Understanding when and where and to create variables so you can use them the way you want.
    • Useful things you can do with variables in apps.
    • Making decisions based on variables.

    The Basic Mechanics of Variables

    Next section acquaints you with the bare-bones basic mechanics of using variables in programs, creating, assigning a value and displaying the value to the screen or console, so you can see what's going on.

    You will:

    • Know how to create a variable and assign it a value.
    • Know how to display to the screen.
    • Debug common problems with creation and display.

    Continue

    • Introduction to Variables - Part 1
    • 3
    • (click tabs to see student view)
    View on Code Studio

    Teaching Tip

    Discussion Goals

    Students should understand that variables hold information and an be accessed using their labels. With simple drawings, students may not see the power of variables, so you may want them to think of some different apps that they use and what information needs to be stored for the app to work, or think about a more complex program that they want to use variables for.

    Numbers, text, and colors can all go into variables, as well as more complicated data structures that students will see later in the course.

    Student Instructions

    Questions to Consider

    • What are variables used to do?
    • How do you create a variable and assign it a value?
    • What can go into a variable?
    View on Code Studio

    Student Instructions

    Variables Toolbox

    Let's get started with the most basic example of using and controlling the computer's memory with variables. The toolbox has a couple of new commands for working with variables.

    We've given you some starter code that does three things:

    1. Creates a variable called score
    2. Assigns the value 0 to score
    3. Displays the value of the score to the console (see hint below about quotes)

    Do This:

    You're going to add another variable, assign it a value, and then display it to the console. Use the starting code as a model for what you need to create now.

    • Create a new variable by dragging out the var block.
    • Change the name of the variable from the default x to lives (see animation at right).
    • Set the value of lives to be 3.
    • Add console.log messages to show the value of lives.

    The output in the debug console should look like this:

    Debugging Tip: Displaying values of variables [click to expand]

    NOTE: To print the value of a variable you should not use quotes. Notice the difference between these two statements:
    console.log("score")
    console.log(score)
    It's subtle but important:

  • When console.log sees quotation marks it thinks you want to print out the literal characters in the quotes.
  • When console.log sees something without quotation marks** it assumes you're trying to print a variable, and it goes to retrieve its value and displays that.
  • View on Code Studio

    Student Instructions

    Do This:

    We've given you some code with some errors in it. Look at the error messages and try to figure out the problem.

    • Run the program.
    • Locate and fix the error.

    When you get it right the output to the console should look like this:

    As a reminder, App Lab gives you hints about errors in two ways:

    • Hover your mouse over the yellow triangles or red squares next to line numbers in the code to see what they say.
    • As usual, the Debug Console will also tell you about any errors while your program is running.
    View on Code Studio

    Student Instructions

    Debugging Variables

    There is a simple command called write in the UI Controls toolbox that is a fast and easy way to display text in the app itself. The way you use it is very similar to console.log. Let's debug another problem only using write instead of console.log.

    You may have already run into this problem! But it's worth mentioning again. To display the value of a variable you should not use quotes. Notice the difference between these two statements - the comments next to each line explains the differences:

     write("score");  // will display the literal characters s-c-o-r-e
     write(score);    // will retrieve the value of score and display it
    

    Do This:

    To solve these problems you should only add or remove quotation marks. Run the starter code Locate and fix the problems

    GOAL: Make the app display what's shown at right by only adding or removing quotation marks from the code given.

    View on Code Studio

    Student Instructions

    Create and Assign At Once

    It's so common to want to create a variable and give it an initial value, that JavaScript has a shortcut that lets you create and assign with one line of code like this:

    You'll also see a new block in the toolbox for this (see right).

    Do This:

    We'll just quickly practice using this form of variable creation and assignment. The code you write will achieve the same thing as the previous level in fewer lines of code.

    • Create a variable called lives and assign it the value 3 using the new one-line version of this command. (See animation at right.)

    • Add console.log statements to display the value of lives just as before.

    • The output in the console should (again) look like this:

    View on Code Studio

    Student Instructions

    Give Text Mode a Try!

    The block-based mode of programming is useful for getting code into your app fast and error free. But sometimes those little tiny edits are a pain. Use text mode instead! Text mode is designed to make typing code fast and easy, and it also gives a lot of help to make your code error free.

    Let's re-create these variables again, but explore some features of text mode this time.

    Try Each of These 3 Things

    We've given you the first two lines of code in a program. Expand each box below and try what's suggested - each builds on the previous one, so you might want to go in order.

    1. Switch to text mode and try to type. [click to expand]

    Switch to text mode and type out a console.log statement to display the value of score.

    2. Drag blocks into text mode. [click to expand]

    If you don't want to type everything you can drag a block from the toolbox into text mode and it will show you the text version of it. Add code to create the lives variable and a console.log message.

    3. Check out code completion. [click to expand]

    When you type commands a tool tip pops up that tries to guess what you're trying to type. If you see what you want in the box, highlight it (you can use arrow keys) and then hit the tab key. It will auto-complete the code for you!

    View on Code Studio

    Student Instructions

    Controlling Memory - Other ways to store values

    Tip: Say "gets" instead of "equals"

    We know that the = sign, in a JavaScript statement like a = b, isn't a statement of mathematical equality. It's an instruction to move memory around. We'll talk about how to do mathematical equalities in JavaScript soon, but for now we'll just focus on the meaning of =.

    One tip is to read a statement like var score = 0 as: "The variable score gets the value 0" or maybe just "score gets 0" to be brief. Another example: a = b + 7 should be read as "a gets b plus 7"

    When you read the = sign as "gets", and say it out loud that way, you'll prevent confusing yourself, and other programmers will know what you're talking about.

    As we're about to see there are other ways to store values in variables besides just hard-coding single numbers. But in all cases, even when it's more complicated, using the word "gets" when you see a single = sign will help your mental model of what's happening.

    In the next several levels we're going to see how to:

    • Assign the result of an arithmetic expression.
    • Assign the value returned by randomNumber.
    • Assign a value given by the user through promptNum.

    Continue

    View on Code Studio

    Student Instructions

    Variables and Arithmetic Expressions

    A common thing to want to do is store the result of an arithmetic expression. The 4 basic arithmetic operations + - * / are available.

    Here is a quick table that shows the arithmetic operators with code examples [click to expand]

    operation block text example result
    add `+` `result = 7 + 3;` stores 10 in result
    subtract `-` `value = 7 - 3;` stores 4 in value
    multiply `*` `score = 7 * 3;` stores 21 in score
    divide `/` `bonus = 7 / 3;` stores 2.3333 in bonus
    parentheses none `()` `avg = (99 + 85 + 93) / 3;` stores 92.3333 in avg


    Misconception Alert

    When you have a statement like result = 5 + 7; realize that this does NOT store a mathematical expression in the variable.

    Rather, with this instruction you are asking to compute 5 + 7 and THEN store the answer (a single number) in the variable.

    Do This:

    GOAL: the goal here is mostly to acquaint yourself with typing arithmetic expressions - the answers to the questions below are less important, and should be used as interesting things to investigate.

    We've given you some starting code with 5 statements similar to ones in the table above. Add console.log or write statements to display the values of each of the variables. Experiment with arithmetic expressions, try to make really big and really small numbers.


    Things to Try: Using multiplication: what's the biggest a number you can store in a variable? * How many digits are in the biggest number before it starts using scientific notation? Using subtraction (or multiplication with negative numbers): what's the lowest number you store? (low means a negative number with a lot of digits) * Using parentheses make a crazy-big arithmetic expression.
    * NOTE: composing arithmetic expressions is much easier in text mode, and is actually almost unreadable in block mode. Try doing this in text mode.

    View on Code Studio

    Student Instructions

    Text and Variables Living Together!

    Sometimes it’s useful to display text along with the value of a variable in the same line of output. To do this you use + to attach a variable onto a literal string of characters. Here is an example:



    Notice that the + operator has two different meanings in JavaScript depending on what type of data you're applying it to. Click the explanations below for more details.

    If both operands are numbers + means to add those two numbers together.

    This is standard addition. It works both with numbers and with variables that contain numbers, as shown below.


    Because num1 is a variable that holds a number, and 10 itself is obviously a number, in this case + will do addition like you would expect.


    If either of the operands is a string + treats both as if they were strings and combines them to create a single string.

    This is potentially confusing behavior and can get pretty weird if the text looks like numbers. For example, this code will display 16100 to the screen.


    Why? Because JavaScript sees you trying to display a mix of text and variable values. "16" (in quotes) is a string of ASCII characters not a number. And so JavaScript converts everything to text, and the characters in the result of "16"+"100" comes out to "16100".


    TIP: It's common to want to sandwich a variable between some text when displaying it. You can string together multiple pieces of text and variables using the + operator. For example, you can do this:



    Misconception Alert

    The key thing to understand about the + symbol is that it can only do actual arithmetic addition if the values on either side of the + are actually numbers or variables that contain numbers.

    And if the + symbol cannot determine whether the value is a number then it assumes it's a string, and converts everything to a string and tries to concatenate it.

    The computer relies on you - the programmer - to make sure that the type of data stored in a variable is appropriate for the task at hand.


    On the next screen we'll have you play with this a little bit, but you'll write statements to display a mix of text and strings from here on out.

    Do This:

    We have given you the starting code shown below. You should modify the write statement on line 3 to combine text and variables together to make the app display a single line of text as shown.

    starting code output
    View on Code Studio

    Student Instructions

    Expressions with Variables

    Arithmetic becomes much more interesting when we use other variables in our expressions. For example you can do this:

    Mental Model ![](https://images.code.org/b4a2c125508fb06fd653b90c643cb53b-image-1447272790306.png)

    The end result of an expression with variables is the same as one without. The major difference is that values are retrieved from memory in order to do the calculation rather than simply hard-coded.

    Mental Model Check

    Watch the animation above. To compute the expression the computer will: first retrieve each of the values of the variables used in the expression; then the arithmetic expression can be evaluated; finally the computed value can be stored in memory.

    Do This:

    • Scenario: In the starting code we have provided you with variables that might be the kinds of things you would keep track of in a game: totalTime, points and lives. (see right).

    • Right now the totalScore is just set to 0. We want you to compute a final score so that the person is rewarded for having a lot of points and lives, but penalized for taking a lot of time.

    • Write an expression that calculates the player's total score and stores it in the totalScore variable. The calculation is: the player's points times lives divided by the total time.

    • For the values provided the app display should look like this:

    View on Code Studio

    Student Instructions

    Other Ways to Assign Values to Variables

    Programs become much more interesting when the values in variables change while the program is running. We can also assign to a variable the value returned by a function. For example:

    Because the randomNumber function evaluates to a number it means we can treat it as though it were a number. We've used it before by just "plugging it in" to some function that needed a number as a parameter like:

    Because the randomNumber function generates a new and different number each time you call it, one thing we could not do before we had variables was generate a random number, and use that same number for two different things in a program. Now we can.

    Do This:

    Write a program that simulates the rolling of two dice and reports their individual values as well as the sum. The program should: Generate two random numbers between 1 and 6 and store each result in its own variable. Display the individual values of the two dice. Display the sum of the two dice (see right). Every time you run the program the result will be a little different.

    We have given you starting code that shows what to do for the first die. The rest of the code is up to you! When you're done the output in the app display should look like what's above.

    View on Code Studio

    Student Instructions

    Getting User Input - A Simple Calculator

    Programs become even more interesting when we can interact with the user. A short way to ask a user for a number is with the promptNum command, which pops up a dialog box asking the user to enter a number.

    This very simple app demonstrates a new behavior: getting input from the user. You will write code to re-create this program on the next page.

    Do This:

    • Click "Run" on the app.
    • You will be prompted for two numbers, one right after the other.
    • See what happens.
    • Re-run the program and enter different numbers until you get the idea.

    Click Finish to move on.

    View on Code Studio

    Student Instructions

    Assigning User Input to Variables

    Let's use promptNum to make a simple calculator. The promptNum command appears in the variables toolbox because it's typically used as a way to get a value from the user that you want to hold on to while the program runs.

    promptNum is similar to randomNumber in that it is a function whose return value evaluates to a number. The difference here is that promptNum pops up an input dialog box and waits for the user to type a number. Once they do and hit "OK" the number they typed is returned and we can store it in a variable to use in our programs.

    Do This:

    Write a program that acts as a simple calculator. (An animation of the end result is shown at right.) Ask the user to enter a number. Then ask the user to enter a second number. Display the result of some* calculation. * The example shows division but you may choose something else if you like.

    We have given you starting code that shows you how to get the first number. The rest of the code is up to you.

    View on Code Studio

    Student Instructions

    Variable Reassignment - Part 1

    So far we have only set a variable's value once. But it's called a variable for a reason - its value can change (or vary) throughout a program. This is useful and necessary for keeping track of things like a score in a game.

    To re-assign a value to a variable all you have to do is maintain the mental model of what's happening:

    • Variables are containers for information.
    • The = sign is an instruction to set the value.
    • A series of assignment statements (see example to right) is a list of instructions to execute one at a time - it's not a series of equations that define the state of the world.

    Do This:

    • Make a prediction.

      The code on the following screen looks like what is shown at right. Study it and make a prediction about what will happen when you run the code. What will the values of a and b be at the end of the program?

    • Add console.log statements.

      Prove it to yourself by adding console.log statements at the end of the program to find out what the value of a and b are.

    • NOTICE: in the code above, after the variable a has been created using var, to change a variable's value, you only need to refer to the variable by its name. The word var only needs to be used once - when the variable is created for the first time.

    • It's a common mistake to use var everytime you want to use a variable but just remember var means CREATE a new variable. When you create a new variable it will lose its old value. We'll look at errors related to this later.

    • Introduction to Variables - Part 2
    • 17
    • (click tabs to see student view)
    View on Code Studio

    Student Instructions

    Variables - The Mental Model

    A piece of code like the one to the left can cause confusion to early programmers (but not you!). Below we show you a technique you can use to trace out what's happening in memory as you mentally go through the code line by line. Even pros do this to verify for themselves that the code is doing what they think it will. This is also a form of making a prediction which really helps you see and learn what's happening faster.

    Here's what you do. You know that the code involves two variables (or two chunks of memory) so on a piece of paper make two boxes to represent the containers for values, then fill in the containers with values as you trace out each line of code.

    Code / Instruction State of Memory (write on paper)
    Before code is executed

    Create a variable called a that gets a value of 3.

    Label one of the containers a and write 3 in the box.

    Create a variable called b and it gets a value of 7.

    Copy the current value of b into a.

    Scratch out the old value in a - its value is being changed -- write in the new value.

    Copy the current value of a (which is now 7) into b.

    NOTE: the value of a changed on the last line! So you must use the value that's currently in a for this line. Also note that even though it's the same value (7) you're still instructing the computer to put a value into memory, and the computer will just follow whatever instructions you give.



    You'll get a chance to practice this technique in the next few challenges.

    Continue

    View on Code Studio

    Student Instructions

    Variable Re-assignment - Part 2: Updating Values

    All of our examples so far have shown how to set the value of a variable by using combinations of numbers and other variables. But what if you wanted to do something like add 10 to the current value of a variable?

    Because updating the value in a variable is just moving memory around, the process has to go something like this: Read the current value of a variable. Add 10 to it. * Store the new value back into the same variable.

    The technical term for this is called variable re-assignment - when you change the value of a variable based on its current contents. To increase the value of num1 by 10 you actually need to do this:

    num1 = num1 + 10;
    

    The diagram at right shows a picture of what's happening (it assumes the value of num1 is 7 before the line is executed). It's actually very similar to what happens with plain old arithmetic: compute a value, then store it in a variable. Because the computation has to happen before storing the result in a variable, there is no contradiction here.

    Common Mistakes & Tips [click to expand]

    Mistake 1

    To increase the value of variable by 10 (for example) a common mistake is to think that this statement alone will do the trick.

    wzxhzdk:1

    It doesn't. This tells the computer to add 10 to whatever the value of `num1` is. And the computer will do that, and the result will go....nowhere. It will be lost.

    Because you are trying assign a new value to a variable it should make sense that **the = sign must be involved somehow**.

    Mistake 2

    If you were in math class this statment would make no sense: wzxhzdk:2

    But **remember to read = as "gets."** If you read the statement above as: "num1 *gets* the value of num1's current value plus 10" it might make more sense. Get in the habit of using "gets."

    Do This:

    • Make a prediction. We start you out with some code again (see below).

      Trace the code and predict what you think will be printed to the console. (NOTE: We're serious about this "make a prediction" stuff. When you force yourself to make a prediction about what code will do you will learn faster since it triggers you to apply your mental model of what's happening.)

      • Run the program to see if you were right.

      • Add a console.log statement.

    We've left you with a little bit of programming to do: add a console.log statement at the end of the program to see the last value of someNum to see if your full prediction is correct.

    View on Code Studio

    Student Instructions

    Moving Memory - Challenge 1

    The next several levels all present challenges related to "moving memory" around in your program.

    GOAL: Set the value of the variable(s) to make the console.log statement display what it's supposed to.

    Rules:

    • You may only add lines of code that re-assign values of variables provided.
    • You may only use assignment (=) and arithmetic operators (+ - * ).
    • You MAY NOT type or introduce any numbers.
    • You MAY NOT add or create any new variables.
    • You MAY NOT change or alter the console.log statement at all.

    Example:

    Code Provided


    The code you're given will have a few variables initialized to some values. The last line will be one or more console.log statements with a comment indicating what the expected value to display should be.
    A Possible Solution


    You need to add a line (or multiple lines) of code to re-assign the values in variables so the console.log statement displays what's expected. In this example we show a solution on line 5. Please note that there are several different things you could do. For example, you could go crazy and do something like: y = x + x + (x/x);. What you do is up to you.


    Try this example yourself...

    View on Code Studio

    Student Instructions

    Moving Memory - Challenge 2

    Try another one!!

    • Click through to see a new problem provided in the starter code.
    • A reminder of the rules and example are below if you need to sneak a peek.

    Reminder of the rules (click to expand)

    GOAL: Set the value of the variable(s) to make the console.log statement display what it's supposed to.

    **Rules**:

  • You may ONLY add lines of code that re-assign values of variables provided.
  • You may ONLY use assignment (=) and arithmetic operators (+ - * /).
  • You MAY NOT type or introduce any numbers.
  • You MAY NOT change or alter the `console.log` statement at all.

    Example:

    Code Provided


    The code you're given will have a few variables initialized to some values. The last line will be one or more `console.log` statements with a comment indicating what the expected value to display should be.
    A Possible Solution


    You need to add a line (or multiple lines) of code to re-assign the values in variables so the `console.log` statement displays what's expected. In this example we show a solution on line 5. Please note that there are several different things you could do. For example, you could go crazy and do something like: y = x + x + (x/x);. What you do is up to you.


  • ### Try it yourself...
    View on Code Studio

    Student Instructions

    Moving Memory - Challenge 3

    Try another one. Here is the starting code:

    var x = 2;
    var y = 3;
    // your code here
    
    console.log("The value of x is: " + x + " (x should be 7)");
    


    Reminder of the rules (click to expand)

    **GOAL:** Set the value of the variable(s) to make the `console.log` statement display what it's supposed to.

    **Rules**:

  • You may ONLY add lines of code that re-assign values of variables provided.
  • You may ONLY use assignment (=) and arithmetic operators (+ - * /).
  • You MAY NOT type or introduce any numbers.
  • You MAY NOT change or alter the `console.log` statement at all.

    Example:

    Code Provided


    The code you're given will have a few variables initialized to some values. The last line will be one or more `console.log` statements with a comment indicating what the expected value to display should be.
    A Possible Solution


    You need to add a line (or multiple lines) of code to re-assign the values in variables so the `console.log` statement displays what's expected. In this example we show a solution on line 5. Please note that there are several different things you could do. For example, you could go crazy and do something like: y = x + x + (x/x);. What you do is up to you.


  • ### Try it yourself...
    View on Code Studio

    Student Instructions

    Moving Memory - Challenge 4

    Try another one. Here is the starting code:

    var x = 2;
    // your code here
    
    console.log("The value of x is: " + x + " (x should be 8)");
    

    Reminder of the rules (click to expand)

    **GOAL:** Set the value of the variable(s) to make the `console.log` statement display what it's supposed to.

    **Rules**:

  • You may ONLY add lines of code that re-assign values of variables provided.
  • You may ONLY use assignment (=) and arithmetic operators (+ - * /).
  • You MAY NOT type or introduce any numbers.
  • You MAY NOT change or alter the `console.log` statement at all.

    Example:

    Code Provided


    The code you're given will have a few variables initialized to some values. The last line will be one or more `console.log` statements with a comment indicating what the expected value to display should be.
    A Possible Solution


    You need to add a line (or multiple lines) of code to re-assign the values in variables so the `console.log` statement displays what's expected. In this example we show a solution on line 5. Please note that there are several different things you could do. For example, you could go crazy and do something like: y = x + x + (x/x);. What you do is up to you.


  • ### Try it yourself...
    View on Code Studio

    Student Instructions

    Moving Memory - Challenge 5

    Try another one. Here is the starting code:

    var x = 2;
    var y = 3;
    var z = 0;
    // your code here
    
    console.log("The value of x is: " + x + " (x should be 3)");
    console.log("The value of y is: " + y + " (y should be 2)");
    

    HINT: (click to expand)

    Since this one requires you to change the value of two variables you need to be careful about which one you change first, since its new value will affect the next lines of code.

    You can also take advantage of the fact that since z is not used as a display value, you can use it as a temporary holding ground for one value while you change another.

    Reminder of the rules (click to expand)

    GOAL: Set the value of the variable(s) to make the console.log statement display what it's supposed to.

    Rules:

    • You may only add lines of code that re-assign values of variables provided.
    • You may only use assignment (=) and arithmetic operators (+ - * ).
    • You MAY NOT type or introduce any numbers.
    • You MAY NOT change or alter the console.log statement at all.

    Example:

    Code Provided


    The code you're given will have a few variables initialized to some values. The last line will be one or more `console.log` statements with a comment indicating what the expected value to display should be.
    A Possible Solution


    You need to add a line (or multiple lines) of code to re-assign the values in variables so the `console.log` statement displays what's expected. In this example we show a solution on line 5. Please note that there are several different things you could do. For example, you could go crazy and do something like: y = x + x + (x/x);. What you do is up to you.



    Try it yourself...

    View on Code Studio

    Student Instructions

    Moving Memory - Challenge 6

    Try another one. Here is the starting code:

    var x = 5;
    var y = 11;
    var z = 4;
    // your code here
    
    console.log("The value of x is: " + x + " (x should be 2)");
    console.log("The value of y is: " + y + " (y should be 6)");
    console.log("The value of z is: " + z + " (z should be 8)");
    

    HINT: (click to expand)

    This one requires you to be a little clever. Think about setting the value of one variable that you could then use to easily set the value of the other variables. Then the trick is to figure out how to use the variables you've been given to make that useful value.

    Reminder of the rules (click to expand)

    GOAL: Set the value of the variable(s) to make the console.log statement display what it's supposed to.

    Rules:

    • You may only add lines of code that re-assign values of variables provided.
    • You may only use assignment (=) and arithmetic operators (+ - * ).
    • You MAY NOT type or introduce any numbers.
    • You MAY NOT change or alter the console.log statement at all.

    Example:

    Code Provided


    The code you're given will have a few variables initialized to some values. The last line will be one or more `console.log` statements with a comment indicating what the expected value to display should be.
    A Possible Solution


    You need to add a line (or multiple lines) of code to re-assign the values in variables so the `console.log` statement displays what's expected. In this example we show a solution on line 5. Please note that there are several different things you could do. For example, you could go crazy and do something like: y = x + x + (x/x);. What you do is up to you.



    Try it yourself...

    View on Code Studio

    Student Instructions

    Wrapping Up Variables - This is Not Math Class

    Hopefully you now understand the gist of working with variables. The major thing to remember is that every time you see an = sign it means that you are instructing the computer to set a variable to a new value.

    The example to the right is something that definitely wouldn't make sense in math class, but you should be able to reason about it as a piece of code. Because it's code, you can also insert statements to display the value of variables as they change. You don't have to guess!

    Do This:

    • Make a prediction.

      As usual you should first look at the code given to you and reason about what it does. You should try to predict what the value of num will be after all lines have executed.

    • Insert 3 console.log statements.

      Insert console.log statements into the existing code to display each value of num immediately after it's changed. (The animation below shows how to get started.)

    • Was your prediction right?

      After you figure out the answer, if your prediction was off, try to understand why. Where was your misunderstanding?

    • Check Your Understanding
    • 27
    • (click tabs to see student view)
    View on Code Studio

    Student Instructions

    Can you figure out the values of a, b, and c?

    Using what you know about variables and re-assignment you should be able to trace this code and keep track of the values of a, b, and c as they change. You should also have a sense of any possible errors that could occur.

    Trace the code, and choose the option that correctly shows what will be displayed.

    Standards Alignment

    View full course alignment

    Computer Science Principles

    1.1 - Creative development can be an essential process for creating computational artifacts.
    1.1.1 - Apply a creative development process when creating computational artifacts. [P2]
    • 1.1.1A - A creative process in the development of a computational artifact can include, but is not limited to, employing nontraditional, nonprescribed techniques; the use of novel combinations of artifacts, tools, and techniques; and the exploration of personal cu
    • 1.1.1B - Creating computational artifacts employs an iterative and often exploratory process to translate ideas into tangible form.
    1.2 - Computing enables people to use creative development processes to create computational artifacts for creative expression or to solve a problem.
    1.2.1 - Create a computational artifact for creative expression. [P2]
    • 1.2.1A - A computational artifact is anything created by a human using a computer and can be, but is not limited to, a program, an image, audio, video, a presentation, or a web page file.
    • 1.2.1B - Creating computational artifacts requires understanding and using software tools and services.
    • 1.2.1C - Computing tools and techniques are used to create computational artifacts and can include, but are not limited to, programming IDEs, spreadsheets, 3D printers, or text editors.
    • 1.2.1D - A creatively developed computational artifact can be created by using nontraditional, nonprescribed computing techniques.
    • 1.2.1E - Creative expressions in a computational artifact can reflect personal expressions of ideas or interests.
    1.2.2 - Create a computational artifact using computing tools and techniques to solve a problem. [P2]
    • 1.2.2A - Computing tools and techniques can enhance the process of finding a solution to a problem.
    • 1.2.2B - A creative development process for creating computational artifacts can be used to solve problems when traditional or prescribed computing techniques are not effective.
    1.2.3 - Create a new computational artifact by combining or modifying existing artifacts. [P2]
    • 1.2.3A - Creating computational artifacts can be done by combining and modifying existing artifacts or by creating new artifacts.
    • 1.2.3B - Computation facilitates the creation and modification of computational artifacts with enhanced detail and precision.
    • 1.2.3C - Combining or modifying existing artifacts can show personal expression of ideas.
    1.2.4 - Collaborate in the creation of computational artifacts. [P6]
    • 1.2.4A - A collaboratively created computational artifact reflects effort by more than one person.
    • 1.2.4B - Effective collaborative teams consider the use of online collaborative tools.
    • 1.2.4C - Effective collaborative teams practice interpersonal communication, consensus building, conflict resolution, and negotiation.
    • 1.2.4D - Effective collaboration strategies enhance performance.
    • 1.2.4E - Collaboration facilitates the application of multiple perspectives (including sociocultural perspectives) and diverse talents and skills in developing computational artifacts.
    • 1.2.4F - A collaboratively created computational artifact can reflect personal expressions of ideas.
    2.2 - Multiple levels of abstraction are used to write programs or create other computational artifacts
    2.2.1 - Develop an abstraction when writing a program or creating other computational artifacts. [P2]
    • 2.2.1A - The process of developing an abstraction involves removing detail and generalizing functionality.
    • 2.2.1B - An abstraction extracts common features from specific examples in order to generalize concepts.
    • 2.2.1C - An abstraction generalizes functionality with input parameters that allow software reuse.
    2.2.2 - Use multiple levels of abstraction to write programs. [P3]
    • 2.2.2A - Software is developed using multiple levels of abstractions, such as constants, expressions, statements, procedures, and libraries.
    • 2.2.2B - Being aware of and using multiple levels of abstraction in developing programs helps to more effectively apply available resources and tools to solve problems.
    4.1 - Algorithms are precise sequences of instructions for processes that can be executed by a computer and are implemented using programming languages.
    4.1.1 - Develop an algorithm for implementation in a program. [P2]
    • 4.1.1A - Sequencing, selection, and iteration are building blocks of algorithms.
    • 4.1.1B - Sequencing is the application of each step of an algorithm in the order in which the statements are given.
    • 4.1.1C - Selection uses a Boolean condition to determine which of two parts of an algorithm is used.
    • 4.1.1D - Iteration is the repetition of part of an algorithm until a condition is met or for a specified number of times.
    • 4.1.1E - Algorithms can be combined to make new algorithms.
    • 4.1.1F - Using existing correct algorithms as building blocks for constructing a new algorithm helps ensure the new algorithm is correct.
    • 4.1.1G - Knowledge of standard algorithms can help in constructing new algorithms.
    • 4.1.1H - Different algorithms can be developed to solve the same problem.
    • 4.1.1I - Developing a new algorithm to solve a problem can yield insight into the problem.
    4.1.2 - Express an algorithm in a language. [P5]
    • 4.1.2A - Languages for algorithms include natural language, pseudocode, and visual and textual programming languages.
    • 4.1.2B - Natural language and pseudocode describe algorithms so that humans can understand them.
    • 4.1.2C - Algorithms described in programming languages can be executed on a computer.
    • 4.1.2D - Different languages are better suited for expressing different algorithms.
    • 4.1.2E - Some programming languages are designed for specific domains and are better for expressing algorithms in those domains.
    • 4.1.2F - The language used to express an algorithm can affect characteristics such as clarity or readability but not whether an algorithmic solution exists.
    • 4.1.2G - Every algorithm can be constructed using only sequencing, selection, and iteration.
    • 4.1.2H - Nearly all programming languages are equivalent in terms of being able to express any algorithm.
    • 4.1.2I - Clarity and readability are important considerations when expressing an algorithm in a language.
    5.1 - Programs can be developed for creative expression, to satisfy personal curiosity, to create new knowledge, or to solve problems (to help people, organizations, or society).
    5.1.1 - Develop a program for creative expression, to satisfy personal curiosity, or to create new knowledge. [P2]
    • 5.1.1A - Programs are developed and used in a variety of ways by a wide range of people depending on the goals of the programmer.
    • 5.1.1B - Programs developed for creative expression, to satisfy personal curiosity, or to create new knowledge may have visual, audible, or tactile inputs and outputs.
    • 5.1.1C - Programs developed for creative expression, to satisfy personal curiosity, or to create new knowledge may be developed with different standards or methods than programs developed for widespread distribution.
    • 5.1.1D - Additional desired outcomes may be realized independently of the original purpose of the program.
    • 5.1.1E - A computer program or the results of running a program may be rapidly shared with a large number of users and can have widespread impact on individuals, organizations, and society
    5.1.2 - Develop a correct program to solve problems. [P2]
    • 5.1.2A - An iterative process of program development helps in developing a correct program to solve problems.
    • 5.1.2B - Developing correct program components and then combining them helps in creating correct programs.
    • 5.1.2C - Incrementally adding tested program segments to correct, working programs helps create large correct programs.
    • 5.1.2D - Program documentation helps programmers develop and maintain correct programs to efficiently solve problems.
    • 5.1.2E - Documentation about program components, such as blocks and procedures, helps in developing and maintaining programs.
    • 5.1.2F - Documentation helps in developing and maintaining programs when working individually or in collaborative programming environments
    • 5.1.2G - Program development includes identifying programmer and user concerns that affect the solution to problems.
    • 5.1.2H - Consultation and communication with program users is an important aspect of program development to solve problems.
    • 5.1.2I - A programmer’s knowledge and skill affects how a program is developed and how it is used to solve a problem.
    • 5.1.2J - A programmer designs, implements, tests, debugs, and maintains programs when solving problems.
    5.1.3 - Collaborate to develop a program. [P6]
    • 5.1.3A - Collaboration can decrease the size and complexity of tasks required of individual programmers.
    • 5.1.3B - Collaboration facilitates multiple perspectives in developing ideas for solving problems by programming.
    • 5.1.3C - Collaboration in the iterative development of a program requires different skills than developing a program alone.
    • 5.1.3D - Collaboration can make it easier to find and correct errors when developing programs.
    • 5.1.3E - Collaboration facilitates developing program components independently.
    • 5.1.3F - Effective communication between participants is required for successful collaboration when developing programs.
    5.4 - Programs are developed, maintained, and used by people for different purposes.
    5.4.1 - Evaluate the correctness of a program. [P4]
    • 5.4.1C - Meaningful names for variables and procedures help people better understand programs.
    • 5.4.1E - Locating and correcting errors in a program is called debugging the program.
    • 5.4.1F - Knowledge of what a program is supposed to do is required in order to find most program errors.
    • 5.4.1G - Examples of intended behavior on specific inputs help people understand what a program is supposed to do.
    • 5.4.1H - Visual displays (or different modalities) of program state can help in finding errors.
    • 5.4.1J - Justification can include a written explanation about how a program meets its specifications.
    • 5.4.1L - An explanation of a program helps people understand the functionality and purpose of it.
    • 5.4.1M - The functionality of a program is often described by how a user interacts with it.
    • 5.4.1N - The functionality of a program is best described at a high level by what the program does, not at the lower level of how the program statements work to accomplish this.
    5.5 - Programming uses mathematical and logical concepts.
    5.5.1 - Employ appropriate mathematical and logical concepts in programming. [P1]
    • 5.5.1A - Numbers and numerical concepts are fundamental to programming.
    • 5.5.1B - Integers may be constrained in the maximum and minimum values that can be represented in a program because of storage limitations.
    • 5.5.1C - Real numbers are approximated by floating point representations that do not necessarily have infinite precision.
    • 5.5.1D - Mathematical expressions using arithmetic operators are part of most programming languages.
    • 5.5.1E - Logical concepts and Boolean algebra are fundamental to programming.
    • 5.5.1F - Compound expressions using and, or, and not are part of most programming languages.
    • 5.5.1G - Intuitive and formal reasoning about program components using Boolean concepts helps in developing correct programs.
    • 5.5.1H - Computational methods may use lists and collections to solve problems.
    • 5.5.1I - Lists and other collections can be treated as abstract data types (ADTs) in developing programs.
    • 5.5.1J - Basic operations on collections include adding elements, removing elements, iterating over all elements, and determining whether an element is in a collection.