Complete the Picture explainer

Puzzle Explainer
#1

The aim of this puzzle: Change the way the sky looks depending on the time of day.
Walkthrough of the solution: The function called changePicture has three if statements inside of it which check what time of day it is: morning, noon, or night. Let’s start with what should happen in the morning. You need to change the color of the sky to steelblue. That means, inside of the curly brackets for the if statement that checks if time === 'morning', you should put: sky.attr('fill', 'steelblue); Now, when the timeOfDay is 'morning' your picture will look good! For nighttime, three things need to change: the sky, the moon, and the grass. The sky fill color should be navy. To make the sun into a moon, you change the fill color of skyLight to 'white'. Finally, the grass color should darken in color to darkgreen.
Sample code solution:
(Tap below to reveal)

function changePicture(time) {
  if (time === 'morning') {
    sky.attr('fill', 'steelblue');
  }
  if (time === 'noon') {
    sky.attr('fill', 'deepskyblue');
    skyLight.attr('cx', 150);
  }
  if (time === 'night') {
    sky.attr('fill', 'navy');
    skyLight.attr('fill', 'white');
    ground.attr('fill', 'darkgreen');
  }
}

var timeOfDay = pickRandom([
  'morning',
  'noon',
  'night'
]);
changePicture(timeOfDay);
print(timeOfDay);

JavaScript Concepts: Code Block (function), Calling Functions, Conditionals, Data Structures, Identifiers
Grasshopper Concepts: pickRandom(), print()
D3 Concepts: .attr(‘fill’,), .attr(‘cx’,)
Additional Code (hidden code that runs before the puzzle’s code):

var sky = svg.append('rect').attr('width', 500).attr('height', 150);
var skyLight = svg.append('circle').attr('r', 30).attr('fill', 'yellow').attr('cx', 10).attr('cy', 10);

let cloud = 'M441.953,142.352c-4.447-68.872-61.709-123.36-131.705-123.36c-59.481,0-109.766,39.346-126.264,93.429  c-9.244-3.5-19.259-5.431-29.729-5.431c-42.84,0-78.164,32.08-83.322,73.523c-0.309-0.004-0.614-0.023-0.924-0.023  c-36.863,0-66.747,29.883-66.747,66.747s29.883,66.746,66.747,66.746c4.386,0,8.669-0.436,12.819-1.243  c20.151,27.069,52.394,44.604,88.734,44.604c31.229,0,59.429-12.952,79.533-33.772c15.071,15.091,35.901,24.428,58.913,24.428  c31.43,0,58.783-17.42,72.955-43.127c11.676,5.824,24.844,9.106,38.777,9.106c48.047,0,86.998-38.949,86.998-86.996  C508.738,185.895,480.252,151.465,441.953,142.352z';

var cloud1 = svg.append('path').attr('d', cloud);
cloud1.attr('fill', 'lightgrey').attr('transform','scale(0.2) translate(200 80)');

var cloud2 = svg.append('path').attr('d', cloud);
cloud2.attr('fill', 'lightgrey').attr('transform','scale(0.1) translate(120 80)');

var cloud3 = svg.append('path').attr('d', cloud);
cloud3.attr('fill', 'lightgrey').attr('transform','scale(0.15) translate(1000 80)');

var cloud4 = svg.append('path').attr('d', cloud);
cloud4.attr('fill', 'lightgrey').attr('transform','scale(0.1) translate(2300 420)');

var ground = svg.append('rect').attr('width', 500).attr('height', 150).attr('y', 150).attr('fill', 'green');
1 Like
#2

Typo for noon: “…should one line…”

–Scott.

#3

Thanks for flagging! This is fixed and will be reflected the next time we push out content changes.

#4

Ah, I found my problem and fixed it! On to the Quiz! :).
(.attrib (‘fill’, ‘white’) is in the wrong place!)
`

image
image.png640×960 66.3 KB

Hi. I’ve tried to include a screenshot that illustrates my issue. The puzzle keeps telling me to include a line of code that’s already present. (Skylight.attrib (‘cx’,150)). Admittedly, I’m doing this w/out my glasses but I think I’ve hit a glitch. Enjoying the App very much, despite it, and learning a lot! Ty!

#5

Hi! I completed the task, but I still have one issue: my result differs with example. The sun in the morning and in the noon is always white. I tried to add attribute fill yellow to if statement of noon, then an error appears. How can I make the sun yellow as in example?

#6

There is quite a bit of additional hidden code for this puzzle. Part of that code is:

var skyLight = svg.append('circle').attr('r', 30).attr('fill', 'yellow').attr('cx', 10).attr('cy', 10);

which will make the sun yellow if you don’t have code that changes it. I believe you have skyLight.attr('fill','white') inside of your function but outside of all of your If Statements – maybe at the very bottom before };

There should be a check for that. Thanks for letting us know!

–Frankie

#7

You are right! Thanks for explanations! Now it works as it should be.

BR,
Oleg.

1 Like
#8

Please I updated all code as instructed but it’s not passing me through another lesson.

image
image750×1334 79.8 KB

#9

Hey there, you’re very close! In your last if statement (the one checking if time is 'night'), change the line:

ground.attr('darkgreen')

to

ground.attr('fill', 'darkgreen')

Hope this helps!
Ben

#10

I did it the exact same way and it sent me to the support forum

#11

Instead of ‘steelblue’ I put ‘streetblue’ lol

#12

What makes the skyLight move to the upper left corner during the day and night? Shouldn’t we set the “cx” for them as well?