French Flag Fixer explainer

Puzzle Explainer
#1

French Flag Fixer

The aim of this puzzle: To restore the French Flag by changing the width and height of the stripes.
Walkthrough of the solution: Each stripe of the French flag is stored in a variable and you access their attributes of ‘height’ and ‘width’ using the function call .attr(). Whatever comes before the dot is the variable name of the stripe color the .attr() function call will change. Inside of the parentheses, you tell the .attr() which attribute you want to change and what the value should be. All of the stripes should be 50 wide and 100 high. That means you need to change the width of the blue stripe to 100. That looks like blueStripe.attr('width', 100). Notice that 'width' is in quotes because the .attr() function is always looking for a string. You can change the height of the white stripe in a similar way – just change the value of its height attribute to 100.
Sample code solution:
(Tap below to reveal)

blueStripe.attr('width', 50)
  .attr('height', 100);
whiteStripe.attr('width', 50)
  .attr('height', 100);
redStripe.attr('width', 50)
  .attr('height', 100);

JavaScript Concepts: Member Expression, Indexing
D3 Concepts: .attr(‘width’,), .attr(‘height’,)

Additional Code (hidden code that runs before the puzzle’s code):

var blueStripe = svg.append('rect')
    .attr('fill','blue')
    .attr('x',50)
    .attr('y',50);
var whiteStripe = svg.append('rect')
    .attr('fill','white')
    .attr('x',100)
    .attr('y',50);
var redStripe = svg.append('rect')
    .attr('fill','red')
    .attr('x',150)
    .attr('y',50);
3 Likes
#2

I want to know about all the predefined function you use. Its damn simple if you tell to replace green with white where are the real syntax

#3

Hey @Suraj_Chaudhary,

You can find out more about the Grasshopper Custom Functions here, however this specific puzzle doesn’t use any of those.

Instead, it is using the D3 library to create SVG shapes. There is a little bit of additional code that runs before your code in this puzzle, and that’s included in the explainer above.

Hope this helps!
H :slight_smile:

#4

I’m not understanding why this puzzle saying to make both numbers to 50?? This is wrong one has to be 100