# Stoplight explainer

#1

The aim of this puzzle: Use if statements to control what color of box to draw, creating traffic light controls.
Walkthrough of the solution: You’ll need to add two if statements to complete this puzzle. One if statement should be checking to see if the randomly selected value for `light` is equal to `===` `'go'`, the other should check to see if `light` is equal to `'slow'`. You can do this check within the if statement’s condition `()`. Within the block `{}` of the if statements you should add the `drawBox()` function so that a yellow box is drawn if the `light`'s value is `'slow'` and a green box is drawn if the value is `'go'`.
Sample code solution:
(Tap below to reveal)

``````var light = pickRandom([
'stop',
'go',
'slow'
]);
print(light);
if (light === 'stop'){
drawBox(red)
}
if (light === 'go'){
drawBox(green)
}
if (light === 'slow'){
drawBox(yellow)
}
``````

JavaScript Concepts: Code Block (if statement), Calling Functions, Conditionals (===), Data Structures (array), Identifiers, Variable Declaration
Grasshopper Concepts: pickRandom(), drawBox()

Problem of lights
#2

Why I couldn’t use 0, 1, 2 for stop, slow and go

#3

Hey @Johnson_A,

I think you’re referencing Array Indexing — which is a great question!

In this puzzle one item is picked from the array using the `pickRandom()` function. This means the `light` variable isn’t holding an array, but a single string (either `'stop'`, `'go'` or `'slow'`).

If there wasn’t a `pickRandom()` function, and the variable `light` was holding an array, you could use Array Indexing to access an item’s value within the if statement, like:

``````if (light[1] === 'stop') {
drawBox(red)
}
``````

The code above would check if the second item in the array is equal to `'stop'`. In this case, the second item is `'go'`, so the test is false and the code would not run. Using Array Indexing like this would require a lot of if statements, if you didn’t know where `'stop'`, `'go'` or `'slow'` were positioned the array.

H

#4

My App is still rejecting the solution suggested by grasshopper. The screen shot of the solution is hereby attached

#5

Is there a reason why this string of code wouldn’t work?
In the previous problem where it makes you flip a coin, the drawBoxes(‘wrw’) function draws boxes without needing to type the full words out for the colour.

#6

Sometimes checking for a solution is limited not based upon all the possible ways to solve the issue. Which with coding and the infinite possibilities of solving an issue, things can be hard to evaluate.

#7

Hey @J_B,

`drawBox()` and `drawBoxes()` are different functions and so do different things. `drawBox()` takes a color and draws a box of that color,. Whereas `drawBoxes()` takes letters and draw boxes for each letter. `drawBox('r')` won’t work because the function `drawBox()` doesn’t know what to do with a letter — it’s looking for a color.

In this puzzle you’re limited to only use `drawBox()` (`drawBoxes()` is not available on the keyboard), meaning you’ll need to type out the full color.

However, if you go into the Playground, you can re-create this puzzle and use `drawBoxes()` instead of `drawBox() and create the same results.

We purposely limit the key options when introducing new concepts (such as if statements).

H

#8

I can’t solve it

#9

Hello @leen_kazzara ,
You are using a string/text as your comparison. So anything like ‘light 1’ will always be just that ‘light 1’ not the variable or array light.

So make your change from ‘light 1’ to just be light without quotes and you got it.

Good luck

#10

Hi @Muzikanwi1special. I’m new at this but I think you need semicolons at the end of your IF lines to separate them.

#11

Thanks a screenshot of the explainer code from above. Try taking a screenshot of your code from the app and that way we can have a look to see if we can spot what’s going wrong.

H

#12

Great eye, @RedRing0fLife.

Semi-colons are important in JavaScript. In Grasshopper, we automatically add them for you, so you don’t get tripped up over simply missing one symbol.

In this case, the screenshot of the code is from the explainer, which is just an example of what the solution may look like (i.e. not real code).

Keep being observant!
H

#14

#15

Hello @Horse,

So put end } after each if. Example:

if (light === ‘stop’) {
drawBox(red);
}
if (light === ‘slow’) {
drawBox(yellow);
}
if (light === ‘go’) {
drawBox(green);
}

Hope that helps

#16

Just a small bug in the problem description- it should say “When `light` is `go`” the second time, not “When `light` is `slow`”. Thanks.