Rainbow Hopper explainer

The aim of this puzzle: Make the grasshopper jump and create a rainbow of squares.
Walkthrough of the solution: When you run the code, you’ll just see one violet square – this is because all the rectangles are drawn on top of each other in the same location: x=0, y=50. What you’d like is for the x value to be different for each one. To do this, change .attr('x', 0) to .attr('x', location) so that each square gets set to the value of the location variable. If you run the code now, it still doesn’t work! That’s because location is always equal to zero. Inside the loop, the location value should increase after each square is drawn. It should go up by 30 each time because that’s how wide each square is. So, after the command to add a square you need to add: location = location + 30; That takes the current value of location, adds 30, and then stores the answer back inside the location variable. If you run the code now, the squares will draw in order! Just one more thing: the grasshopper needs to jump. All you need to do is call the jump() function somewhere inside of the drawSquare function.
Sample code solution:
(Tap below to reveal)

var location = 0;
function drawSquare(color) {
      .attr('width', 30)
      .attr('height', 30)
      .attr('x', location)
      .attr('y', 50)
      .attr('fill', color);
  location = location + 30;

JavaScript Concepts: Binary Expression (+), Code Block (function), Identifiers, Member Expression
D3 Concepts: .append(), .transition(), .delay(), .attr(‘width’,), .attr(‘height’,), .attr(‘x’,), .attr(‘y’,), .attr(‘fill’,)
Additional Code (hidden code that runs before the puzzle’s code):

//Create Group
var grasshopper = svg.append('g');
var myColor = d3.rgb(115, 255, 115);

//Add parts to group
var head = grasshopper.append('path').attr('fill',myColor).attr('d','M761.15,157.3H730.21c0-34.59,8.18-68.32,22.31-99.37,6.51-14.31-4.16-30.55-19.88-30.55a21.86,21.86,0,0,0-19,11.09A239.76,239.76,0,0,0,681.89,157.3h0A216.16,216.16,0,0,0,818.08,358.12l10.4,4.14V224.63A67.33,67.33,0,0,0,761.15,157.3Z');
head.attr('transform', 'translate(-15 0) scale(0.05)');

var body = grasshopper.append('path').attr('fill',myColor).attr('d','M501.2,92.5,339,27.38c0,52.43,24.29,110.07,45.28,129.92H171.11c20.5,112.51,165,205,308.15,205h0L410.6,431c-15.37,15.37-4.49,41.65,17.25,41.65h0a24.4,24.4,0,0,0,17.25-7.15L548,362.62l1.29.53v84.25c0,13.44,10.51,25,23.94,25.21A24.4,24.4,0,0,0,598,448.22v-86h48.8v85.14c0,13.43,10.51,25,23.94,25.21a24.4,24.4,0,0,0,24.86-24.4v-86h0C695.65,239.87,622,142,501.2,92.5Z');
body.attr('transform', 'translate(-15 0) scale(0.05)');

//Initial Location
grasshopper.attr('transform','translate(10 20)');

//Horizontal Index
var x = 0;

function jump(){
    grasshopper.transition().delay(x*500/30).attr('transform','translate('+(x+=15)+' 10)').transition().attr('transform','translate('+(x+=15)+' 20)');

I’m just can’t pass this test. Can someone help me?

Hey @CrispyCharlie,

Can you share a screenshot(s) of your code so we can have a look, and hopefully be able to give you some pointers?

H :slight_smile:

Hey @CrispyCharlie,

You’re using the string 'location', rather than the variable location inside your .attr() call.

Try updating it to be attr('x', location), rather than attr('x', 'location').

H :slight_smile:


So I can’t get this to run and complete and I’ve got no idea what I’m doing wrong. Anyone with any ideas?

The first line of code: var location = 0; creates the location variable and then sets it equal to 0.

Inside your drawSquare function declaration, you use the var keyword again. That means, create a new variable called location which overwrites your old location. If you remove that line and instead start by adding the location identifier, you can write out: location = location + 30; This uses the existing location variable instead of trying to create a new one each time the drawSquare function runs.



Still, i m unable to crack this puzzle, pl help

Should be location= location + 30
JavaScript is case sentive .


Still not solved bro

You have the variable called Location at the top but its not got a capital when used in the delay(), so you need to change that to be: delay(17 * Location).

Give that a try and let me know.



Hi! I can’t solve this puzzle. Need help! Thanks!


Your jump() function call and location update are not inside of the drawSquare function definition. If you move these 2 lines of code inside of the curly brackets {} then they will run each time drawSquare() runs.

Simply tap above the }; and re-type jump() and location = location + 30. You should see the commands get indented to indicate they are inside the brackets.



So I passed the test, I got it to run really good. The thing is that the first box starts after one empty box space, not from the beginning. Why is that?

Got it nevermind. I added another location=location+30 outside the drawsquare function

While that will work, it SHOULD start with a lower-case letter. Every language has coding conventions, which make it easier for others to understand what you write, and the convention for JavaScript is for variables to start with lower-case letters.


Very true, and its a good thing to point out - and I probably should have done so too.

I’m not actually aware if the app mentions it as a coding convention though, so I thought it best to simply point out the place where the case of the variables didn’t match, as others had mentioned the case sensitivity.


Dis is da way to do

1 Like

its bugged or what… cant solve it

You’re running into the same hiccup some other people have seen. If you remember the Ukraine to Haiti puzzle, you don’t need to use the var keyword if you’re just updating an existing variable value. var is only needed when creating a new variable.


1 Like