The aim of this puzzle: Repair the spaceship by modifying its attributes.
Walkthrough of the solution: There are three things wrong with the ship:
- The
crossbarshould be filled'grey' - The
rightWingshould have a height of 200 - The
cabinshould have a radius of 30 and a'cy'of 130.
To change each of these attributes you use the .attr() function. It takes two arguments inside of its parentheses which are separated by a comma. The first argument is a string, so it’s surrounded by quotation marks. This should be the name of the attribute you want to change, like: 'fill' or 'x'. The second argument is the value for that attribute, and it might be a string or number, like: 'grey' or 200. So, first find the identifier you want to change and follow the .attr() chain until you see the name of the property you need to adjust. Then inside that same set of parentheses as the property name, change the value (either a number or a string).
Sample code solution:
(Tap below to reveal)
leftWing.attr('width', 30)
.attr('height', 200)
.attr('x', 60)
.attr('y', 30);
rightWing.attr('width', 30)
.attr('height', 200)
.attr('x', 210)
.attr('y', 30);
crossbar.attr('width', 150)
.attr('height', 10)
.attr('x', 75)
.attr('y', 125)
.attr('fill', 'grey');
cabin.attr('r', 30)
.attr('cx', 150)
.attr('cy', 130);
JavaScript Concepts: Member Expression, Identifiers
D3 Concepts: .attr(‘width’,), .attr(‘height’,), .attr(‘x’,), .attr(‘y’,), .attr(‘fill’,), .attr(‘cx’,), .attr(‘cy’,), .attr(‘r’,)
Additional Code (hidden code that runs before the puzzle’s code):
svg.attr('transform','translate(0,-20)');
var leftWing = svg.append('rect');
var rightWing = svg.append('rect');
var crossbar = svg.append('rect');
var cabin = svg.append('circle');
leftWing.attr('fill','rgb(153,153,153');
rightWing.attr('fill','rgb(153,153,153)');
cabin.attr('fill','rgb(28,28,28)');
