 # Rainbow Hopper explainer

#22

I need help with rainbow hopper

#23

Hi,

Have you looked at the explainer page?

–Frankie

#24

How come the delay doesnt get longer if delay is 17 * 30 and then *60, *90…?

#25

The delay actually does get longer, the reason the animations seem to be evenly spaced is because they all start their delay timers at about the same time. When you run the code, each `drawSquare()` runs right after the previous one; the whole thing probably takes less than a millisecond.

``````red:    17*0   =  0ms
orange: 17*30  =  510ms
yellow: 17*60  = 1020ms
green:  17*90  = 1530ms
blue:   17*120 = 2040ms
indigo: 17*150 = 2550ms
violet: 17*180 = 3060ms
``````

The “17” multiplier is used to get the delay close to 0.5 seconds per box. A more precise number would be 16.666…

–Frankie

#26

I Couldn’t get to write or tap the colors and blank space in the a draw square box please I Need Help. I Don’t Know What I Am doing Wrong

#27

Perhaps you deleted the `color` parameter inside the `drawSquare()` function declaration?

If you have `function drawSquare(__) {`, that means when you call the `drawSquare()` function, it won’t use any input. You want to have `function drawSquare(color)`, so that you can send an input to the `drawSquare()` function call.

–Frankie

#28

So I’m messing with this code trying to put a second line of colors below the first. I have changed the ‘y’ but nothing happens. I can change the location to 210 and print a consecutive line but can’t get one below. I know this isn’t part of the exercise but it would be good information.

• Thank you

#29

It’s awesome that you’re expanding on the puzzle : )

The code for the grasshopper animation is hidden, so you won’t be able to make that jump down a row within this puzzle. But it is possible to make boxes on a different row.

The main idea is you need to calculate what the `'x'` and `'y'` value for each box will be. Since each box is `30` pixels wide and tall, you increase `x` by `30` to get the space 1 to the right. Similarly, the space 1 box down would mean increasing `'y'` by `30`.

You can keep track of which row you’re on by making a new variable called `row` that starts as `0`. And inside of the function, change `('y', 50)` into `('y', 50 + row)`.

Then, when you want to change rows, you can increase the row value by `30` and set `location` (which is really just the ‘x’ coordinate) back to `0`.

This will put the boxes where you want them, but they won’t pop up in the right order, this is because the `delay` is calculated using the `location` variable. What you want is to calculate the delay based on the number of boxes on the screen. Basically, count the number of boxes created and increase the delay based on that.

You can create a new variable called `numBoxes` and then inside the function, add 1 to it each time. Then to calculate the delay, use `17*numBoxes*30` instead of `17*location`.

``````var location = 0;
var row = 0;
var numBoxes = 0;

function drawSquare(color) {
svg.append('rect').transition().delay(17*numBoxes*30).attr('width',30).attr('height',30).attr('x',location).attr('y',50+row).attr('fill',color);
jump();
location = location + 30;
numBoxes = numBoxes + 1;
}

drawSquare('red');
drawSquare('orange');
drawSquare('yellow');
drawSquare('green');
drawSquare('blue');
drawSquare('indigo');
drawSquare('violet');
row = row + 30;
location = 0;
drawSquare('red');
``````

–Frankie