Bolt Out of the Blue explainer


#1

The aim of this puzzle: Make the boxes get lighter by fixing the lighter function.
Walkthrough of the solution: First, let’s get an understanding of all the parts of this program. There are two functions, darker and lighter, which take in an object and give back a darker or lighter version of that object. Then there are a bunch of nested function calls – take a look at the first one: drawBox(darker(darker(rgbObject))). If you start at the inner parentheses and work out: you start with an rgbObject that gets darkened, then darkened again, and then that dark-dark version of the original color is put into drawBox. You can see that when you start, the first three boxes get less dark, but then it stops. The last two drawBox calls are using the lighter function to try to make the boxes lighter. Let’s find out why the darker function works but the lighter function doesn’t. Both functions will take an input and store it in object. Then each component (red, green, blue) gets 50 added or subtracted to it. That new number gets stored in the red, green, and blue properties of the newObject. That means newObject has the darkened or lightened object! Then, a variable is output from the function using the return keyword. It should be the newObject that is returned, and that is where the lighter function has a flaw.
Sample code solution:

function darker(object) {
  var newObject = {
    red: object.red - 50,
    green: object.green - 50,
    blue: object.blue - 50
  };
  return newObject;
}
function lighter(object) {
  var newObject = {
    red: object.red + 50,
    green: object.green + 50,
    blue: object.blue + 50
  };
  return newObject;
}
drawBox(darker(darker(rgbObject)));
drawBox(darker(rgbObject));
drawBox(rgbObject);
drawBox(lighter(rgbObject));
drawBox(lighter(lighter(rgbObject)));

JavaScript Concepts: Binary Expression (+, -), Code Block (function), Calling Functions, Call Nesting, Identifiers
Grasshopper Concepts: drawBox()

Additional Code (hidden code that runs before the puzzle’s code):

var rgbObject = {
    red : 25,
    green : 25,
    blue : 175
};

#2

I did everything right but it did not pass me.


#3

Could you share your code here so I can take a look?

–Frankie


#4

escreveu:


#5

escreveu:


#6

All of the references to object have been changed to newObject in your code. This does create the create the correct output, but it makes the code more challenging to read. If you reset your code with the circular arrows button in the top row of the button keyboard, you can still solve this puzzle by changing 1 identifier: the return value of the lighter function.

The function has 3 main parts:

  • Input - The identifiers that are in the parentheses right after the function name. These are called parameters.

    • Later when you use lighter(rgbObject) to call the lighter function, that value gets stored inside the parameter. The value that you’re sending to the function is called an argument.
  • Body - The part between the curly brackets which transforms your inputs into output.

    • In the lighter function, the body is the part that creates a new variable called newObject. That object is created by adding 50 to each component of the input object.
  • Output - A value that gets sent back to the place where the function was originally called. The return means, send back this value/identifier. Sometimes there is no return value because the body makes changes to variables that you use outside of the function.

    • return newObject will send back the object that was created by the body. When you call lighter(rgbObject), it takes rgbObject as an input argument, stores that object inside the object parameter, makes some calculations with it inside the body, then sends back the result. The original lighter(...) becomes the value sent back by its return

–Frankie


#7

I have changed it and it did not work again!


#8

I am so sorry. Could you desconsider my last 2 messages?

Now, I am sending you the right picture.

It continues wrong…


#9

You’re pretty much there. The only thing different is that you’ve renamed object to the capitalized Object. Again, this will produce the correct solution, but the checks we run are looking to make sure you didn’t edit a part of the code you didn’t need to.

–Frankie


#10

I do not know which part of the code is lighter return!:persevere::persevere::face_with_symbols_over_mouth::rage:


#11

Can you tell me the wrong version that their telling you to fix
:confused:


#12

Would you be able to send a screenshot of your code?

If you think you really scrambled the code in this puzzle, try using the reset button (looks a bit like :arrows_counterclockwise:). You don’t need to edit the function calls at the bottom, just the return statement in the function definition:

function lighter {

  ...

  return ...;
}

–Frankie