Java, HTML, CSS: week 2

What are the seven steps to solving programming problems?

1. Work example by hand. 2. Write down what you did. 3. Find patterns. 4. Check by hand. 5. Translate into code. 6. Run test cases. 7. Debug failed test cases.

Which of the following options are steps in the scientific method approach to debugging? Choose the three best options below.

Form Hypothesis Observe a Phenomenon Gather Info & Apply Expert Knowledge

Consider the following code. What does a call to i1.getHeight() return? var i1 = new SimpleImage(name); var i2 = new SimpleImage(name2);

The height of image i1

Which of the following are important characteristics of a good hypothesis? Choose the two best options below.

The hypothesis is actionable The hypothesis is testable

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);

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.

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:

They have made all pixels with a blue value of greater than 220 yellow, forgetting that white pixels have blue values of 255.

A crucial component of problem-solving is to understand the precise task you want to accomplish. Which two strategies best support this practice?

Work a smaller example by hand. and Write down the exact steps you take to solve an instance of the problem.

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?

You need domain knowledge. and The problem statement is unclear.

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?

function swapRedGreen(pixel) { var newGreen = pixel.getRed(); var newRed = pixel.getGreen(); pixel.setGreen(newGreen); pixel.setRed(newRed); return pixel; }

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); } } Which one of the following correctly identifies a statement or statements that should be added to the body of the if statement so that the red square turns into a green square when the code executes?

pixel.setRed(0);

Which of the following commands creates a variable x and assigns it the value of the x coordinate of a pixel?

var x = pixel.getX();

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.

ww = 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); } } and 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); } }

How does solving a programming problem usually start?

By formulating a clear problem statement

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);

Change the else to an if statement that checks whether a pixel is in the upper right quadrant.

For which of the seven steps to solve a programming problem is the scientific method most useful?

Debug failed test cases

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); } }

Print the red, green and blue values of one of the pixels before the for loop and again after the for loop.

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 that are within the borders by returning true not To identify pixels within the vertical borders

Which of the following lines of code includes a method call? Select all that apply.

px.setRed(200); and var w = img.getWidth();

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.

for (var pixel of image.values()) { x = pixel.getX(); y = pixel.getY(); if (x > y) { pixel.setRed(0); pixel.setBlue(0); } }

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?

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; } 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; }

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.

getWidth() values() getX() getY() getHeight()

Consider the following code segment: var x = 3; print("x"); what is the output?

x