Rainbow Hopper explainer

#1

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: There is hidden code that runs before the puzzle’s code that sets the SVG Shapes attributes, and creates the function `jump`.

Grasshopper Custom Functions
Rainbow hopper tutorial
#2

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

#3

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

#4

#5

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

#6

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?

#7

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

#8

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

#9

Should be location= location + 30

JavaScript is case sentive .

#10

Still not solved bro

#11

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

#12

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

#13

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

#15

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?

#16

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

#17

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.

#18

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

#19

#20

its bugged or what… cant solve it

#21

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