Stoplight explainer

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([
if (light === 'stop'){
if (light === 'go'){
if (light === 'slow'){

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

1 Like

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

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') {

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 :slight_smile:

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

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.

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.


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

Keep up your curiosity!
H :slight_smile:


I can’t solve it

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 :slight_smile:

1 Like

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

Hey @Muzikanwi1special,

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 :slight_smile:

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 :slight_smile:


Hello @Horse,
Your if statements are nesting instead of one after another.

So put end } after each if. Example:

if (light === ‘stop’) {
if (light === ‘slow’) {
if (light === ‘go’) {

Hope that helps :slight_smile:

1 Like

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