Robot Repair explainer

[grasshopperexplainer]

The aim of this puzzle: Fix the robot’s arm and eye.
Walkthrough of the solution: Fixing the left eye is simple. You need to use the leftEye button and then the .attr() button. Now you can change an attribute of the left eye. To make the eye bigger, you want a radius of 9. The radius attribute is named 'r', so the full command is leftEye.attr('r', 9); The right arm needs more work. First, we’ll set the size of the arm by changing its height to 5 with the 'height' attribute. After that, you can keep adding onto the same command in the same way leftArm does. The 'width' attribute should be set to 25 using .attr('width', 25). To make the color white, you use the 'fill' attribute and set it to the string 'white'. The 'x' and 'y' attributes determine the location of the arm: 'x' should be set to 130, and 'y' should be set to 75. Overall, the rightArm command should look very similar to the leftArm command – just with different 'x' and 'y' values.
Sample code solution:
(Tap below to reveal)

leftArm.attr('height', 5)
  .attr('width', 25)
  .attr('fill', 'white')
  .attr('x', 45)
  .attr('y', 75);
rightArm.attr('height', 5)
  .attr('width', 25)
  .attr('fill', 'white')
  .attr('x', 130)
  .attr('y', 75);
leftEye.attr('r', 9);

JavaScript Concepts: Identifiers, Member Expression
D3 Concepts: .attr(‘height’,), .attr(‘width’,), .attr(‘fill’,), .attr(‘x’,), .attr(‘y’,), .attr(‘r’,)
Additional Code (hidden code that runs before the puzzle’s code):

var head = svg.append('rect');
head.attr('width', 50).attr('height', 30).attr('x', 75).attr('y', 20).attr('fill', 'grey');

var neck = svg.append('rect');
neck.attr('width', 10).attr('height', 10).attr('x', 95).attr('y', 50).attr('fill', 'white');

var body = svg.append('rect');
body.attr('width', 60).attr('height', 50).attr('x', 70).attr('y', 60).attr('fill', 'grey');

var leftEye = svg.append('circle').attr('fill', 'yellow').attr('cx', 89).attr('cy', 35).attr('r', 5);
var rightEye = svg.append('circle').attr('fill', 'yellow').attr('cx', 111).attr('cy', 35).attr('r', 9);
var leftArm = svg.append('rect');
var rightArm = svg.append('rect');

var leftFoot = svg.append('rect');
leftFoot.attr('height', 10).attr('width', 10).attr('fill', 'white').attr('x', 80).attr('y', 110);

var rightFoot = svg.append('rect');
rightFoot.attr('height', 10).attr('width', 10).attr('fill', 'white').attr('x', 110).attr('y', 110);

[Hooperravi]

Pl tell me what’s wrong in my code…
Screenshot Also attached

[Grasshopper_Heather]

Hey @Hooperravi,

Rather than having multiple rightArm calls in your code, try chaining all the attr calls together.

Like this:

rightArm.attr('height', 5).attr('width', 25).attr('fill', 'white')

And keep adding .attr() to the same chain, until you have the rightArm fully defined.

H

[Hooperravi]

But i m not able to do like u are saying, because keyboard don’t appears at that time

[mysteryguy3039]

It is a bit finicky to chain them, but possible. You have to tap on the .attr of what you just added (which should select the whole .attr()), then add another .attr() from the given buttons at the bottom.
Finishing a .attr() will have it reset to the next line of code, but taping on it again will highlight it again and make it chainable.
Hope this helps! Feel free to reply if otherwise.

[Hooperravi]

Yeah, it was helpful…

[Evangel216]

What did I do wrong, I can’t seem to see it. Maybe someone can help😅

Hopefully that screenshot shows up…

[Grasshopper_Heather]

Hey @Evangel216,

This is a tricky one to catch! You’ve put an .attr() call inside another .attr() call. That’s what you’re getting feedback to add 5th one, as the puzzle only sees 4 directly attached to rightArm.

Try changing .attr('fill', 'white'.attr('x', 130)) to be .attr('fill', 'white').attr('x', 130).

Hope this helps!
H

[Mowiz]

Suggestion: the checker may (should?) ignore case in some cases (pun intended ;))

Ie I wrote uppercase White and the arm was painted white correctly, but the checker asks me to add the missing lowercase white.

[Grasshopper_Frankie]

Thanks for the suggestion – I agree. I’m adding case insensitivity to places where it still gives the correct output (mostly with colors in the 'fill' attribute). Please note that attribute names, like 'fill', or 'click' in .on('click',...) are case-sensitive.

–Frankie

[Jorle_Robles]

I’m not sure if I don’t see something, or it’s nothing but I don’t get the congratulation screen this is my screenshot, thanks in advance

[Grasshopper_Frankie]

You have an extra .attr('x',...) for the rightArm. Notice how you set it to 45 then immediately set it to 130. If you get rid of the 45 attr on the rightArm, you should solve this puzzle.

–Frankie

[Jorle_Robles]

You are totally right! Thanks I was so dumb ha ha ha

[Asim]

Please share additional code that runs at the start

[Grasshopper_Frankie]

Here is the code for the other parts of the robot:

var head = svg.append('rect').attr('width', 50).attr('height', 30).attr('x', 75).attr('y', 20).attr('fill', 'grey');
var neck = svg.append('rect').attr('width', 10).attr('height', 10).attr('x', 95).attr('y', 50).attr('fill', 'white');
var body = svg.append('rect').attr('width', 60).attr('height', 50).attr('x', 70).attr('y', 60).attr('fill', 'grey');

var leftEye = svg.append('circle').attr('fill', 'yellow').attr('cx', 89).attr('cy', 35).attr('r', 5);
var rightEye = svg.append('circle').attr('fill', 'yellow').attr('cx', 111).attr('cy', 35).attr('r', 9);

var leftArm = svg.append('rect');
var rightArm = svg.append('rect');

var leftFoot = svg.append('rect').attr('height', 10).attr('width', 10).attr('fill', 'white').attr('x', 80).attr('y', 110);
var rightFoot = svg.append('rect').attr('height', 10).attr('width', 10).attr('fill', 'white').attr('x', 110).attr('y', 110);

–Frankie

[Al_Marshall]

Please help, i have NO idea what is going wrong…

[Grasshopper_Frankie]

On the rightArm, the .attr('x', 130) is attached to the string 'white' instead of the previous .attr(). One way to spot this mistake is if you see 2 parentheses back to back )) that means something is nested instead of chained.

–Frankie

[JFMINEBOY_Joao_Felip]

**indent preformatted text by 4 spaces**

[_Sanna]

can someone tell me what I did wrong?

[aawe]

I’m not able to see the full robot. It seems to be slightly off screen.

Here’s a screenshot: