# 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) {
svg.append('rect')
.transition()
.delay(17*location)
.attr('width', 30)
.attr('height', 30)
.attr('x', location)
.attr('y', 50)
.attr('fill', color);
jump();
location = location + 30;
}
drawSquare('red');
drawSquare('orange');
drawSquare('yellow');
drawSquare('green');
drawSquare('blue');
drawSquare('indigo');
drawSquare('violet');
``````

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);

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)');
}
``````
4 Likes

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

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

4 Likes

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.

–Frankie

6 Likes

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

Should be location= location + 30

JavaScript is case sentive .

3 Likes

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.

~Jon

3 Likes

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

Hi,

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.

–Frankie

4 Likes

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.

–Scott.

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.

~Jon

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.

–Frankie

1 Like