All Weeks Programming Foundations with JavaScript, HTML and CSS
Table of Contents
Programming Foundations with JavaScript, HTML and CSS Week 1 Quiz Answers
Using HTML – Formatting Text Quiz Answers
Q1. Consider the following simple HTML file shown below.
<html>
<title> Birds </title>
<body>
<h1> Eagles </h1>
</body>
</html>Which of the following choices is the most likely for how this file would be displayed as a web page?
Answer:
Q2. Consider the following line from a web page:
Time for Back to School, SALES GALORE!, Coupons online, open early
As you can see, “Back to School,” is shown in bold, “SALES GALORE!” is shown in bold and italics, and “Coupons online,” is also shown in bold. The rest of the words have no bold or emphasis.
Which of the following is the HTML to generate this line?
Answer:
<p> Time for <b> Back to School,
<em> SALES GALORE! </em> ,
Coupons online, </b>
open early </p>Q3. Consider the following HTML segment for a web page.
Which one of the following shows how this HTML segment is displayed on a web page?
Answer:
Q4. Consider the following HTML that is showing just the body HTML code for a website with line numbers.
The webpage is displayed as
But the intended webpage should be displayed as
Which one of the following best describes how to fix the html so the web page is displayed as intended?
- The tag </h1> should be placed at the end of line 6
- The tag <h1> should be placed at the end of line 7.
- The tag <h1> should be placed at the end of line 6.
- The tag </h1> should be placed at the end of line 7.
Q5. Which one of the following HTML tags is NOT a metadata element?
- <head>
- <html>
- <h3>
- <title>
Q6. Consider the following HTML segment for a web page.
Which one of the following shows how this HTML segment is displayed on a web page?
Answer:
Q7. Consider the following phrase that is displayed on a web page:
Which one of the following is HTML that results in this phrase displayed?
Answer:
Programming Foundations with JavaScript, HTML and CSS Week 1 Quiz Answers
Styling with CSS Quiz Answer
Q1. You are planning to add CSS to a web page that was written with HTML and has lists on the page. What new formatting option will you gain by including CSS?
- Create a list with bold text.
- Change the color of all lists to a different color easily.
- Nest a list inside another list.
- Add links to words in the list.
Q2. You are planning to add CSS to a web page that was written with HTML and has images on the page. What new formatting option will you gain by including CSS?
- Put an image into a cell in a table.
- Insert an actual image into the web page instead of just a link to an image somewhere else on the web.
- Change the size of all the images on a web page to the same size.
- Make it possible to click on an image and go to another website.
Q2. Using CSS, which one of the following is the correct way to change the h2 header to be blue and underlined?
Answer:
h2 {
color : blue;
text-decoration: underline;
}Q4. Consider the following lists created with HTML.
Which of the following CSS choices will turn only the list items for Vegetables (both broccoli and spinach) to green as shown below?
Answer:
ul li {
color : green ;
}Q5. Suppose I already have a particular list in a table and I want to center this list using CSS. In the HTML file for each of the list items in this list I write the following (with text-here replaced by the actual item for the list item).
Answer: In your web page’s CSS, you need to add:
.abc {
text-align: center;
}Programming Foundations with JavaScript, HTML and CSS Week 1 Quiz Answers
Designing a Web Page with HTML and CSS Quiz Answers
Q1. Consider the following HTML markup for a table:
<table>
<tr> <th> AAA </th>
<td> EEE </td> </tr>
<tr> <th> OOO </th>
<td> III </td> </tr>
</table>
Which one of the following shows how this HTML will be displayed on a web page?
Answer:
Q2. Consider the following HTML:
<html>
<head>
<title> Hello Beautiful World </title>
</head>
<body>
<h2> What a great world we live in! </h2>
<h1> Hello everyone! </h1>
</body>
</html>Which of the following could represent the way this HTML would be displayed on a web page?
Answer:
Q3. Consider the following HTML to display a list:
<ul>
<li> AAA </li>
<li> BBB </li>
<ul> <li> CCC </li>
</ul>
<li> DDD </li>
<ul> <li> EEE </li>
<li> FFF </li>
</ul>
<li> GGG </li>
</ul>Which one of the following represents how this list would be displayed on a web page?
Answer:
Q4. A friend of yours is trying to write a list that displays on a browser like this:
Instead, your friend’s list displays like this:
Here is a copy of your friend’s HTML.
<ul>
<li> AAA </li>
<li> BBB </li></li>
<li> CCC <li>
<li> DDD </li>
<li> EEE </li>
</ul>Question 4
A friend of yours is trying to write a list that displays on a browser like this:
Instead, your friend’s list displays like this:
Here is a copy of your friend’s HTML
<ul>
<li> AAA </li>
<li> BBB </li></li>
<li> CCC <li>
<li> DDD </li>
<li> EEE </li>
</ul>While there are a couple errors in the HTML and some odd formatting, there is only one error causing the problem of the blank bullet point. What is the error?
- There is a blank line between the list items for “CCC” and “DDD.”
- There is a missing slash in the list item ending tag of list item “CCC.”
- There is a tab between the list items for “BBB” and “CCC.”
- There is an extra ending list item tag after “BBB.”
Q5. What is the difference between the two HTML table tags: <th> and <td> ?
- The <th> tag bolds a table data item, and the <td> tag does not.
- The <th> tag can only be used to hold text in a table cell, whereas the <td> tag can be used hold many different types of things (text, images, links, lists, etc.) in a table cell.
- The <th> tag displays the data item using Helvetica font, and the <td> tag displays the data item using a Courier font.
- The <th> tag identifies items that are hidden, and the <td> tag identifies items that are displayed in the table.
Q6. What is the difference between the CSS “id=” and “class=” in an HTML tag?
- The “id=something” can be used to style one HTML element, whereas the “class=something” could be used to style multiple elements.
- They both work the same way.
- The “class=something” can be used to style one HTML element, whereas “id=something” could be used to style multiple elements.
- When using “id=”, it is also required to include “class=”. The “id=” must come first.
Q7. If the blue part of a RGB value were set to 0, how many color choices would you still have available by changing the other components of the RGB value?
- 2
- 512
- 256
- 65,536
Q8. Which of the following are valid hexadecimal digits? (Check all that apply.)
- C
- L
- 3
- -2
Q9. The RGB color corresponding to (222,184,135) also has the name BurlyWood. Is the following statement true or false? Any RGB value has a name you can use instead of numbers.
- True
- False
Q10. Which of the following are valid RGB colors on a computer? (Each option below is a collection of three values for red, green and blue, respectively. Check all that apply.)
- (0, 0, 0)
- (3, 30, 300)
- (-50, 150, 50)
- (60, 85)
- (8, 108, 208)
Programming Foundations with JavaScript, HTML and CSS Week 2 Quiz Answers
Solving Programming Problems
Q1. How does solving a programming problem usually start?
- By writing a program
- By formulating a clear problem statement
- By learning a programming language
- By asking for programming help from others
Q 2. A crucial component of problem-solving is to understand the precise task you want to accomplish. Which two strategies best support this practice?
- Write the pseudocode as a comment in your script.
- Work a smaller example by hand.
- Write down the exact steps you take to solve an instance of the problem.
- Work the largest example you can manage by hand.
- Write code for your best guess for how the problem can be solved.
Q 3. You have a problem statement and begin step one of the seven step process. You attempt to work an example by hand and find it difficult. What are the two most likely reasons?
- The problem statement is unclear.
- You need to find patterns.
- You need domain knowledge.
- The algorithm does not work for every instance.
- There is a bug in your code.
Q 4. Which step comes immediately after Find Patterns in the seven-step process?1 point
- Check By Hand
- Translate To Code
- Work Example By Hand
- Run Test Cases
Programming Foundations with JavaScript, HTML and CSS Week 2 Quiz Answers
Variables, Methods and Functions
Q1. Consider the following code that declares two variables x and y.
var x = 8 ; var y = 4 ; x = 3 ; y = 2 + x ; print(y);
Which one of the following is the correct value printed out when this code runs?
- 4
- 13
- 10
- 5
Q2. Consider writing a function named phrase3words that puts three words together into a phrase that is of type string with blanks between the words. The function phrase3words has three parameters named value1, value2 and value3. This function concatenates the words together into one string that has value1 first, followed by a blank, followed by value2, followed by a blank, and followed by value3.
For example, the call phrase3words(“smile”,”at”,”everyone”) would calculate and return the string “smile at everyone”.
The function phrase3words has been started below for you but is missing code where it says [code here].
function phrase3words(value1, value2, value3) { var answer = [code here] ; return answer; }
Which one of the following is the correct code to replace the line containing [code here] ?
- var answer = value1 ” ” value2 ” ” value3 ;
- var answer = value1 + ” ” + value2 + ” ” + value3 ;
- var answer = value1 + value2 + value3 ;
- var answer = “ “ + value1 + ” ” + value2 + ” ” + value3 ;
Q3. Consider a function named phrase3words that puts three words together into a phrase that is of type string with blanks between the words. The function phrase3words has three parameters named value1, value2 and value3. This function concatenates the words together into one string that has value1 first, followed by a blank, followed by value2, followed by a blank, and followed by value3.
For example, the call phrase3words(“smile”,”at”,”everyone”) would calculate and return the string “smile at everyone”.
Consider the following code that uses the phrase3words function.
var result1 = phrase3words(“smile”,”at”,”everyone”); var result2 = phrase3words(“everyone”,”wave”, “back”); var result3 = phrase3words(“that”, “might”, “make”); var result4 = phrase3words(result1, result3, result2); print(result4);
Which one of the following is the phrase that is printed when this code runs?
- smile everyone that
- smile at everyone everyone wave back that might make
- smile at everyone that might make everyone wave back
- smile that everyon
Q 4. Consider a function named reformatName that puts a name together in a specific format. The function reformatName has two parameters named first and last, representing the first and last names. This function puts the names together into one string that has the last name first, followed by a comma and blank, and then followed by the first name.
For example, the call reformatName(“Susan”, “Rodger”) returns the string “Rodger, Susan”, and the call reformatName(“Robert”, “Duvall”) returns the string “Duvall, Robert”.
Which one of the following is NOT a correct implementation of this function?
- function reformatName(first, last) { var name = last + “, ” ; name = name + first ; return name; }
- function reformatName(first, last) { var name = last + “, ” + first ; return name; }
- function reformatName(first, last) { return last + “, ” + first; }
- function reformatName(first, last) { var name = last + “, ” ; name = first + name ; return name; }
Q 5. Consider writing a function named numberPixels that calculates the total number of pixels in an image. The function numberPixels has one parameter named namefile, which is a string that is the name of an image file. This function calculates and returns the total number of pixels in the specified image filename.
For example, consider the image named chapel.png that has 231 pixels in width and 308 pixels in height. The call numberPixels(“chapel.png”) returns 71148.
This function has been started for you and has missing code:
function numberPixels(namefile) { var someImg = new SimpleImage(namefile); var height = someImg.getHeight(); // missing code }
Which one of the following has the correct missing code so that the function numberPixels works correctly?
- var width = someImg.getWidth(); var total = height * width: return total;
- var width = someImg.getWidth(); return total; var total = height * width;
- var width = someImg.getWidth(); var total = height * width;
- var total = height * height; return total;
Q 6. Consider writing a function named perimeter that calculates the number of pixels in the perimeter of an image. The perimeter is the number of pixels on the edge of the image, from all four sides. The function perimeter has one parameter named imageName, which is a string that is the name of an image file. This function calculates and returns the perimeter in the specified image filename.
For example, the image “rodger.png” has 315 pixels in width and 424 pixels in height. That means it has 315 pixels on the bottom, 315 on the top, 424 on the right side and 424 on the left side. The perimeter of this image is 315 + 315 + 424 + 424 = 1478. The call perimeter(“rodger.png”) returns 1478.
Which one of the following is NOT a correct implementation of this function?
- function perimeter(imageName) { var someImg = new SimpleImage(imageName); var value = 2 * (someImg.getHeight() + someImg.getWidth()); return value; }
- function perimeter(imageName) { var someImg = new SimpleImage(imageName); var height = someImg.getHeight(); var width = someImg.getWidth(); var value = height + height + width + width; return value; }
- function perimeter(imageName) { var someImg = new SimpleImage(imageName); var value = 2 * (someImg.getHeight() * someImg.getWidth()); return value; }
- function perimeter(imageName) { var someImg = new SimpleImage(imageName); var value = 2 * someImg.getHeight() + 2 * someImg.getWidth(); return value; }
Q 7. Consider writing a function named printPixel that prints the red, blue and green values of a pixel, in that order, one on each line, and identifies each one. The function printPixel has three parameters, namefile, which is a string that is the name of an image file, and xpos and ypos that are numbers representing the x and y coordinates of the pixel location. Consider using the SimpleImage methods getRed, getGreen, and getBlue. Since this function is printing values, it does NOT need a return statement.
Consider the call: printPixel(“drewgreen.png”,10, 10);
Note that in the image drewgreen.png, Drew is standing in the middle and the background is bright green. So the pixel at (10,10) is near the edge and is bright green. For its red, green and blue values, it has all green (255), no blue (0) and only a tiny bit of red (1). The corresponding output should be:
red is 1 green is 255 blue is 0
This function has been started for you and has missing code:
function printPixel(nameImage, xpos, ypos) { // missing code }
Which one of the following has the correct missing code so that the function printPixel works correctly and displays the output in the format above?
- function printPixel(nameImage, xpos, ypos) { var someImage = new SimpleImage(nameImage); print(someImage.getRed(“red is “, xpos, ypos)); print(someImage.getGreen(“green is “, xpos, ypos)); print(someImage.getBlue(“blue is “, xpos, ypos)); }
- function printPixel(nameImage, xpos, ypos) { var someImage = new SimpleImage(nameImage) ; print(“red is “); print(someImage.getRed(xpos,ypos)); print(“green is “); print(someImage.getGreen(xpos,ypos)); print(“blue is “); print(someImage.getBlue(xpos,ypos)); }
- function printPixel(nameImage, xpos, ypos) { var someImage = new SimpleImage(nameImage); print(someImage.getRed(xpos,ypos)); print(someImage.getGreen(xpos,ypos)); print(someImage.getBlue(xpos,ypos)); }
- function printPixel(nameImage, xpos, ypos) { var someImage = new SimpleImage(nameImage) ; print(“red is ” + someImage.getRed(xpos,ypos)); print(“green is ” + someImage.getGreen(xpos,ypos)); print(“blue is ” + someImage.getBlue(xpos,ypos)); }
Q 8. Write a function named sumPixel that calculates and returns the sum of the red, blue and green values of a pixel. The function sumPixel has three parameters, namefile, which is a string that is the name of an image file, and xpos and ypos that are numbers representing the x and y coordinates of the pixel location.
Consider the image drewgreen.png. The pixel at location (250,500) has red component 102, green component 90 and blue component 80. The call sumPixel(“drewgreen.png”, 250, 500) should return 102+90+80 = 272.
Which one of the following is the correct code for sumPixel?
- function sumPixel(nameOfImage, xpos, ypos) { var theImage = new SimpleImage(nameOfImage) ; var answer = theImage.getRed(xpos,ypos) * theImage.getBlue(xpos,ypos) * theImage.getGreen(xpos,ypos); return answer; }
- function sumPixel(nameOfImage, xpos, ypos) { var theImage = new SimpleImage(nameOfImage) ; var answer = theImage.getRed(xpos,ypos); answer = theImage.getBlue(xpos,ypos); answer = theImage.getGreen(xpos,ypos); return answer; }
- function sumPixel(nameOfImage, xpos, ypos) { return theImage.getRed(xpos,ypos) + theImage.getBlue(xpos,ypos) + theImage.getGreen(xpos,ypos); }
- function sumPixel(nameOfImage, xpos, ypos) { var theImage = new SimpleImage(nameOfImage) ; var redNumber = theImage.getRed(xpos,ypos); var blueNumber = theImage.getBlue(xpos,ypos); var greenNumber = theImage.getGreen(xpos,ypos); return redNumber + blueNumber + greenNumber; }
Programming Foundations with JavaScript, HTML and CSS Week 2 Quiz Answers
Loops and Conditionals
Q 1. Consider writing code that turns the red part of every pixel in “chapel.png” to the highest red value possible. The image changes from the picture on the left to the redder picture on the right.
The code has been started below but has missing code.
var image = new SimpleImage(“chapel.png”);
// missing code
print(image);
Which one of the following is the best choice for the correct missing code to turn the chapel red?
- for (var pixel of image.values()) { pixel.setRed(255); }
- for (var pixel of image.values()) { pixel.setRed(200); pixel.setBlue(0); pixel.setGreen(0); }
- for (var pixel of image.values()) { pixel.setRed(100000); }
- for (var pixel of image.values()) { var number = pixel.getRed(); pixel.setRed(number + 20); }
Q 2. Consider writing code that starts with the image “chapel.png” shown below on the left and removes all the red from the image, resulting in the picture on the right below.
The code has been started below but has missing code.
var image = new SimpleImage(“chapel.png”);
// missing code
print(image);
Which one of the following is the best choice for the correct missing code to remove all the red from the image?
- for (var pixel of image.values()) { var red = pixel.getRed(); pixel.setRed(red – 100); }
- for (var pixel of image.values()) { pixel.setRed(0); }
- for (var pixel of image.values()) { var red = pixel.getRed(); pixel.setRed(red – 200); }
- for (var pixel of image.values()) { var red = pixel.getRed(); pixel.setRed(red – 1000); }
Q 3. Consider writing code that starts with the image “eastereggs.jpg” shown below on the left and replaces all the red pixel values higher than 70 with 70, resulting in the picture on the right below.
The code has been started below but has missing code.
var image = new SimpleImage(“eastereggs.jpg”);
// missing code
print(image);
Which one of the following is the best choice for the correct missing code to replace all the red values higher than 70 with 70?
- for (var pixel of someImage.values()) { pixel.setRed(70); }
- for (var pixel of someImage.values()) { if (pixel.getRed() < 70) { pixel.setRed(70); } }
- for (var pixel of someImage.values()) { if (pixel.getRed() < 70) { pixel.setRed(70); } if (pixel.getRed() > 70) { pixel.setRed(70); } }
- for (var pixel of someImage.values()) { if (pixel.getRed() > 70) { pixel.setRed(70); } }
Q 4. Consider writing code that starts with the image “astrachan.jpg” shown below on the left and replaces the bottom 10 rows of pixels with black pixels, resulting in the picture on the right below.
The code has been started below but has missing code.
var image = new SimpleImage(“astrachan.jpg”);
// missing code
print(image);
Which one of the following is the best choice for the correct missing code to replace the bottom 10 rows with black pixels?
- var height = someImage.getHeight(); for (var pixel of someImage.values()) { if (pixel.getY() >= height – 10) { pixel.setRed(0); pixel.setGreen(0); pixel.setBlue(0); } }
- var height = someImage.getHeight(); for (var pixel of someImage.values()) { if (pixel.getY() <= height – 10) { pixel.setRed(0); pixel.setGreen(0); pixel.setBlue(0); } }
- var width = someImage.getWidth(); for (var pixel of someImage.values()) { if (pixel.getX() <= width – 10) { pixel.setRed(0); pixel.setGreen(0); pixel.setBlue(0); } }
- var width = someImage.getWidth(); for (var pixel of someImage.values()) { if (pixel.getX() >= width – 10) { pixel.setRed(0); pixel.setGreen(0); pixel.setBlue(0); } }
Q 5 . Consider writing code that starts with the image “chapel.png” shown below on the left and replaces the top left corner with an all green square of size 50 by 50, resulting in the picture on the right below.
The code has been started below but has missing code.
var image = new SimpleImage(“chapel.png”);
// missing code
print(image);
Which one of the following is NOT the correct missing code to add the green square to the top left corner of the image?
- for (var pixel of someImage.values()) { if (pixel.getX() < 50) { pixel.setRed(0); pixel.setGreen(255); pixel.setBlue(0); } if (pixel.getY() < 50) { pixel.setRed(0); pixel.setGreen(255); pixel.setBlue(0); } }
- for (var pixel of someImage.values()) { if (pixel.getY() < 50) { if (pixel.getX() < 50) { pixel.setRed(0); pixel.setGreen(255); pixel.setBlue(0); } } }
- for (var pixel of someImage.values()) { if (pixel.getX() < 50) { if (pixel.getY() < 50) { pixel.setRed(0); pixel.setGreen(255); pixel.setBlue(0); } } }
- for (var pixel of someImage.values()) { if (pixel.getX() < 50) { if (pixel.getY() < 50) { pixel.setGreen(255); } } if (pixel.getY() < 50) { if (pixel.getX() < 50) { pixel.setRed(0); pixel.setBlue(0); } } }
Q 6.
Consider writing a function named topRightCorner that puts a rectangle of a specified color and size in the top right corner of the image. The function topRightCorner has six parameters named cornerWidth, cornerHeight, someImage, red, green, and blue. This function replaces the top right corner of the image someImage with a rectangle of height cornerHeight and width cornerWidth, and color that has red, green and blue numeric values.
For example, the call result = topRightCorner(30, 60, picture, 255, 255, 0)
where picture is the simpleImage on the left below, followed by print(result) results in a yellow rectangle (all red and all green makes yellow) of width 30 and height 60 in the top right corner.
This function has been started for you and is missing the body of the for loop. Also shown below the function is code that calls the function that results in the picture on the right with the yellow rectangle.
function topRightCorner(cornerWidth, cornerHeight, someImage, red, green, blue) { var width = someImage.getWidth(); for (var pixel of someImage.values()) { // missing code } return someImage; }
var picture = new SimpleImage(“chapel.png”); var result = topRightCorner(30, 60, picture, 255, 255, 0); print(result);
Which one of the following is the correct missing code for the for loop in the function topRightCorner?
- if (pixel.getY() < cornerHeight) { if (pixel.getX() > width – cornerWidth) { pixel.setRed(red); pixel.setGreen(green); pixel.setBlue(blue); } }
- if (pixel.getY() < cornerHeight) { if (pixel.getX() > cornerWidth – width) { pixel.setRed(red); pixel.setGreen(green); pixel.setBlue(blue); } }
- if (pixel.getY() < cornerHeight) { if (pixel.getX() > cornerWidth) { pixel.setRed(red); pixel.setGreen(green); pixel.setBlue(blue); } }
- if (pixel.getY() < cornerHeight) { if (pixel.getX() > cornerWidth + width) { pixel.setRed(red); pixel.setGreen(green); pixel.setBlue(blue); } }
Q 7. Consider a function named topRightCorner that puts a rectangle of a specified color and size in the top right corner of the image. The function topRightCorner has six parameters named cornerWidth, cornerHeight, someImage, red, green, and blue. This function replaces the top right corner of the image someImage with a rectangle of height cornerHeight and width cornerWidth, and color that has red, green and blue numeric values.
For example, the call result = topRightCorner(30, 60, picture, 255, 255, 0)
where picture is the simpleImage on the left below, followed by print(result) results in a yellow rectangle (all red and all green makes yellow) of width 30 and height 60 in the top right corner.
Consider calling the topRightCorner function repeatedly to change the chapel image into the image on the right below where each of the three colored squares is 30 by 30.
Which one of the following is the correct code to create this image?
- var picture = new SimpleImage(“chapel.png”); var result = topRightCorner(30, 60, picture, 0, 0, 255); var result2 = topRightCorner(30, 30, result, 0, 255, 0); var result3 = topRightCorner(60, 30, result2, 255, 255, 0); print(result3);
- var picture = new SimpleImage(“chapel.png”); var result = topRightCorner(30, 60, picture, 255, 255, 0); var result2 = topRightCorner(60, 30, result, 0, 0, 255); var result3 = topRightCorner(30, 30, result2, 0, 255, 0); print(result3);
- var picture = new SimpleImage(“chapel.png”); var result = topRightCorner(60, 30, picture, 0, 0, 255); var result2 = topRightCorner(30, 30, result, 0, 255, 0); var result3 = topRightCorner(30, 60, result2, 255, 255, 0); print(result3);
- var picture = new SimpleImage(“chapel.png”); var result = topRightCorner(30, 60, picture, 0, 0, 255); var result2 = topRightCorner(60, 30, result, 255, 255, 0); var result3 = topRightCorner(30, 30, result2, 0, 255, 0); print(result3);
Q 8. Consider the function named changeRed that draws a rectangle of width 256 showing all the changes of the color red, from left to right repeatedly, while blue and green are both set to 0. With height set to 200, the resulting image is shown here.
The function changeRed has two parameters named width and height for the width and height of the rectangle. This function should start at the first pixel with red set to 0 and increment red by 1 with each new pixel it processes. After the red reaches 255, it should be reset back to 0 for the next row. This function returns the newly created image. The function has been started below.
CODE:
function changeRed(width, height) { var picture = new SimpleImage(width, height); var red = 0;
// missing code
return picture; }
var result = changeRed(256,200); print(result);
OUTPUT:
Which of the following is the correct code for the missing code for this function?
- for (var pixel of picture.values()) { pixel.setRed(red); pixel.setGreen(0); pixel.setBlue(0); if (pixel.getRed() == 255) { red = 0; } if (pixel.getRed() != 255) { red = red + 1; } }
- for (var pixel of picture.values()) { pixel.setRed(red); pixel.setGreen(0); pixel.setBlue(0); if (pixel.getRed() != 255) { red = red + 1; } if (pixel.getRed() == 255) { red = 0; } if (pixel.getRed() < 255) { red = red + 1; } }
- for (var pixel of picture.values()) { pixel.setRed(red); pixel.setGreen(0); pixel.setBlue(0); if (pixel.getRed() == 255) { red = 0; } if (pixel.getRed() < 255) { red = red + 1; } }
- for (var pixel of picture.values()) { pixel.setRed(red); pixel.setGreen(0); pixel.setBlue(0); if (pixel.getRed() < 255) { red = red + 1; } if (pixel.getRed() == 255) { red = 0; } }
Q 9. Consider the function named changeRed that creates a rectangular image of width 256 showing all the changes of the color red, from left to right repeatedly, while blue and green are both set to 0. With height set to 200, the resulting image is shown here.
The function changeRed has two parameters named width and height for the width and height of the rectangle. This function should start at the first pixel with red set to 0 and increment red by 1 with each new pixel it processes. After the red reaches 255, it should be reset back to 0 for the next row. This function returns the newly created image. The function header is shown below.
function changeRed(width, height) {
Now consider allowing different values of blue and green. For example, if blue was 200 and green was 100, then as red changed from 0 to 255 the resulting image would change from a green color to an orange color as shown here:
Which of the following best describes how to modify the changeRed function so that different values of blue and green could easily be used when the function is called
- Change it from a function to just code and copy the code for each value of blue and green you want to use.
- In the function just change the values of blue and green to the desired values.
- Add three parameters, one for the blue color, one for the green color and one for the red color. Then in the code set blue to be the blue number passed in, green to be the green number passed in and red to be the red number passed in.
- Add two parameters, one for the blue color and one for the green color. Then in the code set blue to be the blue number passed in and green to be the green number passed in.
Programming Foundations with JavaScript, HTML and CSS Week 2 Quiz Answers
Modifying Images with JavaScript
Q 1. Which of the following commands creates a variable x and assigns it the value of the x coordinate of a pixel?
Answer:
var x = pixel.getX();Q 2. A variable x has been initialized to have the value 2. What is the value of x after the following line of code has been executed?
x = x*3;- 3
- 6
- 1
- 2
- 0
Q 3. Consider the following code segment:
var x = 3;
print("x");What is the output?
- x is 3
- x
- x = 3
- 3
Q 4. Which of the following lines of code includes a method call? Select all that apply.
Answer:
px.setRed(200);var w = img.getWidth();Q 5. Consider the following code. What does a call to i1.getHeight() return?
var i1 = new SimpleImage(name);
var i2 = new SimpleImage(name2);- The width of image i1
- The height of image i1
- The height of image i2
- The width of image i2
Q 6. Consider the code you just wrote in the last programming exercise to modify Drew’s picture shown on the left by making a red, green and blue vertical stripe as shown in the image on the right.
Which two of the following code segments are the correct loop to make this modification to the image named image? The red stripe is made by changing the red of all the pixels in the left vertical third to 255, the green of all the pixels in the middle vertical to 255, and the the blue of all the pixels in the right vertical third to 255
Answer:
w = image.getWidth();
for (var pixel of image.values()) {
x = pixel.getX();
if (x < w/3) {
pixel.setRed(255);
}
if (x >= w/3 && x < 2*w/3) {
pixel.setGreen(255);
}
if (x >= 2*w/3 && x <= w) {
pixel.setBlue(255);
}
}w = image.getWidth();
for (var pixel of image.values()) {
x = pixel.getX();
if (x < w/3) {
pixel.setRed(255);
}
else if (x < 2*w/3) {
pixel.setGreen(255);
}
else {
pixel.setBlue(255);
}
}Q 7. The function swapRedGreen has one parameter, a pixel. This function swaps the red and green values and returns the resulting red, green and blue values somehow. Which one of the following is the correct code for this function?
Answer:
function swapRedGreen(pixel) {
var newGreen = pixel.getRed();
var newRed = pixel.getGreen();
pixel.setGreen(newGreen);
pixel.setRed(newRed);
return pixel;
}Q 8. Your friend is writing code to change the Duke blue devil to be yellow, as in the following example:
However, their code is producing a completely yellow image:
What could be the problem?
- They have forgotten to change the blue values to 0 for pixels that should be yellow.
- They have set the red and green values to 255 and the blue value to 0 for all pixels with a red value of 255.
- They have made all pixels with a blue value of greater than 220 yellow, forgetting that white pixels have blue values of 255.
Programming Foundations with JavaScript, HTML and CSS Week 2 Quiz Answers
Debugging Your Code
Q 1. Consider the code and two images below, in which the starting image named image is all red (each pixel has red value 255, green value 0 and blue value 0) as shown below on the left and the resulting image shown on the right below is supposed to be all green, but is all yellow. The image is a 200 pixel by 200 pixel image.
for (var pixel of image.values()) {
if (pixel.getRed() > 250) {
pixel.setGreen(255);
}
}
Which one of the following would be the most helpful in identifying what is wrong with this code?
- Print the red, green and blue values of one of the pixels before the for loop and again after the for loop.
- Print the x and y values of every pixel in the image before the for loop.
- Print the red, green and blue value of one of the pixels before the for statement.
- Print the x and y values of every pixel with x < 10 and y < 10.
- Print the x and y values of every pixel in the image before the for loop and again after the for loop.
- Print the width and height of the image.
Q 2. Which of the following options are steps in the scientific method approach to debugging? Choose the three best options below.
Answer:
- Gather Info & Apply Expert Knowledge
- Observe a Phenomenon
- Form Hypothesis
Q 3. Which of the following are important characteristics of a good hypothesis? Choose the two best options below.
Answer:
- The hypothesis is actionable
- The hypothesis is testable
Q 4. For which of the seven steps to solve a programming problem is the scientific method most useful?
- Debug failed test cases
- Check by hand
- Translate to code
- Work example by hand
Q5. Consider the following program:
var img = new SimpleImage(200,200);
for (var px of img.values()){
var x = px.getX();
var y = px.getY();
if (x < img.getWidth()/2){
px.setRed(255);
}
if (y>img.getHeight()/2){
px.setBlue(255);
}
else {
px.setGreen(255);
}
}
print (img);It is supposed to produce the image on the left but it actually produces the image on the right.
Which of the following is the best hypothesis about how the program is broken?
- Only pixels in the upper right quadrant should have their green values set to 255 but green values of the pixels in the upper left quadrant are also being set to 255.
- The upper left quadrant is yellow instead of red.
- The upper left quadrant is yellow instead of red because line 12 inside the else statement applies to all pixels with a y value less than or equal to half the height of the image.
Q 6. Consider the program in the previous question, shown again here:
var img = new SimpleImage(200,200);
for (var px of img.values()){
var x = px.getX();
var y = px.getY();
if (x < img.getWidth()/2){
px.setRed(255);
}
if (y>img.getHeight()/2){
px.setBlue(255);
}
else {
px.setGreen(255);
}
}
print (img);As a reminder, it is supposed to produce the image on the left but instead it produces the image on the right.
Which of the following changes to the code would fix the problem and produce the correct image?
- Change the else to an if statement that checks whether a pixel is in the upper right quadrant.
- Move the else block to be after the first if statement instead of after the second.
- Add another if statement after the else statement to change the red values of pixels in the upper left quadrant to 255.
- Remove the else statement.
Q 7. Consider the function addBorder that has a parameter image and another parameter thickness. This function returns image with an added black border around each side of the image that is thickness pixels wide. It calls a function setBlack (which changes the color of a single pixel to black) to change the color of border pixels.
For example, calling addBorder with the image on the left and a thickness of 10 pixels results in the image on the right
Which of the following methods must be used in the addBorder function? Select all that apply
Answer:
- getY()
- getWidth()
- getX()
- getHeight()
- values()
Programming Foundations with JavaScript, HTML and CSS Week 2 Quiz Answers
Overview of Programming Concepts
Q 1. Consider the following image on the left, which has been modified into the image on the right with green by changing the red and blue values of some pixels to 0.
Which one of the following is most likely the code that modifies the first image to look like the second image?
Hint: be sure to review how image x and y coordinates work. You can review this on our documentation page.
Answer:
for (var pixel of image.values()) {
x = pixel.getX();
y = pixel.getY();
if (x > y) {
pixel.setRed(0);
pixel.setBlue(0);
}
}Q 2. Consider the following code in which the starting image named image is all red (each pixel has red value 255, green value 0 and blue value 0) as shown below on the left and the resulting image shown on the right below is supposed to be all green, but is all yellow. The image is a 200 pixel by 200 pixel image.
for (var pixel of image.values()) {
if (pixel.getRed() > 250) {
pixel.setGreen(255);
}
}
Answer: (this answer not 100% sure)
pixel.setRed(255);
pixel.setBlue(255);Q 3. Recall the function addBorder you wrote in a programming exercise that has a parameter image and another parameter thickness. This function returns image with an added black border around each side of the image that is thickness pixels wide.
Which two of the following are correct implementations of addBorder?
Answer
function addBorder(image, thickness){
for (var px of image.values()){
var x = px.getX();
var y = px.getY();
if (x < thickness){
px = setBlack(px);
}
if (x >= image.getWidth()-thickness){
px = setBlack(px);
}
if (y < thickness){
px = setBlack(px);
}
if (y >= image.getHeight()-thickness){
px = setBlack(px);
}
}
return image;
}function addBorder(image, thickness){
for (var pixel of image.values()){
if (pixel.getX() < thickness){
pixel = setBlack(pixel);
}
if (pixel.getX() >= image.getWidth()-thickness){
pixel = setBlack(pixel);
}
if (pixel.getY() < thickness){
pixel = setBlack(pixel);
}
if (pixel.getY() >= image.getHeight()-thickness){
pixel = setBlack(pixel);
}
}
return image;
}Q 4. Consider the following program that uses the setBlack function you wrote in the Advanced Modifying Images programming exercise:
function pixelOnEdge(image,pixel,horizontalThick, verticalThick){
var x = pixel.getX();
var y = pixel.getY();
if (x < verticalThick || x > image.getWidth() - verticalThick){
return true;
}
if (y < horizontalThick || y > image.getHeight() - horizontalThick){
return true;
}
return false;
}
function addBorders(image,horizontalThick, verticalThick){
for (var px of image.values()){
if (pixelOnEdge(image,px,horizontalThick,verticalThick)){
px = setBlack(px);
}
}
return image;
}
var img = new SimpleImage("skyline.png");
img = addBorders(img,40,20);
print(img);What is the best description of the purpose of the pixelOnEdge function?
- To identify pixels within the vertical borders
- To color pixels that are within the borders black
- To identify pixels that are within the borders by returning true
- To identify pixels within the horizontal borders
Q 5. Which of the following could not be the output of running the program written in the previous question? Select all that apply
If you know the answer please comments
Q 6. Consider the following function named compose that has two string parameters, one named word and one named separator, and returns a string of the word three times with the separator in between each pair of words. The function is shown below with missing code and two calls to the function.
function compose(word, separator) { // missing code } var phrase = compose(“duck”, “goose”); print(phrase); var phrase2 = compose(“meow”,”-“); print(phrase2);
Here is the corresponding output to those calls to the function:
duckgooseduckgooseduck meow-meow-meow
Which one of the following is the correct missing code for this function?
- return word + separator + word + separator + word; (this answer is not 100% sure)
- var temp = word + separator; var answer = temp + temp + temp; return answer;
- var answer = word + separator; answer = answer + answer + answer; return answer;
- return word + separator; return word + separator; return word;
Q 7. Consider the following code with if statements, in which lines are numbered for convenience so we can refer to them.
1 if (x > 10) { 2 print(“one”); 3 if (y < 10) { 4 print(“two”); 5 } 6 } 7 if (x < 20) { 8 print(“three”); 9 if (y > 5) ( 10 print(“four”); 11 } 12 }
If x has the value 30 and y has the value 8, which one of the following is the output resulting from this code executing?
- one two three four
- one two four
- one two
- one
Q 8. Consider writing the function named moreRedThanGreen that has one parameter named namefile, that is the name of an image. This function calculates how many pixels in an image have more red than green in the pixel (that is the red number is larger than the green number).
The function moreRedThanGreen has been started for you but has missing code:
Answer:
var count= 0;
for (var pix of someImg.values()) {
if (pix.getRed() > pix.getGreen()) {
count = count +1;
}
}Q 9. Consider writing the function named numberRedPixels that has three parameters. One parameter is named namefile, and is the name of an image. The other two parameters are integers and named low and high. This function calculates how many pixels in an image have a red component whose value is greater than or equal to low and less than or equal to high.
The function numberRedPixels has been started for you but has missing code:
Answer:
Q 10. Consider writing code to answer the following question. How many pixels in an image have a red component whose value is greater than or equal to one number and less than or equal to a second number?
Suppose you were to write a function to calculate this value. Which one of the following is the best choice for the parameters for this function?
- Three parameters: 1) filename – the name of the file for the image 2) low – representing the lowest red value and 3) high – representing the highest red value in the range. (this answer is not 100% sure)
- Four parameters: 1) filename – the name of the file for the image 2) low – representing the lowest red value, 3) high – representing the highest red value in the range, and 4) pixel – representing a pixel.
- Five parameters: 1) filename – the name of the file for the image 2) low – representing the lowest red value, 3) high – representing the highest red value in the range, 4) height – representing the height of the image, and 5) width – representing the width of the image.
- Three parameters: 1) filename – the name of the file for the image 2) height – representing the height of the image, and 3) width – representing the width of the image.
Programming Foundations with JavaScript, HTML and CSS Week 3 Quiz Answers
Buttons and Interaction
Q 1. In the TODO list assignment, the About and Clear buttons are smaller than the Add button.
How do we make them the same size as the Add button?
In the HTML for each one in their input tag, add separate ids, aboutButton and clearButton. Then what would you do?
- Then in the CSS create a rule for each id that sets the padding to 30px.
- Then in the CSS create a rule for each id that sets the width to 60px.
- Then in the CSS create a rule for each id that sets the padding to 10px.
- Then in the CSS create a rule for each id that sets the width to 20px.
Q 2. In the TODO list assignment, in the HTML part you were to add an Add button by adding an <input> tag with attribute type=”button” and to include attributes id=”addButton”, and value=”Add”, and an attribute onclick=”addTask()”, where addTask() is a function we started for you. Which one of the following is a correct way to add this input button?
- <input> type=”button” id=”addButton” onClick=”addTask()” value=”Add” </input>
- <input> type: “button” id: “addButton” onClick: “addTask()” value: “Add” </input>
- <input type: “button” id: “addButton” onClick: “addTask()” value: “Add”>
- <input type=”button” id=”addButton” onClick=”addTask()” value=”Add” />
Q 3. Suppose the <input> tag is used to create a button with class set to “somebutton”. Which of the following would you put in the CSS to turn the background color of the button to pink?
- .somebutton { pink: color; }
- .somebutton { background-color: pink; }
- .somebutton { pink: background-color; }
- .somebutton { color: pink; }
Q 4. In the TODO assignment, with the start code you are given the following functions to process items.
function markDone (item) { item.className = ‘finished’; }
function remove (item) { // remove item completely from document item.remove(); }
When you click on the red X the remove function is called and the list item is deleted.
When you click on the check mark the markDone function is called and the item is marked as finished.
Suppose you modify the remove function so that it only removes an item if it has been checked off. Which one of the following is the correct remove function that makes this change?
- function remove (item) { // remove item completely from document if (item.className != ‘finished’) { item.className = ‘finished’; item.remove(); } }
- function remove (item) { // remove item completely from document if (item.className == ‘finished’) { item.className = removed’; } item.remove(); }
- function remove (item) { // remove item completely from document if (item.className != ‘finished’) { item.remove(); } }
- function remove (item) { // remove item completely from document if (item.className == ‘finished’) { item.remove(); } }
Q 5. In the TODO list assignment, assume in the HTML there is the following div:
In the TODO list assignment, assume in the HTML there is the following div:
<div id=”divabout”> </div>
And in the CSS there is the following class:
.pinkbackground { background-color: pink; }
The function doAbout() should change the text in the div you created with id “divabout” to say “Click Add to add items to this TODO list” and the background color of the div should change to pink. Which one of the following is the correct function doAbout?
- function doAbout() { var element = document.getElementById(“div”); element.innerHTML = “Click Add to add items to this TODO list”; element.color = “pinkbackground”; }
- function doAbout() { var element = document.getElementById(“divabout”); element.innerHTML = “Click Add to add items to this TODO list”; element.backgroundcolor = “pinkbackground”; }
- function doAbout() { var element = document.getElementById(“div”); element.innerHTML = “Click Add to add items to this TODO list”; element.backgroundcolor = “pinkbackground”; }
- function doAbout() { var element = document.getElementById(“divabout”); element.innerHTML = “Click Add to add items to this TODO list”; element.className = “pinkbackground”; }
Q 6.
In the TODO list assignment, consider the following div on the HTML page, in which clicking an About button shows text inside the div.
<div id=”divabout”> </div>
There is also a Clear button. The function named clearAbout() should remove everything that was added to the div when the About button was clicked on so it is blank.
Which one of the following is the correct clearAbout function?
- function clearAbout() { var element = document.getElementById(“divabout”); element.innerHTML = “div”; }
- function clearAbout() { var element = document.getElementById(“divabout”); element.innerHTML = “”; }
- function clearAbout() { var element = document.getElementById(“div”); element.innerHTML = “divabout”; }
- function clearAbout() { var element = document.getElementById(“divabout”); element.innerHTML = “Cleared”; }
Programming Foundations with JavaScript, HTML and CSS Week 3 Quiz Answers
Event-Driven Programming
Q 1. Which of the following attributes specifies the event handler in an HTML input element?
- onclick
- type
- id
- value
Q 2. The following canvas element is defined using HTML:
<canvas id="can">
</canvas>You would like to create a JavaScript variable canvas
var canvas = ?What code goes to the right of the assignment operator (equals sign) in order to get this element?
Answer:
document.getElementById("can");Q 3. You have defined the following HTML slider input element.
<input type="range" min="10" max="100" value="10" id="sldr" oninput="doThing()" >You have accessed this element in the JavaScript function doThing()
function doThing() {
var sliderinput = document.getElementById("sldr");
// code goes here
}What line of code will declare a variable size and initialize it to be the number from the slider?
Answer:
var size = sliderinput.value;Q 4. Suppose in HTML you have the following:
Suppose in HTML you have the following:
<canvas id=”canvas1″> </canvas>
Suppose in the JavaScript you are given the following:
var paintcanvas = document.getElementById(“canvas1”);
// isNumeric returns true if value is a valid integer number
function isNumeric (value) { // code not shown }
Consider writing the function named setWidth that has a parameter named value. This function should first make sure that value is a valid number, and then change the variable paintcanvas.width to value. You may call the function isNumeric if you want.
Which one of the following is the correct code for the function setWidth?
- function setWidth (value) { paintcanvas.width = value; }
- function setWidth (value) { if (isNumeric(value) == false) { paintcanvas.width = value; } }
- function setWidth (value) { if (isNumeric(value) != true) { paintcanvas.width = value; } }
- function setWidth (value) { if (isNumeric(value) ) { paintcanvas.width = value; } }
Q 5. In HTML, suppose one wants to create an input in which you can type in any number. Which one of the following is the best choice for the type for that input?1 point
- text
- color
- range
- button
Q 6. In creating a slider that will cover a range of numbers, how do you define that range in the input tag?
- Set min to the smallest value and max to the largest value, min=”10” max=”50”.
- Set range to two values in parenthesis such as (10,50), range=”(10,50)”.
- Set A to the smallest value and B to the largest value, A=”10” B=”50”.
- Set range to two values in brackets such as [10,50], range=”[10,50]”.
Q 7. What type of HTML tag is used to show the current set value of a slider?
- <input> with type=”output”
- <output>
- <slider>
- <slidernumber>
Programming Foundations with JavaScript, HTML and CSS Week 3 Quiz Answers
Interactive Web Pages
Q 1. What is the purpose of initializing the global image variables to null in the green screen web page?
- Global variables must be initialized when they are declared.
- The code can check if the image is null before processing it.
- The code clears the canvas before performing the green screen algorithm.
Q 2. You would like to display an alert message if the image variable for the foreground image fgImage is not loaded. Which two of the following expressions evaluate to true if the image is not ready?
- fgImage.complete()
- fgImage != null
- ! fgImage.complete()
- fgImage == null
Q 3. In which of the following code snippets does the program alert the user “x is null”?
Answer:
var x = null;
function myFunction() {
var x = 2;
}
myFunction();
if (x == null) {
alert("x is null");
}Q 4. You have created the following file input element:
<input type="file" onchange="loadImage()" >Which of the following attributes can you add to specify the element ID?
- accept=”image/*”
- id=”finput”
- multiple=”false”
Q 5. You have the following code excerpt to allow a user to select a file from the input element with ID “finput” and display it to a canvas with ID “can.”
var file = document.getElementById("finput");
var image = new SimpleImage(file);
var canvas = document.getElementById("can");
image.drawTo(canvas);Which of the following do you need to add, so that this code will work in CodePen or on another web page?
Answer:
A script specifying where to find the JavaScript library for SimpleImage
Q 6. You have two pixels to convert to grayscale, and you would like to determine visually whether your code is likely to be working, so you work an example by hand.
The first pixel is teal and has rgb(0,153,153), and the second pixel is purple and has rgb(153,51,255). Once the grayscale pixels are printed, which one should appear as a lighter gray (closer to white).
- First pixel
- Second pixel
Q 7. You are building a web page, and you create a text input element and specify an element ID for it. Why did you do this?
- The id attribute is required for input elements.
- You would like to be able to reference the input element programmatically.
- An ID is required in order to use an event handler.
Programming Foundations with JavaScript, HTML and CSS Week 4 Quiz Answers
Review of HTML, CSS, and JavaScript
Q 1. What is the purpose of adding CSS to a web page?
- To style the web page
- To layout the web page
- To put images on the web page
- To make the web page interactive
Q 2. Which of the following are examples of nesting? Select all that are correct.
Answer:
- A list of lists
- A for loop inside a for loop
Q 3. Consider the following HTML and CSS to make a web page.
HTML:
<head>
</head>
<title>Cities</title>
<body>
<p><img src="http://s12.postimg.org/yj9byjs3x/DSCN6056_copy.jpg"/>
</p>
<p>
<ol>
<li class = oddNums>New York</li>
<ul>
<li>Empire State Building</li>
<li>Statue of Liberty</li>
<li>Times Square</li>
</ul>
<li>Los Angeles</li>
<li class = oddNums>Chicago</li>
</ol>
</p>
</body>
CSS:
body {
background-color : #567898;
}
oddNums {
color : purple;
}Which of the following are errors in this code? Select all that are correct.
Answer:
- The HTML is missing <html> tags.
- In the CSS there should be a dot before oddNums to indicate that it is a class.
- The <title> tag should be inside the <head> tag.
- The unordered list inside the ordered list should go inside the list element New York, not after it
Q 4. Consider the following image in which the upper left quadrant is cyan, the upper right quadrant is green, the lower left quadrant is blue, and the lower right quadrant is black
Now consider the code that attempts to create that image but has a mistake, and instead produces this image, in which the upper left quadrant is blue instead of cyan:
Here is the code:
var img = new SimpleImage(200,200);
for (var px of img.values()){
var x = px.getX();
var y = px.getY();
if (x < img.getWidth()/2){
px.setBlue(255);
}
else {
if (y < img.getHeight()/2){
px.setGreen(255);
}
}
}
print (img);
Which of the following is the best explanation of why this code doesn’t produce the first image?
- The if statement inside the else statement checks if pixels are in the upper half and the right half of the image, so only the upper right quadrant of the image is made green.
- The code inside the else statement is only applied to pixels that did not satisfy the first if statement. So only pixels in the upper half of the image that are not also in the left half of the image are made green by the if statement inside the else statement.
- First the upper half of the image is made green, then when the left half is made blue it overwrites the green pixels and makes them blue.
Q 5. Consider the following short program that defines a function to make an image darker by a certain amount and applies it to the image chapel.png.
function makeDarker(image,amount){
for (var px of image.values()){
px.setRed(px.getRed()-amount);
px.setGreen(px.getGreen()-amount);
px.setBlue(px.getBlue()-amount);
}
}
img = new SimpleImage("chapel.png");
img = makeDarker(50);
print(img);Which of the following are errors in the program? Select all that are correct.
Answer:
- The call to makeDarker does not pass an image as an argument.
- The line that initializes the variable img is missing the keyword var.
- The function makeDarker is missing a return statement so there will be an error when the program assigns the return value of makeDarker to the variable img.
Q 6. Imagine you want to write a program to turn an image into a mirror image of itself. Which of the following would be the best approach to take?
- Work small examples by hand, write down what you did, look for patterns, translate your algorithm to code, test and debug your program.
- Write code to solve the problem, test and debug your program, improve your program by adding more features.
- Gather domain knowledge, work small examples by hand, write down what you did, look for patterns, translate your algorithm to code.
Q 7. Consider the following JavaScript code.
var grayimage = null;
var image;
function loadImage(){
var ff = document.getElementById("fbutton");
gcanvas = document.getElementById("can");
doclear();
image = new SimpleImage(ff);
image.drawTo(can);
}
function makeGray(theImage) {
for (var pix of theImage.pixels()){
var total = pix.getGreen() + pix.getRed() + pix.getBlue();
var avg = total/3;
pix.setGreen(avg);
pix.setBlue(avg);
pix.setRed(avg);
}
return theImage;
}Which of the variables are global variables? Select all that are correct.
Answer:
- grayimage
- image
Q 8. Which is the appropriate event handler to do something once a file has loaded?
- onclick
- oninput
- onchange
- onmouseover
Q 9. Consider the following code that calls the function filterGreen (code for this function not shown) to apply a green filter to the image greenImage.
function doGreen() {
if (imageIsLoaded(greenImage)) {
filterGreen();
}
}What line needs to be added to this code to display the final image on the canvas? You can assume that there is a variable named canvas that can be used to reference the canvas.
Answer:
greenImage.drawTo(canvas);Q 10. Consider the examples you have seen of web pages that enable users to upload images and add filters to them. Which of the following describes what happens when the user clicks a button to add a filter to an image?
- The onclick event handler allows the user to choose an image to apply the filter to, then it calls a function that applies the filter to the image, and the filtered image is drawn on the canvas.
- The onclick event handler calls a function that applies the filter to the image, then the filtered image is drawn on the canvas.
- The mouseover event handler calls the function that draws the image to the canvas, then the onclick event handler calls the function that applies the filter to the image.
- The onclick event handler calls the function that draws the image to the canvas, then the filter is added.
Programming Foundations with JavaScript, HTML and CSS Week 4 Quiz Answers
Steganography math
Pretend that colors are represented in base-10 and can have values 0–9999.
You would like to hide a green pixel with R,G,B = 0000, 5962, 2034 inside of a blue pixel with R,G,B = 2011, 4057, 9980.
What R,G,B values would the output pixel have?
- 0020, 5940, 2099
- 2000, 4059, 9920
- 1100, 5759, 8020
- 2000, 4062, 9934
Q 2. Pretend that colors are represented in base-10 and can have values 0–9999.
You would like to hide a green pixel with R,G,B = 0000, 5962, 2034 inside of a blue pixel with R,G,B = 2011, 4057, 9980.
Which of the following expressions would produce the correct green value for the output pixel?
- Math.floor(4057*100)/100 + Math.floor(5962*100)
- Math.floor(4057/100) + Math.floor(5962/100)*100
- Math.floor(4057*100) + Math.floor(5962*100)/100
- Math.floor(4057/100)*100 + Math.floor(5962/100)
Q 3. Colors are actually represented in 8 binary digits (bits) with possible values 0–255.
You would like to hide a green pixel with R,G,B = 0, 156, 53 inside of a blue pixel with R,G,B = 59, 110, 248. The binary representation of these values is R,G,B = 0000 0000, 1001 1100, 0011 0101 for the hiding green pixel and R,G,B = 0011 1011, 0110 1110, 1111 1000 for the blue pixel in which you are hiding.
What is the binary representation of the R,G,B values of the output pixel?
- 0011 0000, 0110 1100, 1111 0101
- 0000 0011, 1001 0110, 0011 1111
- 1011 0000, 1110 1001, 1000 0011
- 0011 0000, 0110 1001, 1111 0011
Q 4. Colors are actually represented in 8 binary digits (bits) with possible values 0–255.
You would like to hide a green pixel with R,G,B = 0, 156, 53 inside of a blue pixel with R,G,B = 59, 110, 248.
Which of the following expressions would produce the correct red value for the output pixel?
(Note: Even though the computer stores the numbers as binary, you do not need to convert them to binary. You just need to operate on them knowing there are 8 bits.)
- Math.floor(59/16)*16 + Math.floor(0/16)
- Math.floor(59*16)/16 + Math.floor(0/16)
- Math.floor(59/16) + Math.floor(0*16)/16
- Math.floor(59/16) + Math.floor(0/16)*16
Q 5. For color values stored as 8-bits of data, what is the maximum difference there could be between the original value in which you are hiding, and the output value with hidden data?
Hint: think about the maximum difference there could be in the least significant digits.
- 7
- 8
- 15
- 16
- 17
Programming Foundations with JavaScript, HTML and CSS Week 4 Quiz Answers
Q 1. Consider writing the function crop(image, width, height) that has three parameters: image is a complete image, and width and height are numbers. This function creates and returns a new image from the parameter image, with the new image having the width and height of the specified width and height parameters, thus cropping the picture by ignoring the pixels on the rightside or bottomside that are beyond the specified width or height of the picture.
Here is a possible crop function with some missing code.
function crop(image, width, height) {
var n = new SimpleImage(width,height);
for(var p of image.values()){
var x = p.getX();
var y = p.getY();
// MISSING CODE
}
return n;
}Answer:
if (x < width && y < height){
var np = n.getPixel(x,y);
np.setRed(p.getRed());
np.setBlue(p.getBlue());
np.setGreen(p.getGreen());
}
This is the correct answer. Both the x and y values must be in the part of the image that is not cropped.Q 2. Consider the function crop(image, width, height) that has three parameters: image is a complete image, and width and height are numbers. This function creates and returns a new image from the parameter image, with the new image having the width and height of the specified width and height parameters, thus cropping the picture by ignoring the pixels on the rightside or bottomside that are beyond the specified width or height of the picture. Assume this function works correctly.
We select two images to start with:
var start = new SimpleImage(“astrachan.jpg”);
var hide = new SimpleImage(“Message.jpg”)
What is the remaining JavaScript code to take these two images and crop both of them using the crop function to make them the same smaller size?
Answer:
var cropWidth = start.getWidth();
if (hide.getWidth() < cropWidth) {
cropWidth = hide.getWidth();
}
var cropHeight = start.getHeight();
if (hide.getHeight() < cropHeight) {
cropHeight = hide.getHeight();
}
start = crop(start,cropWidth, cropHeight);
hide = crop(hide,cropWidth, cropHeight);
print(start);
print(hide);Q 3. Assume we will hide one image inside another image by hiding information inside half of each pixel. The chop2Hide function zeros out the lower half of each pixel’s RGB components.
Suppose a particular pixel has a red value of 195 right before chop2Hide is called. What is that pixel’s red value after chop2Hide is called on this image?
Answer:
192
This is the correct answer.
Q 4. Assume we will hide one image inside another image by hiding information inside half of each pixel. The shift function moves the left half of each pixel’s RGB components to the right, replacing the left half with all zeros. Suppose a particular pixel has a red value of 162 right before shift is called. What is that pixel’s red value after shift is called on this image?
Answer:
10
Q 5. Assume we will hide one image inside another image by hiding information inside half of each pixel. If the red color of a pixel in image 1 is 212 (written as 8 binary bits that is 11010100) and the red part of the image 2 we want to hide is 168 (in 8 bits that is 10101000). Then what are the 8 bits for this red color after we have hidden image 2 in image 1 by hiding it in half the pixel data?
Answer:
11011010
Answer:
function newpv(p,q) {
var answer = p + q;
if (p + q > 255) print("error: answer too big"); return answer;
}
Q 7. The function newpv adds two integer parameters together and returns the result. Assume that this function works correctly, and in addition it prints an error message if a resulting pixel’s red, green or blue value is bigger than 255.
The function combine has two image parameters a and b. It returns a new image that is the combination of the two images. That is a pixel in the new image will have a red value that is the sum of the red values of the pixels in the same (x,y) location from images a and b, a green value that is the sum of the two green values, and a blue value that is the sum of the two blue values. The function combine assumes the two images it is using to create the new image will not have any sums greater than 255. Consider the combine function below that has missing code in the body of the for loop.
function combine(a,b){
var n = new SimpleImage(a.getWidth(), a.getHeight());
for(var pa of a.values()){
// missing code
}
return n;
}
Which one of the following has the correct missing code?
Answer:
var x = pa.getX();
var y = pa.getY();
var pb = b.getPixel(x,y);
var np = n.getPixel(x,y);
np.setRed(newpv(pa.getRed(),pb.getRed()));
np.setGreen(newpv(pa.getGreen(),pb.getGreen()));
np.setBlue(newpv(pa.getBlue(),pb.getBlue()));Get All Course Quiz Answers of Java Programming and Software Engineering Fundamentals Specialization
Programming Foundations with JavaScript, HTML and CSS Coursera Quiz Answers
Java Programming: Arrays, Lists, and Structured Data Coursera Quiz Answers
Java Programming: Principles of Software Design Coursera Quiz Answers
