Gabonese Flag Fixer Puzzle Explainer


Aim of the puzzle:
Use the attribute method .attr() to set the 'x' and 'y' positions of an SVG rectangle.

Walk through of the solution:
The attribute method .attr() is used to set or modify the attributes of SVG shapes. It takes two arguments: the name of the attribute to change, and the value for the attribute. To define the position of an SVG rectangle, use .attr() to set a value for both 'x' and 'y'. The 'x' attribute defines the amount of space to the left of a rectangle. The 'y' attribute defines the amount of space on top of a shape.

In the code that you start off with, greenStripe already has values for 'x' and 'y' but they are incorrect. In this puzzle, you’ll change those values so greenStripe is in the right position.

To complete the puzzle, change both the 'x' and 'y' values to 0.

Sample code solution:
(Tap below to reveal)


JavaScript Concepts: Variable
D3 Concepts: Attribute
Additional Code:

var greenStripe = svg.append('rect').attr('fill','#4CAF50').attr('width',90).attr('height',33);
var yellowStripe = svg.append('rect').attr('fill','#FFEB3B').attr('x',0).attr('y',33).attr('width',90).attr('height',33);
var blueStripe = svg.append('rect').attr('fill','#2196F3').attr('x',0).attr('y',66).attr('width',90).attr('height',33);

listed #2