Tutorial5

Learning Objectives:

1. SIMPLE Decision making
2. if statement with equal comparison
3. true, false, and null values
4. Other types of comparisons !=, >, <, >=, <=
5. Braces and scope
6. Selection box
7. Exercises

Essential Questions

1. How can I can make the computer perform decision making?
2. How can I better organize my computer code?

Try some sample code

Follow this Thimble link

1. SIMPLE Decision Making

In a computer program it is often desirable to make the computer perform comparisons or evaluations. From the results of those comparisons we will likely have different outcomes for what our program is to do. All together the comparison as well as the resulting flow of our program is done using something called an IF statement. Below is an example of an IF statement

if (temperature > 100)
{
  text("Your body temperature is over 100 degrees farenheit!",10,10);
}

The example above performs a comparison on a variable "temperature" to see if it is greater than 100. Notice there is a set of opening and closing braces {} immediately following an IF statement. The instructions inside a set of braces are only performed when the comparison evaluates as correct or TRUE. Therefore IF the value of the temperature variable is over 100 THEN the text message, "Your body temperature is over 100 degrees farenheit" will show.

2. IF statement with equal (==) comparison

You will notice that we have used the assignment operator (=) before to change the value of a variable. Computer Scientist prefer the term assignment or re-assignment of a variable. The reason is because we check for equavilence during a comparison. To avoid saying "x equals 1" sound too much like "if x equals 1" we use the previous terminology to distinguish the differences. Below is some sample code to compare if values are equal to one another

if (x == 1)
{
   text("The value of x is equal to 1",10,50);
}

Note that we can compare variables with other variables or even literals with literals. Most of the time we will compare a variable with a literal as above.

3. TRUE, FALSE and null values

The resulting values of a comparison will result in either true when a comparison evaluates as correct or false when the comparison evalutes as incorrect. The comparison below would evalute as true IF the value of x is equal to 5. Likewise if x was not equal to 5 then the resulting value would be false.

if (x == 5)
{
    text("The value of x is exactly equal to 5",10,50);
}

A variable without a pre-assigned value contains a null value. The code below will show a value of "undefined".

var x;

function setup()
{
  createCanvas(500,500);
}

function draw()
{
  background(0,0,0);
  fill(255,255,255);
  text("The value of x is: "+x,10,50);
}

We can check for undefined or null values by comparing it to null. See the sample code below.

var x;

function setup()
{
  createCanvas(500,500);
}

function draw()
{
  background(0,0,0);
  fill(255,255,255);
  if (x == null)
  {
    text("The value of x is null",10,50);
  }
  if (x == undefined)
  {
    text("The value of x is undefined",10,100);
  }
}

4. Other types of comparisons !=, >, <, >=, <=

In the previous examples we have seen two types of comparison > and ==. It turns out all of the other combinations are also available.

== is equal
!= not equal
> greater than
>= greater than or equal to
< less than
<= less than or equal to

We generally refer to the comparisons as binary comparisons because the resulting value will always result in a true or false. IF the resulting value is true our computer executes instructions in the braces to follow. IF the resulting value is false the computer bypasses the instructions.

5. Braces and scope

You will recall that when we created our own functions we used a set of braces to determine what is inside of that fucntion. Similarly when we perform a decision we are also using a set of braces to determine the number of instructions performed. The braces are necessary because we can perform any number of instructions resulting from a decision. The number of instructions performed could be 1 or 79. It really depends on our needs!

Each set of braces can be thought of as a separate program or self-contained environment. The variables in a braces can see outside of a brace but cannot see inside other braces on the same scope level.

// outer most scope (global)
var radio;

function setup()
{
  // inner scope (we say local to setup)
  createCanvas(700,300);


  radio = createRadio();
  radio.style('width', '90px');
  radio.option("dragons");

  radio.option("tigers");
  radio.position(50,70);
}

function draw()
{
  // 1st inner scope (we say local to draw)
  background(255,255,255);

  if (radio.value() == "dragons")
  {
    // 2nd inner scope (we say local to IF radio value equals dragons)
    text("The value you selected is dragons",10,10);
  }
}

6. Selection boxes

As another way of controlling data input a selection box may be used. See the following code example of a selection box.

var selectionBox;
var selectionBoxValue;

function setup()
{
  //create a drawing service 500px wide, 500px tall
  createCanvas(700,300);

  selectionBox = createSelect();
  selectionBox.position(60, 320);
  selectionBox.option("Select a fruit");
  selectionBox.option("pear");
  selectionBox.option("apple");
  selectionBox.option("grape");
  selectionBox.size(100,10);
  selectionBox.changed(selectionBoxChangeEvent);
}

function selectionBoxChangeEvent()
{
  selectionBoxValue = selectionBox.value(); 
}

In the example above, we are also introducing an extra variable which stores the value. Each time the selection box value changes the function "selectionBoxChangeEvent" is called and the instructions inside are performed. This gives us an alternative of using a variable instead of referencing directly to the selectionBox value.

7. Exercises

Question 1: Create two textboxes that will take in a username and password. When the user enters the correct username and password your program should output a message "Access granted". Incorrect passwords should also have an appropriate error message such as "Access denied". NOTE: the message "Access denied" will show until the correct password is entered.

Question 2: Create a textbox with a label to enter in the temperature. Any value entered into the textbox should be converted from Celsius to Farenheit. Provide an appropriate message stating the original and new values with units. Create a checkbox with the label "Farenheit -> Celsius". If the checkbox is ticked then the program should convert values from the textbox from Farenheit to Celsius.

Question 3: Create two textboxes that will take in 2 values. Create a selection box with 4 options: add, subtract, multiply, divide. Clicking on any of the 4 operations should perform the appropriate math operation on the two textboxes. Consider storing the result into a separate variable and output the result. The result should contain sufficient detail as follows, "The sum of 4 and 5 is 9"

Question 4: Create a radio box with 5 options that will simulate the answers of a multiple choice question. You must create both the question and the answers. When the correct radio choice is selected your program should report a "correct" message. Incorrect responses should also be reported.

Question 5: Create an input box and label for the user to type in their grade out of 100%. Your program is to report their associated letter grade as follows.

Additional Coding Requirements