Complete the Picture explainer


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([

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


Typo for noon: “…should one line…”



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


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

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!


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?


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!



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