# Robot Repair explainer

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);
``````
3 Likes

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

1 Like

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

3 Likes

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

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.

3 Likes

2 Likes

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

Hopefully that screenshot shows up…

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

1 Like

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.

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

2 Likes

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

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

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

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

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.
``**indent preformatted text by 4 spaces**``