NEW
Font size
WorksheetsInteractive Animations and Games
Total questions: 24
Worksheet time: 48mins
What does this program do?
Animates a ball by moving it down and to the right once every 20 milliseconds.
Animates a ball by moving it up and to the right once every 20 milliseconds
Animates a ball by moving it down and to the right every 20 seconds
Animates a ball by moving it up and to the right once every 20 seconds
Which of the following statements are true about ball?
I – ball is a local variable
II – the ball variable in draw is different from the ball variable in start
III – ball is a global variable
IV – ball’s scope includes both start and draw
III and IV
I and II
III only
I, II, III, and IV
The following program animates a ball by setting a timer to move the ball across the screen. We want the animation to stop whenever the user clicks the mouse:
Which statement would stop the animation in this program?
stopTimer(ball.move(2, 2));
stopTimer(draw);
stopTimer(draw());
stopTimer(draw, 20);
We extend our draw function to include:
How many times will the ball be moved before the animation stops?
20
40
2
25
Which of the following are techniques that make our code more reusable?
I – Using constants instead of magic numbers
II – Using specific values in our functions rather than using parameters
III – Writing multiple functions that solve small subproblems rather than one function that solves the entire problem.
IV – Writing as few lines of code as possible
I, II, and III
II and IV
I and III, and IV
I, II, III, and IV
Which function has better reusability?
How many circles of radius 10 will fit vertically stacked in a window that has height 100? The circles should not overlap, the bottom of one circle should touch the top of the next circle.
10
20
5
100
This is a circle on our canvas named ball. What are the coordinates of point A?
ball.getX(), ball.getY()
ball.getRadius(), ball.getY()
ball.getX(), ball.getY() + ball.getRadius()
ball.getX() + ball.getRadius(), ball.getY()
What statement should we use to determine if ball is hitting the bottom edge of the window?
How can we determine if ball’s left edge is hitting a different shape on our canvas named box?
The following code moves a ball across the screen at a rate of dx in the x direction and dy in the y direction.
What do we need to add to line 19 to have the ball bounce off the top of the window?
dy = -dy;
ball.setPosition(ball.getX(), getHeight() - ball.getRadius());
dx = -dx;
dy = -dx;
Which of the following statements will call the function paint every time the mouse is moved?
mouseMoveMethod(paint, e);
mouseMoveMethod(paint);
mouseMoveMethod(paint());
mouseMoveMethod(paint(e));
What is a callback function?
A function called at the bottom of the start function
A function passed to an event handler that is called every time a certain event happens
A function named callback
A function that is called every DELAY milliseconds
In the following statement:
mouseMoveMethod(draw);
Which part is the event handler?
mouseMoveMethod
draw
e
none
In the following statement:
mouseMoveMethod(draw);
Which part is the callback function?
mouseMoveMethod
draw
e
none
In the following code:
function start(){
mouseUpMethod(paint);
}
function paint(e){
//code to paint something on the canvas
...
}
What is the meaning of e?
e is a parameter of paint that determines what exactly will be painted
e is a parameter passed to the callback function paint that contains information about the Mouse Event, such as where on the window it occurred.
e is a variable that paint can store a shape inside of so that start can access it.
e is the callback function of paint
This code creates a new circle on the canvas every time the mouse is pressed down and the circle follows the mouse when the mouse is dragged.
But there is one problem. What is wrong with the following code?
1 var ball;
2
3 function down(e){
4 var ball = new Circle(40);
5 ball.setPosition(e.getX(), e.getY());
6 add(ball);
7 }
8 function drag(e){
9 ball.setPosition(e.getX(), e.getY());
10
11 }
12
13 function start(){
14
15 mouseDownMethod(down);
16 mouseDragMethod(drag);
17 }
Line 9 is updating the location of the ball incorrectly.
Line 6 adds a ball to the screen every time the mouse is down, but we need a ball added before any mouse events happen
Lines 15 and 16 are registering the mouse events incorrectly
Line 4 declares a new local variable var ball. The local variable ball in down is different from the global variable ball in drag, but we need these functions to be affecting the same ball
How can we fix the problem in this code from question 18? The same code is shown again for reference.
1 var ball;
2
3 function down(e){
4 var ball = new Circle(40);
5 ball.setPosition(e.getX(), e.getY());
6 add(ball);
7 }
8 function drag(e){
9 ball.setPosition(e.getX(), e.getY());
10
11 }
12
13 function start(){
14
15 mouseDownMethod(down);
16 mouseDragMethod(drag);
17 }
Change lines 15 and 16 to
mouseDownMethod(down(e));
mouseDragMethod(drag(e));
Move line 6 to line 14 so that the ball is added before any mouse events happen.
Get rid of the word var in line 4 so that the ball in down refers to the same global ball in drag rather than a local variable.
Change line 9 to
ball.move(e.getX(), e.getY());
Describe the result of the following line of code. What will happen in our program when this line is in our start function?
keyDownMethod(moveBall);
The function moveBall will be called every time the down arrow on the keyboard is pressed down.
The function moveBall will be called every time any key on the keyboard is pressed down.
The function moveBall will be called only when a key on the keyboard is held down
The function moveBall will be called once, then the program will be paused until a key is pressed.
In the following program:
var STEP = 5;
var SQUARE_SIZE = 20;
var square;
function start(){
square = new Rectangle(SQUARE_SIZE, SQUARE_SIZE);
square.setPosition(getWidth() / 2, getHeight() / 2);
keyDownMethod(down);
add(square);
}
function down(e){
if(e.keyCode == Keyboard.LEFT){
square.move(-STEP, 0);
}
else if(e.keyCode == Keyboard.RIGHT){
square.move(STEP, 0);
}
else if(e.keyCode == Keyboard.letter('R')){
square.move(0, -STEP);
}
else if(e.keyCode == Keyboard.letter('F')){
square.move(0, STEP);
}
else{
square.setColor(Randomizer.nextColor());
}
}
How can a user move the square up on the screen?
Pressing down the ‘F’ key
Pressing down the UP arrow key
Pressing down the ‘R’ key
Pressing down the LEFT arrow key
In the same program as before:
var STEP = 5;
var SQUARE_SIZE = 20;
var square;
function start(){
square = new Rectangle(SQUARE_SIZE, SQUARE_SIZE);
square.setPosition(getWidth() / 2, getHeight() / 2);
keyDownMethod(down);
add(square);
}
function down(e){
if(e.keyCode == Keyboard.LEFT){
square.move(-STEP, 0);
}
else if(e.keyCode == Keyboard.RIGHT){
square.move(STEP, 0);
}
else if(e.keyCode == Keyboard.letter('R')){
square.move(0, -STEP);
}
else if(e.keyCode == Keyboard.letter('F')){
square.move(0, STEP);
}
else{
square.setColor(Randomizer.nextColor());
}
}
What happens if the user presses the spacebar?
The program crashes because there is no event handler registered for the spacebar
The score increases
The square changes color to a random color
nothing
The following code draws stacks of alternating red and black circles across the window one at a time, filling the window from left to right.
Code:
1 var DELAY = 50;
2 var RADIUS = 20;
3 var NUM_CIRCLES = getHeight() / (2*RADIUS);
4
5 var xPosition;
6
7 function start(){
8 xPosition = RADIUS;
9 setTimer(draw, DELAY);
10 }
11
12 function draw(){
13 drawColumn(xPosition);
14
15 //your code goes here
16 xPosition = ...
17 }
18
19 function drawColumn(x){
20 //draws a column of alternating red and black circles centered at "x"
21 //don't worry about how it's implemented yet
22 ...
23 }
What should the value of xPosition be changed to on line 16 so that the next column drawn is touching the right side of the previous column?
xPosition = RADIUS;
xPosition = NUM_CIRCLES * RADIUS;
xPosition = xPosition + RADIUS;
xPosition = xPosition + 2*RADIUS;
In the code from the last question that draws columns of red and black circles across the window:
1 var DELAY = 50;
2 var RADIUS = 20;
3 var NUM_CIRCLES = getHeight() / (2*RADIUS);
4
5 function start(){
6 setTimer(draw, DELAY);
7 }
8
9 function draw(){
10 drawColumn(xPosition);
11
12 //your code from question 23 here
13 xPosition = ...
14 }
15
16 //draws a column of alternating red and black circles centered at "x"
17 function drawColumn(x){
18 for(var i = 0; i < NUM_CIRCLES; i++){
19 var circle = new Circle(RADIUS);
20 if(i % 2 == 0){
21 circle.setColor(Color.red);
22 } else {
23 circle.setColor(Color.black);
24 }
25
26 //your code goes here
27 var y = ...
28
29 circle.setPosition(x, y);
30 add(circle);
31 }
32 }
What should the value of y be on line 27 so that the first circle added is touching the top of the window, and each subsequent circle is touching the bottom of the previous circle. The circles should not overlap and there should be no space in between circles:
var y = 2 * i * RADIUS;
var y = RADIUS + (2 * i * RADIUS);
var y = 2 * (i + 1) * RADIUS;
var y = getHeight() - (2 * i * RADIUS);
Which of the following are good examples of things that should be stored as global variables?
I – The parameter e to a callback function
II – The ball in the game the user is playing
III – A counter keeping track of how many times the user has pressed the spacebar
IV – A for loop counter
V – The color of a rectangle that is only used in one function
II, III, and V
I, IV, and V
II and III
I, II, and III
