Introduction to Computer Programming Quiz Answers

Get All Week Introduction to Computer Programming Quiz Answers

Introduction to Computer Programming Week 01 Quiz Answers

Quiz 1: Getting started with P5.js

Q1. JavaScript is a…?

library
programming language
code editor
operating system

Q2. P5.js is a…?

code editor
library
operating system
programming language

Q3. Where is JavaScript predominately used?

building web applications and interactive websites
performance computing applications
desktop applications
low level system code

Q4. In programming what is a command?

an application on your computer to run your code in
a p5.js function
a single programming instruction issued to the computer to do something
changes your code into binary so the computer can understand it.

Q5. In programming, what is a library?

a collection of code written by someone else to speed up our development.
help pages for a programming language.
the collection of commands a programming language understands.
the files currently open in a code editor.

Q6. Select all the answers you think are correct.

P5.js has commands for…?

Hint: Use the P5.js reference page to help you.

drawing primitive shapes
Matrix transformations
3d drawing
loading a displaying images
text and typography
mobile accelerometer events
user interaction with the mouse and keyboard
interacting and manipulating the webpages DOM
loading and playing sound

Quiz 2: 2D coordinate system

Q1. What is the P5.js command for a new canvas?

CreateCanvas()
createCanvas()
CanvasCreate()
canvasCreate()

Q2. What is a pixel?

a colour value
a command
the smallest rectangle you can draw in p5.js
the smallest addressable point on the canvas or screen

Q3. The coordinates (0,0) represent which corner of the canvas?

bottom right
top right
top left
bottom left

Q4. The x coordinate represents the number of pixels:

across the canvas from right to left
down the canvas from top to bottom
across the canvas from left to right
up the canvas from bottom to top

Q5. The y coordinate represents the number of pixels:

up the canvas from bottom to top
across the canvas from left to right
down the canvas from top to bottom
across the canvas from right to left

Q6. In a coordinate pair, such as (400,300), which coordinate is first?

the y coordinate
the x coordinate

Q7. Which coordinate system is used by the canvas?

curvilinea coordinates
polar coordinates
a number line
Cartesian coordinates

Q8.How will the following rectangle be drawn to the canvas?
rect(100, 200, 150, 300);

at x coordinate100, a y coordinate 200, with a height of 150 and width of 300
at y coordinate100, an x coordinate 200, with a width of 150 and height of 300
at y coordinate100, an x coordinate 200, with a height of 150 and width of 300
at x coordinate100, a y coordinate 200, with a width of 150 and height of 300

Introduction to Computer Programming Week 02 Quiz Answers

Quiz 1: RGB colours

Q1. What color does the following RGB color value represent?

(255,255,255)

White
Black

Q2. In RGB colors if all 3 values are the same what do we know for definite about the color?

It is a greyscale color.
None of the above.
It is a shade of brown.
It will be red.

Q3. What color is represented by the following RGB value?

(255,255,0)

magenta
purple
yellow
not a valid color value

Q4. What color is represented by the following RGB value?

(0,256,256)

yellow
cyan
not a valid color value
magenta

Q5. What color is represented by the following RGB value?

(140, 0, 255)

Hint: You might want to use an online color picker to help you.

not a valid color value
purple
orange
brown

Q6. What RGB value represents the following color?

(255,150,0)
0,255,127
(0,127,0)
(150,150,150)

Q7. An RGB color value takes 24 bits of computer memory, 8 bits (or one byte) for red green, and blue. How many colors does this mean we can store overall?

167772160
256
3
16777216

Q8. How many possible values are there for one byte of information?

256
255
16777216
2

Quiz 2: setup, draw, and Programme Flow

Q1. When is the setup() function called?

at the end of the program execution
at the start of the program execution
every frame of animation
once every CPU cycle

Q2. When is the draw() function called?

every frame of animation
at the end of the program execution
at the start of the program execution
once every CPU cycle

Q3. Where would you normally call createCanvas()?

in the draw() function
in another function
above the setup() function
in the setup() function

Q4. Look at the following code carefully. What do you expect to see drawn to the screen when the application runs?

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

function draw()
{

fill(255, 0, 0);
rect(100, 100, 200, 200);

none of the other options
a blue square with the red square partially visible underneath which is appearing as a purple colour.
a blue square with a smaller red square overlapping it’s top left corner
a blue square only

Q5. Look at the following code carefully. What do you expect to see drawn to the screen when the application runs?

function setup()
{
createCanvas(500, 500);
}
function draw()
{
fill(255, 0, 0, 255);
rect(100, 100, 200, 200);
fill(0, 0, 255, 100);

none of the other options
a blue square with a smaller red square overlapping its top left corner
a blue square with the red square partially visible underneath which is appearing as a purple colour
a blue square only

Q6. Look at the following code carefully. What do you expect to be drawn to the screen when it runs?

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

fill(0, 0, 255);
rect(100, 100, 300, 300);

a blue square with the red square partially visible underneath which is appearing as a purple colour.
a blue square with a smaller red square overlapping its top left corner
a blue square only
none of the other options.

Q7. Consider the following code carefully. What is displayed to the screen when the program is run?

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

fill(0, 0, 255);
rect(100, 100, 300, 300);

Hint: imagine the program has been running for a few seconds and base your judgment on draw having been run several times.

a blue square with rounded corners
a blue square with a thick black outline.
none of the other options
a blue square with a thin black outline

Q8. Consider the following code carefully. What is displayed to the screen when the program is run?

function setup()
{
createCanvas(500, 500);
}
function draw()
{
noStroke();
fill(255, 0, 0, 255);
rect(100, 100, 200, 200);

Hint: If there is some code you don’t recognise. Do not forget you can look it up in the p5.js reference.

a blue square with a red square overlapping it’s top left corner
a red square only, with no outline
none of the other options
the outline of 2 overlapping squares

Quiz 3: ellipse, rectangle, line, triangle, point

Q1. How many arguments does the point() function take?

Hint: Arguments are the numbers in brackets at the end of the function call separated by commas.

Q2. Which of the following commands draw the line in the picture below? Two of the answers below are correct, select them both.

Hint: Don’t worry about the precise coordinates try and work out the rough direction of the line.

line(320, 80, 100, 250);
line(100,320,80,250);
line(100, 80, 320, 250);
line(320, 250, 100, 80);

Q3. Which of the following commands drew the shape in the picture below?

ellipse(200, 150, 100, 50);
oval(200, 150, 100, 50);
ellipse(100,50, 150, 200);
oval(100, 50, 150, 200);

Q4. Which of the following commands turns the shape green?

flood(0,255,0)
background(0,255,0)
fill(0,255,0)
stroke(0,255,0)

Q5. Which of the following commands draws a square to the screen?

rect(100,100, 50, 100);
rect(100, 50, 50, 100);
rect(100, 50, 100, 50);
rect(100, 100, 100, 100)

Q6. Do the following two triangle commands draw the same triangle or a different triangle?

12
triangle(100,100,150,50,200,100);
triangle(150,50,200,100,100,100);

the same triangle
a different triangle

Q7. The code below draws the triangle as shown in the first image. what is the smallest number of arguments used in the triangle function call do you need to change to draw the triangle in the second image?

123456789
function setup() {
createCanvas(400, 400);
}

function draw() {
background(0);
fill(200,0,0);
triangle(100,100,150,50,200,100);
}
first image:

second image:

Hint: The bases of the triangles are the same.

Q8. Which of the following shapes can you not draw with a single P5.js command?

circle
isosceles triangle
star
square

Quiz 4: Using the console and debugging syntax errors

Q1. Where do you find the console?

in the operating system terminal or command prompt
in the Brackets editor,
you have to download a separate application
in the browser’s developer settings

Q2. Look at the following error. Where is the error in the code?

on line 8 of the sketch
on line 31 of the P5.js library
in the HTML file
somewhere else

Q3. What kind of error or error is included in the following code?

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

function draw()
{
triangle(100, 100, 150, 100);
}

a syntax error
a semantic error
an argument error
there are no errors

Q4. What kind of error is included in the following code?

123456789
function setup()
{
createcanvas(500, 500);
}

function draw()
{
rect(100, 100, 150, 100);
}

argument error
there is no error
syntax error
semantic error

Q5. What kind of error is included in the following code?

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

function draw()
{
rect(100, 100, 150, 100);

an argument error
a syntax error
there are no errors
a semantic error

Introduction to Computer Programming Week 03 Quiz Answers

Quiz 1: Built-in Variables: mouseX, mouseY, and Events

Q1. Which of the following variables represents the mouse’s Y coordinate?

mouseY
Ymouse
MouseY
yMouse

Q2. Which of the following statements best represents what a variable is?

A variable is a placeholder for a value you can use in your code.
Variables are values built in to a library.
A variable choses which code to run.
Variables are built in to the computers hardware.

Q3. Study the following code carefully. What is visible on the canvas when the program executes?

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

function draw()
{
fill(0, 0, 220);
rect(100, 100, 300, 300);
background(0, 0, 0);

the code contains an error
a black background with a blue square in the centre
a black background
a black background with a blue square towards the bottom right corner

Q4. What is displayed on the screen when the following code is executed?

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

function draw()
{
background(0, 0, 0);
fill(220, 0, 220);
noStroke();

a black background only
a purple square filling the canvas
a purple square in the top left corner of the canvas
The code includes an error.

Q5. What does the following code draw to the screen?

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

function draw()
{
background(0, 0, 0);
noStroke();
fill(220, 0, 220);

a black background only
a purple square filling the canvas
the code includes an error
a purple square in the top left corner of the canvas with a black background

Q6. What does the following code draw to the screen?

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

function draw()
{
background(0, 0, 0);
noStroke();
fill(220, 0, 220);

a purple square that increases and deceases in size as the user moves the mouse across the screen
a purple square that increases and deceases in size as the user moves the mouse down or up the screen
a purple rectangle that increases and deceases in size as the user moves the mouse in any direction
a black background

Q7. What value is stored in mouseX?

mouseX is not a p5.js builtin variable
a number that represents the mouse’s location across the screen
the mouse cursor image
a number that represents the mouse’s location down the screen

Q8. When is the keyPressed() function called?

After a key has been released
after a key has been depressed

Q9. When is the mousePressed() function called?

Hint: You may want to read the p5.js documentation.

when the left mouse button has been pressed
when the right mouse button has been pressed
when the left mouse button has been released
when either mouse button has been pressed

Q10. What colour is the ellipse drawn in the following code after the mouse has been pressed and released?

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

function draw()
{
fill(255, 0, 0);
rect(100, 100, 300, 300);

red
blue

Quiz 2: Create your own variables: var, initialising and assigning

Q1. A variable name cannot start with…?

a number
an underscore
an upper case letter
a lower case letter

Q2. Which of the following variables are valid names? (Three are correct.)

myVar!
myVar
my_var1
var
_1myVar
1myVar

Q3. Formally, creating a variable is called?

claiming
declaring
calling
initialising

Q4. Formally, assigning a variable its first value is called?

calling
initialising
claiming
declaring

Q5. What does a equal at the end of executing the following code?

1234
var a = 3;
var b = 23;
var c = b;
a = c;

23
The code contains an error.
3

Q6. What does the variable ‘a’ equal at the end of the setup() function in the code snippet below?

1234567
var a = 0;

function setup()
{
createCanvas(400, 200);
a = width;
}

200
The code contains an error.
0
400

Q7. What does the variable ‘a’ equal at the end of the setup() function in the code snippet below?

1234567
var a = 0;

function setup()
{
createCanvas(400, 200);
a(height);
}

The code contains an error.
0
400
200

Q8. True or False: JavaScript variables can be created without the var keyword?

True
False