The aim of this puzzle: Make the drawSquare function color the box.
Walkthrough of the solution: The drawCircle function works just the way the drawSquare function should except it draws a circle instead of a rectangle. If you add a line to run the drawSquare function, for example drawSquare('red'); you’ll see a black box. Take a look inside the drawSquare function definition – the code inside the curly brackets. Notice the rectangle has all the attributes it needs except the 'fill'. That means it will use the default color which is black. So you need to add an .attr(), but what color do you need to set it to? It should be whichever color is written in the parentheses when you run the function. drawSquare('red') should mean .attr('red), and drawSquare('orange') should mean .attr('orange'). If you look at the drawSquare function declaration you’ll see a parameter called color. That color is a variable that will be assigned a value, such as 'red' or 'white', when you run the function. Wherever that variable is written inside of the curly brackets, it will have the value it was assigned by the function call.
Sample code solution:
(Tap below to reveal)
function drawCircle(color) {
circle.attr('r', 15)
.attr('cx', 15)
.attr('cy', 15)
.attr('fill', color);
}
function drawSquare(color) {
square.attr('width', 30)
.attr('height', 30)
.attr('x', 30)
.attr('y', 0)
.attr('fill', color);
}
drawCircle('blue');
drawSquare('green');
JavaScript Concepts: Code Block (function), Member Expression, Identifiers
D3 Concepts: .attr(‘r’,), .attr(‘cx’,), .attr(‘cy’,), .attr(‘fill’,), .attr(‘width’,), .attr(‘height’,), .attr(‘x’,), .attr(‘y’,)
Additional Code (hidden code that runs before the puzzle’s code):
var circle = svg.append('circle');
var square = svg.append('rect');
4 Likes
I don’t understand the connection between the color string and the color parameter? How did it know that green is supposed to be green?
1 Like
Hi @LuellaStrong,
The color of an SVG shape is set via the 'fill' attribute. In this case, the 'fill' attribute doesn’t have a color string directly used (like ('fill', 'red')) but rather references a parameter (like a variable, but only used inside a function) like ('fill', color).
The value that color holds is passed through the function call. Since the function is defined like function drawCirlce(color), when the function is called, whatever value is placed inside the parentheses is treated as the parameter color.
For example, in drawCircle('blue'), 'blue' is treated as the parameter color when the function runs. This means wherever color is referenced inside the function, it is replaced with 'blue'. So ('fill', color) becomes ('fill', 'blue').
Hopefully this helps!
H 
1 Like
How do you fix this problem?
Your function definitions each have an extra parameter: The blue after color, and the green after color. Those blue and green variables are not used inside of the function definition {}, so they should be removed.
Why does this happen?
The Function Definition describes what a function does. It usually has a name, inputs, and outputs.
The Function Call sends an order to run the function using specific input values.
When you run a function like drawCircle('blue'), your code thinks, “There should be a Function Definition for a function named drawCircle. It should also have 1 parameter that I can store my 'blue' string inside of.” It will find the code function drawCircle(color, blue), and see function drawCircle means this is a function definition for drawCircle. Then it looks inside the parentheses and sees this function requires 2 input values: 1 for the color parameter, and 1 for the blue parameter. But when you called your function, you only gave it 1 value, the string 'blue'. It will start filling in the parameters left-to-right, so it takes the 'blue' string and stores it in the color parameter, and then since the function call didn’t have a 2nd input, the blue parameter will stay empty (its value will be undefined). The block of the function definition never needed the 2nd parameter’s value – the blue variable/parameter is never used, just the color variable/parameter.
So, the code will output what you expected, but it’s best not to have extra parameters that the function doesn’t need. Sometimes there can be issues if the “extra parameter” has the same name as some other variable you need to use. For example, if you had circle as an extra parameter, then your code wouldn’t work. The circle would be undefined and then circle.attr(...) would cause an error because you can’t set attributes of an empty variable – they don’t have an attr property.
–Frankie
2 Likes
Can you pleas add a support to hebrow languag?
2 Likes
