# Week 3 : Quiz

##### 1. Consider a grading system where numbers are turned into letters. Fill in the blanks in the following code to complete the boolean expression.
```
var grade = random(0, 100);

if (grade&amp;gt;=90) {
text("Grade: A", 10, 50);
} else if (grade&amp;gt;=80) {
text("Grade: B", 10, 50);
} else if (grade&amp;gt;=70) {
text("Grade: C", 10, 50);
} else if (grade&amp;gt;=60) {
text("Grade: D", 10, 50);
} else {
text("You Failed!", 10, 50);
}
```
##### 2. Move a rectangle across a window by incrementing a variable. Start the shape at x coordinate 0 and use an if statement to have it stop at coordinate 100. Rewrite the sketch to use `constrain()` instead of the `if` statement. Fill in the missing code.
```// Rectangle starts at location x
var leftwall = 0;
var rightwall = 100;

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

function draw() {
background(255);

var xc = constrain(mouseX, leftwall, rightwall);

// Display object
fill(0);
rect(xc, 100, 20, 20)

}
```
##### 3. Write a program that implements the above rollover. In other words, if the mouse is over a rectangle, the rectangle changes color. Here is some code to get you started. (How might you do this for a circle?)
```var x = 50;
var y = 50;
var w = 100;
var h = 75;

function setup() {
createCanvas(200, 200);
}
function draw() {
background(140);

stroke(0);

if (mouseX>=50 && mouseX<=150 && mouseY>=50 && mouseY<=125) {
fill(0);
} else {
fill(255);
}

rect(x, y, w, h);
}
``` ##### 4. Recreate the above sketch so that the squares fade from white to black when the mouse leaves their area. Hint: you need four variables, one for each rectangle’s color.
```// 4 rectangles
var bright1 = 0;
var bright2 = 0;
var bright3 = 0;
var bright4 = 0;

function setup(){
createCanvas(320,240);
}

function draw(){
//events occuring
if (mouseX < 160 && mouseY < 120){ bright1 = 255; } else if (mouseX > 160 && mouseY < 120){
bright2 = 255;
} else if (mouseX < 160 && mouseY > 120){
bright3 = 255;
} else if (mouseX > 160 && mouseY > 120){
bright4 = 255;
}

//fade out
bright1 = bright1-2;
bright2 = bright2-2;
bright3 = bright3-2;
bright4 = bright4-2;

//rectangles
fill(bright1);
rect(0,0,160,120);
fill(bright2);
rect(160,0,160,120);
fill(bright3);
rect(0,120,160,120);
fill(bright4);
rect(160,120,160,120);

//line
stroke(255);
line(0,120,160,120);
line(160,0,160,120);
}
``` ##### 5. Recreate the above image with a for loop. Back to Top